UI: Tweaks to multiple elements (#284)

2020-09-22 20:31:00 -07:00
parent 86426e95f7
commit b72d424ec9
7 changed files with 118 additions and 100 deletions
--- 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:
--- 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
--- 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 = ({
            </Grid>
          </Grid>
        )}
-        {records && records.length > 0 ? (
+        {records && !isLoading && records.length > 0 ? (
          <Table size="small" stickyHeader={stickyHeader}>
            <TableHead className={classes.minTableHeader}>
              <TableRow>
--- 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<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 (
--- 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<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}
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddZoneModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddZoneModal.tsx
@@ -8,7 +8,7 @@ import Grid from "@material-ui/core/Grid";
 import {
  factorForDropdown,
  getTotalSize,
-  niceBytes
+  niceBytes,
 } from "../../../../common/utils";
 import { Button, LinearProgress } from "@material-ui/core";
 import api from "../../../../common/api";
@@ -24,18 +24,18 @@ interface IAddZoneProps {
 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,
    },
    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<boolean>(false);
  const [numberOfNodes, setNumberOfNodes] = useState<number>(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);
            });
--- 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<number>(0);
  const [capacity, setCapacity] = useState<number>(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) => {
              <div>{niceBytes(capacity.toString(10))}</div>
              <div>Minio:</div>
              <div>{tenant ? tenant.image : ""}</div>
-              <div>Console:</div>
-              <div>{tenant ? tenant.console_image : ""}</div>
              <div>Zones:</div>
              <div>{zoneCount}</div>
+              <div>Console:</div>
+              <div>{tenant ? tenant.console_image : ""}</div>
              <div>Instances:</div>
              <div>{instances}</div>
              <div>Volumes:</div>
@@ -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: () => {},
            }}
          />
        </Grid>