Monitoring dashboard

package.json

@@ -6,8 +6,6 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -16,6 +14,7 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
+    "ansi-to-react": "^6.1.6",
     "axios": "^1.4.0",
     "chart.js": "^4.3.0",
     "formik": "^2.4.1",
@@ -26,6 +25,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-datepicker": "^4.12.0",
+    "react-datetime-picker": "^5.5.1",
     "react-dom": "^18.2.0",
     "react-form-stepper": "^2.0.3",
     "react-fullscreen-loading": "^0.0.4",

src/App.css

@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+body .dark-mode {
+  --mdb-body-color: #fff !important;
 }

src/App.js

@@ -6,20 +6,29 @@ import {
   useNavigate,
 } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
-
+import "./App.css";
 import { SidebarComponent } from "./components/sidebar";
 import { MDBCol, MDBRow } from "mdb-react-ui-kit";
-import { useContext, useMemo, useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AppContext } from "./provider/contextProvider";
-import { useAuthContext } from "./provider/authProvider";
 import RequireAuth from "./hoc/requireAuth";
 import Loader from "./components/fullscreenLoader";
 import { useStore } from "./store";
-import { SuccessScreen, Dashboard, Login, Add } from "./pages";
+import { SuccessScreen, Dashboard, Login, Add, Overview } from "./pages";
 import { history } from "./utils/history";
-import { useAuth } from "./hooks/useAuth";
-import { AuthContext } from "./provider/authProvider";
 import useWindowSize from "./hooks/useWindow";
+import Uciapi from "./pages/monitoring/uci-api";
+import Inbound from "./pages/monitoring/inbound";
+import Orchestrator from "./pages/monitoring/orchestrator";
+import BroadcastTransformer from "./pages/monitoring/broadcast-transformer";
+import Outbound from "./pages/monitoring/outbound";
+import Transformer from "./pages/monitoring/transformer";
+import UCIAPIlogs from "./pages/monitoring/logs/uci-api";
+import InboundLogs from "./pages/monitoring/logs/inbound";
+import OrchestratorLogs from "./pages/monitoring/logs/orchestrator";
+import TransformerLogs from "./pages/monitoring/logs/transformer";
+import BroadcastTransformerLogs from "./pages/monitoring/logs/broadcast-transformer";
+import OutboundLogs from "./pages/monitoring/logs/outbound";
 
 function App() {
   const [isLoading, setIsLoading] = useState(false);
@@ -57,20 +66,21 @@ function App() {
   const user = useMemo(() => store.user, [store.user]);
 
   return (
-    <div style={{ height: "100vh", overflow: "scroll", ...theme }}>
+    <div style={{ height: "100vh", overflow: "hidden", ...theme }}>
       <AppContext.Provider value={values}>
         <>
           <Loader loading={showLoader} />
           <MDBRow>
             {user && (
               <MDBCol size={collapsed ? 1 : 2} className="p-0">
+                {" "}
                 <SidebarComponent
                   collapsed={collapsed}
                   handleCollapse={handleCollapse}
                 />
               </MDBCol>
             )}
-            <MDBCol size={collapsed ? 11 : 10}>
+            <MDBCol size={user && collapsed ? 11 : 10}>
               <Routes>
                 {user ? (
                   <Route path="/login" element={<Navigate to={pathName} />} />
@@ -101,6 +111,126 @@ function App() {
                     </RequireAuth>
                   }
                 />
+                <Route
+                  path="/monitoring"
+                  element={
+                    <RequireAuth>
+                      <Overview theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/overview"
+                  element={
+                    <RequireAuth>
+                      <Overview theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/uci-api"
+                  element={
+                    <RequireAuth>
+                      <Uciapi theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/inbound"
+                  element={
+                    <RequireAuth>
+                      <Inbound theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/orchestrator"
+                  element={
+                    <RequireAuth>
+                      <Orchestrator theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/broadcast-transformer"
+                  element={
+                    <RequireAuth>
+                      <BroadcastTransformer theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/outbound"
+                  element={
+                    <RequireAuth>
+                      <Outbound theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/transformer"
+                  element={
+                    <RequireAuth>
+                      <Transformer theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs"
+                  element={
+                    <RequireAuth>
+                      <UCIAPIlogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/uci-api"
+                  element={
+                    <RequireAuth>
+                      <UCIAPIlogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/inbound"
+                  element={
+                    <RequireAuth>
+                      <InboundLogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/orchestrator"
+                  element={
+                    <RequireAuth>
+                      <OrchestratorLogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/transformer"
+                  element={
+                    <RequireAuth>
+                      <TransformerLogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/broadcast-transformer"
+                  element={
+                    <RequireAuth>
+                      <BroadcastTransformerLogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
+                <Route
+                  path="/monitoring/logs/outbound"
+                  element={
+                    <RequireAuth>
+                      <OutboundLogs theme={store?.theme} />
+                    </RequireAuth>
+                  }
+                />
               </Routes>
             </MDBCol>
           </MDBRow>
@@ -133,4 +263,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/api/downloadErrLog.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+import { downloadErrLog } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const downloadErrLogData = (
+  service_name: string,
+  date:string
+) => {
+  const url = downloadErrLog(service_name,date);
+  const config = {
+    headers: {
+      ...getDefaultHeaders()
+    },
+  };
+
+  return axios.get(url, config);
+};

src/api/downloadLog.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+import { downloadLog } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const downloadLogData = (
+  service_name: string,
+  date:string
+) => {
+  const url = downloadLog(service_name,date);
+  const config = {
+    headers: {
+      ...getDefaultHeaders()
+    },
+  };
+
+  return axios.get(url, config);
+};

src/api/fetchOverview.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { fetchOverview } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const fetchOverviewData = (
+  file: string
+) => {
+  const url = fetchOverview(file);
+  const config = {
+    headers: {
+      ...getDefaultHeaders()
+    },
+  };
+
+  return axios.get(url, config);
+};

src/api/fetchRealtimeData.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { fetchRealtimeData } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const fetchRealtime = (
+  file: string
+) => {
+  const url = fetchRealtimeData(file);
+  const config = {
+    headers: {
+      ...getDefaultHeaders()
+    },
+  };
+
+  return axios.get(url, config);
+};

src/api/fetchService.ts

@@ -0,0 +1,18 @@
+import axios from "axios";
+import { fetchService } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const fetchServiceData = (
+  service_name: string,
+  lines: number,
+  date: string
+) => {
+  const url = fetchService(service_name, lines, date);
+  const config = {
+    headers: {
+      ...getDefaultHeaders()
+    },
+  };
+
+  return axios.get(url, config);
+};

src/api/getFiles.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { getFiles } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const getFilesData = () => {
+  const config = {
+    headers: {
+      ...getDefaultHeaders(),
+    },
+  };
+  return axios.get(getFiles, config);
+};

src/api/stopRealtimeData.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+import { stopRealtimeData } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const stopRealtime = () => {
+  const config = {
+    headers: {
+      ...getDefaultHeaders(),
+    },
+  };
+
+  return axios.post(stopRealtimeData,'', config);
+};

src/api/triggerRealtime.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { triggerRealtimeData } from "./urls";
+import { getDefaultHeaders } from "./utils";
+
+export const triggerRealtimeDataRes = () => {
+  const config = {
+    headers: {
+      ...getDefaultHeaders(),
+    },
+  };
+  return axios.post(triggerRealtimeData, "", config);
+};