feat: Add node selection for logs in CoreSettingsModal.tsx

Gozargah · Aug 13, 2024 · b4dbba7 · b4dbba7
1 parent 349451d
commit b4dbba7
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 20 deletions.
diff --git a/app/dashboard/src/components/CoreSettingsModal.tsx b/app/dashboard/src/components/CoreSettingsModal.tsx
@@ -15,6 +15,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Select,
   Text,
   Tooltip,
   useToast,
@@ -40,6 +41,7 @@ import { getAuthToken } from "utils/authStorage";
 import { Icon } from "./Icon";
 import { JsonEditor } from "./JsonEditor";
 import "./JsonEditor/themes.js";
+import { useNodesQuery } from "contexts/NodesContext";
 
 export const MAX_NUMBER_OF_LOGS = 500;
 
@@ -79,7 +81,7 @@ const getStatus = (status: string) => {
   }[status];
 };
 
-const getWebsocketUrl = () => {
+const getWebsocketUrl = (nodeID: string) => {
   try {
     let baseURL = new URL(
       import.meta.env.VITE_BASE_API.startsWith("/")
@@ -89,7 +91,10 @@ const getWebsocketUrl = () => {
 
     return (
       (baseURL.protocol === "https:" ? "wss://" : "ws://") +
-      joinPaths([baseURL.host + baseURL.pathname, "/core/logs"]) +
+      joinPaths([
+        baseURL.host + baseURL.pathname,
+        !nodeID ? "/core/logs" : `/node/${nodeID}/logs`,
+      ]) +
       "?interval=1&token=" +
       getAuthToken()
     );
@@ -102,6 +107,21 @@ const getWebsocketUrl = () => {
 
 let logsTmp: string[] = [];
 const CoreSettingModalContent: FC = () => {
+  const { data: nodes } = useNodesQuery();
+  const disabled = false;
+  const [selectedNode, setNode] = useState<string>("");
+
+  const handleLog = (id: string, title: string) => {
+    if (id === selectedNode) return;
+    else if (id === "host") {
+      setNode("");
+      setLogs([]);
+    } else {
+      setNode(id);
+      setLogs([]);
+    }
+  };
+
   const { isEditingCore } = useDashboard();
   const {
     fetchCoreSettings,
@@ -145,7 +165,7 @@ const CoreSettingModalContent: FC = () => {
     []
   );
 
-  const { readyState } = useWebSocket(getWebsocketUrl(), {
+  const { readyState } = useWebSocket(getWebsocketUrl(selectedNode), {
     onMessage: (e: any) => {
       logsTmp.push(e.data);
       if (logsTmp.length > MAX_NUMBER_OF_LOGS)
@@ -251,8 +271,43 @@ const CoreSettingModalContent: FC = () => {
           </Box>
         </FormControl>
         <FormControl mt="4">
-          <HStack justifyContent="space-between">
-            <FormLabel>{t("core.logs")}</FormLabel>
+          <HStack
+            justifyContent="space-between"
+            style={{ paddingBottom: "1rem" }}
+          >
+            <HStack>
+              {nodes?.[0] && (
+                <Select
+                  size="sm"
+                  className="bx-shadow"
+                  style={{ width: "auto" }}
+                  disabled={disabled}
+                  bg={disabled ? "gray.100" : "transparent"}
+                  _dark={{
+                    bg: disabled ? "gray.600" : "transparent",
+                  }}
+                  onChange={(v) =>
+                    handleLog(
+                      v.currentTarget.value,
+                      v.currentTarget.selectedOptions[0].text
+                    )
+                  }
+                >
+                  <option key={"host"} value={"host"} defaultChecked>
+                    Host
+                  </option>
+                  {nodes &&
+                    nodes.map((s) => {
+                      return (
+                        <option key={s.address} value={String(s.id)}>
+                          {t(s.name)}
+                        </option>
+                      );
+                    })}
+                </Select>
+              )}
+              <FormLabel className="w-au">{t("core.logs")}</FormLabel>
+            </HStack>
             <Text as={FormLabel}>{t(`core.socket.${status}`)}</Text>
           </HStack>
           <Box
@@ -280,21 +335,24 @@ const CoreSettingModalContent: FC = () => {
       </ModalBody>
       <ModalFooter>
         <HStack w="full" justifyContent="space-between">
-          <Box>
-            <Button
-              size="sm"
-              leftIcon={
-                <ReloadIcon
-                  className={classNames({
-                    "animate-spin": isRestarting,
-                  })}
-                />
-              }
-              onClick={() => handleRestartCore()}
-            >
-              {t(isRestarting ? "core.restarting" : "core.restartCore")}
-            </Button>
-          </Box>
+          <HStack>
+            <Box>
+              <Button
+                size="sm"
+                leftIcon={
+                  <ReloadIcon
+                    className={classNames({
+                      "animate-spin": isRestarting,
+                    })}
+                  />
+                }
+                onClick={() => handleRestartCore()}
+              >
+                {t(isRestarting ? "core.restarting" : "core.restartCore")}
+              </Button>
+            </Box>
+          </HStack>
+
           <HStack>
             <Button
               size="sm"

diff --git a/app/dashboard/src/index.scss b/app/dashboard/src/index.scss
@@ -216,6 +216,10 @@ table thead {
   background: #fbd38d;
 }
 
+.bx-shadow {
+  box-shadow: 0px 0px 8px 3px rgb(230 221 221 / 10%);
+}
+
 .circle {
   min-width: 10px;
   min-height: 10px;