refactor(create-forms): 🎉 update create forms

robolaunch · Oct 31, 2023 · 429db0b · 429db0b
1 parent 0ce13e2
commit 429db0b
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 26 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1684,6 +1684,14 @@ video {
   gap: 2.25rem;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .overflow-auto {
   overflow: auto;
 }

diff --git a/src/components/CFEnvCategories/CFEnvCategories.tsx b/src/components/CFEnvCategories/CFEnvCategories.tsx
@@ -78,10 +78,10 @@ export default function CFEnvCategories({
         >
           <div className="grid grid-cols-2 gap-2">
             {responseReadyEnvironments
-              .filter(
+              ?.filter(
                 (env: any) => env?.domainName === formik.values?.domainName,
               )
-              .map((environment: any, index: number) => (
+              ?.map((environment: any, index: number) => (
                 <CFGridButton
                   key={index}
                   selected={
@@ -115,7 +115,7 @@ export default function CFEnvCategories({
                       });
                   }}
                   text={
-                    <Fragment>
+                    <div className="flex flex-col gap-1 text-center">
                       <span>
                         {environment?.application?.name} v(
                         {environment?.application?.version})
@@ -125,7 +125,7 @@ export default function CFEnvCategories({
                         {environment?.devspace?.ubuntuDistro}{" "}
                         {environment?.devspace?.version}
                       </span>
-                    </Fragment>
+                    </div>
                   }
                 />
               ))}

diff --git a/src/components/CFGpuResourceRange/CFGpuResourceRange.tsx b/src/components/CFGpuResourceRange/CFGpuResourceRange.tsx
@@ -1,7 +1,9 @@
 import { IRobotStep1 } from "../../interfaces/robotInterfaces";
 import FormInputRange from "../FormInputRange/FormInputRange";
-import React, { Fragment, ReactElement } from "react";
+import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import { FormikProps } from "formik/dist/types";
+import useMain from "../../hooks/useMain";
+import { IGpuUsage } from "../../interfaces/instanceInferfaces";
 
 interface ICFGpuResourceRange {
   formik: FormikProps<IRobotStep1>;
@@ -12,15 +14,32 @@ export default function CFGpuResourceRange({
   formik,
   disabled,
 }: ICFGpuResourceRange): ReactElement {
+  const [selectedGpu, setSelectedGpu] = useState<IGpuUsage | null>();
+  const { selectedState } = useMain();
+
+  useEffect(() => {
+    setSelectedGpu(
+      selectedState?.instance?.cloudInstanceResource?.gpuUsage?.filter(
+        (gpu: IGpuUsage) =>
+          gpu.resourceName === formik.values.ideGpuResourceType,
+      )[0] || null,
+    );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formik.values.ideGpuResourceType]);
+
   return (
     <Fragment>
       <FormInputRange
-        label="GPU Resource:"
+        label={`GPU Resource (${formik.values.ideGpuResource} Core):`}
         tip="GPU Resource"
         dataTut="create-environment-gpu-resource"
         InputProps={formik.getFieldProps("ideGpuResource")}
         min={1}
-        max={32}
+        max={
+          Number(selectedGpu?.capacity) - Number(selectedGpu?.allocated) - 1 ||
+          1
+        }
         disabled={formik.isSubmitting || disabled}
       />
     </Fragment>

diff --git a/src/components/CFGridButton/CFGridButton.tsx b/src/components/CFGridButton/CFGridButton.tsx
@@ -1,23 +1,20 @@
 import React, { ReactElement } from "react";
 
 interface ICFGridButton {
-  key: number;
   selected: boolean;
   disabled: boolean;
   text: string | ReactElement;
   onClick: () => void;
 }
 
 export default function CFGridButton({
-  key,
   selected,
   disabled,
   text,
   onClick,
 }: ICFGridButton): ReactElement {
   return (
     <div
-      key={key}
       className={`transition-300 flex items-center justify-center rounded border-2 px-1 py-3 text-xs capitalize text-layer-dark-700 hover:scale-95
         ${selected && "border-layer-primary-600 shadow"}
         ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}

diff --git a/src/components/CFVDICount/CFVDICount.tsx b/src/components/CFVDICount/CFVDICount.tsx
@@ -1,8 +1,7 @@
-import useMain from "../../hooks/useMain";
 import { IRobotStep1 } from "../../interfaces/robotInterfaces";
 import FormInputRange from "../FormInputRange/FormInputRange";
 import { FormikProps } from "formik/dist/types";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect } from "react";
 
 interface ICFVDICount {
   formik: FormikProps<IRobotStep1>;
@@ -13,20 +12,16 @@ export default function CFVDICount({
   formik,
   disabled,
 }: ICFVDICount): ReactElement {
-  const { selectedState } = useMain();
-
-  const [maxRange, setMaxRange] = useState<number>(1);
-
   useEffect(() => {}, [formik.values.remoteDesktop.sessionCount]);
 
   return (
     <FormInputRange
-      label="VDI: Session Count:"
+      label={`VDI Session Count (${formik.values.remoteDesktop.sessionCount} Sessions):`}
       tip="Session Count is the number of simultaneous remote desktop sessions that can be created for the robot/application. Each session is independent of the other, meaning that each session can be used by a different user. The session count is expandable, meaning that you can increase the session count at any time."
       dataTut="create-environment-vdi-session-count"
       InputProps={formik.getFieldProps("remoteDesktop.sessionCount")}
-      min={1}
-      max={maxRange}
+      min={2}
+      max={10}
       disabled={formik.isSubmitting || disabled}
     />
   );

diff --git a/src/components/CreateForms/CreateEnvironmentFormStep1.tsx b/src/components/CreateForms/CreateEnvironmentFormStep1.tsx
@@ -39,10 +39,12 @@ export default function CreateEnvironmentFormStep1({
     onSubmit: async () => {
       formik.setSubmitting(true);
 
-      !formik.values.configureWorkspace && createEnvironment(true);
-
-      formik.setSubmitting(false);
-      handleCreateRobotNextStep();
+      if (!formik.values.configureWorkspace) {
+        createEnvironment(true);
+      } else {
+        formik.setSubmitting(false);
+        handleCreateRobotNextStep();
+      }
     },
   });
 

diff --git a/src/components/CreateRobotFormPortSetter/CreateRobotFormPortSetter.tsx b/src/components/CreateRobotFormPortSetter/CreateRobotFormPortSetter.tsx
@@ -55,7 +55,7 @@ export default function PortSetter({
           <InfoTip content="Type a ports with name." />
         </div>
         <div className="flex flex-col">
-          {formik.values?.[`${type}CustomPorts`].map(
+          {formik.values?.[`${type}CustomPorts`]?.map(
             (_: any, index: number) => {
               return (
                 <CreateRobotFormPortInput
@@ -75,7 +75,7 @@ export default function PortSetter({
         onClick={async () => {
           await formik.setFieldValue(
             `${type}CustomPorts`,
-            formik.values?.[`${type}CustomPorts`].concat({
+            formik.values?.[`${type}CustomPorts`]?.concat({
               name: "",
               port: undefined,
               backendPort: await getPort(),

diff --git a/src/interfaces/instanceInferfaces.ts b/src/interfaces/instanceInferfaces.ts
@@ -5,6 +5,35 @@ export interface IInstance {
   instanceState: string;
   instanceType: string;
   instanceCloudState: string;
-  cloudInstanceResource: any;
+  cloudInstanceResource: IInstanceResource;
   physicalInstanceResource: any;
 }
+
+export interface IInstanceResource {
+  architecture: string;
+  cpuTotal: number;
+  cpuUsage: number;
+  gpuUsage: IGpuUsage[];
+  kernelVersion: string;
+  kubernetesVersion: string;
+  memoryTotal: number;
+  memoryUsage: number;
+  networkUsage: INetworkUsage[];
+  operatingSystem: string;
+  operatingSystemDistro: string;
+  storageTotal: number;
+  storageUsage: number;
+  virtualGpu: number;
+}
+
+export interface IGpuUsage {
+  allocated: string;
+  capacity: string;
+  resourceName: string;
+}
+
+export interface INetworkUsage {
+  interfaceName: string;
+  trafficIn: string;
+  trafficOut: string;
+}