refactor(hidden-frame): 🎉 update hidden frame logic

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",

src/components/HiddenFrame/HiddenFrame.tsx

@@ -1,32 +1,27 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { Fragment, ReactElement, useEffect, useState } from "react";
 
 interface IHiddenFrame {
   url: string;
 }
 
 export default function HiddenFrame({ url }: IHiddenFrame): ReactElement {
-  const [connection, setConnection] = useState<boolean>(true);
+  const [active, setActive] = useState<boolean>(true);
 
   useEffect(() => {
     setInterval(() => {
-      setConnection(false);
-      console.log("frame active");
-
-      setTimeout(() => {
-        setConnection(true);
-        console.log("frame deactive");
-      }, 5000);
-    }, 100000);
-  }, []);
+      url && setActive((prev) => !prev);
+    }, 30000);
+  }, [active, url]);
 
   return (
-    <iframe
-      title="iframe"
-      sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation allow-downloads"
-      allow="microphone; camera; usb; midi; encrypted-media; autoplay; clipboard-write; clipboard-read"
-      className="absolute -top-[9999px] grid-cols-1 gap-6"
-      src={connection ? url || "" : ""}
-      onLoad={() => console.log("iframe loaded")}
-    />
+    <Fragment>
+      <iframe
+        title="iframe"
+        allow="clipboard-read"
+        className="absolute  grid-cols-1 gap-6"
+        src={url ? url.replace("wss://", "https://") + "health" : ""}
+        onLoad={() => console.log("iframe loaded")}
+      />
+    </Fragment>
   );
 }

src/components/RobotConnectionsViewer/RobotConnectionsViewer.tsx

@@ -47,7 +47,7 @@ export default function RobotConnectionsViewer({
     <div className="flex gap-6">
       {!envOnPremise && (
         <div className="flex gap-1">
-          <span>ROS: </span>
+          <span className="text-xs font-semibold">ROS: </span>
           <StateCell
             state={
               isRosConnected === true
@@ -60,15 +60,15 @@ export default function RobotConnectionsViewer({
         </div>
       )}
       <div className="flex gap-1">
-        <span>IDE: </span>
+        <span className="text-xs font-semibold">IDE: </span>
         <StateCell
           state={
             ide === true ? "Connected" : ide === false ? "Warning" : "Waiting"
           }
         />
       </div>
       <div className="flex gap-1">
-        <span>VDI: </span>
+        <span className="text-xs font-semibold">VDI: </span>
         <StateCell
           state={
             isVDIConnected === true

src/pages/RobotPage/RobotPage.tsx

@@ -15,6 +15,7 @@ import { useAppSelector } from "../../hooks/redux";
 import { useParams } from "react-router-dom";
 import Overview from "./Overview/Overview";
 import useMain from "../../hooks/useMain";
+import HiddenFrame from "../../components/HiddenFrame/HiddenFrame";
 
 export default function RobotPage(): ReactElement {
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
@@ -353,6 +354,7 @@ export default function RobotPage(): ReactElement {
         topicList={topicList}
         setTopicList={setTopicList}
       />
+      <HiddenFrame url={responseRobot?.vdiIngressEndpoint} />
     </div>
   );
 }