78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Grid } from "@material-ui/core";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
value: {
|
|
fontWeight: theme.typography.fontWeightMedium
|
|
},
|
|
miniContainer: {
|
|
paddingTop: "10px"
|
|
}
|
|
}));
|
|
|
|
const SessionSummary = ({ session }) => {
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
<Grid container className={classes.miniContainer}>
|
|
<Grid item xs={12} sm={5} md={5}>
|
|
{`${t("Session")}: `}
|
|
<span className={classes.value}>{session.sessionId}</span>
|
|
</Grid>
|
|
<Grid item xs={12} sm={2} md={2}>
|
|
{"Active: "}
|
|
{session.active ? (
|
|
<CheckCircleOutlineRounded color="primary" />
|
|
) : (
|
|
<RemoveRounded />
|
|
)}
|
|
</Grid>
|
|
<Grid item xs={12} sm={3} md={3}>
|
|
{"Start date: "}
|
|
<span className={classes.value}>
|
|
{t("DATE_FORMAT", {
|
|
date: { value: session.startDate, format: "DD-MM-YYYY HH:mm:ss" }
|
|
})}
|
|
</span>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={3} md={3}>
|
|
{"Stop date: "}
|
|
<span className={classes.value}>
|
|
{session.stopDate
|
|
? t("DATE_FORMAT", {
|
|
date: {
|
|
value: session.stopDate,
|
|
format: "DD-MM-YYYY HH:mm:ss"
|
|
}
|
|
})
|
|
: "---"}
|
|
</span>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={3} md={3}>
|
|
{"Running time: "}
|
|
<span className={classes.value}>{session.runningTime}</span>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={3} md={3}>
|
|
{"Host: "}
|
|
<span className={classes.value}>{session.hostName}</span>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
);
|
|
};
|
|
|
|
SessionSummary.propTypes = {
|
|
session: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default SessionSummary;
|