Rework Tenant Details as two columns (#1360)

* Rework Tenant Details as two columns

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* remove placeholder

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2022-01-03 18:42:21 -08:00
committed by GitHub
parent 9b12f5a41e
commit 68ffd0814b

View File

@@ -24,7 +24,7 @@ import {
containerForHeader,
tenantDetailsStyles,
} from "../../Common/FormComponents/common/styleLibrary";
import { Box, Button, Stack } from "@mui/material";
import { Box, Button, Grid, Stack } from "@mui/material";
import Paper from "@mui/material/Paper";
import { niceBytes } from "../../../../common/utils";
import { ITenant } from "../ListTenants/types";
@@ -36,8 +36,8 @@ import AButton from "../../Common/AButton/AButton";
import { styled } from "@mui/styles";
import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar";
import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair";
import StackRow from "../../Common/UsageBarWrapper/StackRow";
import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import StackRow from "../../Common/UsageBarWrapper/StackRow";
interface ITenantsSummary {
classes: any;
@@ -257,45 +257,12 @@ const TenantSummary = ({
<StorageSummary tenant={tenant} classes={classes} />
<Stack>
<StackRow>
<LabelValuePair label={"Instances:"} value={instances} />
<LabelValuePair
label={"Clusters:"}
value={poolCount}
stkProps={{
style: {
marginRight: 47,
},
}}
/>
</StackRow>
<StackRow>
<LabelValuePair
label={"Endpoint:"}
value={
<a
href={tenant?.endpoints?.minio}
target="_blank"
rel="noopener noreferrer"
className={classes.linkedSection}
>
{tenant?.endpoints?.minio || "-"}
</a>
}
/>
<LabelValuePair
label="Volumes:"
value={volumes}
stkProps={{
style: {
marginRight: 43,
},
}}
/>
</StackRow>
<StackRow>
<Grid container>
<Grid xs={12} sm={12} md={8} container>
<Grid xs={12}>
<LabelValuePair label={"State:"} value={tenant?.currentState} />
</Grid>
<Grid xs={12}>
<LabelValuePair
label="MinIO:"
value={
@@ -314,19 +281,23 @@ const TenantSummary = ({
</AButton>
}
/>
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Drives Online:"}
label={"Endpoint:"}
value={
tenant?.status?.drives_online ? tenant?.status?.drives_online : 0
<a
href={tenant?.endpoints?.minio}
target="_blank"
rel="noopener noreferrer"
className={classes.linkedSection}
>
{tenant?.endpoints?.minio || "-"}
</a>
}
stkProps={{
style: {
marginRight: 8,
},
}}
/>
</StackRow>
<StackRow>
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Console:"}
value={
@@ -340,6 +311,58 @@ const TenantSummary = ({
</a>
}
/>
</Grid>
</Grid>
<Grid xs={12} sm={12} md={4} container>
<Grid xs={12}>
<LabelValuePair label={"Instances:"} value={instances} />
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Clusters:"}
value={poolCount}
stkProps={{
style: {
marginRight: 47,
},
}}
/>
</Grid>
<Grid xs={12}>
<LabelValuePair
label="Total Drives:"
value={volumes}
stkProps={{
style: {
marginRight: 43,
},
}}
/>
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Write Quorum:"}
value={
tenant?.status?.write_quorum ? tenant?.status?.write_quorum : 0
}
/>
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Drives Online:"}
value={
tenant?.status?.drives_online
? tenant?.status?.drives_online
: 0
}
stkProps={{
style: {
marginRight: 8,
},
}}
/>
</Grid>
<Grid xs={12}>
<LabelValuePair
label={"Drives Offline:"}
value={
@@ -353,17 +376,9 @@ const TenantSummary = ({
},
}}
/>
</StackRow>
<StackRow>
<LabelValuePair label={"State:"} value={tenant?.currentState} />
<LabelValuePair
label={"Write Quorum:"}
value={
tenant?.status?.write_quorum ? tenant?.status?.write_quorum : 0
}
/>
</StackRow>
</Stack>
</Grid>
</Grid>
</Grid>
<Stack>
<StackRow