Add logs section to index.html and server.js

Author: davoxpa

src/app-proxy-server/mockManager.js

@@ -5,6 +5,7 @@ const StoreManager = require('../storeManager');
 const storeManager = StoreManager.getInstance();
 const crypto = require('crypto');
 const { get } = require("jquery");
+const mblog = require('../helper/log.helper');
 
 // Definisci il percorso della cartella che desideri controllare/creare
 
@@ -18,6 +19,7 @@ const startMockManager = () => {
 
 const updateModel = () => {
   console.log('updateModel')
+  mblog.log('check mock files and update model if needed')
   // cycle all file and update model
   const files = getAllMock();
   files.forEach((file) => {
@@ -35,41 +37,50 @@ const saveMock = (filename, mock) => {
     JSON.stringify(mock, null, 2)
   );
   ipcMain.emit('requestFilesList');
+  mblog.log(`File '${filename}' saved successfully.`);
 }
 
 const getMock = (filename) => {
   try {
     const filePath = path.join(folderPath, filename + ".json");
     const fileContent = fs.readFileSync(filePath, "utf8");
+    mblog.log(`File '${filename}' found.`);
     return JSON.parse(fileContent); 
   } catch (error) {
     console.log("mock non esistente :", filename);
+    mblog.error(`File '${filename}' not found.`);
     return null;
   }
 }
 
 const createMock = (data) => {
-
-  if (data.payload && data.payload.length > 0) {
-      data.uuid = crypto
-          .createHash('sha256')
-          .update(data.targetUrl + JSON.stringify(data.payload))
-          .digest('hex');
-  } else {
-      data.uuid = crypto.createHash('sha256').update(data.targetUrl + JSON.stringify({})).digest('hex');
+  try {
+    if (data.payload && data.payload.length > 0) {
+        data.uuid = crypto
+            .createHash('sha256')
+            .update(data.targetUrl + JSON.stringify(data.payload))
+            .digest('hex');
+    } else {
+        data.uuid = crypto.createHash('sha256').update(data.targetUrl + JSON.stringify({})).digest('hex');
+    }
+    data["delay"] = 0;
+    mblog.log(`Creating mock for ${data.targetUrl} with uuid ${data.uuid}`);
+    return saveMock(data.uuid, data);    
+  } catch (error) {
+    mblog.error(`Error on createMock: ${error}`);
   }
-  data["delay"] = 0;
-  return saveMock(data.uuid, data);
 }
 
 const deleteMock = (filename) => {
   try {
     const filePath = path.join(folderPath, filename + ".json");
     fs.unlinkSync(filePath);
     console.log(`File '${filename}' eliminato con successo.`);
+    mblog.log(`File '${filename}' eliminato con successo.`);
     return true;
   } catch (error) {
     console.log("mock non esistente :", filename);
+    mblog.error(`File '${filename}' non trovato.`);
     return false;
   }
 }
@@ -80,8 +91,10 @@ const deleteAllMock = () => {
     files.forEach((file) => {
       fs.unlinkSync(path.join(folderPath, file));
     });
+    mblog.log(`All mock files deleted successfully.`);
   } catch (error) {
     console.log("error:", error);
+    mblog.error(`Error on deleteAllMock: ${error}`);
   }
 }
 
@@ -108,6 +121,7 @@ const getAllMock = () => {
     return mockList;
   } catch (error) {
     console.log("error:", error);
+    mblog.error(`Error on getAllMock: ${error}`);
     return null;
   }
 }
@@ -138,6 +152,7 @@ const filterMock = (search) => {
     return mockList;
   } catch (error) {
     console.log("error:", error);
+    mblog.error(`Error on filterMock: ${error}`);
     return null;
   }
 }
@@ -150,6 +165,7 @@ const changeValueOnMock = (filename, key, value) => {
     console.log(`File '${filename}' salvato con successo.`);
     return true;
   } catch (error) {
+    mblog.error(`Error on changeValueOnMock: ${error}`);
     console.log("mock non esistente :", filename);
     return false;
   }

src/app-proxy-server/proxy.helper.js

@@ -4,6 +4,7 @@ const { getMock, saveMock } = require('./mockManager');
 const StoreManager = require('../storeManager');
 const e = require('express');
 const storeManager = StoreManager.getInstance();
+const mblog = require('../helper/log.helper');
 
 
 async function proxySniffer(req, res, next) {
@@ -21,10 +22,14 @@ async function proxySniffer(req, res, next) {
         if (!config.bypassGlobal && mockArchive && !mockArchive.bypassCache) {
             // Restituisci la risposta dall'archivio
             if (mockArchive.delay) {
+                mblog.log(`Mock found for ${target} with delay ${mockArchive.delay}`)
                 await new Promise((resolve) => setTimeout(resolve, mockArchive.delay));
             }
+            mblog.log(`Mock found for ${target}`)
             res.status(mockArchive.statusCode).json(mockArchive.response);
         } else {
+            mblog.log(`Mock not found for ${target} or bypassCache is true`)
+
             // Inoltra la richiesta al server esterno
 
             const newHeaders = req.headers;
@@ -44,6 +49,7 @@ async function proxySniffer(req, res, next) {
             if (contentType && contentType.includes('application/json')) {
                 responseData = await externalResponse.json();
             }else{
+                mblog.log(`Response is not json for ${target}, this response will not be saved in archive`)
                 // La risposta è un file media o altro tipo di contenuto
                 const responseData = await externalResponse
                 res.set('Content-Type', contentType);
@@ -72,6 +78,7 @@ async function proxySniffer(req, res, next) {
         }
     } catch (error) {
         console.log(error);
+        mblog.log(error);
         res.status(500).send('Errore interno del server');
     }
 }

src/app-proxy-server/server.js

@@ -1,6 +1,7 @@
 const express = require("express");
 const cors = require("cors"); // Importa il middleware cors
 const { proxySniffer } = require("./proxy.helper");
+const mblog = require("../helper/log.helper");
 
 
 const app = express();
@@ -26,11 +27,15 @@ let server;
 module.exports.startServer = (port) => {
   server = app.listen(port, () => {
     console.log(`Server proxy in ascolto sulla porta ${port}`);
+    mblog.log(`Server proxy listening on port ${port}`);
   });
 };
 module.exports.stopServer = () => {
     if (server) {
-        server.close(() => console.log('Server fermato'));
+        server.close(() => {
+          console.log('Server fermato')
+          mblog.log('Server stopped')
+        });
         server = null;
     }
 };

src/assets/scss/main.scss

@@ -17,6 +17,7 @@ $secondary: #245563;
 body {
   background-color: $primary;
   color: white;
+  padding-bottom: 30px;
 }
 
 .top-bar {
@@ -95,7 +96,7 @@ body {
     }
   }
 
-  .url-prefix{
+  .url-prefix {
     cursor: pointer;
   }
 
@@ -378,7 +379,6 @@ body {
 
     div.jsoneditor-tree button.jsoneditor-collapsed {
       filter: brightness(100);
-
     }
     .jsoneditor-statusbar {
       background-color: $primary;
@@ -428,4 +428,46 @@ body {
       margin: 0;
     }
   }
+}
+
+// .logs-section .logs-section-container.d-block>p:nth-child(2)
+.logs-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 1rem;
+  background: #161e25;
+
+  .logs-section-buttons {
+    border-bottom: 1px solid #3d4953;
+    display: flex;
+    justify-content: end;
+    font-size: 20px;
+
+    #logs-open {
+      display: flex;
+      justify-content: flex-end;
+    }
+    #logs-close {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  &-container {
+    height: 20vh;
+    overflow-y: scroll;
+    background-color: #161e25;
+    padding: .5rem;
+
+    p.log-type-log {
+      color: #1bc349;
+      margin-bottom: .1rem;
+    }
+    p.log-type-error {
+      color: #e0200f;
+      margin-bottom: .1rem;
+    }
+  }
 }

src/assets/styles/main.css

@@ -0,0 +1,63 @@
+class CircularLog {
+    constructor(maxSize) {
+        if (!CircularLog.instance) {
+            this.maxSize = maxSize;
+            this.data = [];
+            CircularLog.instance = this;
+        }
+
+        return CircularLog.instance;
+    }
+
+    _logInternal(items, type) {
+        const itemsAsString = items.map((item) => {
+            if (typeof item === 'object') {
+                try {
+                    return JSON.stringify(item, null, 2);
+                } catch (error) {
+                    return '[Object non serializzabile]';
+                }
+            } else {
+                return String(item);
+            }
+        });
+
+        const combinedItem = itemsAsString.join(' ');
+        if (this.data.length === this.maxSize) {
+            this.data.shift();
+        }
+        this.data.push({ message: combinedItem, type });
+
+        // Stampa su console
+        if (type === 'log') {
+            console.log(...items);
+        } else if (type === 'error') {
+            console.error(...items);
+        }
+    }
+
+    log(...items) {
+        this._logInternal(items, 'log');
+    }
+
+    error(...items) {
+        this._logInternal(items, 'error');
+    }
+
+    warn(...items) {
+        this._logInternal(items, 'warn');
+    }
+
+    info(...items) {
+        this._logInternal(items, 'info');
+    }
+
+    getLogs() {
+        return this.data;
+    }
+}
+
+const instance = new CircularLog(1000);
+Object.freeze(instance);
+
+module.exports = instance;