reverse-proxy-frontend/src/features/system/components/SystemSummary.js

50 lines
1.4 KiB
JavaScript

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;