add log manager server connection

2023-09-12 22:31:43 +02:00 · 2023-09-12 22:31:43 +02:00 · ccac69911b
parent d16e1e8f86
commit ccac69911b
11 changed files with 326 additions and 31 deletions
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -273,6 +273,25 @@
        "title": "Group Task Categories",
        "description": "Searching for category changes forces the server to search for new categories or delete old ones from the cache.",
        "buttonText": "Check which categories are available"
+      },
+      "logManagers": {
+        "header": "Manage log manager connections",
+        "column": {
+          "displayName": "Display Name",
+          "address": "Address",
+          "action": "Action",
+          "createdAt": "Created At"
+        },
+        "popconfirm": {
+          "title": "Remove log manager",
+          "description": "Are you sure you want to remove this log manager?"
+        },
+        "addLogManagerServerConnection": "Add log manager server connection",
+        "addLogManagerServerConnectionModal": {
+          "title": "Add log manager server connection",
+          "displayName": "Display Name",
+          "address": "Address"
+        }
      }
    }
  },
--- a/src/Components/AppRoutes/index.js
+++ b/src/Components/AppRoutes/index.js
@ -218,9 +218,12 @@ export default function AppRoutes() {
        />
      )}

-      {hasPermission(
+      {hasOnePermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE,
+        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          .ADD_LOG_MANAGER_SERVER_CONNECTION
      ) && (
        <Route
          path={Constants.ROUTE_PATHS.ADMIN_AREA_MANAGE}
--- a/src/Components/SideMenu/index.js
+++ b/src/Components/SideMenu/index.js
@ -158,6 +158,9 @@ export default function SideMenu({
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN,
        Constants.PERMISSIONS.ADMIN_AREA.LOGS,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE,
+        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          .ADD_LOG_MANAGER_SERVER_CONNECTION
      )
    ) {
      items.push({
@ -201,9 +204,12 @@ export default function SideMenu({
      }

      if (
-        hasPermission(
+        hasOnePermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+            .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE,
+          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+            .ADD_LOG_MANAGER_SERVER_CONNECTION
        )
      ) {
        adminArea.children.push({
--- a/src/Contexts/ConsolesContext.js
+++ b/src/Contexts/ConsolesContext.js
@ -9,19 +9,15 @@ 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",
-    },
-  ]);
+  const [connectedLogManagerServers, setConnectedLogManagerServers] = useState(
+    []
+  );

  return (
    <ConsolesContext.Provider
      value={{
-        logManagerServers,
-        setLogManagerServers,
+        connectedLogManagerServers,
+        setConnectedLogManagerServers,
      }}
    >
      {children}
--- a/src/Contexts/WebSocketContext.js
+++ b/src/Contexts/WebSocketContext.js
@ -9,6 +9,7 @@ import { useUserProfileContext } from "./UserProfileContext";
 import { useAdminAreaRolesContext } from "./AdminAreaRolesContext";
 import { useUsersContext } from "./UsersContext";
 import { useHeaderContext } from "./HeaderContext";
+import { useConsolesContext } from "./ConsolesContext";

 const WebSocketContext = createContext(null);

@ -32,6 +33,7 @@ export default function WebSocketProvider({
  const userProfileContext = useUserProfileContext();
  const adminAreaRolesContext = useAdminAreaRolesContext();
  const usersContext = useUsersContext();
+  const consolesContext = useConsolesContext();

  const connect = () => {
    ws.current = new WebSocket(`${Constants.WS_ADDRESS}?auth=${userSession}`);
@ -76,7 +78,8 @@ export default function WebSocketProvider({
        groupTasksContext,
        userProfileContext,
        adminAreaRolesContext,
-        usersContext
+        usersContext,
+        consolesContext
      );
    };

--- a/src/Handlers/WebSocketMessageHandler.js
+++ b/src/Handlers/WebSocketMessageHandler.js
@ -45,6 +45,7 @@ export const ReceivedMessagesCommands = {
  AllNotificationsDeleted: 42,
  OneNotificationDeleted: 43,
  AdminAreaManageCheckedForAvailableCategories: 44,
+  AdminAreaManageLogManagerServerConnectionAdded: 45,
 };

 // commands sent to the backend server
@ -74,6 +75,7 @@ export const SentMessagesCommands = {
  DeleteAllNotifications: 24,
  DeleteOneNotification: 25,
  AdminAreaManageCheckWhichCategoriesAreAvailable: 26,
+  AdminAreaManageAddLogManagerServerConnection: 27,
 };

 /*
@ -92,7 +94,8 @@ export function handleWebSocketMessage(
  groupTasksContext,
  userProfileContext,
  adminAreaRolesContext,
-  usersContext
+  usersContext,
+  consolesContext
 ) {
  const data = JSON.parse(event.data);

@ -983,6 +986,11 @@ export function handleWebSocketMessage(
        );
      }
      break;
+    case ReceivedMessagesCommands.AdminAreaManageLogManagerServerConnectionAdded:
+      console.log("b", body);
+
+      consolesContext.setConnectedLogManagerServers((arr) => [...arr, body]);
+      break;
    default:
      console.error("unknown command", cmd);
      break;
--- a/src/Pages/AdminArea/Manage/AddLogManagerServerConnectionModal.js
+++ b/src/Pages/AdminArea/Manage/AddLogManagerServerConnectionModal.js
@ -0,0 +1,105 @@
+import { Form, Input, Modal } from "antd";
+import { useState } from "react";
+import { Constants } from "../../../utils";
+import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
+
+export default function AddLogManagerServerConnectionModal({
+  isModalOpen,
+  setIsModalOpen,
+  t,
+  webSocketContext,
+}) {
+  const [displayName, setDisplayName] = useState("");
+  const [address, setAddress] = useState("");
+
+  const isAddLogManagerServerConnectionPossible = () => {
+    if (
+      displayName.length <
+        Constants.GLOBALS.MIN_LOG_MANAGER_DISPLAY_NAME_LENGTH ||
+      displayName.length >
+        Constants.GLOBALS.MAX_LOG_MANAGER_DISPLAY_NAME_LENGTH ||
+      address.length < Constants.GLOBALS.MIN_LOG_MANAGER_ADDRESS_LENGTH ||
+      address.length > Constants.GLOBALS.MAX_LOG_MANAGER_ADDRESS_LENGTH
+    )
+      return false;
+
+    return true;
+  };
+
+  const onConfirmAddLogManagerServerConnection = () => {
+    webSocketContext.SendSocketMessage(
+      SentMessagesCommands.AdminAreaManageAddLogManagerServerConnection,
+      {
+        DisplayName: displayName,
+        Address: address,
+      }
+    );
+
+    setDisplayName("");
+    setAddress("");
+
+    setIsModalOpen(false);
+  };
+
+  return (
+    <Modal
+      title={t(
+        "adminArea.manage.logManagers.addLogManagerServerConnectionModal.title"
+      )}
+      open={isModalOpen}
+      centered
+      maskClosable={false}
+      okText={t("common.button.create")}
+      cancelText={t("common.button.cancel")}
+      okButtonProps={{ disabled: !isAddLogManagerServerConnectionPossible() }}
+      onCancel={() => setIsModalOpen(false)}
+      onOk={() => onConfirmAddLogManagerServerConnection()}
+    >
+      <Form layout="vertical">
+        <Form.Item
+          label={t(
+            "adminArea.manage.logManagers.addLogManagerServerConnectionModal.displayName"
+          )}
+          hasFeedback
+          validateStatus={
+            displayName.length !== 0 &&
+            displayName.length <
+              Constants.GLOBALS.MIN_LOG_MANAGER_DISPLAY_NAME_LENGTH &&
+            "error"
+          }
+        >
+          <Input
+            placeholder={t(
+              "adminArea.manage.logManagers.addLogManagerServerConnectionModal.displayName"
+            )}
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            minLength={Constants.GLOBALS.MIN_LOG_MANAGER_DISPLAY_NAME_LENGTH}
+            maxLength={Constants.GLOBALS.MAX_LOG_MANAGER_DISPLAY_NAME_LENGTH}
+          />
+        </Form.Item>
+
+        <Form.Item
+          label={t(
+            "adminArea.manage.logManagers.addLogManagerServerConnectionModal.address"
+          )}
+          hasFeedback
+          validateStatus={
+            address.length !== 0 &&
+            address.length < Constants.GLOBALS.MIN_LOG_MANAGER_ADDRESS_LENGTH &&
+            "error"
+          }
+        >
+          <Input
+            placeholder={"http://127.0.0.1:50110/v1/log"}
+            type="url"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            minLength={Constants.GLOBALS.MIN_LOG_MANAGER_ADDRESS_LENGTH}
+            maxLength={Constants.GLOBALS.MAX_LOG_MANAGER_ADDRESS_LENGTH}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
--- a/src/Pages/AdminArea/Manage/index.js
+++ b/src/Pages/AdminArea/Manage/index.js
@ -1,9 +1,20 @@
-import { Button, Card } from "antd";
+import { Button, Card, Popconfirm, Space, Table, Typography } from "antd";
 import { useTranslation } from "react-i18next";
 import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
 import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
-import { Constants, hasPermission } from "../../../utils";
+import {
+  AppStyle,
+  Constants,
+  FormatDatetime,
+  hasPermission,
+  myFetch,
+} from "../../../utils";
 import { useAppContext } from "../../../Contexts/AppContext";
+import { useConsolesContext } from "../../../Contexts/ConsolesContext";
+import { Link } from "react-router-dom";
+import { PlusOutlined } from "@ant-design/icons";
+import AddLogManagerServerConnectionModal from "./AddLogManagerServerConnectionModal";
+import { useEffect, useState } from "react";

 export default function AdminAreaManage() {
  const { t } = useTranslation();
@ -14,8 +25,8 @@ export default function AdminAreaManage() {
    <>
      {hasPermission(
        appContext.userPermissions,
-        Constants.PERMISSIONS.ADMIN_AREA
-          .MANAGE_CHECK_WHICH_CATEGORIES_ARE_AVAILABLE
+        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
+          .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE
      ) && (
        <Card title={t("adminArea.manage.groupTasksCard.title")}>
          <p>{t("adminArea.manage.groupTasksCard.description")}</p>
@ -31,6 +42,130 @@ export default function AdminAreaManage() {
          </Button>
        </Card>
      )}
+
+      <LogManagerServersTable
+        t={t}
+        webSocketContext={webSocketContext}
+        appContext={appContext}
+      />
+    </>
+  );
+}
+
+function LogManagerServersTable({ t, webSocketContext, appContext }) {
+  const consolesContext = useConsolesContext();
+  const [
+    isAddLogManagerServerConnectionModalOpen,
+    setIsAddLogManagerServerConnectionModalOpen,
+  ] = useState(false);
+
+  const getColumns = () => {
+    return [
+      {
+        title: t("adminArea.manage.logManagers.column.displayName"),
+        dataIndex: "displayName",
+        key: "displayName",
+      },
+      {
+        title: t("adminArea.manage.logManagers.column.address"),
+        dataIndex: "address",
+        key: "address",
+      },
+      {
+        title: t("adminArea.manage.logManagers.column.createdAt"),
+        dataIndex: "createdAt",
+        key: "createdAt",
+      },
+      {
+        title: t("adminArea.manage.logManagers.column.action"),
+        dataIndex: "action",
+        key: "action",
+        render: (_, record) => (
+          <Space size="middle">
+            <Popconfirm
+              placement="left"
+              title={t("adminArea.manage.logManagers.popconfirm.title")}
+              description={t(
+                "adminArea.manage.logManagers.popconfirm.description"
+              )}
+              okText={t("common.button.delete")}
+              cancelText={t("common.button.cancel")}
+              onConfirm={() =>
+                webSocketContext.SendSocketMessage(
+                  SentMessagesCommands.DeleteUserApiKey,
+                  { Id: record.key }
+                )
+              }
+            >
+              <Link to="#">{t("common.button.delete")}</Link>
+            </Popconfirm>
+          </Space>
+        ),
+      },
+    ];
+  };
+
+  const getTableItems = () => {
+    let items = [];
+
+    consolesContext.connectedLogManagerServers.forEach((connection, index) => {
+      items.push({
+        key: index,
+        id: connection.Id,
+        displayName: connection.DisplayName,
+        address: connection.Address,
+        createdAt: FormatDatetime(connection.CreatedAt),
+      });
+    });
+
+    return items;
+  };
+
+  useEffect(() => {
+    myFetch("/lmsc", "GET").then((data) =>
+      consolesContext.setConnectedLogManagerServers(data)
+    );
+  }, []);
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          marginTop: AppStyle.app.margin,
+        }}
+      >
+        <Typography.Title level={4}>
+          {t("adminArea.manage.logManagers.header")} (
+          {consolesContext.connectedLogManagerServers.length})
+        </Typography.Title>
+
+        {hasPermission(
+          appContext.userPermissions,
+          Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER
+        ) && (
+          <Button
+            icon={<PlusOutlined />}
+            onClick={() => setIsAddLogManagerServerConnectionModalOpen(true)}
+          >
+            {t("adminArea.manage.logManagers.addLogManagerServerConnection")}
+          </Button>
+        )}
+      </div>
+
+      <Table
+        scroll={{ x: "max-content" }}
+        columns={getColumns()}
+        dataSource={getTableItems()}
+      />
+
+      <AddLogManagerServerConnectionModal
+        isModalOpen={isAddLogManagerServerConnectionModalOpen}
+        setIsModalOpen={setIsAddLogManagerServerConnectionModalOpen}
+        t={t}
+        webSocketContext={webSocketContext}
+      />
    </>
  );
 }
--- a/src/Pages/AllUsers/index.js
+++ b/src/Pages/AllUsers/index.js
@ -351,6 +351,7 @@ export default function AllUsers() {
        <Typography.Title level={4}>
          {t("allUsers.header.allUsers")} ({activatedUsers.length})
        </Typography.Title>
+
        {hasPermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER
--- a/src/Pages/Consoles/index.js
+++ b/src/Pages/Consoles/index.js
@ -9,15 +9,19 @@ export default function Consoles() {
  const { t } = useTranslation();
  const consolesContext = useConsolesContext();

-  const [selectedLogServer, setSelectedLogServer] = useState(
-    consolesContext.logManagerServers.length > 0
-      ? consolesContext.logManagerServers[0].value
-      : ""
-  );
+  const [selectedLogServer, setSelectedLogServer] = useState("");
  const [availableLogTypes, setAvailableLogTypes] = useState([]);
  const [selectedLogType, setSelectedLogType] = useState("");
  const [result, setResult] = useState();

+  useEffect(() => {
+    myFetch("/lmsc", "GET").then((data) => {
+      consolesContext.setConnectedLogManagerServers(data);
+
+      setSelectedLogServer(data.length > 0 ? data[0].Address : "");
+    });
+  }, []);
+
  useEffect(() => {
    if (selectedLogServer === "") return;

@ -60,12 +64,12 @@ export default function Consoles() {
      type={selectedLogType}
      logApiAddress={selectedLogServer}
      customResult={
-        consolesContext.logManagerServers.length > 0 ? (
+        consolesContext.connectedLogManagerServers.length > 0 ? (
          result
        ) : (
          <Result
            status="500"
-            title={t("common.noLogManagerServerSpecified")}
+            title={t("consoles.noLogManagerServerSpecified")}
            subTitle={t("common.contactAdmin")}
          />
        )
@ -75,12 +79,20 @@ export default function Consoles() {
          <Row>
            <Col>
              <Select
-                disabled={consolesContext.logManagerServers.length === 0}
+                disabled={
+                  consolesContext.connectedLogManagerServers.length === 0
+                }
                style={{ width: 200, marginRight: AppStyle.app.margin }}
-                options={consolesContext.logManagerServers}
+                options={consolesContext.connectedLogManagerServers.map(
+                  (connection) => {
+                    return {
+                      label: connection.DisplayName,
+                      value: connection.Address,
+                    };
+                  }
+                )}
                value={selectedLogServer}
                onChange={(value) => setSelectedLogServer(value)}
-                placeholder="Select server"
              />
            </Col>

@ -88,7 +100,7 @@ export default function Consoles() {
              <Select
                disabled={
                  result !== undefined ||
-                  consolesContext.logManagerServers.length === 0
+                  consolesContext.connectedLogManagerServers.length === 0
                }
                style={{ width: 200 }}
                options={availableLogTypes}
--- a/src/utils.js
+++ b/src/utils.js
@ -83,6 +83,10 @@ export const Constants = {
    EQUIPMENT_DOCUMENTATIONS_PAGINATION_LIMIT: 3,
    GROUP_TASKS_PAGINATION_LIMIT: 5,
    NOTIFICATIONS_PAGINATION_LIMIT: 10,
+    MIN_LOG_MANAGER_DISPLAY_NAME_LENGTH: 2,
+    MAX_LOG_MANAGER_DISPLAY_NAME_LENGTH: 16,
+    MIN_LOG_MANAGER_ADDRESS_LENGTH: 3,
+    MAX_LOG_MANAGER_ADDRESS_LENGTH: 100,
  },
  MAX_AVATAR_SIZE: 5 * 1024 * 1024,
  ACCEPTED_AVATAR_FILE_TYPES: [
@ -133,9 +137,12 @@ export const Constants = {
        MOVE_ROLE_UP_DOWN: "admin_area.roles.move_role_up_down",
      },
      LOGS: "admin_area.logs",
-      MANAGE: "admin_area.manage",
-      MANAGE_CHECK_WHICH_CATEGORIES_ARE_AVAILABLE:
+      MANAGE: {
+        CHECK_WHICH_CATEGORIES_ARE_AVAILABLE:
          "admin_area.manage.check_which_categories_are_available",
+        ADD_LOG_MANAGER_SERVER_CONNECTION:
+          "admin_area.manage.add_log_manager_server_connection",
+      },
    },
    USER_PROFILE: {
      API_KEYS: "user_profile.api_keys",