feat: 实时命令页面

src/views/ops/Adhoc/InstantAdhoc.vue

@@ -1,21 +1,41 @@
 <template>
   <el-collapse-transition>
     <div style="display: flex;justify-items: center; flex-wrap: nowrap;justify-content:space-between;">
-      <el-form ref="form" label-width="80px">
+      <div
-        <el-form-item label="选择资产">
+        v-show="iShowTree"
-          <el-input />
+        :style="{width: iShowTree?'20%': 0}"
-        </el-form-item>
+        class="transition-box tree-box"
-        <el-form-item label="选择账号">
+      >
-          <el-input />
+        <AutoDataZTree
-        </el-form-item>
+          ref="AutoDataZTree"
-      </el-form>
+          :key="DataZTree"
+          :setting="treeSetting"
+          class="auto-data-ztree"
+        />
+      </div>
       <div :style="iShowTree?('display: flex;width: 80%;'):('display: flex;width:100%;')">
-        <IBox class="transition-box" style="width: calc(100% - 17px);">
+        <div class="mini">
-          <div style="margin-bottom: 20px">
+          <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
-            <CodeEditor />
+            <i v-show="iShowTree" class="fa fa-angle-left fa-x" /><i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
           </div>
-          Output
+        </div>
+        <IBox class="transition-box" style="width: calc(100% - 17px);">
+          <el-form label-width="160px">
+            <el-form-item label="runas">
+              <el-input v-model="runas" />
+            </el-form-item>
+            <el-form-item label="runas policy">
+              <el-select v-model="runasPolicy">
+                <el-option v-for="(item,index) of runasPolicyOptions" :key="index" :value="item">
+                  {{ item.label }}
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+
+          <CodeEditor style="margin-bottom: 20px" :toolbar="toolbar" />
           <Term ref="xterm" />
+          <div style="display: flex;margin-top:10px;justify-content: space-between" />
         </IBox>
       </div>
     </div>
@@ -23,6 +43,7 @@
 </template>
 
 <script>
+import AutoDataZTree from '@/components/AutoDataZTree'
 import Term from '@/components/Term'
 import IBox from '@/components/IBox'
 import CodeEditor from '@/components/FormFields/CodeEditor'
