natas_hw
/
dolphinscheduler
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Fix-6139][UI] fix some bugs in UI (#6163) 

* Disable delete button when the process is online

* the jump affirm

* process tree code

* put the processInstanceId of Gantt

* fix kinship bugs

* modify lineage id to code
This commit is contained in:
Wangyizhi1 2021-09-10 20:12:34 +08:00 committed by GitHub
parent f75b5be28f
commit 42966bea97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 110 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
View File

@ -85,9 +85,7 @@
contextMenu
},
computed: {
...mapState('dag', [
'tasks'
])
...mapState('dag', ['tasks'])
},
methods: {
...mapActions('dag', ['genTaskCodeList']),
@ -237,7 +235,9 @@
this.graph.on('cell:mouseenter', (data) => {
const { cell, e } = data
const isStatusIcon = (tagName) =>
tagName && (tagName.toLocaleLowerCase() === 'em' || tagName.toLocaleLowerCase() === 'body')
tagName &&
(tagName.toLocaleLowerCase() === 'em' ||
tagName.toLocaleLowerCase() === 'body')
if (!isStatusIcon(e.target.tagName)) {
this.setHighlight(cell)
}
@ -381,42 +381,38 @@
* @param {Edge} edge
*/
setEdgeHighlight (edge) {
edge.setAttrs(EDGE_HIGHLIGHT_PROPS.attrs)
const labelName = this.getEdgeLabelName(edge)
if (labelName) {
edge.setLabels([
_.merge(EDGE_HIGHLIGHT_PROPS.defaultLabel, {
attrs: {
label: {
text: labelName
}
}
})
])
}
edge.setAttrs(EDGE_HIGHLIGHT_PROPS.attrs)
edge.setLabels([
_.merge(
{
attrs: _.cloneDeep(EDGE_HIGHLIGHT_PROPS.defaultLabel.attrs)
},
{
attrs: { label: { text: labelName } }
}
)
])
},
/**
* Reset edge style
* @param {Edge} edge
*/
resetEdgeStyle (edge) {
edge.setAttrs(EDGE_PROPS.attrs)
const labelName = this.getEdgeLabelName(edge)
if (labelName) {
edge.setLabels([
{
attrs: {
label: {
fill: EDGE_PROPS.defaultLabel.attrs.label.fill,
text: labelName
},
body: {
stroke: EDGE_PROPS.defaultLabel.attrs.body.stroke
}
edge.setAttrs(EDGE_PROPS.attrs)
edge.setLabels([
{
..._.merge(
{
attrs: _.cloneDeep(EDGE_PROPS.defaultLabel.attrs)
},
{
attrs: { label: { text: labelName } }
}
}
])
}
)
}
])
},
/**
* Set cell highlight
@ -644,7 +640,7 @@
this.graph.removeCells(cells)
cells.forEach((cell) => {
if (cell.isNode()) {
this.removeTask(cell.id)
this.removeTask(+cell.id)
}
})
},
@ -761,12 +757,12 @@
const nodes = this.getNodes()
const edges = this.getEdges()
const nodesMap = {}
nodes.forEach(node => {
nodes.forEach((node) => {
nodesMap[node.id] = node
})
return edges
.filter(edge => edge.targetId === code)
.map(edge => nodesMap[edge.sourceId])
.filter((edge) => edge.targetId === code)
.map((edge) => nodesMap[edge.sourceId])
},
/**
* set prev nodes
@ -786,7 +782,7 @@
}
}
})
preNodeCodes.forEach(preCode => {
preNodeCodes.forEach((preCode) => {
if (currPreCodes.includes(preCode) || preCode === code) return
const edge = this.genEdgeJSON(preCode, code)
this.graph.addEdge(edge)
@ -802,12 +798,12 @@
const nodes = this.getNodes()
const edges = this.getEdges()
const nodesMap = {}
nodes.forEach(node => {
nodes.forEach((node) => {
nodesMap[node.id] = node
})
return edges
.filter(edge => edge.sourceId === code)
.map(edge => nodesMap[edge.targetId])
.filter((edge) => edge.sourceId === code)
.map((edge) => nodesMap[edge.targetId])
},
/**
* set post nodes
@ -827,7 +823,7 @@
}
}
})
postNodeCodes.forEach(postCode => {
postNodeCodes.forEach((postCode) => {
if (currPostCodes.includes(postCode) || postCode === code) return
const edge = this.genEdgeJSON(code, postCode)
this.graph.addEdge(edge)

7
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue
View File

@ -55,6 +55,7 @@
class="toolbar-operation"
:content="$t('Delete selected lines or nodes')"
placement="bottom"
v-if="!isDetails"
>
<i class="el-icon-delete" @click="removeCells"></i>
</el-tooltip>
@ -135,6 +136,7 @@
<script>
import { findComponentDownward } from '@/module/util/'
import { mapState } from 'vuex'
export default {
name: 'dag-toolbar',
@ -144,6 +146,11 @@
canvasRef: null
}
},
computed: {
...mapState('dag', [
'isDetails'
])
},
methods: {
getDagCanvasRef () {
if (this.canvasRef) {

16
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
View File

@ -137,6 +137,8 @@
}
},
mounted () {
this.setIsEditDag(false)
if (this.type === 'instance') {
this.definitionCode = this.$route.query.code
} else if (this.type === 'definition') {
@ -163,6 +165,8 @@
}
},
beforeDestroy () {
this.resetParams()
clearInterval(this.statusTimer)
window.removeEventListener('resize', this.resizeDebounceFunc)
},
@ -171,7 +175,6 @@
'tasks',
'locations',
'connects',
'isEditDag',
'name',
'isDetails',
'projectCode',
@ -192,7 +195,6 @@
]),
...mapMutations('dag', [
'addTask',
'setTasks',
'setConnects',
'resetParams',
'setIsEditDag',
@ -266,6 +268,9 @@
let tasks = this.tasks || []
const edges = this.$refs.canvas.getEdges()
const nodes = this.$refs.canvas.getNodes()
if (!nodes.length) {
reject(this.$t('Failed to create node to save'))
}
const connects = this.buildConnects(edges, tasks)
this.setConnects(connects)
const locations = nodes.map((node) => {
@ -332,6 +337,9 @@
})
}
}
}).catch((err) => {
let msg = typeof err === 'string' ? err : (err.msg || '')
this.$message.error(msg)
})
},
verifyConditions (value) {
@ -578,16 +586,14 @@
this.versionDrawer = false
},
switchProcessVersion ({ version, processDefinitionCode }) {
// this.$store.state.dag.isSwitchVersion = true
this.switchProcessDefinitionVersion({
version: version,
code: processDefinitionCode
}).then(res => {
this.$message.success($t('Switch Version Successfully'))
this.closeVersion()
this.definitionDetails._reset()
this.definitionDetails.init()
}).catch(e => {
// this.$store.state.dag.isSwitchVersion = false
this.$message.error(e.msg || '')
})
},

4
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
View File

@ -71,7 +71,7 @@ Affirm.paramVerification = (name) => {
}
} else {
// View history direct jump
flag = name === 'projects-instance-details' ? true : (dagStore.isSwitchVersion || !dagStore.isEditDag)
flag = name === 'projects-instance-details' ? true : !dagStore.isEditDag
}
return flag
}
@ -85,7 +85,7 @@ Affirm.isPop = (fn) => {
cancelButtonText: `${i18n.$t('Cancel')}`,
type: 'warning'
}).then(() => {
findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
findComponentDownward($root, 'dag-chart').onSave('affirm').then(() => {
fn()
}).catch(() => {
fn()

2
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
View File

@ -203,7 +203,7 @@
return _.filter(publishStatus, v => v.code === code)[0].desc
},
_treeView (item) {
this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${item.id}` })
this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${item.code}` })
},
/**
* Start

42
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
View File

@ -35,7 +35,7 @@
</el-select>
<el-button
@click="_rtTasksDag"
v-if="$route.query.subProcessIds"
v-if="$route.query.subProcessCodes"
type="primary"
size="small"
icon="el-icon-d-arrow-left">
@ -117,7 +117,7 @@
Tree.reset()
this.getViewTree({
processId: this.$route.params.id,
code: this.$route.params.code,
limit: this.limit
}).then(res => {
let data = _.cloneDeep(res)
@ -160,32 +160,32 @@
* Return to the previous child node
*/
_rtTasksDag () {
let getIds = this.$route.query.subProcessIds
let idsArr = getIds.split(',')
let ids = idsArr.slice(0, idsArr.length - 1)
let id = idsArr[idsArr.length - 1]
let subProcessCodes = this.$route.query.subProcessCodes
let codeList = subProcessCodes.split(',')
let codes = codeList.slice(0, codeList.length - 1)
let code = codeList[codeList.length - 1]
let query = {}
if (id !== idsArr[0]) {
query = { subProcessIds: ids.join(',') }
if (code !== codeList[0]) {
query = { subProcessCodes: codes.join(',') }
}
this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${id}`, query: query })
this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${code}`, query: query })
},
/**
* Subprocess processing
* @param subProcessId 子流程Id
* @param subProcessCode 子流程Code
*/
_subProcessHandle (subProcessId) {
let subProcessIds = []
let getIds = this.$route.query.subProcessIds
if (getIds) {
let newId = getIds.split(',')
newId.push(this.$route.params.id)
subProcessIds = newId
_subProcessHandle (subProcessCode) {
let subProcessCodes = []
let codes = this.$route.query.subProcessCodes
if (codes) {
let newCode = codes.split(',')
newCode.push(this.$route.params.code)
subProcessCodes = newCode
} else {
subProcessIds.push(this.$route.params.id)
subProcessCodes.push(this.$route.params.code)
}
this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${subProcessCode}`, query: { subProcessCodes: subProcessCodes.join(',') } })
},
_onChangeSelect (o) {
this.limit = o
@ -193,7 +193,7 @@
}
},
watch: {
'$route.params.id' () {
'$route.params.code' () {
this._getViewTree()
}
},
@ -203,7 +203,7 @@
mounted () {
},
computed: {
...mapState('dag', ['projectId'])
...mapState('dag', ['projectCode'])
},
components: { mSpin, mListConstruction, mNoData }
}

4
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
View File

@ -292,7 +292,7 @@
* edit
*/
_reEdit (item) {
this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.id}` })
this.$router.push({ path: `/projects/${this.projectCode}/instance/list/${item.id}` })
},
/**
* Rerun
@ -433,7 +433,7 @@
}
},
_gantt (item) {
this.$router.push({ path: `/projects/${this.projectId}/instance/gantt/${item.id}` })
this.$router.push({ path: `/projects/${this.projectCode}/instance/gantt/${item.id}` })
},
_topCheckBoxClick (v) {
this.list.forEach((item, i) => {

11
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGrid.vue
View File

@ -28,9 +28,6 @@
return {}
},
props: {
id: String,
locations: Array,
connects: Array,
isShowLabel: Boolean
},
methods: {
@ -41,16 +38,16 @@
},
mounted () {
const graphGrid = echarts.init(this.$refs['graph-grid'])
graphGrid.setOption(graphGridOption(this.locations, this.connects, this.sourceWorkFlowId, this.isShowLabel), true)
graphGrid.setOption(graphGridOption(this.locations, this.connects, this.sourceWorkFlowCode, this.isShowLabel), true)
graphGrid.on('click', (params) => {
// Jump to the definition page
this.$router.push({ path: `/projects/${this.projectId}/definition/list/${params.data.id}` })
this.$router.push({ path: `/projects/${this.projectCode}/definition/list/${params.data.code}` })
})
},
components: {},
computed: {
...mapState('dag', ['projectId']),
...mapState('kinship', ['locations', 'connects', 'sourceWorkFlowId'])
...mapState('dag', ['projectCode']),
...mapState('kinship', ['locations', 'connects', 'sourceWorkFlowCode'])
}
}
</script>

8
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js
View File

@ -17,8 +17,8 @@
import _ from 'lodash'
import i18n from '@/module/i18n/index.js'
const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, id }, sourceWorkFlowId) => {
if (id === sourceWorkFlowId) return categoryDic.active
const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, code }, sourceWorkFlowCode) => {
if (code === sourceWorkFlowCode) return categoryDic.active
switch (true) {
case workFlowPublishStatus === '0':
return categoryDic['0']
@ -30,7 +30,7 @@ const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus
}
}
export default function (locations, links, sourceWorkFlowId, isShowLabel) {
export default function (locations, links, sourceWorkFlowCode, isShowLabel) {
const categoryDic = {
active: { color: '#2D8DF0', category: i18n.$t('KinshipStateActive') },
1: { color: '#00C800', category: i18n.$t('KinshipState1') },
@ -38,7 +38,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
10: { color: '#FF8F05', category: i18n.$t('KinshipState10') }
}
const newData = _.map(locations, (item) => {
const { color, category } = getCategory(categoryDic, item, sourceWorkFlowId)
const { color, category } = getCategory(categoryDic, item, sourceWorkFlowCode)
return {
...item,
emphasis: {

5
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue
View File

@ -22,12 +22,13 @@
:placeholder="$t('Process Name')"
@change="onChange"
:style="inputFocusStyle"
v-model="currentItemName"
v-tooltip="tooltipOption(currentItemName)"
size="small">
<el-option
v-for="work in workList"
:key="work.id"
:value="work.id"
:key="work.code"
:value="work.code"
:label="work.name"
v-tooltip="tooltipOption(work.name)"
>

2
dolphinscheduler-ui/src/js/conf/home/router/index.js
View File

@ -139,7 +139,7 @@ const router = new Router({
}
},
{
path: '/projects/:projectCode/definition/tree/:id',
path: '/projects/:projectCode/definition/tree/:code',
name: 'definition-tree-view-index',
component: resolve => require(['../pages/projects/pages/definition/pages/tree/index'], resolve),
meta: {

8
dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js
View File

@ -144,7 +144,7 @@ export default {
// timeout
state.timeout = res.data.processDefinition.timeout
// tenantId
state.tenantCode = res.data.processDefinition.tenantCode
state.tenantCode = res.data.processDefinition.tenantCode || 'default'
// tasks info
state.tasks = res.data.taskDefinitionList.map(task => _.pick(task, [
'code',
@ -240,7 +240,7 @@ export default {
// timeout
state.timeout = processDefinition.timeout
// tenantCode
state.tenantCode = res.data.tenantCode
state.tenantCode = res.data.tenantCode || 'default'
// tasks info
state.tasks = taskDefinitionList.map(task => _.pick(task, [
'code',
@ -760,7 +760,7 @@ export default {
*/
getViewTree ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`projects/${state.projectCode}/process-definition/${payload.code}/view-tree`, payload, res => {
io.get(`projects/${state.projectCode}/process-definition/${payload.code}/view-tree`, { limit: payload.limit }, res => {
resolve(res.data)
}).catch(e => {
reject(e)
@ -772,7 +772,7 @@ export default {
*/
getViewGantt ({ state }, payload) {
return new Promise((resolve, reject) => {
io.get(`projects/${state.projectCode}/process-instances/${payload.code}/view-gantt`, payload, res => {
io.get(`projects/${state.projectCode}/process-instances/${payload.processInstanceId}/view-gantt`, payload, res => {
resolve(res.data)
}).catch(e => {
reject(e)

4
dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
View File

@ -113,7 +113,7 @@ export default {
state.name = (payload && payload.name) || ''
state.description = (payload && payload.description) || ''
state.timeout = (payload && payload.timeout) || 0
state.tenantCode = (payload && payload.tenantCode) || ''
state.tenantCode = (payload && payload.tenantCode) || 'default'
state.processListS = (payload && payload.processListS) || []
state.resourcesListS = (payload && payload.resourcesListS) || []
state.resourcesListJar = (payload && payload.resourcesListJar) || []
@ -128,6 +128,7 @@ export default {
* @param {Task} task
*/
addTask (state, task) {
state.isEditDag = true
const i = _.findIndex(state.tasks, v => v.code === task.code)
if (i !== -1) {
state.tasks[i] = Object.assign(state.tasks[i], {}, task)
@ -141,6 +142,7 @@ export default {
* @param {string} code
*/
removeTask (state, code) {
state.isEditDag = true
state.tasks = state.tasks.filter(task => task.code !== code)
},
resetLocalParam (state, payload) {

2
dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
View File

@ -38,7 +38,7 @@ export default {
// Timeout alarm
timeout: 0,
// tenant code
tenantCode: '',
tenantCode: 'default',
// Node location information
locations: {},
// Node relations

20
dolphinscheduler-ui/src/js/conf/home/store/kinship/actions.js
View File

@ -26,7 +26,7 @@ export default {
getWorkFlowList ({ state }, payload) {
const projectCode = localStore.getItem('projectCode')
return new Promise((resolve, reject) => {
const url = `lineages/${projectCode}/list-name`
const url = `projects/${projectCode}/lineages/query-by-name`
io.get(url, {
searchVal: payload
}, res => {
@ -34,7 +34,7 @@ export default {
if (res.data) {
_.map(res.data, (item) => {
workList.push({
id: `${item.workFlowId}`,
code: `${item.workFlowCode}`,
name: item.workFlowName
})
})
@ -52,15 +52,13 @@ export default {
getWorkFlowDAG ({ state }, payload) {
const projectCode = localStore.getItem('projectCode')
return new Promise((resolve, reject) => {
const url = `lineages/${projectCode}/list-ids`
io.get(url, {
ids: payload
}, res => {
const url = `projects/${projectCode}/lineages/list`
io.get(url, { code: payload }, res => {
let locations = []
let connects = []
if (res.data.workFlowList) {
locations = _.uniqBy(res.data.workFlowList, 'workFlowId').map((item) => ({
id: `${item.workFlowId}`,
locations = _.uniqBy(res.data.workFlowList, 'workFlowCode').map((item) => ({
code: `${item.workFlowCode}`,
name: item.workFlowName,
workFlowPublishStatus: item.workFlowPublishStatus,
scheduleStartTime: item.scheduleStartTime,
@ -71,11 +69,11 @@ export default {
}
if (res.data.workFlowRelationList) {
connects = _.map(res.data.workFlowRelationList, (item) => ({
source: `${item.sourceWorkFlowId}`, // should be string, or connects will not show by echarts
target: `${item.targetWorkFlowId}` // should be string, or connects will not show by echarts
source: `${item.sourceWorkFlowCode}`, // should be string, or connects will not show by echarts
target: `${item.targetWorkFlowCode}` // should be string, or connects will not show by echarts
}))
}
state.sourceWorkFlowId = payload || ''
state.sourceWorkFlowCode = payload || ''
// locations
state.locations = locations /* JSON.parse(locations) */
// connects

2
dolphinscheduler-ui/src/js/conf/home/store/kinship/state.js
View File

@ -16,7 +16,7 @@
*/
export default {
sourceWorkFlowId: '',
sourceWorkFlowCode: '',
workList: [],
locations: [],
connects: []