Reactive Tenant Details and Summary (#1051)
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
GitHub
@@ -18,7 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
|
||||
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
||||
import { IconButton, Tooltip } from "@material-ui/core";
|
||||
import { Box, IconButton, Tab, Tabs, Tooltip } from "@material-ui/core";
|
||||
import get from "lodash/get";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import { setErrorSnackMessage, setSnackBarMessage } from "../../../../actions";
|
||||
@@ -242,6 +242,94 @@ const TenantDetails = ({
|
||||
: classes.greyState;
|
||||
};
|
||||
|
||||
interface ListMenuItem {
|
||||
label: string;
|
||||
value: string;
|
||||
onclick: (val: string) => void;
|
||||
selected: () => boolean;
|
||||
}
|
||||
|
||||
const menu: ListMenuItem[] = [
|
||||
{
|
||||
label: "Summary",
|
||||
value: "summary",
|
||||
onclick: (val) => {
|
||||
changeRoute(val);
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "summary";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Metrics",
|
||||
value: "metrics",
|
||||
onclick: (val) => {
|
||||
changeRoute("metrics");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "metrics";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
value: "security",
|
||||
onclick: (val) => {
|
||||
changeRoute("security");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "security";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Pools",
|
||||
value: "pools",
|
||||
onclick: (val) => {
|
||||
changeRoute("pools");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "pools";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Pods",
|
||||
value: "pods",
|
||||
onclick: (val) => {
|
||||
changeRoute("pods");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "pods" || currentTab === ":podName";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Volumes",
|
||||
value: "volumes",
|
||||
onclick: (val) => {
|
||||
changeRoute("volumes");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "volumes";
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "License",
|
||||
value: "license",
|
||||
onclick: (val) => {
|
||||
changeRoute("license");
|
||||
},
|
||||
selected: () => {
|
||||
return currentTab === "license";
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
let value = menu[0].value;
|
||||
for (const mli of menu) {
|
||||
if (mli.selected()) {
|
||||
value = mli.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{yamlScreenOpen && (
|
||||
@@ -336,74 +424,48 @@ const TenantDetails = ({
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<List component="nav" dense={true}>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "summary"}
|
||||
onClick={() => {
|
||||
changeRoute("summary");
|
||||
}}
|
||||
<Grid item xs={12} sm={12} md={2}>
|
||||
<Box display={{ xs: "none", sm: "none", md: "block" }}>
|
||||
<List component="nav" dense={true}>
|
||||
{menu.map((mli) => {
|
||||
return (
|
||||
<ListItem
|
||||
button
|
||||
selected={mli.selected()}
|
||||
onClick={() => {
|
||||
mli.onclick(mli.value);
|
||||
}}
|
||||
>
|
||||
<ListItemText primary={mli.label} />
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
<Box display={{ xs: "block", sm: "block", md: "none" }}>
|
||||
<Tabs
|
||||
value={value}
|
||||
indicatorColor="primary"
|
||||
textColor="primary"
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
aria-label="scrollable auto tabs example"
|
||||
>
|
||||
<ListItemText primary="Summary" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "metrics"}
|
||||
onClick={() => {
|
||||
changeRoute("metrics");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="Metrics" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "security"}
|
||||
onClick={() => {
|
||||
changeRoute("security");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="Security" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "pools"}
|
||||
onClick={() => {
|
||||
changeRoute("pools");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="Pools" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "pods" || currentTab === ":podName"}
|
||||
onClick={() => {
|
||||
changeRoute("pods");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="Pods" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "volumes"}
|
||||
onClick={() => {
|
||||
changeRoute("volumes");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="Volumes" />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
selected={currentTab === "license"}
|
||||
onClick={() => {
|
||||
changeRoute("license");
|
||||
}}
|
||||
>
|
||||
<ListItemText primary="License" />
|
||||
</ListItem>
|
||||
</List>
|
||||
{menu.map((mli) => {
|
||||
return (
|
||||
<Tab
|
||||
label={mli.label}
|
||||
value={mli.value}
|
||||
onClick={() => {
|
||||
mli.onclick(mli.value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={10}>
|
||||
<Grid item xs={12} sm={12} md={10}>
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
<Route
|
||||
|
||||
@@ -93,6 +93,26 @@ const styles = (theme: Theme) =>
|
||||
centerAlign: {
|
||||
textAlign: "center",
|
||||
},
|
||||
detailSection: {
|
||||
"& div": {
|
||||
"& b,i": {
|
||||
minWidth: 80,
|
||||
display: "block",
|
||||
float: "left",
|
||||
},
|
||||
"& i": {
|
||||
fontStyle: "normal",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
},
|
||||
"& div": {
|
||||
clear: "both",
|
||||
},
|
||||
clear: "both",
|
||||
marginBottom: 2,
|
||||
},
|
||||
},
|
||||
|
||||
...containerForHeader(theme.spacing(4)),
|
||||
});
|
||||
|
||||
@@ -200,83 +220,101 @@ const TenantSummary = ({
|
||||
<h1 className={classes.sectionTitle}>Summary</h1>
|
||||
<Paper className={classes.paperContainer}>
|
||||
<Grid container>
|
||||
<Grid item xs={8}>
|
||||
<table width={"100%"}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
<h2>Details</h2>
|
||||
<hr className={classes.hrClass} />
|
||||
</td>
|
||||
</tr>
|
||||
{loadingTenant ? (
|
||||
<tr>
|
||||
<td colSpan={4} className={classes.centerAlign}>
|
||||
<CircularProgress />
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
<Fragment>
|
||||
<tr>
|
||||
<td className={classes.titleCol}>Capacity:</td>
|
||||
<td>{niceBytes(capacity.toString(10))}</td>
|
||||
<td className={classes.titleCol}>Clusters:</td>
|
||||
<td>{poolCount}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className={classes.titleCol}>Instances:</td>
|
||||
<td>{instances}</td>
|
||||
<td className={classes.titleCol}>Volumes:</td>
|
||||
<td>{volumes}</td>
|
||||
</tr>
|
||||
{tenant?.endpoints && (
|
||||
<tr>
|
||||
<td className={classes.titleCol}>Endpoint:</td>
|
||||
<td>
|
||||
<a
|
||||
href={tenant?.endpoints.minio}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{tenant?.endpoints.minio}
|
||||
</a>
|
||||
</td>
|
||||
<td className={classes.titleCol}>Console:</td>
|
||||
<td>
|
||||
<a
|
||||
href={tenant?.endpoints.console}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{tenant?.endpoints.console}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr>
|
||||
<td className={classes.titleCol}>MinIO:</td>
|
||||
<td colSpan={3}>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
onClick={() => {
|
||||
setUpdateMinioVersion(true);
|
||||
}}
|
||||
>
|
||||
{tenant ? tenant.image : ""}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className={classes.titleCol}>State:</td>
|
||||
<td colSpan={3}>{tenant?.currentState}</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<Grid item xs={12} sm={8}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<h2>Details</h2>
|
||||
<hr className={classes.hrClass} />
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={12}
|
||||
md={6}
|
||||
className={classes.detailSection}
|
||||
>
|
||||
<div>
|
||||
<b>Capacity:</b>
|
||||
<i>{niceBytes(capacity.toString(10))}</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>Instances:</b>
|
||||
<i>{instances}</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>Endpoint:</b>
|
||||
<i>
|
||||
<a
|
||||
href={tenant?.endpoints.minio}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{tenant?.endpoints.minio}
|
||||
</a>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={12}
|
||||
md={6}
|
||||
className={classes.detailSection}
|
||||
>
|
||||
<div>
|
||||
<b>Clusters:</b>
|
||||
<i>{poolCount}</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>Volumes:</b>
|
||||
<i>{volumes}</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>Console:</b>
|
||||
<i>
|
||||
<a
|
||||
href={tenant?.endpoints.console}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{tenant?.endpoints.console}
|
||||
</a>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.detailSection}>
|
||||
<div>
|
||||
<b>MinIO:</b>
|
||||
<i>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
onClick={() => {
|
||||
setUpdateMinioVersion(true);
|
||||
}}
|
||||
>
|
||||
{tenant ? tenant.image : ""}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.detailSection}>
|
||||
<div>
|
||||
<b>State:</b>
|
||||
<i>{tenant?.currentState}</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
{loadingTenant ? (
|
||||
<div className={classes.centerAlign}>
|
||||
<CircularProgress />
|
||||
@@ -354,91 +392,87 @@ const TenantSummary = ({
|
||||
<Paper className={classes.paperContainer}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<table width={"100%"}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
<h2>Features</h2>
|
||||
<hr className={classes.hrClass} />
|
||||
</td>
|
||||
</tr>
|
||||
{loadingTenant ? (
|
||||
<tr>
|
||||
<td className={classes.centerAlign} colSpan={4}>
|
||||
<CircularProgress />
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
<Fragment>
|
||||
<tr>
|
||||
<td className={classes.titleCol}>Logs:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{logEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
<td className={classes.titleCol}>Monitoring:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{monitoringEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className={classes.titleCol}>MinIO TLS:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{minioTLS ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
<td className={classes.titleCol}>Encryption:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{encryptionEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<React.Fragment>
|
||||
<td className={classes.titleCol}>Active Directory:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{adEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
</React.Fragment>
|
||||
<React.Fragment>
|
||||
<td className={classes.titleCol}>OpenID:</td>
|
||||
<td>
|
||||
<Button
|
||||
color="primary"
|
||||
className={classes.anchorButton}
|
||||
>
|
||||
{oidcEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</td>
|
||||
</React.Fragment>
|
||||
</tr>
|
||||
</Fragment>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Features</h2>
|
||||
<hr className={classes.hrClass} />
|
||||
</Grid>
|
||||
{loadingTenant ? (
|
||||
<Grid item xs={12} className={classes.centerAlign}>
|
||||
<CircularProgress />
|
||||
</Grid>
|
||||
) : (
|
||||
<Fragment>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={12}
|
||||
md={6}
|
||||
className={classes.detailSection}
|
||||
>
|
||||
<div>
|
||||
<b>Logs:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{logEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>MinIO TLS:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{minioTLS ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>AD/LDAP:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{adEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={12}
|
||||
md={6}
|
||||
className={classes.detailSection}
|
||||
>
|
||||
<div>
|
||||
<b>Monitoring:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{monitoringEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>Encryption:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{encryptionEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
<div>
|
||||
<b>OpenID:</b>
|
||||
<i>
|
||||
<Button color="primary" className={classes.anchorButton}>
|
||||
{oidcEnabled ? "Enabled" : "Disabled"}
|
||||
</Button>
|
||||
</i>
|
||||
<div />
|
||||
</div>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
)}
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Fragment>
|
||||
|
||||
Reference in New Issue
Block a user