Working status page

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"
+} from "@chakra-ui/react";
-import { AWS_ASSETS_PATH } from "../../src/core/constants"
+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 {
-	const [backgroundLoaded720, setBackgroundLoaded720] = useState(false)
+		apiServerStatus,
-	const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false)
+		apiServerData,
-	const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false)
+		crawlersServerStatus,
-	const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false)
+		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`
+		] = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`;
-
+	}, []);
-		const statusRes = status()
-		console.log(statusRes)
-	}, [])
 
 	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()
+		const imageLoader720 = new Image();
-		imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png`
+		imageLoader720.src = `${AWS_ASSETS_PATH}/product-background-720x405.png`;
 		imageLoader720.onload = () => {
-			setBackgroundLoaded720(true)
+			setBackgroundLoaded720(true);
-		}
+		};
-	}, [])
+	}, []);
 
 	useLayoutEffect(() => {
-		const imageLoader1920 = new Image()
+		const imageLoader1920 = new Image();
-		imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`
+		imageLoader1920.src = `${AWS_ASSETS_PATH}/product-background-1920x1080.png`;
 		imageLoader1920.onload = () => {
-			setBackgroundLoaded1920(true)
+			setBackgroundLoaded1920(true);
-		}
+		};
-	}, [])
+	}, []);
 
 	useLayoutEffect(() => {
-		const imageLoader2880 = new Image()
+		const imageLoader2880 = new Image();
-		imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`
+		imageLoader2880.src = `${AWS_ASSETS_PATH}/product-background-2880x1620.png`;
 		imageLoader2880.onload = () => {
-			setBackgroundLoaded2880(true)
+			setBackgroundLoaded2880(true);
-		}
+		};
-	}, [])
+	}, []);
 
 	useLayoutEffect(() => {
-		const imageLoader3840 = new Image()
+		const imageLoader3840 = new Image();
-		imageLoader3840.src = `${AWS_ASSETS_PATH}/product-background-3840x2160.png`
+		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;

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_API_URL="<moonstream_api_url>"
-export NEXT_PUBLIC_MOONSTREAM_DB_URL="http://localhost:5432"
+export NEXT_PUBLIC_MOONSTREAM_CRAWLERS_URL="<moonstream_crawlers_url>"
+export NEXT_PUBLIC_MOONSTREAM_DB_URL="<moonstream_db_url>"

frontend/src/core/hooks/useStatus.js

@@ -1,22 +1,52 @@
-import { useMutation } from "react-query"
+import { useMutation } from "react-query";
-import { useToast } from "./"
+import { useToast } from "./";
-import { AuthService } from "../../core/services"
+import { AuthService } from "../../core/services";
 
 const useStatus = () => {
-	const toast = useToast()
+	const toast = useToast();
 
-	const {
+	const { mutate: apiServerStatus, data: apiServerData } = useMutation(
-		mutate: status
+		AuthService.apiServerStatus,
-	} = useMutation(AuthService.status, {
+		{
 			onError: (error) => {
-			toast(error, "error")
+				// toast(error, "error");
 			},
 			onSuccess: () => {
-			toast("Status got", "success")
+				// toast("Status received", "success");
 			}
-	})
-
-	return { status }
 		}
+	);
 
-export default useStatus
+	const { mutate: crawlersServerStatus, data: crawlersServerData } =
+		useMutation(AuthService.crawlersServerStatus, {
+			onError: (error) => {
+				// toast(error, "error");
+			},
+			onSuccess: () => {
+				// toast("Status received", "success");
+			}
+		});
+
+	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;

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`
+	});
+};