@@ -31,37 +52,46 @@ export default {
   name: 'CommandExecution',
   components: {
     Term,
+    AutoDataZTree,
     IBox,
     CodeEditor
   },
   data() {
     return {
-      languageOptions: [
+      DataZTree: 0,
+      runas: 'root',
+      runasPolicy: 'skip',
+      command: '',
+      runasPolicyOptions: [
         {
-          label: 'Shell',
+          label: 'skip',
-          value: 'shell'
+          value: 'skip'
+        }, {
+          label: 'Privileged First',
+          value: 'privileged_first'
         },
         {
-          label: 'Python',
+          label: 'Privileged Only',
-          value: 'python'
+          value: 'privileged_only'
-        },
+        }
-        {
+      ],
-          label: 'Ruby',
+      toolbar: [
-          value: 'ruby'
+        {
-        },
+          type: 'button',
-        {
+          icon: 'fa  fa-play',
-          label: 'PowerShell',
+          tip: 'Run command',
-          value: 'powershell'
+          callback: () => {
+            this.execute()
+          }
         }
       ],
-      DataZTree: 0,
       codeMirrorOptions: {
         lineNumbers: true,
         lineWrapping: true,
         mode: 'shell'
       },
       treeSetting: {
-        treeUrl: '/api/v1/perms/users/nodes-with-assets/tree/',
+        treeUrl: '',
         showRefresh: true,
         showMenu: false,
         showSearch: true,
@@ -87,24 +117,17 @@ export default {
             isMove: true
           }
         },
-        callback: {
-          onCheck: this.onCheck.bind(this)
-        },
         async: {
           enable: false
         }
       },
       iShowTree: true,
-      actions: '',
+      basicUrl: '/api/v1/perms/users/nodes-with-assets/tree/?cache_policy=1',
-      options: [],
       ws: '',
       wsConnected: false
     }
   },
   computed: {
-    codemirror() {
-      return this.$refs.myCm.codemirror
-    },
     zTree() {
       return this.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree.zTree
     },
@@ -113,63 +136,29 @@ export default {
     }
   },
   mounted() {
-    this.fetchAccountUsernames()
+    this.handleSystemUserChange('')
-    this.xterm.write(this.$t('ops.selectAssetsMessage'))
     this.enableWS()
   },
   methods: {
-    fetchAccountUsernames() {
+    handleSystemUserChange(id) {
-      const temp = {}
+      this.treeSetting.treeUrl = this.basicUrl
-      this.$axios.get('/api/v1/assets/accounts/',).then(data => {
+      this.xterm.clear()
-        data.forEach((item) => {
+      this.DataZTree++
-          temp[item.username] = {}
-        })
-        for (const key of Object.keys(temp)) {
-          this.accountConfig.usernameOptions.push({ 'label': key, 'value': key })
-        }
-      })
-    },
-    onChangeLanguage() {
-      this.codemirror.setOption('mode', this.scriptMeta.language)
-    },
-    onOpenScriptListDialog() {
-      this.showScriptListDialog = true
-    },
-    onOpenScriptSaveDialog() {
-      this.showScriptAddDialog = true
-    },
-    onOpenAccountPolicyDialog() {
-      this.showAccountPolicyDialog = true
-    },
-    onSelectScript(scriptId) {
-      this.$axios.get(`/api/v1/ops/scripts/${scriptId}`).then((data) => {
-        this.scriptMeta.content = data['content']
-      })
-    },
-    onSelectAccountPolicy(policy) {
-      this.accountConfig.accountPolicy = policy
     },
     getSelectedAssetsNode() {
       const nodes = this.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree.getCheckedNodes()
-      const assetsNode = []
+      // const assetsNodeId = []
-      nodes.forEach(function(node) {
+      // const assetsNode = []
-        if (node.meta.type === 'asset' && !node.isHidden) {
+      // nodes.forEach(function (node) {
-          assetsNode.push(node)
+      //   if (node.meta.type === 'asset' && !node.isHidden) {
-        }
+      //     const protocolsStr = node.meta.data.protocols + ''
-      })
+      //     if (assetsNodeId.indexOf(node.id) === -1 && protocolsStr.indexOf('ssh') > -1) {
-      return assetsNode
+      //       assetsNodeId.push(node.id)
-    },
+      //       assetsNode.push(node)
-    onCheck(e, treeId, treeNode) {
+      //     }
-      const nodes = this.getSelectedAssetsNode()
+      //   }
-      const nodes_names = nodes.map(function(node) {
+      // })
-        return node.name
+      return nodes
-      })
-      let message = this.$t('ops.selectedAssets')
-      message += nodes_names.join(', ')
-      message += '\r\n'
-      message += this.$t('ops.inTotal') + `：${nodes_names.length} \r\n`
-      this.xterm.clear()
-      this.xterm.write(message)
     },
     enableWS() {
       const scheme = document.location.protocol === 'https:' ? 'wss' : 'ws'
@@ -200,34 +189,27 @@ export default {
       this.ws.send(msg)
     },
     execute() {
-      const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
+      // const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
-      const url = '/api/v1/ops/command-executions/?' + size
+      const url = '/api/v1/ops/jobs/?'
-      const runAs = this.accountConfig.selectedUsername
-      const command = this.scriptMeta.content
       const hosts = this.getSelectedAssetsNode().map(function(node) {
         return node.id
       })
-      if (hosts.length === 0) {
-        this.xterm.write(this.wrapperError(this.$t('assets.UnselectedAssets')))
-        return
-      }
-      if (!command) {
-        this.xterm.write(this.wrapperError(this.$t('assets.NoInputCommand')))
-        return
-      }
-      if (!runAs) {
-        this.xterm.write(this.wrapperError(this.$t('assets.NoSystemUserWasSelected')))
-        return
-      }
       const data = {
-        hosts: hosts,
+        assets: hosts,
-        run_as: runAs,
+        run_as: this.runas,
-        command: command
+        run_as_policy: this.runasPolicy,
+        instant: true,
+        is_periodic: false
       }
       this.$axios.post(
         url, data
       ).then(res => {
-        this.writeExecutionOutput(res.id)
+        console.log(res)
+        setTimeout(() => {
+          this.$axios.get(`/api/v1/ops/jobs/${res.id}/`).then((data) => {
+            this.writeExecutionOutput(data.task_id)
+          }, 100)
+        })
       })
     }
   }
@@ -235,11 +217,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-> > > .el-input input {
-  height: 100%;
-}
-
 .mini-button {
   width: 12px;
   float: right;
@@ -266,8 +243,8 @@ export default {
 }
 
 .vue-codemirror-wrap ::v-deep .CodeMirror {
-  //width: calc(100% - 17px);
+  width: 600px;
-  height: 480px;
+  height: 100px;
   border: 1px solid #eee;
 }
 

src/views/ops/Job/JobUpdateCreate.vue

@@ -48,6 +48,16 @@ export default {
             return this.instantTask
           }
         },
+        comment: {
+          hidden: () => {
+            return this.instantTask
+          }
+        },
+        type: {
+          hidden: () => {
+            return this.instantTask
+          }
+        },
         module: {
           label: this.$t('ops.Module'),
           hidden: (formValue) => {
@@ -107,15 +117,21 @@ export default {
           label: '保存后立即执行',
           type: 'checkbox',
           hidden: (formValue) => {
-            return formValue.instant
+            return this.instantTask
           }
         },
         use_parameter_define: {
           label: this.$t('ops.UseParameterDefine'),
-          type: 'switch'
+          type: 'switch',
+          hidden: () => {
+            return this.instantTask
+          }
         },
         is_periodic: {
-          type: 'switch'
+          type: 'switch',
+          hidden: () => {
+            return this.instantTask
+          }
         },
         crontab: {
           type: 'cronTab',
@@ -153,14 +169,6 @@ export default {
     }
   },
   methods: {
-    openAdhocSelectDialog() {
-      this.showOpenAdhocDialog = true
-    },
-    onSelectAdhoc(item) {
-
-    },
-    onOpenSaveAdhocDialog() {
-    }
   }
 }