feat: 添加测试网关弹窗

Closes https://github.com/jumpserver/trello/issues/191

src/i18n/langs/cn.json

@@ -44,6 +44,9 @@
     "AssetDetail": "资产详情",
     "AssetList": "资产列表",
     "AssetListHelpMessage": "左侧是资产树，右击可以新建、删除、更改树节点，授权资产也是以节点方式组织的，右侧是属于该节点下的资产\n",
+    "TestGatewayTestConnection":"测试连接网关",
+    "TestGatewayHelpMessage": "如果使用了nat端口映射，请设置为ssh真实监听的端口",
+    "SshPort": "SSH 端口",
     "AssetNumber": "资产编号",
     "AssetUserList": "资产用户列表",
     "Assets": "资产",

src/i18n/langs/en.json

@@ -46,6 +46,9 @@
     "AssetListHelpMessage": "The left side is the asset tree, right click to create, delete, and change the tree node, authorization asset is also organized as a node, and the right side is the asset under that node\n",
     "AssetNumber": "Asset number",
     "AssetUserList": "Asset user list",
+    "TestGatewayTestConnection":"Test gateway test connection",
+    "TestGatewayHelpMessage": "If use nat, set the ssh real port",
+    "SshPort": "SSH Port",
     "Assets": "Assets",
     "Auth": "Auth",
     "AutoGenerateKey": "Auto generate ssh key",

src/views/assets/Domain/DomainDetail/GatewayList.vue

@@ -1,13 +1,41 @@
 <template>
-  <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <div>
+    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    <Dialog
+      v-if="dialogVisible"
+      :title="this.$t('assets.TestGatewayTestConnection')"
+      :visible.sync="dialogVisible"
+      width="40%"
+      top="35vh"
+      :show-confirm="false"
+      :show-cancel="false"
+      :destroy-on-close="true"
+    >
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <div style="line-height: 34px;text-align: center">{{ $t('assets.SshPort') }}</div>
+        </el-col>
+        <el-col :span="14">
+          <el-input v-model="portInput" />
+          <span class="help-tips help-block">{{ $t('assets.TestGatewayHelpMessage') }}</span>
+        </el-col>
+        <el-col :span="4">
+          <el-button size="mini" type="primary" style="line-height:20px " :loading="buttonLoading" @click="dialogConfirm">{{ this.$t('common.Confirm') }}</el-button>
+        </el-col>
+      </el-row>
+    </Dialog>
+  </div>
+
 </template>
 
 <script>
 import ListTable from '@/components/ListTable/index'
 import DisplayFormatter from '@/components/ListTable/formatters/DisplayFormatter'
+import Dialog from '@/components/Dialog'
 export default {
   components: {
-    ListTable
+    ListTable,
+    Dialog
   },
   props: {
     object: {
@@ -48,15 +76,14 @@ export default {
                   name: 'TestConnection',
                   title: this.$t('assets.TestConnection'),
                   callback: function(val) {
+                    this.dialogVisible = true
                     if (!val.row.port) {
                       return this.$message.error(this.$t('common.BadRequestErrorMsg'))
+                    } else {
+                      this.portInput = val.row.port
+                      this.cellValue = val.cellValue
                     }
-                    this.$axios.post(`/api/v1/assets/gateways/${val.cellValue}/test-connective/`, { port: val.row.port }).then(
+                  }.bind(this)
-                      res => {
-                        return this.$message.success(this.$t('common.TestSuccessMsg'))
-                      }
-                    )
-                  }
                 }
               ]
             }
@@ -73,7 +100,27 @@ export default {
             domain: this.object.id
           }
         }
+      },
+      dialogVisible: false,
+      portInput: '',
+      cellValue: '',
+      buttonLoading: false
+    }
+  },
+  methods: {
+    dialogConfirm() {
+      this.buttonLoading = true
+      this.$axios.post(`/api/v1/assets/gateways/${this.cellValue}/test-connective/`, { port: this.portInput }).then(
+        res => {
+          return this.$message.success(this.$t('common.TestSuccessMsg'))
+        }
+      ).finally(() => {
+        this.portInput = ''
+        this.cellValue = ''
+        this.buttonLoading = false
+        this.dialogVisible = false
       }
+      )
     }
   }
 }