refactor: Additional logging

FlashpointProject · Mar 16, 2024 · 4e63c2c · 4e63c2c
1 parent e2860e6
commit 4e63c2c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.1.18",
-    "@fparchive/flashpoint-archive": "0.6.3",
+    "@fparchive/flashpoint-archive": "0.6.4",
     "@types/react-virtualized": "^9.21.21",
     "axios": "1.6.7",
     "connected-react-router": "6.9.2",

diff --git a/src/back/SocketServer.ts b/src/back/SocketServer.ts
@@ -7,6 +7,7 @@ import { SocketRequestData, SocketResponseData } from '@shared/socket/types';
 import * as ws from 'ws';
 import { genPipelineBackOut, MiddlewareRes, PipelineRes } from './SocketServerMiddleware';
 import { createNewDialog } from './util/dialog';
+import { VERBOSE } from '.';
 
 type BackAPI = SocketAPIData<BackIn, BackInTemplate, MsgEvent>
 type BackClients = SocketServerData<BackOut, BackOutTemplate, ws>
@@ -322,7 +323,7 @@ export class SocketServer {
     const start = performance.now();
     const [inc, out] = await api_handle_message(this.api, data, msg_event);
     const end = performance.now();
-    if ('type' in data && data.type !== BackIn.KEEP_ALIVE) {
+    if (VERBOSE.enabled && 'type' in data && data.type !== BackIn.KEEP_ALIVE) {
       console.log(`${Math.floor(end - start)}ms - "${BackIn[data.type]}"`);
     }
 

diff --git a/src/back/index.ts b/src/back/index.ts
@@ -33,7 +33,7 @@ import {
   CURATIONS_FOLDER_WORKING, CURATION_META_FILENAMES
 } from '@shared/constants';
 import axios from 'axios';
-import { FlashpointArchive, enableDebug, parseUserSearchInput } from '@fparchive/flashpoint-archive';
+import { FlashpointArchive, enableDebug, loggerSusbcribe, parseUserSearchInput } from '@fparchive/flashpoint-archive';
 import { Game, GameData, Playlist, PlaylistGame } from 'flashpoint-launcher';
 import { Tail } from 'tail';
 import { ConfigFile } from './ConfigFile';
@@ -81,6 +81,10 @@ export const onDidUpdatePlaylist = new ApiEmitter<{oldPlaylist: Playlist, newPla
 export const onDidUpdatePlaylistGame = new ApiEmitter<{oldGame: PlaylistGame, newGame: PlaylistGame}>();
 export const onDidRemovePlaylistGame = new ApiEmitter<PlaylistGame>();
 
+export const VERBOSE = {
+  enabled: false
+};
+
 export const fpDatabase = new FlashpointArchive();
 
 const DEFAULT_LOGO_PATH = 'window/images/Logos/404.png';
@@ -388,8 +392,28 @@ async function prepForInit(message: any): Promise<void> {
     return;
   }
 
+  VERBOSE.enabled = state.preferences.enableVerboseLogging;
+
   console.log('Back - Loaded Preferences');
 
+  // Hook into stdout for logging
+  const realWrite = process.stdout.write.bind(process.stdout);
+  process.stdout.write = ((string: any, encodingOrCb: any, cb: any) => {
+    if (typeof encodingOrCb === 'function') {
+      realWrite(string, encodingOrCb, cb);
+    } else {
+      realWrite(string, cb);
+    }
+
+    if (typeof string !== 'string') {
+      const enc = typeof encodingOrCb === 'function' ? encodingOrCb : undefined;
+      const decodder = new TextDecoder(enc);
+      string = decodder.decode(string);
+    }
+
+    log.debug('Main', string.trim());
+  }) as any;
+
   // Ensure all directory structures exist
   try {
     await fs.ensureDir(path.join(state.config.flashpointPath, state.preferences.dataPacksFolderPath));
@@ -687,6 +711,20 @@ async function initialize() {
   }
 
   if (state.preferences.enableVerboseLogging) {
+    loggerSusbcribe((err, line) => {
+      if (err) {
+        log.error('Rust Library', 'Logging error - ' + err);
+      } else {
+        try {
+          const output = line.toString().trim();
+          if (output) {
+            log.debug('Rust Library', line);
+          }
+        } catch {
+          log.error('Rust Library', 'Failed to convert output to string');
+        }
+      }
+    });
     enableDebug();
   }
 

diff --git a/src/shared/Log/LogCommon.ts b/src/shared/Log/LogCommon.ts
@@ -17,20 +17,22 @@ export function stringifyLogEntries(entries: ILogEntry[], sourceFilter: { [key:
   for (let i = 0; i < entries.length; i++) {
     const entry = entries[i];
 
+    const extraClass = i % 2 ? 'log__even' : 'log__odd';
+
     if (!entry) { continue; } // Temp fix for array gaps
 
     if (sourceFilter[entry.source] === false || levelFilter[entry.logLevel] === false) { continue; }
 
     // E.G log__level-WARN, log__level-DEBUG
-    str += `<span class="log__level-${LogLevel[entry.logLevel]}">${getLevelText(entry.logLevel)}</span> `;
+    str += `<div class="${extraClass}"><span class="log__level-${LogLevel[entry.logLevel]}">${getLevelText(entry.logLevel)}</span> `;
     str += `<span class="log__time-stamp">[${formatTime(new Date(entry.timestamp))}]</span> `;
     if (entry.source) {
       str += (!prevEntry || entry.source !== prevEntry.source)
         ? `<span class="log__source log__source--${getClassModifier(entry.source)}">${padStart(escapeHTML(entry.source), sourceChars)}:</span> `
-        : ' '.repeat(sourceChars + 2);
+        : `<span>${'-'.padStart(sourceChars + 1)}</span> `;
     }
-    str += padLines(escapeHTML(entry.content), timeChars + sourceChars + 2);
-    str += '\n';
+    str += `<span>${padLines(escapeHTML(entry.content), timeChars + sourceChars + 2)}</span>`;
+    str += '</div>';
 
     prevEntry = entry;
   }

diff --git a/static/window/styles/core.css b/static/window/styles/core.css
@@ -307,6 +307,10 @@ body {
   text-align: right;
   flex-shrink: 0;
 }
+.tag-delete-icon {
+  margin-right: 0.5rem;
+}
+
 /* Log */
 .log {
   height: 100%;

diff --git a/static/window/styles/fancy.css b/static/window/styles/fancy.css
@@ -59,6 +59,7 @@
   --layout__game-item-background-selected-hover:            #a72aa2;
   --layout__game-item-thumb-image-rendering:                  normal; /* Used to set the "image-rendering" of the thumbnail. */
   --layout__game-grid-icon-shadow:                          black;
+  --layout__tag-editable-hover:                               var(--layout__background-faded);
   /* Browse Sidebar(s) */
   --layout__browse-sidebar-background:               #181819;
   --layout__browse-sidebar-divider-background:       #131313;
@@ -101,7 +102,8 @@
   --layout__log-source-server:              #00ff00;
   --layout__log-source-curation:            #efff00;
   --layout__log-source-log-watcher:         #cf0000;
-  --layout__log-source-extensions:          #209603;
+  --layout__log-source-extensions:          #2ab308;
+  --layout__log-source-main:                #da0000;
   --layout__log-level-TRACE:                #000000;
   --layout__log-level-DEBUG:                #5fa4f3;
   --layout__log-level-INFO:                 var(--layout__primary-background);
@@ -118,6 +120,9 @@
   --layout__credits-tooltip-roles-background: #000000;
   /* Log Page */
   --layout__log-page-bar-background: #222222;
+  --layout__log-text-color:            var(--layout__primary-text-color);
+  --layout__log-even:                  var(--layout__primary-background);
+  --layout__log-odd:                 #202022;
   /* Curate Page */
   --layout__curate-entry-collision-color: #efef98;
   /* Developer Page */
@@ -286,7 +291,14 @@ body {
 }
 /* Log */
 .log {
-  color: var(--layout__highlighted-text-color);
+  font-weight: 275;
+  color: var(--layout__log-text-color);
+}
+.log__even {
+  background-color: var(--layout__log-even);
+}
+.log__odd {
+  background-color: var(--layout__log-odd);
 }
 .log__level-TRACE {
   background-color: var(--layout__log-level-TRACE);
@@ -314,6 +326,7 @@ body {
 .log__source {
   /* Default color of sources, used on the unknown/unspecified sources */
   color: var(--layout__log-source);
+  font-weight: bold;
 }
 .log__source--background-services {
   color: var(--layout__log-source-background-services);
@@ -339,6 +352,9 @@ body {
 .log__source--extensions {
   color: var(--layout__log-source-extensions);
 }
+.log__source--main {
+  color: var(--layout__log-source-main);
+}
 
 /* ------ Image Preview ------ */
 .image-preview {
@@ -1140,6 +1156,9 @@ body {
 }
 
 /* ----- Tag Related Elements ----- */
+.tag-editable:hover {
+  background-color: var(--layout__tag-editable-hover);
+}
 .tag-static:hover {
   color: var(--layout__browse-right-sidebar-searchable-hover)
 }