SystemVersionComponent

master
Tudor Stanciu 2022-09-24 02:57:49 +03:00
parent 96e9e170d8
commit fad68248af
8 changed files with 159 additions and 16 deletions

View File

@ -21,8 +21,10 @@ RUN npm install -g serve
# environment variables
ENV Author="Tudor Stanciu"
ARG APP_VERSION=0.0.0.0
ARG APP_VERSION=0.0.0
ARG APP_DATE=1900-01-01
ENV APP_VERSION=${APP_VERSION}
ENV APP_DATE=${REACT_APP_DATE}
#set workdir to root
WORKDIR /

View File

@ -1,5 +1,7 @@
const dev = {
NODE_ENV: "development",
APP_VERSION: "0.0.0",
APP_DATE: "1900-01-01",
REVERSE_PROXY_API_URL: "http://localhost:5050",
CHATBOT_API_URL: "http://localhost:5061",
REVERSE_PROXY_DOCS_URL: "https://toodle.ddns.net/hedgedoc/s/UkJ6S5NJz"
@ -7,6 +9,8 @@ const dev = {
const prod = {
NODE_ENV: "production",
APP_VERSION: "0.0.0",
APP_DATE: "1900-01-01",
PUBLIC_URL: "/reverse-proxy",
REVERSE_PROXY_API_URL: "https://toodle.ddns.net/reverse-proxy-api",
CHATBOT_API_URL: "https://toodle.ddns.net/chatbot-api",

View File

@ -170,6 +170,13 @@
"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.",
"Versions": {
"Title": "Component versions",
"Server": "Server: {{version}}",
"Api": "API: {{version}}",
"Frontend": "UI: {{version}}"
},
"LastUpdateDate": "Last update date: {{date}}",
"Components": {
"Server": "Server:",
"Api": "API:",

View File

@ -161,6 +161,13 @@
"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.",
"Versions": {
"Title": "Versiuni componente",
"Server": "Server: {{version}}",
"Api": "API: {{version}}",
"Frontend": "UI: {{version}}"
},
"LastUpdateDate": "Data ultimei actualizări: {{date}}",
"Components": {
"Server": "Server:",
"Api": "API:",

View File

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

View File

@ -1,12 +0,0 @@
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,134 @@
import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import {
Typography,
List,
ListItem,
ListItemText,
ListItemAvatar
} from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar";
import WebAssetIcon from "@material-ui/icons/WebAsset";
import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(theme => {
debugger;
return {
root: {
display: "flex",
flexDirection: "row",
padding: 0
},
value: {
fontSize: "0.9rem",
fontWeight: theme.typography.fontWeightMedium
}
};
});
const SystemVersionComponent = ({ data }) => {
const classes = useStyles();
const { t } = useTranslation();
const lastUpdateDate = useMemo(() => {
const format = "DD-MM-YYYY HH:mm:ss";
const server = t("DATE_FORMAT", {
date: {
value: data.server.lastUpdateDate,
format
}
});
const api = t("DATE_FORMAT", {
date: {
value: data.api.lastUpdateDate,
format
}
});
const frontend = t("DATE_FORMAT", {
date: {
value: process.env.APP_DATE,
format
}
});
return { server, api, frontend };
}, [data, t]);
return (
<>
<Typography variant="subtitle1" color="textSecondary">
{t("System.Versions.Title")}
</Typography>
<List className={classes.root}>
<ListItem>
<ListItemAvatar>
<Avatar>
<DnsRoundedIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("System.Versions.Server", {
version: data.server.version
})}
</span>
}
secondary={t("System.LastUpdateDate", {
date: lastUpdateDate.server
})}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<SettingsInputSvideoIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("System.Versions.Api", {
version: data.api.version
})}
</span>
}
secondary={t("System.LastUpdateDate", {
date: lastUpdateDate.api
})}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<WebAssetIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("System.Versions.Frontend", {
version: process.env.APP_VERSION
})}
</span>
}
secondary={t("System.LastUpdateDate", {
date: lastUpdateDate.frontend
})}
/>
</ListItem>
</List>
</>
);
};
SystemVersionComponent.propTypes = {
data: PropTypes.object.isRequired
};
export default SystemVersionComponent;

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 { loadSystemVersion } from "../actionCreators";
import { loadSystemVersion } from "../../actionCreators";
import SystemVersionComponent from "./SystemVersionComponent";
const SystemVersionContainer = ({ actions, data }) => {
@ -10,7 +10,7 @@ const SystemVersionContainer = ({ actions, data }) => {
actions.loadSystemVersion();
}, []);
return <SystemVersionComponent data={data} />;
return <>{data.loaded && <SystemVersionComponent data={data} />}</>;
};
SystemVersionContainer.propTypes = {