adding uptime chart

explorer/src/components/Gateways.ts

@@ -43,6 +43,6 @@ export function gatewayEnrichedToGridRow(
     clients_port: gateway.gateway.clients_port || 0,
     mix_port: gateway.gateway.mix_port || 0,
     routing_score: `${report.most_recent}%`,
-    avg_uptime: `${report.last_day}%`,
+    avg_uptime: `${report.last_day || report.last_hour}%`,
   };
 }

explorer/src/context/gateway.tsx

@@ -8,7 +8,7 @@ import { Api } from '../api';
 
 interface GatewayState {
   uptimeReport?: ApiState<GatewayReportResponse>;
-  //   uptimeStory?: ApiState<UptimeStoryResponse>;
+  uptimeStory?: ApiState<UptimeStoryResponse>;
 }
 
 export const GatewayContext = React.createContext<GatewayState>({});
@@ -31,27 +31,28 @@ export const GatewayContextProvider: React.FC<GatewayContextProviderProps> = ({
     'Failed to fetch gateway uptime report by id',
   );
 
-  //   const [uptimeStory, fetchUptimeHistory, clearUptimeHistory] = useApiState<UptimeStoryResponse>(
-  //     gatewayIdentityKey,
-  //     Api.fetchUptimeStoryById,
-  //     'Failed to fetch gateway uptime history',
-  //   );
+  const [uptimeStory, fetchUptimeHistory, clearUptimeHistory] = useApiState<UptimeStoryResponse>(
+    gatewayIdentityKey,
+    Api.fetchGatewayUptimeStoryById,
+    'Failed to fetch gateway uptime history',
+  );
 
   React.useEffect(() => {
     // when the identity key changes, remove all previous data
     clearUptimeReportById();
-    Promise.all([fetchUptimeReportById()]);
+    clearUptimeHistory();
+    Promise.all([fetchUptimeReportById(), fetchUptimeHistory()]);
   }, [gatewayIdentityKey]);
 
   const state = React.useMemo<GatewayState>(
     () => ({
       uptimeReport,
-      //   uptimeStory,
+      uptimeStory,
     }),
     [
       {
         uptimeReport,
-        // uptimeStory,
+        uptimeStory,
       },
     ],
   );

explorer/src/pages/GateDetail/index.tsx

@@ -68,7 +68,7 @@ const PageGatewayDetailsWithState: React.FC<{ selectedGateway: GatewayResponseIt
 }) => {
   const [enrichGateway, setEnrichGateway] = React.useState<GatewayEnridedRowType>();
   const [status, setStatus] = React.useState<number[] | undefined>();
-  const { uptimeReport } = useGatewayContext();
+  const { uptimeReport, uptimeStory } = useGatewayContext();
 
   React.useEffect(() => {
     if (uptimeReport?.data && selectedGateway) {
@@ -119,12 +119,12 @@ const PageGatewayDetailsWithState: React.FC<{ selectedGateway: GatewayResponseIt
           )}
         </Grid>
         <Grid item xs={12} md={8}>
-          {/* {uptimeStory && (
+          {uptimeStory && (
             <ContentCard title="Routing Score">
               {uptimeStory.error && <ComponentError text="There was a problem retrieving routing score." />}
               <UptimeChart loading={uptimeStory.isLoading} xLabel="date" uptimeStory={uptimeStory} />
             </ContentCard>
-          )} */}
+          )}
         </Grid>
       </Grid>
     </Box>

explorer/src/typeDefs/explorer-api.ts

@@ -201,14 +201,6 @@ export type StatusResponse = {
   };
 };
 
-// export type UptimeReportResponse = {
-//   identity: string;
-//   owner: string;
-//   most_recent: number;
-//   last_hour: number;
-//   last_day: UseButtonParameters;
-// };
-
 export type UptimeTime = {
   date: string;
   uptime: number;