From e033f81e9d340d45896a89144668762fe1f7d5b7 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Fri, 11 Dec 2020 22:58:28 +0800 Subject: [PATCH] [Feature-3878]Replace the page with element-ui (#4065) * [Feature-3878]Introduce elment-ui and replace the security center module page with elment-ui * Change node version * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * Replace the page with element-ui * Replace user management with elment-ui * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * Repair the last Sunday of each month --- .github/workflows/ci_frontend.yml | 3 +- dolphinscheduler-dist/release-docs/LICENSE | 1 + .../licenses/ui-licenses/LICENSE-element-ui | 21 + dolphinscheduler-ui/build/config.js | 2 +- dolphinscheduler-ui/package.json | 6 +- dolphinscheduler-ui/pom.xml | 3 +- dolphinscheduler-ui/src/js/conf/home/index.js | 13 +- .../js/conf/home/pages/dag/_source/config.js | 38 +- .../src/js/conf/home/pages/dag/_source/dag.js | 35 +- .../js/conf/home/pages/dag/_source/dag.scss | 3 +- .../js/conf/home/pages/dag/_source/dag.vue | 579 ++++++++--------- .../formModel/_source/dependentTimeout.vue | 32 +- .../_source/formModel/_source/selectInput.vue | 27 +- .../formModel/_source/timeoutAlarm.vue | 14 +- .../formModel/_source/workerGroups.vue | 15 +- .../dag/_source/formModel/formLineModel.vue | 32 +- .../pages/dag/_source/formModel/formModel.vue | 171 +++-- .../home/pages/dag/_source/formModel/log.vue | 33 +- .../formModel/tasks/_source/datasource.vue | 22 +- .../tasks/_source/dependItemList.vue | 56 +- .../formModel/tasks/_source/httpParams.vue | 27 +- .../formModel/tasks/_source/jsonBox.vue | 117 ++++ .../formModel/tasks/_source/localParams.vue | 38 +- .../formModel/tasks/_source/nodeStatus.vue | 26 +- .../formModel/tasks/_source/resources.vue | 9 +- .../formModel/tasks/_source/scriptBox.vue | 7 - .../formModel/tasks/_source/sqlType.vue | 15 +- .../formModel/tasks/_source/statementList.vue | 13 +- .../_source/formModel/tasks/_source/udfs.vue | 9 +- .../_source/formModel/tasks/conditions.vue | 6 +- .../dag/_source/formModel/tasks/datax.vue | 99 +-- .../dag/_source/formModel/tasks/dependent.vue | 6 +- .../dag/_source/formModel/tasks/flink.vue | 93 +-- .../dag/_source/formModel/tasks/http.vue | 40 +- .../pages/dag/_source/formModel/tasks/mr.vue | 32 +- .../dag/_source/formModel/tasks/pre_tasks.vue | 9 +- .../dag/_source/formModel/tasks/procedure.vue | 14 +- .../dag/_source/formModel/tasks/python.vue | 51 +- .../dag/_source/formModel/tasks/shell.vue | 58 +- .../dag/_source/formModel/tasks/spark.vue | 148 ++--- .../pages/dag/_source/formModel/tasks/sql.vue | 69 +- .../dag/_source/formModel/tasks/sqoop.vue | 263 ++++---- .../_source/formModel/tasks/sub_process.vue | 21 +- .../dag/_source/formModel/tasks/waterdrop.vue | 43 +- .../pages/dag/_source/jumpAffirm/index.js | 43 +- .../pages/dag/_source/plugIn/jsPlumbHandle.js | 83 +-- .../home/pages/dag/_source/plugIn/util.js | 12 +- .../pages/dag/_source/startingParam/index.vue | 2 +- .../dag/_source/udp/_source/selectTenant.vue | 15 +- .../conf/home/pages/dag/_source/udp/udp.vue | 26 +- .../dag/_source/variable/variablesView.vue | 16 +- .../pages/list/_source/createDataSource.vue | 99 ++- .../datasource/pages/list/_source/list.vue | 142 ++-- .../pages/datasource/pages/list/index.vue | 62 +- .../src/js/conf/home/pages/home/index.vue | 2 +- .../src/js/conf/home/pages/monitor/index.vue | 2 +- .../servers/_source/zookeeperDirectories.vue | 23 +- .../pages/servers/_source/zookeeperList.vue | 108 +-- .../pages/monitor/pages/servers/apiserver.vue | 6 - .../home/pages/monitor/pages/servers/db.vue | 17 +- .../pages/monitor/pages/servers/worker.vue | 23 +- .../conditions/instance/processInstance.vue | 61 +- .../conditions/instance/taskInstance.vue | 63 +- .../taskRecordList/_source/conditions.vue | 68 +- .../_source/taskRecordList/_source/list.vue | 96 +-- .../pages/_source/taskRecordList/index.vue | 11 +- .../definition/pages/list/_source/email.vue | 38 +- .../definition/pages/list/_source/list.vue | 615 ++++++++---------- .../pages/list/_source/relatedItems.vue | 12 +- .../definition/pages/list/_source/start.vue | 101 ++- .../definition/pages/list/_source/timing.vue | 147 +++-- .../pages/list/_source/versions.vue | 171 ++--- .../pages/definition/pages/list/index.vue | 17 +- .../pages/definition/pages/tree/index.vue | 24 +- .../pages/definition/timing/_source/list.vue | 240 +++---- .../pages/definition/timing/index.vue | 2 +- .../home/pages/projects/pages/index/index.vue | 26 +- .../pages/instance/pages/gantt/index.vue | 2 +- .../instance/pages/list/_source/list.vue | 489 ++++++-------- .../pages/instance/pages/list/index.vue | 12 +- .../pages/kinship/_source/graphGridOption.js | 53 +- .../pages/projects/pages/kinship/index.vue | 26 +- .../pages/list/_source/createProject.vue | 24 +- .../projects/pages/list/_source/list.vue | 142 ++-- .../home/pages/projects/pages/list/index.vue | 47 +- .../pages/taskInstance/_source/list.vue | 196 +++--- .../projects/pages/taskInstance/index.vue | 12 +- .../src/js/conf/home/pages/resource/index.vue | 1 - .../home/pages/resource/pages/file/index.vue | 1 - .../pages/file/pages/create/index.vue | 29 +- .../pages/file/pages/createFolder/index.vue | 34 +- .../file/pages/createUdfFolder/index.vue | 22 +- .../pages/file/pages/details/index.vue | 6 +- .../resource/pages/file/pages/edit/index.vue | 4 +- .../pages/file/pages/list/_source/list.vue | 215 +++--- .../pages/file/pages/list/_source/rename.vue | 21 +- .../resource/pages/file/pages/list/index.vue | 22 +- .../pages/file/pages/subFile/index.vue | 26 +- .../pages/file/pages/subFileFolder/index.vue | 34 +- .../file/pages/subdirectory/_source/list.vue | 211 +++--- .../pages/subdirectory/_source/rename.vue | 21 +- .../pages/file/pages/subdirectory/index.vue | 22 +- .../pages/udf/pages/createUdfFolder/index.vue | 21 +- .../udf/pages/function/_source/createUdf.vue | 48 +- .../pages/udf/pages/function/_source/list.vue | 186 ++---- .../pages/udf/pages/function/index.vue | 59 +- .../pages/udf/pages/resource/_source/list.vue | 208 +++--- .../udf/pages/resource/_source/rename.vue | 21 +- .../pages/udf/pages/resource/index.vue | 20 +- .../pages/subUdfDirectory/_source/list.vue | 203 +++--- .../pages/subUdfDirectory/_source/rename.vue | 21 +- .../pages/udf/pages/subUdfDirectory/index.vue | 20 +- .../pages/udf/pages/subUdfFolder/index.vue | 21 +- .../src/js/conf/home/pages/security/index.vue | 1 - .../pages/queue/_source/createQueue.vue | 22 +- .../security/pages/queue/_source/list.vue | 96 +-- .../home/pages/security/pages/queue/index.vue | 61 +- .../pages/tenement/_source/createTenement.vue | 37 +- .../security/pages/tenement/_source/list.vue | 123 ++-- .../pages/security/pages/tenement/index.vue | 61 +- .../home/pages/security/pages/token/index.vue | 1 - .../pages/users/_source/createUser.vue | 56 +- .../security/pages/users/_source/list.vue | 426 +++++------- .../home/pages/security/pages/users/index.vue | 62 +- .../warningGroups/_source/createWarning.vue | 30 +- .../pages/warningGroups/_source/list.vue | 176 ++--- .../security/pages/warningGroups/index.vue | 62 +- .../workerGroups/_source/createWorker.vue | 10 +- .../pages/workerGroups/_source/list.vue | 64 +- .../security/pages/workerGroups/index.vue | 38 +- .../src/js/conf/home/pages/user/index.vue | 1 - .../pages/user/pages/account/_source/info.vue | 56 +- .../home/pages/user/pages/account/index.vue | 1 - .../user/pages/password/_source/info.vue | 12 +- .../home/pages/user/pages/password/index.vue | 1 - .../user/pages/token/_source/createToken.vue | 43 +- .../pages/user/pages/token/_source/list.vue | 110 ++-- .../home/pages/user/pages/token/index.vue | 60 +- .../src/js/conf/home/store/dag/actions.js | 18 +- .../src/js/conf/home/store/dag/mutations.js | 4 +- .../src/js/conf/home/store/kinship/actions.js | 26 +- .../js/conf/home/store/projects/mutations.js | 4 +- .../src/js/conf/home/store/projects/state.js | 2 +- dolphinscheduler-ui/src/js/conf/login/App.vue | 16 +- .../src/js/conf/login/index.js | 8 +- .../components/conditions/conditions.vue | 10 +- .../crontab/source/_source/input-number.vue | 9 +- .../components/crontab/source/_times/day.vue | 104 +-- .../components/crontab/source/_times/hour.vue | 36 +- .../crontab/source/_times/minute.vue | 36 +- .../crontab/source/_times/month.vue | 36 +- .../crontab/source/_times/second.vue | 36 +- .../components/crontab/source/_times/year.vue | 36 +- .../module/components/crontab/source/app.vue | 14 +- .../components/crontab/source/util/index.js | 2 +- .../fileUpdate/definitionUpdate.vue | 29 +- .../fileUpdate/fileChildReUpdate.vue | 25 +- .../components/fileUpdate/fileChildUpdate.vue | 37 +- .../components/fileUpdate/fileReUpload.vue | 25 +- .../components/fileUpdate/fileUpdate.vue | 34 +- .../fileUpdate/resourceChildUpdate.vue | 35 +- .../components/fileUpdate/udfUpdate.vue | 18 +- .../js/module/components/layout/layout.vue | 4 +- .../src/js/module/components/nav/nav.vue | 355 +++++----- .../src/js/module/components/popup/popup.vue | 5 +- .../module/components/priority/priority.vue | 47 +- .../components/secondaryMenu/_source/menu.js | 32 +- .../secondaryMenu/secondaryMenu.vue | 6 +- .../components/tooltipsJSON/tooltipsJSON.vue | 10 +- .../module/components/transfer/resource.vue | 68 +- .../module/components/transfer/transfer.vue | 66 +- .../src/js/module/i18n/locale/en_US.js | 42 +- .../src/js/module/i18n/locale/zh_CN.js | 36 +- .../src/sass/common/_table.scss | 9 + .../src/sass/common/index.scss | 1 - e2e/testng.xml | 8 +- 176 files changed, 4428 insertions(+), 5663 deletions(-) create mode 100644 dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui create mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue diff --git a/.github/workflows/ci_frontend.yml b/.github/workflows/ci_frontend.yml index b8e11252c8..1feaabaeb3 100644 --- a/.github/workflows/ci_frontend.yml +++ b/.github/workflows/ci_frontend.yml @@ -52,7 +52,6 @@ jobs: npm install npm run lint npm run build - License-check: runs-on: ubuntu-latest steps: @@ -68,4 +67,4 @@ jobs: with: java-version: 1.8 - name: Check - run: mvn -B apache-rat:check + run: mvn -B apache-rat:check \ No newline at end of file diff --git a/dolphinscheduler-dist/release-docs/LICENSE b/dolphinscheduler-dist/release-docs/LICENSE index 038eea9450..27bbaedde0 100644 --- a/dolphinscheduler-dist/release-docs/LICENSE +++ b/dolphinscheduler-dist/release-docs/LICENSE @@ -490,6 +490,7 @@ MIT licenses clipboard 2.0.1: https://github.com/zenorocha/clipboard.js MIT codemirror 5.43.0: https://github.com/codemirror/CodeMirror MIT dayjs 1.7.8: https://github.com/iamkun/dayjs MIT + element-ui 2.13.2: https://github.com/ElemeFE/element MIT html2canvas 0.5.0-beta4: https://github.com/niklasvh/html2canvas MIT jquery 3.3.1: https://github.com/jquery/jquery MIT jquery-ui 1.12.1: https://github.com/jquery/jquery-ui MIT diff --git a/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui b/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui new file mode 100644 index 0000000000..4b275d033b --- /dev/null +++ b/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016-present ElemeFE + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/dolphinscheduler-ui/build/config.js b/dolphinscheduler-ui/build/config.js index 2800115d80..11bbec550f 100644 --- a/dolphinscheduler-ui/build/config.js +++ b/dolphinscheduler-ui/build/config.js @@ -207,7 +207,7 @@ const baseConfig = { 'jquery':'jquery/dist/jquery.min.js', 'jquery-ui': 'jquery-ui' }, - extensions: ['.js', 'json', '.vue', '.scss'] + extensions: ['*', '.js', 'json', '.vue', '.scss'] }, plugins: [ new VueLoaderPlugin(), diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json index 9624fa6212..8a9291c43d 100644 --- a/dolphinscheduler-ui/package.json +++ b/dolphinscheduler-ui/package.json @@ -13,7 +13,6 @@ }, "dependencies": { "@riophae/vue-treeselect": "^0.4.0", - "ans-ui": "1.1.9", "axios": "^0.16.2", "bootstrap": "3.3.7", "canvg": "1.5.1", @@ -23,6 +22,8 @@ "dagre": "^0.8.5", "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", @@ -31,7 +32,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" }, @@ -65,6 +66,7 @@ "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.2", "node-sass": "^4.14.1", + "pack": "^2.2.0", "postcss-loader": "^3.0.0", "progress-bar-webpack-plugin": "^1.12.1", "rimraf": "^2.6.2", diff --git a/dolphinscheduler-ui/pom.xml b/dolphinscheduler-ui/pom.xml index 8e644de265..1263502cc3 100644 --- a/dolphinscheduler-ui/pom.xml +++ b/dolphinscheduler-ui/pom.xml @@ -203,5 +203,4 @@ - - + \ No newline at end of file diff --git a/dolphinscheduler-ui/src/js/conf/home/index.js b/dolphinscheduler-ui/src/js/conf/home/index.js index efec218b30..1324705d99 100644 --- a/dolphinscheduler-ui/src/js/conf/home/index.js +++ b/dolphinscheduler-ui/src/js/conf/home/index.js @@ -18,6 +18,9 @@ // 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 Vue from 'vue' +import ElementUI from 'element-ui' +import locale from 'element-ui/lib/locale/lang/en' +import 'element-ui/lib/theme-chalk/index.css' import App from './App' import router from './router' import store from './store' @@ -27,20 +30,20 @@ import Chart from '@/module/ana-charts' import '@/module/filter/formatDate' 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 '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(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..f759496804 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-rank', 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-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 937b7391ef..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,7 @@ Dag.prototype.setConfig = function (o) { */ Dag.prototype.create = function () { const self = this - let plumbIns = jsPlumb.getInstance() + const plumbIns = jsPlumb.getInstance() plumbIns.reset() plumbIns.ready(() => { JSP.init({ @@ -78,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) @@ -93,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 } @@ -130,7 +123,7 @@ 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) @@ -166,7 +159,7 @@ Dag.prototype.backfill = function (arg) { }) }) } else { - let plumbIns = jsPlumb.getInstance() + const plumbIns = jsPlumb.getInstance() plumbIns.reset() plumbIns.ready(() => { JSP.init({ 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..cc9ae76367 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 @@ -277,8 +277,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..a47d729baa 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,45 @@
+ + + + + + + + + + + + + + + + + + + @@ -159,6 +204,7 @@ import disabledState from '@/module/mixin/disabledState' import { mapActions, mapState, mapMutations } from 'vuex' import mVersions from '../../projects/pages/definition/pages/list/_source/versions' + import mStart from '../../projects/pages/definition/pages/list/_source/start' let eventModel @@ -179,7 +225,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,7 +268,18 @@ 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) { @@ -379,7 +468,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') { @@ -439,33 +533,12 @@ } 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 +549,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 @@ -540,44 +609,46 @@ _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 - } - }) - } - }) + this.lineData.id = id + this.lineData.sourceId = sourceId + this.lineData.targetId = targetId + this.lineDrawer = true }, + + 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 = [] @@ -609,66 +680,19 @@ } 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) - } - - 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.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 + + this.nodeDrawer = true + }, removeEventModelById ($id) { if(eventModel && this.taskId == $id){ @@ -676,6 +700,50 @@ } }, + /** + * 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 || '') + }) + }, + /** * query the process definition pagination version */ @@ -690,117 +758,15 @@ 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 || '') }) @@ -869,10 +835,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..7d2c711b47 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')}} +
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..297cfaa892 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. */ + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue index 0bbbb661f4..ea5f299aa8 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue @@ -20,64 +20,68 @@ v-for="(item,$index) in localParamsList" :key="item.id" @click="_getIndex($index)"> - - + - - + - + - + - + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue index fe9b28b779..3d6d0e6327 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue @@ -17,27 +17,27 @@ @@ -299,6 +299,8 @@