diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 38ab1e6..bf8af83 100644 --- 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" + } } } }, diff --git a/src/Components/AppRoutes/index.js b/src/Components/AppRoutes/index.js index 8982450..d055d1a 100644 --- 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 ) && ( 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 ( {children} diff --git a/src/Contexts/WebSocketContext.js b/src/Contexts/WebSocketContext.js index 88d8b39..5e19428 100644 --- 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 ); }; diff --git a/src/Handlers/WebSocketMessageHandler.js b/src/Handlers/WebSocketMessageHandler.js index cfe76b8..7a83c9d 100644 --- 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; diff --git a/src/Pages/AdminArea/Manage/AddLogManagerServerConnectionModal.js b/src/Pages/AdminArea/Manage/AddLogManagerServerConnectionModal.js new file mode 100644 index 0000000..2461b61 --- /dev/null +++ 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 ( + setIsModalOpen(false)} + onOk={() => onConfirmAddLogManagerServerConnection()} + > +
+ + setDisplayName(e.target.value)} + minLength={Constants.GLOBALS.MIN_LOG_MANAGER_DISPLAY_NAME_LENGTH} + maxLength={Constants.GLOBALS.MAX_LOG_MANAGER_DISPLAY_NAME_LENGTH} + /> + + + + setAddress(e.target.value)} + minLength={Constants.GLOBALS.MIN_LOG_MANAGER_ADDRESS_LENGTH} + maxLength={Constants.GLOBALS.MAX_LOG_MANAGER_ADDRESS_LENGTH} + /> + +
+
+ ); +} diff --git a/src/Pages/AdminArea/Manage/index.js b/src/Pages/AdminArea/Manage/index.js index dfce9f8..5dd2705 100644 --- 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 ) && (

{t("adminArea.manage.groupTasksCard.description")}

@@ -31,6 +42,130 @@ export default function AdminAreaManage() {
)} + + + + ); +} + +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) => ( + + + webSocketContext.SendSocketMessage( + SentMessagesCommands.DeleteUserApiKey, + { Id: record.key } + ) + } + > + {t("common.button.delete")} + + + ), + }, + ]; + }; + + 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 ( + <> +
+ + {t("adminArea.manage.logManagers.header")} ( + {consolesContext.connectedLogManagerServers.length}) + + + {hasPermission( + appContext.userPermissions, + Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER + ) && ( + + )} +
+ + + + ); } diff --git a/src/Pages/AllUsers/index.js b/src/Pages/AllUsers/index.js index 7c70012..5a1d0a2 100644 --- a/src/Pages/AllUsers/index.js +++ b/src/Pages/AllUsers/index.js @@ -351,6 +351,7 @@ export default function AllUsers() { {t("allUsers.header.allUsers")} ({activatedUsers.length}) + {hasPermission( appContext.userPermissions, Constants.PERMISSIONS.ALL_USERS.CREATE_NEW_USER diff --git a/src/Pages/Consoles/index.js b/src/Pages/Consoles/index.js index dd77ad8..3f33206 100644 --- 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 ) : ( ) @@ -75,12 +79,20 @@ export default function Consoles() {