chore: Visual improvements to the log page in the DLE UI (#396):

* change `font-family` of logs-container inside the `Logs` tab to `Fira Code`
* change error color inside the log-container to red.
* limit log messages to 1000 and only render log messages that are not older than 20 minutes.

Author: Adrinlol

ui/packages/ce/public/index.html

@@ -14,6 +14,9 @@
     <!-- Google fonts: Mono -->
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
 
+    <!-- Google fonts: Fira Code -->
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap" rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

ui/packages/platform/public/index.html

@@ -22,6 +22,9 @@
     <!-- Google fonts: Mono -->
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
 
+    <!-- Google fonts: Fira Code -->
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap" rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

ui/packages/shared/pages/Instance/styles.scss

@@ -14,6 +14,11 @@
     padding: 0.5rem 1rem;
     & > p {
       font-size: medium;
-      font-family: 'Source Code Pro, monospace';
+      font-family: 'Fira Code', monospace;   
+      padding: 4px 0;
     }
 }
+
+.error-log {
+  color: red;
+}

ui/packages/shared/pages/Instance/wsLogs.ts

@@ -1,7 +1,11 @@
+import moment from 'moment';
 import { Api } from "./stores/Main";
 
 const logsEndpoint = '/instance/logs';
 
+const LOGS_TIME_LIMIT = 20
+const LOGS_LINE_LIMIT = 1000
+
 export const establishConnection = async (api: Api) => {
     const logElement = document.getElementById("logs-container");
 
@@ -10,13 +14,33 @@ export const establishConnection = async (api: Api) => {
         return;
     }
 
-    const appendLogElement = (logEntry: string) => {
-        const tag = document.createElement("p");
-
-        tag.appendChild(document.createTextNode(logEntry));
-        logElement.appendChild(tag);
-        logElement.scrollIntoView(false);
-    };
+    const appendLogElement = (logEntry: string, logType?: string) => {
+      const tag = document.createElement('p')
+      tag.appendChild(document.createTextNode(logEntry))
+      logElement.appendChild(tag)
+      logElement.scrollIntoView(false)
+  
+      if (logType === 'message') {
+        const logEntryTime = moment.utc(
+          logElement.children[0].innerHTML.split(' ').slice(0, 2).join(' '),
+        )
+  
+        const timeDifference =
+          moment(logEntryTime).isValid() &&
+          moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes()
+  
+        if (
+          logElement.childElementCount > LOGS_LINE_LIMIT &&
+          timeDifference > LOGS_TIME_LIMIT
+        ) {
+          logElement.removeChild(logElement.children[0])
+        }
+      }
+  
+      if (logEntry.split(' ')[3] === '[ERROR]') {
+        tag.classList.add('error-log')
+      }
+    }
 
     const { response, error } = await api.getWSToken({
         instanceId: "",
@@ -53,8 +77,7 @@ export const establishConnection = async (api: Api) => {
     };
 
     socket.onmessage = function (event) {
-        const logEntry = decodeURIComponent(atob(event.data));
-
-        appendLogElement(logEntry)
-    };
+        const logEntry = decodeURIComponent(atob(event.data))
+        appendLogElement(logEntry, "message")
+    }
 };