feat(desktop): support install cli on settings page

emqx · Jul 5, 2024 · 54e35c9 · 54e35c9
1 parent b2892bc
commit 54e35c9
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 22 deletions.
diff --git a/src/background.ts b/src/background.ts
@@ -111,7 +111,6 @@ function handleIpcMessages() {
     }
   })
   ipcMain.on('installCLI', () => {
-    console.log('Install CLI from settings')
     if (win) {
       installCLI(win)
     }

diff --git a/src/lang/settings.ts b/src/lang/settings.ts
@@ -188,4 +188,25 @@ export default {
     ja: '進捗をインポート',
     hu: 'Importálás folyamatban',
   },
+  extends: {
+    zh: '扩展',
+    en: 'Extensions',
+    tr: 'Uzantılar',
+    ja: '拡張',
+    hu: 'Kiterjesztések',
+  },
+  downloadingCLI: {
+    zh: '下载 MQTTX CLI 中...',
+    en: 'Downloading MQTTX CLI...',
+    tr: 'MQTTX CLI indiriliyor...',
+    ja: 'MQTTX CLIをダウンロード中...',
+    hu: 'MQTTX CLI letöltése...',
+  },
+  installCLITips: {
+    zh: '一键安装 MQTTX CLI，您将被提示需要管理员权限。安装后，可在终端运行 MQTTX。',
+    en: 'One-click installation of MQTTX CLI. You will be prompted for administrator access. After installation, you can run MQTTX in the terminal.',
+    tr: "MQTTX CLI'yi tek tıklama ile kurun. Kurulum sırasında yönetici erişimi için uyarılacaksınız. Kurulumdan sonra, MQTTX'i terminalde çalıştırabilirsiniz.",
+    ja: 'MQTTX CLIをワンクリックでインストールします。インストール中に管理者アクセスのプロンプトが表示されます。インストール後、ターミナルでMQTTXを実行できます。',
+    hu: 'Egy kattintással telepítheti az MQTTX CLI-t. Telepítés közben rendszergazdai hozzáférésre vonatkozó kérést fog kapni. Telepítés után a terminálban futtathatja az MQTTX-et.',
+  },
 }
diff --git a/src/main/installCLI.ts b/src/main/installCLI.ts
@@ -89,18 +89,20 @@ async function downloadMqttxCLI(downloadUrl: string, outputPath: string, win: Br
 
     response.data.on('data', (chunk: string | any[]) => {
       downloadedLength += chunk.length
-      const percent = (downloadedLength / totalLength).toFixed(2)
-      win.setProgressBar(parseFloat(percent))
+      const percent = parseFloat((downloadedLength / totalLength).toFixed(2))
+      win.webContents.send('downloadCLI', percent, true)
+      win.setProgressBar(percent)
     })
 
     writer.on('finish', () => {
-      win.webContents.send('showProgress', false)
+      win.webContents.send('downloadCLI', 1, false)
       win.setProgressBar(-1)
       resolve()
     })
 
     writer.on('error', (err) => {
       win.setProgressBar(-1)
+      win.webContents.send('downloadCLI', 0, false)
       writer.close()
       fs.unlink(outputPath, () => {})
       reject(err)
@@ -131,15 +133,17 @@ async function sudoInstall(outputPath: string, win: BrowserWindow): Promise<void
       })
       fs.unlink(outputPath, () => console.log('Downloaded file deleted.'))
     }
+    win.webContents.send('installedCLI')
   })
 }
 
