From ebb0cab7658d0452c0fe8a8808920865f75c1eff Mon Sep 17 00:00:00 2001
From: gokhangunduz <me@gokhangunduz.com.tr>
Date: Wed, 3 Jan 2024 18:51:49 +0300
Subject: [PATCH] refactor(data-science): :tada: add new ds feature

---
 public/css/style.css                          |  8 ++
 src/components/Connections/Connections.tsx    | 35 +++++--
 .../TableInformationCells/StartStopCell.tsx   | 55 +++++++++++
 .../TableInformationCells/ToggleCell.tsx      |  8 +-
 src/controllers/DataScienceTableData.tsx      | 97 ++++++++++++++-----
 src/modals/StartStopModal.tsx                 | 48 +++++++++
 6 files changed, 214 insertions(+), 37 deletions(-)
 create mode 100644 src/components/TableInformationCells/StartStopCell.tsx
 create mode 100644 src/modals/StartStopModal.tsx

diff --git a/public/css/style.css b/public/css/style.css
index 4bfeb6d4..fbab2659 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1370,6 +1370,14 @@ video {
   width: max-content;
 }
 
+.\!w-20 {
+  width: 5rem !important;
+}
+
+.\!w-28 {
+  width: 7rem !important;
+}
+
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
diff --git a/src/components/Connections/Connections.tsx b/src/components/Connections/Connections.tsx
index 83b58346..22614a42 100644
--- a/src/components/Connections/Connections.tsx
+++ b/src/components/Connections/Connections.tsx
@@ -4,10 +4,12 @@ import { envApplication } from "../../helpers/envProvider";
 import { useKeycloak } from "@react-keycloak/web";
 import useRobot from "../../hooks/useRobot";
 import { ReactElement } from "react";
