From fad68248af27ea88aaedcb10ee82076847dc4a06 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 24 Sep 2022 02:57:49 +0300 Subject: [PATCH] SystemVersionComponent --- Dockerfile | 4 +- config.js | 4 + public/locales/en/translations.json | 7 + public/locales/ro/translations.json | 7 + .../system/components/SystemExtensionArea.js | 3 +- .../components/SystemVersionComponent.js | 12 -- .../version/SystemVersionComponent.js | 134 ++++++++++++++++++ .../{ => version}/SystemVersionContainer.js | 4 +- 8 files changed, 159 insertions(+), 16 deletions(-) delete mode 100644 src/features/system/components/SystemVersionComponent.js create mode 100644 src/features/system/components/version/SystemVersionComponent.js rename src/features/system/components/{ => version}/SystemVersionContainer.js (85%) diff --git a/Dockerfile b/Dockerfile index 5503910..c825a18 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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 / diff --git a/config.js b/config.js index 31f4240..673851e 100644 --- a/config.js +++ b/config.js @@ -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", diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 489c76d..35bd876 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -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:", diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 0c1d24b..a867974 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -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:", diff --git a/src/features/system/components/SystemExtensionArea.js b/src/features/system/components/SystemExtensionArea.js index e008167..ebbf7f8 100644 --- a/src/features/system/components/SystemExtensionArea.js +++ b/src/features/system/components/SystemExtensionArea.js @@ -1,7 +1,8 @@ import React from "react"; +import SystemVersionContainer from "./version/SystemVersionContainer"; const SystemExtensionArea = () => { - return <>...; + return ; }; export default SystemExtensionArea; diff --git a/src/features/system/components/SystemVersionComponent.js b/src/features/system/components/SystemVersionComponent.js deleted file mode 100644 index e491712..0000000 --- a/src/features/system/components/SystemVersionComponent.js +++ /dev/null @@ -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; diff --git a/src/features/system/components/version/SystemVersionComponent.js b/src/features/system/components/version/SystemVersionComponent.js new file mode 100644 index 0000000..0c8d3b3 --- /dev/null +++ b/src/features/system/components/version/SystemVersionComponent.js @@ -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 ( + <> + + {t("System.Versions.Title")} + + + + + + + + + + {t("System.Versions.Server", { + version: data.server.version + })} + + } + secondary={t("System.LastUpdateDate", { + date: lastUpdateDate.server + })} + /> + + + + + + + + + {t("System.Versions.Api", { + version: data.api.version + })} + + } + secondary={t("System.LastUpdateDate", { + date: lastUpdateDate.api + })} + /> + + + + + + + + + {t("System.Versions.Frontend", { + version: process.env.APP_VERSION + })} + + } + secondary={t("System.LastUpdateDate", { + date: lastUpdateDate.frontend + })} + /> + + + + ); +}; + +SystemVersionComponent.propTypes = { + data: PropTypes.object.isRequired +}; + +export default SystemVersionComponent; diff --git a/src/features/system/components/SystemVersionContainer.js b/src/features/system/components/version/SystemVersionContainer.js similarity index 85% rename from src/features/system/components/SystemVersionContainer.js rename to src/features/system/components/version/SystemVersionContainer.js index 6915ba5..46b91a4 100644 --- a/src/features/system/components/SystemVersionContainer.js +++ b/src/features/system/components/version/SystemVersionContainer.js @@ -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 ; + return <>{data.loaded && }; }; SystemVersionContainer.propTypes = {