diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx index 1c9ee0135..c3e06a622 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx @@ -16,7 +16,10 @@ import React, { useState, useEffect } from "react"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; -import { modalBasic } from "../../Common/FormComponents/common/styleLibrary"; +import { + containerForHeader, + modalBasic, +} from "../../Common/FormComponents/common/styleLibrary"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import { Button } from "@material-ui/core"; @@ -34,6 +37,7 @@ import api from "../../../../common/api"; import { ITenant, IZone } from "../ListTenants/types"; import Logs from "./Logs/Logs"; import Trace from "./Trace/Trace"; +import PageHeader from "../../Common/PageHeader/PageHeader"; interface ITenantDetailsProps { classes: any; @@ -90,13 +94,14 @@ const styles = (theme: Theme) => textAlign: "right", }, ...modalBasic, + ...containerForHeader(theme.spacing(4)), }); const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { const [selectedTab, setSelectedTab] = useState(0); const [capacity, setCapacity] = useState(0); const [zoneCount, setZoneCount] = useState(0); - const [zones, setZones] = useState([]); + const [serverSets, setServerSets] = useState([]); const [instances, setInstances] = useState(0); const [volumes, setVolumes] = useState(0); const [addZoneOpen, setAddZone] = useState(false); @@ -157,7 +162,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { setVolumes(totalVolumes); setInstances(totalInstances); - setZones(resZones); + setServerSets(resZones); setTenant(res); setError(""); @@ -193,12 +198,9 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { closeModalAndRefresh={closeReplicationAndRefresh} /> )} + ${match.params["tenantName"]}`} /> + - - - {`Tenant > ${match.params["tenantName"]}`} - - {error !== "" && ( {error} @@ -214,7 +216,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
{niceBytes(capacity.toString(10))}
Minio:
{tenant ? tenant.image : ""}
-
Zones:
+
Clusters:
{zoneCount}
Console:
{tenant ? tenant.console_image : ""}
@@ -238,7 +240,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { }} aria-label="tenant-tabs" > - + @@ -252,7 +254,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { setAddZone(true); }} > - Add Zone + Expand Tenant
@@ -277,8 +279,8 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { { label: "# of Drives", elementKey: "volumes" }, ]} isLoading={false} - records={zones} - entityName="Zones" + records={serverSets} + entityName="Servers" idField="name" /> )}