SystemVersionComponent

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 /

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",

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:",

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:",

src/features/system/components/SystemExtensionArea.js

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

src/features/system/components/SystemVersionComponent.js

@@ -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;

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 (
+    <>
+      <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;

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 <SystemVersionComponent data={data} />;
+  return <>{data.loaded && <SystemVersionComponent data={data} />}</>;
 };
 
 SystemVersionContainer.propTypes = {