consoles

src/App.js

@@ -13,6 +13,7 @@ import { AdminAreaRolesProvider } from "./Contexts/AdminAreaRolesContext";
 import { UserProfileProvider } from "./Contexts/UserProfileContext";
 import { UsersProvider } from "./Contexts/UsersContext";
 import HeaderProvider from "./Contexts/HeaderContext";
+import ConsolesProvider from "./Contexts/ConsolesContext";
 
 export default function App() {
   const [notificationApi, notificationContextHolder] =
@@ -42,20 +43,22 @@ export default function App() {
               <AdminAreaRolesProvider>
                 <UserProfileProvider>
                   <UsersProvider>
-                    <WebSocketProvider
+                    <ConsolesProvider>
-                      userSession={userSession}
+                      <WebSocketProvider
-                      setUserSession={setUserSession}
-                      isWebSocketReady={isWebSocketReady}
-                      setIsWebSocketReady={setIsWebSocketReady}
-                      notificationApi={notificationApi}
-                    >
-                      <ReconnectingView isWebSocketReady={isWebSocketReady} />
-
-                      <DashboardLayout
                         userSession={userSession}
                         setUserSession={setUserSession}
-                      />
+                        isWebSocketReady={isWebSocketReady}
-                    </WebSocketProvider>
+                        setIsWebSocketReady={setIsWebSocketReady}
+                        notificationApi={notificationApi}
+                      >
+                        <ReconnectingView isWebSocketReady={isWebSocketReady} />
+
+                        <DashboardLayout
+                          userSession={userSession}
+                          setUserSession={setUserSession}
+                        />
+                      </WebSocketProvider>
+                    </ConsolesProvider>
                   </UsersProvider>
                 </UserProfileProvider>
               </AdminAreaRolesProvider>

src/Components/LogCard/index.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { Constants, myFetch } from "../../utils";
 import { useTranslation } from "react-i18next";
 
-export default function LogCard({ type }) {
+export default function LogCard({ type, title, customResult }) {
   const { t } = useTranslation();
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
@@ -15,31 +15,43 @@ export default function LogCard({ type }) {
   const [logs, setLogs] = useState([]);
 
   useEffect(() => {
-    console.log("useEffect logCard");
+    console.log("useEffect logCard", type);
+
+    if (type === "") return;
 
     // init request to get all available dates
     myFetch(`${type}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
       .then((data) => {
         let dates = [];
 
+        console.log("data", data);
+
         if (data.length === 0) return;
 
-        data.forEach((date) =>
+        dates = data.map((date) => {
-          dates.push({
+          return {
             value: date,
             label: date,
-          })
+          };
-        );
+        });
 
         setAvailableDates(dates);
         setSelectedDate(dates[0].value);
+
+        if (selectedDate === dates[0].value) {
+          loadLogs(dates[0].value);
+        }
       })
       .catch((errStatus) => console.log("error", errStatus));
-  }, []);
+  }, [type]);
 
   const loadLogs = (date) => {
     setLoadingSpinner(true);
 
+    console.log("loadLogs", date);
+
+    if (date === "") return;
+
     // fetch logs
     myFetch(`${type}?d=${date}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
       .then((data) => {
@@ -56,10 +68,13 @@ export default function LogCard({ type }) {
       .catch((errStatus) => console.log("error", errStatus));
   };
 
-  useEffect(() => loadLogs(selectedDate), [selectedDate]);
+  useEffect(() => {
+    loadLogs(selectedDate);
+  }, [selectedDate]);
 
   return (
     <Card
+      title={title}
       extra={
         <Space>
           <Checkbox
@@ -94,14 +109,31 @@ export default function LogCard({ type }) {
         width: "100%",
       }}
     >
-      {!loadingSpinner ? (
+      {customResult === undefined ? (
-        <div style={{ height: "80vh", overflowY: "scroll", paddingRight: 6 }}>
+        <>
-          {logs.map((log, i) => (
+          {!loadingSpinner && type !== "" ? (
-            <p key={i} style={{ margin: 0 }}>
+            <div
-              {log}
+              style={{ height: "80vh", overflowY: "scroll", paddingRight: 6 }}
-            </p>
+            >
-          ))}
+              {logs.map((log, i) => (
-        </div>
+                <p key={i} style={{ margin: 0 }}>
+                  {log}
+                </p>
+              ))}
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "80vh",
+              }}
+            >
+              <Spin size="large"></Spin>
+            </div>
+          )}
+        </>
       ) : (
         <div
           style={{
@@ -111,7 +143,7 @@ export default function LogCard({ type }) {
             height: "80vh",
           }}
         >
-          <Spin size="large"></Spin>
+          {customResult}
         </div>
       )}
     </Card>

src/Contexts/ConsolesContext.js

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState } from "react";
+
+const preview = {
+  logManagerServers: [],
+};
+
+const ConsolesContext = createContext(preview);
+
+export const useConsolesContext = () => useContext(ConsolesContext);
+
+export default function ConsolesProvider({ children }) {
+  const [logManagerServers, setLogManagerServers] = useState([
+    { label: "Dev Server", value: "http://127.0.0.1:50110/v1/log" },
+    {
+      label: "Stable Server",
+      value: "http://127.0.0.1:50120/v1/log",
+    },
+    {
+      label: "Test123",
+      value: "test",
+    },
+  ]);
+
+  return (
+    <ConsolesContext.Provider
+      value={{
+        logManagerServers,
+        setLogManagerServers,
+      }}
+    >
+      {children}
+    </ConsolesContext.Provider>
+  );
+}

src/Pages/Consoles/index.js

@@ -1,3 +1,104 @@
+import { Result, Select, Space } from "antd";
+import LogCard from "../../Components/LogCard";
+import { useEffect, useState } from "react";
+import { myFetch } from "../../utils";
+import { useConsolesContext } from "../../Contexts/ConsolesContext";
+
 export default function Consoles() {
-  return <></>;
+  const consolesContext = useConsolesContext();
+
+  const [selectedLogServer, setSelectedLogServer] = useState(
+    consolesContext.logManagerServers.length > 0
+      ? consolesContext.logManagerServers[0].value
+      : ""
+  );
+  const [availableLogTypes, setAvailableLogTypes] = useState([]);
+  const [selectedLogType, setSelectedLogType] = useState("");
+  const [result, setResult] = useState();
+
+  useEffect(() => {
+    console.log("selectedLogServer", selectedLogServer);
+
+    if (selectedLogServer === "") return;
+
+    myFetch("/types", "GET", null, {}, 0, selectedLogServer)
+      .then((data) => {
+        console.log("data", data);
+
+        let newTypes = [];
+
+        if (data.length > 0) {
+          newTypes = data.map((type) => {
+            return { label: type, value: type };
+          });
+
+          setResult();
+        } else {
+          setResult(
+            <Result
+              status="404"
+              title="No log types found"
+              subTitle="Contact admin"
+            />
+          );
+        }
+
+        setAvailableLogTypes(newTypes);
+
+        setSelectedLogType(newTypes.length > 0 ? newTypes[0].value : "");
+      })
+      .catch((err) => {
+        console.log("err", err);
+
+        setResult(
+          <Result
+            status="500"
+            title="Couldn't reach log manager server"
+            subTitle="Contact admin"
+          />
+        );
+      });
+  }, [selectedLogServer]);
+
+  return (
+    <LogCard
+      type={selectedLogType}
+      customResult={
+        consolesContext.logManagerServers.length > 0 ? (
+          result
+        ) : (
+          <Result
+            status="500"
+            title="No log manager specified"
+            subTitle="Contact admin"
+          />
+        )
+      }
+      title={
+        <Space>
+          <Select
+            disabled={consolesContext.logManagerServers.length === 0}
+            style={{ width: 200 }}
+            options={consolesContext.logManagerServers}
+            value={selectedLogServer}
+            onChange={(value) => setSelectedLogServer(value)}
+            placeholder="Select server"
+          />
+
+          {console.warn("def", consolesContext.logManagerServers[0])}
+
+          <Select
+            disabled={
+              result !== undefined ||
+              consolesContext.logManagerServers.length === 0
+            }
+            style={{ width: 200 }}
+            options={availableLogTypes}
+            value={selectedLogType}
+            onChange={(value) => setSelectedLogType(value)}
+          />
+        </Space>
+      }
+    />
+  );
 }