improve stats page

frontend/pages/status/index.js

@@ -1,23 +1,7 @@
-import React, { useEffect, useState, useLayoutEffect } from "react";
+import React from "react";
 import { useStatus } from "../../src/core/hooks";
-import {
-  Heading,
-  Text,
-  Flex,
-  Spacer,
-  Stack,
-  chakra,
-  useMediaQuery,
-  useBreakpointValue,
-} from "@chakra-ui/react";
-import { AWS_ASSETS_PATH } from "../../src/core/constants";
-
-const assets = {
-  background720: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
-  background1920: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
-  background2880: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
-  background3840: `${AWS_ASSETS_PATH}/product-background-720x405.png`,
-};
+import { Heading, Text, Flex, Spacer, chakra, Spinner } from "@chakra-ui/react";
+import { getLayout } from "../../src/layouts/InfoPageLayout";
 
 const Status = () => {
   const healthyStatusText = "Available";
@@ -38,226 +22,117 @@ const Status = () => {
     latestBlockDBStatusCache,
   } = useStatus();
 
-  const [background, setBackground] = useState("background720");
-  const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
-  const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
-  const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
-  const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);
-
-  const [
-    isLargerThan720px,
-    isLargerThan1920px,
-    isLargerThan2880px,
-    isLargerThan3840px,
-  ] = useMediaQuery([
-    "(min-width: 720px)",
-    "(min-width: 1920px)",
-    "(min-width: 2880px)",
-    "(min-width: 3840px)",
-  ]);
-
-  useEffect(() => {
-    assets[
-      "background720"
-    ] = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
-    assets[
-      "background1920"
-    ] = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`;
-    assets[
-      "background2880"
-    ] = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`;
-    assets[
-      "background3840"
-    ] = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`;
-  }, []);
-
-  useLayoutEffect(() => {
-    if (backgroundLoaded3840) {
-      setBackground("background3840");
-    } else if (backgroundLoaded2880) {
-      setBackground("background2880");
-    } else if (backgroundLoaded1920) {
-      setBackground("background1920");
-    } else {
-      setBackground("background720");
-    }
-  }, [
-    isLargerThan720px,
-    isLargerThan1920px,
-    isLargerThan2880px,
-    isLargerThan3840px,
-    backgroundLoaded720,
-    backgroundLoaded1920,
-    backgroundLoaded2880,
-    backgroundLoaded3840,
-  ]);
-
-  useLayoutEffect(() => {
-    const imageLoader720 = new Image();
-    imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
-    imageLoader720.onload = () => {
-      setBackgroundLoaded720(true);
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    const imageLoader1920 = new Image();
-    imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`;
-    imageLoader1920.onload = () => {
-      setBackgroundLoaded1920(true);
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    const imageLoader2880 = new Image();
-    imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`;
-    imageLoader2880.onload = () => {
-      setBackgroundLoaded2880(true);
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    const imageLoader3840 = new Image();
-    imageLoader3840.src = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`;
-    imageLoader3840.onload = () => {
-      setBackgroundLoaded3840(true);
-    };
-  }, []);
-
-  const margin = useBreakpointValue({
-    base: "1%",
-    sm: "2%",
-    md: "3%",
-    lg: "15%",
-    xl: "20%",
-    "2xl": "25%",
-  });
-
+  const StatusRow = (props) => {
+    console.log(props.cache.data);
+    return (
+      <Flex mb={3}>
+        <Text>{props.title}</Text>
+        <Spacer />
+        {!props.cache.isLoading && props.children}
+        {props.cache.isLoading && <Spinner m={0} p={0} size="sm" />}
+      </Flex>
+    );
+  };
   return (
-    <Flex
-      bgPos="bottom"
-      bgColor="transparent"
-      backgroundImage={`url(${assets[`${background}`]})`}
-      bgSize="cover"
-      // boxSize="full"
-      minH="100vh"
-      direction="column"
-      alignItems="center"
-      pb={24}
-    >
-      <Stack mx={margin} my={12} maxW="1700px">
-        <Heading
-          as="h2"
-          size="md"
-          placeSelf="center"
-          px={12}
-          py={2}
-          borderTopRadius="xl"
-        >
-          {`Status page`}
-        </Heading>
-        <chakra.span pl={2} px={12} py={2} width="400px">
-          <Flex mb={3}>
-            <Text>Backend server</Text>
-            <Spacer />
-            <Text
-              color={
-                !apiServerStatusCache.isLoading &&
-                apiServerStatusCache?.data?.status == "ok"
-                  ? healthyStatusColor
-                  : downStatusColor
-              }
-            >
-              {!apiServerStatusCache.isLoading &&
+    <>
+      <Heading
+        as="h2"
+        size="md"
+        placeSelf="center"
+        px={12}
+        py={2}
+        borderTopRadius="xl"
+      >
+        {`Status page`}
+      </Heading>
+      <chakra.span pl={2} px={12} py={2} width="400px">
+        <StatusRow title="Backend server" cache={apiServerStatusCache}>
+          <Text
+            color={
               apiServerStatusCache?.data?.status == "ok"
-                ? healthyStatusText
-                : downStatusText}
-            </Text>
-          </Flex>
-          <br />
-          <Flex mb={3}>
-            <Text>Crawlers server</Text>
-            <Spacer />
-            <Text
-              color={
-                !ethereumClusterServerStatusCache.isLoading &&
-                ethereumClusterServerStatusCache?.data?.status == "ok"
-                  ? healthyStatusColor
-                  : downStatusColor
-              }
-            >
-              {!ethereumClusterServerStatusCache.isLoading &&
-              ethereumClusterServerStatusCache?.data
-                ? healthyStatusText
-                : downStatusText}
-            </Text>
-          </Flex>
-          <Flex mb={3}>
-            <Text>Latest block in Geth</Text>
-            <Spacer />
-            <Text>
-              {!gethStatusCache.isLoading &&
-              gethStatusCache?.data?.current_block
-                ? gethStatusCache.data.current_block
-                : 0}
-            </Text>
-          </Flex>
-          <Flex mb={3}>
-            <Text>Txpool latest record ts</Text>
-            <Spacer />
-            <Text>
-              {!crawlersStatusCache.isLoading &&
-              crawlersStatusCache?.data?.ethereum_txpool_timestamp
-                ? shortTimestamp(
-                    crawlersStatusCache?.data?.ethereum_txpool_timestamp
-                  )
-                : downStatusText}
-            </Text>
-          </Flex>
-          <Flex mb={3}>
-            <Text>Trending latest record ts</Text>
-            <Spacer />
-            <Text>
-              {!crawlersStatusCache.isLoading &&
-              crawlersStatusCache?.data?.ethereum_trending_timestamp
-                ? shortTimestamp(
-                    crawlersStatusCache?.data?.ethereum_trending_timestamp
-                  )
-                : downStatusText}
-            </Text>
-          </Flex>
-          <br />
-          <Flex mb={3}>
-            <Text>Database server</Text>
-            <Spacer />
-            <Text
-              color={
-                !dbServerStatusCache.isLoading &&
-                dbServerStatusCache?.data?.status == "ok"
-                  ? healthyStatusColor
-                  : downStatusColor
-              }
-            >
-              {!dbServerStatusCache.isLoading &&
+                ? healthyStatusColor
+                : downStatusColor
+            }
+          >
+            {apiServerStatusCache?.data?.status == "ok"
+              ? healthyStatusText
+              : downStatusText}
+          </Text>
+        </StatusRow>
+        <br />
+        <StatusRow
+          title="Crawlers server"
+          cache={ethereumClusterServerStatusCache}
+        >
+          <Text
+            color={
+              ethereumClusterServerStatusCache?.data?.status == "ok"
+                ? healthyStatusColor
+                : downStatusColor
+            }
+          >
+            {ethereumClusterServerStatusCache?.data
+              ? healthyStatusText
+              : downStatusText}
+          </Text>
+        </StatusRow>
+        <StatusRow title="Latest block in Geth" cache={gethStatusCache}>
+          <Text>
+            {gethStatusCache?.data?.current_block
+              ? gethStatusCache.data.current_block
+              : 0}
+          </Text>
+        </StatusRow>
+        <StatusRow title="Txpool latest record ts" cache={crawlersStatusCache}>
+          <Text>
+            {crawlersStatusCache?.data?.ethereum_txpool_timestamp
+              ? shortTimestamp(
+                  crawlersStatusCache?.data?.ethereum_txpool_timestamp
+                )
+              : downStatusText}
+          </Text>
+        </StatusRow>
+        <StatusRow
+          title="Trending latest record ts"
+          cache={crawlersStatusCache}
+        >
+          <Text>
+            {crawlersStatusCache?.data?.ethereum_trending_timestamp
+              ? shortTimestamp(
+                  crawlersStatusCache?.data?.ethereum_trending_timestamp
+                )
+              : downStatusText}
+          </Text>
+        </StatusRow>
+
+        <br />
+        <StatusRow title="Database server" cache={dbServerStatusCache}>
+          <Text
+            color={
               dbServerStatusCache?.data?.status == "ok"
-                ? healthyStatusText
-                : downStatusText}
-            </Text>
-          </Flex>
-          <Flex mb={3}>
-            <Text>Latest block in Database</Text>
-            <Spacer />
-            <Text>
-              {!latestBlockDBStatusCache.isLoading &&
-              latestBlockDBStatusCache?.data?.block_number
-                ? latestBlockDBStatusCache.data.block_number
-                : 0}
-            </Text>
-          </Flex>
-        </chakra.span>
-      </Stack>
-    </Flex>
+                ? healthyStatusColor
+                : downStatusColor
+            }
+          >
+            {dbServerStatusCache?.data?.status == "ok"
+              ? healthyStatusText
+              : downStatusText}
+          </Text>
+        </StatusRow>
+        <StatusRow
+          title="Latest block in Database"
+          cache={latestBlockDBStatusCache}
+        >
+          <Text>
+            {latestBlockDBStatusCache?.data?.block_number
+              ? latestBlockDBStatusCache.data.block_number
+              : 0}
+          </Text>
+        </StatusRow>
+      </chakra.span>
+    </>
   );
 };
 
+Status.getLayout = getLayout;
 export default Status;

frontend/src/core/hooks/useStatus.js

@@ -30,28 +30,34 @@ const useStatus = () => {
 
   const apiServerStatusCache = useQuery("apiServer", getAPIServerStatus, {
     ...queryCacheProps,
+    retry: 0,
   });
   const ethereumClusterServerStatusCache = useQuery(
     "ethereumClusterServer",
     getEthereumClusterServerStatus,
     {
       ...queryCacheProps,
+      retry: 0,
     }
   );
   const gethStatusCache = useQuery("geth", getGethStatus, {
     ...queryCacheProps,
+    retry: 0,
   });
   const crawlersStatusCache = useQuery("crawlers", getCrawlersStatus, {
     ...queryCacheProps,
+    retry: 0,
   });
   const dbServerStatusCache = useQuery("dbServer", getDBServerStatus, {
     ...queryCacheProps,
+    retry: 0,
   });
   const latestBlockDBStatusCache = useQuery(
     "latestBlockDB",
     getLatestBlockDBStatus,
     {
       ...queryCacheProps,
+      retry: 0,
     }
   );