AWS Marketplace Integration Updates (#1740)

Makes the create tenant for MK AWS updated with new recommendations
Fixes Back Link icon alignment and color
Adds a helpbox for MK AWS

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Author: dvaldivia

portal-ui/src/common/BackLink.tsx

@@ -19,43 +19,47 @@ import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { BackIcon } from "../icons";
+import { BackSettingsIcon } from "../icons";
 import { Box } from "@mui/material";
 
 const styles = (theme: Theme) =>
   createStyles({
     link: {
-      display: "inline-block",
-      alignItems: "center",
-      justifyContent: "center",
+      display: "block",
       textDecoration: "none",
-      maxWidth: "40px",
       "&:active": {
         color: theme.palette.primary.light,
       },
     },
-    icon: {
-      marginRight: "11px",
+    iconBox: {
       display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "35px",
-      width: "35px",
-      borderRadius: "2px",
+      flexDirection: "row",
       "&:hover": {
         background: "rgba(234,237,238)",
       },
-      "& svg.min-icon": {
-        width: "18px",
-        height: "12px",
+      height: "30px",
+      paddingBottom: 4,
+      paddingTop: 8,
+      paddingRight: 16,
+      paddingLeft: 0,
+      borderRadius: 4,
+    },
+    icon: {
+      lineHeight: 1,
+      marginRight: "14px",
+      alignItems: "center",
+      width: "22px",
+      "& .min-icon": {
+        color: theme.palette.primary.light,
+        width: "16px",
+        height: "16px",
       },
     },
     label: {
-      display: "flex",
+      lineHeight: 1,
       alignItems: "center",
-      height: "35px",
-      padding: "0 0px 0 5px",
-      fontSize: "18px",
+      paddingTop: 1,
+      fontSize: "14px",
       fontWeight: 600,
       color: theme.palette.primary.light,
     },
@@ -92,11 +96,13 @@ const BackLink = ({
           }
         }}
       >
-        <div className={classes.icon}>
-          <BackIcon />
+        <div className={classes.iconBox}>
+          <div className={classes.icon}>
+            <BackSettingsIcon />
+          </div>
+          <div className={classes.label}>{label}</div>
         </div>
       </Link>
-      <div className={classes.label}>{label}</div>
     </Box>
   );
 };

portal-ui/src/common/utils.ts

@@ -22,6 +22,12 @@ import {
   IStorageFactors,
 } from "./types";
 import { IPool } from "../screens/Console/Tenants/ListTenants/types";
+import {
+  IMkEnvs,
+  IntegrationConfiguration,
+  mkPanelConfigurations,
+} from "../screens/Console/Tenants/AddTenant/Steps/TenantResources/utils";
+import get from "lodash/get";
 
 const minStReq = 1073741824; // Minimal Space required for MinIO
 const minMemReq = 2147483648; // Minimal Memory required for MinIO in bytes
@@ -114,25 +120,34 @@ export const k8sScalarUnitsExcluding = (exclude?: string[]) => {
     });
 };
 
-//getBytes, converts from a value and a unit from units array to bytes
+//getBytes, converts from a value and a unit from units array to bytes as a string
 export const getBytes = (
   value: string,
   unit: string,
   fromk8s: boolean = false
-) => {
+): string => {
+  return getBytesNumber(value, unit, fromk8s).toString(10);
+};
+
+//getBytesNumber, converts from a value and a unit from units array to bytes
+export const getBytesNumber = (
+  value: string,
+  unit: string,
+  fromk8s: boolean = false
+): number => {
   const vl: number = parseFloat(value);
 
   const unitsTake = fromk8s ? k8sCalcUnits : units;
 
   const powFactor = unitsTake.findIndex((element) => element === unit);
 
   if (powFactor === -1) {
-    return "0";
+    return 0;
   }
   const factor = Math.pow(1024, powFactor);
   const total = vl * factor;
 
-  return total.toString(10);
+  return total;
 };
 
 //getTotalSize gets the total size of a value & unit
