UI: Tweaks to multiple elements (#284)

Author: dvaldivia

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:

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

portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx

@@ -265,7 +265,7 @@ const TableWrapper = ({
             </Grid>
           </Grid>
         )}
-        {records && records.length > 0 ? (
+        {records && !isLoading && records.length > 0 ? (
           <Table size="small" stickyHeader={stickyHeader}>
             <TableHead className={classes.minTableHeader}>
               <TableRow>

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,49 +52,50 @@ 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;
 }
 
 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",
       top: 0,
       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<boolean>(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 (

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<NewServiceAccount | null>(null);
+  ] = useState<NewTenantCredential | null>(null);
 
   const closeAddModalAndRefresh = (
     reloadData: boolean,
-    res: NewServiceAccount | null
+    res: NewTenantCredential | null
   ) => {
     setCreateTenantOpen(false);
 
@@ -235,7 +238,7 @@ const ListTenants = ({ classes }: ITenantsList) => {
         />
       )}
       {showNewCredentials && (
-        <CredentialsPrompt
+        <TenantCredentialsPrompt
           newServiceAccount={createdAccount}
           open={showNewCredentials}
           closeModal={() => {
@@ -252,6 +255,17 @@ const ListTenants = ({ classes }: ITenantsList) => {
           <br />
         </Grid>
         <Grid item xs={12} className={classes.actionsTray}>
+          <IconButton
+            color="primary"
+            aria-label="Refresh Tenant List"
+            component="span"
+            onClick={() => {
+              setIsLoading(true);
+            }}
+          >
+            <RefreshIcon />
+          </IconButton>
+
           <TextField
             placeholder="Search Tenants"
             className={classes.searchField}