mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-19 01:11:07 +00:00
Merge branch 'master' of github.com:jumpserver/lina
This commit is contained in:
ibuler
@@ -43,7 +43,6 @@ export default {
|
||||
this.xterm.write(val)
|
||||
},
|
||||
changeSelectedAssets() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user