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>

operatorapi/operator_tenants.go

@@ -238,7 +238,6 @@ func registerTenantHandlers(api *operations.OperatorAPI) {
 
 	//Get tenant monitoring info
 	api.OperatorAPIGetTenantMonitoringHandler = operator_api.GetTenantMonitoringHandlerFunc(func(params operator_api.GetTenantMonitoringParams, session *models.Principal) middleware.Responder {
-
 		payload, err := getTenantMonitoringResponse(session, params)
 		if err != nil {
 			return operator_api.NewGetTenantMonitoringDefault(int(err.Code)).WithPayload(err)
@@ -2221,12 +2220,16 @@ func getTenantMonitoringResponse(session *models.Principal, params operator_api.
 	var requestedMem string
 
 	if minInst.Spec.Prometheus.Resources.Requests != nil {
-		requestedCPUQ := minInst.Spec.Prometheus.Resources.Requests["cpu"]
+		// Parse cpu request
-		requestedCPU = strconv.FormatInt(requestedCPUQ.Value(), 10)
+		if requestedCPUQ, ok := minInst.Spec.Prometheus.Resources.Requests["cpu"]; ok && requestedCPUQ.Value() != 0 {
-		requestedMemQ := minInst.Spec.Prometheus.Resources.Requests["memory"]
+			requestedCPU = strconv.FormatInt(requestedCPUQ.Value(), 10)
-		requestedMem = strconv.FormatInt(requestedMemQ.Value(), 10)
+			monitoringInfo.MonitoringCPURequest = requestedCPU
-		monitoringInfo.MonitoringCPURequest = requestedCPU
+		}
-		monitoringInfo.MonitoringMemRequest = requestedMem
+		// Parse memory request
+		if requestedMemQ, ok := minInst.Spec.Prometheus.Resources.Requests["memory"]; ok && requestedMemQ.Value() != 0 {
+			requestedMem = strconv.FormatInt(requestedMemQ.Value(), 10)
+			monitoringInfo.MonitoringMemRequest = requestedMem
+		}
 	}
 
 	if len(minInst.Spec.Prometheus.Labels) != 0 && minInst.Spec.Prometheus.Labels != nil {
@@ -2331,17 +2334,19 @@ func setTenantMonitoringResponse(session *models.Principal, params operator_api.
 	}
 
 	monitoringResourceRequest := make(corev1.ResourceList)
-	if &params.Data.MonitoringCPURequest != nil {
+	if params.Data.MonitoringCPURequest != "" {
-
 		cpuQuantity, err := resource.ParseQuantity(params.Data.MonitoringCPURequest)
 		if err != nil {
 			return false, prepareError(err)
 		}
+		monitoringResourceRequest["cpu"] = cpuQuantity
+	}
+
+	if params.Data.MonitoringMemRequest != "" {
 		memQuantity, err := resource.ParseQuantity(params.Data.MonitoringMemRequest)
 		if err != nil {
 			return false, prepareError(err)
 		}
-		monitoringResourceRequest["cpu"] = cpuQuantity
 		monitoringResourceRequest["memory"] = memQuantity
 	}
 

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"] || ""}

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.formFieldRow}>
+          <InputBoxWrapper
-            <div className={classes.compositeFieldContainer}>
+            type="number"
-              <InputBoxWrapper
+            id="volume_size"
-                type="number"
+            name="volume_size"
-                id="volume_size"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                name="volume_size"
+              updateField("volumeSize", e.target.value);
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              cleanValidation("volume_size");
-                  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"
+                unitSelected={sizeFactor}
-                value={volumeSize}
+                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>
 

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}

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)"}
+                label={"Disk Capacity"}
-                placeholder={"Disk Capacity (GB)"}
+                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}>

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)"}
+                label={"Disk Capacity"}
-                placeholder={"Disk Capacity (GB)"}
+                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}>