+import useCreateRobot from "../../hooks/useCreateRobot";
 
 export default function Connections(): ReactElement {
   const { responseRobot, connectionsReducer } = useRobot();
   const { keycloak } = useKeycloak();
+  const { robotData } = useCreateRobot();
 
   return (
     <div className="flex gap-4">
@@ -19,8 +21,8 @@ export default function Connections(): ReactElement {
               connectionsReducer?.ros === null
                 ? "Waiting"
                 : connectionsReducer?.ros === true
-                ? "Connected"
-                : "Warning"
+                  ? "Connected"
+                  : "Warning"
             }
           />
         </div>
@@ -37,8 +39,8 @@ export default function Connections(): ReactElement {
             connectionsReducer?.virtualIDE === null
               ? "Waiting"
               : connectionsReducer?.virtualIDE
-              ? "Connected"
-              : "Warning"
+                ? "Connected"
+                : "Warning"
           }
         />
       </div>
@@ -53,8 +55,8 @@ export default function Connections(): ReactElement {
               connectionsReducer?.physicalIDE === null
                 ? "Waiting"
                 : connectionsReducer?.physicalIDE
-                ? "Connected"
-                : "Warning"
+                  ? "Connected"
+                  : "Warning"
             }
           />
         </div>
@@ -74,11 +76,28 @@ export default function Connections(): ReactElement {
             connectionsReducer?.vdi === null
               ? "Waiting"
               : connectionsReducer?.vdi
-              ? "Connected"
-              : "Warning"
+                ? "Connected"
+                : "Warning"
           }
         />
       </div>
+      {robotData.step1?.jupyterNotebook?.appEndpoint && (
+        <div className="flex gap-1" id="jupyter">
+          <ConnectionLabel
+            label="Jupyter Notebook"
+            url={robotData.step1.jupyterNotebook.appEndpoint}
+          />
+          <StateCell
+            state={
+              connectionsReducer?.virtualIDE === null
+                ? "Waiting"
+                : connectionsReducer?.virtualIDE
+                  ? "Connected"
+                  : "Warning"
+            }
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/TableInformationCells/StartStopCell.tsx b/src/components/TableInformationCells/StartStopCell.tsx
new file mode 100644
index 00000000..f8044d66
--- /dev/null
+++ b/src/components/TableInformationCells/StartStopCell.tsx
@@ -0,0 +1,55 @@
+import { Fragment, ReactElement, useState } from "react";
+import Button from "../Button/Button";
+import StartStopModal from "../../modals/StartStopModal";
+
+interface IStartStopCell {
+  isRunning: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  modalText?: string;
+  handleStart: () => void;
+  handleStop: () => void;
+}
+
+export default function StartStopCell({
+  isRunning,
+  loading,
+  disabled,
+  modalText,
+  handleStart,
+  handleStop,
+}: IStartStopCell): ReactElement {
+  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      {loading ? (
+        <img
+          className="h-10 w-10"
+          src="/svg/general/loading.svg"
+          alt="loading"
+        />
+      ) : (
+        <Button
+          className={`!h-9 ${
+            isRunning &&
+            "border border-primary-500 !bg-transparent !text-primary-500"
+          }`}
+          disabled={disabled}
+          loading={disabled}
+          text={isRunning ? "Stop" : "Start"}
+          onClick={() => setIsOpenModal(true)}
+        />
+      )}
+      {isOpenModal && (
+        <StartStopModal
+          isRunning={isRunning}
+          handleStart={handleStart}
+          handleStop={handleStop}
+          handleCloseModal={() => setIsOpenModal(false)}
+          text={modalText}
+        />
+      )}
+    </Fragment>
+  );
+}
diff --git a/src/components/TableInformationCells/ToggleCell.tsx b/src/components/TableInformationCells/ToggleCell.tsx
index 0592f5dd..ec71981e 100644
--- a/src/components/TableInformationCells/ToggleCell.tsx
+++ b/src/components/TableInformationCells/ToggleCell.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { Fragment, ReactElement } from "react";
 import Toggle from "react-toggle";
 
 interface IToggleCell {
@@ -15,9 +15,9 @@ export default function ToggleCell({
   disabled,
   onOpenHandle,
   onCloseHandle,
-}: IToggleCell) {
+}: IToggleCell): ReactElement {
   return (
-    <div>
+    <Fragment>
       {loading ? (
         <img
           className="h-10 w-10"
@@ -38,6 +38,6 @@ export default function ToggleCell({
           defaultChecked={isChecked || false}
         />
       )}
-    </div>
+    </Fragment>
   );
 }
diff --git a/src/controllers/DataScienceTableData.tsx b/src/controllers/DataScienceTableData.tsx
index 3f88eceb..9dad0203 100644
--- a/src/controllers/DataScienceTableData.tsx
+++ b/src/controllers/DataScienceTableData.tsx
@@ -8,6 +8,7 @@ import BasicCell from "../components/TableInformationCells/BasicCell";
 import ToggleCell from "../components/TableInformationCells/ToggleCell";
 import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs";
 import URLCell from "../components/TableInformationCells/URLCell";
+import StartStopCell from "../components/TableInformationCells/StartStopCell";
 
 export function DataScienceTableData() {
   const [responseApps, setResponseApps] = useState<
@@ -127,36 +128,62 @@ export function DataScienceTableData() {
         body: (rowData: any) => {
           console.log(rowData);
           return (
-            <ToggleCell
-              isChecked={(() => {
-                switch (rowData?.toggleState?.status) {
+            // <ToggleCell
+            //   isChecked={(() => {
+            //     switch (rowData?.toggleState?.status) {
+            //       case "Ready":
+            //         return true;
+            //       default:
+            //         return false;
+            //     }
+            //   })()}
+            //   loading={(() => {
+            //     switch (rowData?.toggleState?.status) {
+            //       case "Not Deployed":
+            //         return false;
+            //       case "Ready":
+            //         return false;
+            //       default:
+            //         return true;
+            //     }
+            //   })()}
+            //   disabled={(() => {
+            //     switch (rowData?.status) {
+            //       case "Not Deployed":
+            //         return false;
+            //       case "Ready":
+            //         return false;
+            //       default:
+            //         return true;
+            //     }
+            //   })()}
+            //   onOpenHandle={() => {
+            //     createDataScienceApp({
+            //       applicationName: rowData?.toggleState?.name,
+            //     });
+            //     setTimeout(() => {
+            //       handleReload();
+            //     }, 1000);
+            //   }}
+            //   onCloseHandle={() => {
+            //     deleteDataScienceApp({
+            //       applicationName: rowData?.toggleState?.name,
+            //     });
+            //     setTimeout(() => {
+            //       handleReload();
+            //     }, 1000);
+            //   }}
+            // />
+            <StartStopCell
+              isRunning={(() => {
+                switch (rowData?.status) {
                   case "Ready":
                     return true;
                   default:
                     return false;
                 }
               })()}
-              loading={(() => {
-                switch (rowData?.toggleState?.status) {
-                  case "Not Deployed":
-                    return false;
-                  case "Ready":
-                    return false;
-                  default:
-                    return true;
-                }
-              })()}
-              disabled={(() => {
-                switch (rowData?.status) {
-                  case "Not Deployed":
-                    return false;
-                  case "Ready":
-                    return false;
-                  default:
-                    return true;
-                }
-              })()}
-              onOpenHandle={() => {
+              handleStart={() => {
                 createDataScienceApp({
                   applicationName: rowData?.toggleState?.name,
                 });
@@ -164,7 +191,7 @@ export function DataScienceTableData() {
                   handleReload();
                 }, 1000);
               }}
-              onCloseHandle={() => {
+              handleStop={() => {
                 deleteDataScienceApp({
                   applicationName: rowData?.toggleState?.name,
                 });
@@ -172,6 +199,26 @@ export function DataScienceTableData() {
                   handleReload();
                 }, 1000);
               }}
+              disabled={(() => {
+                switch (rowData?.status) {
+                  case "Not Deployed":
+                    return false;
+                  case "Ready":
+                    return false;
+                  default:
+                    return true;
+                }
+              })()}
+              modalText={
+                (() => {
+                  switch (rowData?.status) {
+                    case "Ready":
+                      return "Are you sure you want to stop this application?";
+                    default:
+                      return "Are you sure you want to start this application?";
+                  }
+                })() || ""
+              }
             />
           );
         },
diff --git a/src/modals/StartStopModal.tsx b/src/modals/StartStopModal.tsx
new file mode 100644
index 00000000..51b2b2fe
--- /dev/null
+++ b/src/modals/StartStopModal.tsx
@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+import { Dialog } from "primereact/dialog";
+import Button from "../components/Button/Button";
+
+interface IStartStopModal {
+  header?: string;
+  text?: string;
+  handleCloseModal: () => void;
+  isRunning?: boolean;
+  handleStart: () => void;
+  handleStop: () => void;
+}
+
+export default function StartStopModal({
+  header,
+  text,
+  handleCloseModal,
+  isRunning,
+  handleStart,
+  handleStop,
+}: IStartStopModal): ReactElement {
+  return (
+    <Dialog
+      header={`${header || ""} Service Log`}
+      visible={true}
+      className="w-[40vw]"
+      onHide={() => handleCloseModal()}
+    >
+      <div className="flex flex-col gap-2">
+        <p className="text-sm">{text}</p>
+        <div className="flex justify-end gap-4">
+          <Button
+            className="!h-9 !w-28 border border-primary-500 !bg-transparent !text-primary-500"
+            text="Cancel"
+            onClick={() => handleCloseModal()}
+          />
+          <Button
+            className="!h-9 !w-28"
+            text={isRunning ? "Stop" : "Start"}
+            onClick={() => {
+              isRunning ? handleStop() : handleStart();
+            }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+}