From 3f908fcee3ffe3d40ddbb23b8282eefcc80b580d Mon Sep 17 00:00:00 2001
From: OrangeM21 <orangemtony@gmail.com>
Date: Tue, 19 May 2020 01:48:58 +0800
Subject: [PATCH] =?UTF-8?q?[update]=E6=B7=BB=E5=8A=A0=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Term/index.vue            |   1 -
 src/views/jobcenter/CommandExecution.vue | 245 ++++++++++++++++++-----
 2 files changed, 193 insertions(+), 53 deletions(-)

diff --git a/src/components/Term/index.vue b/src/components/Term/index.vue
index 7370e5c58..0dd016030 100644
--- a/src/components/Term/index.vue
+++ b/src/components/Term/index.vue
@@ -43,7 +43,6 @@ export default {
       this.xterm.write(val)
     },
     changeSelectedAssets() {
-
     }
   }
 
diff --git a/src/views/jobcenter/CommandExecution.vue b/src/views/jobcenter/CommandExecution.vue
index 90877bab4..571211748 100644
--- a/src/views/jobcenter/CommandExecution.vue
+++ b/src/views/jobcenter/CommandExecution.vue
@@ -1,83 +1,219 @@
 <template>
-  <el-collapse-transition>
-    <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
-      <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
-        <component
-          :is="component"
-          :setting="treeSetting"
-          class="auto-data-ztree"
-          @urlChange="handleUrlChange"
-        />
-      </div>
-      <div :style="iShowTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
-        <div class="mini">
-          <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
-            <i v-show="iShowTree" class="fa fa-angle-left fa-x" /><i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
-          </div>
+  <Page>
+    <el-collapse-transition>
+      <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
+        <div v-show="iShowTree" :style="iShowTree?('width:250px;'):('width:0;')" class="transition-box">
+          <component
+            :is="component"
+            ref="AutoDataZTree"
+            :setting="treeSetting"
+            class="auto-data-ztree"
+          />
         </div>
-        <IBox class="transition-box" style="width: calc(100% - 17px);">
-          <Term />
-          <div style="display: flex">
-            <div>
-              <CodeMirror @change="handleActionChange" />
-            </div>
-            <div>
-              <Select2 />
+        <div :style="iShowTree?('display: flex;width: calc(100% - 250px);'):('display: flex;width:100%;')">
+          <div class="mini">
+            <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
+              <i v-show="iShowTree" class="fa fa-angle-left fa-x" /><i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
             </div>
           </div>
-        </IBox>
+          <IBox class="transition-box" style="width: calc(100% - 17px);">
+            <Term ref="xterm" />
+            <div style="display: flex;margin-top:10px;justify-content: space-between">
+              <div>
+                <CodeMirror :options="CodeMirrorOptions" @change="handleActionChange" />
+              </div>
+              <div style="display: flex;flex-direction: column ;justify-content: space-between">
+                <el-select v-model="selectedSystemuser" placeholder="请选择" @change="handleSystemUserChange">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.id"
+                    :disabled="item.protocol != 'ssh'"
+                    :label="`${item.name}(${item.username})`"
+                    :value="item.id"
+                  />
+                </el-select>
+                <el-button type="primary" size="small" @click="execute">执行</el-button>
+              </div>
+            </div>
+          </IBox>
+        </div>
       </div>
-    </div>
-  </el-collapse-transition>
+    </el-collapse-transition>
+  </Page>
 </template>
 
 <script>
 import AutoDataZTree from '@/components/AutoDataZTree'
 import Term from '@/components/Term'
-import ListTable from '@/components/ListTable'
 import IBox from '@/components/IBox'
 import Select2 from '@/components/Select2'
 import CodeMirror from '@/components/CodeMirror'
