feat(desktop): add support the log level and record debug log

src/lang/log.ts

@@ -13,4 +13,11 @@ export default {
     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/modules/app.ts

@@ -60,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) {
@@ -264,7 +265,7 @@ const app = {
     },
     async SET_LOG_LEVEL({ commit }: any, payload: App) {
       const { settingService } = useServices()
-      commit(SET_MODEL, payload.logLevel)
+      commit(SET_LOG_LEVEL, payload.logLevel)
       settingData.logLevel = payload.logLevel
       await settingService.update(payload)
     },

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

src/views/log/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="log-view rightbar">
-    <h1 class="titlebar">
-      {{ $t('log.log') }}
-    </h1>
+    <div class="titlebar">
+      <h1>{{ $t('log.log') }}</h1>
+      <el-select size="mini" v-model="selectedLogLevel" @change="updateLogLevel">
+        <el-option label="DEBUG" value="debug"></el-option>
+        <el-option label="INFO" value="info"></el-option>
+        <el-option label="WARN" value="warn"></el-option>
+        <el-option label="ERROR" value="error"></el-option>
+      </el-select>
+    </div>
     <div class="editor-container log-editor">
       <Editor
         ref="logEditor"
@@ -26,7 +32,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import Editor from '@/components/Editor.vue'
-import { Getter } from 'vuex-class'
+import { Getter, Action } from 'vuex-class'
 import fs from 'fs-extra'
 import { getOrCreateLogDir, watchFileAppender } from '@/utils/logger'
 import path from 'path'
@@ -38,8 +44,12 @@ import path from 'path'
 })
 export default class Logs extends Vue {
   @Getter('currentTheme') private theme!: Theme
+  @Getter('logLevel') private logLevel!: LogLevel
+
+  @Action('SET_LOG_LEVEL') private actionSetLogLevel!: (payload: { logLevel: LogLevel }) => void
 
   private logValue = ''
+  private selectedLogLevel: LogLevel = 'info'
 
   get editorTheme(): 'editor-log' | 'editor-log-dark' | 'editor-log-night' {
     switch (this.theme) {
@@ -65,6 +75,7 @@ export default class Logs extends Vue {
       }
       this.logValue = data
     })
+    this.selectedLogLevel = this.logLevel
   }
 
   private scrollDown() {
@@ -89,6 +100,14 @@ export default class Logs extends Vue {
     this.scrollDown()
   }
 
+  private updateLogLevel(val: LogLevel) {
+    const logger = this.$logRegsity()
+    logger.level = this.selectedLogLevel
+    this.actionSetLogLevel({
+      logLevel: val,
+    })
+  }
+
   private created() {
     this.loadData()
   }
@@ -113,12 +132,9 @@ export default class Logs extends Vue {
   position: relative;
   padding: 0 16px;
   .titlebar {
-    .el-badge_content {
-      height: 20px;
-      position: relative;
-      top: 3px;
-      margin-left: 5px;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
   .log-editor {
     height: 90%;

src/views/settings/index.vue

@@ -194,6 +194,28 @@
       <div class="settings-title">{{ $t('settings.advanced') }}</div>
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('log.logLevel') }}</label>
+          <el-tooltip placement="top" :effect="currentTheme !== 'light' ? 'light' : 'dark'" :open-delay="500">
+            <div slot="content" v-html="$t('log.logLevelDesc')"></div>
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-select class="settings-options" :value="logLevel" size="mini" @change="handleLevelChange">
+            <el-option label="DEBUG" value="debug"></el-option>
+            <el-option label="INFO" value="info"></el-option>
+            <el-option label="WARN" value="warn"></el-option>
+            <el-option label="ERROR" value="error"></el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+
+      <el-divider></el-divider>
+
       <el-row class="settings-item" type="flex" justify="space-between" align="middle">
         <el-col :span="20">
           <label>{{ $t('settings.dataRecovery') }}</label>
@@ -335,6 +357,7 @@ export default class Settings extends Vue {
   @Action('TOGGLE_ENABLE_COPILOT') private actionToggleEnableCopilot!: (payload: { enableCopilot: boolean }) => void
   @Action('SET_OPEN_AI_API_KEY') private actionSetOpenAIAPIKey!: (payload: { openAIAPIKey: string }) => void
   @Action('SET_MODEL') private actionSetModel!: (payload: { model: AIModel }) => void
+  @Action('SET_LOG_LEVEL') private actionSetLogLevel!: (payload: { logLevel: LogLevel }) => void
 
   @Getter('currentTheme') private currentTheme!: Theme
   @Getter('currentLang') private currentLang!: Language
@@ -347,6 +370,7 @@ export default class Settings extends Vue {
   @Getter('enableCopilot') private enableCopilot!: boolean
   @Getter('openAIAPIKey') private openAIAPIKey!: string
   @Getter('model') private model!: AIModel
+  @Getter('logLevel') private logLevel!: LogLevel
 
   private langOptions: Options[] = [
     { label: '简体中文', value: 'zh' },
@@ -451,6 +475,14 @@ export default class Settings extends Vue {
     this.aiConfig.openAIAPIKey = this.openAIAPIKey
   }
 
+  private handleLevelChange(val: LogLevel) {
+    const logger = this.$logRegsity()
+    logger.level = val
+    this.actionSetLogLevel({
+      logLevel: val,
+    })
+  }
+
   private created() {
     this.getAIConfigs()
   }