SystemVersionContainer

master
Tudor Stanciu 2023-03-26 02:43:28 +02:00
parent 6d1c2df40b
commit 484b3d0ab2
6 changed files with 201 additions and 1 deletions

View File

@ -69,6 +69,13 @@
"ReleaseNotes": { "ReleaseNotes": {
"Version": "Version", "Version": "Version",
"Date": "Date" "Date": "Date"
},
"SystemVersion": {
"Title": "Component versions",
"Server": "Server: {{version}}",
"Api": "API: {{version}}",
"Frontend": "UI: {{version}}",
"LastReleaseDate": "Last update date: {{date}}"
} }
} }
} }

View File

@ -60,6 +60,13 @@
"ReleaseNotes": { "ReleaseNotes": {
"Version": "Versiune", "Version": "Versiune",
"Date": "Dată" "Date": "Dată"
},
"SystemVersion": {
"Title": "Versiuni componente",
"Server": "Server: {{version}}",
"Api": "API: {{version}}",
"Frontend": "UI: {{version}}",
"LastReleaseDate": "Data ultimei actualizări: {{date}}"
} }
} }
} }

View File

@ -43,6 +43,14 @@ const useApi = () => {
} }
}; };
const getSystemVersion = (options = defaultOptions) => {
const releaseNotesPromise = call(
() => get(`${systemRoute}/version`),
options
);
return releaseNotesPromise;
};
const readReleaseNotes = (options = defaultOptions) => { const readReleaseNotes = (options = defaultOptions) => {
const releaseNotesPromise = call( const releaseNotesPromise = call(
() => get(`${systemRoute}/release-notes`), () => get(`${systemRoute}/release-notes`),
@ -102,6 +110,7 @@ const useApi = () => {
}; };
return { return {
getSystemVersion,
readReleaseNotes, readReleaseNotes,
readMachines, readMachines,
wakeMachine, wakeMachine,

View File

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

View File

@ -0,0 +1,154 @@
import React, { useMemo, useEffect, useState } 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 DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard";
import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
import { useTranslation } from "react-i18next";
import packageData from "../../../../package.json";
const useStyles = makeStyles(theme => {
return {
horizontally: {
display: "flex",
flexDirection: "row",
padding: 0
},
vertical: {
width: "100%"
},
value: {
fontSize: "0.9rem",
fontWeight: theme.typography.fontWeightMedium
}
};
});
const SystemVersionComponent = ({ data }) => {
const classes = useStyles();
const [listClass, setListClass] = useState(classes.horizontally);
const { t } = useTranslation();
useEffect(() => {
const mediaQuery = window.matchMedia("(max-width: 800px)");
function handleMatches(event) {
const cssClass = event.matches ? classes.vertical : classes.horizontally;
setListClass(cssClass);
}
handleMatches(mediaQuery);
mediaQuery.addListener(handleMatches);
return () => {
mediaQuery.removeListener(handleMatches);
};
}, [classes.horizontally, classes.vertical]);
const lastReleaseDate = useMemo(() => {
const format = "DD-MM-YYYY HH:mm:ss";
const server = t("DATE_FORMAT", {
date: {
value: data.server.lastReleaseDate,
format
}
});
const api = t("DATE_FORMAT", {
date: {
value: data.api.lastReleaseDate,
format
}
});
const frontend = t("DATE_FORMAT", {
date: {
value: process.env.APP_DATE ?? new Date(),
format
}
});
return { server, api, frontend };
}, [data, t]);
return (
<>
<Typography variant="subtitle1" color="textSecondary">
{t("About.SystemVersion.Title")}
</Typography>
<List className={listClass}>
<ListItem>
<ListItemAvatar>
<Avatar>
<DeveloperBoardIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("About.SystemVersion.Server", {
version: data.server.version
})}
</span>
}
secondary={t("About.SystemVersion.LastReleaseDate", {
date: lastReleaseDate.server
})}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<SettingsInputSvideoIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("About.SystemVersion.Api", {
version: data.api.version
})}
</span>
}
secondary={t("About.SystemVersion.LastReleaseDate", {
date: lastReleaseDate.api
})}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<WebAssetIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.value}>
{t("About.SystemVersion.Frontend", {
version: process.env.APP_VERSION ?? packageData.version
})}
</span>
}
secondary={t("About.SystemVersion.LastReleaseDate", {
date: lastReleaseDate.frontend
})}
/>
</ListItem>
</List>
</>
);
};
SystemVersionComponent.propTypes = {
data: PropTypes.object.isRequired
};
export default SystemVersionComponent;

View File

@ -0,0 +1,22 @@
import React, { useState, useEffect } from "react";
import SystemVersionComponent from "./SystemVersionComponent";
import useApi from "../../../api";
const SystemVersionContainer = () => {
const [state, setState] = useState({ data: {}, loaded: false });
const api = useApi();
useEffect(() => {
if (state.loaded) return;
api.getSystemVersion({
onCompleted: data => {
setState({ data, loaded: true });
}
});
}, [api, state.loaded]);
return <>{state.loaded && <SystemVersionComponent data={state.data} />}</>;
};
export default SystemVersionContainer;