[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
apache · Dec 11, 2020 · e033f81 · e033f81
1 parent a13e737
commit e033f81
Show file tree

Hide file tree

Showing 176 changed files with 4,422 additions and 5,657 deletions.
diff --git 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
diff --git 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
@@ -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. 
diff --git 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
@@ -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
@@ -203,5 +203,4 @@
  </profiles>
 
 
-
-</project>
+</project>
diff --git 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
@@ -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
@@ -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
@@ -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;