Browse Source

Optimize resource tree

pull/3/MERGE
break60 5 years ago committed by gaojun2048
parent
commit
b13c768fc9
  1. 4
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
  2. 4
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
  3. 11
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
  4. 28
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
  5. 119
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
  6. 11
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
  7. 26
      dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue
  8. 74
      dolphinscheduler-ui/src/js/module/components/transfer/resource.vue
  9. 4
      dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
  10. 2
      dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

4
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss

@ -130,12 +130,12 @@
} }
.toolbar-btn { .toolbar-btn {
overflow: hidden; overflow: hidden;
padding: 11px 11px 0 11px; padding: 8px 11px 0 11px;
.bar-box { .bar-box {
width: 36px; width: 36px;
height: 36px; height: 36px;
float: left; float: left;
margin-bottom: 8px; margin-bottom: 3px;
border-radius: 3px; border-radius: 3px;
.disabled { .disabled {
.icos { .icos {

4
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@ -177,7 +177,7 @@
Endpoint: [ Endpoint: [
'Dot', { radius: 1, cssClass: 'dot-style' } 'Dot', { radius: 1, cssClass: 'dot-style' }
], ],
Connector: 'Straight', Connector: 'Bezier',
PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
ConnectionOverlays: [ ConnectionOverlays: [
[ [
@ -606,7 +606,7 @@
Endpoint: [ Endpoint: [
'Dot', { radius: 1, cssClass: 'dot-style' } 'Dot', { radius: 1, cssClass: 'dot-style' }
], ],
Connector: 'Straight', Connector: 'Bezier',
PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
ConnectionOverlays: [ ConnectionOverlays: [
[ [

11
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue

@ -141,7 +141,7 @@
<m-list-box> <m-list-box>
<div slot="text">{{$t('Resources')}}</div> <div slot="text">{{$t('Resources')}}</div>
<div slot="content"> <div slot="content">
<treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :placeholder="$t('Please select resources')"> <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect> </treeselect>
</div> </div>
@ -173,6 +173,7 @@
name: 'flink', name: 'flink',
data () { data () {
return { return {
valueConsistsOf: 'LEAF_PRIORITY',
// Main function class // Main function class
mainClass: '', mainClass: '',
// Master jar package // Master jar package
@ -329,9 +330,15 @@
diGuiTree(item) { // Recursive convenience tree structure diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => { item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?         item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?        
delete item.children : this.diGuiTree(item.children); this.operationTree(item) : this.diGuiTree(item.children);
}) })
}, },
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
}
delete item.children
},
}, },
watch: { watch: {
// Listening type // Listening type

28
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue

@ -28,12 +28,15 @@
<m-list-box> <m-list-box>
<div slot="text">{{$t('Resources')}}</div> <div slot="text">{{$t('Resources')}}</div>
<div slot="content"> <div slot="content">
<m-resources <treeselect v-model="resourceList" :multiple="true" :options="resourceOptions" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect>
<!-- <m-resources
ref="refResources" ref="refResources"
@on-resourcesData="_onResourcesData" @on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData" @on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList"> :resource-list="resourceList">
</m-resources> </m-resources> -->
</div> </div>
</m-list-box> </m-list-box>
@ -56,6 +59,8 @@
import mListBox from './_source/listBox' import mListBox from './_source/listBox'
import mResources from './_source/resources' import mResources from './_source/resources'
import mLocalParams from './_source/localParams' import mLocalParams from './_source/localParams'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import disabledState from '@/module/mixin/disabledState' import disabledState from '@/module/mixin/disabledState'
import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror' import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
@ -65,6 +70,7 @@
name: 'python', name: 'python',
data () { data () {
return { return {
valueConsistsOf: 'LEAF_PRIORITY',
// script // script
rawScript: '', rawScript: '',
// Custom parameter // Custom parameter
@ -72,7 +78,8 @@
// resource(list) // resource(list)
resourceList: [], resourceList: [],
// Cache ResourceList // Cache ResourceList
cacheResourceList: [] cacheResourceList: [],
resourceOptions: [],
} }
}, },
mixins: [disabledState], mixins: [disabledState],
@ -147,6 +154,18 @@
editor.setValue(this.rawScript) editor.setValue(this.rawScript)
return editor return editor
},
diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?        
this.operationTree(item) : this.diGuiTree(item.children);
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
}
delete item.children
} }
}, },
watch: { watch: {
@ -166,6 +185,9 @@
} }
}, },
created () { created () {
let item = this.store.state.dag.resourcesListS
this.diGuiTree(item)
this.options = item
let o = this.backfillItem let o = this.backfillItem
// Non-null objects represent backfill // Non-null objects represent backfill

119
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue

@ -34,7 +34,7 @@
<m-list-box> <m-list-box>
<div slot="text">{{$t('Resources')}}</div> <div slot="text">{{$t('Resources')}}</div>
<div slot="content"> <div slot="content">
<treeselect v-model="resourceList" :multiple="true" :options="options" :normalizer="normalizer" :placeholder="$t('Please select resources')"> <treeselect v-model="resourceList" :multiple="true" :options="options" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect> </treeselect>
</div> </div>
@ -81,6 +81,7 @@
name: 'shell', name: 'shell',
data () { data () {
return { return {
valueConsistsOf: 'LEAF_PRIORITY',
// script // script
rawScript: '', rawScript: '',
// Custom parameter // Custom parameter
@ -95,7 +96,9 @@
return { return {
label: node.name label: node.name
} }
} },
allNoResources: [],
noRes: []
} }
}, },
mixins: [disabledState], mixins: [disabledState],
@ -164,6 +167,11 @@
if (!this.$refs.refLocalParams._verifProp()) { if (!this.$refs.refLocalParams._verifProp()) {
return false return false
} }
// noRes
if (this.noRes.length>0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
// Process resourcelist // Process resourcelist
let dataProcessing= _.map(this.resourceList, v => { let dataProcessing= _.map(this.resourceList, v => {
return { return {
@ -205,8 +213,75 @@
diGuiTree(item) { // Recursive convenience tree structure diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => { item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?         item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?        
delete item.children : this.diGuiTree(item.children); this.operationTree(item) : this.diGuiTree(item.children);
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
}
delete item.children
},
searchTree(element, id) {
// id
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
}
return result;
}
return null;
},
dataProcess(backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
optionsCmp.push(item1)
}
}) })
})
}
let noResources = [{
id: -1,
name: $t('No resources'),
fullName: '/'+$t('No resources'),
children: []
}]
if(optionsCmp.length>0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
})
optionsCmp.forEach(item=>{
item.isNew = true
})
noResources[0].children = optionsCmp
this.options = this.options.concat(noResources)
}
}
} }
}, },
watch: { watch: {
@ -217,10 +292,32 @@
}, },
computed: { computed: {
cacheParams () { cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
// resultBool = true
result.push(item1)
}
})
})
this.noRes = result
return { return {
resourceList: _.map(this.resourceList, v => { resourceList: resourceIdArr,
return {id: v}
}),
localParams: this.localParams localParams: this.localParams
} }
} }
@ -230,29 +327,35 @@
this.diGuiTree(item) this.diGuiTree(item)
this.options = item this.options = item
let o = this.backfillItem let o = this.backfillItem
// Non-null objects represent backfill // Non-null objects represent backfill
if (!_.isEmpty(o)) { if (!_.isEmpty(o)) {
this.rawScript = o.params.rawScript || '' this.rawScript = o.params.rawScript || ''
// backfill resourceList // backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || [] let resourceList = o.params.resourceList || []
if (resourceList.length) { if (resourceList.length) {
_.map(resourceList, v => { _.map(resourceList, v => {
if(v.res) { if(!v.id) {
this.store.dispatch('dag/getResourceId',{ this.store.dispatch('dag/getResourceId',{
type: 'FILE', type: 'FILE',
fullName: '/'+v.res fullName: '/'+v.res
}).then(res => { }).then(res => {
this.resourceList.push(res.id) this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => { }).catch(e => {
this.$message.error(e.msg || '') this.resourceList.push(v.res)
this.dataProcess(backResource)
}) })
} else { } else {
this.resourceList.push(v.id) this.resourceList.push(v.id)
this.dataProcess(backResource)
} }
}) })
this.cacheResourceList = resourceList this.cacheResourceList = resourceList
} }
// backfill localParams // backfill localParams
let localParams = o.params.localParams || [] let localParams = o.params.localParams || []
if (localParams.length) { if (localParams.length) {

11
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue

@ -169,7 +169,7 @@
<m-list-box> <m-list-box>
<div slot="text">{{$t('Resources')}}</div> <div slot="text">{{$t('Resources')}}</div>
<div slot="content"> <div slot="content">
<treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :placeholder="$t('Please select resources')"> <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect> </treeselect>
</div> </div>
@ -212,6 +212,7 @@
name: 'spark', name: 'spark',
data () { data () {
return { return {
valueConsistsOf: 'LEAF_PRIORITY',
// Main function class // Main function class
mainClass: '', mainClass: '',
// Master jar package // Master jar package
@ -295,9 +296,15 @@
diGuiTree(item) { // Recursive convenience tree structure diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => { item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?         item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?        
delete item.children : this.diGuiTree(item.children); this.operationTree(item) : this.diGuiTree(item.children);
}) })
}, },
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
}
delete item.children
},
/** /**
* verification * verification
*/ */

26
dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue

@ -215,6 +215,23 @@
}) })
}) })
}, },
/*
getAllLeaf
*/
getAllLeaf (data) {
let result = []
let getLeaf = (data)=> {
data.forEach(item => {
if (item.children.length==0) {
result.push(item)
} else {
getLeaf(item.children)
}
})
}
getLeaf(data)
return result
},
_authFile (item, i) { _authFile (item, i) {
this.$refs[`poptip-auth-${i}`][0].doClose() this.$refs[`poptip-auth-${i}`][0].doClose()
this.getResourceList({ this.getResourceList({
@ -240,6 +257,15 @@
}) })
let fileTargetList = [] let fileTargetList = []
let udfTargetList = [] let udfTargetList = []
let pathId = []
data[1].forEach(v=>{
let arr = []
arr[0] = v
if(this.getAllLeaf(arr).length>0) {
pathId.push(this.getAllLeaf(arr)[0])
}
})
data[1].forEach((value,index,array)=>{ data[1].forEach((value,index,array)=>{
if(value.type =='FILE'){ if(value.type =='FILE'){
fileTargetList.push(value) fileTargetList.push(value)

74
dolphinscheduler-ui/src/js/module/components/transfer/resource.vue

@ -24,10 +24,10 @@
<x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button> <x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button>
</x-button-group> </x-button-group>
</div> </div>
<treeselect v-show="checkedValue=='fileResource'" v-model="selectFileSource" :multiple="true" :options="fileList" :normalizer="normalizer" :placeholder="$t('Please select resources')"> <treeselect v-show="checkedValue=='fileResource'" v-model="selectFileSource" :multiple="true" :options="fileList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect> </treeselect>
<treeselect v-show="checkedValue=='udfResource'" v-model="selectUdfSource" :multiple="true" :options="udfList" :normalizer="normalizer" :placeholder="$t('Please select resources')"> <treeselect v-show="checkedValue=='udfResource'" v-model="selectUdfSource" :multiple="true" :options="udfList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect> </treeselect>
<!-- <div class="select-list-box"> <!-- <div class="select-list-box">
@ -72,6 +72,7 @@
name: 'transfer', name: 'transfer',
data () { data () {
return { return {
valueConsistsOf: 'LEAF_PRIORITY',
checkedValue: 'fileResource', checkedValue: 'fileResource',
sourceList: this.fileSourceList, sourceList: this.fileSourceList,
targetList: this.fileTargetList, targetList: this.fileTargetList,
@ -115,11 +116,70 @@
this.selectUdfSource = this.udfTargetList this.selectUdfSource = this.udfTargetList
}, },
methods: { methods: {
/*
getParent
*/
getParent(data2, nodeId2) {
var arrRes = [];
if (data2.length == 0) {
if (!!nodeId2) {
arrRes.unshift(data2)
}
return arrRes;
}
let rev = (data, nodeId) => {
for (var i = 0, length = data.length; i < length; i++) {
let node = data[i];
if (node.id == nodeId) {
arrRes.unshift(node)
rev(data2, node.pid);
break;
}
else {
if (!!node.children) {
rev(node.children, nodeId);
}
}
}
return arrRes;
};
arrRes = rev(data2, nodeId2);
return arrRes;
},
_ok () { _ok () {
let fullPathId = []
let pathId = []
this.selectFileSource.forEach(v=>{
this.fileList.forEach(v1=>{
let arr = []
arr[0] = v1
if(this.getParent(arr, v).length>0) {
fullPathId = this.getParent(arr, v).map(v2=>{
return v2.id
})
pathId.push(fullPathId.join('-'))
}
})
})
let fullUdfPathId = []
let pathUdfId = []
this.selectUdfSource.forEach(v=>{
this.udfList.forEach(v1=>{
let arr = []
arr[0] = v1
if(this.getParent(arr, v).length>0) {
fullUdfPathId = this.getParent(arr, v).map(v2=>{
return v2.id
})
pathUdfId.push(fullUdfPathId.join('-'))
}
})
})
let selAllSource = pathId.concat(pathUdfId)
this.$refs['popup'].spinnerLoading = true this.$refs['popup'].spinnerLoading = true
setTimeout(() => { setTimeout(() => {
this.$refs['popup'].spinnerLoading = false this.$refs['popup'].spinnerLoading = false
this.$emit('onUpdate', _.map(this.selectFileSource.concat(this.selectUdfSource), v => v).join(',')) this.$emit('onUpdate', _.map(selAllSource, v => v).join(','))
}, 800) }, 800)
}, },
_ckFile() { _ckFile() {
@ -181,8 +241,14 @@
diGuiTree(item) { // Recursive convenience tree structure diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => { item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?         item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?        
delete item.children : this.diGuiTree(item.children); this.operationTree(item): this.diGuiTree(item.children);
}) })
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
}
delete item.children
} }
}, },
watch: { watch: {

4
dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@ -584,5 +584,7 @@ export default {
'Some Columns': 'Some Columns', 'Some Columns': 'Some Columns',
'Branch flow': 'Branch flow', 'Branch flow': 'Branch flow',
'Cannot select the same node for successful branch flow and failed branch flow': 'Cannot select the same node for successful branch flow and failed branch flow', 'Cannot select the same node for successful branch flow and failed branch flow': 'Cannot select the same node for successful branch flow and failed branch flow',
'Successful branch flow and failed branch flow are required': 'Successful branch flow and failed branch flow are required' 'Successful branch flow and failed branch flow are required': 'Successful branch flow and failed branch flow are required',
'No resources': 'No resources',
'Please delete all non-existent resources': 'Please delete all non-existent resources',
} }

2
dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@ -585,4 +585,6 @@ export default {
'Branch flow': '分支流转', 'Branch flow': '分支流转',
'Cannot select the same node for successful branch flow and failed branch flow': '成功分支流转和失败分支流转不能选择同一个节点', 'Cannot select the same node for successful branch flow and failed branch flow': '成功分支流转和失败分支流转不能选择同一个节点',
'Successful branch flow and failed branch flow are required': '成功分支流转和失败分支流转必填', 'Successful branch flow and failed branch flow are required': '成功分支流转和失败分支流转必填',
'No resources': '未授权或已删除资源',
'Please delete all non-existent resources': '请删除所有未授权或已删除资源',
} }

Loading…
Cancel
Save