+import { Page } from '@/layout/components'
 export default {
-  name: 'TreeTable',
+  name: 'CommandExecution',
   components: {
-    ListTable,
     Term,
     AutoDataZTree,
     IBox,
     Select2,
+    Page,
     CodeMirror
   },
-  props: {
-    ...ListTable.props,
-    treeSetting: {
-      type: Object,
-      default: () => AutoDataZTree.props.setting.default()
-    },
-    showTree: {
-      type: Boolean,
-      default: true
-    },
-    // 默认引用的Tree组件
-    component: {
-      type: String,
-      default: () => 'AutoDataZTree'
-    }
-  },
   data() {
     return {
-      iTableConfig: this.tableConfig,
-      iShowTree: this.showTree,
-      actions: ''
+      component: 'AutoDataZTree',
+      CodeMirrorOptions: {
+        lineNumbers: true,
+        lineWrapping: true,
+        mode: 'shell'
+      },
+      treeSetting: {
+        treeUrl: '/api/v1/perms/users/nodes-with-assets/tree/?cache_policy=1',
+        showRefresh: true,
+        showMenu: false,
+        check: {
+          enable: true
+        },
+        view: {
+          dblClickExpand: false,
+          showLine: true
+        },
+        data: {
+          simpleData: {
+            enable: true
+          }
+        },
+        edit: {
+          enable: true,
+          showRemoveBtn: false,
+          showRenameBtn: false,
+          drag: {
+            isCopy: true,
+            isMove: true
+          }
+        },
+        callback: {
+          onCheck: this.onCheck.bind(this),
+          onClick: this.onClick.bind(this)
+        },
+        async: {
+          enable: false
+        }
+      },
+      iShowTree: true,
+      actions: '',
+      options: [],
+      selectedSystemuser: '',
+      basicUrl: '/api/v1/perms/users/nodes-with-assets/tree/?cache_policy=1',
+      ws: ''
     }
   },
-  methods: {
-    handleUrlChange(_url) {
-      this.$set(this.iTableConfig, 'url', _url)
-      console.log(this.iTableConfig)
+  computed: {
+    zTree() {
+      return this.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree.zTree
     },
+    xterm() {
+      return this.$refs.xterm.xterm
+    }
+  },
+  mounted() {
+    this.$axios.get('api/v1/assets/system-users/').then(res => {
+      this.options = res
+    })
+    this.xterm.write(`选择左侧资产, 选择运行的系统用户，批量执行命令`)
+    this.enableWS()
+  },
+  methods: {
     handleActionChange(val) {
       this.actions = val
+    },
+    onClick(event, treeId, treeNode, clickFlag) {
+      console.log(event, treeId, treeNode, clickFlag)
+      if (treeNode.meta.type === 'asset') {
+        const protocolsStr = treeNode.meta.asset.protocols + ''
+        if (protocolsStr.indexOf('ssh/') === -1) {
+          // Don't Support SSH
+        }
+      }
+    },
+    handleSystemUserChange(id) {
+      this.treeSetting.treeUrl = `${this.basicUrl}&system_user=${id}`
+      console.log(this.treeSetting.treeUrl)
+      this.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree.initTree()
+    },
+    getSelectedAssetsNode() {
+      const nodes = this.zTree.getCheckedNodes(true)
+      const assetsNodeId = []
+      const assetsNode = []
+      nodes.forEach(function(node) {
+        if (node.meta.type === 'asset' && !node.isHidden) {
+          const protocolsStr = node.meta.asset.protocols + ''
+          if (assetsNodeId.indexOf(node.id) === -1 && protocolsStr.indexOf('ssh') > -1) {
+            assetsNodeId.push(node.id)
+            assetsNode.push(node)
+          }
+        }
+      })
+      return assetsNode
+    },
+    onCheck(e, treeId, treeNode) {
+      const nodes = this.getSelectedAssetsNode()
+      const nodes_names = nodes.map(function(node) {
+        return node.name
+      })
+      let message = `已选择资产:`
+      message += nodes_names.join(', ')
+      message += '\r\n'
+      message += `总共：${nodes_names.length} 个\r\n`
+      this.xterm.clear()
+      this.xterm.write(message)
+    },
+    enableWS() {
+      const scheme = document.location.protocol === 'https:' ? 'wss' : 'ws'
+      const port = document.location.port ? ':' + document.location.port : ''
+      const url = '/ws/ops/tasks/log/'
+      const wsURL = scheme + '://' + document.location.hostname + port + url
+      const failOverPort = '8070'
+      const failOverWsURL = scheme + '://' + document.location.hostname + ':' + failOverPort + url
+      this.ws = new WebSocket(wsURL)
+      this.ws.onerror = (e) => {
+        this.ws = new WebSocket(failOverWsURL)
+        this.ws.onmessage = (e) => {
+          const data = JSON.parse(e.data)
+          this.xterm.write(data.message)
+        }
+        this.ws.onerror = (e) => {
+          this.xterm.write('Connect websocket server error')
+        }
+      }
+      this.ws.onmessage = (e) => {
+        const data = JSON.parse(e.data)
+        this.xterm.write(data.message)
+      }
+    },
+    wrapperError(msg) {
+      return '\\033[31m' + msg + '\\033[0m\r\n'
+    },
+    execute() {
+      // const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
+      // const url = '{% url "api-ops:command-execution-list" %}?' + size
+      const run_as = this.selectedSystemuser()
+      // const command = editor.getValue()
+      const hosts = this.getSelectedAssetsNode().map(function(node) {
+        return node.id
+      })
+      if (hosts.length === 0) {
+        this.xterm.write(this.wrapperError("{% trans 'Unselected assets' %}"))
+        return
+      }
+      // if (!command) {
+      //   this.xterm.write(this.wrapperError("{% trans 'No input command' %}"))
+      //   return
+      // }
+      if (!run_as) {
+        this.xterm.write(this.wrapperError("{% trans 'No system user was selected' %}"))
+        return
+      }
     }
   }
 }
@@ -106,4 +242,9 @@ export default {
     overflow: auto;
     /*border-right: solid 1px red;*/
   }
+  .vue-codemirror-wrap /deep/ .CodeMirror{
+    width: 600px;
+    height: 100px;
+    border: 1px solid #eee;
+  }
 </style>