Exclude some units from tenant size dropdown (#1615)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2022-02-22 15:55:49 -08:00
parent 83fc075bc9
commit 5f1c830f47
7 changed files with 113 additions and 137 deletions
--- a/portal-ui/src/common/utils.ts
+++ b/portal-ui/src/common/utils.ts
@@ -101,10 +101,17 @@ export const factorForDropdown = () => {
 };

 // units to be used in a dropdown
-export const k8sfactorForDropdown = () => {
-  return k8sUnits.map((unit) => {
-    return { label: unit, value: unit };
-  });
+export const k8sScalarUnitsExcluding = (exclude?: string[]) => {
+  return k8sUnits
+    .filter((unit) => {
+      if (exclude && exclude.includes(unit)) {
+        return false;
+      }
+      return true;
+    })
+    .map((unit) => {
+      return { label: unit, value: unit };
+    });
 };

 //getBytes, converts from a value and a unit from units array to bytes
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -36,9 +36,10 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import api from "../../../../common/api";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import { getBytes, k8sfactorForDropdown } from "../../../../common/utils";
+import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import { BucketReplicationIcon } from "../../../../icons";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface IReplicationModal {
  open: boolean;
@@ -317,24 +318,26 @@ const AddReplicationModal = ({
                    id="bandwidth_scalar"
                    name="bandwidth_scalar"
                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setBandwidthScalar(e.target.value as string);
+                      if (e.target.validity.valid) {
+                        setBandwidthScalar(e.target.value as string);
+                      }
                    }}
                    label="Bandwidth"
                    value={bandwidthScalar}
                    min="0"
+                    pattern={"[0-9]*"}
+                    overlayObject={
+                      <InputUnitMenu
+                        id={"quota_unit"}
+                        onUnitChange={(newValue) => {
+                          setBandwidthUnit(newValue);
+                        }}
+                        unitSelected={bandwidthUnit}
+                        unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                        disabled={false}
+                      />
+                    }
                  />
-                  <div className={classes.sizeFactorContainer}>
-                    <SelectWrapper
-                      label={" "}
-                      id="bandwidth_unit"
-                      name="bandwidth_unit"
-                      value={bandwidthUnit}
-                      onChange={(e: SelectChangeEvent<string>) => {
-                        setBandwidthUnit(e.target.value as string);
-                      }}
-                      options={k8sfactorForDropdown()}
-                    />
-                  </div>
                </div>
              </Grid>
            )}
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -16,12 +16,16 @@

 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
+import { Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import { factorForDropdown, getBytes, units } from "../../../../common/utils";
+import {
+  getBytes,
+  k8sScalarUnitsExcluding,
+  units,
+} from "../../../../common/utils";
 import { BucketQuota } from "../types";
 import { setModalErrorSnackMessage } from "../../../../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
@@ -30,12 +34,11 @@ import {
  modalStyleUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import api from "../../../../common/api";
 import { BucketQuotaIcon } from "../../../../icons";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 const styles = (theme: Theme) =>
  createStyles({
@@ -64,7 +67,6 @@ const EnableQuota = ({
 }: IEnableQuotaProps) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [quotaEnabled, setQuotaEnabled] = useState<boolean>(false);
-  const [quotaType, setQuotaType] = useState<string>("hard");
  const [quotaSize, setQuotaSize] = useState<string>("1");
  const [quotaUnit, setQuotaUnit] = useState<string>("TiB");

@@ -72,9 +74,8 @@ const EnableQuota = ({
    if (enabled) {
      setQuotaEnabled(true);
      if (cfg) {
-        setQuotaType(cfg.type);
        setQuotaSize(`${cfg.quota}`);
-        setQuotaUnit(`B`);
+        setQuotaUnit(`Gi`);

        let maxUnit = "B";
        let maxQuota = cfg.quota;
@@ -93,15 +94,14 @@ const EnableQuota = ({
    }
  }, [enabled, cfg]);

-  const enableBucketEncryption = (event: React.FormEvent) => {
-    event.preventDefault();
+  const enableBucketEncryption = () => {
    if (loading) {
      return;
    }
    let req = {
      enabled: quotaEnabled,
-      amount: parseInt(getBytes(quotaSize, quotaUnit, false)),
-      quota_type: quotaType,
+      amount: parseInt(getBytes(quotaSize, quotaUnit, true)),
+      quota_type: "hard",
    };

    api
@@ -129,7 +129,8 @@ const EnableQuota = ({
        noValidate
        autoComplete="off"
        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-          enableBucketEncryption(e);
+          e.preventDefault();
+          enableBucketEncryption();
        }}
      >
        <Grid container>
@@ -143,53 +144,40 @@ const EnableQuota = ({
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                  setQuotaEnabled(event.target.checked);
                }}
-                label={"Quota"}
+                label={"Enabled"}
              />
            </Grid>
            {quotaEnabled && (
              <React.Fragment>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <RadioGroupSelector
-                    currentSelection={quotaType}
-                    id="quota_type"
-                    name="quota_type"
-                    label="Quota Type"
-                    onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                      setQuotaType(e.target.value as string);
-                    }}
-                    selectorOptions={[{ value: "hard", label: "Hard" }]}
-                  />
-                </Grid>
                <Grid item xs={12} className={classes.formFieldRow}>
                  <Grid container>
-                    <Grid item xs={10}>
+                    <Grid item xs={12}>
                      <InputBoxWrapper
-                        type="number"
                        id="quota_size"
                        name="quota_size"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setQuotaSize(e.target.value);
+                          if (e.target.validity.valid) {
+                            setQuotaSize(e.target.value);
+                          }
                        }}
+                        pattern={"[0-9]*"}
                        label="Quota"
                        value={quotaSize}
                        required
                        min="1"
+                        overlayObject={
+                          <InputUnitMenu
+                            id={"quota_unit"}
+                            onUnitChange={(newValue) => {
+                              setQuotaUnit(newValue);
+                            }}
+                            unitSelected={quotaUnit}
+                            unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                            disabled={false}
+                          />
+                        }
                      />
                    </Grid>
-                    <Grid item xs={2}>
-                      <div style={{ width: 100 }}>
-                        <SelectWrapper
-                          label=""
-                          id="quota_unit"
-                          name="quota_unit"
-                          value={quotaUnit}
-                          onChange={(e: SelectChangeEvent<string>) => {
-                            setQuotaUnit(e.target.value as string);
-                          }}
-                          options={factorForDropdown()}
-                        />
-                      </div>
-                    </Grid>
                  </Grid>
                </Grid>
              </React.Fragment>
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -16,16 +16,15 @@

 import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress, SelectChangeEvent } from "@mui/material";
+import { Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../common/api";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-import { factorForDropdown, getBytes } from "../../../../common/utils";
+import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import { AppState } from "../../../../store";
 import history from "../../../../history";
 import { connect } from "react-redux";
@@ -51,6 +50,7 @@ import BackLink from "../../../../common/BackLink";
 import { BucketsIcon } from "../../../../icons";
 import { setErrorSnackMessage } from "../../../../actions";
 import PageLayout from "../../Common/Layout/PageLayout";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 const styles = (theme: Theme) =>
  createStyles({
@@ -159,7 +159,7 @@ const AddBucket = ({

    if (distributedSetup) {
      if (quotaEnabled) {
-        const amount = getBytes(quotaSize, quotaUnit, false);
+        const amount = getBytes(quotaSize, quotaUnit, true);
        request.quota = {
          enabled: true,
          quota_type: quotaType,
@@ -375,52 +375,32 @@ const AddBucket = ({
                {quotaEnabled && distributedSetup && (
                  <React.Fragment>
                    <Grid item xs={12}>
-                      <RadioGroupSelector
-                        currentSelection={quotaType}
-                        id="quota_type"
-                        name="quota_type"
-                        label="Quota Type"
-                        onChange={(
-                          e: React.ChangeEvent<{ value: unknown }>
-                        ) => {
-                          addBucketQuotaType(e.target.value as string);
+                      <InputBoxWrapper
+                        type="number"
+                        id="quota_size"
+                        name="quota_size"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          if (e.target.validity.valid) {
+                            addBucketQuotaSize(e.target.value);
+                          }
                        }}
-                        selectorOptions={[{ value: "hard", label: "Hard" }]}
-                      />
-                    </Grid>
-                    <Grid item xs={12}>
-                      <Grid container>
-                        <Grid item xs={10}>
-                          <InputBoxWrapper
-                            type="number"
-                            id="quota_size"
-                            name="quota_size"
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              addBucketQuotaSize(e.target.value);
+                        label="Quota"
+                        value={quotaSize}
+                        required
+                        min="1"
+                        pattern={"[0-9]*"}
+                        overlayObject={
+                          <InputUnitMenu
+                            id={"quota_unit"}
+                            onUnitChange={(newValue) => {
+                              addBucketQuotaUnit(newValue);
                            }}
-                            label="Quota"
-                            value={quotaSize}
-                            required
-                            min="1"
+                            unitSelected={quotaUnit}
+                            unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                            disabled={false}
                          />
-                        </Grid>
-                        <Grid item xs={2}>
-                          <div style={{ width: 100 }}>
-                            <SelectWrapper
-                              label=""
-                              id="quota_unit"
-                              name="quota_unit"
-                              value={quotaUnit}
-                              onChange={(e: SelectChangeEvent<string>) => {
-                                addBucketQuotaUnit(e.target.value as string);
-                              }}
-                              options={factorForDropdown()}
-                            />
-                          </div>
-                        </Grid>
-                      </Grid>
+                        }
+                      />
                    </Grid>
                  </React.Fragment>
                )}
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
@@ -38,8 +38,9 @@ import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import { SelectorTypes } from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-import { getBytes, k8sfactorForDropdown } from "../../../../common/utils";
+import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import { ErrorResponseHandler } from "../../../../common/types";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface IBulkReplicationModal {
  open: boolean;
@@ -408,35 +409,31 @@ const AddBulkReplicationModal = ({
                </Grid>
                {replicationMode === "async" && (
                  <Grid item xs={12}>
-                    <div className={classes.multiContainer}>
-                      <div>
-                        <InputBoxWrapper
-                          type="number"
-                          id="bandwidth_scalar"
-                          name="bandwidth_scalar"
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            setBandwidthScalar(e.target.value as string);
+                    <InputBoxWrapper
+                      type="number"
+                      id="bandwidth_scalar"
+                      name="bandwidth_scalar"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (e.target.validity.valid) {
+                          setBandwidthScalar(e.target.value as string);
+                        }
+                      }}
+                      label="Bandwidth"
+                      value={bandwidthScalar}
+                      min="0"
+                      pattern={"[0-9]*"}
+                      overlayObject={
+                        <InputUnitMenu
+                          id={"quota_unit"}
+                          onUnitChange={(newValue) => {
+                            setBandwidthUnit(newValue);
                          }}
-                          label="Bandwidth"
-                          value={bandwidthScalar}
-                          min="0"
+                          unitSelected={bandwidthUnit}
+                          unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                          disabled={false}
                        />
-                      </div>
-                      <div className={classes.sizeFactorContainer}>
-                        <SelectWrapper
-                          label={"Unit"}
-                          id="bandwidth_unit"
-                          name="bandwidth_unit"
-                          value={bandwidthUnit}
-                          onChange={(e: SelectChangeEvent<string>) => {
-                            setBandwidthUnit(e.target.value as string);
-                          }}
-                          options={k8sfactorForDropdown()}
-                        />
-                      </div>
-                    </div>
+                      }
+                    />
                  </Grid>
                )}
                <Grid item xs={12}>
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/InputUnitMenu/InputUnitMenu.tsx
@@ -71,6 +71,7 @@ const InputUnitMenu = ({
        onClick={handleClick}
        className={classes.buttonTrigger}
        disabled={disabled}
+        type={"button"}
      >
        {unitSelected}
      </button>
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
@@ -32,7 +32,7 @@ import {
  calculateDistribution,
  erasureCodeCalc,
  getBytes,
-  k8sfactorForDropdown,
+  k8sScalarUnitsExcluding,
  niceBytes,
 } from "../../../../../../common/utils";
 import { clearValidationError } from "../../../utils";
@@ -333,7 +333,7 @@ const TenantSize = ({
                  updateField("sizeFactor", newValue);
                }}
                unitSelected={sizeFactor}
-                unitsList={k8sfactorForDropdown()}
+                unitsList={k8sScalarUnitsExcluding(["Ki", "Mi"])}
                disabled={selectedStorageClass === ""}
              />
            }