feat: 系统工具Ping和Telnet (#1961)

Co-authored-by: halo <wuyihuangw@gmail.com>
Co-authored-by: Jiangjie.Bai <32935519+BaiJiangJie@users.noreply.github.com>

src/i18n/langs/en.json

@@ -1101,7 +1101,13 @@
     "weComTest": "Test",
     "FeiShu": "FeiShu",
     "feiShuTest": "Test",
-    "setting": "Setting"
+    "setting": "Setting",
+    "SystemTools": "System Tools",
+    "basicTools": "Basic Tools",
+    "destinationIP": "Destination IP",
+    "testPort": "Test Port",
+    "testTools": "Test",
+    "testHelpText": "Please enter the destination address for testing"
   },
   "tickets": {
     "PermissionName": "Permission name",

src/i18n/langs/ja.json

@@ -1130,6 +1130,12 @@
     "SMS": "SMS設定",
     "feiShuTest": "テスト",
     "setting": "設定",
+    "SystemTools": "システムツール",
+    "basicTools": "基本的なツール",
+    "destinationIP": "宛先アドレス",
+    "testPort": "テストポート",
+    "testTools": "テスト",
+    "testHelpText": "テストの宛先アドレスを入力してください"
     "SMSProvider": "メールサービス業者 / プロトコル"
   },
   "tickets": {

src/i18n/langs/zh.json

@@ -1131,6 +1131,13 @@
     "SMS": "短信设置",
     "feiShuTest": "测试",
     "setting": "设置",
+    "SMSProvider": "短信服务商",
+    "SystemTools": "系统工具",
+    "basicTools": "基本工具",
+    "destinationIP": "目的地址",
+    "testPort": "端口",
+    "testTools": "测试",
+    "testHelpText": "请输入目的地址进行测试"
     "SMSProvider": "短信服务商 / 协议"
   },
   "tickets": {

src/router/settings/index.js

@@ -295,6 +295,16 @@ export default {
         permissions: ['settings.change_other']
       }
     },
+    {
+      path: '/settings/tools',
+      name: 'Tools',
+      component: () => import('@/views/settings/Tools'),
+      meta: {
+        title: i18n.t('setting.SystemTools'),
+        icon: 'wrench',
+        permissions: ['settings.view_setting']
+      }
+    },
     {
       path: '/settings/license',
       name: 'License',

src/views/settings/Tools.vue

@@ -0,0 +1,111 @@
+<template>
+  <Page v-bind="$attrs">
+    <IBox>
+      <div>
+        <el-form ref="testForm" label-width="20%" :model="testData" :rules="testRules">
+          <el-form-item :label="$t('setting.basicTools')">
+            <el-radio-group v-model="testData.tool_type">
+              <el-radio v-for="t in tools" :key="t" :label="t" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('setting.destinationIP')" prop="dest_addr">
+            <el-input v-model="testData.dest_addr" :placeholder="$t('setting.destinationIP')" />
+          </el-form-item>
+          <el-form-item v-if="testData.tool_type=='Telnet'" :label="$t('setting.testPort')" prop="port_num">
+            <el-input v-model="testData.port_num" :placeholder="$t('setting.testPort')" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="isTesting" @click="submitTest">{{ $t('setting.testTools') }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="testResp" type="textarea" :readonly="true" :rows="8" :placeholder="$t('setting.testHelpText')" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </IBox>
+  </Page>
+</template>
+
+<script>
+import { IBox } from '@/components'
+import { Page } from '@/layout/components'
+import rules from '@/components/DataForm/rules'
+
+export default {
+  name: 'Tools',
+  components: {
+    IBox,
+    Page
+  },
+  data() {
+    return {
+      testRules: {
+        dest_addr: rules.Required,
+        port_num: rules.Required
+      },
+      isTesting: false,
+      ws: null,
+      tools: ['Ping', 'Telnet'],
+      testData: {
+        dest_addr: '',
+        port_num: '',
+        tool_type: 'Ping'
+      },
+      testResp: ''
+    }
+  },
+  methods: {
+    enableWS() {
+      this.testResp = ''
+      const scheme = document.location.protocol === 'https:' ? 'wss' : 'ws'
+      const port = document.location.port ? ':' + document.location.port : ''
+      const url = '/ws/setting/tools/'
+      const wsURL = scheme + '://' + document.location.hostname + port + url
+      this.ws = new WebSocket(wsURL)
+      this.setWsCallback()
+    },
+    setWsCallback() {
+      this.ws.onmessage = (e) => {
+        const data = JSON.parse(e.data)
+        this.testResp += data.msg
+      }
+      this.ws.onopen = (e) => {
+        this.$log.debug('websocket connected: ', e)
+        this.ws.send(JSON.stringify(this.testData))
+        this.isTesting = true
+      }
+      this.ws.onerror = (e) => {
+        this.isTesting = false
+      }
+      this.ws.onclose = (e) => {
+        this.isTesting = false
+      }
+    },
+    submitTest() {
+      this.$refs['testForm'].validate((valid) => {
+        if (valid) {
+          this.enableWS()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form ::v-deep .el-form-item {
+  margin-bottom: 12px;
+}
+
+.el-form ::v-deep .el-form-item__content {
+  width: 75%;
+}
+
+.el-form ::v-deep .el-form-item__label {
+  padding: 0 30px 0 0;
+}
+
+.el-form ::v-deep .el-form-item__error {
+    position: inherit;
+}
+</style>