Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

subscribe topics

main
alex 2023-09-01 23:27:33 +02:00
parent 6f55d2ec5a
commit d432da1ee1
14 changed files with 101 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -17,7 +17,7 @@ export default function App() {
const [notificationApi, notificationContextHolder] =
notification.useNotification();
const { userSession, setUserSession } = UseUserSession();
const [isWebSocketReady, setIsWebSocketReady] = useState(true);
const [isWebSocketReady, setIsWebSocketReady] = useState(false);
if (!userSession) {
return <Login />;

21
src/Components/AppRoutes/index.js
View File

@ -48,17 +48,6 @@ function SuspenseFallback({ children }) {
export default function AppRoutes() {
const appContext = useAppContext();
/*
<Route
path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
element={
<SuspenseFallback>
<GroupTasks isGroupTasksViewModalOpen={true} />
</SuspenseFallback>
}
/>
*/
console.info("appRoutes");
return (
@ -169,7 +158,7 @@ export default function AppRoutes() {
Constants.PERMISSIONS.SCANNER.USE_SCANNERS
) && (
<Route
path="/scanners"
path={Constants.ROUTE_PATHS.SCANNERS}
element={
<SuspenseFallback>
<Scanners />
@ -179,7 +168,7 @@ export default function AppRoutes() {
)}
<Route
path="/users"
path={Constants.ROUTE_PATHS.USERS}
element={
<SuspenseFallback>
<AllUsers />
@ -188,7 +177,7 @@ export default function AppRoutes() {
/>
<Route
path="/user-profile"
path={Constants.ROUTE_PATHS.USER_PROFILE}
element={
<SuspenseFallback>
<UserProfile />
@ -204,7 +193,7 @@ export default function AppRoutes() {
Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN
) && (
<Route
path="/admin-area/roles"
path={Constants.ROUTE_PATHS.ADMIN_AREA_ROLES}
element={
<SuspenseFallback>
<AdminAreaRoles />
@ -218,7 +207,7 @@ export default function AppRoutes() {
Constants.PERMISSIONS.ADMIN_AREA.LOGS
) && (
<Route
path="/admin-area/logs"
path={Constants.ROUTE_PATHS.ADMIN_AREA_LOGS}
element={
<SuspenseFallback>
<AdminAreaLogs />

37
src/Components/SideMenu/index.js
View File

@ -11,7 +11,7 @@ import {
} from "@ant-design/icons";
import { Badge, Divider, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import { Constants, hasOnePermission, hasPermission } from "../../utils";
@ -19,6 +19,8 @@ import { useTranslation } from "react-i18next";
import { MyUserAvatar } from "../MyAvatar";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import { useAppContext } from "../../Contexts/AppContext";
import { useWebSocketContext } from "../../Contexts/WebSocketContext";
import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
export default function SideMenu({
userSession,
@ -27,12 +29,12 @@ export default function SideMenu({
setIsSideMenuCollapsed,
}) {
const appContext = useAppContext();
const webSocketContext = useWebSocketContext();
const sideBarContext = useSideBarContext();
const location = useLocation();
const [selectedKeys, setSelectedKeys] = useState("/");
const { t } = useTranslation();
useEffect(() => setSelectedKeys(location.pathname), [location.pathname]);
const lastSubscribedTopic = useRef("");
const navigate = useNavigate();
@ -70,7 +72,7 @@ export default function SideMenu({
items.push({
label: t("sideMenu.equipmentDocumentation"),
icon: <BookOutlined />,
key: "/equipment-documentation",
key: Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION,
});
}
@ -148,7 +150,7 @@ export default function SideMenu({
adminArea.children.push({
label: t("sideMenu.adminArea.roles"),
icon: <UsergroupAddOutlined />,
key: "/admin-area/roles",
key: Constants.ROUTE_PATHS.ADMIN_AREA_ROLES,
});
}
@ -161,7 +163,7 @@ export default function SideMenu({
adminArea.children.push({
label: t("sideMenu.adminArea.logs"),
icon: <FileTextOutlined />,
key: "/admin-area/logs",
key: Constants.ROUTE_PATHS.ADMIN_AREA_LOGS,
});
}
@ -184,7 +186,7 @@ export default function SideMenu({
items.push({
icon: <ScanOutlined />,
label: getCurrentUsedScannerName(),
key: "/scanners",
key: Constants.ROUTE_PATHS.SCANNERS,
});
}
@ -201,12 +203,12 @@ export default function SideMenu({
}`}
/>
),
key: "/users",
key: Constants.ROUTE_PATHS.USERS,
},
{
label: ` ${sideBarContext.username}`,
icon: <MyUserAvatar avatar={sideBarContext.avatar} />,
key: "/user-profile",
key: Constants.ROUTE_PATHS.USER_PROFILE,
},
{
label: t("sideMenu.logout"),
@ -230,6 +232,22 @@ export default function SideMenu({
return items;
};
useEffect(() => {
console.log("useeffect side menu");
}, []);
useEffect(() => {
console.log("useeffect side menu 2");
setSelectedKeys(location.pathname);
lastSubscribedTopic.current = location.pathname;
webSocketContext.SendSocketMessage(SentMessagesCommands.SubscribeToTopic, {
topic: location.pathname,
});
}, [location.pathname]);
return (
<Sider
theme="light"
@ -274,7 +292,6 @@ export default function SideMenu({
theme="light"
selectedKeys={[selectedKeys]}
items={getFirstMenuItems()}
openKeys={["/admin-area", "/group-tasks"]}
defaultOpenKeys={["/admin-area", "/group-tasks"]}
/>
</div>

17
src/Contexts/WebSocketContext.js
View File

@ -2,7 +2,6 @@ import { createContext, useContext, useEffect, useRef } from "react";
import { Constants, myFetch } from "../utils";
import { useSideBarContext } from "./SideBarContext";
import { useAppContext } from "./AppContext";
import { message } from "antd";
import { handleWebSocketMessage } from "../Handlers/WebSocketMessageHandler";
import { useGroupTasksContext } from "./GroupTasksContext";
import { useNavigate } from "react-router-dom";
@ -23,6 +22,7 @@ export default function WebSocketProvider({
notificationApi,
}) {
const ws = useRef(null);
const wsMessageCache = useRef([]);
const navigate = useNavigate();
const appContext = useAppContext();
const sideBarContext = useSideBarContext();
@ -49,6 +49,15 @@ export default function WebSocketProvider({
sideBarContext.setAvatar(data.Avatar);
sideBarContext.setAvailableCategoryGroups(data.AvailableCategoryGroups);
});
if (wsMessageCache.current.length > 0) {
// send cached messages
wsMessageCache.current.forEach((message) => {
ws.current.send(JSON.stringify(message));
});
wsMessageCache.current = [];
}
};
ws.current.onmessage = (event) => {
@ -88,7 +97,7 @@ export default function WebSocketProvider({
};
const SendSocketMessage = (cmd, body) => {
if (isWebSocketReady) {
if (isWebSocketReady && ws.current !== null) {
ws.current.send(JSON.stringify({ Cmd: cmd, Body: body }));
} else {
/*notificationApi["error"]({
@ -96,7 +105,9 @@ export default function WebSocketProvider({
description: `Please check your internet connection`,
}); */
message.error(`Websocket is not ready`);
wsMessageCache.current.push({ Cmd: cmd, Body: body });
// message.error(`Websocket is not ready`);
}
};

31
src/Handlers/WebSocketMessageHandler.js
View File

@ -43,6 +43,7 @@ export const ReceivedMessagesCommands = {
InstallingGlobalPythonPackages: 36,
InstallingGlobalPythonPackagesFailed: 37,
InstallingGlobalPythonPackagesFinished: 38,
UpdateUsers: 39,
};
// commands sent to the backend server
@ -69,6 +70,7 @@ export const SentMessagesCommands = {
DeleteUserApiKey: 20,
GroupTasksInstallPythonPackages: 21,
GroupTasksInstallGlobalPythonPackages: 22,
SubscribeToTopic: 23,
};
export function handleWebSocketMessage(
@ -89,20 +91,7 @@ export function handleWebSocketMessage(
switch (cmd) {
case ReceivedMessagesCommands.UpdateConnectedUsers:
sideBarContext.setConnectedUsers(body.WebSocketUsersCount);
usersContext.setUsers((arr) => {
const newArr = [...arr];
const arrIndex = arr.findIndex((arr1) => arr1.Id === body.UserId);
if (arrIndex !== -1) {
newArr[arrIndex].ConnectionStatus = body.ConnectionStatus;
newArr[arrIndex].LastOnline = body.LastOnline;
}
return newArr;
});
sideBarContext.setConnectedUsers(body);
break;
case ReceivedMessagesCommands.NewGroupTaskStarted:
groupTasksContext.setGroupTasks((arr) => [...arr, body]);
@ -955,6 +944,20 @@ export function handleWebSocketMessage(
description: `You can now continue with the work`,
});
break;
case ReceivedMessagesCommands.UpdateUsers:
usersContext.setUsers((arr) => {
const newArr = [...arr];
const arrIndex = arr.findIndex((arr1) => arr1.Id === body.UserId);
if (arrIndex !== -1) {
newArr[arrIndex].ConnectionStatus = body.ConnectionStatus;
newArr[arrIndex].LastOnline = body.LastOnline;
}
return newArr;
});
break;
default:
console.error("unknown command", cmd);
break;

8
src/Pages/AdminArea/Roles/index.js
View File

@ -12,12 +12,7 @@ import {
Typography,
notification,
} from "antd";
import {
Constants,
SentMessagesCommands,
hasPermission,
myFetch,
} from "../../../utils";
import { Constants, hasPermission, myFetch } from "../../../utils";
import {
ArrowDownOutlined,
ArrowUpOutlined,
@ -34,6 +29,7 @@ import { MyAvatar } from "../../../Components/MyAvatar";
import { useAdminAreaRolesContext } from "../../../Contexts/AdminAreaRolesContext";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useAppContext } from "../../../Contexts/AppContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
const { useBreakpoint } = Grid;

8
src/Pages/AllUsers/CreateUserModal.js
View File

@ -1,15 +1,11 @@
import { Form, Input, Select } from "antd";
import Modal from "antd/es/modal/Modal";
import {
Constants,
EncodeStringToBase64,
SentMessagesCommands,
isEmailValid,
} from "../../utils";
import { Constants, EncodeStringToBase64, isEmailValid } from "../../utils";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useWebSocketContext } from "../../Contexts/WebSocketContext";
import { useUsersContext } from "../../Contexts/UsersContext";
import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
export default function CreateUserModal({ isModalOpen, setIsModalOpen }) {
const webSocketContext = useWebSocketContext();

2
src/Pages/AllUsers/index.js
View File

@ -11,7 +11,6 @@ import {
import {
Constants,
FormatDatetime,
SentMessagesCommands,
getConnectionStatusItem,
hasOnePermission,
hasPermission,
@ -26,6 +25,7 @@ import { MyAvatar } from "../../Components/MyAvatar";
import { useUsersContext } from "../../Contexts/UsersContext";
import { useAppContext } from "../../Contexts/AppContext";
import { useWebSocketContext } from "../../Contexts/WebSocketContext";
import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
export default function AllUsers() {
const webSocketContext = useWebSocketContext();

2
src/Pages/GroupTasks/Overview/GroupTasksTableList.js
View File

@ -19,7 +19,6 @@ import {
Constants,
FormatDatetime,
GetDuration,
SentMessagesCommands,
hasOneXYPermission,
hasXYPermission,
} from "../../../utils";
@ -27,6 +26,7 @@ import { useTranslation } from "react-i18next";
import { MyAvatar } from "../../../Components/MyAvatar";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useAppContext } from "../../../Contexts/AppContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
const { useBreakpoint } = Grid;

2
src/Pages/GroupTasks/Overview/GroupTasksViewModal.js
View File

@ -15,7 +15,6 @@ import { useNavigate, useParams } from "react-router-dom";
import {
Constants,
FormatDatetime,
SentMessagesCommands,
GetDuration,
getUserId,
GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
@ -38,6 +37,7 @@ import MyAttachments from "../../../Components/MyAttachments";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { useAppContext } from "../../../Contexts/AppContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
export default function GroupTasksViewModal({ isOpen }) {
const webSocketContext = useWebSocketContext();

3
src/Pages/GroupTasks/Overview/GroupTypeSelectionModal.js
View File

@ -10,12 +10,13 @@ import {
Tag,
notification,
} from "antd";
import { SentMessagesCommands, GetUuid } from "../../../utils";
import { GetUuid } from "../../../utils";
import { InfoCircleOutlined } from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import { useTranslation } from "react-i18next";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
export default function GroupTypeSelectionModal({
isOpen,

23
src/Pages/GroupTasks/Overview/index.js
View File

@ -3,12 +3,7 @@ import { useEffect, useRef, useState } from "react";
import GroupTasksViewModal from "./GroupTasksViewModal";
import GroupTypeSelectionModal from "./GroupTypeSelectionModal";
import GroupTaskTableList from "./GroupTasksTableList";
import {
Constants,
SentMessagesCommands,
hasPermission,
myFetch,
} from "../../../utils";
import { Constants, hasPermission, myFetch } from "../../../utils";
import { useTranslation } from "react-i18next";
import { ReloadOutlined } from "@ant-design/icons";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
@ -16,6 +11,7 @@ import { useAppContext } from "../../../Contexts/AppContext";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useParams } from "react-router-dom";
import MyPagination from "../../../Components/MyPagination";
import { SentMessagesCommands } from "../../../Handlers/WebSocketMessageHandler";
export default function GroupTasks({ isGroupTasksViewModalOpen }) {
const webSocketContext = useWebSocketContext();
@ -31,6 +27,7 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
const { t } = useTranslation();
const [paginationPage, setPaginationPage] = useState(1);
const totalPages = useRef(0);
const previousParamCategory = useRef(null);
const showGroupTypeSelectionModal = (categoryGroup) => {
setCurrentCategoryGroup(categoryGroup);
@ -62,11 +59,25 @@ export default function GroupTasks({ isGroupTasksViewModalOpen }) {
};
useEffect(() => {
// initially previousParamCategory.current is null on first render
if (previousParamCategory.current === null) {
previousParamCategory.current = paramCategory;
return;
}
if (paramCategory !== previousParamCategory.current) {
previousParamCategory.current = paramCategory;
if (paginationPage === 1) {
// if we are on page 1, we need to fetch the new category group
fetchGroupTasks(1);
} else {
// if we are not on page 1, we need to reset the page to 1 and this will trigger the useEffect below
setPaginationPage(1);
}
} else {
fetchGroupTasks(paginationPage);
}
}, [paramCategory]);
useEffect(() => fetchGroupTasks(paginationPage), [paginationPage]);

2
src/Pages/UserProfile/index.js
View File

@ -19,7 +19,6 @@ import {
Constants,
EncodeStringToBase64,
FormatDatetime,
SentMessagesCommands,
getConnectionStatusItem,
getUserSessionFromLocalStorage,
hasPermission,
@ -40,6 +39,7 @@ import { useUserProfileContext } from "../../Contexts/UserProfileContext";
import { useWebSocketContext } from "../../Contexts/WebSocketContext";
import { useAppContext } from "../../Contexts/AppContext";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
export default function UserProfile() {
const webSocketContext = useWebSocketContext();

8
src/utils.js
View File

@ -49,6 +49,11 @@ export const Constants = {
EQUIPMENT_DOCUMENTATION_VIEW: "/equipment-documentation/",
GROUP_TASKS: "/group-tasks/",
GROUP_TASKS_HISTORY: "/group-tasks-history",
USERS: "/users",
SCANNERS: "/scanners",
USER_PROFILE: "/user-profile",
ADMIN_AREA_ROLES: "/admin-area/roles",
ADMIN_AREA_LOGS: "/admin-area/logs",
},
GROUP_TASKS_STATUS: {
FINISHED: 1,
@ -224,6 +229,7 @@ let webSocketContextPreview = {
//export const WebSocketContext = createContext(webSocketContextPreview);
/*
// commands received from the backend server
export const ReceivedMessagesCommands = {
InitUserSocketConnection: 1,
@ -290,7 +296,7 @@ export const SentMessagesCommands = {
DeleteUserApiKey: 20,
GroupTasksInstallPythonPackages: 21,
GroupTasksInstallGlobalPythonPackages: 22,
};
}; */
/*
export function WebSocketProvider({
children,