add log manager server connection

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"
+        }
       }
     }
   },

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}

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({

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([
+  const [connectedLogManagerServers, setConnectedLogManagerServers] = 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",
-    },
-  ]);
 
   return (
     <ConsolesContext.Provider
       value={{
-        logManagerServers,
+        connectedLogManagerServers,
-        setLogManagerServers,
+        setConnectedLogManagerServers,
       }}
     >
       {children}

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
       );
     };
 

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;

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>
+  );
+}

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
+        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
-          .MANAGE_CHECK_WHICH_CATEGORIES_ARE_AVAILABLE
+          .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}
+      />
     </>
   );
 }

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

src/Pages/Consoles/index.js

@@ -9,15 +9,19 @@ export default function Consoles() {
   const { t } = useTranslation();
   const consolesContext = useConsolesContext();
 
-  const [selectedLogServer, setSelectedLogServer] = useState(
+  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(() => {
+    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}

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: {
-      MANAGE_CHECK_WHICH_CATEGORIES_ARE_AVAILABLE:
+        CHECK_WHICH_CATEGORIES_ARE_AVAILABLE:
-        "admin_area.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",