diff --git a/frontend/pages/status/index.js b/frontend/pages/status/index.js index d15e2e9b..dc570bda 100644 --- a/frontend/pages/status/index.js +++ b/frontend/pages/status/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useLayoutEffect } from "react" +import React, { useEffect, useState, useLayoutEffect } from "react"; import { useStatus } from "../../src/core/hooks"; import { Heading, @@ -10,24 +10,48 @@ import { chakra, useMediaQuery, useBreakpointValue -} from "@chakra-ui/react" -import { AWS_ASSETS_PATH } from "../../src/core/constants" +} 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` -} +}; const Status = () => { - const { status } = useStatus(); + const healthyStatusText = "Available"; + const downStatusText = "Disabled"; + const healthyStatusColor = "green.900"; + const downStatusColor = "red.600"; - 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 { + apiServerStatus, + apiServerData, + crawlersServerStatus, + crawlersServerData, + dbServerStatus, + dbServerData + } = useStatus(); + const [apiServerDataStatus, setAPIServerDataStatus] = useState({ + color: downStatusColor, + text: downStatusText + }); + const [crawlersServerDataStatus, setCrawlersServerDataStatus] = useState({ + color: downStatusColor, + text: downStatusText + }); + const [dbServerDataStatus, setDBServerDataStatus] = useState({ + color: downStatusColor, + text: downStatusText + }); + + 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, @@ -39,35 +63,36 @@ const Status = () => { "(min-width: 1920px)", "(min-width: 2880px)", "(min-width: 3840px)" - ]) + ]); useEffect(() => { + apiServerStatus(); + crawlersServerStatus(); + dbServerStatus(); + assets[ "background720" - ] = `${AWS_ASSETS_PATH}/product-background-720x405.png` + ] = `${AWS_ASSETS_PATH}/product-background-720x405.png`; assets[ "background1920" - ] = `${AWS_ASSETS_PATH}/product-background-1920x1080.png` + ] = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`; assets[ "background2880" - ] = `${AWS_ASSETS_PATH}/product-background-2880x1620.png` + ] = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`; assets[ "background3840" - ] = `${AWS_ASSETS_PATH}/product-background-3840x2160.png` - - const statusRes = status() - console.log(statusRes) - }, []) + ] = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`; + }, []); useLayoutEffect(() => { if (backgroundLoaded3840) { - setBackground("background3840") + setBackground("background3840"); } else if (backgroundLoaded2880) { - setBackground("background2880") + setBackground("background2880"); } else if (backgroundLoaded1920) { - setBackground("background1920") + setBackground("background1920"); } else { - setBackground("background720") + setBackground("background720"); } }, [ isLargerThan720px, @@ -78,39 +103,60 @@ const Status = () => { backgroundLoaded1920, backgroundLoaded2880, backgroundLoaded3840 - ]) + ]); useLayoutEffect(() => { - const imageLoader720 = new Image() - imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png` + const imageLoader720 = new Image(); + imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png`; imageLoader720.onload = () => { - setBackgroundLoaded720(true) - } - }, []) + setBackgroundLoaded720(true); + }; + }, []); useLayoutEffect(() => { - const imageLoader1920 = new Image() - imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png` + const imageLoader1920 = new Image(); + imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`; imageLoader1920.onload = () => { - setBackgroundLoaded1920(true) - } - }, []) + setBackgroundLoaded1920(true); + }; + }, []); useLayoutEffect(() => { - const imageLoader2880 = new Image() - imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png` + const imageLoader2880 = new Image(); + imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`; imageLoader2880.onload = () => { - setBackgroundLoaded2880(true) - } - }, []) + setBackgroundLoaded2880(true); + }; + }, []); useLayoutEffect(() => { - const imageLoader3840 = new Image() - imageLoader3840.src = `${AWS_ASSETS_PATH}/product-background-3840x2160.png` + const imageLoader3840 = new Image(); + imageLoader3840.src = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`; imageLoader3840.onload = () => { - setBackgroundLoaded3840(true) + setBackgroundLoaded3840(true); + }; + }, []); + + useLayoutEffect(() => { + if (apiServerData?.data.status == "ok") { + setAPIServerDataStatus({ + color: healthyStatusColor, + text: healthyStatusText + }); } - }, []) + if (crawlersServerData?.data.status == "ok") { + setCrawlersServerDataStatus({ + color: healthyStatusColor, + text: healthyStatusText + }); + } + if (dbServerData?.data?.status == "ok") { + setDBServerDataStatus({ + color: healthyStatusColor, + text: healthyStatusText + }); + } + }, [apiServerData, crawlersServerData, dbServerData]); const margin = useBreakpointValue({ base: "1%", @@ -119,7 +165,7 @@ const Status = () => { lg: "15%", xl: "20%", "2xl": "25%" - }) + }); return ( { Backend server - Available + + {apiServerDataStatus.text} +
Crawlers server - Available + + {crawlersServerDataStatus.text} + Latest block in Geth @@ -175,7 +225,9 @@ const Status = () => { Database server - Available + + {dbServerDataStatus.text} + Latest block in Database @@ -185,7 +237,7 @@ const Status = () => { - ) -} + ); +}; -export default Status +export default Status; diff --git a/frontend/sample.env b/frontend/sample.env index 8a67384e..109342ef 100644 --- a/frontend/sample.env +++ b/frontend/sample.env @@ -1,4 +1,5 @@ export NEXT_PUBLIC_MIXPANEL_TOKEN="" export NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="" -export NEXT_PUBLIC_MOONSTREAM_API_URL="http://localhost:7481" -export NEXT_PUBLIC_MOONSTREAM_DB_URL="http://localhost:5432" +export NEXT_PUBLIC_MOONSTREAM_API_URL="" +export NEXT_PUBLIC_MOONSTREAM_CRAWLERS_URL="" +export NEXT_PUBLIC_MOONSTREAM_DB_URL="" diff --git a/frontend/src/core/hooks/useStatus.js b/frontend/src/core/hooks/useStatus.js index 948d2659..e8acfb6f 100644 --- a/frontend/src/core/hooks/useStatus.js +++ b/frontend/src/core/hooks/useStatus.js @@ -1,22 +1,52 @@ -import { useMutation } from "react-query" -import { useToast } from "./" -import { AuthService } from "../../core/services" +import { useMutation } from "react-query"; +import { useToast } from "./"; +import { AuthService } from "../../core/services"; const useStatus = () => { - const toast = useToast() + const toast = useToast(); - const { - mutate: status - } = useMutation(AuthService.status, { - onError: (error) => { - toast(error, "error") - }, - onSuccess: () => { - toast("Status got", "success") + const { mutate: apiServerStatus, data: apiServerData } = useMutation( + AuthService.apiServerStatus, + { + onError: (error) => { + // toast(error, "error"); + }, + onSuccess: () => { + // toast("Status received", "success"); + } } - }) + ); - return { status } -} + const { mutate: crawlersServerStatus, data: crawlersServerData } = + useMutation(AuthService.crawlersServerStatus, { + onError: (error) => { + // toast(error, "error"); + }, + onSuccess: () => { + // toast("Status received", "success"); + } + }); -export default useStatus + const { mutate: dbServerStatus, data: dbServerData } = useMutation( + AuthService.dbServerStatus, + { + onError: (error) => { + // toast(error, "error"); + }, + onSuccess: () => { + // toast("Status received", "success"); + } + } + ); + + return { + apiServerStatus, + apiServerData, + crawlersServerStatus, + crawlersServerData, + dbServerStatus, + dbServerData + }; +}; + +export default useStatus; diff --git a/frontend/src/core/services/auth.service.js b/frontend/src/core/services/auth.service.js index 6e11da23..eace01da 100644 --- a/frontend/src/core/services/auth.service.js +++ b/frontend/src/core/services/auth.service.js @@ -2,15 +2,9 @@ import { http } from "../utils"; const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL; const DB_URL = process.env.NEXT_PUBLIC_MOONSTREAM_DB_URL; +const CRAWLERS_URL = process.env.NEXT_PUBLIC_MOONSTREAM_CRAWLERS_URL; export const AUTH_URL = `${API_URL}/users`; -export const status = () => { - return http({ - method: "GET", - url: `${DB_URL}/block/latest`, - }); -}; - export const login = ({ username, password, token_note }) => { const data = new FormData(); data.append("username", username); @@ -109,3 +103,45 @@ export const revokeToken = (token) => { url: `${AUTH_URL}/revoke/${token}`, }); }; + +export const apiServerStatus = () => { + return http({ + method: "GET", + url: `${API_URL}/ping` + }); +}; + +export const crawlersServerStatus = () => { + return http({ + method: "GET", + url: `${CRAWLERS_URL}/ping` + }); +}; + +export const gethStatus = () => { + return http({ + method: "GET", + url: `${CRAWLERS_URL}/status` + }); +}; + +export const crawlersStatus = () => { + return http({ + method: "GET", + url: `${API_URL}/status` + }); +}; + +export const dbServerStatus = () => { + return http({ + method: "GET", + url: `${DB_URL}/ping` + }); +}; + +export const latestBlockDBStatus = () => { + return http({ + method: "GET", + url: `${DB_URL}/block/latest` + }); +};