Created validator for Backend and Dmob API

src/api/index.ts

@@ -1,5 +1,11 @@
 import axios from "axios";
-import { SentryDataTypes, SentryDataPeriods } from "../types";
+import {
+  type SentryDataTypes,
+  type SentryDataPeriods,
+  type Validator,
+  ServiceStatus,
+  type CheckServiceStatusOptions
+} from "../types";
 import { formatSentryURL } from "../utils";
 import { config } from "../config";
 
@@ -13,7 +19,7 @@ export const fetchSentryData = async (
 
     return response.data;
   } catch (error) {
-    //console.log(error);
+    // console.log(error);
   }
 };
 
@@ -22,7 +28,7 @@ export const fetchSentryEvents = async () => {
     const response = await axios.get(`${config.apiUri}/stats/sentry/events`);
     return response.data;
   } catch (error) {
-    //console.log(error);
+    // console.log(error);
   }
 };
 
@@ -32,6 +38,31 @@ export const getOpenBugsCount = async () => {
     const res = await axios.get(url);
     return res.data;
   } catch (error) {
-    //console.log(error);
+    // console.log(error);
+  }
+};
+
+export const checkServiceStatus = async (
+  url: string,
+  validator: Validator,
+  options?: CheckServiceStatusOptions
+): Promise<ServiceStatus> => {
+  try {
+    const headers: HeadersInit = {};
+    if (options?.apiKey) {
+      headers["x-api-key"] = options.apiKey;
+    }
+    const response = await fetch(url, {
+      method: "GET",
+      headers
+    });
+
+    if (validator(response)) {
+      return ServiceStatus.Online;
+    }
+    return ServiceStatus.Offline;
+  } catch (error) {
+    console.log(error.message);
+    return ServiceStatus.Offline;
   }
 };

src/api/validators.ts

@@ -0,0 +1,10 @@
+export const dmobValidator = async (response: Response): Promise<boolean> => {
+  const { allowance } = await response.json();
+  return allowance > 0;
+};
+export const backendValidator = async (
+  response: Response
+): Promise<boolean> => {
+  const ret = await response.text();
+  return ret === "OK";
+};

src/components/ServiceStatusIndicator.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { SERVICE_STATUS } from "../constants";
+import { type ServiceStatusProps } from "../types";
+
+export const ServiceStatusIndicator: React.FC<ServiceStatusProps> = ({
+  name,
+  status
+}) => {
+  return (
+    <div>
+      <span>{name} is currently: </span>
+      <span>{SERVICE_STATUS[status]}</span>
+    </div>
+  );
+};

src/components/SideBar.tsx

@@ -1,6 +1,6 @@
 import { NavLink, Link } from "react-router-dom";
 import logo from "../assets/fil-plus.svg";
