Implemented calculation for zone size in zone modal (#137)

portal-ui/src/common/utils.ts

@@ -59,9 +59,28 @@ export const timeFromDate = (d: Date) => {
 };
 
 // units to be used in a dropdown
-
 export const factorForDropdown = () => {
   return units.map((unit) => {
     return { label: unit, value: unit };
   });
 };
+
+//getBytes, converts from a value and a unit from units array to bytes
+export const getBytes = (value: string, unit: string) => {
+  const vl: number = parseFloat(value);
+  const powFactor = units.findIndex((element) => element === unit);
+
+  if(powFactor == -1) {
+    return 0;
+  }
+  const factor = Math.pow(1024, powFactor);
+  const total = vl * factor;
+
+  return total.toString(10);
+};
+
+//getTotalSize gets the total size of a value & unit
+export const getTotalSize = (value: string, unit: string) => {
+  const bytes = getBytes(value, unit).toString(10);
+  return niceBytes(bytes);
+};

portal-ui/src/screens/Console/Clusters/ClusterDetails/AddZoneModal.tsx

@@ -5,7 +5,7 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import Grid from "@material-ui/core/Grid";
-import { factorForDropdown } from "../../../../common/utils";
+import { factorForDropdown, getTotalSize } from "../../../../common/utils";
 import { Button, LinearProgress } from "@material-ui/core";
 
 interface IAddZoneProps {
@@ -30,6 +30,29 @@ const styles = (theme: Theme) =>
     sizeFactorContainer: {
       marginLeft: 8,
     },
+    bottomContainer: {
+      display: "flex",
+      flexGrow: 1,
+      alignItems: "center",
+      "& div": {
+        flexGrow: 1,
+        width: "100%",
+      },
+    },
+    factorElements: {
+      display: "flex",
+      justifyContent: "flex-start",
+    },
+    sizeNumber: {
+      fontSize: 35,
+      fontWeight: 700,
+      textAlign: "center",
+    },
+    sizeDescription: {
+      fontSize: 14,
+      color: "#777",
+      textAlign: "center",
+    },
     ...modalBasic,
   });
 
@@ -45,6 +68,11 @@ const AddZoneModal = ({
   const [sizeFactor, setSizeFactor] = useState<string>("GiB");
   const [volumeConfiguration, setVolumeConfig] = useState<string>("");
   const [storageClass, setStorageClass] = useState<string>("");
+
+  const instanceCapacity: number =
+    parseFloat(volumeConfiguration) * volumesPerInstance;
+  const totalCapacity: number = instanceCapacity * numberOfInstances;
+
   return (
     <ModalWrapper
       onClose={() => onCloseZoneAndReload(false)}
@@ -133,15 +161,31 @@ const AddZoneModal = ({
               value={storageClass}
             />
           </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+          <Grid item xs={12} className={classes.bottomContainer}>
-            <Button
+            <div className={classes.factorElements}>
-              type="submit"
+              <div>
-              variant="contained"
+                <div className={classes.sizeNumber}>
-              color="primary"
+                  {getTotalSize(instanceCapacity.toString(10), sizeFactor)}
-              disabled={addSending}
+                </div>
-            >
+                <div className={classes.sizeDescription}>Instance Capacity</div>
-              Save
+              </div>
-            </Button>
+              <div>
+                <div className={classes.sizeNumber}>
+                  {getTotalSize(totalCapacity.toString(10), sizeFactor)}
+                </div>
+                <div className={classes.sizeDescription}>Total Capacity</div>
+              </div>
+            </div>
+            <div className={classes.buttonContainer}>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={addSending}
+              >
+                Save
+              </Button>
+            </div>
           </Grid>
           {addSending && (
             <Grid item xs={12}>