refactor(dashobards): 🎉 update table cells and action flows

robolaunch · Nov 17, 2023 · 61ad8bd · 61ad8bd
1 parent 938f55f
commit 61ad8bd
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 114 deletions.
diff --git a/src/components/InstanceNetworkCell/InstanceNetworkCell.tsx b/src/components/InstanceNetworkCell/InstanceNetworkCell.tsx
@@ -16,7 +16,7 @@ export default function InstanceNetworkCell({
       <div className="flex h-12 w-12 flex-col items-center  justify-center  text-[0.70rem]">
         {typeof mbps === "number" ? (
           <Fragment>
-            <p>{mbps}</p>
+            <p>{mbps || "0.000"}</p>
             <p>Mbps</p>
           </Fragment>
         ) : (

diff --git a/src/components/InstanceUsagesCell/InstanceUsagesCell.tsx b/src/components/InstanceUsagesCell/InstanceUsagesCell.tsx
@@ -10,13 +10,11 @@ interface IInstanceUsagesCell {
 export default function InstanceUsagesCell({
   data,
 }: IInstanceUsagesCell): ReactElement {
-  console.log("GG", data);
-
   return (
     <div className="flex gap-4">
       <CirclePercentageBar
-        percentage={data?.cpu?.percentage}
-        title={`CPU (${data?.cpu?.core} Core)`}
+        percentage={data?.cpu?.percentage || 0}
+        title={data?.cpu?.core ? `CPU (${data?.cpu?.core} Core)` : "Pending..."}
         size={46}
       />
       {/* <CirclePercentageBar
@@ -25,8 +23,12 @@ export default function InstanceUsagesCell({
         size={46}
       /> */}
       <CirclePercentageBar
-        percentage={data?.memory?.percentage}
-        title={`Memory (${data?.memory?.size} GB)`}
+        percentage={data?.memory?.percentage || 0}
+        title={
+          data?.memory?.size
+            ? `Memory (${data?.memory?.size} GB)`
+            : "Pending..."
+        }
         size={46}
       />
       <CirclePercentageBar

diff --git a/src/components/TableActionButton/TableActionButton.tsx b/src/components/TableActionButton/TableActionButton.tsx
@@ -1,9 +1,9 @@
-import { BiPencil, BiTrash } from "react-icons/bi";
+import { BiPencil, BiPlayCircle, BiStopCircle, BiTrash } from "react-icons/bi";
 import { ReactElement } from "react";
 import Button from "../Button/Button";
 
 interface ITableActionButton {
-  type: "edit" | "delete";
+  type: "edit" | "delete" | "stop" | "start";
   disabled?: boolean;
   onClick?: () => void;
 }
@@ -19,14 +19,12 @@ export default function TableActionButton({
     }
 
     switch (type) {
-      case "edit": {
-        return "text-layer-primary-500 border-layer-primary-500";
-      }
-
       case "delete": {
         return "text-red-500 border-red-500";
       }
     }
+
+    return "text-layer-primary-500 border-layer-primary-500";
   }
 
   return (
@@ -37,10 +35,15 @@ export default function TableActionButton({
           case "edit": {
             return <BiPencil className={colorHandle()} />;
           }
-
           case "delete": {
             return <BiTrash className={colorHandle()} />;
           }
+          case "start": {
+            return <BiPlayCircle className={colorHandle()} />;
+          }
+          case "stop": {
+            return <BiStopCircle className={colorHandle()} />;
+          }
         }
       })()}
       onClick={onClick}

diff --git a/src/components/TableActionButtons/TableActionButtons.tsx b/src/components/TableActionButtons/TableActionButtons.tsx
@@ -4,19 +4,27 @@ import { ReactElement } from "react";
 interface ITableActionButtons {
   showEditButton?: boolean;
   showDeleteButton?: boolean;
+  showStartStopButton?: boolean;
   disabledEditButton?: boolean;
   disabledDeleteButton?: boolean;
+  disabledStartStopButton?: boolean;
   onClickEditButton?: () => void;
   onClickDeleteButton?: () => void;
+  onClickStartStopButton?: () => void;
+  instanceState?: "running" | "stopped";
 }
 
 export default function TableActionButtons({
   showEditButton,
   showDeleteButton,
+  showStartStopButton,
   disabledEditButton,
   disabledDeleteButton,
+  disabledStartStopButton,
   onClickEditButton,
   onClickDeleteButton,
+  onClickStartStopButton,
+  instanceState,
 }: ITableActionButtons): ReactElement {
   return (
     <div className="card float-right flex gap-4">

diff --git a/src/components/TableActionCells/InstanceActionCells.tsx b/src/components/TableActionCells/InstanceActionCells.tsx
@@ -1,13 +1,8 @@
-import {
-  envCreateInstance,
-  envOnPremiseFleet,
-  envOnPremiseRobot,
-} from "../../helpers/envProvider";
+import { envCreateInstance } from "../../helpers/envProvider";
 import ChangeStateInstanceModal from "../../modals/ChangeStateInstanceModal";
 import TerminateInstanceModal from "../../modals/TerminateInstanceModal";
-import { BiTrash, BiStopCircle, BiPlayCircle } from "react-icons/bi";
-import { Fragment, ReactElement, useEffect, useState } from "react";
-import Button from "../Button/Button";
+import { Fragment, ReactElement, useState } from "react";
+import TableActionButtons from "../TableActionButtons/TableActionButtons";
 interface IInstanceActionCells {
   data: any;
   reload: () => void;
@@ -21,96 +16,27 @@ export default function InstanceActionCells({
     useState<boolean>(false);
   const [isTerminateModalVisible, setIsTerminateModalVisible] =
     useState<boolean>(false);
-  const [isApplicationMode, setIsApplicationMode] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsApplicationMode(envOnPremiseRobot || envOnPremiseFleet);
-  }, []);
 
   return (
     <Fragment>
-      <div className="card float-right flex gap-4">
-        <Button
-          tooltip="Start/Stop Instance"
-          className={`!h-8 !w-8 !border !bg-transparent disabled:!border-layer-light-500 ${
-            data?.state === "running" || data?.state === "stopped"
-              ? "!border-layer-primary-500"
-              : "!border-layer-dark-100"
-          }`}
-          text={
-            data?.state === "running" ? (
-              <BiStopCircle
-                size={20}
-                className={`${
-                  isApplicationMode
-                    ? "text-layer-light-500"
-                    : "text-layer-primary-500"
-                }`}
-              />
-            ) : data?.state === "stopped" ? (
-              <BiPlayCircle
-                size={20}
-                className={`${
-                  isApplicationMode
-                    ? "text-layer-light-500"
-                    : "text-layer-primary-500"
-                }`}
-              />
-            ) : (
-              <img src="/svg/general/loading.svg" alt="loading" />
-            )
-          }
-          disabled={
-            isApplicationMode ||
-            data?.state === "running" ||
-            data?.state === "stopped"
-              ? false
-              : true || !envCreateInstance
-          }
-          onClick={
-            data?.state === "running" || data?.state === "stopped"
-              ? () => setIsChangeStateModalVisible(true)
-              : () => {}
-          }
-        />
-        <Button
-          tooltip="Terminate Instance"
-          className={`!h-8 !w-8 !border !bg-transparent disabled:!border-layer-light-500 ${
-            data?.state === "running" || data?.state === "stopped"
-              ? "!border-red-600"
-              : "!border-layer-dark-100"
-          }`}
-          text={
-            data?.state === "running" ||
-            data?.state === "stopped" ||
-            isApplicationMode ? (
-              <BiTrash
-                className={`${
-                  isApplicationMode ? "text-layer-light-500" : "text-red-600"
-                }`}
-              />
-            ) : (
-              <img src="/svg/general/loading.svg" alt="loading" />
-            )
-          }
-          disabled={!envCreateInstance}
-          onClick={() => setIsTerminateModalVisible(true)}
-        />
-      </div>
+      <TableActionButtons
+        showDeleteButton
+        disabledDeleteButton={!envCreateInstance}
+        onClickDeleteButton={() => setIsTerminateModalVisible(true)}
+      />
+
       {isChangeStateModalVisible && (
         <ChangeStateInstanceModal
           data={data}
           reload={reload}
           handleCloseModal={() => setIsChangeStateModalVisible(false)}
-          visibleModal={isChangeStateModalVisible}
         />
       )}
       {isTerminateModalVisible && (
         <TerminateInstanceModal
           data={data}
           reload={reload}
           handleCloseModal={() => setIsTerminateModalVisible(false)}
-          visibleModal={isTerminateModalVisible}
         />
       )}
     </Fragment>

diff --git a/src/controllers/RegionTableData.tsx b/src/controllers/RegionTableData.tsx
@@ -100,11 +100,6 @@ export function RegionTableData() {
     );
   }
 
-  console.log(
-    "res",
-    responseInstances?.[0]?.cloudInstanceResource?.networkUsage?.[0],
-  );
-
   const data: IInstanceDashboardData[] = useMemo(
     () =>
       responseInstances?.map((instance: IInstance) => {
@@ -122,7 +117,7 @@ export function RegionTableData() {
           ),
           architecture: instance?.cloudInstanceResource?.architecture,
           OSResources: `${instance?.cloudInstanceResource?.operatingSystemDistro}
-          (${instance?.cloudInstanceResource?.operatingSystem}})
+          (${instance?.cloudInstanceResource?.operatingSystem})
           `,
           kernel: instance?.cloudInstanceResource?.kernelVersion,
           k8s: instance?.cloudInstanceResource?.kubernetesVersion,
@@ -179,7 +174,14 @@ export function RegionTableData() {
     [pagesState, responseInstances],
   );
 
-  const columns: any = useMemo(
+  const columns: {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    filter?: boolean;
+    align: "left" | "right" | "center";
+    body?: (rowData: any) => JSX.Element;
+  }[] = useMemo(
     () => [
       {
         key: "name",
@@ -210,7 +212,7 @@ export function RegionTableData() {
         filter: false,
         align: "left",
         body: (rowData: { organization: string }) => {
-          return <BasicCell text={rowData?.organization} />;
+          return <BasicCell text={rowData?.organization || "Pending..."} />;
         },
       },
       {
@@ -230,6 +232,7 @@ export function RegionTableData() {
         filter: false,
         align: "left",
         body: (rowData: { OSResources: string }) => {
+          console.log("x", rowData?.OSResources);
           return <BasicCell text={rowData?.OSResources || "Pending..."} />;
         },
       },
@@ -293,12 +296,12 @@ export function RegionTableData() {
           return (
             <InstanceActionCells
               data={{
-                name: rowData?.name?.name,
+                name: rowData?.actions?.name,
                 state: rowData?.providerState,
                 organizationId: pagesState?.organization?.organizationId,
                 roboticsCloudName: pagesState.roboticsCloud?.name,
                 instanceId: rowData?.name?.instanceId,
-                region: rowData?.name?.region,
+                region: rowData?.actions?.region,
               }}
               reload={() => setReload((prevState: boolean) => !prevState)}
             />

diff --git a/src/modals/ChangeStateInstanceModal.tsx b/src/modals/ChangeStateInstanceModal.tsx
@@ -7,14 +7,12 @@ import { startInstance, stopInstance } from "../toolkit/InstanceSlice";
 interface IChangeInstanceModal {
   data: any;
   reload: () => void;
-  visibleModal: boolean;
   handleCloseModal: () => void;
 }
 
 export default function ChangeInstanceModal({
   data,
   reload,
-  visibleModal,
   handleCloseModal,
 }: IChangeInstanceModal): ReactElement {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -51,7 +49,7 @@ export default function ChangeInstanceModal({
   return (
     <Dialog
       header="Change Instance State"
-      visible={visibleModal}
+      visible={true}
       className="w-[30vw]"
       onHide={() => handleCloseModal()}
     >

diff --git a/src/modals/TerminateInstanceModal.tsx b/src/modals/TerminateInstanceModal.tsx
@@ -7,14 +7,12 @@ import { terminateInstance } from "../toolkit/InstanceSlice";
 interface ITerminateInstanceModal {
   data: any;
   reload: () => void;
-  visibleModal: boolean;
   handleCloseModal: () => void;
 }
 
 export default function TerminateInstanceModal({
   data,
   reload,
-  visibleModal,
   handleCloseModal,
 }: ITerminateInstanceModal): ReactElement {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -40,7 +38,7 @@ export default function TerminateInstanceModal({
   return (
     <Dialog
       header={`Terminate Instance ${data?.name}`}
-      visible={visibleModal}
+      visible={true}
       className="w-[30vw]"
       onHide={() => handleCloseModal()}
     >

diff --git a/src/pages/DashboardsPage/RegionDashboard/RegionDashboard.tsx b/src/pages/DashboardsPage/RegionDashboard/RegionDashboard.tsx
@@ -83,7 +83,7 @@ export default function RegionDashboard(): ReactElement {
           title="Cloud Instances"
           data={data}
           columns={columns}
-          loading={Array.isArray(responseInstances) ? false : true}
+          loading={!Array.isArray(responseInstances)}
           handleReload={handleReload}
         />
       }