-import { BugIcon, CubeIcon, UserIcon } from "../icons";
+import { BugIcon, CubeIcon, UserIcon, StatusIcon } from "../icons";
 
 const navigationItems = [
   {
@@ -17,6 +17,11 @@ const navigationItems = [
     name: "Bugs",
     to: "bugs",
     svg: <BugIcon />
+  },
+  {
+    name: "Status",
+    to: "status",
+    svg: <StatusIcon />
   }
 ];
 

src/config.ts

@@ -1,3 +1,14 @@
 export const config = {
-  apiUri: import.meta.env.VITE_API_URI || "http://localhost:4000"
+  apiUri: import.meta.env.VITE_API_URI || "http://localhost:4000",
+  serviceUrls: {
+    backend:
+      import.meta.env.VITE_BACKEND_SERVICE_URI ||
+      "https://fp-core.6omfj573u6naa.us-east-2.cs.amazonlightsail.com/health",
+    ldnBot: import.meta.env.VITE_LDN_BOT_SERVICE_URI || "http://localhost:4002",
+    ssaBot: import.meta.env.VITE_SSA_BOT_SERVICE_URI || "http://localhost",
+    dmobApi:
+      import.meta.env.VITE_DMOB_API_URI ||
+      "https://api.filplus.d.interplanetary.one/public/api/getAllowanceAssignedToLdnV3InLast2Weeks"
+  },
+  dmobApiKey: import.meta.env.VITE_DMOB_API_KEY || ""
 };

src/constants.ts

@@ -1,4 +1,4 @@
-import { ChartKey } from "./types";
+import { ChartKey, ServiceStatus } from "./types";
 
 export const METRICS_TOOLTIP_INFO = {
   propose: {
@@ -79,3 +79,9 @@ export const CHART_TITLES: Record<ChartKey, string> = {
   [ChartKey.GithubToken]: "Github Token Load",
   [ChartKey.Bugs]: "Bugs"
 };
+
+export const SERVICE_STATUS: Record<ServiceStatus, string> = {
+  [ServiceStatus.Online]: "Online",
+  [ServiceStatus.Offline]: "Offline",
+  [ServiceStatus.Checking]: "Checking"
+};

src/hooks/useServiceStatus.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { checkServiceStatus } from "../api";
+import {
+  type Validator,
+  type CheckServiceStatusOptions,
+  ServiceStatus
+} from "../types";
+
+export const useServiceStatus = (
+  url: string,
+  validator: Validator,
+  options?: CheckServiceStatusOptions
+): ServiceStatus => {
+  const [status, setStatus] = useState(ServiceStatus.Checking);
+
+  useEffect(() => {
+    if (!url) {
+      setStatus(ServiceStatus.Offline);
+      return;
+    }
+
+    // Fetch and validate
+    checkServiceStatus(url, validator, options)
+      .then(serviceStatus => {
+        setStatus(serviceStatus);
+      })
+      .catch(error => {
+        console.error("There was an error checking the service status:", error);
+        setStatus(ServiceStatus.Offline);
+      });
+  }, [url, validator, options]);
+
+  return status;
+};

src/icons/index.tsx

@@ -55,3 +55,16 @@ export const InfoIcon = ({ style }: { style?: string }) => (
     />
   </svg>
 );
+
+export const StatusIcon = () => (
+  <svg
+    className="w-6 h-6"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="#000000"
+      d="M7.0513157,1.68377223 C7.34140089,0.813516663 8.52958649,0.773959592 8.90131717,1.56510102 L8.9486823,1.68377223 L11.999,10.838 L13.0513157,7.68377223 C13.1750557,7.31255211 13.5021221,7.05117665 13.8839548,7.00672177 L13.999999,7 L14.999999,7 C15.5522837,7 15.999999,7.44771525 15.999999,8 C15.999999,8.51283584 15.6139588,8.93550716 15.1166201,8.99327227 L14.999999,9 L14.72,9 L12.9486823,14.3162278 C12.6585971,15.1864833 11.4704115,15.2260404 11.0986808,14.434899 L11.0513157,14.3162278 L7.999999,5.161 L5.9486823,11.3162278 C5.66748671,12.1598145 4.52796777,12.2312701 4.12404882,11.4837549 L4.07152231,11.3713907 L2.961,8.596 L2.89017501,8.6833128 C2.73101502,8.85332296 2.51533249,8.96455528 2.27945404,8.99286635 L2.16,9 L0.999999,9 C0.44771425,9 -1e-06,8.55228475 -1e-06,8 C-1e-06,7.48716416 0.38603919,7.06449284 0.883377875,7.00672773 L0.999999,7 L1.495,7 L2.07801673,5.61276791 C2.40786899,4.82740446 3.48655852,4.79910618 3.87548912,5.51555754 L3.92847569,5.62860932 L4.914,8.094 L7.0513157,1.68377223 Z"
+    />
+  </svg>
+);

src/routes/Router.tsx

@@ -4,6 +4,7 @@ import Blockchain from "./Blockchain";
 import User from "./User";
 import About from "./About";
 import Bugs from "./Bugs";
+import Status from "./Status";
 
 export const router = createHashRouter([
   {
@@ -21,6 +22,10 @@ export const router = createHashRouter([
       {
         path: "bugs",
         element: <Bugs />
+      },
+      {
+        path: "status",
+        element: <Status />
       }
     ]
   },

src/routes/Status.tsx

@@ -0,0 +1,34 @@
+import { backendValidator, dmobValidator } from "../api/validators";
+import { useServiceStatus } from "../hooks/useServiceStatus";
+import { ServiceStatusIndicator } from "../components/ServiceStatusIndicator";
+import { config } from "../config";
+
+const Status = () => {
+  const backendStatus = useServiceStatus(
+    config.serviceUrls.backend,
+    backendValidator
+  );
+  const dmobStatus = useServiceStatus(
+    config.serviceUrls.dmobApi,
+    dmobValidator,
+    { apiKey: config.dmobApiKey }
+  );
+  // const ldnBotStatus = useServiceStatus(
+  //   config.serviceUrls.dmobApi,
+  //   dmobValidator
+  // );
+  // const ssaBotStatus = useServiceStatus(
+  //   config.serviceUrls.dmobApi,
+  //   dmobValidator
+  // );
+  return (
+    <div className="flex flex-col">
+      <ServiceStatusIndicator name="Backend" status={backendStatus} />
+      <ServiceStatusIndicator name="Dmob API" status={dmobStatus} />
+      {/* <ServiceStatusIndicator name="Ldn Bot" status={ldnBotStatus} />
+      <ServiceStatusIndicator name="SSA Bot" status={ssaBotStatus} /> */}
+    </div>
+  );
+};
+
+export default Status;

src/types.ts

@@ -31,3 +31,20 @@ export interface GraphData {
   success: Record<string, number>;
   failure: Record<string, number>;
 }
+
+export enum ServiceStatus {
+  Online = "online",
+  Offline = "offline",
+  Checking = "checking"
+}
+
+export interface ServiceStatusProps {
+  name: string;
+  status: ServiceStatus;
+}
+
+export type Validator = (data: Response) => Promise<boolean>;
+
+export interface CheckServiceStatusOptions {
+  apiKey?: string;
+}