refactor(create-forms): 🎉 update create forms

robolaunch · Nov 1, 2023 · 3aae712 · 3aae712
1 parent 79f28f6
commit 3aae712
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 32 deletions.
diff --git a/src/components/CFEnvCategories/CFEnvCategories.tsx b/src/components/CFEnvCategories/CFEnvCategories.tsx
@@ -39,6 +39,15 @@ export default function CFEnvCategories({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formik?.values?.domainName, formik?.initialValues?.domainName]);
 
+  useEffect(() => {
+    formik?.values?.application?.name &&
+      formik.setValues({
+        ...formik.values,
+        ideGpuResource: 0,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formik?.values?.application?.name]);
+
   return (
     <Fragment>
       <CFInfoBar

diff --git a/src/components/CFGpuResourceRange/CFGpuResourceRange.tsx b/src/components/CFGpuResourceRange/CFGpuResourceRange.tsx
@@ -35,12 +35,14 @@ export default function CFGpuResourceRange({
         tip="GPU Resource"
         dataTut="create-environment-gpu-resource"
         InputProps={formik.getFieldProps("ideGpuResource")}
-        min={1}
+        min={0}
         max={
           Number(selectedGpu?.capacity) - Number(selectedGpu?.allocated) - 1 ||
           1
         }
         disabled={formik.isSubmitting || disabled}
+        error={formik.errors.ideGpuResource}
+        touched={true}
       />
     </Fragment>
   );

diff --git a/src/components/CFGridButton/CFGridButton.tsx b/src/components/CFGridButton/CFGridButton.tsx
@@ -15,9 +15,9 @@ export default function CFGridButton({
 }: ICFGridButton): ReactElement {
   return (
     <div
-      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
+      className={`transition-300 flex items-center justify-center rounded border-2 px-1 py-3 text-xs capitalize text-layer-dark-700 
         ${selected && "border-layer-primary-600 shadow"}
-        ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+        ${disabled ? "cursor-not-allowed" : "cursor-pointer hover:scale-95"}`}
       onClick={onClick}
     >
       {text}

diff --git a/src/components/CFInfoBar/CFInfoBar.tsx b/src/components/CFInfoBar/CFInfoBar.tsx
@@ -29,8 +29,8 @@ export default function CFInfoBar({
           <InfoTip content={tip} />
         </div>
         {children}
-        <InputError error={error} touched={touched} />
       </div>
+      <InputError error={error} touched={touched} />
     </div>
   );
 }
diff --git a/src/components/CirclePercentageBar/CirclePercentageBar.tsx b/src/components/CirclePercentageBar/CirclePercentageBar.tsx
@@ -9,7 +9,7 @@ interface ICirclePercentageBar {
 
 export default function CirclePercentageBar({
   percentage,
-  size = 60,
+  size = 50,
   title = "",
 }: ICirclePercentageBar): ReactElement {
   const strokeWidth = 4; // Border kalınlığı
@@ -24,7 +24,7 @@ export default function CirclePercentageBar({
       className="flex flex-col items-center gap-1"
       style={{ textAlign: "center" }}
     >
-      {!percentage ? (
+      {typeof percentage !== "number" ? (
         <ContentLoader
           width={100}
           height={120}

diff --git a/src/components/CreateForms/CreateEnvironmentFormStep1.tsx b/src/components/CreateForms/CreateEnvironmentFormStep1.tsx
@@ -113,7 +113,7 @@ export default function CreateEnvironmentFormStep1({
       </CFSection>
 
       <CFSection>
-        <CFStorageRange formik={formik} disabled={isImportRobot} />
+        <CFGpuResourceRange formik={formik} disabled={isImportRobot} />
         <Seperator />
       </CFSection>
 
@@ -123,7 +123,7 @@ export default function CreateEnvironmentFormStep1({
       </CFSection>
 
       <CFSection>
-        <CFGpuResourceRange formik={formik} disabled={isImportRobot} />
+        <CFStorageRange formik={formik} disabled={isImportRobot} />
         <Seperator />
       </CFSection>
 

diff --git a/src/components/FormInputRange/FormInputRange.tsx b/src/components/FormInputRange/FormInputRange.tsx
@@ -9,6 +9,8 @@ interface IFormInputRange {
   min?: number;
   max?: number;
   disabled?: boolean;
+  error?: any;
+  touched?: boolean;
 }
 
 export default function FormInputRange({
@@ -19,9 +21,17 @@ export default function FormInputRange({
   min,
   max,
   disabled,
+  error,
+  touched,
 }: IFormInputRange): ReactElement {
   return (
-    <CFInfoBar label={label} tip={tip} dataTut={dataTut}>
+    <CFInfoBar
+      label={label}
+      tip={tip}
+      dataTut={dataTut}
+      error={error}
+      touched={touched}
+    >
       <input
         min={min}
         max={max}

diff --git a/src/components/UsagesWidget/UsagesWidget.tsx b/src/components/UsagesWidget/UsagesWidget.tsx
@@ -19,7 +19,7 @@ export default function UsagesWidget({
       subtitle={`${title} Usages`}
       icon={<GoGraph size={20} className="text-layer-light-700" />}
     >
-      <div className="flex h-full w-full items-center justify-center gap-10 p-10 lg:p-6 xl:p-2">
+      <div className="flex h-full w-full items-center justify-center gap-6 p-10 lg:p-6 xl:p-2">
         {datas?.map((data: any) => {
           return <CirclePercentageBar key={data?.title} {...data} size={88} />;
         })}

diff --git a/src/contexts/CreateRobotContext.tsx b/src/contexts/CreateRobotContext.tsx
@@ -17,7 +17,7 @@ export default ({ children }: any) => {
       physicalInstanceName: "",
       robotStorage: 40,
       isEnabledIde: true,
-      ideGpuResource: 2,
+      ideGpuResource: 0,
       ideGpuResourceType: "",
       configureWorkspace: false,
       isEnabledROS2Bridge: true,

diff --git a/src/contexts/FunctionsContext.tsx b/src/contexts/FunctionsContext.tsx
@@ -1252,21 +1252,7 @@ export default ({ children }: any) => {
             devspaceVersion: robotData?.step1?.devspace?.version,
             permittedDirectories: robotData?.step1?.permittedDirectories,
             persistentDirectories: robotData?.step1?.persistentDirectories,
-            workspaces: withoutWorkspaces
-              ? [
-                  {
-                    name: "ws1",
-                    workspaceDistro: "",
-                    robotRepositories: [
-                      {
-                        name: "repo1",
-                        url: "https://github.com/robolaunch/robolaunch",
-                        branch: "main",
-                      },
-                    ],
-                  },
-                ]
-              : robotData?.step2.workspaces,
+            workspaces: withoutWorkspaces ? null : robotData?.step2.workspaces,
             ideCustomPorts:
               robotData.step1.ideCustomPorts
                 ?.map((port) => {

diff --git a/src/interfaces/instanceInferfaces.ts b/src/interfaces/instanceInferfaces.ts
@@ -27,6 +27,8 @@ export interface IInstanceResource {
 }
 
 export interface IGpuUsage {
+  gpuModel: string;
+  gpuUtilization: string;
   allocated: string;
   capacity: string;
   resourceName: string;

diff --git a/src/pages/DashboardsPage/CloudInstancesDashboardPage/CloudInstanceDashboardPage.tsx b/src/pages/DashboardsPage/CloudInstancesDashboardPage/CloudInstanceDashboardPage.tsx
@@ -27,6 +27,7 @@ import useMain from "../../../hooks/useMain";
 import { RiCpuLine } from "react-icons/ri";
 import TourGuide from "../../../components/TourGuide/TourGuide";
 import { getGuideItem } from "../../../functions/handleGuide";
+import { BsGpuCard } from "react-icons/bs";
 
 export default function CloudInstanceDashboardPage(): ReactElement {
   const [responseFleets, setResponseFleets] = useState<any>(undefined);
@@ -230,7 +231,7 @@ export default function CloudInstanceDashboardPage(): ReactElement {
       {
         organizationId: pagesState?.organization?.organizationId!,
         roboticsCloudName: pagesState?.roboticsCloud?.name!,
-        instanceId: pagesState?.instance?.instanceId,
+        instanceId: pagesState?.instance?.instanceId!,
         region: pagesState?.roboticsCloud?.region!,
       },
       {
@@ -245,8 +246,8 @@ export default function CloudInstanceDashboardPage(): ReactElement {
       {
         organizationId: selectedState?.organization?.organizationId!,
         roboticsCloudName: selectedState?.roboticsCloud?.name!,
-        instanceId: selectedState?.instance?.instanceId,
-        region: selectedState?.instance?.region,
+        instanceId: selectedState?.instance?.instanceId!,
+        region: selectedState?.instance?.region!,
       },
       {
         ifErrorNavigateTo404: !responseFleets,
@@ -285,6 +286,15 @@ export default function CloudInstanceDashboardPage(): ReactElement {
               percentage:
                 pagesState?.instance?.cloudInstanceResource?.cpuUsage || 0,
             },
+            // {
+            //   title: `GPU (${pagesState.instance?.cloudInstanceResource?.gpuUsage?.[0]?.gpuModel})`,
+            //   percentage:
+            //     Number(
+            //       pagesState.instance?.cloudInstanceResource?.gpuUsage?.[0]?.gpuUtilization?.charAt(
+            //         0,
+            //       ),
+            //     ) || 1,
+            // },
             {
               title: `Memory (${
                 pagesState?.instance?.cloudInstanceResource?.memoryTotal || 0
@@ -299,13 +309,24 @@ export default function CloudInstanceDashboardPage(): ReactElement {
               percentage:
                 Number(
                   (
-                    (pagesState?.instance?.cloudInstanceResource?.storageTotal /
+                    (pagesState?.instance?.cloudInstanceResource
+                      ?.storageTotal! /
                       100) *
-                    (pagesState?.instance?.cloudInstanceResource?.storageTotal -
-                      pagesState?.instance?.cloudInstanceResource?.storageUsage)
+                    (pagesState?.instance?.cloudInstanceResource
+                      ?.storageTotal! -
+                      pagesState?.instance?.cloudInstanceResource
+                        ?.storageUsage!)
                   ).toFixed(),
                 ) || 0,
             },
+            {
+              title: `In Network (${pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.trafficIn})`,
+              percentage: 1,
+            },
+            {
+              title: `Out Network (${pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.trafficOut})`,
+              percentage: 1,
+            },
           ]}
         />
       }
@@ -342,6 +363,13 @@ export default function CloudInstanceDashboardPage(): ReactElement {
               value:
                 pagesState?.instance?.cloudInstanceResource?.kubernetesVersion,
             },
+            {
+              icon: <BsGpuCard size={16} />,
+              title: "GPU Model",
+              value:
+                pagesState?.instance?.cloudInstanceResource?.gpuUsage?.[0]
+                  ?.gpuModel,
+            },
           ]}
         />
       }

diff --git a/src/validations/EnvironmentsValidations.ts b/src/validations/EnvironmentsValidations.ts
@@ -27,6 +27,10 @@ export const CreateEnvironmentsFormStep1Validations = Yup.object().shape({
         .max(65535, "Maximum 65535."),
     }),
   ),
+
+  ideGpuResource: Yup.number()
+    .required("GPU Resource is required.")
+    .min(1, "Minimum 1 Core."),
   ideGpuResourceType: Yup.string().required("GPU Resource Type is required."),
   vdiCustomPorts: Yup.array().of(
     Yup.object().shape({