Browse Source
* add plugin waterdrop * add plugin waterdrop * add plugin waterdrop * fix deploy mode error * Update en_US.js fix conflict * Update en_US.js fix conflict * Update en_US.js Add missing commas * Update zh_CN.js Add missing commas * Update waterdrop.vue Fix the no resource hint * Update zh_CN.js Add 'Please select the waterdrop resources' * Update en_US.js Add 'Please select the waterdrop resources' * Update waterdrop.vue fix bug when click the waterdrop node again, it still show the `client` mode in deploy mode Co-authored-by: dailidong <dailidong66@gmail.com>pull/3/MERGE
xsbai
4 years ago
committed by
GitHub
10 changed files with 497 additions and 1 deletions
@ -0,0 +1,467 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
<template> |
||||
<div class="shell-model"> |
||||
<!--deploy mode--> |
||||
<div class="list-box-4p"> |
||||
<div class="clearfix list"> |
||||
<span class="sp1">{{$t('Deploy Mode')}}</span> |
||||
<span class="sp2"> |
||||
<x-radio-group v-model="deployMode"> |
||||
<x-radio :label="'client'" :disabled="isDetails"></x-radio> |
||||
<x-radio :label="'cluster'" :disabled="isDetails"></x-radio> |
||||
<x-radio :label="'local'" :disabled="isDetails"></x-radio> |
||||
</x-radio-group> |
||||
</span> |
||||
<span class="sp1 sp3">{{$t('Queue')}}</span> |
||||
<span class="sp4"> |
||||
<x-input |
||||
:disabled="isDetails" |
||||
type="input" |
||||
v-model="queue" |
||||
:placeholder="$t('Please enter queue value')" |
||||
style="width: 60%;" |
||||
autocomplete="off"> |
||||
</x-input> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<!--master--> |
||||
<div class="list-box-4p" v-if="deployMode !== 'local'"> |
||||
<div class="clearfix list"> |
||||
<span class="sp1">{{$t('Master')}}</span> |
||||
<span class="sp4"> |
||||
<x-select |
||||
style="width: 130px;" |
||||
v-model="master" |
||||
:disabled="isDetails"> |
||||
<x-option |
||||
v-for="city in masterType" |
||||
:key="city.code" |
||||
:value="city.code" |
||||
:label="city.code"> |
||||
</x-option> |
||||
</x-select> |
||||
</span> |
||||
<span v-if="masterUrlState"> |
||||
<x-input |
||||
:disabled="isDetails" |
||||
type="input" |
||||
v-model="masterUrl" |
||||
:placeholder="$t('Please Enter Url')" |
||||
style="width: 60%;" |
||||
autocomplete="off"> |
||||
</x-input> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<!--config file--> |
||||
<m-list-box> |
||||
<div slot="text">{{$t('Resources')}}</div> |
||||
<div slot="content"> |
||||
<treeselect v-model="resourceList" :disable-branch-nodes="true" :multiple="true" :options="options" :normalizer="normalizer" :disabled="isDetails" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')"> |
||||
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div> |
||||
</treeselect> |
||||
</div> |
||||
</m-list-box> |
||||
<!--custom parameters--> |
||||
<m-list-box> |
||||
<div slot="text">{{$t('Custom Parameters')}}</div> |
||||
<div slot="content"> |
||||
<m-local-params |
||||
ref="refLocalParams" |
||||
@on-local-params="_onLocalParams" |
||||
:udp-list="localParams" |
||||
:hide="false"> |
||||
</m-local-params> |
||||
</div> |
||||
</m-list-box> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import _ from 'lodash' |
||||
import i18n from '@/module/i18n' |
||||
import mListBox from './_source/listBox' |
||||
import mScriptBox from './_source/scriptBox' |
||||
import mResources from './_source/resources' |
||||
import mLocalParams from './_source/localParams' |
||||
import disabledState from '@/module/mixin/disabledState' |
||||
import Treeselect from '@riophae/vue-treeselect' |
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
||||
|
||||
export default { |
||||
name: 'waterdrop', |
||||
data () { |
||||
return { |
||||
valueConsistsOf: 'LEAF_PRIORITY', |
||||
// script |
||||
rawScript: '', |
||||
// waterdrop script |
||||
baseScript: 'sh ${WATERDROP_HOME}/bin/start-waterdrop.sh', |
||||
// resourceNameVal |
||||
resourceNameVal : [], |
||||
// Custom parameter |
||||
localParams: [], |
||||
// resource(list) |
||||
resourceList: [], |
||||
// Deployment method |
||||
deployMode: 'client', |
||||
// Deployment master |
||||
queue: 'default', |
||||
// Deployment master |
||||
master: 'yarn', |
||||
// Spark version(LIst) |
||||
masterType: [{ code: 'yarn' }, { code: 'local' }, { code: 'spark://' }, { code: 'mesos://' }], |
||||
// Deployment masterUrl state |
||||
masterUrlState:false, |
||||
// Deployment masterUrl |
||||
masterUrl: '', |
||||
// Cache ResourceList |
||||
cacheResourceList: [], |
||||
// define options |
||||
options: [], |
||||
normalizer(node) { |
||||
return { |
||||
label: node.name |
||||
} |
||||
}, |
||||
allNoResources: [], |
||||
noRes: [] |
||||
} |
||||
}, |
||||
mixins: [disabledState], |
||||
props: { |
||||
backfillItem: Object |
||||
}, |
||||
methods: { |
||||
/** |
||||
* return localParams |
||||
*/ |
||||
_onLocalParams (a) { |
||||
this.localParams = a |
||||
}, |
||||
/** |
||||
* return resourceList |
||||
* |
||||
*/ |
||||
_onResourcesData (a) { |
||||
this.resourceList = a |
||||
}, |
||||
/** |
||||
* cache resourceList |
||||
*/ |
||||
_onCacheResourcesData (a) { |
||||
this.cacheResourceList = a |
||||
}, |
||||
/** |
||||
* verification |
||||
*/ |
||||
_verification () { |
||||
// localParams Subcomponent verification |
||||
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 |
||||
} |
||||
// noRes |
||||
if (!this.resourceNameVal.resourceList) { |
||||
this.$message.warning(`${i18n.$t('Please select the waterdrop resources')}`) |
||||
return false |
||||
} |
||||
if (this.resourceNameVal.resourceList && this.resourceNameVal.resourceList.length==0) { |
||||
this.$message.warning(`${i18n.$t('Please select the waterdrop resources')}`) |
||||
return false |
||||
} |
||||
// Process resourcelist |
||||
let dataProcessing= _.map(this.resourceList, v => { |
||||
return { |
||||
id: v |
||||
} |
||||
}) |
||||
//verify deploy mode |
||||
let deployMode = this.deployMode |
||||
let master = this.master |
||||
let masterUrl = this.masterUrl |
||||
|
||||
if(this.deployMode == 'local'){ |
||||
master = 'local' |
||||
masterUrl = '' |
||||
deployMode = 'client' |
||||
} |
||||
// get local params |
||||
let locparams = '' |
||||
this.localParams.forEach(v=>{ |
||||
locparams = locparams + ' --variable ' + v.prop + '=' + v.value |
||||
} |
||||
) |
||||
// get waterdrop script |
||||
let tureScript = '' |
||||
this.resourceNameVal.resourceList.forEach(v=>{ |
||||
tureScript = tureScript + this.baseScript + |
||||
' --master '+ master + masterUrl + |
||||
' --deploy-mode '+ deployMode + |
||||
' --queue '+ this.queue + |
||||
' --config ' + v.res + |
||||
locparams + ' \n' |
||||
}) |
||||
|
||||
// storage |
||||
this.$emit('on-params', { |
||||
resourceList: dataProcessing, |
||||
localParams: this.localParams, |
||||
rawScript: tureScript, |
||||
}) |
||||
|
||||
return true |
||||
}, |
||||
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 |
||||
}, |
||||
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('Unauthorized or deleted resources'), |
||||
fullName: '/'+$t('Unauthorized or deleted 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 the cacheParams |
||||
cacheParams (val) { |
||||
this.resourceNameVal = val |
||||
this.$emit('on-cache-params', val); |
||||
}, |
||||
"master": { |
||||
handler(code) { |
||||
if(code == 'spark://'){ |
||||
this.masterUrlState = true; |
||||
}else if(code == 'mesos://'){ |
||||
this.masterUrlState = true; |
||||
}else{ |
||||
this.masterUrlState = false; |
||||
this.masterUrl = '' |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
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: resourceIdArr, |
||||
localParams: this.localParams, |
||||
deployMode: this.deployMode, |
||||
master: this.master, |
||||
masterUrl: this.masterUrl, |
||||
queue:this.queue, |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
let item = this.store.state.dag.resourcesListS |
||||
this.diGuiTree(item) |
||||
this.options = item |
||||
let o = this.backfillItem |
||||
|
||||
// Non-null objects represent backfill |
||||
if (!_.isEmpty(o)) { |
||||
this.master = o.params.master || 'yarn' |
||||
this.deployMode = o.params.deployMode || 'client' |
||||
this.masterUrl = o.params.masterUrl || '' |
||||
this.queue = o.params.queue || 'default' |
||||
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.id) { |
||||
this.store.dispatch('dag/getResourceId',{ |
||||
type: 'FILE', |
||||
fullName: '/'+v.res |
||||
}).then(res => { |
||||
this.resourceList.push(res.id) |
||||
this.dataProcess(backResource) |
||||
}).catch(e => { |
||||
this.resourceList.push(v.res) |
||||
this.dataProcess(backResource) |
||||
}) |
||||
} else { |
||||
this.resourceList.push(v.id) |
||||
this.dataProcess(backResource) |
||||
} |
||||
}) |
||||
} |
||||
// backfill localParams |
||||
let localParams = o.params.localParams || [] |
||||
if (localParams.length) { |
||||
this.localParams = localParams |
||||
} |
||||
} |
||||
}, |
||||
mounted () { |
||||
}, |
||||
destroyed () { |
||||
}, |
||||
components: { mLocalParams, mListBox, mResources, mScriptBox, Treeselect } |
||||
} |
||||
</script> |
||||
<style lang="scss" rel="stylesheet/scss" scope> |
||||
.scriptModal { |
||||
.ans-modal-box-content-wrapper { |
||||
width: 90%; |
||||
.ans-modal-box-close { |
||||
right: -12px; |
||||
top: -16px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.ans-modal-box-close { |
||||
z-index: 100; |
||||
} |
||||
.ans-modal-box-max { |
||||
position: absolute; |
||||
right: -12px; |
||||
top: -16px; |
||||
} |
||||
.vue-treeselect--disabled { |
||||
.vue-treeselect__control { |
||||
background-color: #ecf3f8; |
||||
.vue-treeselect__single-value { |
||||
color: #6d859e; |
||||
} |
||||
} |
||||
} |
||||
.list-box-4p { |
||||
.list { |
||||
margin-bottom: 14px; |
||||
.sp1 { |
||||
float: left; |
||||
width: 112px; |
||||
text-align: right; |
||||
margin-right: 10px; |
||||
font-size: 14px; |
||||
color: #777; |
||||
display: inline-block; |
||||
padding-top: 6px; |
||||
} |
||||
.sp2 { |
||||
float: left; |
||||
margin-right: 4px; |
||||
padding-top: 6px; |
||||
} |
||||
.sp3 { |
||||
width: 90px; |
||||
} |
||||
.sp4 { |
||||
float: left; |
||||
margin-right: 4px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue