reverse-proxy-frontend/src/features/server/components/ServerSummary.js

68 lines
1.8 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography, Link } 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 ServerSummary = ({
data,
serverHost,
handleOpenInNewTab,
summonWizard
}) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<Grid container>
<Grid item xs={6} sm={3} md={3}>
{`${t("Server.Domain")}: `}
<span className={classes.value}>{data.domain.name}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Server.ServerHostName")}: `}
<span className={classes.value}>{serverHost || ""}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Server.ApiHostName")}: `}
<span className={classes.value}>{data.hosts.api}</span>
</Grid>
<Grid item xs={6} sm={3} md={3}>
{`${t("Server.DDNSProvider")}: `}
<Link
href="#"
onClick={handleOpenInNewTab(data.domain.provider.url)}
variant="subtitle1"
>
{data.domain.provider.name}
</Link>
</Grid>
<Grid item xs={12} sm={12} md={12}>
<Typography variant="body2" gutterBottom color="textSecondary">
{t("Server.Thoughts")}
<Link href="#" onClick={summonWizard} variant="body2">
{t("Server.Wizard")}
</Link>
.
</Typography>
</Grid>
</Grid>
);
};
ServerSummary.propTypes = {
data: PropTypes.object.isRequired,
serverHost: PropTypes.string,
handleOpenInNewTab: PropTypes.func.isRequired,
summonWizard: PropTypes.func.isRequired
};
export default ServerSummary;