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

@@ -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`;

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<GatewayResponse> => {
+  static fetchGateways = async (): Promise<GatewayBond[]> => {
     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<UptimeStoryResponse> =>

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,
   };
 }

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<GatewayEnrichedRowType>();
   const [status, setStatus] = React.useState<number[] | undefined>();
   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<GatewayResponseItem | undefined>();
+  const [selectedGateway, setSelectedGateway] = React.useState<GatewayBond | undefined>();
   const { gateways } = useMainContext();
   const { id } = useParams<{ id: string | undefined }>();
 

explorer/src/pages/Gateways/index.tsx

@@ -81,6 +81,24 @@ export const PageGateways: FCWithChildren = () => {
         </MuiLink>
       ),
     },
+    {
+      field: 'performance',
+      headerName: 'Routing Score',
+      renderHeader: () => <CustomColumnHeading headingTitle="Routing Score" />,
+      width: 150,
+      headerAlign: 'left',
+      headerClassName: 'MuiDataGrid-header-override',
+      renderCell: (params: GridRenderCellParams) => (
+        <MuiLink
+          sx={{ ...cellStyles }}
+          component={RRDLink}
+          to={`/network-components/gateway/${params.row.identityKey}`}
+          data-testid="pledge-amount"
+        >
+          {`${params.value}%`}
+        </MuiLink>
+      ),
+    },
     {
       field: 'host',
       renderHeader: () => <CustomColumnHeading headingTitle="IP:Port" />,

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;