refactor(widget): 🎉 update usages widget logic

robolaunch · Dec 8, 2023 · c608d39 · c608d39
1 parent f96d9c9
commit c608d39
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 39 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -938,10 +938,6 @@ video {
   margin-top: 0.1rem;
 }
 
-.mr-5 {
-  margin-right: 1.25rem;
-}
-
 .block {
   display: block;
 }
@@ -1650,6 +1646,14 @@ video {
   justify-content: space-evenly;
 }
 
+.gap-0 {
+  gap: 0px;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1674,10 +1678,6 @@ video {
   gap: 0.625rem;
 }
 
-.gap-20 {
-  gap: 5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2176,10 +2176,6 @@ video {
   padding: 0.375rem;
 }
 
-.p-10 {
-  padding: 2.5rem;
-}
-
 .p-12 {
   padding: 3rem;
 }
@@ -2405,10 +2401,6 @@ video {
   padding-top: 2rem;
 }
 
-.pr-5 {
-  padding-right: 1.25rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -3590,10 +3582,6 @@ td {
   .lg\:grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-
-  .lg\:p-6 {
-    padding: 1.5rem;
-  }
 }
 
 @media (min-width: 1280px) {
@@ -3624,10 +3612,6 @@ td {
   .xl\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
-
-  .xl\:p-2 {
-    padding: 0.5rem;
-  }
 }
 
 @media (min-width: 1536px) {

diff --git a/src/components/CirclePercentageBar/CirclePercentageBar.tsx b/src/components/CirclePercentageBar/CirclePercentageBar.tsx
@@ -1,5 +1,5 @@
-import React, { Fragment, ReactElement } from "react";
 import ContentLoader from "react-content-loader";
+import { Fragment, ReactElement } from "react";
 
 interface ICirclePercentageBar {
   percentage: number;
@@ -17,7 +17,7 @@ export default function CirclePercentageBar({
   content,
 }: ICirclePercentageBar): ReactElement {
   const strokeWidth = 4; // Border kalınlığı
-  const radius = size * 0.5 - strokeWidth; // Çemberin yarıçapı
+  const radius = size * 0.44 - strokeWidth; // Çemberin yarıçapı
   const circumference = 2 * Math.PI * radius; // Çemberin çevresi
   const dashOffset = circumference - (circumference * percentage) / 100; // Dolgu başlangıç noktası
 

diff --git a/src/components/GPUChart/GPUChart.tsx b/src/components/GPUChart/GPUChart.tsx
@@ -0,0 +1,50 @@
+import { ReactElement, useEffect, useState } from "react";
+import useMain from "../../hooks/useMain";
+import { BsGpuCard } from "react-icons/bs";
+import { IGPUDeviceUsage } from "../../interfaces/instanceInferfaces";
+
+export default function GPUChart(): ReactElement {
+  const { pagesState } = useMain();
+
+  const [gpuData, setGpuData] = useState<IGPUDeviceUsage[] | undefined>([]);
+
+  useEffect(() => {
+    setGpuData(pagesState?.instance?.cloudInstanceResource?.gpuDeviceUsage);
+  }, [pagesState?.instance?.cloudInstanceResource?.gpuDeviceUsage]);
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      {gpuData?.map((data, index) => {
+        return (
+          <div key={index} className="flex items-center gap-4 text-sm">
+            <div className="flex gap-2">
+              <BsGpuCard size={22} className="text-layer-secondary-600" />
+              <p>{data?.device}</p>
+            </div>
+            <div className="flex flex-col text-[0.66rem]">
+              <div>
+                <p>
+                  {(Number(data?.memoryUsed) / 1024)?.toFixed(1) || 0.1} /{" "}
+                  {(
+                    (Number(data?.memoryFree) + Number(data?.memoryUsed)) /
+                    1024
+                  ).toFixed(1)}
+                  GB - {data?.temp}°C
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+      <span className="text-[0.66rem]">
+        GPU (
+        {gpuData?.reduce((acc, curr) => {
+          return (
+            acc + (Number(curr?.memoryFree) + Number(curr?.memoryUsed)) / 1024
+          );
+        }, 0)}
+        )
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/NetworkChart/NetworkChart.tsx b/src/components/NetworkChart/NetworkChart.tsx
@@ -1,13 +1,13 @@
-import React, { ReactElement } from "react";
+import { 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">
+    <div className="flex flex-col items-center gap-2">
+      <div className="flex items-center gap-0.5 text-sm">
         <TiArrowUp size={28} className="text-layer-primary-600" />
         <p>
           {(
@@ -20,7 +20,7 @@ export default function NetworkChart(): ReactElement {
           {" Mbps"}
         </p>
       </div>
-      <div className="flex items-center gap-3 text-base">
+      <div className="flex items-center gap-0.5 text-sm">
         <TiArrowDown size={28} className="text-layer-secondary-600" />
         <p>
           {(

diff --git a/src/components/ResourcesWidget/ResourcesWidget.tsx b/src/components/ResourcesWidget/ResourcesWidget.tsx
@@ -16,7 +16,7 @@ export default function ResourcesWidget({
   return (
     <Widget
       dataTut="resources-widget"
-      title={`Software Resources`}
+      title={`Resource Details`}
       subtitle={`${title} Resources`}
       icon={<GoGraph size={20} className="text-layer-light-700" />}
     >

diff --git a/src/components/UsagesWidget/UsagesWidget.tsx b/src/components/UsagesWidget/UsagesWidget.tsx
@@ -3,10 +3,12 @@ import { GoGraph } from "react-icons/go";
 import Widget from "../../layouts/WidgetLayout";
 import CirclePercentageBar from "../CirclePercentageBar/CirclePercentageBar";
 import NetworkChart from "../NetworkChart/NetworkChart";
+import GPUChart from "../GPUChart/GPUChart";
 
 interface IUsagesWidget {
   title: string;
   datas: any[];
+  gpuData: any[];
 }
 
 export default function UsagesWidget({
@@ -20,11 +22,15 @@ 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-20 p-10 lg:p-6 xl:p-2">
-        {datas?.map((data: any, index: number) => {
-          return <CirclePercentageBar key={index} {...data} size={88} />;
-        })}
+      <div className="flex h-full items-center justify-between">
+        <div className="flex gap-4">
+          {datas?.map((data: any, index: number) => {
+            return <CirclePercentageBar key={index} {...data} size={88} />;
+          })}
+        </div>
+
         <NetworkChart />
+        <GPUChart />
       </div>
     </Widget>
   );

diff --git a/src/interfaces/instanceInferfaces.ts b/src/interfaces/instanceInferfaces.ts
@@ -13,6 +13,7 @@ export interface IInstanceResource {
   architecture: string;
   cpuTotal: number;
   cpuUsage: number;
+  gpuDeviceUsage: IGPUDeviceUsage[];
   gpuUsage: any;
   kernelVersion: string;
   kubernetesVersion: string;
@@ -26,6 +27,17 @@ export interface IInstanceResource {
   virtualGpu: number;
 }
 
+export interface IGPUDeviceUsage {
+  device: string;
+  gpuUtil: string;
+  memoryFree: string;
+  memoryUsed: string;
+  memoryUtil: string;
+  model: string;
+  powerUsage: string;
+  temp: string;
+  uuid: string;
+}
 export interface IGpuUsage {
   gpuModel: string;
   gpuUtilization: string;

diff --git a/src/interfaces/mainInterfaces.ts b/src/interfaces/mainInterfaces.ts
@@ -1,4 +1,4 @@
-import { IRoboticsCloud } from "./regionInterfaces";
+import { IRegion } from "./regionInterfaces";
 import { IOrganization } from "./organizationInterfaces";
 import { IInstance } from "./instanceInferfaces";
 
@@ -20,14 +20,14 @@ export interface ISidebarState {
 
 export interface ISelectedState {
   organization: IOrganization | null;
-  roboticsCloud: IRoboticsCloud | null;
+  roboticsCloud: IRegion | null;
   instance: IInstance | null;
   fleet: any;
 }
 
 export interface IpagesState {
   organization: IOrganization | null;
-  roboticsCloud: IRoboticsCloud | null;
+  roboticsCloud: IRegion | null;
   instance: IInstance | null;
   fleet: any;
 }

diff --git a/src/layouts/WidgetLayout.tsx b/src/layouts/WidgetLayout.tsx
@@ -42,7 +42,7 @@ export default function WidgetLayout({
         </div>
         <div>{options}</div>
       </div>
-      <div id="widgetBody" className={`h-full px-8 pb-2 ${className}`}>
+      <div id="widgetBody" className={`h-full w-full px-8 pb-2 ${className}`}>
         {children}
       </div>
     </div>

diff --git a/src/pages/DashboardsPage/CIDashboard/CIDashboard.tsx b/src/pages/DashboardsPage/CIDashboard/CIDashboard.tsx
@@ -73,6 +73,9 @@ export default function CIDashboard(): ReactElement {
                   : 0,
             },
           ]}
+          gpuData={
+            pagesState?.instance?.cloudInstanceResource?.gpuDeviceUsage || []
+          }
         />
       }
       widget3={

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,6 +12,20 @@ module.exports = {
         secondary: "#35B8FA",
         primary: "#AC2DFE",
 
+        light: {
+          50: "#ffffff",
+          100: "#efefef",
+          200: "#dcdcdc",
+          300: "#bdbdbd",
+          400: "#989898",
+          500: "#7c7c7c",
+          600: "#656565",
+          700: "#525252",
+          800: "#464646",
+          900: "#3d3d3d",
+          950: "#292929",
+        },
+
         layer: {
           light: {
             bg: "#f4f8fa",
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,9 @@ export default function CIDashboard(): ReactElement { @@
                       : 0,
                 },
               ]}
+              gpuData={
+                pagesState?.instance?.cloudInstanceResource?.gpuDeviceUsage || []
+              }
             />
           }
           widget3={
@@ Expand Down @@