perf: improved performance in console trace render, closes #7

src/main/main.ts

@@ -1,5 +1,4 @@
 import { app, BrowserWindow, nativeImage, ipcMain, Menu } from 'electron';
-import * as fs from 'fs';
 import * as path from 'path';
 import * as Store from 'electron-store';
 import { ChildProcess, fork, Serializable } from 'child_process';
@@ -42,14 +41,6 @@ async function createMainWindow () {
          spellcheck: false
       },
       autoHideMenuBar: true,
-      // titleBarStyle: isLinux ? 'default' :'hidden',
-      // titleBarOverlay: isWindows
-      //    ? {
-      //       color: appTheme === 'dark' ? '#383e42' : '#fff',
-      //       symbolColor: appTheme === 'dark' ? '#fff' : '#000',
-      //       height: 30
-      //    }
-      //    : false,
       trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
@@ -84,9 +75,6 @@ if (!gotTheLock) app.quit();
 else {
    require('@electron/remote/main').initialize();
 
-   // Initialize ipcHandlers
-   // ipcHandlers();
-
    ipcMain.on('refresh-theme-settings', () => {
       const appTheme = settingsStore.get('application_theme');
       if (isWindows && mainWindow) {
@@ -175,6 +163,16 @@ ipcMain.on('start-test', (event, { params, hosts, messages }) => {
                clientProcess.send(testParams);
             else {
                mainWindow.webContents.send('test-finish', message.content);
+               setTimeout(() => {
+                  clientProcess.kill();
+               }, 1000);
+            }
+            break;
+         case 'abort':
+            if (params.loop)
+               clientProcess.send(testParams);
+            else {
+               mainWindow.webContents.send('abort-test', message.content);
                clientProcess.kill();
             }
             break;
@@ -190,10 +188,15 @@ ipcMain.on('send-messages', (event) => {
    event.sender.send('client-log', { i18n: 'sendingMessages', color: '' });
 });
 
-ipcMain.on('stop-test', (event) => {
+ipcMain.on('stop-test', () => {
    try {
       clientProcess.send({ event: 'stop' });
-      event.sender.send('test-finish', 'testAborted');
+      setTimeout(() => {
+         if (clientProcess) {
+            mainWindow.webContents.send('abort-test', 'testAborted');
+            clientProcess.kill();
+         }
+      }, 500);
    }
    catch (error) {
       clientProcess.kill();

src/renderer/components/ClientTab.vue

@@ -183,7 +183,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, Ref, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import Console from './BaseConsole.vue';
 import Hosts from './ClientTabHosts.vue';
@@ -226,29 +226,18 @@ const popEditMessage = ref(false);
 const idEditedMsg = ref(null);
 const localHosts = ref(hosts.value);
 const localMessages = ref(messages.value);
+const logsCache = ref([]);
+const logsInterval: Ref<NodeJS.Timer> = ref(null);
 
 const { t } = useI18n();
 
 const slicedLogs = computed(() => {
    if (logs.value.length > 500)
-      logs.value = logs.value.slice(-500);
-
+      return logs.value.slice(-500);
    return logs.value;
 });
 
 const startTest = () => {
-   if (params.value.tMin < 100 && params.value.trace === true) {
-      params.value.trace = false;
-      const time = new Date().toLocaleString();
-      const log = {
-         time: time,
-         i18n: 'tracesDisabledMessage',
-         color: 'yellow'
-      };
-
-      logs.value.push(log);
-   }
-
    running.value = 1;
    emit('clientStatus', running.value);
 
@@ -358,6 +347,7 @@ const toggleMessageCheck = (status: number) => {
    });
    updateStoreMessages(localMessages.value);
 };
+
 ipcRenderer.on('client-log', (event, data) => {
    const time = new Date().toLocaleString();
    const { message, color, params, i18n } = data;
@@ -369,7 +359,7 @@ ipcRenderer.on('client-log', (event, data) => {
       i18n
    };
 
-   logs.value.push(log);
+   logsCache.value.push(log);
 });
 
 ipcRenderer.on('test-finish', (event, message) => {
@@ -385,7 +375,33 @@ ipcRenderer.on('test-finish', (event, message) => {
    logs.value.push(log);
 });
 
+ipcRenderer.on('abort-test', (event, message) => {
+   running.value = 0;
+   emit('clientStatus', running.value);
+   const time = new Date().toLocaleString();
+   const log = {
+      time: time,
+      i18n: message,
+      color: 'red'
+   };
+
+   logsCache.value = [];
+   logs.value.push(log);
+});
+
 ipcRenderer.on('report-client-list', (event, reports) => {
    reportList.value = reports;
 });
+
+logsInterval.value = setInterval(() => {
+   if (logsCache.value.length) {
+      logs.value.push(...logsCache.value);
+      logsCache.value = [];
+   }
+}, 100);
+
+onBeforeUnmount(() => {
+   clearInterval(logsInterval.value);
+   logsInterval.value = null;
+});
 </script>

src/renderer/components/ServerTab.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, Ref, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import Console from './BaseConsole.vue';
 import Ports from './ServerTabPorts.vue';
@@ -112,18 +112,15 @@ const logs = ref([]);
 const reportList = ref([]);
 const popNewPort = ref(false);
 const localPorts = ref(ports.value);
+const logsCache = ref([]);
+const logsInterval: Ref<NodeJS.Timer> = ref(null);
 
 const slicedLogs = computed(() => {
    if (logs.value.length > 500)
-      logs.value = logs.value.slice(-500);
-
+      return logs.value.slice(-500);
    return logs.value;
 });
 
-// const saveTest = (e: MouseEvent) => {
-//    e.preventDefault();
-// };
-
 const startServer = (e: MouseEvent) => {
    e.preventDefault();
    running.value = 1;
@@ -190,7 +187,7 @@ ipcRenderer.on('server-log', (event, data) => {
       i18n
    };
 
-   logs.value.push(log);
+   logsCache.value.push(log);
 });
 
 ipcRenderer.on('server-finish', (event, message) => {
@@ -210,4 +207,16 @@ ipcRenderer.on('server-finish', (event, message) => {
 ipcRenderer.on('report-server-list', (event, reports) => {
    reportList.value = reports;
 });
+
+logsInterval.value = setInterval(() => {
+   if (logsCache.value.length) {
+      logs.value.push(...logsCache.value);
+      logsCache.value = [];
+   }
+}, 100);
+
+onBeforeUnmount(() => {
+   clearInterval(logsInterval.value);
+   logsInterval.value = null;
+});
 </script>