🚥 Added service status panel scaffold

package.json

@@ -30,7 +30,7 @@
     "@types/socket.io": "^3.0.2",
     "@types/socket.io-client": "^3.0.0",
     "@vitejs/plugin-react": "^3.1.0",
-    "airdcpp-apisocket": "2.4.5-beta.1",
+    "airdcpp-apisocket": "~2.4.5-beta.2",
     "axios": "^1.3.4",
     "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
@@ -56,7 +56,7 @@
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.6.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",

src/client/actions/fileops.actions.tsx

@@ -34,11 +34,27 @@ import {
   WANTED_COMICS_FETCHED,
   VOLUMES_FETCHED,
   CV_WEEKLY_PULLLIST_FETCHED,
+  LIBRARY_SERVICE_HEALTH,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
 
 import { isNil, map } from "lodash";
 
+export const getServiceStatus = (serviceName?: string) => async dispatch => {
+  axios
+    .request({
+      url: `${LIBRARY_SERVICE_BASE_URI}/getHealthInformation`,
+      method: "GET",
+      transformResponse: (r: string) => JSON.parse(r),
+    })
+    .then((response) => {
+      const { data } = response;
+      dispatch({
+        type: LIBRARY_SERVICE_HEALTH,
+        status: data,
+      });
+    });
+};
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
     .request<Array<IFolderData>>({

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -15,13 +15,14 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     try {
       if (!isUndefined(hostname)) {
         const matches = hostname.match(hostnameRegex);
-        return (isNil(matches) && matches.length !== 0) ? hostname : "Invalid hostname; it should not contain special characters";
+        return isNil(matches) && matches.length !== 0
+          ? hostname
+          : "Invalid hostname; it should not contain special characters";
       }
-    }
-    catch {
+    } catch {
       return null;
     }
-  }
+  };
 
   const onSubmit = useCallback(async (values) => {
     try {
@@ -67,13 +68,20 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                 </span>
               </p>
               <div className="control is-expanded">
-                <Field
-                  name="hostname"
-                  validate={hostValidator}>
+                <Field name="hostname" validate={hostValidator}>
                   {({ input, meta }) => (
                     <div>
-                      <input {...input} type="text" placeholder="AirDC++ hostname" className="input" />
-                      {meta.error && meta.touched && <span className="is-size-7 has-text-danger">{meta.error}</span>}
+                      <input
+                        {...input}
+                        type="text"
+                        placeholder="AirDC++ hostname"
+                        className="input"
+                      />
+                      {meta.error && meta.touched && (
+                        <span className="is-size-7 has-text-danger">
+                          {meta.error}
+                        </span>
+                      )}
                     </div>
                   )}
                 </Field>

src/client/components/ServiceStatuses/ServiceStatuses.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import { getServiceStatus } from "../../actions/fileops.actions";
+
+export const ServiceStatuses = (): ReactElement => {
+  const serviceStatus = useSelector(
+    (state: RootState) => state.fileOps.libraryServiceStatus,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getServiceStatus());
+  }, []);
+  return (
+    <div className="is-clearfix">
+      <div className="mt-4">
+        <h3 className="title">Core Services</h3>
+        <h6 className="subtitle has-text-grey-light">
+          Statuses for core services
+        </h6>
+      </div>
+      <pre>{JSON.stringify(serviceStatus, null, 2)}</pre>
+    </div>
+  );
+};

src/client/components/Settings.tsx

@@ -2,6 +2,7 @@ import React, { useState, ReactElement } from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
+import { ServiceStatuses } from "./ServiceStatuses/ServiceStatuses";
 import settingsObject from "../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
 
@@ -22,6 +23,10 @@ export const Settings = (props: ISettingsProps): ReactElement => {
         </div>
       ),
     },
+    {
+      id: "core-service",
+      content: <ServiceStatuses />,
+    },
     {
       id: "flushdb",
       content: (

src/client/constants/action-types.ts

@@ -140,3 +140,6 @@ export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";
 export const METRON_DATA_FETCH_SUCCESS = "METRON_DATA_FETCH_SUCCESS";
 export const METRON_DATA_FETCH_IN_PROGRESS = "METRON_DATA_FETCH_IN_PROGRESS";
 export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";
+
+// service health statuses
+export const LIBRARY_SERVICE_HEALTH = "LIBRARY_SERVICE_HEALTH";

src/client/constants/settings/settingsMenu.json

@@ -57,6 +57,21 @@
   },
   {
     "id": 4,
+    "category": "statuses",
+    "displayName": "Service Status",
+    "children": [
+      {
+        "id": "core-service",
+        "displayName": "Core Services"
+      },
+      {
+        "id": "metadata-service",
+        "displayName": "Metadata Services"
+      }
+    ]
+  },
+  {
+    "id": 5,
     "category": "system",
     "displayName": "System",
     "children": [
@@ -67,7 +82,7 @@
     ]
   },
   {
-    "id": 5,
+    "id": 6,
     "category": "acknowledgments",
     "displayName": "Acknowledgments",
     "children": [

src/client/reducers/fileops.reducer.ts

@@ -30,6 +30,8 @@ import {
   SS_SEARCH_RESULTS_FETCHED_SPECIAL,
   VOLUMES_FETCHED,
   COMICBOOK_EXTRACTION_SUCCESS,
+  LIBRARY_SERVICE_HEALTH,
+  HEALTH_STATUS_TICK,
 } from "../constants/action-types";
 import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
@@ -58,6 +60,7 @@ const initialState = {
   librarySearchResultCount: 0,
   libraryQueueResults: [],
   librarySearchError: {},
+  libraryServiceStatus: {},
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -159,7 +162,7 @@ function fileOpsReducer(state = initialState, action) {
       return {
         ...state,
         librarySearchResultCount: state.librarySearchResultCount + 1,
-        recentComics: [...state.recentComics, action.result.data.importResult]
+        recentComics: [...state.recentComics, action.result.data.importResult],
       };
     }
 
@@ -271,7 +274,12 @@ function fileOpsReducer(state = initialState, action) {
         SSCallInProgress: false,
       };
     }
-
+    case LIBRARY_SERVICE_HEALTH: {
+      return {
+        ...state,
+        libraryServiceStatus: action.status,
+      };
+    }
     case FILEOPS_STATE_RESET: {
       return {
         ...state,

yarn.lock

@@ -4083,12 +4083,12 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-airdcpp-apisocket@2.4.5-beta.1:
-  version "2.4.5-beta.1"
-  resolved "https://registry.yarnpkg.com/airdcpp-apisocket/-/airdcpp-apisocket-2.4.5-beta.1.tgz#f85674e98b7b733d91ee1e9b751ea9e757239964"
-  integrity sha512-Esa+p72zA9gMWDdlOkEWinvOhu01WvV9CCOvmQUrwLZXCNtT+70QBQqAY+vh0FMYrpkiH8Ync7ues4ERHPnxyw==
+airdcpp-apisocket@~2.4.5-beta.2:
+  version "2.5.0-beta.2"
+  resolved "https://registry.yarnpkg.com/airdcpp-apisocket/-/airdcpp-apisocket-2.5.0-beta.2.tgz#062541095de75775bfa92b5cb4e785674beb8986"
+  integrity sha512-N/+39wYrZc/2N5CaZPG8kUSMu9shGGmLqR/0WQbJ1NiHF5VHcifN27ioldijN10KGfssFvTZBjV93m+D8ADDkQ==
   dependencies:
-    chalk "^5.1.2"
+    chalk "^4.1.2"
     events "^3.3.0"
     invariant "^2.2.4"
     is-in-browser "^2.0.0"
@@ -5292,11 +5292,6 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^5.1.2:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
-  integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
-
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -11497,7 +11492,7 @@ react-docgen@^5.4.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^18.1.0:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==