-function showDownloadedWindowsCLI(outputPath: string, fileName: string) {
+function showDownloadedWindowsCLI(outputPath: string, fileName: string, win: BrowserWindow) {
   dialog.showMessageBox({
     type: 'info',
     title: 'Download Completed',
     message: `MQTTX CLI has been successfully downloaded.\n\nPlease manually run '${fileName}' located at: ${outputPath} to use it.`,
   })
+  win.webContents.send('installedCLI')
 }
 
 function getArchSuffix(arch: string, isWindows: boolean): string {
@@ -174,6 +178,7 @@ function getArchSuffix(arch: string, isWindows: boolean): string {
 export default async function installCLI(win: BrowserWindow) {
   const isInstalled = await checkInstalledMqttxCLI(win)
   if (isInstalled) {
+    win.webContents.send('installedCLI')
     return
   }
 
@@ -196,9 +201,10 @@ export default async function installCLI(win: BrowserWindow) {
     if (!isWindows) {
       await sudoInstall(outputPath, win)
     } else {
-      showDownloadedWindowsCLI(outputPath, fileName)
+      showDownloadedWindowsCLI(outputPath, fileName, win)
     }
   } catch (error) {
     dialog.showErrorBox('Error', `Failed to install MQTTX CLI: ${error}`)
+    win.webContents.send('installedCLI')
   }
 }
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
@@ -190,6 +190,44 @@
       <el-divider></el-divider>
     </div>
 
+    <div class="settings-advanced">
+      <div class="settings-title">{{ $t('settings.extends') }}</div>
+      <el-divider></el-divider>
+      <el-row class="settings-item" type="flex" justify="space-between" align="middle">
+        <el-col :span="20">
+          <label>MQTTX CLI</label>
+          <el-tooltip placement="top" :effect="currentTheme !== 'light' ? 'light' : 'dark'" :open-delay="500">
+            <div slot="content" v-html="$t('settings.installCLITips')"></div>
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-button
+            class="settings-btn"
+            type="primary"
+            size="mini"
+            icon="el-icon-download"
+            :loading="installing"
+            @click="handleInstallCLI"
+          >
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+      <el-dialog
+        width="50%"
+        :title="$t('settings.downloadingCLI')"
+        :close-on-click-modal="false"
+        :visible.sync="progressVisible"
+        :show-close="false"
+        append-to-body
+      >
+        <el-progress :percentage="progressValue" color="#34c388"></el-progress>
+      </el-dialog>
+    </div>
+
     <div class="settings-advanced">
       <div class="settings-title">{{ $t('settings.advanced') }}</div>
       <el-divider></el-divider>
@@ -221,13 +259,7 @@
           <label>{{ $t('settings.dataRecovery') }}</label>
         </el-col>
         <el-col :span="4">
-          <el-button
-            class="data-manager-btn"
-            type="primary"
-            size="mini"
-            icon="el-icon-upload2"
-            @click="handleImportData"
-          >
+          <el-button class="settings-btn" type="primary" size="mini" icon="el-icon-upload2" @click="handleImportData">
           </el-button>
         </el-col>
       </el-row>
@@ -238,13 +270,7 @@
           <label>{{ $t('settings.dataBackup') }}</label>
         </el-col>
         <el-col :span="4">
-          <el-button
-            class="data-manager-btn"
-            type="primary"
-            size="mini"
-            icon="el-icon-printer"
-            @click="handleExportData"
-          >
+          <el-button class="settings-btn" type="primary" size="mini" icon="el-icon-printer" @click="handleExportData">
           </el-button>
         </el-col>
       </el-row>
@@ -256,7 +282,7 @@
         </el-col>
         <el-col :span="4">
           <el-button
-            class="data-manager-btn"
+            class="settings-btn"
             type="danger"
             size="mini"
             icon="el-icon-delete"
@@ -375,6 +401,7 @@ import ClearUpHistoryData from '@/components/ClearUpHistoryData.vue'
 import CryptoJS from 'crypto-js'
 import { ENCRYPT_KEY } from '@/utils/idGenerator'
 import ClickOutside from 'vue-click-outside'
+import _ from 'lodash'
 
 @Component({
   components: { ImportData, ExportData, ClearUpHistoryData },
@@ -575,6 +602,36 @@ export default class Settings extends Vue {
   private created() {
     this.getAIConfigs()
   }
+
+  private progressVisible = false
+  private installing = false
+  private progressValue = 0
+
+  private handleInstallCLI() {
+    const throttledUpdate = _.throttle((progress, showProgress) => {
+      this.progressValue = parseFloat((progress * 100).toFixed(2))
+      this.progressVisible = showProgress
+    }, 200)
+    this.installing = true
+    ipcRenderer.send('installCLI')
+    ipcRenderer.on('downloadCLI', (event, ...args) => {
+      const progress = args[0]
+      const showProgress = args[1]
+      throttledUpdate(progress, showProgress)
+    })
+    ipcRenderer.on('installedCLI', () => {
+      this.installing = false
+    })
+  }
+
+  private unbindIpcEvents(): void {
+    ipcRenderer.removeAllListeners('downloadCLI')
+    ipcRenderer.removeAllListeners('installedCLI')
+  }
+
+  private destroyed(): void {
+    this.unbindIpcEvents()
+  }
 }
 </script>
 
@@ -653,7 +710,7 @@ export default class Settings extends Vue {
   i {
     font-size: 16px;
   }
-  .data-manager-btn {
+  .settings-btn {
     width: 90px;
   }
   .icon-oper {