Skip to content

Commit

Permalink
Operator UI Adjustments (#1805)
Browse files Browse the repository at this point in the history 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
  • Loading branch information
@dvaldivia
dvaldivia committed Apr 7, 2022
1 parent 4647671 commit 02a35fb
Show file tree
Hide file tree
Showing 11 changed files with 1,252 additions and 1,126 deletions.
9 changes: 3 additions & 6 deletions portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@ interface IFormSwitch {

const styles = (theme: Theme) =>
createStyles({
divContainer: {
marginBottom: 20,
},
indicatorLabelOn: {
fontWeight: "bold",
color: "#081C42 !important",
Expand Down Expand Up @@ -172,7 +169,7 @@ const FormSwitchWrapper = ({
}

return (
<div className={classes.divContainer}>
<div>
<Grid container alignItems={"center"}>
<Grid item xs={12} sm={8} md={8}>
{label !== "" && (
Expand All @@ -193,8 +190,8 @@ const FormSwitchWrapper = ({
<Grid
item
xs={12}
sm={4}
md={4}
sm={label !== "" ? 4 : 12}
md={label !== "" ? 4 : 12}
textAlign={"right"}
justifyContent={"end"}
className={classes.switchContainer}
Expand Down
18 changes: 9 additions & 9 deletions portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -803,22 +803,22 @@ const AddTenant = ({
entity="Tenant"
/>
)}
<PageHeader label={"Create New Tenant"} />
<PageHeader
label={
<BackLink
to={"/tenants"}
label={"Tenants"}
executeOnClick={resetAddTenantForm}
/>
}
/>

<PageLayout>
{addSending && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}

<Grid item xs={12}>
<BackLink
to={"/tenants"}
label={"Tenant List"}
executeOnClick={resetAddTenantForm}
/>
</Grid>
<Grid item xs={12} className={classes.pageBox}>
<GenericWizard wizardSteps={filteredWizardSteps} />
</Grid>
Expand Down
18 changes: 15 additions & 3 deletions portal-ui/src/screens/Console/Tenants/ListTenants/InformationItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,25 @@ interface IInformationItemProps {
label: string;
value: string;
unit?: string;
variant?: "normal" | "faded";
}

const InformationItem = ({ label, value, unit }: IInformationItemProps) => {
const InformationItem = ({
label,
value,
unit,
variant = "normal",
}: IInformationItemProps) => {
return (
<div style={{ margin: "0px 20px" }}>
<div style={{ textAlign: "center" }}>
<span style={{ fontSize: 18, color: "#000", fontWeight: 400 }}>
<span
style={{
fontSize: 18,
color: variant === "normal" ? "#000" : "#999",
fontWeight: 400,
}}
>
{value}
</span>
{unit && (
Expand All @@ -43,7 +55,7 @@ const InformationItem = ({ label, value, unit }: IInformationItemProps) => {
<div
style={{
textAlign: "center",
color: "#767676",
color: variant === "normal" ? "#767676" : "#bababa",
fontSize: 12,
whiteSpace: "nowrap",
}}
Expand Down
1 change: 0 additions & 1 deletion portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ const styles = (theme: Theme) =>
marginBottom: 8,
},
tenantsList: {
marginTop: 25,
height: "calc(100vh - 195px)",
},
});
Expand Down
149 changes: 105 additions & 44 deletions portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,9 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { niceBytes, niceBytesInt } from "../../../../common/utils";
import { tenantIsOnline } from "./utils";
import { Button } from "@mui/material";
import InformationItem from "./InformationItem";
import TenantCapacity from "./TenantCapacity";
import { DrivesIcon } from "../../../../icons";

const styles = (theme: Theme) =>
createStyles({
Expand Down Expand Up @@ -76,9 +75,8 @@ const styles = (theme: Theme) =>
height: 10,
},
tenantItem: {
border: "1px solid #EAEDEE",
borderRadius: 3,
marginBottom: 20,
border: "1px solid #EAEAEA",
marginBottom: 16,
padding: "15px 30px",
"&:hover": {
backgroundColor: "#FAFAFA",
Expand Down Expand Up @@ -154,6 +152,8 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
let raw: ValueUnit = { value: "n/a", unit: "" };
let capacity: ValueUnit = { value: "n/a", unit: "" };
let used: ValueUnit = { value: "n/a", unit: "" };
let localUse: ValueUnit = { value: "n/a", unit: "" };
let tieredUse: ValueUnit = { value: "n/a", unit: "" };

if (tenant.capacity_raw) {
const b = niceBytes(`${tenant.capacity_raw}`, true);
Expand All @@ -175,7 +175,6 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
}

let spaceVariants: CapacityValues[] = [];

if (!tenant.tiers || tenant.tiers.length === 0) {
spaceVariants = [
{ value: tenant.capacity_usage || 0, variant: "STANDARD" },
Expand All @@ -184,6 +183,26 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
spaceVariants = tenant.tiers.map((itemTenant) => {
return { value: itemTenant.size, variant: itemTenant.name };
});
let internalUsage = tenant.tiers
.filter((itemTenant) => {
return itemTenant.type === "internal";
})
.reduce((sum, itemTenant) => sum + itemTenant.size, 0);
let tieredUsage = tenant.tiers
.filter((itemTenant) => {
return itemTenant.type !== "internal";
})
.reduce((sum, itemTenant) => sum + itemTenant.size, 0);

const t = niceBytesInt(tieredUsage, true);
const parts = t.split(" ");
tieredUse.value = parts[0];
tieredUse.unit = parts[1];

const is = niceBytesInt(internalUsage, true);
const partsInternal = is.split(" ");
localUse.value = partsInternal[0];
localUse.unit = partsInternal[1];
}

const openTenantDetails = () => {
Expand Down Expand Up @@ -238,14 +257,10 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
value={capacity.value}
unit={capacity.unit}
/>
<InformationItem
label={"Usage"}
value={used.value}
unit={used.unit}
/>
<InformationItem
label={"Pools"}
value={tenant.pool_count.toString()}
variant={"faded"}
/>
</Grid>
<Grid
Expand All @@ -258,40 +273,86 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
</span>
</Grid>
</Grid>
<Grid
item
xs={2}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
}}
>
<Button
id={"manage-tenant-" + tenant.name}
disabled={!tenantIsOnline(tenant)}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
<Grid item xs={3}>
<Fragment>
<Grid container>
<Grid
item
xs={2}
textAlign={"center"}
justifyContent={"center"}
justifyItems={"center"}
>
<DrivesIcon
style={{ width: 25, color: "rgb(91,91,91)" }}
/>
<div
style={{
color: "rgb(118, 118, 118)",
fontSize: 12,
fontWeight: "400",
}}
>
Usage
</div>
</Grid>
<Grid item xs={1} />
<Grid item style={{ paddingTop: 8 }}>
{(!tenant.tiers || tenant.tiers.length === 0) && (
<div
style={{
fontSize: 14,
fontWeight: 400,
}}
>
<span
style={{
color: "rgb(62,62,62)",
}}
>
Internal:{" "}
</span>{" "}
{`${used.value} ${used.unit}`}
</div>
)}

history.push(
`/namespaces/${tenant.namespace}/tenants/${tenant.name}/hop`
);
}}
disableTouchRipple
disableRipple
focusRipple={false}
sx={{
color: "#5E5E5E",
border: "#5E5E5E 1px solid",
whiteSpace: "nowrap",
paddingLeft: 4.5,
paddingRight: 4.5,
}}
variant={"outlined"}
>
Manage
</Button>
{tenant.tiers && tenant.tiers.length > 0 && (
<Fragment>
<div
style={{
fontSize: 14,
fontWeight: 400,
}}
>
<span
style={{
color: "rgb(62,62,62)",
}}
>
Internal:{" "}
</span>{" "}
{`${localUse.value} ${localUse.unit}`}
</div>
<div
style={{
fontSize: 14,
fontWeight: 400,
}}
>
<span
style={{
color: "rgb(62,62,62)",
}}
>
Tiered:{" "}
</span>{" "}
{`${tieredUse.value} ${tieredUse.unit}`}
</div>
</Fragment>
)}
</Grid>
</Grid>
</Fragment>
</Grid>
</Grid>
</Grid>
Expand Down
4 changes: 0 additions & 4 deletions portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,6 @@ const PoolsListing = ({
variant={"contained"}
/>
</Grid>
<Grid item xs={12}>
<br />
</Grid>

<Grid item xs={12} className={classes.tableBlock}>
<TableWrapper
itemActions={listActions}
Expand Down
26 changes: 22 additions & 4 deletions portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { AppState } from "../../../../store";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
import PageHeader from "../../Common/PageHeader/PageHeader";
import { CircleIcon, TrashIcon } from "../../../../icons";
import { CircleIcon, MinIOTierIconXs, TrashIcon } from "../../../../icons";
import { niceBytes } from "../../../../common/utils";
import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
import EditIcon from "../../../../icons/EditIcon";
Expand All @@ -51,6 +51,7 @@ import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs";
import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
import withSuspense from "../../Common/Components/withSuspense";
import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
import { tenantIsOnline } from "../ListTenants/utils";

const TenantYAML = withSuspense(React.lazy(() => import("./TenantYAML")));
const TenantSummary = withSuspense(React.lazy(() => import("./TenantSummary")));
Expand Down Expand Up @@ -377,7 +378,7 @@ const TenantDetails = ({
}}
size="large"
>
<span>Delete Tenant</span> <TrashIcon />
<span>Delete</span> <TrashIcon />
</BoxIconButton>
<BoxIconButton
classes={{
Expand All @@ -392,9 +393,26 @@ const TenantDetails = ({
}}
size="large"
>
<span>Edit Tenant</span>
<span>YAML</span>
<EditIcon />
</BoxIconButton>
<BoxIconButton
classes={{
root: classes.tenantActionButton,
}}
tooltip={"Management Console"}
onClick={() => {
history.push(
`/namespaces/${tenantNamespace}/tenants/${tenantName}/hop`
);
}}
disabled={!tenantInfo || !tenantIsOnline(tenantInfo)}
variant={"outlined"}
color="primary"
>
<span>Console</span>{" "}
<MinIOTierIconXs style={{ height: 16 }} />
</BoxIconButton>
<BoxIconButton
classes={{
root: classes.tenantActionButton,
Expand All @@ -407,7 +425,7 @@ const TenantDetails = ({
setTenantDetailsLoad(true);
}}
>
<span>Reload</span> <RefreshIcon />
<span>Refresh</span> <RefreshIcon />
</BoxIconButton>
</div>
}
Expand Down

0 comments on commit 02a35fb

Please sign in to comment.