feat(settings): add log level field

src/background.ts

@@ -129,6 +129,7 @@ async function createWindow() {
       enableCopilot: setting.enableCopilot,
       openAIAPIKey: setting.openAIAPIKey,
       model: setting.model,
+      logLevel: setting.logLevel,
     }
   }
   // Create the browser window.

src/database/database.config.ts

@@ -42,6 +42,7 @@ import { ALPNProtocols1691817588169 } from './migration/1691817588169-ALPNProtoc
 import { aiSettings1701761407723 } from './migration/1701761407723-aiSettings'
 import { aiTables1701936842016 } from './migration/1701936842016-aiTables'
 import { enableCopilot1703659148195 } from './migration/1703659148195-enableCopilot'
+import { logLevel1704941582350 } from './migration/1704941582350-logLevel'
 
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
@@ -90,6 +91,7 @@ const ORMConfig = {
     aiSettings1701761407723,
     aiTables1701936842016,
     enableCopilot1703659148195,
+    logLevel1704941582350,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

src/database/migration/1704941582350-logLevel.ts

@@ -0,0 +1,128 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class logLevel1704941582350 implements MigrationInterface {
+  name = 'logLevel1704941582350'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "temporary_SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "jsonHighlight" boolean NOT NULL DEFAULT (1),
+                "openAIAPIKey" varchar NOT NULL DEFAULT (''),
+                "model" varchar NOT NULL DEFAULT ('gpt-3.5-turbo'),
+                "enableCopilot" boolean NOT NULL DEFAULT (1),
+                "logLevel" varchar CHECK(logLevel IN ('debug', 'info', 'warn', 'error')) NOT NULL DEFAULT ('info')
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics",
+                    "jsonHighlight",
+                    "openAIAPIKey",
+                    "model",
+                    "enableCopilot"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics",
+                "jsonHighlight",
+                "openAIAPIKey",
+                "model",
+                "enableCopilot"
+            FROM "SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "SettingEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_SettingEntity"
+                RENAME TO "SettingEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "SettingEntity"
+                RENAME TO "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "jsonHighlight" boolean NOT NULL DEFAULT (1),
+                "openAIAPIKey" varchar NOT NULL DEFAULT (''),
+                "model" varchar NOT NULL DEFAULT ('gpt-3.5-turbo'),
+                "enableCopilot" boolean NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "syncOsTheme",
+                    "multiTopics",
+                    "jsonHighlight",
+                    "openAIAPIKey",
+                    "model",
+                    "enableCopilot"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "syncOsTheme",
+                "multiTopics",
+                "jsonHighlight",
+                "openAIAPIKey",
+                "model",
+                "enableCopilot"
+            FROM "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_SettingEntity"
+        `)
+  }
+}

src/database/models/SettingEntity.ts

@@ -43,4 +43,7 @@ export default class SettingEntity {
 
   @Column({ type: 'varchar', default: 'gpt-3.5-turbo' })
   model!: string
+
+  @Column({ type: 'simple-enum', enum: ['debug', 'info', 'warn', 'error'], default: 'info' })
+  logLevel!: 'debug' | 'info' | 'warn' | 'error'
 }

src/lang/log.ts

@@ -6,4 +6,18 @@ export default {
     tr: 'Günlük',
     hu: 'Napló',
   },
+  logLevel: {
+    zh: '日志等级',
+    en: 'Log Level',
+    ja: 'ログレベル',
+    tr: 'Günlük Seviyesi',
+    hu: 'Napló Szint',
+  },
+  logLevelDesc: {
+    zh: '等级：DEBUG > INFO > WARN > ERROR',
+    en: 'Levels: DEBUG > INFO > WARN > ERROR',
+    ja: 'レベル：DEBUG > INFO > WARN > ERROR',
+    tr: 'Seviyeler: DEBUG > INFO > WARN > ERROR',
+    hu: 'Szintek: DEBUG > INFO > WARN > ERROR',
+  },
 }

src/plugins/logPlugin/index.ts

@@ -1,12 +1,20 @@
 import log4js from 'log4js'
 import _Vue from 'vue'
+import store from '@/store'
 
 // Plugin object
 const VueLog4js = {
   // Required methow initially called when instatiated
-  install(Vue: typeof _Vue, options?: any) {
+  install(Vue: typeof _Vue, options?: log4js.Configuration) {
     // Configure Log4js
-    log4js.configure(options)
+    const config = options || {
+      appenders: { out: { type: 'stdout' } },
+      categories: { default: { appenders: ['out'], level: 'info' } },
+    }
+
+    config.categories.default.level = store.getters.logLevel
+
+    log4js.configure(config)
 
     const $log = log4js.getLogger()
 

src/plugins/logPlugin/logConfig.json

@@ -17,7 +17,7 @@
   "categories": {
     "default": {
       "appenders": ["fileOutput", "consoleOutput"],
-      "level": "debug",
+      "level": "info",
       "enableCallStack": true
     }
   }

src/store/getter.ts

@@ -20,6 +20,7 @@ const getters = {
   openAIAPIKey: (state: State) => state.app.openAIAPIKey,
   model: (state: State) => state.app.model,
   isPrismButtonAdded: (state: State) => state.app.isPrismButtonAdded,
+  logLevel: (state: State) => state.app.logLevel,
 }
 
 export default getters

src/store/modules/app.ts

@@ -25,6 +25,7 @@ const SET_OPEN_AI_API_KEY = 'SET_OPEN_AI_API_KEY'
 const SET_MODEL = 'SET_MODEL'
 const SET_INSERT_BUTTON_ADDED = 'SET_INSERT_BUTTON_ADDED'
 const TOGGLE_ENABLE_COPILOT = 'TOGGLE_ENABLE_COPILOT'
+const SET_LOG_LEVEL = 'SET_LOG_LEVEL'
 
 const getShowSubscriptions = (): boolean => {
   const $showSubscriptions: string | null = localStorage.getItem('showSubscriptions')
@@ -59,6 +60,7 @@ const app = {
     openAIAPIKey: settingData.openAIAPIKey || '',
     model: settingData.model || 'gpt-3.5-turbo',
     isPrismButtonAdded: false,
+    logLevel: settingData.logLevel || 'info',
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -154,6 +156,9 @@ const app = {
     [TOGGLE_ENABLE_COPILOT](state: App, enableCopilot: boolean) {
       state.enableCopilot = enableCopilot
     },
+    [SET_LOG_LEVEL](state: App, logLevel: LogLevel) {
+      state.logLevel = logLevel
+    },
   },
   actions: {
     async TOGGLE_THEME({ commit }: any, payload: App) {
@@ -258,6 +263,12 @@ const app = {
     SET_INSERT_BUTTON_ADDED({ commit }: any, payload: App) {
       commit(SET_INSERT_BUTTON_ADDED, payload.isPrismButtonAdded)
     },
+    async SET_LOG_LEVEL({ commit }: any, payload: App) {
+      const { settingService } = useServices()
+      commit(SET_LOG_LEVEL, payload.logLevel)
+      settingData.logLevel = payload.logLevel
+      await settingService.update(payload)
+    },
   },
 }
 

src/types/global.d.ts

@@ -109,6 +109,7 @@ declare global {
     openAIAPIKey: string
     model: AIModel
     isPrismButtonAdded: boolean
+    logLevel: LogLevel
   }
 
   interface State {
@@ -399,4 +400,6 @@ declare global {
       data: any[]
     }[]
   }
+
+  type LogLevel = 'debug' | 'info' | 'warn' | 'error'
 }

src/types/logPlugins.d.ts

@@ -1,4 +1,4 @@
-import { Logger } from 'log4js'
+import { getLogger } from 'log4js'
 declare module 'vue/types/vue' {
   interface Vue {
     $log: {
@@ -9,6 +9,6 @@ declare module 'vue/types/vue' {
       error(message: string): void
       fatal(message: string): void
     }
-    $logRegsity: Logger
+    $logRegsity: typeof getLogger
   }
 }

src/views/connections/ConnectionForm.vue

@@ -679,7 +679,7 @@ export default class ConnectionForm extends Vue {
           createAt: time.getNowDate(),
           updateAt: time.getNowDate(),
         })
-        this.$log.info(`First time created, Name: ${res?.name}, ID: ${res?.id}`)
+        this.$log.info(`Created for the first time: ${res?.name}, ID: ${res?.id}`)
         msgError = this.$tc('common.createfailed')
       } else {
         // update a exisit connection
@@ -688,7 +688,7 @@ export default class ConnectionForm extends Vue {
             ...data,
             updateAt: time.getNowDate(),
           })
-          this.$log.info(`${res?.name} was edited, ID: ${res?.id}`)
+          this.$log.info(`Connection ${res?.name} was edited, ID: ${res?.id}`)
           msgError = this.$tc('common.editfailed')
         }
       }

src/views/connections/ConnectionsDetail.vue

@@ -281,7 +281,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { ipcRenderer } from 'electron'
-import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions, IDisconnectPacket } from 'mqtt'
+import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions, IDisconnectPacket, Packet } from 'mqtt'
 import _ from 'lodash'
 import { Subject, fromEvent } from 'rxjs'
 import { bufferTime, map, filter, takeUntil } from 'rxjs/operators'
@@ -561,21 +561,18 @@ export default class ConnectionsDetail extends Vue {
     try {
       const { curConnectClient, connectUrl } = await createClient(this.record)
       this.client = curConnectClient
-      const { id } = this.record
+      const { name, id } = this.record
       if (id && this.client.on) {
         this.$log.info(`Assigned ID ${id} to MQTTX client`)
         this.client.on('connect', this.onConnect)
         this.client.on('error', this.onError)
         this.client.on('reconnect', this.onReConnect)
         this.client.on('disconnect', this.onDisconnect)
         this.client.on('offline', this.onOffline)
-        // this.client.on('packetsend', (packet) => {
-        //   this.$log.debug(`Packet sent: ${JSON.stringify(packet)}`)
-        // })
-        // this.client.on('packetreceive', (packet) => {
-        //   this.$log.debug(`Packet received: ${JSON.stringify(packet)}`)
-        // })
         this.onMessageArrived(this.client as MqttClient, id)
+        // Debug MQTT Packet Log
+        this.client.on('packetsend', (packet) => this.onPacketSent(packet, name))
+        this.client.on('packetreceive', (packet) => this.onPacketReceived(packet, name))
       }
 
       const protocolLogMap: ProtocolMap = {
@@ -1083,6 +1080,25 @@ export default class ConnectionsDetail extends Vue {
     )
   }
 
+  /**
+   * Handles the event when a packet is sent.
+   * @param {Packet} packet - The packet that was sent.
+   * @param {string} name - The name of the connection.
+   */
+  private onPacketSent(packet: Packet, name: string) {
+    this.$log.debug(`[${name}] Sent packet: ${JSON.stringify(packet)}`)
+  }
+
+  /**
+   * Handles the event when a packet is received.
+   *
+   * @param {Packet} packet - The received packet.
+   * @param {string} name - The name of the connection.
+   */
+  private onPacketReceived(packet: Packet, name: string) {
+    this.$log.debug(`[${name}] Received packet: ${JSON.stringify(packet)}`)
+  }
+
   private forceCloseTheConnection() {
     this.client.end!(true)
     this.reTryConnectTimes = 0