refactor(robot-page): 🎉 update robot-page layout

robolaunch · Dec 18, 2023 · 23dd089 · 23dd089
1 parent e119787
commit 23dd089
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }