feat(version): release 0.18.4 version

robolaunch · Nov 6, 2023 · 1b81e50 · 1b81e50
1 parent bfd4af2
commit 1b81e50
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 50 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1687,6 +1687,10 @@ video {
   gap: 2.25rem;
 }
 
+.gap-20 {
+  gap: 5rem;
+}
+
 .overflow-auto {
   overflow: auto;
 }

diff --git a/src/components/NetworkChart/NetworkChart.tsx b/src/components/NetworkChart/NetworkChart.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement } from "react";
+import { TiArrowDown, TiArrowUp } from "react-icons/ti";
+import useMain from "../../hooks/useMain";
+
+export default function NetworkChart(): ReactElement {
+  const { pagesState } = useMain();
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className="flex items-center gap-3 text-base">
+        <TiArrowUp size={28} className="text-layer-primary-600" />
+        <p>
+          {(
+            Number(
+              pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.trafficIn?.split(
+                "Kbps",
+              )?.[0],
+            ) / 1024
+          )?.toFixed(2)}
+          {" Mbps"}
+        </p>
+      </div>
+      <div className="flex items-center gap-3 text-base">
+        <TiArrowDown size={28} className="text-layer-secondary-600" />
+        <p>
+          {(
+            Number(
+              pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.trafficOut?.split(
+                "Kbps",
+              )?.[0],
+            ) / 1024
+          )?.toFixed(2)}
+          {" Mbps"}
+        </p>
+      </div>
+      <span className="text-[0.66rem]">
+        Network (
+        {pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
+          ?.interfaceName || "Pending..."}
+        )
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/RemoteDesktopController/RemoteDesktopController.tsx b/src/components/RemoteDesktopController/RemoteDesktopController.tsx
@@ -2,7 +2,7 @@ import { BsFullscreen, BsFullscreenExit } from "react-icons/bs";
 import { IoIosArrowUp, IoIosArrowDown } from "react-icons/io";
 import RestartService from "../RestartService/RestartService";
 import VolumeControl from "../VolumeControl/VolumeControl";
-import React, { ReactElement, useState } from "react";
+import { ReactElement, useState } from "react";
 import { useKeycloak } from "@react-keycloak/web";
 import Button from "../Button/Button";
 

diff --git a/src/components/RobotHeader/RobotHeader.tsx b/src/components/RobotHeader/RobotHeader.tsx
@@ -1,40 +1,16 @@
+import RobotHeaderDetails from "../RobotHeaderDetails/RobotHeaderDetails";
 import RobotHeaderTabs from "../RobotHeaderTabs/RobotHeaderTabs";
 import RobotResource from "../RobotResource/RobotResource";
 import Connections from "../Connections/Connections";
-import { IoLocationOutline } from "react-icons/io5";
-import ColorLabel from "../ColorLabel/ColorLabel";
 import CardLayout from "../../layouts/CardLayout";
-import { AiOutlineTeam } from "react-icons/ai";
-import { useParams } from "react-router-dom";
-import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
 
 export default function RobotHeader(): ReactElement {
-  const { selectedState } = useMain();
-  const url = useParams();
-
   return (
     <div data-tut="robot-header" className="col-span-full">
-      <CardLayout className="flex w-full flex-col gap-8 px-8 !pb-0 pt-6">
+      <CardLayout className="flex w-full flex-col gap-6 px-8 !pb-0 pt-6">
         <div className="flex items-center justify-between">
-          <div data-tut="robot-information" className="flex h-full gap-8">
-            <div className="flex items-center gap-2">
-              <span className="text-lg font-medium">{url?.robotName}</span>
-              <ColorLabel />
-            </div>
-            <span className="flex items-center gap-2">
-              <AiOutlineTeam size={16} />
-              <span className="text-xs font-light">
-                {url?.organizationName} Organization
-              </span>
-            </span>
-            <span className="flex items-center gap-2">
-              <IoLocationOutline size={16} />
-              <span className="text-xs font-light">
-                {selectedState?.roboticsCloud?.region}
-              </span>
-            </span>
-          </div>
+          <RobotHeaderDetails />
           <div className="hidden h-full gap-8 text-xs font-medium text-layer-dark-400 md:flex">
             <div className="flex  flex-col items-end justify-around gap-2.5">
               <Connections />

diff --git a/src/components/RobotHeaderDetails/RobotHeaderDetails.tsx b/src/components/RobotHeaderDetails/RobotHeaderDetails.tsx
@@ -0,0 +1,35 @@
+import { ReactElement } from "react";
+import ColorLabel from "../ColorLabel/ColorLabel";
+import { useParams } from "react-router-dom";
+import { AiOutlineTeam } from "react-icons/ai";
+import { IoLocationOutline } from "react-icons/io5";
+import useMain from "../../hooks/useMain";
+
+export default function RobotHeaderDetails(): ReactElement {
+  const url = useParams();
+  const { selectedState } = useMain();
+
+  return (
+    <div
+      data-tut="robot-information"
+      className="flex h-full gap-8 text-layer-dark-600"
+    >
+      <span className="flex items-center gap-2">
+        <span className="text-lg font-medium">{url?.robotName}</span>
+        <ColorLabel />
+      </span>
+      <span className="flex items-center gap-2">
+        <AiOutlineTeam size={16} />
+        <span className="text-xs font-light">
+          {url?.organizationName} Organization
+        </span>
+      </span>
+      <span className="flex items-center gap-2">
+        <IoLocationOutline size={16} />
+        <span className="text-xs font-light">
+          {selectedState?.roboticsCloud?.region}
+        </span>
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/UsagesWidget/UsagesWidget.tsx b/src/components/UsagesWidget/UsagesWidget.tsx
@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import { GoGraph } from "react-icons/go";
 import Widget from "../../layouts/WidgetLayout";
 import CirclePercentageBar from "../CirclePercentageBar/CirclePercentageBar";
+import NetworkChart from "../NetworkChart/NetworkChart";
 
 interface IUsagesWidget {
   title: string;
@@ -19,10 +20,11 @@ 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-6 p-10 lg:p-6 xl:p-2">
+      <div className="flex h-full w-full items-center justify-center gap-20 p-10 lg:p-6 xl:p-2">
         {datas?.map((data: any) => {
           return <CirclePercentageBar key={data?.title} {...data} size={88} />;
         })}
+        <NetworkChart />
       </div>
     </Widget>
   );

diff --git a/src/pages/DashboardsPage/CIDashboard/CIDashboard.tsx b/src/pages/DashboardsPage/CIDashboard/CIDashboard.tsx
@@ -313,27 +313,6 @@ export default function CIDashboard(): ReactElement {
             //       ).toFixed(),
             //     ) || -1,
             // },
-            {
-              title: `In Network (${pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.interfaceName})`,
-              percentage:
-                pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
-                  ?.trafficIn || -1,
-              hiddenCircle: true,
-              content:
-                pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
-                  ?.trafficIn,
-            },
-            {
-              title: `Out Network (${pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.interfaceName})`,
-              percentage:
-                pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
-                  ?.trafficOut || -1,
-              hiddenCircle: true,
-              content:
-                pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
-                  ?.trafficOut,
-              size: 20,
-            },
           ]}
         />
       }