@@ -218,7 +233,9 @@ export const calculateDistribution = (
   capacityToUse: ICapacity,
   forcedNodes: number = 0,
   limitSize: number = 0,
-  drivesPerServer: number = 0
+  drivesPerServer: number = 0,
+  marketplaceIntegration?: IMkEnvs,
+  selectedStorageType?: string
 ): IStorageDistribution => {
   const requestedSizeBytes = getBytes(
     capacityToUse.value,
@@ -250,7 +267,9 @@ export const calculateDistribution = (
     requestedSizeBytes,
     forcedNodes,
     limitSize,
-    drivesPerServer
+    drivesPerServer,
+    marketplaceIntegration,
+    selectedStorageType
   );
 
   return numberOfNodes;
@@ -260,7 +279,9 @@ const calculateStorage = (
   requestedBytes: string,
   forcedNodes: number,
   limitSize: number,
-  drivesPerServer: number
+  drivesPerServer: number,
+  marketplaceIntegration?: IMkEnvs,
+  selectedStorageType?: string
 ): IStorageDistribution => {
   // Size validation
   const intReqBytes = parseInt(requestedBytes, 10);
@@ -272,7 +293,9 @@ const calculateStorage = (
     intReqBytes,
     maxDiskSize,
     limitSize,
-    drivesPerServer
+    drivesPerServer,
+    marketplaceIntegration,
+    selectedStorageType
   );
 };
 
@@ -281,7 +304,9 @@ const structureCalc = (
   desiredCapacity: number,
   maxDiskSize: number,
   maxClusterSize: number,
-  disksPerNode: number = 0
+  disksPerNode: number = 0,
+  marketplaceIntegration?: IMkEnvs,
+  selectedStorageType?: string
 ): IStorageDistribution => {
   if (
     isNaN(nodes) ||
@@ -350,6 +375,48 @@ const structureCalc = (
       pvSize: 0,
     }; // Cannot allocate this volume size
   }
+  // validate for integrations
+  if (marketplaceIntegration !== undefined) {
+    const setConfigs = mkPanelConfigurations[marketplaceIntegration];
+    const keyCount = Object.keys(setConfigs).length;
+
+    //Configuration is filled
+    if (keyCount > 0) {
+      const configs: IntegrationConfiguration[] = get(
+        setConfigs,
+        "configurations",
+        []
+      );
+      const mainSelection = configs.find(
+        (item) => item.typeSelection === selectedStorageType
+      );
+
+      if (mainSelection !== undefined && mainSelection.minimumVolumeSize) {
+        const minimumPvSize = getBytesNumber(
+          mainSelection.minimumVolumeSize?.driveSize,
+          mainSelection.minimumVolumeSize?.sizeUnit,
+          true
+        );
+        const storageTypeLabel = setConfigs.variantSelectorValues!.find(
+          (item) => item.value === selectedStorageType
+        );
+
+        if (persistentVolumeSize < minimumPvSize) {
+          return {
+            error: `For the ${
+              storageTypeLabel!.label
+            } storage type the mininum volume size is ${
+              mainSelection.minimumVolumeSize.driveSize
+            }${mainSelection.minimumVolumeSize.sizeUnit}`,
+            nodes: 0,
+            persistentVolumes: 0,
+            disks: 0,
+            pvSize: 0,
+          };
+        }
+      }
+    }
+  }
 
   return {
     error: "",

portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx

@@ -55,6 +55,12 @@ import BackLink from "../../../../common/BackLink";
 import TenantResources from "./Steps/TenantResources/TenantResources";
 import ConfigLogSearch from "./Steps/ConfigLogSearch";
 import ConfigPrometheus from "./Steps/ConfigPrometheus";
+import {
+  IMkEnvs,
+  resourcesConfigurations,
+} from "./Steps/TenantResources/utils";
+import HelpBox from "../../../../common/HelpBox";
+import { StorageIcon } from "../../../../icons";
 
 interface IAddTenantProps {
   setErrorSnackMessage: typeof setErrorSnackMessage;
@@ -66,6 +72,7 @@ interface IAddTenantProps {
   namespace: string;
   validPages: string[];
   classes: any;
+  features?: string[];
 }
 
 const styles = (theme: Theme) =>
@@ -87,6 +94,7 @@ const AddTenant = ({
   validPages,
   setErrorSnackMessage,
   resetAddTenantForm,
+  features,
 }: IAddTenantProps) => {
   // Modals
   const [showNewCredentials, setShowNewCredentials] = useState<boolean>(false);
@@ -95,6 +103,27 @@ const AddTenant = ({
 
   // Fields
   const [addSending, setAddSending] = useState<boolean>(false);
+  const [formRender, setFormRender] = useState<IMkEnvs | null>(null);
+
+  useEffect(() => {
+    let setConfiguration = IMkEnvs.default;
+
+    if (features && features.length !== 0) {
+      const possibleVariables = Object.keys(resourcesConfigurations);
+
+      possibleVariables.forEach((element) => {
+        if (features.includes(element)) {
+          setConfiguration = get(
+            resourcesConfigurations,
+            element,
+            IMkEnvs.default
+          );
+        }
+      });
+    }
+
+    setFormRender(setConfiguration);
+  }, [features]);
 
   /* Send Information to backend */
   useEffect(() => {
@@ -764,20 +793,47 @@ const AddTenant = ({
         />
       )}
       <PageHeader label={"Create New Tenant"} />
-      <BackLink
-        to={"/tenants"}
-        label={"Tenant List"}
-        executeOnClick={resetAddTenantForm}
-      />
+
       <PageLayout>
         {addSending && (
           <Grid item xs={12}>
             <LinearProgress />
           </Grid>
         )}
+
+        <Grid item xs={12}>
+          <BackLink
+            to={"/tenants"}
+            label={"Tenant List"}
+            executeOnClick={resetAddTenantForm}
+          />
+        </Grid>
         <Grid item xs={12} className={classes.pageBox}>
           <GenericWizard wizardSteps={filteredWizardSteps} />
         </Grid>
+        {formRender === IMkEnvs.aws && (
+          <Grid item xs={12} style={{ marginTop: 16 }}>
+            <HelpBox
+              title={"EBS Volume Configuration."}
+              iconComponent={<StorageIcon />}
+              help={
+                <Fragment>
+                  <b>Performance Optimized</b>: Uses the <i>gp3</i> EBS storage
+                  class class configured at 1,000Mi/s throughput and 16,000
+                  IOPS, however the minimum volume size for this type of EBS
+                  volume is <b>32Gi</b>.
+                  <br />
+                  <br />
+                  <b>Storage Optimized</b>: Uses the <i>sc1</i> EBS storage
+                  class, however the minimum volume size for this type of EBS
+                  volume is &nbsp;
+                  <b>16Ti</b> to unlock their maximum throughput speed of
+                  250Mi/s.
+                </Fragment>
+              }
+            />
+          </Grid>
+        )}
       </PageLayout>
     </Fragment>
   );
@@ -790,6 +846,7 @@ const mapState = (state: AppState) => ({
   certificates: state.tenants.createTenant.certificates,
   selectedStorageClass:
     state.tenants.createTenant.fields.nameTenant.selectedStorageClass,
+  features: state.console.session.features,
 });
 
 const connector = connect(mapState, {