feat(version): release 0.18.8 version

README.md

@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.18.2-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.18.7-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.18.8-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.18.7",
+  "version": "0.18.8",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",

public/css/style.css

@@ -641,10 +641,6 @@ video {
   bottom: 0px;
 }
 
-.bottom-12 {
-  bottom: 3rem;
-}
-
 .bottom-2 {
   bottom: 0.5rem;
 }
@@ -705,10 +701,6 @@ video {
   right: 0.5rem;
 }
 
-.right-3 {
-  right: 0.75rem;
-}
-
 .right-4 {
   right: 1rem;
 }
@@ -717,6 +709,10 @@ video {
   right: 1.25rem;
 }
 
+.right-6 {
+  right: 1.5rem;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -757,14 +753,6 @@ video {
   top: 3.6rem;
 }
 
-.bottom-10 {
-  bottom: 2.5rem;
-}
-
-.right-6 {
-  right: 1.5rem;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -1699,14 +1687,6 @@ video {
   gap: 2.25rem;
 }
 
-.gap-0 {
-  gap: 0px;
-}
-
-.gap-0\.5 {
-  gap: 0.125rem;
-}
-
 .overflow-auto {
   overflow: auto;
 }

src/components/CFGpuCore/CFGpuCore.tsx

@@ -0,0 +1,36 @@
+import FormInputRange from "../FormInputRange/FormInputRange";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik/dist/types";
+import { ReactElement, useEffect } from "react";
+import useCreateRobot from "../../hooks/useCreateRobot";
+
+interface ICFGpuCore {
+  formik: FormikProps<IDetails>;
+  disabled?: boolean;
+}
+
+export default function CFGpuCore({
+  formik,
+  disabled,
+}: ICFGpuCore): ReactElement {
+  const { robotData } = useCreateRobot();
+
+  useEffect(() => {
+    formik.setFieldValue("ideGpuResource", 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [robotData.step1.ideGpuResourceType]);
+
+  return (
+    <FormInputRange
+      label={`GPU Core Count (${formik.values.ideGpuResource} Core):`}
+      tip="GPU Core Count is the number of GPU cores that will be allocated to the IDE. The GPU cores are used to accelerate the rendering of the IDE. The GPU cores are allocated from the GPU resource pool that is available on the robot. The GPU cores are allocated from the GPU resource pool that."
+      dataTut="create-environment-ide-gpu-core"
+      InputProps={formik.getFieldProps("ideGpuResource")}
+      min={0}
+      max={robotData.step1.ideGpuResourceMaxCore || 0}
+      disabled={formik.isSubmitting || disabled}
+      error={formik.errors.ideGpuResource}
+      touched={true}
+    />
+  );
+}

src/components/CFGpuTypes/CFGpuTypes.tsx

@@ -1,6 +1,6 @@
 import { IGpuUsage } from "../../interfaces/instanceInferfaces";
 import { IDetails } from "../../interfaces/robotInterfaces";
-import React, { ReactElement, useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 import useFunctions from "../../hooks/useFunctions";
 import CFGridItem from "../CFGridItem/CFGridItem";
 import { FormikProps } from "formik/dist/types";
@@ -100,6 +100,10 @@ export default function CFGpuTypes({
                       "ideGpuResourceType",
                       type.resourceName,
                     );
+                    formik.setFieldValue(
+                      "ideGpuResourceMaxCore",
+                      Number(type.capacity) - Number(type.allocated) - 1,
+                    );
                   }}
                   disabled={
                     !!disabled ||

src/components/CFVDICount/CFVDICount.tsx

@@ -1,10 +1,10 @@
-import { IRobotStep1 } from "../../interfaces/robotInterfaces";
+import { IDetails } from "../../interfaces/robotInterfaces";
 import FormInputRange from "../FormInputRange/FormInputRange";
 import { FormikProps } from "formik/dist/types";
 import React, { ReactElement, useEffect } from "react";
 
 interface ICFVDICount {
-  formik: FormikProps<IRobotStep1>;
+  formik: FormikProps<IDetails>;
   disabled?: boolean;
 }
 

src/components/CreateForms/CFAppStep1.tsx

@@ -17,6 +17,7 @@ import { useParams } from "react-router-dom";
 import CFLoader from "../CFLoader/CFLoader";
 import useMain from "../../hooks/useMain";
 import { useFormik } from "formik";
+import CFGpuCore from "../CFGpuCore/CFGpuCore";
 
 interface ICFAppStep1 {
   isImportRobot?: boolean;
@@ -104,6 +105,11 @@ export default function CFAppStep1({
         <Seperator />
       </CFSection>
 
+      <CFSection>
+        <CFGpuCore formik={formik} disabled={isImportRobot} />
+        <Seperator />
+      </CFSection>
+
       <CFSection>
         <CFVDICount formik={formik} disabled={isImportRobot} />
         <Seperator />

src/components/HiddenFrame/HiddenFrame.tsx

@@ -1,4 +1,10 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
+import React, {
+  Fragment,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import useRobot from "../../hooks/useRobot";
 import { useAppSelector } from "../../hooks/redux";
 
@@ -20,16 +26,34 @@ export default function HiddenFrame(): ReactElement {
     };
   }, [iframeKey]);
 
+  const frame = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    // Check if the iframe is available and has a contentWindow
+    if (frame?.current?.contentWindow) {
+      frame.current.contentWindow.onload = () => {
+        // The iframe has loaded, and you can access its content here
+        const iframeContent = frame?.current?.contentWindow?.document;
+        console.log("Accessed iframe content:", iframeContent);
+
+        setTimeout(() => {
+          !isSettedCookie && setIsSettedCookie(true);
+        }, 2500);
+      };
+    }
+  }, [frame, isSettedCookie, setIsSettedCookie]);
+
   return (
     <Fragment>
       {responseRobot?.ideIngressEndpoint && (
         <iframe
+          ref={frame}
           key={iframeKey}
           title="iframe"
           allow="clipboard-read"
           className="absolute -top-[9999px]"
           src={urls?.ide || responseRobot?.ideIngressEndpoint}
-          onLoad={() => {
+          onLoad={(e) => {
             setTimeout(() => {
               !isSettedCookie && setIsSettedCookie(true);
             }, 2500);

src/contexts/CreateRobotContext.tsx

@@ -19,6 +19,7 @@ export default ({ children }: any) => {
       isEnabledIde: true,
       ideGpuResource: 0,
       ideGpuResourceType: "",
+      ideGpuResourceMaxCore: 0,
       configureWorkspace: false,
       isEnabledROS2Bridge: true,
       remoteDesktop: {

src/contexts/FunctionsContext.tsx

@@ -1269,7 +1269,7 @@ export default ({ children }: any) => {
             environmentName: robotData?.step1?.robotName,
             domainName: robotData?.step1?.domainName,
             storageAmount: robotData?.step1?.robotStorage,
-            ideGpuResource: 1,
+            ideGpuResource: robotData?.step1?.ideGpuResource,
             ideGpuResourceType: robotData?.step1?.ideGpuResourceType,
             vdiSessionCount: robotData?.step1?.remoteDesktop?.sessionCount,
             applicationName: robotData?.step1?.application?.name,

src/interfaces/robotInterfaces.ts

@@ -145,6 +145,7 @@ export interface IDetails {
   isEnabledIde: boolean;
   ideGpuResource: number;
   ideGpuResourceType: string;
+  ideGpuResourceMaxCore: number;
   isEnabledROS2Bridge: boolean;
   configureWorkspace: boolean;
   remoteDesktop: {

src/validations/AppsValidations.ts

@@ -15,6 +15,7 @@ export const CFAppStep1Validations = Yup.object().shape({
     name: Yup.string().required("Application model is required."),
   }),
   ideGpuResourceType: Yup.string().required("GPU model is required."),
+  ideGpuResourceMaxCore: Yup.number().required("GPU core is required."),
   hostDirectories: Yup.array().of(
     Yup.object().shape({
       hostDirectory: Yup.string()