feat(version): add host directories, update robot-headers and release…

… 0.18.7 version
robolaunch · Nov 8, 2023 · c968413 · c968413
1 parent 699ff5e
commit c968413
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 99 deletions.
diff --git a/README.md b/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.6-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.18.7-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.18.6",
+  "version": "0.18.7",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",

diff --git a/public/css/style.css b/public/css/style.css
@@ -757,6 +757,14 @@ video {
   top: 3.6rem;
 }
 
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -1691,6 +1699,14 @@ video {
   gap: 2.25rem;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .overflow-auto {
   overflow: auto;
 }

diff --git a/src/components/CFHostDirectories/CFHostDirectories.tsx b/src/components/CFHostDirectories/CFHostDirectories.tsx
@@ -22,7 +22,7 @@ export default function CFHostDirectories({
         vertical
       >
         <div className="flex flex-col gap-2">
-          {formik.values.hostDirectories.map((_, index) => {
+          {formik.values.hostDirectories?.map((_, index) => {
             return (
               <CFHostDirectoriesInput
                 key={index}

diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
@@ -94,16 +94,13 @@ export default function CodeEditor(): ReactElement {
               if (await responseRobot) {
                 await setTimeout(() => {
                   setIsSettedCookie(true);
-                }, 4000);
+                }, 2500);
               }
             }}
           />
 
-          <div className="absolute bottom-12 right-3">
+          <div className="absolute bottom-3 right-6 flex flex-col gap-4">
             <RestartService type="ide" />
-          </div>
-
-          <div className="absolute bottom-3 right-3">
             <FullScreenButton
               isFullScreen={handleFullScreen.active}
               handleFullScreen={

diff --git a/src/components/Connections/Connections.tsx b/src/components/Connections/Connections.tsx
@@ -14,7 +14,7 @@ export default function Connections(): ReactElement {
         <ConnectionLabel label="IDE" url={responseRobot?.ideIngressEndpoint} />
         <StateCell
           state={
-            isSettedCookie === null
+            isSettedCookie === undefined
               ? "Waiting"
               : isSettedCookie
               ? "Connected"
@@ -26,14 +26,15 @@ export default function Connections(): ReactElement {
         <ConnectionLabel
           label="VDI"
           url={
+            responseRobot?.vdiIngressEndpoint &&
             "https://" +
-            responseRobot?.vdiIngressEndpoint?.split("//")[1] +
-            `?usr=${keycloak?.tokenParsed?.preferred_username}&pwd=admin`
+              responseRobot?.vdiIngressEndpoint?.split("//")[1] +
+              `?usr=${keycloak?.tokenParsed?.preferred_username}&pwd=admin`
           }
         />
         <StateCell
           state={
-            isSettedCookie === null
+            isSettedCookie === undefined
               ? "Waiting"
               : isSettedCookie
               ? "Connected"

diff --git a/src/components/FullScreenButton/FullScreenButton.tsx b/src/components/FullScreenButton/FullScreenButton.tsx
@@ -15,15 +15,9 @@ export default function FullScreenButton({
       onClick={handleFullScreen}
     >
       {isFullScreen ? (
-        <BsFullscreenExit
-          size={24}
-          className="text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400"
-        />
+        <BsFullscreenExit size={24} />
       ) : (
-        <BsFullscreen
-          size={24}
-          className="text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400"
-        />
+        <BsFullscreen size={24} />
       )}
       <p className="text-[0.66rem]">Full Screen</p>
     </button>

diff --git a/src/components/HiddenFrame/HiddenFrame.tsx b/src/components/HiddenFrame/HiddenFrame.tsx
@@ -32,7 +32,7 @@ export default function HiddenFrame(): ReactElement {
           onLoad={() => {
             setTimeout(() => {
               !isSettedCookie && setIsSettedCookie(true);
-            }, 4000);
+            }, 2500);
           }}
         />
       )}

diff --git a/src/components/NetworkCell/NetworkCell.tsx b/src/components/NetworkCell/NetworkCell.tsx
@@ -1,26 +1,30 @@
-import React, { Fragment, ReactElement } from "react";
+import React, { Fragment, ReactElement, useEffect } from "react";
 
 interface INetworkCell {
-  data: string[];
+  data: number[];
   networkInterface: string;
 }
 
 export default function NetworkCell({
   data,
   networkInterface,
 }: INetworkCell): ReactElement {
+  useEffect(() => {
+    console.log("NetworkCell", data);
+  }, [data]);
+
   return (
     <Fragment>
       {data?.map(
-        (network: string, index: number) =>
+        (network: number, index: number) =>
           network && (
             <div
               key={index}
               className="flex flex-col gap-2 text-xs font-medium text-layer-light-700"
             >
               <div className="flex flex-col items-center justify-center gap-1">
                 <div className="flex h-11 w-11 items-center justify-center text-center text-layer-light-700">
-                  {network}
+                  {network > 0 ? `${network} Mbps` : "Pending..."}
                 </div>
                 <span className="text-[0.66rem] text-layer-dark-500">
                   ({networkInterface}) {index === 0 ? "In" : "Out"}

diff --git a/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx b/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx
@@ -1,66 +1,119 @@
+import React, { Fragment, ReactElement } from "react";
 import { MdDashboard, MdMap, MdScreenShare } from "react-icons/md";
-import { stringSlugify } from "../../functions/GeneralFunctions";
 import { envOnPremiseRobot } from "../../helpers/envProvider";
-import React, { Fragment, ReactElement } from "react";
 import { BsCameraVideoFill } from "react-icons/bs";
 import { BiJoystickButton } from "react-icons/bi";
 import ContentLoader from "react-content-loader";
 import { AiFillCode } from "react-icons/ai";
 import useRobot from "../../hooks/useRobot";
+import { stringSlugify } from "../../functions/GeneralFunctions";
 
 export default function RobotHeaderTabs(): ReactElement {
-  const { responseRobot, activeTab, setActiveTab } = useRobot();
+  const {
+    responseRobot,
+    activeTab,
+    isSettedCookie,
+    setActiveTab,
+    isRobotReady,
+  } = useRobot();
 
   const tabs = [
     {
       name: "Overview",
       icon: <MdDashboard size={14} />,
+      isLoading: false,
       isHidden: false,
     },
     {
       name: "Task Management",
       icon: <MdMap size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.bridgeEnabled &&
+          responseRobot?.bridgeIngressEndpoint &&
+          isSettedCookie
+        ),
       isHidden:
         envOnPremiseRobot || (responseRobot && !responseRobot?.bridgeEnabled),
     },
     {
       name: "Teleoperation",
       icon: <BiJoystickButton size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.bridgeEnabled &&
+          responseRobot?.bridgeIngressEndpoint &&
+          isSettedCookie
+        ),
       isHidden:
         envOnPremiseRobot || (responseRobot && !responseRobot?.bridgeEnabled),
     },
     {
       name: "Visualization",
       icon: <BsCameraVideoFill size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.bridgeEnabled &&
+          responseRobot?.bridgeIngressEndpoint &&
+          isSettedCookie
+        ),
       isHidden:
         envOnPremiseRobot || (responseRobot && !responseRobot?.bridgeEnabled),
     },
     {
       name: "Code Editor",
       icon: <AiFillCode size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.ideEnabled &&
+          responseRobot?.ideIngressEndpoint &&
+          isSettedCookie
+        ),
       isHidden: false,
     },
     {
       name: "Development Suite",
       icon: <AiFillCode size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.ideEnabled &&
+          responseRobot?.ideIngressEndpoint &&
+          responseRobot?.vdiEnabled &&
+          responseRobot?.vdiIngressEndpoint &&
+          isSettedCookie
+        ) ||
+        !isRobotReady,
+
       isHidden: false,
     },
     {
       name: "Remote Desktop",
       icon: <MdScreenShare size={14} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.vdiEnabled &&
+          responseRobot?.vdiIngressEndpoint &&
+          isSettedCookie
+        ),
       isHidden: false,
     },
   ];
 
   return (
     <ul
       data-tut="robot-header-tabs"
-      className="flex items-end gap-6 overflow-x-auto pt-4"
+      className="flex items-end gap-6 overflow-x-auto px-6 pt-4"
     >
-      {responseRobot ? (
-        tabs
-          .filter((tab: any) => tab && tab)
-          .map((tab: any, index: number) => (
+      {tabs
+        ?.filter((tab: any) => tab && tab)
+        .map((tab: any, index: number) => {
+          return (
             <li
               data-tut={`robot-header-tab-${stringSlugify(tab?.name)}`}
               className={`flex cursor-pointer flex-col gap-3 ${
@@ -78,10 +131,22 @@ export default function RobotHeaderTabs(): ReactElement {
                     : "text-layer-light-500"
                 }`}
               >
-                <Fragment>
-                  {tab?.icon}
-                  <span>{tab.name}</span>
-                </Fragment>
+                {tab?.isLoading || !isRobotReady ? (
+                  <ContentLoader
+                    speed={1}
+                    width={92}
+                    height={12}
+                    backgroundColor="#f6f6ef"
+                    foregroundColor="#e8e8e3"
+                  >
+                    <rect width="92" height="12" />
+                  </ContentLoader>
+                ) : (
+                  <Fragment>
+                    {tab?.icon}
+                    <span>{tab.name}</span>
+                  </Fragment>
+                )}
               </div>
               <div
                 className={`h-[2px] w-full transition-all duration-500 
@@ -92,20 +157,8 @@ export default function RobotHeaderTabs(): ReactElement {
                   } `}
               />
             </li>
-          ))
-      ) : (
-        <div className="pb-2">
-          <ContentLoader
-            speed={1}
-            width={512}
-            height={12}
-            backgroundColor="#f6f6ef"
-            foregroundColor="#e8e8e3"
-          >
-            <rect width="100%" height="12" />
-          </ContentLoader>
-        </div>
-      )}
+          );
+        })}
     </ul>
   );
 }
diff --git a/src/components/TableActionCells/InstanceActionCells.tsx b/src/components/TableActionCells/InstanceActionCells.tsx
@@ -3,9 +3,9 @@ import {
   envOnPremiseFleet,
   envOnPremiseRobot,
 } from "../../helpers/envProvider";
-import { BiTrash, BiStopCircle, BiPlayCircle } from "react-icons/bi";
 import ChangeStateInstanceModal from "../../modals/ChangeStateInstanceModal";
 import TerminateInstanceModal from "../../modals/TerminateInstanceModal";
+import { BiTrash, BiStopCircle, BiPlayCircle } from "react-icons/bi";
 import { Fragment, ReactElement, useState } from "react";
 import Button from "../Button/Button";
 interface IInstanceActionCells {
@@ -59,7 +59,7 @@ export default function InstanceActionCells({
           disabled={
             data?.state === "running" || data?.state === "stopped"
               ? false
-              : true
+              : true || !envCreateInstance
           }
           onClick={
             data?.state === "running" || data?.state === "stopped"

diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx
@@ -39,7 +39,9 @@ export default ({ children }: any) => {
 
   const [isRobotReady, setIsRobotReady] = useState<boolean>(false);
 
-  const [isSettedCookie, setIsSettedCookie] = useState<boolean | null>(null);
+  const [isSettedCookie, setIsSettedCookie] = useState<boolean | undefined>(
+    undefined,
+  );
 
   // Main Functions
   useEffect(() => {
@@ -320,7 +322,7 @@ export default ({ children }: any) => {
     setResponseRobot(undefined);
     setResponseBuildManager(undefined);
     setResponseLaunchManagers(undefined);
-    setIsSettedCookie(null);
+    setIsSettedCookie(undefined);
     setIsRobotReady(false);
     setRos(null);
     setTopicList([]);