diff --git a/dolphinscheduler-ui/.babelrc b/dolphinscheduler-ui/.babelrc index aeb5ba2059..5fe8580fed 100644 --- a/dolphinscheduler-ui/.babelrc +++ b/dolphinscheduler-ui/.babelrc @@ -5,7 +5,15 @@ "debug": false, "useBuiltIns": true, "targets": { - "browsers": [ "ie > 8", "last 2 version", "safari >= 9" ] + "browsers": [ + "> 1%", + "last 2 versions", + "ie >= 9", + "edge >= 12", + "firefox >= 28", + "chrome >= 29", + "opera >= 17" + ] }, "production": { "plugins": ["transform-remove-console"] diff --git a/dolphinscheduler-ui/.eslintignore b/dolphinscheduler-ui/.eslintignore new file mode 100644 index 0000000000..cd1b8213b3 --- /dev/null +++ b/dolphinscheduler-ui/.eslintignore @@ -0,0 +1,7 @@ +/_test_/ +/build/ +/dist/ +/node/ +/node_modules/ +/target/ +/*.js diff --git a/dolphinscheduler-ui/.eslintrc.yml b/dolphinscheduler-ui/.eslintrc.yml index 8d4020f7c4..64c83e6ac0 100644 --- a/dolphinscheduler-ui/.eslintrc.yml +++ b/dolphinscheduler-ui/.eslintrc.yml @@ -26,9 +26,19 @@ globals: Atomics: readonly SharedArrayBuffer: readonly PUBLIC_PATH: readonly + $t: readonly parserOptions: ecmaVersion: 2018 sourceType: module plugins: - vue -rules: {} +rules: + vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }] + prefer-promise-reject-errors: 'off' + no-prototype-builtins: 'off' + no-mixed-operators: 'off' + no-extend-native: 'off' + prefer-const: 'off' + no-var: 'error' +overrides: + - { 'files': ['*.vue'], 'rules': { 'indent': 'off' }} diff --git a/dolphinscheduler-ui/build/config.js b/dolphinscheduler-ui/build/config.js index 11bbec550f..1186066e7f 100644 --- a/dolphinscheduler-ui/build/config.js +++ b/dolphinscheduler-ui/build/config.js @@ -47,7 +47,7 @@ const jsEntry = (() => { parts.shift() let modules = parts.join('/') let entry = moduleName(modules) - obj[entry] = val + obj[entry] = ['babel-polyfill', val] }) return obj })() @@ -125,6 +125,16 @@ const baseConfig = { }, module: { rules: [ + { + test: /\.(js|vue)$/, + loader: 'eslint-loader', + enforce: 'pre', + include: [resolve('src')], + options: { + formatter: require('eslint-friendly-formatter'), + emitWarning: true + } + }, { test: /\.vue$/, loader: 'vue-loader', diff --git a/dolphinscheduler-ui/build/webpack.config.dev.js b/dolphinscheduler-ui/build/webpack.config.dev.js index d443bf8366..ea250330ad 100644 --- a/dolphinscheduler-ui/build/webpack.config.dev.js +++ b/dolphinscheduler-ui/build/webpack.config.dev.js @@ -19,6 +19,8 @@ const merge = require('webpack-merge') const { assetsDir, baseConfig } = require('./config') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const ProgressPlugin = require('progress-bar-webpack-plugin') +const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') +const portfinder = require('portfinder') const getEnv = require('env-parse').getEnv const config = merge.smart(baseConfig, { @@ -33,6 +35,7 @@ const config = merge.smart(baseConfig, { port: getEnv('DEV_PORT', 8888), host: getEnv('DEV_HOST', 'localhost'), noInfo: false, + overlay: { warnings: false, errors: true }, historyApiFallback: true, disableHostCheck: true, proxy: { @@ -42,12 +45,12 @@ const config = merge.smart(baseConfig, { changeOrigin: true } }, - progress: false, - quiet: false, + progress: true, + quiet: true, stats: { colors: true }, - clientLogLevel: 'none' + clientLogLevel: 'warning' }, plugins: [ new ProgressPlugin(), @@ -57,4 +60,36 @@ const config = merge.smart(baseConfig, { mode: 'development' }) -module.exports = config +module.exports = new Promise((resolve, reject) => { + portfinder.basePort = process.env.PORT || config.devServer.port + portfinder.getPort((err, port) => { + if (err) { + reject(err) + } else { + // publish the new Port, necessary for e2e tests + process.env.PORT = port + // add port to devServer config + config.devServer.port = port + // Add FriendlyErrorsPlugin + config.plugins.push(new FriendlyErrorsPlugin({ + compilationSuccessInfo: { + messages: [`Your application is running here: http://${config.devServer.host}:${port}`], + }, + onErrors: () => { + const notifier = require('node-notifier') + return (severity, errors) => { + if (severity !== 'error') return + const error = errors[0] + const filename = error.file && error.file.split('!').pop() + notifier.notify({ + title: packageConfig.name, + message: severity + ': ' + error.name, + subtitle: filename || '' + }) + } + } + })) + resolve(config) + } + }) +}) diff --git a/dolphinscheduler-ui/build/webpack.config.prod.js b/dolphinscheduler-ui/build/webpack.config.prod.js index 4bb90d54d1..1024ac6724 100644 --- a/dolphinscheduler-ui/build/webpack.config.prod.js +++ b/dolphinscheduler-ui/build/webpack.config.prod.js @@ -51,12 +51,7 @@ const config = merge.smart(baseConfig, { minimizer: [ new TerserPlugin({ terserOptions: { - compress: { - warnings: false, - drop_console: true, - drop_debugger: true, - pure_funcs: ['console.log'] - } + compress: {} }, cache: true, parallel: true, diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json index af0ac54b0c..609dd1043a 100644 --- a/dolphinscheduler-ui/package.json +++ b/dolphinscheduler-ui/package.json @@ -8,13 +8,12 @@ "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js", "clean": "rimraf dist", "start": "npm run dev", - "lint": "eslint ./src --fix", + "lint": "eslint --ext .js,.vue ./src", + "lint:fix": "eslint --ext .js,.vue --fix ./src", "build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js" }, "dependencies": { - "@form-create/element-ui": "^1.0.18", "@riophae/vue-treeselect": "^0.4.0", - "ans-ui": "1.1.9", "axios": "^0.16.2", "bootstrap": "3.3.7", "canvg": "1.5.1", @@ -25,6 +24,7 @@ "dayjs": "^1.7.8", "echarts": "4.1.0", "element-ui": "2.13.2", + "font-awesome": "^4.7.0", "html2canvas": "^0.5.0-beta4", "jquery": "3.3.1", "jquery-ui": "^1.12.1", @@ -33,7 +33,7 @@ "lodash": "^4.17.11", "normalize.css": "^8.0.1", "vue": "^2.5.17", - "vue-router": "^2.7.0", + "vue-router": "^3.0.0", "vuex": "^3.0.0", "vuex-router-sync": "^5.0.0" }, @@ -48,6 +48,7 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-vue-jsx": "^3.5.0", + "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "copy-webpack-plugin": "^4.5.2", "cross-env": "^5.2.0", @@ -56,17 +57,23 @@ "env-parse": "^1.0.5", "eslint": "^6.8.0", "eslint-config-standard": "^14.1.1", + "eslint-friendly-formatter": "^4.0.1", + "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", - "eslint-plugin-vue": "^6.2.2", + "eslint-plugin-vue": "^7.2.0", "file-loader": "^5.0.2", + "friendly-errors-webpack-plugin": "^1.7.0", "globby": "^8.0.1", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.2", + "node-notifier": "^8.0.0", "node-sass": "^4.14.1", + "pack": "^2.2.0", + "portfinder": "^1.0.28", "postcss-loader": "^3.0.0", "progress-bar-webpack-plugin": "^1.12.1", "rimraf": "^2.6.2", @@ -80,5 +87,14 @@ "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0", "webpack-merge": "^4.2.2" - } + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "ie >= 9", + "edge >= 12", + "firefox >= 28", + "chrome >= 29", + "opera >= 17" + ] } diff --git a/dolphinscheduler-ui/pom.xml b/dolphinscheduler-ui/pom.xml index 13644bad91..1263502cc3 100644 --- a/dolphinscheduler-ui/pom.xml +++ b/dolphinscheduler-ui/pom.xml @@ -20,7 +20,7 @@ dolphinscheduler org.apache.dolphinscheduler - 1.3.2-SNAPSHOT + 1.3.4-SNAPSHOT 4.0.0 @@ -203,5 +203,4 @@ - - + \ No newline at end of file diff --git a/dolphinscheduler-ui/src/components/Counter.vue b/dolphinscheduler-ui/src/components/Counter.vue index 6fafb5a54e..74dbfcd8de 100644 --- a/dolphinscheduler-ui/src/components/Counter.vue +++ b/dolphinscheduler-ui/src/components/Counter.vue @@ -24,30 +24,30 @@ \ No newline at end of file + diff --git a/dolphinscheduler-ui/src/components/Message.vue b/dolphinscheduler-ui/src/components/Message.vue index 95f5236b6e..aba5ea6a56 100644 --- a/dolphinscheduler-ui/src/components/Message.vue +++ b/dolphinscheduler-ui/src/components/Message.vue @@ -19,10 +19,10 @@ \ No newline at end of file + export default { + name: 'message', + props: [ + 'msg' + ] + } + diff --git a/dolphinscheduler-ui/src/js/conf/home/App.vue b/dolphinscheduler-ui/src/js/conf/home/App.vue index 97110e580c..2d7a5f3328 100644 --- a/dolphinscheduler-ui/src/js/conf/home/App.vue +++ b/dolphinscheduler-ui/src/js/conf/home/App.vue @@ -17,15 +17,36 @@ diff --git a/dolphinscheduler-ui/src/js/conf/home/index.js b/dolphinscheduler-ui/src/js/conf/home/index.js index 381e2030b7..8db055a36a 100644 --- a/dolphinscheduler-ui/src/js/conf/home/index.js +++ b/dolphinscheduler-ui/src/js/conf/home/index.js @@ -17,6 +17,7 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. +import 'babel-polyfill' import Vue from 'vue' import ElementUI from 'element-ui' import locale from 'element-ui/lib/locale/lang/en' @@ -28,29 +29,23 @@ import i18n from '@/module/i18n' import { sync } from 'vuex-router-sync' import Chart from '@/module/ana-charts' import '@/module/filter/formatDate' +import '@/module/filter/filterNull' import themeData from '@/module/echarts/themeData.json' import Permissions from '@/module/permissions' -import 'ans-ui/lib/ans-ui.min.css' -import ans from 'ans-ui/lib/ans-ui.min' -import en_US from 'ans-ui/lib/locale/en' // eslint-disable-line import 'sass/conf/home/index.scss' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' import 'canvg/dist/browser/canvg.min.js' - -import formCreate, {maker} from '@form-create/element-ui' +import 'font-awesome/css/font-awesome.min.css' // Component internationalization -const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {} +const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {} i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI) - // Vue.use(ans) -Vue.use(ans, useOpt) - -Vue.use(formCreate, {maker}) +Vue.use(useOpt) sync(store, router) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js index 18fbd94341..566896a2ff 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js @@ -29,31 +29,31 @@ const toolOper = (dagThis) => { return [ { code: 'pointer', - icon: 'ans-icon-pointer', + icon: 'el-icon-thumb', disable: disabled, desc: `${i18n.$t('Drag Nodes and Selected Items')}` }, { code: 'line', - icon: 'ans-icon-slash', + icon: 'el-icon-top-right', disable: disabled, desc: `${i18n.$t('Select Line Connection')}` }, { code: 'remove', - icon: 'ans-icon-trash', + icon: 'el-icon-delete', disable: disabled, desc: `${i18n.$t('Delete selected lines or nodes')}` }, { code: 'download', - icon: 'ans-icon-download', + icon: 'el-icon-download', disable: !dagThis.type, desc: `${i18n.$t('Download')}` }, { code: 'screen', - icon: 'ans-icon-max', + icon: 'el-icon-full-screen', disable: false, desc: `${i18n.$t('Full Screen')}` } @@ -150,98 +150,98 @@ const tasksState = { id: 0, desc: `${i18n.$t('Submitted successfully')}`, color: '#A9A9A9', - icoUnicode: 'ans-icon-dot-circle', + icoUnicode: 'fa fa-dot-circle-o', isSpin: false }, RUNNING_EXECUTION: { id: 1, desc: `${i18n.$t('Executing')}`, color: '#0097e0', - icoUnicode: 'ans-icon-gear', + icoUnicode: 'el-icon-s-tools', isSpin: true }, READY_PAUSE: { id: 2, desc: `${i18n.$t('Ready to pause')}`, color: '#07b1a3', - icoUnicode: 'ans-icon-pause-solid', + icoUnicode: 'fa-pause-circle', isSpin: false }, PAUSE: { id: 3, desc: `${i18n.$t('Pause')}`, color: '#057c72', - icoUnicode: 'ans-icon-pause', + icoUnicode: 'el-icon-video-pause', isSpin: false }, READY_STOP: { id: 4, desc: `${i18n.$t('Ready to stop')}`, color: '#FE0402', - icoUnicode: 'ans-icon-coin', + icoUnicode: 'fa-stop-circle-o', isSpin: false }, STOP: { id: 5, desc: `${i18n.$t('Stop')}`, color: '#e90101', - icoUnicode: 'ans-icon-stop', + icoUnicode: 'fa-stop-circle', isSpin: false }, FAILURE: { id: 6, desc: `${i18n.$t('failed')}`, color: '#000000', - icoUnicode: 'ans-icon-fail-empty', + icoUnicode: 'el-icon-circle-close', isSpin: false }, SUCCESS: { id: 7, desc: `${i18n.$t('success')}`, color: '#33cc00', - icoUnicode: 'ans-icon-success-empty', + icoUnicode: 'el-icon-circle-check', isSpin: false }, NEED_FAULT_TOLERANCE: { id: 8, desc: `${i18n.$t('Need fault tolerance')}`, color: '#FF8C00', - icoUnicode: 'ans-icon-pen', + icoUnicode: 'el-icon-edit', isSpin: false }, KILL: { id: 9, desc: `${i18n.$t('kill')}`, color: '#a70202', - icoUnicode: 'ans-icon-minus-circle-empty', + icoUnicode: 'el-icon-remove-outline', isSpin: false }, WAITTING_THREAD: { id: 10, desc: `${i18n.$t('Waiting for thread')}`, color: '#912eed', - icoUnicode: 'ans-icon-sand-clock', + icoUnicode: 'fa-hourglass-end', isSpin: false }, WAITTING_DEPEND: { id: 11, desc: `${i18n.$t('Waiting for dependence')}`, color: '#5101be', - icoUnicode: 'ans-icon-dependence', + icoUnicode: 'fa-window-restore', isSpin: false }, DELAY_EXECUTION: { id: 12, desc: `${i18n.$t('Delay execution')}`, color: '#5102ce', - icoUnicode: 'ans-icon-coin', + icoUnicode: 'fa-stop-circle-o', isSpin: false }, FORCED_SUCCESS: { id: 13, desc: `${i18n.$t('Forced success')}`, color: '#5102ce', - icoUnicode: 'ans-icon-success-solid', + icoUnicode: 'el-icon-success', isSpin: false } } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js index d7f2f78a0c..e98cda22fd 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js @@ -15,14 +15,13 @@ * limitations under the License. */ import Vue from 'vue' -let v = new Vue() import _ from 'lodash' import i18n from '@/module/i18n' import { jsPlumb } from 'jsplumb' import JSP from './plugIn/jsPlumbHandle' import DownChart from './plugIn/downChart' import store from '@/conf/home/store' -import dagre from "dagre" +import dagre from 'dagre' /** * Prototype method @@ -53,7 +52,9 @@ Dag.prototype.setConfig = function (o) { */ Dag.prototype.create = function () { const self = this - jsPlumb.ready(() => { + const plumbIns = jsPlumb.getInstance() + plumbIns.reset() + plumbIns.ready(() => { JSP.init({ dag: this.dag, instance: this.instance, @@ -76,7 +77,7 @@ Dag.prototype.create = function () { * Action event on the right side of the toolbar */ Dag.prototype.toolbarEvent = function ({ item, code, is }) { - let self = this + const self = this switch (code) { case 'pointer': JSP.handleEventPointer(is) @@ -91,21 +92,15 @@ Dag.prototype.toolbarEvent = function ({ item, code, is }) { JSP.handleEventScreen({ item, is }) break case 'download': - v.$modal.dialog({ - width: 350, - closable: false, - showMask: true, - maskClosable: true, - title: i18n.$t('Download'), - content: i18n.$t('Please confirm whether the workflow has been saved before downloading'), - ok: { - handle (e) { - DownChart.download({ - dagThis: self.dag - }) - } - }, - cancel: {} + Vue.prototype.$confirm(`${i18n.$t('Please confirm whether the workflow has been saved before downloading')}`, `${i18n.$t('Download')}`, { + confirmButtonText: `${i18n.$t('Confirm')}`, + cancelButtonText: `${i18n.$t('Cancel')}`, + type: 'warning' + }).then(() => { + DownChart.download({ + dagThis: self.dag + }) + }).catch(() => { }) break } @@ -128,17 +123,19 @@ Dag.prototype.backfill = function (arg) { for (const i in store.state.dag.connects) { const connect = store.state.dag.connects[i] - g.setEdge(connect['endPointSourceId'], connect['endPointTargetId']) + g.setEdge(connect.endPointSourceId, connect.endPointTargetId) } dagre.layout(g) const dataObject = {} g.nodes().forEach(function (v) { const node = g.node(v) + const location = store.state.dag.locations[node.label] const obj = {} - obj.name = node.label + obj.name = location.name obj.x = node.x + marginX obj.y = node.y + obj.targetarr = location.targetarr dataObject[node.label] = obj }) jsPlumb.ready(() => { @@ -162,7 +159,9 @@ Dag.prototype.backfill = function (arg) { }) }) } else { - jsPlumb.ready(() => { + const plumbIns = jsPlumb.getInstance() + plumbIns.reset() + plumbIns.ready(() => { JSP.init({ dag: this.dag, instance: this.instance, diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss index 88f2d11c8f..41a44bc17a 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss @@ -207,7 +207,6 @@ .operation { overflow: hidden; display: inline-block; - margin-right: 10px; a { float: left; width: 28px; @@ -277,8 +276,9 @@ svg path:hover { background: #fff; border-radius: 3px; box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1); - padding: 4px 0; + padding: 4px 4px; visibility:hidden; + z-index: 10000; a { height: 30px; line-height: 28px; diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue index 1880adc51b..a61d289d3d 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue @@ -34,31 +34,33 @@
- - - - + @click="_toggleView" + icon="el-icon-c-scale-to-original"> + + + + + {{name}}   - +
@@ -68,71 +70,75 @@ :id="item.code" :key="$index" @click="_ckOperation(item,$event)"> - +
- - - - - + + + + + + {{$t('Return_1')}} - - - {{$t('Close')}} - - + + + {{$t('Close')}} + + + {{spinnerLoading ? 'Loading...' : $t('Save')}} - - - {{spinnerLoading ? 'Loading...' : $t('Version Info')}} - + + + + {{spinnerLoading ? 'Loading...' : $t('Version Info')}} + +
@@ -140,6 +146,44 @@
+ + + + + + + + + + + + + + + + + + @@ -158,6 +202,7 @@ import { findComponentDownward } from '@/module/util/' import disabledState from '@/module/mixin/disabledState' import { mapActions, mapState, mapMutations } from 'vuex' + import mStart from '../../projects/pages/definition/pages/list/_source/start' import mVersions from '../../projects/pages/definition/pages/list/_source/versions' let eventModel @@ -179,7 +224,39 @@ isLoading: false, taskId: null, arg: false, - + versionData: { + processDefinition: { + id: null, + version: '', + state: '' + }, + processDefinitionVersions: [], + total: null, + pageNo: null, + pageSize: null + }, + drawer: false, + nodeData: { + id: null, + taskType: '', + self: {}, + preNode: [], + rearList: [], + instanceId: null + }, + nodeDrawer: false, + lineData: { + id: null, + sourceId: '', + targetId: '' + }, + lineDrawer: false, + udpDrawer: false, + dialogVisible: false, + startDialog: false, + startData: {}, + startNodeList: '', + sourceType: '' } }, mixins: [disabledState], @@ -190,43 +267,54 @@ methods: { ...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState', 'switchProcessDefinitionVersion', 'getProcessDefinitionVersionsPage', 'deleteProcessDefinitionVersion']), ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']), - + startRunning (item, startNodeList, sourceType) { + this.startData = item + this.startNodeList = startNodeList + this.sourceType = sourceType + this.startDialog = true + }, + onUpdateStart () { + this.startDialog = false + }, + closeStart () { + this.startDialog = false + }, // DAG automatic layout - dagAutomaticLayout() { - if(this.store.state.dag.isEditDag) { + dagAutomaticLayout () { + if (this.store.state.dag.isEditDag) { this.$message.warning(`${i18n.$t('Please save the DAG before formatting')}`) return false } $('#canvas').html('') - // Destroy round robin + // Destroy round robin Dag.init({ - dag: this, - instance: jsPlumb.getInstance({ - Endpoint: [ - 'Dot', { radius: 1, cssClass: 'dot-style' } - ], - Connector: 'Bezier', - PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style - ConnectionOverlays: [ - [ - 'Arrow', - { - location: 1, - id: 'arrow', - length: 12, - foldback: 0.8 - } + dag: this, + instance: jsPlumb.getInstance({ + Endpoint: [ + 'Dot', { radius: 1, cssClass: 'dot-style' } ], - ['Label', { + Connector: 'Bezier', + PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style + ConnectionOverlays: [ + [ + 'Arrow', + { + location: 1, + id: 'arrow', + length: 12, + foldback: 0.8 + } + ], + ['Label', { location: 0.5, id: 'label' - }] - ], - Container: 'canvas', - ConnectionsDetachable: true + }] + ], + Container: 'canvas', + ConnectionsDetachable: true + }) }) - }) if (this.tasks.length) { Dag.backfill(true) if (this.type === 'instance') { @@ -255,8 +343,8 @@ /** * copy name */ - _copyName(){ - let clipboard = new Clipboard(`.copy-name`) + _copyName () { + let clipboard = new Clipboard('.copy-name') clipboard.on('success', e => { this.$message.success(`${i18n.$t('Copy success')}`) // Free memory @@ -294,8 +382,8 @@ let dom = $(`#${v2.id}`) let state = dom.find('.state-p') let depState = '' - taskList.forEach(item=>{ - if(item.name==v1.name) { + taskList.forEach(item => { + if (item.name === v1.name) { depState = item.state } }) @@ -371,7 +459,7 @@ this.spinnerLoading = true // Storage store Dag.saveStore().then(res => { - if(this._verifConditions(res.tasks)) { + if (this._verifConditions(res.tasks)) { if (this.urlParam.id) { /** * Edit @@ -379,7 +467,12 @@ * @param saveEditDAGChart => Process definition editing */ this[this.type === 'instance' ? 'updateInstance' : 'updateDefinition'](this.urlParam.id).then(res => { - this.$message.success(res.msg) + // this.$message.success(res.msg) + this.$message({ + message: res.msg, + type: 'success', + offset: 80 + }) this.spinnerLoading = false // Jump process definition if (this.type === 'instance') { @@ -415,57 +508,36 @@ }) }) }, - _closeDAG(){ + _closeDAG () { let $name = this.$route.name - if($name && $name.indexOf("definition") != -1){ - this.$router.push({ name: 'projects-definition-list'}) - }else{ - this.$router.push({ name: 'projects-instance-list'}) + if ($name && $name.indexOf('definition') !== -1) { + this.$router.push({ name: 'projects-definition-list' }) + } else { + this.$router.push({ name: 'projects-instance-list' }) } }, _verifConditions (value) { let tasks = value let bool = true - tasks.map(v=>{ - if(v.type == 'CONDITIONS' && (v.conditionResult.successNode[0] =='' || v.conditionResult.successNode[0] == null || v.conditionResult.failedNode[0] =='' || v.conditionResult.failedNode[0] == null)) { + tasks.map(v => { + if (v.type === 'CONDITIONS' && (v.conditionResult.successNode[0] === '' || v.conditionResult.successNode[0] === null || v.conditionResult.failedNode[0] === '' || v.conditionResult.failedNode[0] === null)) { bool = false return false } }) - if(!bool) { + if (!bool) { this.$message.warning(`${i18n.$t('Successful branch flow and failed branch flow are required')}`) this.spinnerLoading = false return false } return true }, - /** - * Global parameter - * @param Promise - */ - _udpTopFloorPop () { - return new Promise((resolve, reject) => { - let modal = this.$modal.dialog({ - closable: false, - showMask: true, - escClose: true, - className: 'v-modal-custom', - transitionName: 'opacityp', - render (h) { - return h(mUdp, { - on: { - onUdp () { - modal.remove() - resolve() - }, - close () { - modal.remove() - } - } - }) - } - }) - }) + onUdpDialog () { + this._save() + this.dialogVisible = false + }, + closeDialog () { + this.dialogVisible = false }, /** * Save chart @@ -476,11 +548,7 @@ this.$message.warning(`${i18n.$t('Failed to create node to save')}`) return } - - // Global parameters (optional) - this._udpTopFloorPop().then(() => { - return this._save() - }) + this.dialogVisible = true }, /** * Return to the previous child node @@ -531,63 +599,75 @@ * View variables */ _toggleView () { - findComponentDownward(this.$root, `assist-dag-index`)._toggleView() + findComponentDownward(this.$root, 'assist-dag-index')._toggleView() }, /** * Starting parameters */ _toggleParam () { - findComponentDownward(this.$root, `starting-params-dag-index`)._toggleParam() + findComponentDownward(this.$root, 'starting-params-dag-index')._toggleParam() }, + addLineInfo ({ item, fromThis }) { + this.addConnects(item) + this.lineDrawer = false + }, + cancel ({ fromThis }) { + this.lineDrawer = false + }, + /** * Create a node popup layer * @param Object id */ - _createLineLabel({id, sourceId, targetId}) { - // $('#jsPlumb_2_50').text('111') - let self = this - self.$modal.destroy() - const removeNodesEvent = (fromThis) => { - // Manually destroy events inside the component - fromThis.$destroy() - // Close the popup - eventModel.remove() - } - eventModel = this.$drawer({ - className: 'dagMask', - render (h) { - return h(mFormLineModel,{ - on: { - addLineInfo ({ item, fromThis }) { - self.addConnects(item) - setTimeout(() => { - removeNodesEvent(fromThis) - }, 100) - }, - cancel ({fromThis}) { - removeNodesEvent(fromThis) - } - }, - props: { - id: id, - sourceId: sourceId, - targetId: targetId - } - }) + _createLineLabel ({ id, sourceId, targetId }) { + this.lineData.id = id + this.lineData.sourceId = sourceId + this.lineData.targetId = targetId + this.lineDrawer = true + }, + + seeHistory (taskName) { + this.nodeData.self.$router.push({ + name: 'task-instance', + query: { + processInstanceId: this.nodeData.self.$route.params.id, + taskName: taskName } }) }, + + addTaskInfo ({ item, fromThis }) { + this.addTasks(item) + this.nodeDrawer = false + }, + + cacheTaskInfo ({ item, fromThis }) { + this.cacheTasks(item) + }, + + close ({ item, flag, fromThis }) { + this.addTasks(item) + // Edit status does not allow deletion of nodes + if (flag) { + jsPlumb.remove(this.nodeData.id) + } + this.nodeDrawer = false + }, + onSubProcess ({ subProcessId, fromThis }) { + this._subProcessHandle(subProcessId) + }, + _createNodes ({ id, type }) { let self = this let preNode = [] let rearNode = [] let rearList = [] - $('div[data-targetarr*="' + id + '"]').each(function(){ - rearNode.push($(this).attr("id")) + $('div[data-targetarr*="' + id + '"]').each(function () { + rearNode.push($(this).attr('id')) }) - if (rearNode.length>0) { + if (rearNode.length > 0) { rearNode.forEach(v => { let rearobj = {} rearobj.value = $(`#${v}`).find('.name-p').text() @@ -609,78 +689,96 @@ } else { preNode = [] } - if (eventModel) { - // Close the popup - eventModel.remove() - } - - const removeNodesEvent = (fromThis) => { - // Manually destroy events inside the component - fromThis.$destroy() - // Close the popup - eventModel.remove() - } this.taskId = id type = type || self.dagBarId - eventModel = this.$drawer({ - closable: false, - direction: 'right', - escClose: true, - className: 'dagMask', - render: h => h(mFormModel, { - on: { - addTaskInfo ({ item, fromThis }) { - self.addTasks(item) - setTimeout(() => { - removeNodesEvent(fromThis) - }, 100) - }, - /** - * Cache the item - * @param item - * @param fromThis - */ - cacheTaskInfo({item, fromThis}) { - self.cacheTasks(item) - }, - close ({ item,flag, fromThis }) { - self.addTasks(item) - // Edit status does not allow deletion of nodes - if (flag) { - jsPlumb.remove(id) - } + this.nodeData.id = id + this.nodeData.taskType = type + this.nodeData.self = self + this.nodeData.preNode = preNode + this.nodeData.rearList = rearList + this.nodeData.instanceId = this.$route.params.id - removeNodesEvent(fromThis) - }, - onSubProcess ({ subProcessId, fromThis }) { - removeNodesEvent(fromThis) - self._subProcessHandle(subProcessId) - } - }, - props: { - id: id, - taskType: type, - self: self, - preNode: preNode, - rearList: rearList, - instanceId: this.$route.params.id - } - }) - }) + this.nodeDrawer = true }, removeEventModelById ($id) { - if(eventModel && this.taskId == $id){ + if (eventModel && this.taskId === $id) { eventModel.remove() } }, + /** + * switch version in process definition version list + * + * @param version the version user want to change + * @param processDefinitionId the process definition id + * @param fromThis fromThis + */ + mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) { + this.$store.state.dag.isSwitchVersion = true + this.switchProcessDefinitionVersion({ + version: version, + processDefinitionId: processDefinitionId + }).then(res => { + this.$message.success($t('Switch Version Successfully')) + this.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` }) + }).catch(e => { + this.$store.state.dag.isSwitchVersion = false + this.$message.error(e.msg || '') + }) + }, + + /** + * Paging event of process definition versions + * + * @param pageNo page number + * @param pageSize page size + * @param processDefinitionId the process definition id of page version + * @param fromThis fromThis + */ + mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) { + this.getProcessDefinitionVersionsPage({ + pageNo: pageNo, + pageSize: pageSize, + processDefinitionId: processDefinitionId + }).then(res => { + this.versionData.processDefinitionVersions = res.data.lists + this.versionData.total = res.data.totalCount + this.versionData.pageSize = res.data.pageSize + this.versionData.pageNo = res.data.currentPage + }).catch(e => { + this.$message.error(e.msg || '') + }) + }, + + /** + * delete one version of process definition + * + * @param version the version need to delete + * @param processDefinitionId the process definition id user want to delete + * @param fromThis fromThis + */ + mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) { + this.deleteProcessDefinitionVersion({ + version: version, + processDefinitionId: processDefinitionId + }).then(res => { + this.$message.success(res.msg || '') + this.mVersionGetProcessDefinitionVersionsPage({ + pageNo: 1, + pageSize: 10, + processDefinitionId: processDefinitionId, + fromThis: fromThis + }) + }).catch(e => { + this.$message.error(e.msg || '') + }) + }, /** * query the process definition pagination version */ _version (item) { - let self = this this.getProcessDefinitionVersionsPage({ pageNo: 1, pageSize: 10, @@ -690,127 +788,27 @@ let total = res.data.totalCount let pageSize = res.data.pageSize let pageNo = res.data.currentPage - if (this.versionsModel) { - this.versionsModel.remove() - } - this.versionsModel = this.$drawer({ - direction: 'right', - closable: true, - showMask: true, - escClose: true, - render (h) { - return h(mVersions, { - on: { - /** - * switch version in process definition version list - * - * @param version the version user want to change - * @param processDefinitionId the process definition id - * @param fromThis fromThis - */ - mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) { - - self.$store.state.dag.isSwitchVersion = true - - self.switchProcessDefinitionVersion({ - version: version, - processDefinitionId: processDefinitionId - }).then(res => { - self.$message.success($t('Switch Version Successfully')) - setTimeout(() => { - fromThis.$destroy() - self.versionsModel.remove() - }, 0) - self.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` }) - }).catch(e => { - self.$store.state.dag.isSwitchVersion = false - self.$message.error(e.msg || '') - }) - }, - - /** - * Paging event of process definition versions - * - * @param pageNo page number - * @param pageSize page size - * @param processDefinitionId the process definition id of page version - * @param fromThis fromThis - */ - mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) { - self.getProcessDefinitionVersionsPage({ - pageNo: pageNo, - pageSize: pageSize, - processDefinitionId: processDefinitionId - }).then(res => { - fromThis.processDefinitionVersions = res.data.lists - fromThis.total = res.data.totalCount - fromThis.pageSize = res.data.pageSize - fromThis.pageNo = res.data.currentPage - }).catch(e => { - self.$message.error(e.msg || '') - }) - }, - - /** - * delete one version of process definition - * - * @param version the version need to delete - * @param processDefinitionId the process definition id user want to delete - * @param fromThis fromThis - */ - mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) { - self.deleteProcessDefinitionVersion({ - version: version, - processDefinitionId: processDefinitionId - }).then(res => { - self.$message.success(res.msg || '') - fromThis.$emit('mVersionGetProcessDefinitionVersionsPage', { - pageNo: 1, - pageSize: 10, - processDefinitionId: processDefinitionId, - fromThis: fromThis - }) - }).catch(e => { - self.$message.error(e.msg || '') - }) - }, - - /** - * remove this drawer - * - * @param fromThis - */ - close ({ fromThis }) { - setTimeout(() => { - fromThis.$destroy() - self.versionsModel.remove() - }, 0) - } - }, - props: { - processDefinition: { - id: self.urlParam.id, - version: self.$store.state.dag.version, - state: self.releaseState - }, - processDefinitionVersions: processDefinitionVersions, - total: total, - pageNo: pageNo, - pageSize: pageSize - } - }) - } - }) + this.versionData.processDefinition.id = this.urlParam.id + this.versionData.processDefinition.version = this.$store.state.dag.version + this.versionData.processDefinition.state = this.releaseState + this.versionData.processDefinitionVersions = processDefinitionVersions + this.versionData.total = total + this.versionData.pageNo = pageNo + this.versionData.pageSize = pageSize + this.drawer = true }).catch(e => { this.$message.error(e.msg || '') }) + }, + + closeVersion () { + this.drawer = false } }, watch: { - 'tasks': { + tasks: { deep: true, handler (o) { - // Edit state does not allow deletion of node a... this.setIsEditDag(true) } @@ -843,8 +841,8 @@ } ], ['Label', { - location: 0.5, - id: 'label' + location: 0.5, + id: 'label' }] ], Container: 'canvas', @@ -869,10 +867,13 @@ computed: { ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name']) }, - components: {} + components: { mVersions, mFormModel, mFormLineModel, mUdp, mStart } } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue index 2b2ed78ccc..8d8f13cfee 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue @@ -23,7 +23,7 @@
@@ -35,7 +35,7 @@
@@ -46,22 +46,22 @@ {{$t('Timeout period')}} - + {{$t('Minute')}} - + {{$t('Check interval')}} - + {{$t('Minute')}} - + {{$t('Timeout strategy')}}
- - {{$t('Timeout failure')}} - + + {{$t('Timeout failure')}} +
@@ -73,7 +73,7 @@
@@ -84,17 +84,17 @@ {{$t('Timeout period')}} - + {{$t('Minute')}} - + {{$t('Timeout strategy')}}
- - {{$t('Timeout alarm')}} - {{$t('Timeout failure')}} - + + {{$t('Timeout alarm')}} + {{$t('Timeout failure')}} +
@@ -143,21 +143,21 @@ if (p === 2 || p === 0) { this.waitCompleteTimeout.strategy = is ? ['WARN'] : [] this.waitCompleteTimeout.interval = is ? 30 : null - } + } }, _verification () { // Verification timeout policy - if (this.enable - && (this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length) - || (this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) { + if (this.enable && + (this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length) || + (this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) { this.$message.warning(`${this.$t('Timeout strategy must be selected')}`) return false } // Verify timeout duration Non 0 positive integer const reg = /^[1-9]\d*$/ - if (this.enable - && (this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval)) - || (this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) { + if (this.enable && + (this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval)) || + (this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) { this.$message.warning(`${this.$t('Timeout must be a positive integer')}`) return false } @@ -175,16 +175,16 @@ }, waitCompleteTimeout: { strategy: (() => { - // Handling checkout sequence - let strategy = this.waitCompleteTimeout.strategy - if (strategy.length === 2 && strategy[0] === 'FAILED') { - return [strategy[1], strategy[0]].join(',') - } else { - return strategy.join(',') - } - })(), - interval: parseInt(this.waitCompleteTimeout.interval), - enable: this.waitCompleteTimeout.enable + // Handling checkout sequence + let strategy = this.waitCompleteTimeout.strategy + if (strategy.length === 2 && strategy[0] === 'FAILED') { + return [strategy[1], strategy[0]].join(',') + } else { + return strategy.join(',') + } + })(), + interval: parseInt(this.waitCompleteTimeout.interval), + enable: this.waitCompleteTimeout.enable } }) return true @@ -215,4 +215,4 @@ }, components: {} } - \ No newline at end of file + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue index 1d3902c83b..160db6e320 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue @@ -15,33 +15,34 @@ * limitations under the License. */ \ No newline at end of file + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue index 0dcab3e901..2fece25675 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue @@ -23,7 +23,7 @@
@@ -35,10 +35,10 @@
@@ -49,9 +49,9 @@
@@ -127,4 +127,4 @@ }, components: {} } - \ No newline at end of file + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue index 8efe5c2860..de2b2c73c2 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue @@ -15,18 +15,19 @@ * limitations under the License. */ diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue index 7874b53885..502adc767f 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue @@ -29,16 +29,16 @@ {{$t('View log')}}
- + - + - + - +
@@ -48,7 +48,7 @@
- {{$t('Close')}} + {{$t('Close')}}
@@ -67,7 +67,7 @@ */ const handerTextareaSize = (isH = 0) => { $('body').find('.tooltip.fade.top.in').remove() - return $('.textarea-ft').css({ 'height': `${$('.content-log-box').height() - isH}px` }) + return $('.textarea-ft').css({ height: `${$('.content-log-box').height() - isH}px` }) } let content = '' @@ -89,7 +89,7 @@ props: { item: { type: Object, - default: {} + default: Object }, source: { type: String, @@ -118,8 +118,8 @@ }, _ckLog () { this.isLog = true + this.store.dispatch('dag/getLog', this._rtParam).then(res => { - this.$message.destroy() if (!res.data) { this.isData = false setTimeout(() => { @@ -138,7 +138,6 @@ }, 800) } }).catch(e => { - this.$message.destroy() this.$message.error(e.msg || '') }) }, @@ -169,7 +168,7 @@ * Download log */ _downloadLog () { - downloadFile('/dolphinscheduler/log/download-log', { + downloadFile('/log/download-log', { taskInstanceId: this.stateId || this.logId }) }, @@ -180,8 +179,8 @@ this.loadingIndex = this.loadingIndex - 1 this._ckLog() }, 1000, { - 'leading': false, - 'trailing': true + leading: false, + trailing: true }), /** * down @@ -190,8 +189,8 @@ this.loadingIndex = this.loadingIndex + 1 this._ckLog() }, 1000, { - 'leading': false, - 'trailing': true + leading: false, + trailing: true }), /** * Monitor scroll bar @@ -203,11 +202,7 @@ // Listen for scrollbar events if (($this.scrollTop() + $this.height()) === $this.height()) { if (self.loadingIndex > 0) { - self.$message.loading({ - content: `${i18n.$t('Loading Log...')}`, - duration: 0, - closable: false - }) + self.$message.info(`${i18n.$t('Loading Log...')}`) self._onUp() } } @@ -215,11 +210,7 @@ if ($this.get(0).scrollHeight === ($this.height() + $this.scrollTop())) { // No data is not requested if (self.isData) { - self.$message.loading({ - content: `${i18n.$t('Loading Log...')}`, - duration: 0, - closable: false - }) + self.$message.info(`${i18n.$t('Loading Log...')}`) self._onDown() } } @@ -240,11 +231,7 @@ created () { // Source is a task instance if (this.source === 'list') { - this.$message.loading({ - content: `${i18n.$t('Loading Log...')}`, - duration: 0, - closable: false - }) + this.$message.info(`${i18n.$t('Loading Log...')}`) this._ckLog() } }, @@ -301,27 +288,30 @@ top: 12px; a{ color: #0097e0; - font-size: 12px; margin-left: 10px; - i { + em { + font-size: 17px; + font-weight: 400; + text-decoration: none !important; vertical-align: middle; } } .clock { - >i { + >em { font-size: 20px; vertical-align: middle; transform: scale(1); } } .refresh-log { - >i { + >em { + text-decoration: none; font-size: 20px; vertical-align: middle; transform: scale(1); } &.active { - >i { + >em { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; @@ -368,5 +358,16 @@ } } } - + @-webkit-keyframes rotateloading{from{-webkit-transform: rotate(0deg)} + to{-webkit-transform: rotate(360deg)} + } + @-moz-keyframes rotateloading{from{-moz-transform: rotate(0deg)} + to{-moz-transform: rotate(359deg)} + } + @-o-keyframes rotateloading{from{-o-transform: rotate(0deg)} + to{-o-transform: rotate(359deg)} + } + @keyframes rotateloading{from{transform: rotate(0deg)} + to{transform: rotate(359deg)} + } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue index 05e248f518..0a3f17b059 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue @@ -17,28 +17,30 @@ @@ -101,7 +103,7 @@ /** * Brush type */ - _handleTypeChanged ({ value }) { + _handleTypeChanged (value) { this.type = value this._getDatasourceData().then(res => { this.datasource = this.datasourceList.length && this.datasourceList[0].id || '' @@ -126,7 +128,7 @@ this.$emit('on-dsData', { type: this.type, datasource: val - }); + }) } }, created () { diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue index abec923af5..abadc2c36b 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue @@ -17,39 +17,39 @@ - \ No newline at end of file diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue index da94162989..55b9aca071 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue @@ -26,7 +26,7 @@ style="opacity: 0"> - + @@ -39,17 +39,6 @@ -
{{$t('Custom Parameters')}}
@@ -61,6 +50,12 @@
+ + + - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue index 0948c9735f..efeb7e9e36 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue @@ -19,45 +19,47 @@
{{$t('Program Type')}}
- - - - + +
{{$t('Spark Version')}}
- - - - + +
{{$t('Main class')}}
- - + +
@@ -71,99 +73,93 @@
{{$t('Deploy Mode')}}
- - - - - + + + + +
-
-
- {{$t('Driver core number')}} - - - - - {{$t('Driver memory use')}} - - - - + +
{{$t('Driver cores')}}
+
+ +
-
- {{$t('Number of Executors')}} - - - - - {{$t('Executor memory')}} - - - - +
{{$t('Driver memory')}}
+
+ +
-
- {{$t('Executor core number')}} - - - - + + +
{{$t('Executor Number')}}
+
+ +
-
+
{{$t('Executor memory')}}
+
+ + +
+ + +
{{$t('Executor cores')}}
+
+ + +
+
{{$t('Command-line parameters')}}
- - + +
{{$t('Other parameters')}}
- - + +
@@ -174,17 +170,6 @@
-
{{$t('Custom Parameters')}}
@@ -203,7 +188,7 @@ import i18n from '@/module/i18n' import mLocalParams from './_source/localParams' import mListBox from './_source/listBox' - import mResources from './_source/resources' + import mList4Box from './_source/list4Box' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' import disabledState from '@/module/mixin/disabledState' @@ -250,7 +235,7 @@ sparkVersion: 'SPARK2', // Spark version(LIst) sparkVersionList: [{ code: 'SPARK2' }, { code: 'SPARK1' }], - normalizer(node) { + normalizer (node) { return { label: node.name } @@ -267,10 +252,10 @@ /** * getResourceId */ - marjarId(name) { - this.store.dispatch('dag/getResourceId',{ + marjarId (name) { + this.store.dispatch('dag/getResourceId', { type: 'FILE', - fullName: '/'+name + fullName: '/' + name }).then(res => { this.mainJar = res.id }).catch(e => { @@ -295,55 +280,55 @@ _onCacheResourcesData (a) { this.cacheResourceList = a }, - diGuiTree(item) { // Recursive convenience tree structure + 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); + 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 + operationTree (item) { + if (item.dirctory) { + item.isDisabled = true } delete item.children }, - searchTree(element, id) { + 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); + if (element.id === id) { + return element + } else if (element.children !== null) { + let i + let result = null + for (i = 0; result === null && i < element.children.length; i++) { + result = this.searchTree(element.children[i], id) } - return result; + return result } - return null; + return null }, - dataProcess(backResource) { + dataProcess (backResource) { let isResourceId = [] let resourceIdArr = [] - if(this.resourceList.length>0) { - this.resourceList.forEach(v=>{ - this.mainJarList.forEach(v1=>{ - if(this.searchTree(v1,v)) { - isResourceId.push(this.searchTree(v1,v)) + if (this.resourceList.length > 0) { + this.resourceList.forEach(v => { + this.mainJarList.forEach(v1 => { + if (this.searchTree(v1, v)) { + isResourceId.push(this.searchTree(v1, v)) } }) }) - resourceIdArr = isResourceId.map(item=>{ + 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); + 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) { + if (diffSet.length > 0) { + diffSet.forEach(item => { + backResource.forEach(item1 => { + if (item === item1.id || item === item1.res) { optionsCmp.push(item1) } }) @@ -352,15 +337,15 @@ let noResources = [{ id: -1, name: $t('Unauthorized or deleted resources'), - fullName: '/'+$t('Unauthorized or deleted resources'), + fullName: '/' + $t('Unauthorized or deleted resources'), children: [] }] - if(optionsCmp.length>0) { + if (optionsCmp.length > 0) { this.allNoResources = optionsCmp - optionsCmp = optionsCmp.map(item=>{ - return {id: item.id,name: item.name,fullName: item.res} + optionsCmp = optionsCmp.map(item => { + return { id: item.id, name: item.name, fullName: item.res } }) - optionsCmp.forEach(item=>{ + optionsCmp.forEach(item => { item.isNew = true }) noResources[0].children = optionsCmp @@ -383,28 +368,28 @@ } if (!this.numExecutors) { - this.$message.warning(`${i18n.$t('Please enter the number of Executor')}`) + this.$message.warning(`${i18n.$t('Please enter Executor number')}`) return false } // noRes - if (this.noRes.length>0) { + if (this.noRes.length > 0) { this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`) return false } if (!Number.isInteger(parseInt(this.numExecutors))) { - this.$message.warning(`${i18n.$t('The number of Executors should be a positive integer')}`) + this.$message.warning(`${i18n.$t('The Executor Number should be a positive integer')}`) return false } if (!this.executorMemory) { - this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`) + this.$message.warning(`${i18n.$t('Please enter Executor memory')}`) return false } if (!this.executorMemory) { - this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`) + this.$message.warning(`${i18n.$t('Please enter Executor memory')}`) return false } @@ -414,7 +399,7 @@ } if (!this.executorCores) { - this.$message.warning(`${i18n.$t('Please enter ExecutorPlease enter Executor core number')}`) + this.$message.warning(`${i18n.$t('Please enter Executor cores')}`) return false } @@ -427,7 +412,7 @@ return false } // Process resourcelist - let dataProcessing= _.map(this.resourceList, v => { + let dataProcessing = _.map(this.resourceList, v => { return { id: v } @@ -462,44 +447,49 @@ this.mainClass = '' } }, - //Watch the cacheParams + // Watch the cacheParams cacheParams (val) { this.$emit('on-cache-params', val) - } - }, - computed: { - cacheParams () { - let isResourceId = [] - let resourceIdArr = [] - if(this.resourceList.length>0) { - this.resourceList.forEach(v=>{ - this.mainJarList.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} - }) - } + }, + resourceIdArr (arr) { let result = [] - resourceIdArr.forEach(item=>{ - this.allNoResources.forEach(item1=>{ - if(item.id==item1.id) { + arr.forEach(item => { + this.allNoResources.forEach(item1 => { + if (item.id === item1.id) { // resultBool = true - result.push(item1) + result.push(item1) } }) }) this.noRes = result + } + }, + computed: { + resourceIdArr () { + let isResourceId = [] + let resourceIdArr = [] + if (this.resourceList.length > 0) { + this.resourceList.forEach(v => { + this.mainJarList.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 } + }) + } + return resourceIdArr + }, + cacheParams () { return { mainClass: this.mainClass, mainJar: { id: this.mainJar }, deployMode: this.deployMode, - resourceList: resourceIdArr, + resourceList: this.resourceIdArr, localParams: this.localParams, driverCores: this.driverCores, driverMemory: this.driverMemory, @@ -514,104 +504,69 @@ } }, created () { - let item = this.store.state.dag.resourcesListS - let items = this.store.state.dag.resourcesListJar - this.diGuiTree(item) - this.diGuiTree(items) - this.mainJarList = item - this.mainJarLists = items - let o = this.backfillItem + let item = this.store.state.dag.resourcesListS + let items = this.store.state.dag.resourcesListJar + this.diGuiTree(item) + this.diGuiTree(items) + this.mainJarList = item + this.mainJarLists = items + let o = this.backfillItem - // Non-null objects represent backfill - if (!_.isEmpty(o)) { - this.mainClass = o.params.mainClass || '' - if(o.params.mainJar.res) { - this.marjarId(o.params.mainJar.res) - } else if(o.params.mainJar.res=='') { - this.mainJar = '' - } else { - this.mainJar = o.params.mainJar.id || '' - } - this.deployMode = o.params.deployMode || '' - this.driverCores = o.params.driverCores || 1 - this.driverMemory = o.params.driverMemory || '512M' - this.numExecutors = o.params.numExecutors || 2 - this.executorMemory = o.params.executorMemory || '2G' - this.executorCores = o.params.executorCores || 2 - this.mainArgs = o.params.mainArgs || '' - this.others = o.params.others - this.programType = o.params.programType || 'SCALA' - this.sparkVersion = o.params.sparkVersion || 'SPARK2' - - // 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) - } - }) - this.cacheResourceList = resourceList - } - - // backfill localParams - let localParams = o.params.localParams || [] - if (localParams.length) { - this.localParams = localParams - } + // Non-null objects represent backfill + if (!_.isEmpty(o)) { + this.mainClass = o.params.mainClass || '' + if (o.params.mainJar.res) { + this.marjarId(o.params.mainJar.res) + } else if (o.params.mainJar.res === '') { + this.mainJar = '' + } else { + this.mainJar = o.params.mainJar.id || '' } + this.deployMode = o.params.deployMode || '' + this.driverCores = o.params.driverCores || 1 + this.driverMemory = o.params.driverMemory || '512M' + this.numExecutors = o.params.numExecutors || 2 + this.executorMemory = o.params.executorMemory || '2G' + this.executorCores = o.params.executorCores || 2 + this.mainArgs = o.params.mainArgs || '' + this.others = o.params.others + this.programType = o.params.programType || 'SCALA' + this.sparkVersion = o.params.sparkVersion || 'SPARK2' + + // 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) + } + }) + this.cacheResourceList = resourceList + } + + // backfill localParams + let localParams = o.params.localParams || [] + if (localParams.length) { + this.localParams = localParams + } + } }, mounted () { }, - components: { mLocalParams, mListBox, mResources, Treeselect } + components: { mLocalParams, mListBox, mList4Box, Treeselect } } - - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue index 8e892ab247..7e3ae465c8 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue @@ -35,51 +35,49 @@ :sql-type="sqlType">
-
{{$t('SQL Parameter')}}
- - + :placeholder="$t('Please enter format') + ' key1=value1;key2=value2...'"> +
@@ -92,7 +90,7 @@ style="opacity: 0;"> - +
@@ -138,6 +136,12 @@
+ + + - - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue index c852f7f75f..7647e67ab4 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue @@ -20,23 +20,14 @@
{{$t('Custom Job')}}
- - +
{{$t('Custom Script')}}
- +
@@ -44,29 +35,25 @@
{{$t('Sqoop Job Name')}}
- - +
{{$t('Direct')}}
- - + - - + +
@@ -100,18 +87,19 @@
{{$t('Type')}}
- - + - - + +
@@ -134,10 +122,10 @@
{{$t('ModelType')}}
- - {{$t('Form')}} - SQL - + + {{$t('Form')}} + SQL +
@@ -146,34 +134,36 @@
{{$t('Table')}}
- - +
{{$t('ColumnType')}}
- - {{$t('All Columns')}} - {{$t('Some Columns')}} - + + {{$t('All Columns')}} + {{$t('Some Columns')}} +
{{$t('Column')}}
- - +
@@ -184,45 +174,49 @@
{{$t('Database')}}
- - +
{{$t('Table')}}
- - +
{{$t('Hive partition Keys')}}
- - +
{{$t('Hive partition Values')}}
- - +
@@ -231,12 +225,13 @@
{{$t('Export Dir')}}
- - +
@@ -251,7 +246,7 @@ style="opacity: 0;"> - + @@ -290,91 +285,97 @@
{{$t('Type')}}
- - - - + +
{{$t('Database')}}
- - +
{{$t('Table')}}
- - +
{{$t('CreateHiveTable')}}
- +
{{$t('DropDelimiter')}}
- +
{{$t('OverWriteSrc')}}
- +
{{$t('ReplaceDelimiter')}}
- - +
{{$t('Hive partition Keys')}}
- - +
{{$t('Hive partition Values')}}
- - +
@@ -382,62 +383,65 @@
{{$t('Target Dir')}}
- - +
{{$t('DeleteTargetDir')}}
- +
{{$t('CompressionCodec')}}
- - snappy - lzo - gzip - no - + + snappy + lzo + gzip + no +
{{$t('FileType')}}
- - avro - sequence - text - parquet - + + avro + sequence + text + parquet +
{{$t('FieldsTerminated')}}
- - +
{{$t('LinesTerminated')}}
- - +
@@ -458,71 +462,76 @@
{{$t('Table')}}
- - +
{{$t('Column')}}
- - +
{{$t('FieldsTerminated')}}
- - +
{{$t('LinesTerminated')}}
- - +
{{$t('IsUpdate')}}
- +
{{$t('UpdateKey')}}
- - +
{{$t('UpdateMode')}}
- - {{$t('OnlyUpdate')}} - {{$t('AllowInsert')}} - + + {{$t('OnlyUpdate')}} + {{$t('AllowInsert')}} +
@@ -530,13 +539,13 @@
{{$t('Concurrency')}}
- - - +
@@ -551,6 +560,12 @@
+ + + - - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue index e96d409c2c..23fe4ceb42 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue @@ -22,19 +22,20 @@
- - - - + @change="_handleWdiChanged"> + + +
@@ -77,7 +78,7 @@ * The selected process defines the upper component name padding */ _handleWdiChanged (o) { - this.$emit('on-set-process-name', this._handleName(o.value)) + this.$emit('on-set-process-name', this._handleName(o)) }, /** * Return the name according to the process definition id @@ -96,7 +97,7 @@ created () { let processListS = _.cloneDeep(this.store.state.dag.processListS) let id = null - if(this.router.history.current.name==='projects-instance-details') { + if (this.router.history.current.name === 'projects-instance-details') { id = this.router.history.current.query.id || null } else { id = this.router.history.current.params.id || null @@ -118,7 +119,7 @@ this.wdiCurr = o.params.processDefinitionId } else { if (this.processDefinitionList.length) { - this.wdiCurr = this.processDefinitionList[0]['id'] + this.wdiCurr = this.processDefinitionList[0].id this.$emit('on-set-process-name', this._handleName(this.wdiCurr)) } } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue index f67ec6dde8..bdf2e337e7 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue @@ -17,58 +17,56 @@ + - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js index c1f77f6876..9f55265e33 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js @@ -14,10 +14,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import Vue from 'vue' -import mAffirm from './jumpAffirm' import store from '@/conf/home/store' +import i18n from '@/module/i18n' import router from '@/conf/home/router' import { uuid, findComponentDownward } from '@/module/util/' @@ -81,34 +80,18 @@ Affirm.paramVerification = (name) => { * Pop-up judgment */ Affirm.isPop = (fn) => { - Vue.$modal.dialog({ - closable: false, - showMask: true, - escClose: true, - className: 'v-modal-custom', - transitionName: 'opacityp', - render (h) { - return h(mAffirm, { - on: { - ok () { - // save - findComponentDownward($root, 'dag-chart')._save('affirm').then(() => { - fn() - Vue.$modal.destroy() - }).catch(() => { - fn() - Vue.$modal.destroy() - }) - }, - close () { - fn() - Vue.$modal.destroy() - } - }, - props: { - } - }) - } + Vue.prototype.$confirm(`${i18n.$t('Whether to save the DAG graph')}`, '', { + confirmButtonText: `${i18n.$t('Save')}`, + cancelButtonText: `${i18n.$t('Cancel')}`, + type: 'warning' + }).then(() => { + findComponentDownward($root, 'dag-chart')._save('affirm').then(() => { + fn() + }).catch(() => { + fn() + }) + }).catch(() => { + fn() }) } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js index 03c3d2dcbf..0037af68b6 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js @@ -17,7 +17,6 @@ import 'jquery-ui/ui/widgets/draggable' import 'jquery-ui/ui/widgets/droppable' import 'jquery-ui/ui/widgets/resizable' -import Vue from 'vue' import _ from 'lodash' import i18n from '@/module/i18n' import { jsPlumb } from 'jsplumb' @@ -34,7 +33,6 @@ import { rtTargetarrArr, computeScale } from './util' -import mStart from '@/conf/home/pages/projects/pages/definition/pages/list/_source/start' import multiDrag from './multiDrag' const JSP = function () { @@ -88,7 +86,7 @@ JSP.prototype.init = function ({ dag, instance, options }) { if (this.config.isClick) { this.connectClick(e) } else { - findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId}) + findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({ id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId }) } }) @@ -208,8 +206,8 @@ JSP.prototype.jsonHandle = function ({ largeJson, locations }) { taskType: v.type, runFlag: v.runFlag, nodenumber: locations[v.id].nodenumber, - successNode: v.conditionResult === undefined? '' : v.conditionResult.successNode[0], - failedNode: v.conditionResult === undefined? '' : v.conditionResult.failedNode[0] + successNode: v.conditionResult === undefined ? '' : v.conditionResult.successNode[0], + failedNode: v.conditionResult === undefined ? '' : v.conditionResult.failedNode[0] })) // contextmenu event @@ -280,10 +278,10 @@ JSP.prototype.tasksContextmenu = function (event) { const isTwo = store.state.dag.isDetails const html = [ - `${i18n.$t('Start')}`, - `${i18n.$t('Edit')}`, - `${i18n.$t('Copy')}`, - `${i18n.$t('Delete')}` + `${i18n.$t('Start')}`, + `${i18n.$t('Edit')}`, + `${i18n.$t('Copy')}`, + `${i18n.$t('Delete')}` ] const operationHtml = () => { @@ -310,35 +308,7 @@ JSP.prototype.tasksContextmenu = function (event) { const name = store.state.dag.name const id = router.history.current.params.id store.dispatch('dag/getStartCheck', { processDefinitionId: id }).then(res => { - const modal = Vue.$modal.dialog({ - closable: false, - showMask: true, - escClose: true, - className: 'v-modal-custom', - transitionName: 'opacityp', - render (h) { - return h(mStart, { - on: { - onUpdate () { - modal.remove() - }, - close () { - modal.remove() - } - }, - props: { - item: { - id: id, - name: name - }, - startNodeList: $name, - sourceType: 'contextmenu' - } - }) - } - }) - }).catch(e => { - Vue.$message.error(e.msg || '') + this.dag.startRunning({ id: id, name: name }, $name, 'contextmenu') }) }) } @@ -370,7 +340,6 @@ JSP.prototype.tasksDblclick = function (e) { // Untie event if (this.config.isDblclick) { const id = $(e.currentTarget.offsetParent).attr('id') - findComponentDownward(this.dag.$root, 'dag-chart')._createNodes({ id: id, type: $(`#${id}`).attr('data-tasks-type') @@ -499,7 +468,7 @@ JSP.prototype.removeNodes = function ($id) { // callback onRemoveNodes event this.options && this.options.onRemoveNodes && this.options.onRemoveNodes($id) - let connects = [] + const connects = [] _.map(this.JspInstance.getConnections(), v => { connects.push({ endPointSourceId: v.sourceId, @@ -604,10 +573,10 @@ JSP.prototype.copyNodes = function ($id) { JSP.prototype.handleEventScreen = function ({ item, is }) { let screenOpen = true if (is) { - item.icon = 'ans-icon-min' + item.icon = 'el-icon-minus' screenOpen = true } else { - item.icon = 'ans-icon-max' + item.icon = 'el-icon-full-screen' screenOpen = false } const $mainLayoutModel = $('.main-layout-model') @@ -658,7 +627,7 @@ JSP.prototype.saveStore = function () { tasks.push(tasksParam) } }) - if(store.state.dag.connects.length ===this.JspInstance.getConnections().length) { + if (store.state.dag.connects.length === this.JspInstance.getConnections().length) { _.map(store.state.dag.connects, u => { connects.push({ endPointSourceId: u.endPointSourceId, @@ -666,7 +635,7 @@ JSP.prototype.saveStore = function () { label: u.label }) }) - } else if(store.state.dag.connects.length>0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) { + } else if (store.state.dag.connects.length > 0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) { _.map(this.JspInstance.getConnections(), v => { connects.push({ endPointSourceId: v.sourceId, @@ -676,12 +645,12 @@ JSP.prototype.saveStore = function () { }) _.map(store.state.dag.connects, u => { _.map(connects, v => { - if(u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId===v.endPointTargetId) { + if (u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId === v.endPointTargetId) { v.label = u.label } }) }) - } else if(store.state.dag.connects.length===0) { + } else if (store.state.dag.connects.length === 0) { _.map(this.JspInstance.getConnections(), v => { connects.push({ endPointSourceId: v.sourceId, @@ -690,7 +659,7 @@ JSP.prototype.saveStore = function () { }) }) } - + _.map(tasksAll(), v => { locations[v.id] = { name: v.name, @@ -783,7 +752,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) { _.map(connects, v => { let sourceId = v.endPointSourceId.split('-') let targetId = v.endPointTargetId.split('-') - let labels = v.label + const labels = v.label if (sourceId.length === 4 && targetId.length === 4) { sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}` targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}` @@ -791,24 +760,24 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) { sourceId = v.endPointSourceId targetId = v.endPointTargetId } - - if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) { + + if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) { this.JspInstance.connect({ source: sourceId, target: targetId, type: 'basic', paintStyle: { strokeWidth: 2, stroke: '#4caf50' }, - HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}, - overlays:[["Label", { label: labels} ]] + HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 }, + overlays: [['Label', { label: labels }]] }) - } else if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) { + } else if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) { this.JspInstance.connect({ source: sourceId, target: targetId, type: 'basic', paintStyle: { strokeWidth: 2, stroke: '#252d39' }, - HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}, - overlays:[["Label", { label: labels} ]] + HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 }, + overlays: [['Label', { label: labels }]] }) } else { this.JspInstance.connect({ @@ -816,8 +785,8 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) { target: targetId, type: 'basic', paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' }, - HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}, - overlays:[["Label", { label: labels} ]] + HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 }, + overlays: [['Label', { label: labels }]] }) } }) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js index f5aacf294f..176f852e83 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js @@ -37,7 +37,7 @@ const saveTargetarr = (valId, domId) => { } const rtBantpl = () => { - return `` + return `` } /** @@ -100,13 +100,13 @@ const setSvgColor = (e, color) => { // Traverse clear all colors $('.jtk-connector').each((i, o) => { _.map($(o)[0].childNodes, v => { - if($(v).attr('fill') ==='#ccc') { + if ($(v).attr('fill') === '#ccc') { $(v).attr('fill', '#2d8cf0') } - if($(v).attr('fill') ==='#4caf50') { - $(v).attr('fill','#4caf50').attr('stroke', '#4caf50').attr('stroke-width', 2) + if ($(v).attr('fill') === '#4caf50') { + $(v).attr('fill', '#4caf50').attr('stroke', '#4caf50').attr('stroke-width', 2) $(v).prev().attr('stroke', '#4caf50').attr('stroke-width', 2) - } else if($(v).attr('fill') ==='#252d39') { + } else if ($(v).attr('fill') === '#252d39') { $(v).attr('stroke', '#252d39').attr('stroke-width', 2) $(v).prev().attr('stroke', '#252d39').attr('stroke-width', 2) } else { @@ -117,7 +117,7 @@ const setSvgColor = (e, color) => { // Add color to the selection _.map($(e.canvas)[0].childNodes, (v, i) => { - if($(v).attr('fill') ==='#2d8cf0') { + if ($(v).attr('fill') === '#2d8cf0') { $(v).attr('fill', '#ccc') } $(v).attr('stroke', '#ccc') diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue index 516f03bc2f..9520386b8d 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue @@ -18,7 +18,7 @@
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue index 33be9e096f..9f6ed83d4a 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue @@ -37,7 +37,7 @@ } }, watch: { - '$route': { + $route: { deep: true, handler () { this.isActive = false diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue index 7209c4daff..23e4bdca05 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue @@ -18,23 +18,23 @@