Working status page

2021-10-01 19:07:44 +00:00 · 2021-10-01 19:07:44 +00:00 · e7e0b5bc79
commit e7e0b5bc79
--- 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 (
 		<Flex
@ -148,13 +194,17 @@ const Status = () => {
 					<Flex mb={3}>
 						<Text>Backend server</Text>
 						<Spacer />
-						<Text>Available</Text>
+						<Text color={apiServerDataStatus.color}>
+							{apiServerDataStatus.text}
+						</Text>
 					</Flex>
 					<br />
 					<Flex mb={3}>
 						<Text>Crawlers server</Text>
 						<Spacer />
-						<Text>Available</Text>
+						<Text color={crawlersServerDataStatus.color}>
+							{crawlersServerDataStatus.text}
+						</Text>
 					</Flex>
 					<Flex mb={3}>
 						<Text>Latest block in Geth</Text>
@ -175,7 +225,9 @@ const Status = () => {
 					<Flex mb={3}>
 						<Text>Database server</Text>
 						<Spacer />
-						<Text>Available</Text>
+						<Text color={dbServerDataStatus.color}>
+							{dbServerDataStatus.text}
+						</Text>
 					</Flex>
 					<Flex mb={3}>
 						<Text>Latest block in Database</Text>
@ -185,7 +237,7 @@ const Status = () => {
 				</chakra.span>
 			</Stack>
 		</Flex>
-	)
-}
+	);
+};

-export default Status
+export default Status;
--- a/frontend/sample.env
+++ b/frontend/sample.env
@ -1,4 +1,5 @@
 export NEXT_PUBLIC_MIXPANEL_TOKEN="<YOUR MIXPANEL TOKEN HERE>"
 export NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="<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="<moonstream_api_url>"
+export NEXT_PUBLIC_MOONSTREAM_CRAWLERS_URL="<moonstream_crawlers_url>"
+export NEXT_PUBLIC_MOONSTREAM_DB_URL="<moonstream_db_url>"
--- 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;
--- 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`
+	});
+};