System card

master
Tudor Stanciu 2022-09-24 01:00:15 +03:00
parent dd820318b2
commit 2b45cc67b3
26 changed files with 394 additions and 56 deletions

View File

@ -2,21 +2,14 @@
Material UI v4: https://v4.mui.com/components/lists/
https://v4.mui.com/components/material-icons/
****************************************************************
withTranslation()(LegacyComponentClass)
const { t } = this.props;
TO DO:
******
Diagrama cu toate redirecturile care trec prin server;
https://github.com/projectstorm/react-diagrams
https://antonioru.github.io/beautiful-react-diagrams/#/Diagram%20Component
****************************************************************
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t, i18n } = useTranslation();
import { makeStyles, useTheme } from "@material-ui/core/styles";
const theme = useTheme();
https://www.flaticon.com/free-icon/wizard_2534554?term=wizard&page=1&position=64
https://lucasbassetti.com.br/react-simple-chatbot/#/docs/previous-value

View File

@ -106,13 +106,13 @@
"Subtitle": "Expand to see details",
"Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits. If you don't believe it, ask the ",
"Wizard": "wizard",
"ServerHostName": "Server host",
"HostName": "Server host",
"ApiHostName": "API host",
"Domain": "Domain",
"ActiveSession": "Active session",
"ActiveSessionSubtitle": "Expand to see forwards",
"DDNSProvider": "Dynamic DNS Provider",
"Details": "Details"
"About": "About"
},
"Charts": {
"Server": {
@ -159,6 +159,17 @@
}
},
"System": {
"Title": "System",
"Subtitle": "Expand to see details",
"Server": {
"HostName": "Server host",
"Platform": "Server platform"
},
"Api": {
"HostName": "API host",
"Platform": "API platform"
},
"Description": "This system is composed of three micro services, each with a well-defined role. The server (reverse proxy) is the only one that can work completely independently of the others, the api and the UI being auxiliary and having a role of visualizing the server's activity.",
"Components": {
"Server": "Server:",
"Api": "API:",

View File

@ -97,13 +97,13 @@
"Subtitle": "Extindeţi pentru a vedea detalii",
"Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite. Dacă nu crezi, întreabă-l pe ",
"Wizard": "vrăjitor",
"ServerHostName": "Gazdă server",
"HostName": "Gazdă server",
"ApiHostName": "Gazdă API",
"Domain": "Domeniu",
"ActiveSession": "Sesiune activă",
"ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările",
"DDNSProvider": "Furnizor DNS dinamic",
"Details": "Detalii"
"About": "Despre"
},
"Charts": {
"Server": {
@ -150,6 +150,17 @@
}
},
"System": {
"Title": "Sistem",
"Subtitle": "Extindeţi pentru a vedea detalii",
"Server": {
"HostName": "Gazdă server",
"Platform": "Platformă server"
},
"Api": {
"HostName": "Gazdă API",
"Platform": "Platformă API"
},
"Description": "Acest sistem este compus din trei microservicii, fiecare avand un rol bine definit. Serverul (reverse proxy-ul) este singurul care poate funcționa complet independent de celelalte, API-ul și UI-ul fiind auxiliare și având un rol de vizualizare a activității serverului.",
"Components": {
"Server": "Server:",
"Api": "API:",

View File

@ -1,6 +1,7 @@
import React from "react";
import ServerContainer from "../../features/server/components/ServerContainer";
import ActiveSessionContainer from "../../features/server/components/ActiveSessionContainer";
import SystemContainer from "../../features/system/components/SystemContainer";
const HomePage = () => {
return (
@ -9,6 +10,9 @@ const HomePage = () => {
<br />
<br />
<ActiveSessionContainer />
<br />
<br />
<SystemContainer />
</>
);
};

View File

@ -4,17 +4,13 @@ import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import AboutComponent from "./AboutComponent";
import TechnologiesComponent from "./TechnologiesComponent";
import { useDocumentation } from "../../../hooks";
const AboutContainer = () => {
const handleOpenDocumentation = event => {
const url = process.env.REVERSE_PROXY_DOCS_URL;
window.open(url, "_blank");
event.preventDefault();
};
const { openDocumentation } = useDocumentation();
return (
<>
<AboutComponent onOpenDocumentation={handleOpenDocumentation} />
<AboutComponent onOpenDocumentation={openDocumentation} />
<br />
<br />
<TechnologiesComponent />

View File

@ -13,17 +13,6 @@ export function loadServerData() {
};
}
export function loadSystemVersion() {
return async function (dispatch) {
try {
const data = await dispatch(sendHttpRequest(api.getSystemVersion()));
dispatch({ type: types.LOAD_SYSTEM_VERSION_SUCCESS, payload: data });
} catch (error) {
throw error;
}
};
}
export function loadActiveSession() {
return async function(dispatch) {
try {

View File

@ -1,3 +1,2 @@
export const LOAD_SYSTEM_VERSION_SUCCESS = "LOAD_SYSTEM_VERSION_SUCCESS";
export const LOAD_ACTIVE_SESSION_SUCCESS = "LOAD_ACTIVE_SESSION_SUCCESS";
export const LOAD_SERVER_DATA_SUCCESS = "LOAD_SERVER_DATA_SUCCESS";

View File

@ -2,11 +2,9 @@ import { get } from "../../api/axiosApi";
const baseUrl = process.env.REVERSE_PROXY_API_URL;
const getServerData = () => get(`${baseUrl}/server/data`);
const getSystemVersion = () => get(`${baseUrl}/system/version`);
const getActiveSession = () => get(`${baseUrl}/server/active-session`);
export default {
getServerData,
getSystemVersion,
getActiveSession
};

View File

@ -65,7 +65,7 @@ const ServerComponent = ({
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleDetailsClick}>{t("Server.Details")}</MenuItem>
<MenuItem onClick={handleDetailsClick}>{t("Server.About")}</MenuItem>
</Menu>
<Card>
<CardHeader

View File

@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadServerData, loadSystemVersion } from "../actionCreators";
import { loadServerData } from "../actionCreators";
import ServerComponent from "./ServerComponent";
import { withRouter } from "react-router-dom";
import { summonWizard } from "../../chatbot/actionCreators";
@ -10,7 +10,6 @@ import { summonWizard } from "../../chatbot/actionCreators";
const ServerContainer = ({ actions, data, serverHost, history }) => {
useEffect(() => {
actions.loadServerData();
actions.loadSystemVersion();
}, []);
const openAbout = event => {
@ -50,10 +49,7 @@ function mapStateToProps(state) {
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(
{ loadServerData, loadSystemVersion, summonWizard },
dispatch
)
actions: bindActionCreators({ loadServerData, summonWizard }, dispatch)
};
}

View File

@ -24,7 +24,7 @@ const ServerSummary = ({
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Server.ServerHostName")}: `}
{`${t("Server.HostName")}: `}
<span className={classes.value}>{serverHost || ""}</span>
</Grid>

View File

@ -9,12 +9,6 @@ export default function serverReducer(state = initialState.server, action) {
data: { ...action.payload, loading: false, loaded: true }
};
case types.LOAD_SYSTEM_VERSION_SUCCESS:
return {
...state,
...action.payload
};
case types.LOAD_ACTIVE_SESSION_SUCCESS:
return {
...state,

View File

@ -0,0 +1,25 @@
import * as types from "./actionTypes";
import api from "./api";
import { sendHttpRequest } from "../../redux/actions/httpActions";
export function loadSystemData() {
return async function(dispatch) {
try {
const data = await dispatch(sendHttpRequest(api.getSystemData()));
dispatch({ type: types.LOAD_SYSTEM_DATA_SUCCESS, payload: data });
} catch (error) {
throw error;
}
};
}
export function loadSystemVersion() {
return async function(dispatch) {
try {
const data = await dispatch(sendHttpRequest(api.getSystemVersion()));
dispatch({ type: types.LOAD_SYSTEM_VERSION_SUCCESS, payload: data });
} catch (error) {
throw error;
}
};
}

View File

@ -0,0 +1,2 @@
export const LOAD_SYSTEM_DATA_SUCCESS = "LOAD_SYSTEM_DATA_SUCCESS";
export const LOAD_SYSTEM_VERSION_SUCCESS = "LOAD_SYSTEM_VERSION_SUCCESS";

View File

@ -0,0 +1,10 @@
import { get } from "../../api/axiosApi";
const baseUrl = process.env.REVERSE_PROXY_API_URL;
const getSystemData = () => get(`${baseUrl}/system/data`);
const getSystemVersion = () => get(`${baseUrl}/system/version`);
export default {
getSystemData,
getSystemVersion
};

View File

@ -0,0 +1,122 @@
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import {
Card,
CardHeader,
CardContent,
CardActions,
Collapse,
Avatar,
IconButton,
Tooltip,
Menu,
MenuItem
} from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import BubbleChartIcon from "@material-ui/icons/BubbleChart";
import styles from "../../../components/common/styles/expandableCardStyles";
import SystemSummary from "./SystemSummary";
import { useTranslation } from "react-i18next";
import SystemExtensionArea from "./SystemExtensionArea";
import LibraryBooksIcon from "@material-ui/icons/LibraryBooks";
import { useDocumentation } from "../../../hooks";
const useStyles = makeStyles(styles);
const SystemComponent = ({ data, onRedirect }) => {
const classes = useStyles();
const { t } = useTranslation();
const { openDocumentation } = useDocumentation();
const [expanded, setExpanded] = React.useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleExpandClick = () => {
setExpanded(!expanded);
};
const handleMoreClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<Menu
id="system-actions-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={onRedirect("/about", handleClose)}>
{t("Menu.About")}
</MenuItem>
<MenuItem onClick={onRedirect("/sessions", handleClose)}>
{t("Menu.Sessions")}
</MenuItem>
<MenuItem onClick={onRedirect("/release-notes", handleClose)}>
{t("Menu.ReleaseNotes")}
</MenuItem>
</Menu>
<Card>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
<BubbleChartIcon />
</Avatar>
}
action={
<IconButton
aria-label="more"
onClick={handleMoreClick}
color="primary"
>
<MoreVertIcon />
</IconButton>
}
title={<strong>{t("System.Title")}</strong>}
subheader={t("System.Subtitle")}
/>
<CardContent>
{data.loaded && <SystemSummary data={data} />}
</CardContent>
<CardActions disableSpacing>
<Tooltip title={t("About.Actions.Documentation")}>
<IconButton aria-label="documentation" onClick={openDocumentation}>
<LibraryBooksIcon />
</IconButton>
</Tooltip>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<SystemExtensionArea />
</CardContent>
</Collapse>
</Card>
</>
);
};
SystemComponent.propTypes = {
data: PropTypes.object.isRequired,
onRedirect: PropTypes.func.isRequired
};
export default SystemComponent;

View File

@ -0,0 +1,44 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadSystemData } from "../actionCreators";
import SystemComponent from "./SystemComponent";
import { withRouter } from "react-router-dom";
const SystemContainer = ({ actions, data, history }) => {
useEffect(() => {
actions.loadSystemData();
}, []);
const handleRedirect = (route, callback) => event => {
history.push(route);
event.preventDefault();
callback && callback();
};
return <SystemComponent data={data} onRedirect={handleRedirect} />;
};
SystemContainer.propTypes = {
actions: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
data: state.system.data
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadSystemData }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(SystemContainer));

View File

@ -0,0 +1,7 @@
import React from "react";
const SystemExtensionArea = () => {
return <>...</>;
};
export default SystemExtensionArea;

View File

@ -0,0 +1,49 @@
import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/gridStyles";
const useStyles = makeStyles(styles);
const SystemSummary = ({ data }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<Grid container>
<Grid item xs={6} sm={3} md={3}>
{`${t("System.Server.HostName")}: `}
<span className={classes.value}>{data.server.hostName}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("System.Server.Platform")}: `}
<span className={classes.value}>{data.server.platform}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("System.Api.HostName")}: `}
<span className={classes.value}>{data.api.hostName}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("System.Api.Platform")}: `}
<span className={classes.value}>{data.api.platform}</span>
</Grid>
<Grid item xs={12} sm={12} md={12}>
<Typography variant="body2" gutterBottom color="textSecondary">
{t("System.Description")}
</Typography>
</Grid>
</Grid>
);
};
SystemSummary.propTypes = {
data: PropTypes.object.isRequired
};
export default SystemSummary;

View File

@ -0,0 +1,12 @@
import React from "react";
import PropTypes from "prop-types";
const SystemVersionComponent = ({ data }) => {
return <>...</>;
};
SystemVersionComponent.propTypes = {
data: PropTypes.object.isRequired
};
export default SystemVersionComponent;

View File

@ -0,0 +1,36 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadSystemVersion } from "../actionCreators";
import SystemVersionComponent from "./SystemVersionComponent";
const SystemVersionContainer = ({ actions, data }) => {
useEffect(() => {
actions.loadSystemVersion();
}, []);
return <SystemVersionComponent data={data} />;
};
SystemVersionContainer.propTypes = {
actions: PropTypes.object.isRequired,
data: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
data: state.system.version
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadSystemVersion }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(SystemVersionContainer);

View File

@ -0,0 +1,21 @@
import * as types from "./actionTypes";
import initialState from "../../redux/reducers/initialState";
export default function systemReducer(state = initialState.system, action) {
switch (action.type) {
case types.LOAD_SYSTEM_DATA_SUCCESS:
return {
...state,
data: { ...action.payload, loading: false, loaded: true }
};
case types.LOAD_SYSTEM_VERSION_SUCCESS:
return {
...state,
version: { ...action.payload, loading: false, loaded: true }
};
default:
return state;
}
}

3
src/hooks/index.js Normal file
View File

@ -0,0 +1,3 @@
import useDocumentation from "./useDocumentation";
export { useDocumentation };

View File

@ -0,0 +1,10 @@
const useDocumentation = () => {
const openDocumentation = event => {
const url = process.env.REVERSE_PROXY_DOCS_URL;
window.open(url, "_blank");
event.preventDefault();
};
return { openDocumentation };
};
export default useDocumentation;

View File

@ -11,6 +11,7 @@ import frontendSessionReducer from "../../features/frontendSession/reducer";
import snackbarReducer from "../../features/snackbar/reducer";
import chartsReducer from "../../features/charts/chartsReducer";
import chatbotReducer from "../../features/chatbot/reducer";
import systemReducer from "../../features/system/reducer";
const rootReducer = combineReducers({
frontendSession: frontendSessionReducer,
@ -20,6 +21,7 @@ const rootReducer = combineReducers({
options: optionsReducer,
releaseNotes: releaseNotesReducer,
charts: chartsReducer,
system: systemReducer,
snackbar: snackbarReducer,
bot: chatbotReducer,
ajaxCallsInProgress: ajaxStatusReducer

View File

@ -15,6 +15,10 @@ export default {
}
}
},
system: {
data: { loading: false, loaded: false },
version: { loading: false, loaded: false }
},
snackbar: {
message: null,
type: null