Add support for resource elements (#1214)

vmware-tanzu · Oct 14, 2019 · 69a93c7 · 69a93c7
1 parent e6247b1
commit 69a93c7
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/dashboard/src/components/DeploymentForm/BasicDeploymentForm/BasicDeploymentForm.tsx b/dashboard/src/components/DeploymentForm/BasicDeploymentForm/BasicDeploymentForm.tsx
@@ -2,7 +2,14 @@ import * as React from "react";
 import { IBasicFormParam } from "shared/types";
 import TextParam from "./TextParam";
 
-import { DISK_SIZE, EXTERNAL_DB, USE_SELF_HOSTED_DB } from "../../../shared/schema";
+import {
+  CPU_REQUEST,
+  DISK_SIZE,
+  EXTERNAL_DB,
+  MEMORY_REQUEST,
+  RESOURCES,
+  USE_SELF_HOSTED_DB,
+} from "../../../shared/schema";
 import "./BasicDeploymentForm.css";
 import BooleanParam from "./BooleanParam";
 import SliderParam from "./SliderParam";
@@ -69,6 +76,46 @@ class BasicDeploymentForm extends React.Component<IBasicDeploymentFormProps> {
             unit="Gi"
           />
         );
+      case RESOURCES:
+        return (
+          <Subsection
+            label={param.title || "Application resources"}
+            handleValuesChange={this.props.handleValuesChange}
+            appValues={this.props.appValues}
+            renderParam={this.renderParam}
+            key={id}
+            name={name}
+            param={param}
+          />
+        );
+      case MEMORY_REQUEST:
+        return (
+          <SliderParam
+            label={param.title || "Memory Request"}
+            handleBasicFormParamChange={handleBasicFormParamChange}
+            key={id}
+            id={id}
+            name={name}
+            param={param}
+            min={10}
+            max={2048}
+            unit="Mi"
+          />
+        );
+      case CPU_REQUEST:
+        return (
+          <SliderParam
+            label={param.title || "CPU Request"}
+            handleBasicFormParamChange={handleBasicFormParamChange}
+            key={id}
+            id={id}
+            name={name}
+            param={param}
+            min={10}
+            max={2000}
+            unit="m"
+          />
+        );
       default:
         switch (param.type) {
           case "boolean":

diff --git a/dashboard/src/components/DeploymentForm/BasicDeploymentForm/Subsection.test.tsx b/dashboard/src/components/DeploymentForm/BasicDeploymentForm/Subsection.test.tsx
@@ -32,6 +32,7 @@ const defaultProps = {
     },
     path: "externalDatabase",
     title: "External Database Details",
+    description: "description of the param",
     type: "object",
   } as IBasicFormParam,
   handleBasicFormParamChange: jest.fn(),
@@ -61,6 +62,8 @@ it("should hide/show the database params if the self-hosted database is enabled/
         useSelfHostedDatabase: { path: "mariadb.enabled", value: false, type: "boolean" },
       },
     },
+    enablerChildrenParam: "useSelfHostedDatabase",
+    enablerCondition: false,
   });
   wrapper.update();
   expect(wrapper.find("div").findWhere(d => d.prop("hidden"))).not.toExist();

diff --git a/dashboard/src/components/DeploymentForm/BasicDeploymentForm/Subsection.tsx b/dashboard/src/components/DeploymentForm/BasicDeploymentForm/Subsection.tsx
@@ -8,8 +8,8 @@ export interface ISubsectionProps {
   label: string;
   param: IBasicFormParam;
   name: string;
-  enablerChildrenParam: string;
-  enablerCondition: boolean;
+  enablerChildrenParam?: string;
+  enablerCondition?: boolean;
   handleValuesChange: (value: string) => void;
   renderParam: (
     name: string,
@@ -28,7 +28,7 @@ class Subsection extends React.Component<ISubsectionProps> {
     const { label, param, name, enablerChildrenParam, enablerCondition } = this.props;
     return (
       <div className="subsection margin-v-normal">
-        {param.children && param.children[enablerChildrenParam] && (
+        {param.children && enablerChildrenParam && param.children[enablerChildrenParam] && (
           <BooleanParam
             label={param.children[enablerChildrenParam].title || enablerChildrenParam}
             handleBasicFormParamChange={this.handleChildrenParamChange}
@@ -40,11 +40,21 @@ class Subsection extends React.Component<ISubsectionProps> {
         <div
           hidden={
             param.children &&
+            !!enablerChildrenParam &&
             param.children[enablerChildrenParam] &&
             param.children[enablerChildrenParam].value !== enablerCondition
           }
         >
-          <div className="margin-v-normal">{label}</div>
+          <div className="margin-v-normal">
+            {label}
+            {param.description && (
+              <>
+                <br />
+                <span className="description">{param.description}</span>
+              </>
+            )}
+          </div>
+
           {param.children &&
             Object.keys(param.children)
               .filter(p => p !== enablerChildrenParam)

diff --git a/.../src/components/DeploymentForm/BasicDeploymentForm/__snapshots__/Subsection.test.tsx.snap b/.../src/components/DeploymentForm/BasicDeploymentForm/__snapshots__/Subsection.test.tsx.snap
@@ -25,6 +25,12 @@ exports[`should render a external database section 1`] = `
       className="margin-v-normal"
     >
       Enable an external database
+      <br />
+      <span
+        className="description"
+      >
+        description of the param
+      </span>
     </div>
   </div>
 </div>

diff --git a/dashboard/src/shared/schema.ts b/dashboard/src/shared/schema.ts
@@ -15,6 +15,9 @@ nullOptions.nullStr = "";
 export const EXTERNAL_DB = "externalDatabase";
 export const USE_SELF_HOSTED_DB = "useSelfHostedDatabase";
 export const DISK_SIZE = "diskSize";
+export const MEMORY_REQUEST = "memoryRequest";
+export const CPU_REQUEST = "cpuRequest";
+export const RESOURCES = "resources";
 
 // retrieveBasicFormParams iterates over a JSON Schema properties looking for `form` keys
 // It uses the raw yaml to setup default values.