tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

added user permissions provider

master
Tudor Stanciu 2023-04-15 00:07:15 +03:00
parent b7affa7677
commit 0e025e6c68
13 changed files with 307 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -1325,9 +1325,9 @@
}
},
"@flare/tuitio-client-react": {
"version": "1.2.5",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.5.tgz",
"integrity": "sha512-Qx2EFe8WhPhP53Fpai+fhWa7QGG18vwyPvBp8CkWqf+ivHFzz+Rfa9Rrkck3gstQW7b02sYWBFwHMHLmGj8YuA==",
"version": "1.2.6",
"resolved": "https://lab.code-rove.com/public-node-registry/@flare/tuitio-client-react/-/tuitio-client-react-1.2.6.tgz",
"integrity": "sha512-T2uo9r9fQKTsbC25EaQnSifoDKrw3tgwy6fT/O1BdO4RPCUiRDr0YHiIssgPat+sB1G7iiUtV9CS8UNTJkacXw==",
"requires": {
"@flare/js-utils": "^1.1.0",
"@flare/tuitio-client": "^1.2.5"

2
package.json
View File

@ -14,7 +14,7 @@
"private": true,
"dependencies": {
"@flare/js-utils": "^1.1.0",
"@flare/tuitio-client-react": "^1.2.5",
"@flare/tuitio-client-react": "^1.2.6",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.61",

200
src/api/useApi.js
View File

@ -1,115 +1,107 @@
import { useToast } from "../hooks";
import { get, post } from "../utils/axios";
import { toast } from "react-toastify";
const networkRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/network`;
const systemRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/system`;
const powerActionsRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/resurrector`;
const securityRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/security`;
const handleError = err => {
let message;
switch (err?.status) {
case 500:
message = err.title;
break;
case 404:
message = err.message;
break;
default:
message = err.title;
}
toast.error(message);
};
const defaultOptions = {
onCompleted: () => {},
onError: handleError
};
const call = async (request, options) => {
const internalOptions = { ...defaultOptions, ...options };
const { onCompleted, onError } = internalOptions;
try {
const result = await request();
onCompleted(result);
} catch (error) {
onError(error);
}
};
const getPermissions = (options = defaultOptions) => {
const promise = call(() => get(`${securityRoute}/permissions`), options);
return promise;
};
const getSystemVersion = (options = defaultOptions) => {
const releaseNotesPromise = call(
() => get(`${systemRoute}/version`),
options
);
return releaseNotesPromise;
};
const readReleaseNotes = (options = defaultOptions) => {
const releaseNotesPromise = call(
() => get(`${systemRoute}/release-notes`),
options
);
return releaseNotesPromise;
};
const readMachines = (options = defaultOptions) => {
const machinesPromise = call(() => get(`${networkRoute}/machines`), options);
return machinesPromise;
};
const wakeMachine = (machineId, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/wake`, { machineId }),
options
);
return promise;
};
const pingMachine = (machineId, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/ping`, { machineId }),
options
);
return promise;
};
const shutdownMachine = (machineId, delay, force, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/shutdown`, { machineId, delay, force }),
options
);
return promise;
};
const restartMachine = (machineId, delay, force, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/restart`, { machineId, delay, force }),
options
);
return promise;
};
const useApi = () => {
const { error } = useToast();
const handleError = err => {
let message;
switch (err?.status) {
case 500:
message = err.title;
break;
case 404:
message = err.message;
break;
default:
message = err.title;
}
error(message);
};
const defaultOptions = {
onCompleted: () => {},
onError: handleError
};
const call = async (request, options) => {
const internalOptions = { ...defaultOptions, ...options };
const { onCompleted, onError } = internalOptions;
try {
const result = await request();
onCompleted(result);
} catch (error) {
onError(error);
}
};
const getSystemVersion = (options = defaultOptions) => {
const releaseNotesPromise = call(
() => get(`${systemRoute}/version`),
options
);
return releaseNotesPromise;
};
const readReleaseNotes = (options = defaultOptions) => {
const releaseNotesPromise = call(
() => get(`${systemRoute}/release-notes`),
options
);
return releaseNotesPromise;
};
const readMachines = (options = defaultOptions) => {
const machinesPromise = call(
() => get(`${networkRoute}/machines`),
options
);
return machinesPromise;
};
const wakeMachine = (machineId, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/wake`, { machineId }),
options
);
return promise;
};
const pingMachine = (machineId, options = defaultOptions) => {
const promise = call(
() => post(`${powerActionsRoute}/ping`, { machineId }),
options
);
return promise;
};
const shutdownMachine = (
machineId,
delay,
force,
options = defaultOptions
) => {
const promise = call(
() => post(`${powerActionsRoute}/shutdown`, { machineId, delay, force }),
options
);
return promise;
};
const restartMachine = (
machineId,
delay,
force,
options = defaultOptions
) => {
const promise = call(
() => post(`${powerActionsRoute}/restart`, { machineId, delay, force }),
options
);
return promise;
};
return {
getPermissions,
getSystemVersion,
readReleaseNotes,
readMachines,

70
src/components/App.js
View File

@ -1,72 +1,14 @@
import React from "react";
import PropTypes from "prop-types";
import { UserPermissionsProvider, SensitiveInfoProvider } from "../providers";
import AppLayout from "./layout/AppLayout";
import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
import { useTuitioToken } from "@flare/tuitio-client-react";
import LoginContainer from "../features/login/components/LoginContainer";
const PrivateRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
React.createElement(component, props)
) : (
<Redirect
to={{
pathname: "/login",
state: {
from: props.location
}
}}
/>
)
}
/>
);
};
PrivateRoute.propTypes = {
component: PropTypes.func.isRequired,
location: PropTypes.object
};
const PublicRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
<Redirect
to={{
pathname: "/"
}}
/>
) : (
React.createElement(component, props)
)
}
/>
);
};
PublicRoute.propTypes = {
component: PropTypes.func.isRequired
};
const App = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL || ""}>
<Switch>
<Route exact path="/" render={() => <Redirect to="/dashboard" />} />
<PublicRoute path="/login" component={LoginContainer} />
<PrivateRoute path="/" component={AppLayout} />
</Switch>
</BrowserRouter>
<UserPermissionsProvider>
<SensitiveInfoProvider>
<AppLayout />
</SensitiveInfoProvider>
</UserPermissionsProvider>
);
};

73
src/components/AppRouter.js Normal file
View File

@ -0,0 +1,73 @@
import React from "react";
import PropTypes from "prop-types";
import App from "./App";
import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
import { useTuitioToken } from "@flare/tuitio-client-react";
import LoginContainer from "../features/login/components/LoginContainer";
const PrivateRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
React.createElement(component, props)
) : (
<Redirect
to={{
pathname: "/login",
state: {
from: props.location
}
}}
/>
)
}
/>
);
};
PrivateRoute.propTypes = {
component: PropTypes.func.isRequired,
location: PropTypes.object
};
const PublicRoute = ({ component, ...rest }) => {
const { valid } = useTuitioToken();
return (
<Route
{...rest}
render={props =>
valid ? (
<Redirect
to={{
pathname: "/"
}}
/>
) : (
React.createElement(component, props)
)
}
/>
);
};
PublicRoute.propTypes = {
component: PropTypes.func.isRequired
};
const AppRouter = () => {
return (
<BrowserRouter basename={process.env.PUBLIC_URL || ""}>
<Switch>
<Route exact path="/" render={() => <Redirect to="/dashboard" />} />
<PublicRoute path="/login" component={LoginContainer} />
<PrivateRoute path="/" component={App} />
</Switch>
</BrowserRouter>
);
};
export default AppRouter;

8
src/features/dashboard/announcements/AnnouncementsSection.js
View File

@ -1,17 +1,15 @@
import React from "react";
import GuestAnnouncement from "./GuestAnnouncement";
import UserAnnouncement from "./UserAnnouncement";
import { useTuitioUserInfo } from "@flare/tuitio-client-react";
import { usePermissions } from "../../../hooks";
const AnnouncementsSection = () => {
const { userInfo, isGuest } = useTuitioUserInfo();
const loading = !userInfo;
const { loading, isGuest, isUser } = usePermissions();
if (loading) return "";
return (
<>
{isUser && <UserAnnouncement />}
{isGuest && <GuestAnnouncement />}
{!isGuest && <UserAnnouncement userData={userInfo} />}
</>
);
};

11
src/features/dashboard/announcements/UserAnnouncement.js
View File

@ -1,22 +1,23 @@
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import { Alert, AlertTitle } from "@material-ui/lab";
import styles from "../styles";
import { useTranslation } from "react-i18next";
import { useTuitioUser } from "@flare/tuitio-client-react";
const useStyles = makeStyles(styles);
export default function UserAnnouncement({ userData }) {
export default function UserAnnouncement() {
const classes = useStyles();
const { t } = useTranslation();
const { userName } = useTuitioUser();
return (
<div className={classes.alert}>
<Alert variant="outlined" severity="info">
<AlertTitle>
{t("Dashboard.Announcements.User.Title", {
userName: userData.firstName
userName
})}
</AlertTitle>
{t("Dashboard.Announcements.User.Message")}
@ -24,7 +25,3 @@ export default function UserAnnouncement({ userData }) {
</div>
);
}
UserAnnouncement.propTypes = {
userData: PropTypes.object.isRequired
};

13
src/features/machines/components/common/ActionsGroup.js
View File

@ -5,13 +5,13 @@ import ActionButton from "./ActionButton";
import { Menu } from "@material-ui/core";
import { MoreHoriz } from "@material-ui/icons";
import { useTranslation } from "react-i18next";
import { useTuitioUserInfo } from "@flare/tuitio-client-react";
import { usePermissions } from "../../../../hooks";
const ActionsGroup = ({ machine, actions, addLog }) => {
const [menuAnchor, setMenuAnchor] = useState(null);
const { t } = useTranslation();
const { isSysAdmin } = useTuitioUserInfo();
const { operateMachines: canOperateMachines } = usePermissions();
const mainActions = useMemo(
() => actions.filter(a => a.main === true),
@ -33,13 +33,16 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
return (
<>
<WakeComponent machine={machine} addLog={addLog} disabled={!isSysAdmin} />
<WakeComponent
machine={machine}
addLog={addLog}
disabled={!canOperateMachines}
/>
{mainActions.map(action => (
<ActionButton
key={`machine-item-${machine.machineId}-${action.code}`}
action={action}
machine={machine}
disabled={!isSysAdmin}
/>
))}
<ActionButton
@ -65,7 +68,7 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
action={action}
machine={machine}
callback={handleMenuClose}
disabled={!isSysAdmin}
disabled={!canOperateMachines}
/>
))}
</Menu>

3
src/hooks/index.js
View File

@ -1,5 +1,6 @@
import { useToast } from "./useToast";
import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
import { usePermissions } from "../providers/UserPermissionsProvider";
import { useClipboard } from "./useClipboard";
export { useToast, useSensitiveInfo, useClipboard };
export { useToast, useSensitiveInfo, usePermissions, useClipboard };

12
src/hooks/useToast.js
View File

@ -1,11 +1,11 @@
import { toast } from "react-toastify";
export const useToast = () => {
const info = message => toast.info(message);
const success = message => toast.success(message);
const warning = message => toast.warning(message);
const error = message => toast.error(message);
const dark = message => toast.dark(message);
const info = message => toast.info(message);
const success = message => toast.success(message);
const warning = message => toast.warning(message);
const error = message => toast.error(message);
const dark = message => toast.dark(message);
export const useToast = () => {
return { info, success, warning, error, dark };
};

17
src/index.js
View File

@ -2,23 +2,20 @@ import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import ThemeProvider from "./providers/ThemeProvider";
import CssBaseline from "@material-ui/core/CssBaseline";
import App from "./components/App";
import AppRouter from "./components/AppRouter";
import { TuitioProvider } from "@flare/tuitio-client-react";
import ToastProvider from "./providers/ToastProvider";
import SensitiveInfoProvider from "./providers/SensitiveInfoProvider";
import { ToastProvider } from "./providers";
import "./utils/i18n";
ReactDOM.render(
<TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
<ThemeProvider>
<CssBaseline />
<SensitiveInfoProvider>
<Suspense fallback={<div>Loading...</div>}>
<ToastProvider>
<App />
</ToastProvider>
</Suspense>
</SensitiveInfoProvider>
<Suspense fallback={<div>Loading...</div>}>
<ToastProvider>
<AppRouter />
</ToastProvider>
</Suspense>
</ThemeProvider>
</TuitioProvider>,
document.getElementById("root")

87
src/providers/UserPermissionsProvider.js Normal file
View File

@ -0,0 +1,87 @@
import React, { useState, useEffect, useContext, useMemo } from "react";
import PropTypes from "prop-types";
import useApi from "../api";
const permissionCodes = {
VIEW_DASHBOARD: "VIEW_DASHBOARD",
MANAGE_USERS: "MANAGE_USERS",
MANAGE_SETTINGS: "MANAGE_SETTINGS",
VIEW_MACHINES: "VIEW_MACHINES",
MANAGE_MACHINES: "MANAGE_MACHINES",
OPERATE_MACHINES: "OPERATE_MACHINES",
GUEST_ACCESS: "GUEST_ACCESS"
};
const initialState = {
permissions: [],
loading: true
};
const getPermissionFlags = permissions => {
const viewDashboard =
permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
const manageUsers =
permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
const manageSettings =
permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
const viewMachines =
permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
const manageMachines =
permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
const operateMachines =
permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
const guestAccess =
permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
const flags = {
viewDashboard,
manageUsers,
manageSettings,
viewMachines,
manageMachines,
operateMachines,
guestAccess
};
const isGuest = guestAccess === true;
const isUser = Object.values(flags).includes(true) && !flags.guestAccess;
return {
...flags,
isGuest,
isUser
};
};
const UserPermissionsContext = React.createContext(initialState);
const usePermissions = () => {
const { permissions, loading } = useContext(UserPermissionsContext);
const flags = useMemo(() => getPermissionFlags(permissions), [permissions]);
return { loading, ...flags };
};
const UserPermissionsProvider = ({ children }) => {
const [permissions, setPermissions] = useState(initialState);
const { getPermissions } = useApi();
useEffect(() => {
getPermissions({
onCompleted: data => setPermissions({ ...data, loading: false })
});
}, [getPermissions]);
return (
<UserPermissionsContext.Provider value={permissions}>
{children}
</UserPermissionsContext.Provider>
);
};
UserPermissionsProvider.propTypes = {
children: PropTypes.node.isRequired
};
export { UserPermissionsProvider, usePermissions };
export default UserPermissionsProvider;

11
src/providers/index.js Normal file
View File

@ -0,0 +1,11 @@
import ThemeProvider from "./ThemeProvider";
import ToastProvider from "./ToastProvider";
import SensitiveInfoProvider from "./SensitiveInfoProvider";
import UserPermissionsProvider from "./UserPermissionsProvider";
export {
ThemeProvider,
ToastProvider,
SensitiveInfoProvider,
UserPermissionsProvider
};