Add contextual unit selector for tenant add. (#1614)

* Add contextual unit selector for tenant add. Additionally Fix bug on Get Tenant Monitoring and Set tenant Monitoring Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> * Fix comment Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2022-02-22 12:12:45 -08:00
parent b130c89297
commit 8dc000c13b
6 changed files with 141 additions and 51 deletions
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -36,6 +36,7 @@ import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/
 import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import { ISecurityContext } from "../../types";
+import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface IConfigureProps {
  updateAddField: typeof updateAddField;
@@ -692,7 +693,16 @@ const Configure = ({
                  updateField("logSearchVolumeSize", e.target.value);
                  cleanValidation("log_search_volume_size");
                }}
-                label="Storage Size [Gi]"
+                label="Storage Size"
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
                value={logSearchVolumeSize}
                required
                error={validationErrors["log_search_volume_size"] || ""}
@@ -944,7 +954,16 @@ const Configure = ({
                  updateField("prometheusVolumeSize", e.target.value);
                  cleanValidation("prometheus_volume_size");
                }}
-                label="Storage Size [Gi]"
+                label="Storage Size"
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
                value={prometheusVolumeSize}
                required
                error={validationErrors["prometheus_volume_size"] || ""}
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
@@ -44,6 +44,7 @@ import api from "../../../../../../common/api";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import TenantSizeResources from "./TenantSizeResources";
+import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface ITenantSizeProps {
  classes: any;
@@ -310,39 +311,33 @@ const TenantSize = ({
        />
      </Grid>
      <Grid item xs={12}>
-        <div className={classes.multiContainer}>
-          <div className={classes.formFieldRow}>
-            <div className={classes.compositeFieldContainer}>
-              <InputBoxWrapper
-                type="number"
-                id="volume_size"
-                name="volume_size"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  updateField("volumeSize", e.target.value);
-                  cleanValidation("volume_size");
+        <div className={classes.formFieldRow}>
+          <InputBoxWrapper
+            type="number"
+            id="volume_size"
+            name="volume_size"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              updateField("volumeSize", e.target.value);
+              cleanValidation("volume_size");
+            }}
+            label="Total Size"
+            value={volumeSize}
+            disabled={selectedStorageClass === ""}
+            required
+            error={validationErrors["volume_size"] || ""}
+            min="0"
+            overlayObject={
+              <InputUnitMenu
+                id={"size-unit"}
+                onUnitChange={(newValue) => {
+                  updateField("sizeFactor", newValue);
                }}
-                label="Total Size"
-                value={volumeSize}
+                unitSelected={sizeFactor}
+                unitsList={k8sfactorForDropdown()}
                disabled={selectedStorageClass === ""}
-                required
-                error={validationErrors["volume_size"] || ""}
-                min="0"
              />
-              <div className={classes.compositeAddOn}>
-                <SelectWrapper
-                  label={""}
-                  id="size_factor"
-                  name="size_factor"
-                  value={sizeFactor}
-                  disabled={selectedStorageClass === ""}
-                  onChange={(e: SelectChangeEvent<string>) => {
-                    updateField("sizeFactor", e.target.value as string);
-                  }}
-                  options={k8sfactorForDropdown()}
-                />
-              </div>
-            </div>
-          </div>
+            }
+          />
        </div>
      </Grid>

--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
@@ -34,6 +34,7 @@ import api from "../../../../../../common/api";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { floor } from "lodash";
+import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface ITenantSizeResourcesProps {
  classes: any;
@@ -275,7 +276,16 @@ const TenantSizeResources = ({
            }
            updateField("resourcesMemoryRequest", e.target.value);
          }}
-          label="Memory Request [Gi]"
+          label="Memory Request"
+          overlayObject={
+            <InputUnitMenu
+              id={"size-unit"}
+              onUnitChange={() => {}}
+              unitSelected={"Gi"}
+              unitsList={[{ label: "Gi", value: "Gi" }]}
+              disabled={true}
+            />
+          }
          value={resourcesMemoryRequest}
          disabled={selectedStorageClass === ""}
          error={resourcesMemoryRequestError}
@@ -351,7 +361,16 @@ const TenantSizeResources = ({
                }
                updateField("resourcesMemoryLimit", e.target.value);
              }}
-              label="Memory Limit [Gi]"
+              label="Memory Limit"
+              overlayObject={
+                <InputUnitMenu
+                  id={"size-unit"}
+                  onUnitChange={() => {}}
+                  unitSelected={"Gi"}
+                  unitsList={[{ label: "Gi", value: "Gi" }]}
+                  disabled={true}
+                />
+              }
              value={resourcesMemoryLimit}
              disabled={selectedStorageClass === ""}
              error={resourcesMemoryLimitError}
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantLogsModal.tsx
@@ -37,6 +37,7 @@ import {
 } from "../../../../utils/validationFunctions";
 import { clearValidationError } from "../utils";
 import { setModalErrorSnackMessage } from "../../../../actions";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface IEditTenantLogsProps {
  tenant: ITenant;
@@ -361,8 +362,8 @@ const EditTenantLogsModal = ({
            <Grid item xs={12} className={classes.formFieldRow}>
              <InputBoxWrapper
                id={`diskCapacityGB`}
-                label={"Disk Capacity (GB)"}
-                placeholder={"Disk Capacity (GB)"}
+                label={"Disk Capacity"}
+                placeholder={"Disk Capacity"}
                name={`diskCapacityGB`}
                value={newDiskCapacityGB as any as string}
                onChange={(e) => {
@@ -371,6 +372,15 @@ const EditTenantLogsModal = ({
                }}
                key={`diskCapacityGB`}
                error={validationErrors[`diskCapacityGB`] || ""}
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
              />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>
@@ -417,6 +427,15 @@ const EditTenantLogsModal = ({
                }}
                key={`memRequest`}
                error={validationErrors[`memRequest`] || ""}
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
              />
            </Grid>

@@ -511,6 +530,15 @@ const EditTenantLogsModal = ({
                }}
                key={`dbMemRequest`}
                error={validationErrors[`dbMemRequest`] || ""}
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
              />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringModal.tsx
@@ -20,6 +20,7 @@ import {
  IValidation,
 } from "../../../../utils/validationFunctions";
 import { setModalErrorSnackMessage } from "../../../../actions";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";

 interface IEditTenantMonitoringProps {
  tenant: ITenant;
@@ -88,7 +89,9 @@ const EditTenantMonitoringModal = ({
  );
  const [newCPURequest, setNewCPURequest] = useState<string>(cpuRequest);
  const [newMemRequest, setNewMemRequest] = useState<string>(
-    Math.floor(parseInt(memRequest, 10) / 1000000000).toString()
+    memRequest
+      ? Math.floor(parseInt(memRequest, 10) / 1000000000).toString()
+      : ""
  );
  const [newServiceAccountName, setNewServiceAccountName] =
    useState<string>(serviceAccountName);
@@ -285,8 +288,8 @@ const EditTenantMonitoringModal = ({
            <Grid item xs={12} className={classes.formFieldRow}>
              <InputBoxWrapper
                id={`diskCapacityGB`}
-                label={"Disk Capacity (GB)"}
-                placeholder={"Disk Capacity (GB)"}
+                label={"Disk Capacity"}
+                placeholder={"Disk Capacity"}
                name={`diskCapacityGB`}
                value={newDiskCapacityGB}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -294,6 +297,15 @@ const EditTenantMonitoringModal = ({
                }}
                key={`diskCapacityGB`}
                error={validationErrors[`diskCapacityGB`] || ""}
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
              />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>
@@ -313,15 +325,27 @@ const EditTenantMonitoringModal = ({
            <Grid item xs={12} className={classes.formFieldRow}>
              <InputBoxWrapper
                id={`memRequest`}
-                label={"Memory Request (Gi)"}
+                label={"Memory Request"}
                placeholder={"Memory request"}
                name={`memRequest`}
                value={newMemRequest}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setNewMemRequest(event.target.value);
+                  if (event.target.validity.valid) {
+                    setNewMemRequest(event.target.value);
+                  }
                }}
+                pattern={"[0-9]*"}
                key={`memRequest`}
                error={validationErrors[`memRequest`] || ""}
+                overlayObject={
+                  <InputUnitMenu
+                    id={"size-unit"}
+                    onUnitChange={() => {}}
+                    unitSelected={"Gi"}
+                    unitsList={[{ label: "Gi", value: "Gi" }]}
+                    disabled={true}
+                  />
+                }
              />
            </Grid>
            <Grid item xs={12} className={classes.formFieldRow}>