From 23dd089b5b9f6c46b955ad22e9e488c4a518483d Mon Sep 17 00:00:00 2001
From: gokhangunduz <me@gokhangunduz.com.tr>
Date: Mon, 18 Dec 2023 16:36:19 +0300
Subject: [PATCH] refactor(robot-page): :tada: update robot-page layout

---
 package.json                                  |  1 +
 public/css/style.css                          |  4 ++++
 .../CodeEditorSwitcher/CodeEditorSwitcher.tsx |  2 +-
 .../WidgetSystemBackendCell.tsx               |  4 ++--
 .../WidgetSystemOperatorCell.tsx              |  4 ++--
 src/modals/LogModal.tsx                       |  8 +++----
 src/modals/ServiceLogModal.tsx                | 24 +++++++++++--------
 7 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index c6d2168d..a8ee1466 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@emotion/css": "^11.10.6",
     "@fontsource/inter": "^5.0.8",
+    "@melloware/react-logviewer": "^5.0.2",
     "@monaco-editor/react": "^4.5.0",
     "@react-hook/mouse-position": "^4.1.3",
     "@react-keycloak/web": "^3.4.0",
diff --git a/public/css/style.css b/public/css/style.css
index d68063f1..0dd93352 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1738,6 +1738,10 @@ video {
   overflow: hidden !important;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
diff --git a/src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx b/src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx
index d23a21f1..c51183a9 100644
--- a/src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx
+++ b/src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, SetStateAction } from "react";
+import { ReactElement } from "react";
 import Card from "../Card/Card";
 
 interface ICodeEditorSwitcher {
diff --git a/src/components/WidgetSystemBackendCell/WidgetSystemBackendCell.tsx b/src/components/WidgetSystemBackendCell/WidgetSystemBackendCell.tsx
index b1911da6..7b6e8be9 100644
--- a/src/components/WidgetSystemBackendCell/WidgetSystemBackendCell.tsx
+++ b/src/components/WidgetSystemBackendCell/WidgetSystemBackendCell.tsx
@@ -1,8 +1,8 @@
 import { Fragment, ReactElement, useState } from "react";
 import useMain from "../../hooks/useMain";
 import StateCell from "../TableInformationCells/StateCell";
-import LogModal from "../../modals/LogModal";
 import { RxOpenInNewWindow } from "react-icons/rx";
+import ServiceLogModal from "../../modals/ServiceLogModal";
 
 export default function WidgetSystemBackendCell(): ReactElement {
   const { pagesState } = useMain();
@@ -34,7 +34,7 @@ export default function WidgetSystemBackendCell(): ReactElement {
         </div>
       </div>
       {isOpenModal && (
-        <LogModal
+        <ServiceLogModal
           log={pagesState?.instance?.systemStatus?.[1]?.log}
           handleCloseModal={() => setIsOpenModal(false)}
         />
diff --git a/src/components/WidgetSystemOperatorCell/WidgetSystemOperatorCell.tsx b/src/components/WidgetSystemOperatorCell/WidgetSystemOperatorCell.tsx
index 43fde000..f8d8b5b0 100644
--- a/src/components/WidgetSystemOperatorCell/WidgetSystemOperatorCell.tsx
+++ b/src/components/WidgetSystemOperatorCell/WidgetSystemOperatorCell.tsx
@@ -1,7 +1,7 @@
 import { Fragment, ReactElement, useState } from "react";
 import useMain from "../../hooks/useMain";
 import StateCell from "../TableInformationCells/StateCell";
-import LogModal from "../../modals/LogModal";
+import ServiceLogModal from "../../modals/ServiceLogModal";
 import { RxOpenInNewWindow } from "react-icons/rx";
 
 export default function WidgetSystemOperatorCell(): ReactElement {
@@ -34,7 +34,7 @@ export default function WidgetSystemOperatorCell(): ReactElement {
         </div>
       </div>
       {isOpenModal && (
-        <LogModal
+        <ServiceLogModal
           log={pagesState?.instance?.systemStatus?.[0]?.log}
           handleCloseModal={() => setIsOpenModal(false)}
         />
diff --git a/src/modals/LogModal.tsx b/src/modals/LogModal.tsx
index d7937ab7..eeb5446c 100644
--- a/src/modals/LogModal.tsx
+++ b/src/modals/LogModal.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { Dialog } from "primereact/dialog";
-import Terminal from "../components/Terminal/Terminal";
+import { LazyLog } from "@melloware/react-logviewer";
 
 interface ILogModal {
   log?: string;
@@ -15,12 +15,10 @@ export default function LogModal({
     <Dialog
       header={`Logs`}
       visible={true}
-      className=" w-[80vw]"
+      className=" w-[90vw]"
       onHide={() => handleCloseModal()}
     >
-      <div className="flex h-full w-full flex-col gap-8">
-        <Terminal value={log || ""} />
-      </div>
+      <LazyLog text={log} height={752} scrollToLine={9999999} />
     </Dialog>
   );
 }
diff --git a/src/modals/ServiceLogModal.tsx b/src/modals/ServiceLogModal.tsx
index f867f0d8..5188710b 100644
--- a/src/modals/ServiceLogModal.tsx
+++ b/src/modals/ServiceLogModal.tsx
@@ -1,15 +1,17 @@
 import { ReactElement } from "react";
 import { Dialog } from "primereact/dialog";
 import useRobot from "../hooks/useRobot";
-import Terminal from "../components/Terminal/Terminal";
+import { LazyLog } from "@melloware/react-logviewer";
 
 interface IServiceLogModal {
-  type: "ide" | "vdi";
+  type?: "ide" | "vdi";
+  log?: string;
   handleCloseModal: () => void;
 }
 
 export default function ServiceLogModal({
   type,
+  log,
   handleCloseModal,
 }: IServiceLogModal): ReactElement {
   const { responseRobot } = useRobot();
@@ -18,18 +20,20 @@ export default function ServiceLogModal({
     <Dialog
       header={`${type === "ide" ? "IDE" : "VDI"} Service Log`}
       visible={true}
-      className="w-[80vw]"
+      className="h-full w-[90vw]"
       onHide={() => handleCloseModal()}
     >
-      <div className="flex w-full flex-col gap-8">
-        <Terminal
-          value={
-            type === "ide"
+      <LazyLog
+        text={
+          type
+            ? type === "ide"
               ? responseRobot?.ideApplicationLog
               : responseRobot?.vdiApplicationLog
-          }
-        />
-      </div>
+            : log
+        }
+        height={752}
+        scrollToLine={9999999}
+      />
     </Dialog>
   );
 }