From 8c0ab7c6972bec18eeaa99ee160b071b52e04476 Mon Sep 17 00:00:00 2001 From: Pierre Dommerc Date: Thu, 26 Jan 2023 18:39:26 +0100 Subject: [PATCH] feat(explorer): add routing score on gateway list (#2913) * feat: adding routing score on gateway list * feat(explorer): adding routing score on gateway list * feat(explorer): add routing score on gateway list --- explorer/src/api/constants.ts | 2 +- explorer/src/api/index.ts | 12 +++++++++--- explorer/src/components/Gateways.ts | 10 +++++----- explorer/src/pages/GatewayDetail/index.tsx | 6 +++--- explorer/src/pages/Gateways/index.tsx | 18 ++++++++++++++++++ explorer/src/typeDefs/explorer-api.ts | 10 ++++++++-- 6 files changed, 44 insertions(+), 14 deletions(-) diff --git a/explorer/src/api/constants.ts b/explorer/src/api/constants.ts index e0488df565..81f6592c48 100644 --- a/explorer/src/api/constants.ts +++ b/explorer/src/api/constants.ts @@ -9,7 +9,7 @@ export const OVERVIEW_API = `${API_BASE_URL}/overview`; export const MIXNODE_PING = `${API_BASE_URL}/ping`; export const MIXNODES_API = `${API_BASE_URL}/mix-nodes`; export const MIXNODE_API = `${API_BASE_URL}/mix-node`; -export const GATEWAYS_API = `${NYM_API_BASE_URL}/api/v1/gateways`; +export const GATEWAYS_API = `${NYM_API_BASE_URL}/api/v1/status/gateways/detailed`; export const VALIDATORS_API = `${VALIDATOR_BASE_URL}/validators`; export const BLOCK_API = `${NYM_API_BASE_URL}/block`; export const COUNTRY_DATA_API = `${API_BASE_URL}/countries`; diff --git a/explorer/src/api/index.ts b/explorer/src/api/index.ts index 37e68b8096..49dcb04e85 100644 --- a/explorer/src/api/index.ts +++ b/explorer/src/api/index.ts @@ -15,7 +15,6 @@ import { CountryDataResponse, DelegationsResponse, UniqDelegationsResponse, - GatewayResponse, GatewayReportResponse, UptimeStoryResponse, MixNodeDescriptionResponse, @@ -27,7 +26,10 @@ import { StatusResponse, SummaryOverviewResponse, ValidatorsResponse, + GatewayBondAnnotated, + GatewayBond, } from '../typeDefs/explorer-api'; +import { toPercentIntegerString } from '../utils'; function getFromCache(key: string) { const ts = Number(localStorage.getItem('ts')); @@ -89,9 +91,13 @@ export class Api { return response.json(); }; - static fetchGateways = async (): Promise => { + static fetchGateways = async (): Promise => { const res = await fetch(GATEWAYS_API); - return res.json(); + const gatewaysAnnotated: GatewayBondAnnotated[] = await res.json(); + return gatewaysAnnotated.map(({ gateway_bond, performance }) => ({ + ...gateway_bond, + performance: toPercentIntegerString(performance), + })); }; static fetchGatewayUptimeStoryById = async (id: string): Promise => diff --git a/explorer/src/components/Gateways.ts b/explorer/src/components/Gateways.ts index aa055a71d0..1f81900ddc 100644 --- a/explorer/src/components/Gateways.ts +++ b/explorer/src/components/Gateways.ts @@ -1,4 +1,4 @@ -import { GatewayResponse, GatewayResponseItem, GatewayReportResponse } from '../typeDefs/explorer-api'; +import { GatewayResponse, GatewayBond, GatewayReportResponse } from '../typeDefs/explorer-api'; export type GatewayRowType = { id: string; @@ -8,6 +8,7 @@ export type GatewayRowType = { host: string; location: string; version: string; + performance: string; }; export type GatewayEnrichedRowType = GatewayRowType & { @@ -28,13 +29,11 @@ export function gatewayToGridRow(arrayOfGateways: GatewayResponse): GatewayRowTy bond: gw.pledge_amount.amount || 0, host: gw.gateway.host || '', version: gw.gateway.version || '', + performance: gw.performance, })); } -export function gatewayEnrichedToGridRow( - gateway: GatewayResponseItem, - report: GatewayReportResponse, -): GatewayEnrichedRowType { +export function gatewayEnrichedToGridRow(gateway: GatewayBond, report: GatewayReportResponse): GatewayEnrichedRowType { return { id: gateway.owner, owner: gateway.owner, @@ -47,5 +46,6 @@ export function gatewayEnrichedToGridRow( mixPort: gateway.gateway.mix_port || 0, routingScore: `${report.most_recent}%`, avgUptime: `${report.last_day || report.last_hour}%`, + performance: gateway.performance, }; } diff --git a/explorer/src/pages/GatewayDetail/index.tsx b/explorer/src/pages/GatewayDetail/index.tsx index 752b1be58a..6989fc2216 100644 --- a/explorer/src/pages/GatewayDetail/index.tsx +++ b/explorer/src/pages/GatewayDetail/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Alert, AlertTitle, Box, CircularProgress, Grid } from '@mui/material'; import { useParams } from 'react-router-dom'; -import { GatewayResponseItem } from '../../typeDefs/explorer-api'; +import { GatewayBond } from '../../typeDefs/explorer-api'; import { ColumnsType, DetailTable } from '../../components/DetailTable'; import { gatewayEnrichedToGridRow, GatewayEnrichedRowType } from '../../components/Gateways'; import { ComponentError } from '../../components/ComponentError'; @@ -69,7 +69,7 @@ const columns: ColumnsType[] = [ /** * Shows gateway details */ -const PageGatewayDetailsWithState = ({ selectedGateway }: { selectedGateway: GatewayResponseItem | undefined }) => { +const PageGatewayDetailsWithState = ({ selectedGateway }: { selectedGateway: GatewayBond | undefined }) => { const [enrichGateway, setEnrichGateway] = React.useState(); const [status, setStatus] = React.useState(); const { uptimeReport, uptimeStory } = useGatewayContext(); @@ -130,7 +130,7 @@ const PageGatewayDetailsWithState = ({ selectedGateway }: { selectedGateway: Gat * Guard component to handle loading and not found states */ const PageGatewayDetailGuard: FCWithChildren = () => { - const [selectedGateway, setSelectedGateway] = React.useState(); + const [selectedGateway, setSelectedGateway] = React.useState(); const { gateways } = useMainContext(); const { id } = useParams<{ id: string | undefined }>(); diff --git a/explorer/src/pages/Gateways/index.tsx b/explorer/src/pages/Gateways/index.tsx index aa2b7077bd..ab93e4c4eb 100644 --- a/explorer/src/pages/Gateways/index.tsx +++ b/explorer/src/pages/Gateways/index.tsx @@ -81,6 +81,24 @@ export const PageGateways: FCWithChildren = () => { ), }, + { + field: 'performance', + headerName: 'Routing Score', + renderHeader: () => , + width: 150, + headerAlign: 'left', + headerClassName: 'MuiDataGrid-header-override', + renderCell: (params: GridRenderCellParams) => ( + + {`${params.value}%`} + + ), + }, { field: 'host', renderHeader: () => , diff --git a/explorer/src/typeDefs/explorer-api.ts b/explorer/src/typeDefs/explorer-api.ts index 188a0c3ac0..48cf2091d9 100644 --- a/explorer/src/typeDefs/explorer-api.ts +++ b/explorer/src/typeDefs/explorer-api.ts @@ -116,15 +116,21 @@ export interface StatsResponse { export type MixNodeHistoryResponse = StatsResponse; -export interface GatewayResponseItem { +export interface GatewayBond { block_height: number; pledge_amount: Amount; total_delegation: Amount; owner: string; gateway: Gateway; + performance: string; } -export type GatewayResponse = GatewayResponseItem[]; +export interface GatewayBondAnnotated { + gateway_bond: GatewayBond; + performance: string; +} + +export type GatewayResponse = GatewayBond[]; export interface GatewayReportResponse { identity: string;