From c198687303f011f9eafdb9f895d8044e6cca386f Mon Sep 17 00:00:00 2001 From: Daniel Valdivia Date: Tue, 22 Sep 2020 10:42:54 -0700 Subject: [PATCH] UI: Tweaks to multiple elements --- k8s/console/base/console-cluster-role.yaml | 13 ++- k8s/operator-console/base/kustomization.yaml | 2 +- .../Common/TableWrapper/TableWrapper.tsx | 2 +- .../Console/Tenants/ListTenants/AddTenant.tsx | 81 +++++++++---------- .../Tenants/ListTenants/ListTenants.tsx | 22 ++++- .../Tenants/TenantDetails/AddZoneModal.tsx | 30 +++---- .../Tenants/TenantDetails/TenantDetails.tsx | 68 ++++++++-------- 7 files changed, 118 insertions(+), 100 deletions(-) diff --git a/k8s/console/base/console-cluster-role.yaml b/k8s/console/base/console-cluster-role.yaml index 9be94697fc..ccfa7580dc 100644 --- a/k8s/console/base/console-cluster-role.yaml +++ b/k8s/console/base/console-cluster-role.yaml @@ -7,7 +7,6 @@ rules: - "" resources: - namespaces - - secrets - pods - services - events @@ -18,6 +17,18 @@ rules: - create - list - patch + - apiGroups: + - "" + resources: + - secrets + verbs: + - get + - watch + - create + - list + - patch + - deletecollection + - delete - apiGroups: - "storage.k8s.io" resources: diff --git a/k8s/operator-console/base/kustomization.yaml b/k8s/operator-console/base/kustomization.yaml index 69cac85d86..8006d20096 100644 --- a/k8s/operator-console/base/kustomization.yaml +++ b/k8s/operator-console/base/kustomization.yaml @@ -8,4 +8,4 @@ resources: - console-configmap.yaml - console-service.yaml - console-deployment.yaml - - https://github.com/minio/operator/?ref=v3.0.10 + - https://github.com/minio/operator/?ref=v3.0.19 diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx index 0a9f982503..3dadcf5b39 100644 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx @@ -265,7 +265,7 @@ const TableWrapper = ({ )} - {records && records.length > 0 ? ( + {records && !isLoading && records.length > 0 ? ( diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx index 130e6230c2..fb5d461224 100644 --- a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx +++ b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx @@ -40,7 +40,7 @@ import { } from "../../../../common/utils"; import { commonFormValidation, - IValidation + IValidation, } from "../../../../utils/validationFunctions"; import GenericWizard from "../../Common/GenericWizard/GenericWizard"; import { IWizardElement } from "../../Common/GenericWizard/types"; @@ -52,12 +52,13 @@ import { ICapacity, ITenantCreator, } from "../../../../common/types"; +import { NewTenantCredential } from "./TenantCredentialsPrompt/types"; interface IAddTenantProps { open: boolean; closeModalAndRefresh: ( reloadData: boolean, - res: NewServiceAccount | null + res: NewTenantCredential | null ) => any; classes: any; } @@ -65,19 +66,19 @@ interface IAddTenantProps { const styles = (theme: Theme) => createStyles({ errorBlock: { - color: "red" + color: "red", }, buttonContainer: { - textAlign: "right" + textAlign: "right", }, multiContainer: { display: "flex", alignItems: "center" as const, - justifyContent: "flex-start" as const + justifyContent: "flex-start" as const, }, sizeFactorContainer: { marginLeft: 8, - alignSelf: "flex-start" as const + alignSelf: "flex-start" as const, }, headerElement: { position: "sticky", @@ -85,16 +86,16 @@ const styles = (theme: Theme) => paddingTop: 5, marginBottom: 10, backgroundColor: "#fff", - zIndex: 500 + zIndex: 500, }, tableTitle: { fontWeight: 700, - width: "30%" + width: "30%", }, zoneError: { color: "#dc1f2e", fontSize: "0.75rem", - paddingLeft: 120 + paddingLeft: 120, }, error: { color: "#dc1f2e", @@ -111,7 +112,7 @@ interface Opts { const AddTenant = ({ open, closeModalAndRefresh, - classes + classes, }: IAddTenantProps) => { // Fields const [addSending, setAddSending] = useState(false); @@ -212,7 +213,9 @@ const AddTenant = ({ const elements = get(res, "elements", []); const newStorage = elements.map((storageClass: any) => { - const name = get(storageClass, "name", "").split(".")[0]; + const name = get(storageClass, "name", "").split( + ".storageclass.storage.k8s.io/requests.storage" + )[0]; return { label: name, value: name }; }); @@ -265,16 +268,6 @@ const AddTenant = ({ ); setDistribution(distrCalculate); - - /*const errorDistribution = get(distrCalculate, "error", ""); - - if (errorDistribution === "") { - const disksPerServer = get(distrCalculate, "disks", 0); - const totalNodes = get(distrCalculate, "nodes", 0); - const sizePerVolume = get(distrCalculate, "pvSize", 0); - - getParity(totalNodes, disksPerServer, sizePerVolume); - }*/ }; /*Calculate Allocation End*/ @@ -301,8 +294,8 @@ const AddTenant = ({ setNameTenantValid( !("tenant-name" in commonValidation) && - !("namespace" in commonValidation) && - storageClasses.length > 0 + !("namespace" in commonValidation) && + storageClasses.length > 0 ); setValidationErrors(commonValidation); @@ -337,9 +330,9 @@ const AddTenant = ({ setConfigValid( !("nodes" in commonValidation) && - !("volume_size" in commonValidation) && - !("memory_per_node" in commonValidation) && - distribution.error === "" + !("volume_size" in commonValidation) && + !("memory_per_node" in commonValidation) && + distribution.error === "" ); setValidationErrors(commonValidation); @@ -356,8 +349,8 @@ const AddTenant = ({ required: true, value: imageName, pattern: /^((.*?)\/(.*?):(.+))$/, - customPatternMessage: "Format must be of form: 'minio/minio:VERSION'" - } + customPatternMessage: "Format must be of form: 'minio/minio:VERSION'", + }, ]; } @@ -590,9 +583,13 @@ const AddTenant = ({ api .invoke("POST", `/api/v1/tenants`, dataSend) .then((res) => { - const newSrvAcc: NewServiceAccount = { + const newSrvAcc: NewTenantCredential = { accessKey: res.access_key, secretKey: res.secret_key, + console: { + accessKey: res.console.access_key, + secretKey: res.console.secret_key, + }, }; setAddSending(false); @@ -620,7 +617,7 @@ const AddTenant = ({ enabled: true, action: () => { closeModalAndRefresh(false, null); - } + }, }; const wizardSteps: IWizardElement[] = [ @@ -690,7 +687,7 @@ const AddTenant = ({ id="adv_mode" name="adv_mode" checked={advancedMode} - onChange={e => { + onChange={(e) => { const targetD = e.target; const checked = targetD.checked; @@ -703,8 +700,8 @@ const AddTenant = ({ ), buttons: [ cancelButton, - { label: "Next", type: "next", enabled: nameTenantValid } - ] + { label: "Next", type: "next", enabled: nameTenantValid }, + ], }, { label: "Configure", @@ -1080,8 +1077,8 @@ const AddTenant = ({ buttons: [ cancelButton, { label: "Back", type: "back", enabled: true }, - { label: "Next", type: "next", enabled: true } - ] + { label: "Next", type: "next", enabled: true }, + ], }, { label: "Encryption", @@ -1504,8 +1501,8 @@ const AddTenant = ({ buttons: [ cancelButton, { label: "Back", type: "back", enabled: true }, - { label: "Next", type: "next", enabled: true } - ] + { label: "Next", type: "next", enabled: true }, + ], }, { label: "Tenant Size", @@ -1720,16 +1717,16 @@ const AddTenant = ({ enabled: !addSending, action: () => { setAddSending(true); - } - } - ] - } + }, + }, + ], + }, ]; let filteredWizardSteps = wizardSteps; if (!advancedMode) { - filteredWizardSteps = wizardSteps.filter(step => !step.advancedOnly); + filteredWizardSteps = wizardSteps.filter((step) => !step.advancedOnly); } return ( diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx index 9070a460ca..d73d379468 100644 --- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx +++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx @@ -20,7 +20,7 @@ import Typography from "@material-ui/core/Typography"; import TextField from "@material-ui/core/TextField"; import InputAdornment from "@material-ui/core/InputAdornment"; import SearchIcon from "@material-ui/icons/Search"; -import { Button } from "@material-ui/core"; +import { Button, IconButton } from "@material-ui/core"; import { CreateIcon } from "../../../../icons"; import TableWrapper from "../../Common/TableWrapper/TableWrapper"; import { MinTablePaginationActions } from "../../../../common/MinTablePaginationActions"; @@ -33,6 +33,9 @@ import AddTenant from "./AddTenant"; import { NewServiceAccount } from "../../Common/CredentialsPrompt/types"; import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt"; import history from "../../../../history"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import TenantCredentialsPrompt from "./TenantCredentialsPrompt/TenantCredentialsPrompt"; +import { NewTenantCredential } from "./TenantCredentialsPrompt/types"; interface ITenantsList { classes: any; @@ -97,11 +100,11 @@ const ListTenants = ({ classes }: ITenantsList) => { const [ createdAccount, setCreatedAccount, - ] = useState(null); + ] = useState(null); const closeAddModalAndRefresh = ( reloadData: boolean, - res: NewServiceAccount | null + res: NewTenantCredential | null ) => { setCreateTenantOpen(false); @@ -235,7 +238,7 @@ const ListTenants = ({ classes }: ITenantsList) => { /> )} {showNewCredentials && ( - { @@ -252,6 +255,17 @@ const ListTenants = ({ classes }: ITenantsList) => {
+ { + setIsLoading(true); + }} + > + + + createStyles({ errorBlock: { - color: "red" + color: "red", }, buttonContainer: { - textAlign: "right" + textAlign: "right", }, multiContainer: { display: "flex", alignItems: "center" as const, - justifyContent: "flex-start" as const + justifyContent: "flex-start" as const, }, sizeFactorContainer: { - marginLeft: 8 + marginLeft: 8, }, bottomContainer: { display: "flex", @@ -43,31 +43,31 @@ const styles = (theme: Theme) => alignItems: "center", "& div": { flexGrow: 1, - width: "100%" - } + width: "100%", + }, }, factorElements: { display: "flex", - justifyContent: "flex-start" + justifyContent: "flex-start", }, sizeNumber: { fontSize: 35, fontWeight: 700, - textAlign: "center" + textAlign: "center", }, sizeDescription: { fontSize: 14, color: "#777", - textAlign: "center" + textAlign: "center", }, - ...modalBasic + ...modalBasic, }); const AddZoneModal = ({ tenant, classes, open, - onCloseZoneAndReload + onCloseZoneAndReload, }: IAddZoneProps) => { const [addSending, setAddSending] = useState(false); const [numberOfNodes, setNumberOfNodes] = useState(0); @@ -96,8 +96,8 @@ const AddZoneModal = ({ volume_configuration: { size: volumeSize * 1073741824, storage_class: "", - labels: null - } + labels: null, + }, }; api .invoke( @@ -109,7 +109,7 @@ const AddZoneModal = ({ setAddSending(false); onCloseZoneAndReload(true); }) - .catch(err => { + .catch((err) => { setAddSending(false); // setDeleteError(err); }); diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx index b9a162ab6d..280a3288b1 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx @@ -42,25 +42,25 @@ interface ITenantDetailsProps { const styles = (theme: Theme) => createStyles({ errorBlock: { - color: "red" + color: "red", }, buttonContainer: { - textAlign: "right" + textAlign: "right", }, multiContainer: { display: "flex", alignItems: "center" as const, - justifyContent: "flex-start" as const + justifyContent: "flex-start" as const, }, sizeFactorContainer: { - marginLeft: 8 + marginLeft: 8, }, containerHeader: { display: "flex", - justifyContent: "space-between" + justifyContent: "space-between", }, paperContainer: { - padding: "15px 15px 15px 50px" + padding: "15px 15px 15px 50px", }, infoGrid: { display: "grid", @@ -68,42 +68,29 @@ const styles = (theme: Theme) => gridGap: 8, "& div": { display: "flex", - alignItems: "center" + alignItems: "center", }, "& div:nth-child(odd)": { justifyContent: "flex-end", - fontWeight: 700 + fontWeight: 700, }, "& div:nth-child(2n)": { - paddingRight: 35 - } + paddingRight: 35, + }, }, masterActions: { width: "25%", minWidth: "120px", "& div": { - margin: "5px 0px" - } + margin: "5px 0px", + }, }, actionsTray: { - textAlign: "right" + textAlign: "right", }, - ...modalBasic + ...modalBasic, }); -const mainPagination = { - rowsPerPageOptions: [5, 10, 25], - colSpan: 3, - count: 0, - rowsPerPage: 0, - page: 0, - SelectProps: { - inputProps: { "aria-label": "rows per page" }, - native: true - }, - ActionsComponent: MinTablePaginationActions -}; - const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { const [selectedTab, setSelectedTab] = useState(0); const [capacity, setCapacity] = useState(0); @@ -180,7 +167,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { setError(""); setLoading(false); }) - .catch(err => { + .catch((err) => { setError(err); setLoading(false); }); @@ -227,10 +214,10 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
{niceBytes(capacity.toString(10))}
Minio:
{tenant ? tenant.image : ""}
-
Console:
-
{tenant ? tenant.console_image : ""}
Zones:
{zoneCount}
+
Console:
+
{tenant ? tenant.console_image : ""}
Instances:
{instances}
Volumes:
@@ -274,26 +261,35 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => { itemActions={[ { type: "delete", - onClick: element => { + onClick: (element) => { console.log(element); }, - sendOnlyId: true - } + sendOnlyId: true, + }, ]} columns={[ { label: "Name", elementKey: "name" }, { label: "Capacity", elementKey: "capacity" }, { label: "# of Instances", elementKey: "servers" }, - { label: "# of Drives", elementKey: "volumes" } + { label: "# of Drives", elementKey: "volumes" }, ]} isLoading={false} records={zones} entityName="Zones" idField="name" paginatorConfig={{ - ...mainPagination, + rowsPerPageOptions: [5, 10, 25], + colSpan: 3, + count: zoneCount, + rowsPerPage: 10, + page: 0, + SelectProps: { + inputProps: { "aria-label": "rows per page" }, + native: true, + }, + ActionsComponent: MinTablePaginationActions, onChangePage: () => {}, - onChangeRowsPerPage: () => {} + onChangeRowsPerPage: () => {}, }} />