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. 36
      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 {
overflow: hidden;
padding: 11px 11px 0 11px;
padding: 8px 11px 0 11px;
.bar-box {
width: 36px;
height: 36px;
float: left;
margin-bottom: 8px;
margin-bottom: 3px;
border-radius: 3px;
.disabled {
.icos {

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

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

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

@ -141,7 +141,7 @@
<m-list-box>
<div slot="text">{{$t('Resources')}}</div>
<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>
</treeselect>
</div>
@ -173,6 +173,7 @@
name: 'flink',
data () {
return {
valueConsistsOf: 'LEAF_PRIORITY',
// Main function class
mainClass: '',
// Master jar package
@ -329,9 +330,15 @@
diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => {
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: {
// Listening type

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

@ -28,12 +28,15 @@
<m-list-box>
<div slot="text">{{$t('Resources')}}</div>
<div slot="content">
<m-resources
ref="refResources"
@on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList">
</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"
@on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList">
</m-resources> -->
</div>
</m-list-box>
@ -56,6 +59,8 @@
import mListBox from './_source/listBox'
import mResources from './_source/resources'
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 codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
@ -65,6 +70,7 @@
name: 'python',
data () {
return {
valueConsistsOf: 'LEAF_PRIORITY',
// script
rawScript: '',
// Custom parameter
@ -72,7 +78,8 @@
// resource(list)
resourceList: [],
// Cache ResourceList
cacheResourceList: []
cacheResourceList: [],
resourceOptions: [],
}
},
mixins: [disabledState],
@ -147,6 +154,18 @@
editor.setValue(this.rawScript)
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: {
@ -166,6 +185,9 @@
}
},
created () {
let item = this.store.state.dag.resourcesListS
this.diGuiTree(item)
this.options = item
let o = this.backfillItem
// 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>
<div slot="text">{{$t('Resources')}}</div>
<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>
</treeselect>
</div>
@ -81,6 +81,7 @@
name: 'shell',
data () {
return {
valueConsistsOf: 'LEAF_PRIORITY',
// script
rawScript: '',
// Custom parameter
@ -95,7 +96,9 @@
return {
label: node.name
}
}
},
allNoResources: [],
noRes: []
}
},
mixins: [disabledState],
@ -164,6 +167,11 @@
if (!this.$refs.refLocalParams._verifProp()) {
return false
}
// noRes
if (this.noRes.length>0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
// Process resourcelist
let dataProcessing= _.map(this.resourceList, v => {
return {
@ -205,8 +213,75 @@
diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => {
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: {
@ -217,10 +292,32 @@
},
computed: {
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 {
resourceList: _.map(this.resourceList, v => {
return {id: v}
}),
resourceList: resourceIdArr,
localParams: this.localParams
}
}
@ -230,29 +327,35 @@
this.diGuiTree(item)
this.options = item
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.rawScript = o.params.rawScript || ''
// backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(v.res) {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
type: 'FILE',
fullName: '/'+v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.$message.error(e.msg || '')
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {

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

@ -169,7 +169,7 @@
<m-list-box>
<div slot="text">{{$t('Resources')}}</div>
<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>
</treeselect>
</div>
@ -212,6 +212,7 @@
name: 'spark',
data () {
return {
valueConsistsOf: 'LEAF_PRIORITY',
// Main function class
mainClass: '',
// Master jar package
@ -295,9 +296,15 @@
diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => {
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
*/

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) {
this.$refs[`poptip-auth-${i}`][0].doClose()
this.getResourceList({
@ -240,6 +257,15 @@
})
let fileTargetList = []
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)=>{
if(value.type =='FILE'){
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-group>
</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>
</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>
</treeselect>
<!-- <div class="select-list-box">
@ -72,6 +72,7 @@
name: 'transfer',
data () {
return {
valueConsistsOf: 'LEAF_PRIORITY',
checkedValue: 'fileResource',
sourceList: this.fileSourceList,
targetList: this.fileTargetList,
@ -115,11 +116,70 @@
this.selectUdfSource = this.udfTargetList
},
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 () {
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
setTimeout(() => {
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)
},
_ckFile() {
@ -181,8 +241,14 @@
diGuiTree(item) { // Recursive convenience tree structure
item.forEach(item => {
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: {

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

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

Loading…
Cancel
Save