Browse Source

[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
data_quality_design
break60 3 years ago committed by GitHub
parent
commit
e033f81e9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      .github/workflows/ci_frontend.yml
  2. 1
      dolphinscheduler-dist/release-docs/LICENSE
  3. 21
      dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui
  4. 2
      dolphinscheduler-ui/build/config.js
  5. 6
      dolphinscheduler-ui/package.json
  6. 3
      dolphinscheduler-ui/pom.xml
  7. 13
      dolphinscheduler-ui/src/js/conf/home/index.js
  8. 38
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
  9. 35
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
  10. 3
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
  11. 577
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
  12. 32
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
  13. 27
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
  14. 14
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
  15. 15
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
  16. 32
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
  17. 171
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
  18. 33
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
  19. 22
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
  20. 56
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
  21. 27
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
  22. 117
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
  23. 38
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
  24. 26
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
  25. 9
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
  26. 7
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
  27. 15
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
  28. 13
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
  29. 9
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
  30. 6
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
  31. 99
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
  32. 6
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
  33. 93
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
  34. 40
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
  35. 32
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
  36. 9
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
  37. 14
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
  38. 51
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
  39. 58
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
  40. 148
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
  41. 69
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
  42. 263
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
  43. 21
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
  44. 43
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
  45. 43
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
  46. 83
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
  47. 12
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
  48. 2
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
  49. 15
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
  50. 26
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
  51. 16
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
  52. 99
      dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
  53. 142
      dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
  54. 62
      dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
  55. 2
      dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue
  56. 2
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue
  57. 23
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue
  58. 108
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
  59. 6
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue
  60. 17
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
  61. 23
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
  62. 61
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue
  63. 63
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue
  64. 68
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
  65. 96
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
  66. 11
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
  67. 38
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
  68. 615
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
  69. 12
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue
  70. 101
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
  71. 143
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
  72. 171
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue
  73. 17
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
  74. 24
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
  75. 240
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
  76. 2
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue
  77. 26
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
  78. 2
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
  79. 487
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
  80. 12
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
  81. 53
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js
  82. 26
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue
  83. 24
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
  84. 142
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
  85. 47
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
  86. 196
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
  87. 12
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
  88. 1
      dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue
  89. 1
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue
  90. 29
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
  91. 34
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue
  92. 22
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createUdfFolder/index.vue
  93. 6
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue
  94. 4
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/edit/index.vue
  95. 215
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
  96. 21
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue
  97. 22
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue
  98. 26
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subFile/index.vue
  99. 34
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subFileFolder/index.vue
  100. 211
      dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
  101. Some files were not shown because too many files have changed in this diff Show More

3
.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

1
dolphinscheduler-dist/release-docs/LICENSE vendored

@ -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

21
dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui vendored

@ -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.

2
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(),

6
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",

3
dolphinscheduler-ui/pom.xml

@ -203,5 +203,4 @@
</profiles>
</project>
</project>

13
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)

38
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
}
}

35
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({

3
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;

577
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@ -34,31 +34,33 @@
<div class="dag-contect">
<div class="dag-toolbar">
<div class="assist-btn">
<x-button
style="vertical-align: middle;"
data-toggle="tooltip"
:title="$t('View variables')"
data-container="body"
type="primary"
size="xsmall"
:disabled="$route.name !== 'projects-instance-details'"
@click="_toggleView"
icon="ans-icon-code">
</x-button>
<x-button
<el-button
style="vertical-align: middle;"
data-toggle="tooltip"
:title="$t('Startup parameter')"
:title="$t('View variables')"
data-container="body"
type="primary"
size="xsmall"
size="mini"
:disabled="$route.name !== 'projects-instance-details'"
@click="_toggleParam"
icon="ans-icon-arrow-circle-right">
</x-button>
@click="_toggleView"
icon="el-icon-c-scale-to-original">
</el-button>
<span>
<el-button
style="vertical-align: middle;"
data-toggle="tooltip"
:title="$t('Startup parameter')"
data-container="body"
type="primary"
size="mini"
:disabled="$route.name !== 'projects-instance-details'"
@click="_toggleParam"
icon="el-icon-arrow-right">
</el-button>
</span>
<span class="name">{{name}}</span>
&nbsp;
<span v-if="name" class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body" data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
<span v-if="name" class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="el-icon-copy-document" data-container="body" data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
</div>
<div class="save-btn">
<div class="operation" style="vertical-align: middle;">
@ -68,71 +70,75 @@
:id="item.code"
:key="$index"
@click="_ckOperation(item,$event)">
<x-button type="text" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></x-button>
<el-button type="text" class="operBtn" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></el-button>
</a>
</div>
<x-button
type="primary"
v-tooltip.light="$t('Format DAG')"
icon="ans-icon-triangle-solid-right"
size="xsmall"
data-container="body"
v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
style="vertical-align: middle;"
@click="dagAutomaticLayout">
</x-button>
<x-button
v-tooltip.light="$t('Refresh DAG status')"
data-container="body"
style="vertical-align: middle;"
icon="ans-icon-refresh"
type="primary"
:loading="isRefresh"
v-if="type === 'instance'"
@click="!isRefresh && _refresh()"
size="xsmall" >
</x-button>
<x-button
<el-button
type="primary"
v-tooltip.light="$t('Format DAG')"
icon="el-icon-caret-right"
size="mini"
data-container="body"
v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
style="vertical-align: middle;"
@click="dagAutomaticLayout">
</el-button>
<span>
<el-button
v-tooltip.light="$t('Refresh DAG status')"
data-container="body"
style="vertical-align: middle;"
icon="el-icon-refresh"
type="primary"
:loading="isRefresh"
v-if="type === 'instance'"
@click="!isRefresh && _refresh()"
size="mini" >
</el-button>
</span>
<el-button
v-if="isRtTasks"
style="vertical-align: middle;"
type="primary"
size="xsmall"
icon="ans-icon-play"
size="mini"
icon="el-icon-back"
@click="_rtNodesDag" >
{{$t('Return_1')}}
</x-button>
<x-button
type="primary"
v-tooltip.light="$t('Close')"
icon="ans-icon-off"
size="xsmall"
data-container="body"
v-if="(type === 'instance' || 'definition') "
style="vertical-align: middle;"
@click="_closeDAG">
{{$t('Close')}}
</x-button>
<x-button
</el-button>
<span>
<el-button
type="primary"
v-tooltip.light="$t('Close')"
icon="el-icon-switch-button"
size="mini"
data-container="body"
v-if="(type === 'instance' || 'definition') "
style="vertical-align: middle;"
@click="_closeDAG">
{{$t('Close')}}
</el-button>
</span>
<el-button
style="vertical-align: middle;"
type="primary"
size="xsmall"
size="mini"
:loading="spinnerLoading"
@click="_saveChart"
icon="ans-icon-save"
icon="el-icon-document-checked"
>
{{spinnerLoading ? 'Loading...' : $t('Save')}}
</x-button>
<x-button
style="vertical-align: middle;"
type="primary"
size="xsmall"
v-if="this.type !== 'instance' && this.urlParam.id !== null"
:loading="spinnerLoading"
@click="_version"
icon="ans-icon-dependence"
>
{{spinnerLoading ? 'Loading...' : $t('Version Info')}}
</x-button>
</el-button>
<span>
<el-button
style="vertical-align: middle;"
type="primary"
size="mini"
:loading="spinnerLoading"
@click="_version"
icon="el-icon-info">
{{spinnerLoading ? 'Loading...' : $t('Version Info')}}
</el-button>
</span>
</div>
</div>
<div class="scrollbar dag-container">
@ -140,6 +146,45 @@
<div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan jtk-draggable" id="canvas" ></div>
</div>
</div>
<el-drawer
:visible.sync="drawer"
size="35%"
:with-header="false">
<m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion"></m-versions>
</el-drawer>
<el-drawer
:visible.sync="nodeDrawer"
size="50%"
:with-header="false">
<m-form-model v-if="nodeDrawer" :nodeData = nodeData @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
</el-drawer>
<el-drawer
:visible.sync="lineDrawer"
size="50%"
:wrapperClosable="false"
:with-header="false">
<m-form-line-model :lineData = lineData @addLineInfo="addLineInfo" @cancel="cancel"></m-form-line-model>
</el-drawer>
<el-drawer
:visible.sync="udpDrawer"
size="50%"
:wrapperClosable="false"
:with-header="false">
<m-udp></m-udp>
</el-drawer>
<el-dialog
:title="$t('Set the DAG diagram name')"
:visible.sync="dialogVisible"
width="45%">
<m-udp @onUdp="onUdpDialog" @close="closeDialog"></m-udp>
</el-dialog>
<el-dialog
:title="$t('Please set the parameters before starting')"
:visible.sync="startDialog"
width="65%">
<m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
</el-dialog>
</div>
</div>
</template>
@ -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()
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)
}
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.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 }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import "./dag";
.operBtn {
padding: 8px 20px;
}
</style>

32
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue

@ -23,7 +23,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 5px;">
<x-switch v-model="enable" @on-click="_onSwitch(0, $event)" :disabled="isDetails"></x-switch>
<el-switch v-model="enable" size="small" @change="_onSwitch(0, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -35,7 +35,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding: 5px 0;">
<x-switch v-model="waitStartTimeout.enable" @on-click="_onSwitch(1, $event)" :disabled="isDetails"></x-switch>
<el-switch v-model="waitStartTimeout.enable" size="small" @change="_onSwitch(1, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -46,22 +46,22 @@
<span class="text-box">
<span>{{$t('Timeout period')}}</span>
</span>
<x-input v-model="waitStartTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
<el-input v-model="waitStartTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
</x-input>
</el-input>
<span class="text-box">
<span>{{$t('Check interval')}}</span>
</span>
<x-input v-model="waitStartTimeout.checkInterval" style="width: 100px;" :disabled="isDetails" maxlength="9">
<el-input v-model="waitStartTimeout.checkInterval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
</x-input>
</el-input>
<span class="text-box">
<span>{{$t('Timeout strategy')}}</span>
</span>
<div style="padding-top: 6px;">
<x-checkbox-group v-model="waitStartTimeout.strategy">
<x-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</x-checkbox>
</x-checkbox-group>
<el-checkbox-group size="small" v-model="waitStartTimeout.strategy">
<el-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</el-checkbox>
</el-checkbox-group>
</div>
</label>
</div>
@ -73,7 +73,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding: 5px 0;">
<x-switch v-model="waitCompleteTimeout.enable" @on-click="_onSwitch(2, $event)" :disabled="isDetails"></x-switch>
<el-switch v-model="waitCompleteTimeout.enable" size="small" @change="_onSwitch(2, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -84,17 +84,17 @@
<span class="text-box">
<span>{{$t('Timeout period')}}</span>
</span>
<x-input v-model="waitCompleteTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
<el-input v-model="waitCompleteTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
</x-input>
</el-input>
<span class="text-box">
<span>{{$t('Timeout strategy')}}</span>
</span>
<div style="padding-top: 6px;">
<x-checkbox-group v-model="waitCompleteTimeout.strategy">
<x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
<x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
</x-checkbox-group>
<el-checkbox-group size="small" v-model="waitCompleteTimeout.strategy">
<el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
<el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
</el-checkbox-group>
</div>
</label>
</div>

27
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue

@ -15,33 +15,34 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
style="width: 157px;"
:disabled="isDetails"
@on-change="_onChange"
size="small"
@change="_onChange"
v-model="value">
<x-input
<el-input
ref="input"
slot="trigger"
v-if="isInput"
:disabled="isDetails"
slot-scope="{ selectedModel }"
maxlength="4"
@on-blur="_onBlur"
@blur="_onBlur"
:placeholder="$t('Please choose')"
:value="selectedModel === null ? '0' : selectedModel.value"
style="width: 100%;"
@on-click-icon.stop="_ckIcon">
<em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
<em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
</x-input>
<x-option
@click="_ckIcon">
<em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
<em slot="suffix" class="el-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
</el-input>
<el-option
v-for="city in list"
:key="city"
:value="city"
:label="city">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
<script>
import _ from 'lodash'
@ -67,8 +68,8 @@
},
methods: {
_onChange (o) {
this.$emit('valueEvent', +o.value)
this._setIconState(+o.value)
this.$emit('valueEvent', +o)
this._setIconState(+o)
},
_setIconState (value) {
// Whether there is a list

14
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue

@ -23,7 +23,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 5px;">
<x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
<el-switch v-model="enable" size="small" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -35,10 +35,10 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 6px;">
<x-checkbox-group v-model="strategy">
<x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
<x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
</x-checkbox-group>
<el-checkbox-group v-model="strategy" size="small">
<el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
<el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
</el-checkbox-group>
</div>
</label>
</div>
@ -49,9 +49,9 @@
</div>
<div class="cont-box">
<label class="label-box">
<x-input v-model="interval" style="width: 200px;" :disabled="isDetails" maxlength="9">
<el-input v-model="interval" size="small" style="width: 200px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
</x-input>
</el-input>
</label>
</div>
</div>

15
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue

@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
:disabled="isDetails"
@on-change="_onChange"
@change="_onChange"
v-model="value"
size="small"
style="width: 180px">
<x-option
<el-option
v-for="item in workerGroupsList"
:key="item.id"
:value="item.id"
:label="item.name">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
<script>
import disabledState from '@/module/mixin/disabledState'
@ -50,8 +51,8 @@
},
methods: {
_onChange (o) {
this.value = o.value
this.$emit('workerGroupsEvent', o.value)
this.value = o
this.$emit('workerGroupsEvent', o)
}
},
watch: {

32
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue

@ -26,14 +26,14 @@
<div class="text-box"><span>{{$t('Connection name')}}</span></div>
<div class="cont-box">
<label class="label-box">
<x-input
<el-input
type="text"
size="small"
v-model="labelName"
:disabled="isDetails"
:placeholder="$t('Please enter name')"
maxlength="100"
autocomplete="off">
</x-input>
maxlength="100">
</el-input>
</label>
</div>
</div>
@ -41,8 +41,8 @@
</div>
<div class="bottom-box">
<div class="submit" style="background: #fff;">
<x-button type="text" @click="cancel()"> {{$t('Cancel')}} </x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
<el-button type="text" size="small" @click="cancel()"> {{$t('Cancel')}} </el-button>
<el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </el-button>
</div>
</div>
</div>
@ -66,9 +66,7 @@
},
mixins: [disabledState],
props: {
id: String,
sourceId: String,
targetId: String
lineData: Object
},
methods: {
cancel() {
@ -77,15 +75,15 @@
})
},
ok() {
if($(`#${this.id}`).prev().attr('class')==='jtk-overlay') {
$(`#${this.id}`).prev().empty()
if($(`#${this.lineData.id}`).prev().attr('class')==='jtk-overlay') {
$(`#${this.lineData.id}`).prev().empty()
}
$(`#${this.id}`).text(this.labelName)
$(`#${this.lineData.id}`).text(this.labelName)
this.$emit('addLineInfo', {
item: {
labelName: this.labelName,
sourceId: this.sourceId,
targetId: this.targetId
sourceId: this.lineData.sourceId,
targetId: this.lineData.targetId
},
fromThis: this
})
@ -95,10 +93,10 @@
},
created () {
if($(`#${this.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
this.labelName = $(`#${this.id}`).prev().text()
if($(`#${this.lineData.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
this.labelName = $(`#${this.lineData.id}`).prev().text()
} else {
this.labelName = $(`#${this.id}`).text()
this.labelName = $(`#${this.lineData.id}`).text()
}
},
mounted () {

171
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue

@ -21,10 +21,10 @@
<span class="go-subtask">
<!-- Component can't pop up box to do component processing -->
<m-log :item="backfillItem">
<template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon ans-icon-timer"></em><em>{{$t('View history')}}</em></a></template>
<template slot="log"><a href="javascript:"><em class="ansicon ans-icon-log"></em><em>{{$t('View log')}}</em></a></template>
<template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon el-icon-alarm-clock"></em><em>{{$t('View history')}}</em></a></template>
<template slot="log"><a href="javascript:"><em class="ansicon el-icon-document"></em><em>{{$t('View log')}}</em></a></template>
</m-log>
<a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon ans-icon-node"></em><em>{{$t('Enter this child node')}}</em></a>
<a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon fa fa-tasks"></em><em>{{$t('Enter this child node')}}</em></a>
</span>
</div>
<div class="content-box" v-if="isContentBox">
@ -34,15 +34,15 @@
<div class="text-box"><span>{{$t('Node name')}}</span></div>
<div class="cont-box">
<label class="label-box">
<x-input
<el-input
type="text"
v-model="name"
size="small"
:disabled="isDetails"
:placeholder="$t('Please enter name (required)')"
maxlength="100"
@on-blur="_verifName()"
autocomplete="off">
</x-input>
@blur="_verifName()">
</el-input>
</label>
</div>
</div>
@ -52,10 +52,10 @@
<div class="text-box"><span>{{$t('Run flag')}}</span></div>
<div class="cont-box">
<label class="label-box">
<x-radio-group v-model="runFlag" >
<x-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</x-radio>
<x-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="runFlag" size="small" style="vertical-align: sub;">
<el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
<el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
</el-radio-group>
</label>
</div>
</div>
@ -67,15 +67,13 @@
</div>
<div class="cont-box">
<label class="label-box">
<x-input
resize
:autosize="{minRows:2}"
<el-input
:rows="2"
type="textarea"
:disabled="isDetails"
v-model="description"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter description')">
</el-input>
</label>
</div>
</div>
@ -95,81 +93,74 @@
</div>
<!-- Number of failed retries -->
<div class="clearfix list" v-if="taskType !== 'SUB_PROCESS'">
<div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS'">
<div class="text-box">
<span>{{$t('Number of failed retries')}}</span>
</div>
<div class="cont-box">
<m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]">
</m-select-input>
<m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]"></m-select-input>
<span>({{$t('Times')}})</span>
<span class="text-b">{{$t('Failed retry interval')}}</span>
<m-select-input v-model="retryInterval" :list="[1,10,30,60,120]">
</m-select-input>
<m-select-input v-model="retryInterval" :list="[1,10,30,60,120]"></m-select-input>
<span>({{$t('Minute')}})</span>
</div>
</div>
<!-- Delay execution time -->
<div class="clearfix list" v-if="taskType !== 'SUB_PROCESS' && taskType !== 'CONDITIONS' && taskType !== 'DEPENDENT'">
<div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
<div class="text-box">
<span>{{$t('Delay execution time')}}</span>
</div>
<div class="cont-box">
<m-select-input v-model="delayTime" :list="[0,1,5,10]">
</m-select-input>
<m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
<span>({{$t('Minute')}})</span>
</div>
</div>
<!-- Branch flow -->
<div class="clearfix list" v-if="taskType === 'CONDITIONS'">
<div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
<div class="text-box">
<span>{{$t('State')}}</span>
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;">
<x-select style="width: 157px;" v-model="successNode" :disabled="true">
<x-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select style="width: 157px;" size="small" v-model="successNode" :disabled="true">
<el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
<x-select style="width: 157px;" v-model="successBranch" clearable>
<x-option v-for="item in rearList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select style="width: 157px;" size="small" v-model="successBranch" clearable>
<el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</div>
</div>
<div class="clearfix list" v-if="taskType === 'CONDITIONS'">
<div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
<div class="text-box">
<span>{{$t('State')}}</span>
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;">
<x-select style="width: 157px;" v-model="failedNode" :disabled="true">
<x-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select style="width: 157px;" size="small" v-model="failedNode" :disabled="true">
<el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
<x-select style="width: 157px;" v-model="failedBranch" clearable>
<x-option v-for="item in rearList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select style="width: 157px;" size="small" v-model="failedBranch" clearable>
<el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
</div>
</div>
<!-- Task timeout alarm -->
<m-timeout-alarm
v-if="taskType !== 'DEPENDENT'"
v-if="nodeData.taskType !== 'DEPENDENT'"
ref="timeout"
:backfill-item="backfillItem"
@on-timeout="_onTimeout">
</m-timeout-alarm>
<!-- Dependent timeout alarm -->
<m-dependent-timeout
v-if="taskType === 'DEPENDENT'"
v-if="nodeData.taskType === 'DEPENDENT'"
ref="dependentTimeout"
:backfill-item="backfillItem"
@on-timeout="_onDependentTimeout">
@ -177,7 +168,7 @@
<!-- shell node -->
<m-shell
v-if="taskType === 'SHELL'"
v-if="nodeData.taskType === 'SHELL'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SHELL"
@ -185,7 +176,7 @@
</m-shell>
<!-- waterdrop node -->
<m-waterdrop
v-if="taskType === 'WATERDROP'"
v-if="nodeData.taskType === 'WATERDROP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="WATERDROP"
@ -193,7 +184,7 @@
</m-waterdrop>
<!-- sub_process node -->
<m-sub-process
v-if="taskType === 'SUB_PROCESS'"
v-if="nodeData.taskType === 'SUB_PROCESS'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
@on-set-process-name="_onSetProcessName"
@ -202,7 +193,7 @@
</m-sub-process>
<!-- procedure node -->
<m-procedure
v-if="taskType === 'PROCEDURE'"
v-if="nodeData.taskType === 'PROCEDURE'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="PROCEDURE"
@ -210,23 +201,23 @@
</m-procedure>
<!-- sql node -->
<m-sql
v-if="taskType === 'SQL'"
v-if="nodeData.taskType === 'SQL'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SQL"
:create-node-id="id"
:create-node-id="nodeData.id"
:backfill-item="backfillItem">
</m-sql>
<!-- spark node -->
<m-spark
v-if="taskType === 'SPARK'"
v-if="nodeData.taskType === 'SPARK'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SPARK"
:backfill-item="backfillItem">
</m-spark>
<m-flink
v-if="taskType === 'FLINK'"
v-if="nodeData.taskType === 'FLINK'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="FLINK"
@ -234,7 +225,7 @@
</m-flink>
<!-- mr node -->
<m-mr
v-if="taskType === 'MR'"
v-if="nodeData.taskType === 'MR'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="MR"
@ -242,7 +233,7 @@
</m-mr>
<!-- python node -->
<m-python
v-if="taskType === 'PYTHON'"
v-if="nodeData.taskType === 'PYTHON'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="PYTHON"
@ -250,44 +241,44 @@
</m-python>
<!-- dependent node -->
<m-dependent
v-if="taskType === 'DEPENDENT'"
v-if="nodeData.taskType === 'DEPENDENT'"
@on-dependent="_onDependent"
@on-cache-dependent="_onCacheDependent"
ref="DEPENDENT"
:backfill-item="backfillItem">
</m-dependent>
<m-http
v-if="taskType === 'HTTP'"
v-if="nodeData.taskType === 'HTTP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="HTTP"
:backfill-item="backfillItem">
</m-http>
<m-datax
v-if="taskType === 'DATAX'"
v-if="nodeData.taskType === 'DATAX'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="DATAX"
:backfill-item="backfillItem">
</m-datax>
<m-sqoop
v-if="taskType === 'SQOOP'"
v-if="nodeData.taskType === 'SQOOP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SQOOP"
:backfill-item="backfillItem">
</m-sqoop>
<m-conditions
v-if="taskType === 'CONDITIONS'"
v-if="nodeData.taskType === 'CONDITIONS'"
ref="CONDITIONS"
@on-dependent="_onDependent"
@on-cache-dependent="_onCacheDependent"
:backfill-item="backfillItem"
:pre-node="preNode">
:pre-node="nodeData.preNode">
</m-conditions>
<!-- Pre-tasks in workflow -->
<m-pre-tasks
v-if="['SHELL', 'SUB_PROCESS'].indexOf(taskType) > -1"
v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1"
@on-pre-tasks="_onPreTasks"
ref="PRE_TASK"
:backfill-item="backfillItem"></m-pre-tasks>
@ -295,8 +286,8 @@
</div>
<div class="bottom-box">
<div class="submit" style="background: #fff;">
<x-button type="text" id="cancelBtn"> {{$t('Cancel')}} </x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
<el-button type="text" size="small" id="cancelBtn"> {{$t('Cancel')}} </el-button>
<el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </el-button>
</div>
</div>
</div>
@ -400,12 +391,7 @@
directives: { clickoutside },
mixins: [disabledState],
props: {
id: Number,
taskType: String,
self: Object,
preNode: Array,
rearList: Array,
instanceId: Number
nodeData: Object
},
methods: {
...mapActions('dag', ['getTaskInstanceList']),
@ -452,14 +438,13 @@
* Jump to task instance
*/
_seeHistory () {
this.self.$router.push({
this.nodeData.self.$router.push({
name: 'task-instance',
query: {
processInstanceId: this.self.$route.params.id,
processInstanceId: this.nodeData.self.$route.params.id,
taskName: this.backfillItem.name
}
})
this.$modal.destroy()
},
/**
* Enter the child node to judge the process instance or the process definition
@ -471,7 +456,7 @@
return
}
if (this.router.history.current.name === 'projects-instance-details') {
let stateId = $(`#${this.id}`).attr('data-state-id') || null
let stateId = $(`#${this.nodeData.id}`).attr('data-state-id') || null
if (!stateId) {
this.$message.warning(`${i18n.$t('The task has not been executed and cannot enter the sub-Process')}`)
return
@ -508,8 +493,8 @@
this.conditionResult.failedNode[0] = this.failedBranch
this.$emit('cacheTaskInfo', {
item: {
type: this.taskType,
id: this.id,
type: this.nodeData.taskType,
id: this.nodeData.id,
name: this.name,
params: this.params,
description: this.description,
@ -574,7 +559,7 @@
return
}
// Verify task alarm parameters
if (this.taskType === 'DEPENDENT') {
if (this.nodeData.taskType === 'DEPENDENT') {
if (!this.$refs['dependentTimeout']._verification()) {
return
}
@ -585,7 +570,7 @@
}
// Verify node parameters
if (!this.$refs[this.taskType]._verification()) {
if (!this.$refs[this.nodeData.taskType]._verification()) {
return
}
// Verify preTasks and update dag-things
@ -595,12 +580,12 @@
}
else {
// Sync data-targetarr
$(`#${this.id}`).attr(
$(`#${this.nodeData.id}`).attr(
'data-targetarr', this.preTaskIdsInWorkflow ? this.preTaskIdsInWorkflow.join(',') : '')
// Update JSP connections
let plumbIns = JSP.JspInstance
var targetId = this.id
var targetId = this.nodeData.id
// Update new connections
this.preTasksToAdd.map(sourceId => {
@ -626,14 +611,14 @@
}
}
$(`#${this.id}`).find('span').text(this.name)
$(`#${this.nodeData.id}`).find('span').text(this.name)
this.conditionResult.successNode[0] = this.successBranch
this.conditionResult.failedNode[0] = this.failedBranch
// Store the corresponding node data structure
this.$emit('addTaskInfo', {
item: {
type: this.taskType,
id: this.id,
type: this.nodeData.taskType,
id: this.nodeData.id,
name: this.name,
params: this.params,
description: this.description,
@ -666,7 +651,7 @@
* set run flag
*/
_setRunFlag () {
let dom = $(`#${this.id}`).find('.ban-p')
let dom = $(`#${this.nodeData.id}`).find('.ban-p')
dom.html('')
if (this.runFlag === 'FORBIDDEN') {
dom.append(rtBantpl())
@ -713,13 +698,13 @@
//fillback use cacheTasks
let cacheTasks = this.store.state.dag.cacheTasks
let o = {}
if (cacheTasks[this.id]) {
o = cacheTasks[this.id]
this.backfillItem = cacheTasks[this.id]
if (cacheTasks[this.nodeData.id]) {
o = cacheTasks[this.nodeData.id]
this.backfillItem = cacheTasks[this.nodeData.id]
} else {
if (taskList.length) {
taskList.forEach(v => {
if (v.id === this.id) {
if (v.id === this.nodeData.id) {
o = v
this.backfillItem = v
}
@ -750,7 +735,7 @@
}
if(o.workerGroup == undefined) {
this.store.dispatch('dag/getTaskInstanceList',{
pageSize: 10, pageNo: 1, processInstanceId: this.instanceId, name: o.name
pageSize: 10, pageNo: 1, processInstanceId: this.nodeData.instanceId, name: o.name
}).then(res => {
this.workerGroup = res.totalList[0].workerGroup
})
@ -769,7 +754,7 @@
this.isContentBox = true
// Init value of preTask selector
let preTaskIds = $(`#${this.id}`).attr('data-targetarr')
let preTaskIds = $(`#${this.nodeData.id}`).attr('data-targetarr')
if (!_.isEmpty(this.backfillItem)) {
if (preTaskIds && preTaskIds.length) {
this.backfillItem.preTasks = preTaskIds.split(',')
@ -796,14 +781,14 @@
* Child workflow entry show/hide
*/
_isGoSubProcess () {
return this.taskType === 'SUB_PROCESS' && this.name
return this.nodeData.taskType === 'SUB_PROCESS' && this.name
},
//Define the item model
_item () {
return {
type: this.taskType,
id: this.id,
type: this.nodeData.taskType,
id: this.nodeData.id,
name: this.name,
description: this.description,
runFlag: this.runFlag,

33
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue

@ -29,16 +29,16 @@
<span>{{$t('View log')}}</span>
<div class="full-screen">
<a href="javascript:" @click="_downloadLog" data-container="body" data-toggle="tooltip" :title="$t('Download Log')">
<em class="ans-icon-download" style="font-size: 20px"></em>
<em class="el-icon-download" style="font-size: 20px"></em>
</a>
<a href="javascript:" class="refresh-log" :class="loading ? 'active' :''" @click="!loading && _refreshLog()" data-container="body" data-toggle="tooltip" :title="$t('Refresh Log')">
<em class="ans-icon-refresh"></em>
<em class="el-icon-refresh"></em>
</a>
<a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
<em class="ans-icon-max"></em>
<em class="el-icon-rank"></em>
</a>
<a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
<em class="ans-icon-min"></em>
<em class="el-icon-full-screen"></em>
</a>
</div>
</div>
@ -48,7 +48,7 @@
</div>
</div>
<div class="operation">
<x-button type="primary" shape="circle" @click="close"> {{$t('Close')}} </x-button>
<el-button type="primary" size="small" round @click="close"> {{$t('Close')}} </el-button>
</div>
</div>
</div>
@ -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('log/download-log', {
downloadFile('/log/download-log', {
taskInstanceId: this.stateId || this.logId
})
},
@ -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()
}
},

22
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue

@ -17,28 +17,30 @@
<template>
<div class="datasource-model">
<div class="select-listpp">
<x-select v-model="type"
<el-select v-model="type"
style="width: 160px;"
@on-change="_handleTypeChanged"
size="small"
@change="_handleTypeChanged"
:disabled="isDetails">
<x-option
<el-option
v-for="city in typeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
<x-select :placeholder="$t('Please select the datasource')"
</el-option>
</el-select>
<el-select :placeholder="$t('Please select the datasource')"
v-model="datasource"
style="width: 288px;"
size="small"
:disabled="isDetails">
<x-option
<el-option
v-for="city in datasourceList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</div>
</template>
@ -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 || ''

56
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue

@ -17,39 +17,39 @@
<template>
<div class="dep-list-model">
<div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
<x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @on-change="_onChangeProjectId">
<x-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @on-change="_onChangeDefinitionId">
<x-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks">
<x-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
</x-option>
</x-select>
<x-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @on-change="_onChangeCycle">
<x-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<x-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
<x-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @change="_onChangeProjectId" size="small">
<el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @change="_onChangeDefinitionId" size="small">
<el-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks" size="small">
<el-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
</el-option>
</el-select>
<el-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @change="_onChangeCycle">
<el-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<el-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
<el-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<template v-if="isInstance">
<span class="instance-state">
<em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
<em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
<em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
<em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
<em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
<em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
</span>
</template>
<span class="operation">
<a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
<em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
<em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
</a>
<a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
<em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
</a>
</span>
</div>
@ -174,7 +174,7 @@
/**
* change process get dependItemList
*/
_onChangeProjectId ({ value }) {
_onChangeProjectId (value) {
this._getProcessByProjectId(value).then(definitionList => {
/*this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item))*/
let definitionId = definitionList[0].value
@ -187,7 +187,7 @@
})
})
},
_onChangeDefinitionId ({ value }) {
_onChangeDefinitionId (value) {
// get depItem list data
this._getDependItemList(value).then(depTasksList => {
let item = this.dependItemList[this.itemIndex]
@ -197,7 +197,7 @@
this.$set(this.dependItemList, this.itemIndex, this._rtOldParams(value, item.definitionList, depTasksList, item))
})
},
_onChangeCycle ({ value }) {
_onChangeCycle (value) {
let list = _.cloneDeep(dateValueList[value])
this.$set(this.dependItemList[this.itemIndex], 'dateValue', list[0].value)
this.$set(this.dependItemList[this.itemIndex], 'dateValueList', list)

27
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue

@ -20,50 +20,51 @@
v-for="(item,$index) in httpParamsList"
:key="item.id"
@click="_getIndex($index)">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="httpParamsList[$index].prop"
:placeholder="$t('prop(required)')"
@on-blur="_verifProp()"
@blur="_verifProp()"
:style="inputStyle">
</x-input>
<x-select
</el-input>
<el-select
@change="_handlePositionChanged"
v-model="httpParamsList[$index].httpParametersType"
:placeholder="$t('Http Parameters Position')"
:disabled="isDetails"
:style="inputStyle"
>
<x-option
<el-option
v-for="position in positionList"
:key="position.code"
:value="position.id"
:label="position.code">
</x-option>
</x-select>
<x-input
</el-option>
</el-select>
<el-input
:disabled="isDetails"
type="text"
v-model="httpParamsList[$index].value"
:placeholder="$t('value(required)')"
@on-blur="_handleValue()"
@blur="_handleValue()"
:style="inputStyle">
</x-input>
</el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
<em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
<em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (httpParamsList.length - 1)">
<a href="javascript:" @click="!isDetails && _addUdp()" >
<em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add-dp" v-if="!httpParamsList.length">
<a href="javascript:" @click="!isDetails && _addUdp()" >
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>

117
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue

@ -0,0 +1,117 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<template>
<div class="script-model">
<m-list-box>
<div slot="content">
<div class="from-mirror1">
<textarea
id="code-shell-mirror1"
name="code-shell-mirror1"
style="opacity: 0">
</textarea>
</div>
</div>
</m-list-box>
</div>
</template>
<script>
import _ from 'lodash'
import i18n from '@/module/i18n'
import mListBox from './listBox'
import disabledState from '@/module/mixin/disabledState'
import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
let editor
export default {
name: 'shell',
data () {
return {
// script
rawScript: '',
}
},
mixins: [disabledState],
props: {
jsonItem: String
},
methods: {
/**
* Processing code highlighting
*/
_handlerEditor () {
// editor
let self =this
editor = codemirror('code-shell-mirror1', {
mode: 'shell',
readOnly: this.isDetails
})
editor.on("change",function(){
self.$emit('getJsonBoxValue',editor.getValue())
})
this.keypress = () => {
if (!editor.getOption('readOnly')) {
editor.showHint({
completeSingle: false
})
}
}
// Monitor keyboard
editor.on('keypress', this.keypress)
editor.setValue(this.rawScript)
return editor
},
},
watch: {},
created () {
let o = this.jsonItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.rawScript = o
}
},
mounted () {
setTimeout(() => {
this._handlerEditor()
}, 200)
},
destroyed () {
if (editor) {
editor.toTextArea() // Uninstall
editor.off($('.code-shell-mirror1'), 'keypress', this.keypress)
}
},
components: { mListBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
.script-model {
width:100%;
}
.from-mirror1 {
.CodeMirror {
min-height: 600px;
max-height: 700px;
}
}
</style>

38
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)">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="localParamsList[$index].prop"
:placeholder="$t('prop(required)')"
maxlength="256"
@on-blur="_verifProp()"
@blur="_verifProp()"
:style="inputStyle">
</x-input>
</el-input>
<template v-if="hide">
<x-select
<el-select
style="width: 80px;"
size="small"
@change="_handleDirectChanged"
v-model="localParamsList[$index].direct"
:disabled="isDetails">
<x-option
<el-option
v-for="city in directList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
<x-select
</el-option>
</el-select>
<el-select
style="width: 118px;"
size="small"
@change="_handleTypeChanged"
v-model="localParamsList[$index].type"
:disabled="isDetails">
<x-option
<el-option
v-for="city in typeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="localParamsList[$index].value"
:placeholder="$t('value(optional)')"
maxlength="256"
@on-blur="_handleValue()"
@blur="_handleValue()"
:style="inputStyle">
</x-input>
</el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
<em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
<em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (localParamsList.length - 1)">
<a href="javascript:" @click="!isDetails && _addUdp()" >
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add-dp" v-if="!localParamsList.length">
<a href="javascript:" @click="!isDetails && _addUdp()" >
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>

26
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue

@ -17,27 +17,27 @@
<template>
<div class="dep-list-model">
<div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
<x-select style="width: 150px;" v-model="el.depTasks" :disabled="isDetails">
<x-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<x-select style="width: 116px;" v-model="el.status" :disabled="isDetails">
<x-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<el-select style="width: 150px;" size="small" v-model="el.depTasks" :disabled="isDetails">
<el-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<el-select style="width: 116px;" size="small" v-model="el.status" :disabled="isDetails">
<el-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
<template v-if="isInstance">
<span class="instance-state">
<em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
<em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
<em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
<em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
<em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
<em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
</span>
</template>
<span class="operation">
<a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
<em class="iconfont ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
<em class="iconfont el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
</a>
<a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
<em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
</a>
</span>
</div>

9
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue

@ -16,19 +16,20 @@
*/
<template>
<div class="resource-list-model">
<x-select multiple
<el-select multiple
v-model="value"
filterable
size="small"
:disabled="isDetails"
:placeholder="$t('Please select resources')"
style="width: 100%;">
<x-option
<el-option
v-for="city in resList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</template>
<script>

7
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue

@ -27,9 +27,6 @@
</div>
</div>
</m-list-box>
<a class="ans-modal-box-close">
<em class="ans-icon-min" @click="closeModal"></em>
</a>
</div>
</template>
<script>
@ -83,10 +80,6 @@
return editor
},
closeModal() {
let self = this
self.$emit('closeAble')
}
},
watch: {},
created () {

15
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue

@ -16,18 +16,19 @@
*/
<template>
<div class="sql-type-model">
<x-select
<el-select
v-model="sqlTypeId"
:disabled="isDetails"
@on-change="_handleSqlTypeChanged"
style="width: 120px;">
<x-option
@change="_handleSqlTypeChanged"
style="width: 120px;"
size="small">
<el-option
v-for="city in sqlTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</template>
<script>
@ -53,7 +54,7 @@
* return sqlType
*/
_handleSqlTypeChanged (val) {
this.$emit('on-sqlType', val.value)
this.$emit('on-sqlType', val)
}
},
watch: {

13
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue

@ -20,30 +20,31 @@
v-for="(item,$index) in localStatementList"
:key="item.id"
@click="_getIndex($index)">
<x-input
<el-input
:disabled="isDetails"
type="textarea"
size="small"
resize="none"
:autosize="{minRows:1}"
:placeholder="$t('Please enter a non-query SQL statement')"
v-model="localStatementList[$index]"
@on-blur="_verifProp()"
@blur="_verifProp()"
style="width: 525px;">
</x-input>
</el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
<em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
<em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (localStatementList.length - 1)">
<a href="javascript:" @click="!isDetails && _addStatement()" >
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add" v-if="!localStatementList.length">
<a href="javascript:" @click="!isDetails && _addStatement()" >
<em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>

9
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue

@ -16,17 +16,18 @@
*/
<template>
<div class="udfs-model">
<x-select multiple
<el-select multiple
v-model="udfsStr"
:disabled="isDetails"
size="small"
style="width: 100%;">
<x-option
<el-option
v-for="city in udfsList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</template>
<script>

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue

@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
<em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
<em class="ans-icon-trash dep-delete"
<em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"

99
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue

@ -21,7 +21,7 @@
<div slot="content">
<label class="label-box">
<div style="padding-top: 5px;">
<x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
<el-switch v-model="enable" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -31,10 +31,10 @@
<div slot="text">{{$t('Datasource')}}</div>
<div slot="content">
<m-datasource
ref="refDs"
@on-dsData="_onDsData"
:supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
:data="{ type:dsType,datasource:datasource }">
ref="refDs"
@on-dsData="_onDsData"
:supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
:data="{ type:dsType,datasource:datasource }">
</m-datasource>
</div>
</m-list-box>
@ -48,7 +48,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setEditorVal"></em>
<em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -57,22 +57,22 @@
<div slot="text">{{$t('TargetDataBase')}}</div>
<div slot="content">
<m-datasource
ref="refDt"
@on-dsData="_onDtData"
:supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
:data="{ type:dtType,datasource:datatarget }">
ref="refDt"
@on-dsData="_onDtData"
:supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
:data="{ type:dtType,datasource:datatarget }">
</m-datasource>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('TargetTable')}}</div>
<div slot="content">
<x-input
<el-input
type="input"
size="small"
v-model="targetTable"
:placeholder="$t('Please enter the table of target')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter the table of target')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -126,9 +126,6 @@
name="code-json-mirror"
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setJsonEditorVal"></em>
</a>
</div>
</div>
</m-list-box>
@ -159,7 +156,12 @@
<span>&nbsp;&nbsp;&nbsp;G</span>
</div>
</div>
<el-dialog
:visible.sync="scriptBoxDialog"
append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -216,6 +218,8 @@
xms: 1,
//jvm memory xms
xmx: 1,
scriptBoxDialog: false,
item: '',
}
},
mixins: [disabledState],
@ -225,60 +229,11 @@
},
methods: {
setEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
editor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: editor.getValue()
}
})
}
})
this.item = editor.getValue()
this.scriptBoxDialog = true
},
setJsonEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
jsonEditor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: jsonEditor.getValue()
}
})
}
})
getSriptBoxValue (val) {
editor.setValue(val)
},
_onSwitch (is) {
if(is) {
@ -566,7 +521,7 @@
}
}
},
components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput }
components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue

@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
<em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
<em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
<em class="ans-icon-trash dep-delete"
<em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"

93
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue

@ -19,30 +19,31 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="programType"
:disabled="isDetails">
<x-option
<el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
<x-input
:disabled="isDetails"
type="input"
v-model="mainClass"
:placeholder="$t('Please enter main class')"
autocomplete="off">
</x-input>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="mainClass"
:placeholder="$t('Please enter main class')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -56,76 +57,77 @@
<m-list-box>
<div slot="text">{{$t('Deploy Mode')}}</div>
<div slot="content">
<x-radio-group v-model="deployMode">
<x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
<x-radio :label="'local'" :disabled="isDetails"></x-radio>
</x-radio-group>
<el-radio-group v-model="deployMode" size="small">
<el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
<el-radio :label="'local'" :disabled="isDetails"></el-radio>
</el-radio-group>
</div>
</m-list-box>
<m-list-box v-if="deployMode === 'cluster'">
<div slot="text">{{$t('Flink Version')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 100px;"
size="small"
v-model="flinkVersion"
:disabled="isDetails">
<x-option
<el-option
v-for="version in flinkVersionList"
:key="version.code"
:value="version.code"
:label="version.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<div class="list-box-4p" v-if="deployMode === 'cluster'">
<div class="clearfix list">
<span class="sp1" style="word-break:break-all">{{$t('jobManagerMemory')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="jobManagerMemory"
:placeholder="$t('Please enter jobManager memory')"
style="width: 200px;"
autocomplete="off">
</x-input>
style="width: 200px;">
</el-input>
</span>
<span class="sp1 sp3">{{$t('taskManagerMemory')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="taskManagerMemory"
:placeholder="$t('Please enter the taskManager memory')"
style="width: 186px;"
autocomplete="off">
</x-input>
style="width: 186px;">
</el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('slot')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="slot"
:placeholder="$t('Please enter solt number')"
style="width: 200px;"
autocomplete="off">
</x-input>
style="width: 200px;">
</el-input>
</span>
<div v-if="flinkVersion !== '>=1.10'">
<span class="sp1 sp3">{{$t('taskManager')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="taskManager"
:placeholder="$t('Please enter taskManager number')"
style="width: 186px;"
autocomplete="off">
</x-input>
style="width: 186px;">
</el-input>
</span>
</div>
</div>
@ -133,26 +135,27 @@
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
<x-input
<el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
size="small"
v-model="mainArgs"
:placeholder="$t('Please enter Command-line parameters')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter Command-line parameters')">
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
size="small"
v-model="others"
:placeholder="$t('Please enter other parameters')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -167,10 +170,10 @@
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">
<m-local-params
ref="refLocalParams"
@on-local-params="_onLocalParams"
:udp-list="localParams"
:hide="false">
ref="refLocalParams"
@on-local-params="_onLocalParams"
:udp-list="localParams"
:hide="false">
</m-local-params>
</div>
</m-list-box>

40
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue

@ -19,30 +19,32 @@
<m-list-box>
<div slot="text">{{$t('Http Url')}}</div>
<div slot="content">
<x-input
<el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
size="small"
v-model="url"
:placeholder="$t('Please Enter Http Url')"
autocomplete="off">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Http Method')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 150px;"
size="small"
v-model="httpMethod"
:disabled="isDetails">
<x-option
<el-option
v-for="city in httpMethodList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box>
@ -59,30 +61,31 @@
<m-list-box>
<div slot="text">{{$t('Http Check Condition')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 230px;"
size="small"
v-model="httpCheckCondition"
:disabled="isDetails">
<x-option
<el-option
v-for="city in httpCheckConditionList"
:key="city.code"
:value="city.code"
:label="city.value">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Http Condition')}}</div>
<div slot="content">
<x-input
<el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
size="small"
v-model="condition"
:placeholder="$t('Please Enter Http Condition')"
autocomplete="off">
</x-input>
:placeholder="$t('Please Enter Http Condition')">
</el-input>
</div>
</m-list-box>
@ -92,10 +95,7 @@
<div slot="content">
<label class="label-box">
<div style="padding-top: 5px;">
<x-switch
v-model="timeoutSettings"
:disabled="isDetails"
></x-switch>
<el-switch size="small" v-model="timeoutSettings" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@ -107,12 +107,12 @@
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;" >
<x-input v-model='connectTimeout' maxlength="7" />
<el-input size="small" v-model='connectTimeout' maxlength="7"></el-input>
</span>
<span>{{$t('ms')}}</span>
<span class="text-b">{{$t('Socket Timeout')}}</span>
<span class="label-box" style="width: 193px;display: inline-block;" >
<x-input v-model='socketTimeout' maxlength="7" />
<el-input size="small" v-model='socketTimeout' maxlength="7"></el-input>
</span>
<span>{{$t('ms')}}</span>
</div>

32
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue

@ -19,26 +19,26 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
<x-select v-model="programType" :disabled="isDetails" style="width: 110px;">
<x-option
<el-select v-model="programType" :disabled="isDetails" style="width: 110px;" size="small">
<el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="mainClass"
:placeholder="$t('Please enter main class')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter main class')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -52,27 +52,27 @@
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
<x-input
<el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
size="small"
v-model="mainArgs"
:placeholder="$t('Please enter Command-line parameters')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter Command-line parameters')">
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
size="small"
v-model="others"
:placeholder="$t('Please enter other parameters')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter other parameters')">
</el-input>
</div>
</m-list-box>
<m-list-box>

9
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue

@ -22,21 +22,22 @@
</div>
<div class="cont-box">
<div class="label-box">
<x-select
<el-select
ref="preTasksSelector"
style="width: 100%;"
filterable
multiple
size="small"
v-model="preTasks"
:disabled="isDetails"
:id="preTasksSelectorId">
<x-option
<el-option
v-for="task in preTaskList"
:key="task.id"
:value="task.id"
:label="task.name">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</div>
</div>

14
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue

@ -30,13 +30,13 @@
<m-list-box>
<div slot="text">{{$t('methods')}}</div>
<div slot="content">
<x-input
type="input"
:disabled="isDetails"
v-model="method"
:placeholder="$t('Please enter method(optional)')"
autocomplete="off">
</x-input>
<el-input
type="input"
size="small"
:disabled="isDetails"
v-model="method"
:placeholder="$t('Please enter method(optional)')">
</el-input>
</div>
</m-list-box>
<m-list-box>

51
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue

@ -23,7 +23,7 @@
<textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setEditorVal"></em>
<em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -34,12 +34,6 @@
<treeselect v-model="resourceList" :multiple="true" maxHeight="200" :options="resourceOptions" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :disabled="isDetails" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect>
<!-- <m-resources
ref="refResources"
@on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList">
</m-resources> -->
</div>
</m-list-box>
@ -54,6 +48,12 @@
</m-local-params>
</div>
</m-list-box>
<el-dialog
:visible.sync="scriptBoxDialog"
append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -90,7 +90,9 @@
}
},
allNoResources: [],
noRes: []
noRes: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -105,32 +107,11 @@
this.localParams = a
},
setEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
editor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: editor.getValue()
}
})
}
})
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
},
/**
* return resourceList
@ -362,7 +343,7 @@
editor.toTextArea() // Uninstall
editor.off($('.code-python-mirror'), 'keypress', this.keypress)
},
components: { mLocalParams, mListBox, mResources,Treeselect }
components: { mLocalParams, mListBox, mResources,Treeselect, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>

58
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue

@ -26,7 +26,7 @@
style="opacity: 0">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setEditorVal"></em>
<em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -39,17 +39,6 @@
</treeselect>
</div>
</m-list-box>
<!-- <m-list-box>
<div slot="text">{{$t('Resources')}}</div>
<div slot="content">
<m-resources
ref="refResources"
@on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList">
</m-resources>
</div>
</m-list-box> -->
<m-list-box>
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">
@ -61,6 +50,12 @@
</m-local-params>
</div>
</m-list-box>
<el-dialog
:visible.sync="scriptBoxDialog"
modal-append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -98,7 +93,9 @@
}
},
allNoResources: [],
noRes: []
noRes: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -113,32 +110,15 @@
this.localParams = a
},
setEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
editor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: editor.getValue()
}
})
}
})
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
// this.scriptBoxDialog = false
},
closeAble () {
// this.scriptBoxDialog = false
},
/**
* return resourceList

148
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue

@ -19,45 +19,47 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="programType"
:disabled="isDetails">
<x-option
<el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Spark Version')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="sparkVersion"
:disabled="isDetails">
<x-option
<el-option
v-for="city in sparkVersionList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
<x-input
:disabled="isDetails"
type="input"
v-model="mainClass"
:placeholder="$t('Please enter main class')"
autocomplete="off">
</x-input>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="mainClass"
:placeholder="$t('Please enter main class')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -71,99 +73,100 @@
<m-list-box>
<div slot="text">{{$t('Deploy Mode')}}</div>
<div slot="content">
<x-radio-group v-model="deployMode">
<x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
<x-radio :label="'client'" :disabled="isDetails"></x-radio>
<x-radio :label="'local'" :disabled="isDetails"></x-radio>
</x-radio-group>
<el-radio-group v-model="deployMode" size="small">
<el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
<el-radio :label="'client'" :disabled="isDetails"></el-radio>
<el-radio :label="'local'" :disabled="isDetails"></el-radio>
</el-radio-group>
</div>
</m-list-box>
<div class="list-box-4p">
<div class="clearfix list">
<span class="sp1">{{$t('Driver core number')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="driverCores"
:placeholder="$t('Please enter driver core number')"
style="width: 200px;"
autocomplete="off">
</x-input>
style="width: 200px;">
</el-input>
</span>
<span class="sp1 sp3">{{$t('Driver memory use')}}</span>
<span class="sp2">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="driverMemory"
:placeholder="$t('Please enter driver memory use')"
style="width: 186px;"
autocomplete="off">
</x-input>
style="width: 186px;">
</el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('Number of Executors')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="numExecutors"
:placeholder="$t('Please enter the number of Executor')"
style="width: 200px;"
autocomplete="off">
</x-input>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="numExecutors"
:placeholder="$t('Please enter the number of Executor')"
style="width: 200px;">
</el-input>
</span>
<span class="sp1 sp3">{{$t('Executor memory')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="executorMemory"
:placeholder="$t('Please enter the Executor memory')"
style="width: 186px;"
autocomplete="off">
</x-input>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="executorMemory"
:placeholder="$t('Please enter the Executor memory')"
style="width: 186px;">
</el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('Executor core number')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="executorCores"
:placeholder="$t('Please enter Executor core number')"
style="width: 200px;"
autocomplete="off">
</x-input>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="executorCores"
:placeholder="$t('Please enter Executor core number')"
style="width: 200px;">
</el-input>
</span>
</div>
</div>
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
<x-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
v-model="mainArgs"
:placeholder="$t('Please enter Command-line parameters')"
autocomplete="off">
</x-input>
<el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
size="small"
v-model="mainArgs"
:placeholder="$t('Please enter Command-line parameters')">
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
<x-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
v-model="others"
:placeholder="$t('Please enter other parameters')">
</x-input>
<el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
size="small"
v-model="others"
:placeholder="$t('Please enter other parameters')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -174,17 +177,6 @@
</treeselect>
</div>
</m-list-box>
<!-- <m-list-box>
<div slot="text">{{$t('Resources')}}</div>
<div slot="content">
<m-resources
ref="refResources"
@on-resourcesData="_onResourcesData"
@on-cache-resourcesData="_onCacheResourcesData"
:resource-list="resourceList">
</m-resources>
</div>
</m-list-box> -->
<m-list-box>
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">

69
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue

@ -36,10 +36,10 @@
</m-sql-type>
</div>
<div v-if="sqlType==0" style="display: inline-block;padding-left: 10px;margin-top: 2px;">
<x-checkbox-group v-model="showType">
<x-checkbox :label="'TABLE'" :disabled="isDetails">{{$t('TableMode')}}</x-checkbox>
<x-checkbox :label="'ATTACHMENT'" :disabled="isDetails">{{$t('Attachment')}}</x-checkbox>
</x-checkbox-group>
<el-checkbox-group v-model="showType" size="small">
<el-checkbox :label="'TABLE'" :disabled="isDetails">{{$t('TableMode')}}</el-checkbox>
<el-checkbox :label="'ATTACHMENT'" :disabled="isDetails">{{$t('Attachment')}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</m-list-box>
@ -47,12 +47,12 @@
<m-list-box>
<div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
<div slot="content">
<x-input
<el-input
type="input"
size="small"
v-model="title"
:placeholder="$t('Please enter the title of email')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter the title of email')">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -71,13 +71,13 @@
<m-list-box v-show="type === 'HIVE'">
<div slot="text">{{$t('SQL Parameter')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="connParams"
:placeholder="$t('Please enter format') + ' key1=value1;key2=value2...'"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter format') + ' key1=value1;key2=value2...'">
</el-input>
</div>
</m-list-box>
<m-list-box>
@ -90,7 +90,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setEditorVal"></em>
<em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -136,6 +136,12 @@
</m-statement-list>
</div>
</m-list-box>
<el-dialog
:visible.sync="scriptBoxDialog"
append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -185,7 +191,9 @@
// recipients
receivers: [],
// copy to
receiversCc: []
receiversCc: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -195,32 +203,11 @@
},
methods: {
setEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
editor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: editor.getValue()
}
})
}
})
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
},
/**
* return sqlType
@ -519,7 +506,7 @@
}
}
},
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail }
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss">

263
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue

@ -20,23 +20,14 @@
<m-list-box>
<div slot="text">{{$t('Custom Job')}}</div>
<div slot="content">
<x-switch
v-model="isCustomTask"
@on-click="_onSwitch"
:disabled="isDetails"
>
</x-switch>
<el-switch size="small" v-model="isCustomTask" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="isCustomTask">
<div slot="text">{{$t('Custom Script')}}</div>
<div slot="content">
<div class="from-mirror">
<textarea
id="code-shell-mirror"
name="code-shell-mirror"
style="opacity: 0;">
</textarea>
<textarea id="code-shell-mirror" name="code-shell-mirror" style="opacity: 0;"></textarea>
</div>
</div>
</m-list-box>
@ -44,29 +35,25 @@
<m-list-box>
<div slot="text">{{$t('Sqoop Job Name')}}</div>
<div slot="content">
<x-input
:disabled="isDetails"
type="text"
v-model="jobName"
:placeholder="$t('Please enter Job Name(required)')">
</x-input>
<el-input :disabled="isDetails" size="small" type="text" v-model="jobName" :placeholder="$t('Please enter Job Name(required)')"></el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Direct')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="modelType"
:disabled="isDetails"
@on-change="_handleModelTypeChange">
<x-option
@change="_handleModelTypeChange">
<el-option
v-for="city in modelTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<m-list-box>
@ -100,18 +87,19 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="sourceType"
:disabled="isDetails"
@on-change="_handleSourceTypeChange">
<x-option
@change="_handleSourceTypeChange">
<el-option
v-for="city in sourceTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
@ -134,10 +122,10 @@
<m-list-box>
<div slot="text">{{$t('ModelType')}}</div>
<div slot="content">
<x-radio-group v-model="srcQueryType" @on-change="_handleQueryType">
<x-radio label="0">{{$t('Form')}}</x-radio>
<x-radio label="1">SQL</x-radio>
</x-radio-group>
<el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType" style="vertical-align: sub;">
<el-radio label="0">{{$t('Form')}}</el-radio>
<el-radio label="1">SQL</el-radio>
</el-radio-group>
</div>
</m-list-box>
@ -146,34 +134,36 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceMysqlParams.srcTable"
:placeholder="$t('Please enter Mysql Table(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ColumnType')}}</div>
<div slot="content">
<x-radio-group v-model="sourceMysqlParams.srcColumnType">
<x-radio label="0">{{$t('All Columns')}}</x-radio>
<x-radio label="1">{{$t('Some Columns')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="sourceMysqlParams.srcColumnType" size="small" style="vertical-align: sub;">
<el-radio label="0">{{$t('All Columns')}}</el-radio>
<el-radio label="1">{{$t('Some Columns')}}</el-radio>
</el-radio-group>
</div>
</m-list-box>
<m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceMysqlParams.srcColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
</x-input>
</el-input>
</div>
</m-list-box>
</template>
@ -184,45 +174,49 @@
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
</x-input>
</el-input>
</div>
</m-list-box>
</template>
@ -231,12 +225,13 @@
<m-list-box>
<div slot="text">{{$t('Export Dir')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="sourceHdfsParams.exportDir"
:placeholder="$t('Please enter Export Dir(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
</template>
@ -251,7 +246,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
<em class="ans-icon-max" @click="setEditorVal"></em>
<em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -290,91 +285,97 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="targetType"
:disabled="isDetails">
<x-option
<el-option
v-for="city in targetTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</m-list-box>
<div v-show="targetType==='HIVE'">
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CreateHiveTable')}}</div>
<div slot="content">
<x-switch v-model="targetHiveParams.createHiveTable"></x-switch>
<el-switch v-model="targetHiveParams.createHiveTable" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DropDelimiter')}}</div>
<div slot="content">
<x-switch v-model="targetHiveParams.dropDelimiter"></x-switch>
<el-switch v-model="targetHiveParams.dropDelimiter" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('OverWriteSrc')}}</div>
<div slot="content">
<x-switch v-model="targetHiveParams.hiveOverWrite"></x-switch>
<el-switch v-model="targetHiveParams.hiveOverWrite" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ReplaceDelimiter')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHiveParams.replaceDelimiter"
:placeholder="$t('Please enter Replace Delimiter')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
</x-input>
</el-input>
</div>
</m-list-box>
</div>
@ -382,62 +383,65 @@
<m-list-box>
<div slot="text">{{$t('Target Dir')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHdfsParams.targetPath"
:placeholder="$t('Please enter Target Dir(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DeleteTargetDir')}}</div>
<div slot="content">
<x-switch v-model="targetHdfsParams.deleteTargetDir"></x-switch>
<el-switch v-model="targetHdfsParams.deleteTargetDir" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CompressionCodec')}}</div>
<div slot="content">
<x-radio-group v-model="targetHdfsParams.compressionCodec">
<x-radio label="snappy">snappy</x-radio>
<x-radio label="lzo">lzo</x-radio>
<x-radio label="gzip">gzip</x-radio>
<x-radio label="">no</x-radio>
</x-radio-group>
<el-radio-group v-model="targetHdfsParams.compressionCodec" size="small">
<el-radio label="snappy">snappy</el-radio>
<el-radio label="lzo">lzo</el-radio>
<el-radio label="gzip">gzip</el-radio>
<el-radio label="">no</el-radio>
</el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FileType')}}</div>
<div slot="content">
<x-radio-group v-model="targetHdfsParams.fileType">
<x-radio label="--as-avrodatafile">avro</x-radio>
<x-radio label="--as-sequencefile">sequence</x-radio>
<x-radio label="--as-textfile">text</x-radio>
<x-radio label="--as-parquetfile">parquet</x-radio>
</x-radio-group>
<el-radio-group v-model="targetHdfsParams.fileType" size="small">
<el-radio label="--as-avrodatafile">avro</el-radio>
<el-radio label="--as-sequencefile">sequence</el-radio>
<el-radio label="--as-textfile">text</el-radio>
<el-radio label="--as-parquetfile">parquet</el-radio>
</el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHdfsParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetHdfsParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
</x-input>
</el-input>
</div>
</m-list-box>
</div>
@ -458,71 +462,76 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetMysqlParams.targetTable"
:placeholder="$t('Please enter Mysql Table(required)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetMysqlParams.targetColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetMysqlParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetMysqlParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('IsUpdate')}}</div>
<div slot="content">
<x-switch v-model="targetMysqlParams.isUpdate"></x-switch>
<el-switch v-model="targetMysqlParams.isUpdate" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateKey')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="targetMysqlParams.targetUpdateKey"
:placeholder="$t('Please enter Update Key')">
</x-input>
</el-input>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateMode')}}</div>
<div slot="content">
<x-radio-group v-model="targetMysqlParams.targetUpdateMode">
<x-radio label="updateonly">{{$t('OnlyUpdate')}}</x-radio>
<x-radio label="allowinsert">{{$t('AllowInsert')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="targetMysqlParams.targetUpdateMode" size="small">
<el-radio label="updateonly">{{$t('OnlyUpdate')}}</el-radio>
<el-radio label="allowinsert">{{$t('AllowInsert')}}</el-radio>
</el-radio-group>
</div>
</m-list-box>
@ -530,13 +539,13 @@
<m-list-box>
<div slot="text">{{$t('Concurrency')}}</div>
<div slot="content">
<x-input
<el-input
:disabled="isDetails"
type="text"
size="small"
v-model="concurrency"
:placeholder="$t('Please enter Concurrency')">
</x-input>
</el-input>
</div>
</m-list-box>
</template>
@ -551,6 +560,12 @@
</m-local-params>
</div>
</m-list-box>
<el-dialog
:visible.sync="scriptBoxDialog"
append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -696,8 +711,9 @@
replaceDelimiter:"",
hivePartitionKey:"",
hivePartitionValue:""
}
},
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -706,32 +722,11 @@
},
methods: {
setEditorVal() {
let self = this
let modal = self.$modal.dialog({
className: 'scriptModal',
closable: false,
showMask: true,
maskClosable: true,
onClose: function() {
},
render (h) {
return h(mScriptBox, {
on: {
getSriptBoxValue (val) {
editor.setValue(val)
},
closeAble () {
// this.$modal.destroy()
modal.remove()
}
},
props: {
item: editor.getValue()
}
})
}
})
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
},
_handleQueryType(o){
this.sourceMysqlParams.srcQueryType = this.srcQueryType
@ -740,7 +735,7 @@
},
_handleModelTypeChange(a){
this._getSourceTypeList(a.label)
this._getSourceTypeList(a)
this.sourceType = this.sourceTypeList[0].code
this._handleSourceTypeChange({label: this.sourceType, value: this.sourceType})
},
@ -1267,7 +1262,7 @@
}
}
},
components: { mListBox, mDatasource, mLocalParams}
components: { mListBox, mDatasource, mLocalParams, mScriptBox}
}
</script>
<style lang="scss" rel="stylesheet/scss">

21
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue

@ -22,19 +22,20 @@
</div>
<div class="cont-box">
<div class="label-box">
<x-select
<el-select
style="width: 100%;"
size="small"
filterable
v-model="wdiCurr"
:disabled="isDetails"
@on-change="_handleWdiChanged">
<x-option
v-for="city in processDefinitionList"
:key="city.code"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
@change="_handleWdiChanged">
<el-option
v-for="city in processDefinitionList"
:key="city.code"
:value="city.id"
:label="city.code">
</el-option>
</el-select>
</div>
</div>
</div>
@ -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

43
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue

@ -21,22 +21,22 @@
<div class="clearfix list">
<span class="sp1">{{$t('Deploy Mode')}}</span>
<span class="sp2">
<x-radio-group v-model="deployMode">
<x-radio :label="'client'" :disabled="isDetails"></x-radio>
<x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
<x-radio :label="'local'" :disabled="isDetails"></x-radio>
</x-radio-group>
<el-radio-group size="small" v-model="deployMode">
<el-radio :label="'client'" :disabled="isDetails"></el-radio>
<el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
<el-radio :label="'local'" :disabled="isDetails"></el-radio>
</el-radio-group>
</span>
<span class="sp1 sp3">{{$t('Queue')}}</span>
<span class="sp4">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="queue"
:placeholder="$t('Please enter queue value')"
style="width: 60%;"
autocomplete="off">
</x-input>
style="width: 60%;">
</el-input>
</span>
</div>
</div>
@ -45,27 +45,28 @@
<div class="clearfix list">
<span class="sp1">{{$t('Master')}}</span>
<span class="sp4">
<x-select
<el-select
style="width: 130px;"
size="small"
v-model="master"
:disabled="isDetails">
<x-option
v-for="city in masterType"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
<el-option
v-for="city in masterType"
:key="city.code"
:value="city.code"
:label="city.code">
</el-option>
</el-select>
</span>
<span v-if="masterUrlState">
<x-input
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="masterUrl"
:placeholder="$t('Please Enter Url')"
style="width: 60%;"
autocomplete="off">
</x-input>
style="width: 60%;">
</el-input>
</span>
</div>
</div>

43
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()
})
}

83
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 = [
`<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="ans-icon-play"></em><span>${i18n.$t('Start')}</span></a>`,
`<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-edit"></em><span>${i18n.$t('Edit')}</span></a>`,
`<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-copy"></em><span>${i18n.$t('Copy')}</span></a>`,
`<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-trash"></em><span>${i18n.$t('Delete')}</span></a>`
`<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="el-icon-video-play"></em><span>${i18n.$t('Start')}</span></a>`,
`<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-edit-outline"></em><span>${i18n.$t('Edit')}</span></a>`,
`<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-copy-document"></em><span>${i18n.$t('Copy')}</span></a>`,
`<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-delete"></em><span>${i18n.$t('Delete')}</span></a>`
]
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-full-screen'
screenOpen = true
} else {
item.icon = 'ans-icon-max'
item.icon = 'el-icon-rank'
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 }]]
})
}
})

12
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js

@ -37,7 +37,7 @@ const saveTargetarr = (valId, domId) => {
}
const rtBantpl = () => {
return `<em class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
return `<em class="fa fa-ban" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
}
/**
@ -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')

2
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue

@ -18,7 +18,7 @@
<div class="starting-params-dag-index">
<template v-if="isView && isActive">
<div class="box">
<p class="box-hd"><em class="fa ans-icon-arrow-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
<p class="box-hd"><em class="fa fa-chevron-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
<ul class="box-bd">
<li><span class="tab">{{$t('Startup type')}}</span><span class="content">{{_rtRunningType(startupParam.commandType)}}</span></li>
<li><span class="tab">{{$t('Complement range')}}</span><span class="content" v-if="startupParam.commandParam && startupParam.commandParam.complementStartDate">{{startupParam.commandParam.complementStartDate}}-{{startupParam.commandParam.complementEndDate}}</span><span class="content" v-else>-</span></li>

15
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue

@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
:disabled="isDetails"
@on-change="_onChange"
@change="_onChange"
v-model="value"
size="small"
style="width: 180px">
<x-option
<el-option
v-for="item in itemList"
:key="item.id"
:value="item.id"
:label="item.tenantCode">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
<script>
import disabledState from '@/module/mixin/disabledState'
@ -60,8 +61,8 @@
},
methods: {
_onChange (o) {
this.value = o.value
this.$emit('tenantSelectEvent', o.value)
this.value = o
this.$emit('tenantSelectEvent', o)
}
},
watch: {

26
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue

@ -17,28 +17,26 @@
<template>
<div class="udp-model">
<div class="scrollbar contpi-boxt">
<div class="title">
<span>{{$t('Set the DAG diagram name')}}</span>
</div>
<div>
<x-input
<el-input
type="text"
size="small"
v-model="name"
:disabled="router.history.current.name === 'projects-instance-details'"
:placeholder="$t('Please enter name (required)')">
</x-input>
</el-input>
</div>
<template v-if="router.history.current.name !== 'projects-instance-details'">
<div style="padding-top: 12px;">
<x-input
<el-input
type="textarea"
size="small"
v-model="description"
:autosize="{minRows:2}"
:placeholder="$t('Please enter description(optional)')"
autocomplete="off">
</x-input>
</el-input>
</div>
</template>
@ -49,14 +47,14 @@
<div class="title" style="padding-top: 6px;">
<span class="text-b">{{$t('warning of timeout')}}</span>
<span style="padding-left: 6px;">
<x-switch v-model="checkedTimeout"></x-switch>
<el-switch v-model="checkedTimeout" size="small"></el-switch>
</span>
</div>
<div class="content" style="padding-bottom: 10px;" v-if="checkedTimeout">
<span>
<x-input v-model="timeout" style="width: 160px;" maxlength="9">
<el-input v-model="timeout" style="width: 160px;" maxlength="9" size="small">
<span slot="append">{{$t('Minute')}}</span>
</x-input>
</el-input>
</span>
</div>
@ -78,11 +76,11 @@
<div class="submit">
<template v-if="router.history.current.name === 'projects-instance-details'">
<div class="lint-pt">
<x-checkbox v-model="syncDefine">{{$t('Whether to update the process definition')}}</x-checkbox>
<el-checkbox v-model="syncDefine" size="small">{{$t('Whether to update the process definition')}}</el-checkbox>
</div>
</template>
<x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
<x-button type="primary" shape="circle" :disabled="isDetails" @click="ok()">{{$t('Add')}}</x-button>
<el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
<el-button type="primary" size="small" round :disabled="isDetails" @click="ok()">{{$t('Add')}}</el-button>
</div>
</div>
</div>

16
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue

@ -18,23 +18,23 @@
<div class="variable-model">
<template v-if="list">
<div class="list">
<div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
<div class="name"><em class="fa fa-tasks"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
<div class="var-cont">
<template v-for="(item,$index) in list.globalParams">
<x-button
size="xsmall"
type="ghost"
<el-button
size="mini"
type="primary"
@click="_copy('gbudp-' + $index)"
:key="$index"
:data-clipboard-text="item.prop + ' = ' +item.value"
:class="'gbudp-' + $index">
<strong style="color: #2A455B;">{{item.prop}}</strong> = {{item.value}}
</x-button>
</el-button>
</template>
</div>
</div>
<div class="list" style="height: 30px;">
<div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
<div class="name"><em class="fa fa-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
<div class="var-cont">
&nbsp;
</div>
@ -43,7 +43,7 @@
<div class="task-name">Task({{$index}}){{key}}</div>
<div class="var-cont" v-if="item.localParamsList.length">
<template v-for="(el,index) in item.localParamsList">
<x-button size="xsmall" type="ghost" :key="index" @click="_copy('copy-part-' + index)" :data-clipboard-text="_rtClipboard(el,item.taskType)" :class="'copy-part-' + index">
<el-button size="mini" type="primary" :key="index" @click="_copy('copy-part-' + index)" :data-clipboard-text="_rtClipboard(el,item.taskType)" :class="'copy-part-' + index">
<span v-for="(e,k,i) in el" :key="i">
<template v-if="item.taskType === 'SQL' || item.taskType === 'PROCEDURE'">
<template v-if="(k !== 'direct' && k !== 'type')">
@ -54,7 +54,7 @@
<strong style="color: #2A455B;">{{k}}</strong> = {{e}}
</template>
</span>
</x-button>
</el-button>
</template>
</div>
</div>

99
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue

@ -16,139 +16,136 @@
*/
<template>
<div class="datasource-popup-model">
<div class="top-p">
<span>{{item ? `${$t('Edit')}` : `${$t('Create')}`}}{{`${$t('Datasource')}`}}</span>
</div>
<div class="content-p">
<div class="create-datasource-model">
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Datasource')}}</template>
<template slot="content">
<x-select style="width: 100%;" v-model="type">
<x-option v-for="item in datasourceTypeList" :key="item.value" :value="item.value" :label="item.label">
</x-option>
</x-select>
<template slot="content" size="small">
<el-select style="width: 100%;" v-model="type">
<el-option v-for="item in datasourceTypeList" :key="item.value" :value="item.value" :label="item.label">
</el-option>
</el-select>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Datasource Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="name"
maxlength="60"
:placeholder="$t('Please enter datasource name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter datasource name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="note"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('IP')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="host"
maxlength="60"
:placeholder="$t('Please enter IP')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter IP')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Port')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="port"
:placeholder="$t('Please enter port')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter port')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f :class="{hidden:showPrincipal}">
<template slot="name"><strong>*</strong>Principal</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="principal"
:placeholder="$t('Please enter Principal')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter Principal')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="userName"
maxlength="60"
:placeholder="$t('Please enter user name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter user name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Password')}}</template>
<template slot="content">
<x-input
<el-input
type="password"
v-model="password"
:placeholder="$t('Please enter your password')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter your password')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong :class="{hidden:showdDatabase}">*</strong>{{$t('Database Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="database"
maxlength="60"
:placeholder="$t('Please enter database name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter database name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f v-if="showConnectType">
<template slot="name"><strong>*</strong>{{$t('Oracle Connect Type')}}</template>
<template slot="content">
<x-radio-group v-model="connectType" size="small">
<x-radio :label="'ORACLE_SERVICE_NAME'">{{$t('Oracle Service Name')}}</x-radio>
<x-radio :label="'ORACLE_SID'">{{$t('Oracle SID')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="connectType" size="small" style="vertical-align: sub;">
<el-radio :label="'ORACLE_SERVICE_NAME'">{{$t('Oracle Service Name')}}</el-radio>
<el-radio :label="'ORACLE_SID'">{{$t('Oracle SID')}}</el-radio>
</el-radio-group>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('jdbc connect parameters')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="other"
:autosize="{minRows:2}"
:placeholder="_rtOtherPlaceholder()"
autocomplete="off">
</x-input>
size="small"
:placeholder="_rtOtherPlaceholder()">
</el-input>
</template>
</m-list-box-f>
</div>
</div>
<div class="bottom-p">
<x-button type="text" @click="_close()"> {{$t('Cancel')}} </x-button>
<x-button type="success" shape="circle" @click="_testConnect()" :loading="testLoading">{{testLoading ? 'Loading...' : $t('Test Connect')}}</x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="_ok()">{{spinnerLoading ? 'Loading...' :item ? `${$t('Edit')}` : `${$t('Submit')}`}} </x-button>
<el-button type="text" ize="mini" @click="_close()"> {{$t('Cancel')}} </el-button>
<el-button type="success" size="mini" round @click="_testConnect()" :loading="testLoading">{{testLoading ? 'Loading...' : $t('Test Connect')}}</el-button>
<el-button type="primary" size="mini" round :loading="spinnerLoading" @click="_ok()">{{spinnerLoading ? 'Loading...' :item ? `${$t('Edit')}` : `${$t('Submit')}`}} </el-button>
</div>
</div>
</template>

142
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue

@ -17,97 +17,52 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col">
<span>{{$t('#')}}</span>
</th>
<th scope="col">
<span>{{$t('Datasource Name')}}</span>
</th>
<th scope="col" width="120">
<span>{{$t('Datasource Type')}}</span>
</th>
<th scope="col" width="100">
<span>{{$t('Datasource Parameter')}}</span>
</th>
<th scope="col">
<span>{{$t('Description')}}</span>
</th>
<th scope="col" width="150">
<span>{{$t('Create Time')}}</span>
</th>
<th scope="col" width="150">
<span>{{$t('Update Time')}}</span>
</th>
<th scope="col" width="80">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="$index">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span class="ellipsis">
{{item.name}}
</span>
</td>
<td>
<span>{{item.type}}</span>
</td>
<td>
<m-tooltips-JSON :JSON="JSON.parse(item.connectionParams)" :id="item.id">
<span slot="reference">
<a href="javascript:" class="links" style="font-size: 12px;">{{$t('Click to view')}}</a>
</span>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="name" :label="$t('Datasource Name')"></el-table-column>
<el-table-column prop="type" :label="$t('Datasource Type')"></el-table-column>
<el-table-column :label="$t('Datasource Parameter')">
<template slot-scope="scope">
<div>
<m-tooltips-JSON :JSON="JSON.parse(scope.row.connectionParams)" :id="scope.row.id">
<span slot="reference">
<el-button size="small" type="text">{{$t('Click to view')}}</el-button>
</span>
</m-tooltips-JSON>
</td>
<td>
<span v-if="item.note" class="ellipsis" v-tooltip.large.top.start.light="{text: item.note, maxWidth: '500px'}">{{item.note}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.createTime">{{item.createTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
icon="ans-icon-edit"
@click="_edit(item)">
</x-button>
<x-poptip
:ref="'poptip-delete-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
</div>
<template slot="reference">
<x-button
type="error"
shape="circle"
size="xsmall"
icon="ans-icon-trash"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
</div>
</template>
</el-table-column>
<el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
<el-table-column :label="$t('Create Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.createTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="150">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
@ -134,17 +89,10 @@
},
methods: {
...mapActions('datasource', ['deleteDatasource']),
/**
* Close delete popup layer
*/
_closeDelete (i) {
this.$refs[`poptip-delete-${i}`][0].doClose()
},
/**
* Delete current line
*/
_delete (item, i) {
this.$refs[`poptip-delete-${i}`][0].doClose()
this.deleteDatasource({
id: item.id
}).then(res => {

62
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue

@ -19,7 +19,14 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
<x-button type="ghost" size="small" @click="_create('')">{{$t('Create Datasource')}}</x-button>
<el-button size="mini" @click="_create('')">{{$t('Create Datasource')}}</el-button>
<el-dialog
:title="item ?($t('Edit')+$t('Datasource')) : ($t('Create')+$t('Datasource'))"
:visible.sync="dialogVisible"
width="65%"
:append-to-body="true">
<m-create-data-source :item="item" @onUpdate="onUpdate" @close="close"></m-create-data-source>
</el-dialog>
</template>
</m-conditions>
</template>
@ -27,7 +34,16 @@
<template v-if="datasourcesList.length || total>0">
<m-list @on-update="_onUpdate" :datasources-list="datasourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!datasourcesList.length && total<=0">
@ -65,8 +81,11 @@
// Number of pages
pageNo: 1,
// Search value
searchVal: ''
}
searchVal: '',
},
dialogVisible: false,
item: {},
}
},
mixins: [listUrlParamHandle],
@ -77,30 +96,15 @@
* create data source
*/
_create (item) {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mCreateDataSource, {
on: {
onUpdate () {
self._debounceGET('false')
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item
}
})
}
})
this.item = item
this.dialogVisible = true
},
onUpdate () {
this._debounceGET('false')
this.dialogVisible = false
},
close () {
this.dialogVisible = false
},
/**
* page
@ -151,6 +155,6 @@
},
mounted () {
},
components: { mList, mConditions, mSpin, mListConstruction, mNoData }
components: { mList, mConditions, mSpin, mListConstruction, mNoData, mCreateDataSource }
}
</script>

2
dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue

@ -25,7 +25,7 @@ export default {
name: 'home',
components: { mProjectHome, mListConstruction },
mounted() {
this.$modal.destroy()
},
}
</script>

2
dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue

@ -26,7 +26,7 @@
export default {
name: 'monitor-index',
mounted() {
this.$modal.destroy()
},
components: { mSecondaryMenu }
}

23
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue

@ -21,25 +21,10 @@
</div>
<div class="table-box" v-if="zkDirectories.length > 0">
<table class="fixed">
<caption><!-- placeHolder --></caption>
<tr>
<th scope="col" style="min-width: 40px">
<span>#</span>
</th>
<th scope="col" style="min-width: 40px">
<span>{{$t('zkDirectory')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in zkDirectories" :key="item.id">
<td>
<span>{{$index + 1}}</span>
</td>
<td>
<span>{{item.zkDirectory}}</span>
</td>
</tr>
</table>
<el-table :data="zkDirectories" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="zkDirectory" :label="$t('zkDirectory')"></el-table-column>
</el-table>
</div>
<div v-if="zkDirectories.length === 0">

108
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue

@ -17,92 +17,32 @@
<template>
<div class="list-model zookeeper-list">
<div class="table-box">
<table>
<tr>
<th>
<span>{{$t('#')}}</span>
</th>
<th>
<span>{{$t('host')}}</span>
</th>
<th>
<span>{{$t('Number of connections')}}</span>
</th>
<th>
<span>watches {{$t('Number')}}</span>
</th>
<th>
<span>{{$t('Sent')}}</span>
</th>
<th>
<span>{{$t('Received')}}</span>
</th>
<th>
<span>leader/follower</span>
</th>
<th>
<span>{{$t('Min latency')}}</span>
</th>
<th>
<span>{{$t('Avg latency')}}</span>
</th>
<th>
<span>{{$t('Max latency')}}</span>
</th>
<th>
<span>{{$t('Node count')}}</span>
</th>
<th>
<span>{{$t('Query time')}}</span>
</th>
<th style="text-align: center">
<span>{{$t('Node self-test status')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="$index">
<td>
<span>{{$index + 1}}</span>
</td>
<td>
<span>
{{item.hostname}}
</span>
</td>
<td><span>{{item.connections}}</span></td>
<td>
<span>{{item.watches}}</span>
</td>
<td>
<span>{{item.sent}}</span>
</td>
<td>
<span>{{item.received}}</span>
</td>
<td><span>{{item.mode}}</span></td>
<td>
<span>{{item.minLatency}}</span>
</td>
<td>
<span>{{item.avgLatency}}</span>
</td>
<td>
<span>{{item.maxLatency}}</span>
</td>
<td>
<span>{{item.nodeCount}}</span>
</td>
<td>
<span v-if="item.date">{{item.date | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="hostname" :label="$t('host')" min-width="130"></el-table-column>
<el-table-column prop="connections" :label="$t('Number of connections')"></el-table-column>
<el-table-column prop="watches" :label="'watches'+$t('Number')"></el-table-column>
<el-table-column prop="sent" :label="$t('Sent')"></el-table-column>
<el-table-column prop="received" :label="$t('Received')"></el-table-column>
<el-table-column prop="mode" label="leader/follower"></el-table-column>
<el-table-column prop="minLatency" :label="$t('Min latency')"></el-table-column>
<el-table-column prop="avgLatency" :label="$t('Avg latency')"></el-table-column>
<el-table-column prop="maxLatency" :label="$t('Max latency')"></el-table-column>
<el-table-column prop="nodeCount" :label="$t('Node count')"></el-table-column>
<el-table-column :label="$t('Query time')" min-width="130">
<template slot-scope="scope">
<span>{{scope.row.date | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Node self-test status')" min-width="90">
<template slot-scope="scope">
<span class="state">
<em class="ans-icon-success-solid success" v-if="item.state"></em>
<em class="ans-icon-fail-solid error" v-else></em>
<em class="el-icon-success success" v-if="scope.row.state"></em>
<em class="el-icon-error error" v-else></em>
</span>
</td>
</tr>
</table>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>

6
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue

@ -48,9 +48,3 @@
components: {}
}
</script>
<style lang="scss" rel="stylesheet/scss">
.apiserver-model {
}
</style>

17
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue

@ -30,8 +30,8 @@
</div>
<div class="value-p">
<span class="state">
<em class="ans-icon-success-solid success" v-if="item.state"></em>
<em class="ans-icon-fail-solid error" v-else></em>
<em class="el-icon-success success" v-if="item.state"></em>
<em class="el-icon-error error" v-else></em>
</span>
</div>
<div class="text-1">{{$t('Health status')}}</div>
@ -59,19 +59,6 @@
<div class="text-1">{{$t('Threads connections')}}</div>
</div>
</div>
<!-- <div class="col-md-2">
<div class="text-num-model text">
<div class="title">
<span>{{$t('Max used connections')}}</span>
</div>
<div class="value-p">
<strong :style="{color:color[2]}">{{item.maxUsedConnections}}</strong>
</div>
<div class="text-1">
{{$t('Max used connections')}}
</div>
</div>
</div>-->
<div class="col-md-3">
<div class="text-num-model text">
<div class="title">

23
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue

@ -57,6 +57,11 @@
</div>
</div>
</div>
<el-drawer
:visible.sync="drawer"
:with-header="false">
<zookeeper-directories-popup :zkDirectories = zkDirectories></zookeeper-directories-popup>
</el-drawer>
<div v-if="!workerList.length">
<m-no-data></m-no-data>
</div>
@ -81,29 +86,21 @@
return {
isLoading: false,
workerList: [],
color: themeData.color
color: themeData.color,
drawer: false,
zkDirectories: []
}
},
props: {},
methods: {
...mapActions('monitor', ['getWorkerData']),
_showZkDirectories (item) {
let zkDirectories = []
item.zkDirectories.forEach(zkDirectory => {
zkDirectories.push({
this.zkDirectories.push({
zkDirectory: zkDirectory
})
})
this.$drawer({
direction: 'right',
render (h) {
return h(zookeeperDirectoriesPopup, {
props: {
zkDirectories: zkDirectories
}
})
}
})
this.drawer = true
}
},
watch: {},

61
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue

@ -18,47 +18,39 @@
<m-conditions>
<template slot="search-group">
<div class="list">
<x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
<el-button type="primary" size="small" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
<x-datepicker
ref="datepicker"
@on-change="_onChangeStartStop"
type="daterange"
format="YYYY-MM-DD HH:mm:ss"
placement="bottom-end"
:value="[searchParams.startDate,searchParams.endDate]"
:panelNum="2">
<x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
<em slot="suffix"
@click.stop="_dateEmpty()"
class="ans-icon-fail-solid"
v-show="value"
style="font-size: 13px;cursor: pointer;margin-top: 1px;">
</em>
</x-input>
</x-datepicker>
<el-date-picker
style="width: 310px"
v-model="dataTime"
size="mini"
@change="_onChangeStartStop"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<div class="list">
<x-select style="width: 160px;" @on-change="_onChangeState" :value="searchParams.stateType" >
<x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 160px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
</x-input>
<x-option
<el-select style="width: 140px;" @change="_onChangeState" :value="searchParams.stateType" :placeholder="$t('State')" size="mini">
<el-option
v-for="city in stateTypeList"
:key="city.label"
:value="city.code"
:label="city.label">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
<div class="list">
<x-input v-model.trim="searchParams.host" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
<el-input v-model="searchParams.host" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('host')"></el-input>
</div>
<div class="list">
<x-input v-model.trim="searchParams.executorName" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('Executor')"></x-input>
<el-input v-model="searchParams.executorName" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('Executor')"></el-input>
</div>
<div class="list">
<x-input v-model.trim="searchParams.searchVal" @on-enterkey="_ckQuery" style="width: 200px;" size="small" :placeholder="$t('name')"></x-input>
<el-input v-model="searchParams.searchVal" @keyup.enter.native="_ckQuery" style="width: 200px;" size="mini" :placeholder="$t('name')"></el-input>
</div>
</template>
</m-conditions>
@ -86,7 +78,8 @@
host: '',
// executor name
executorName: ''
}
},
dataTime: []
}
},
props: {},
@ -100,21 +93,15 @@
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
this.dataTime[0] = val[0]
this.dataTime[1]= val[1]
},
/**
* change state
*/
_onChangeState (val) {
this.searchParams.stateType = val.value
this.searchParams.stateType = val
},
/**
* empty date
*/
_dateEmpty () {
this.searchParams.startDate = ''
this.searchParams.endDate = ''
this.$refs.datepicker.empty()
}
},
watch: {
},

63
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue

@ -18,50 +18,42 @@
<m-conditions>
<template slot="search-group">
<div class="list">
<x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
<el-button size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
<x-datepicker
ref="datepicker"
@on-change="_onChangeStartStop"
type="daterange"
format="YYYY-MM-DD HH:mm:ss"
placement="bottom-end"
:value="[searchParams.startDate,searchParams.endDate]"
:panelNum="2">
<x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
<em slot="suffix"
@click.stop="_dateEmpty()"
class="ans-icon-fail-solid"
v-show="value"
style="font-size: 13px;cursor: pointer;margin-top: 1px;">
</em>
</x-input>
</x-datepicker>
<el-date-picker
style="width: 310px"
v-model="dataTime"
size="mini"
@change="_onChangeStartStop"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<div class="list">
<x-select style="width: 140px;" @on-change="_onChangeState" :value="searchParams.stateType" >
<x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 140px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
</x-input>
<x-option
<el-select style="width: 140px;" @change="_onChangeState" :value="searchParams.stateType" :placeholder="$t('State')" size="mini">
<el-option
v-for="city in stateTypeList"
:key="city.label"
:value="city.code"
:label="city.label">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
<div class="list">
<x-input v-model.trim="searchParams.host" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
<el-input v-model="searchParams.host" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('host')"></el-input>
</div>
<div class="list">
<x-input v-model.trim="searchParams.executorName" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('Executor')"></x-input>
<el-input v-model="searchParams.executorName" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('Executor')"></el-input>
</div>
<div class="list">
<x-input v-model.trim="searchParams.processInstanceName" @on-enterkey="_ckQuery" style="width: 160px;" size="small" :placeholder="$t('Process Instance')"></x-input>
<el-input v-model="searchParams.processInstanceName" @keyup.enter.native="_ckQuery" style="width: 160px;" size="mini" :placeholder="$t('Process Instance')"></el-input>
</div>
<div class="list">
<x-input v-model.trim="searchParams.searchVal" @on-enterkey="_ckQuery" style="width: 160px;" size="small" :placeholder="$t('name')"></x-input>
<el-input v-model="searchParams.searchVal" @keyup.enter.native="_ckQuery" style="width: 160px;" size="mini" :placeholder="$t('name')"></el-input>
</div>
</template>
</m-conditions>
@ -90,7 +82,8 @@
// executor name
executorName: '',
processInstanceName: ''
}
},
dataTime: [],
}
},
props: {},
@ -104,21 +97,15 @@
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
this.dataTime[0] = val[0]
this.dataTime[1]= val[1]
},
/**
* change state
*/
_onChangeState (val) {
this.searchParams.stateType = val.value
this.searchParams.stateType = val
},
/**
* empty date
*/
_dateEmpty () {
this.searchParams.startDate = ''
this.searchParams.endDate = ''
this.$refs.datepicker.empty()
}
},
watch: {
},

68
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue

@ -18,55 +18,48 @@
<m-conditions>
<template slot="search-group">
<div class="list">
<x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
<el-button type="ghost" size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
<x-datepicker
:value="[searchParams.startDate,searchParams.endDate]"
ref="datepicker"
@on-change="_onChangeStartStop"
type="daterange"
format="YYYY-MM-DD HH:mm:ss"
placement="bottom-end"
:panelNum="2">
<x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
<em slot="suffix"
@click.stop="_dateEmpty()"
class="ans-icon-fail-solid"
v-show="value"
style="font-size: 13px;cursor: pointer;margin-top: 1px;">
</em>
</x-input>
</x-datepicker>
<el-date-picker
v-model="dataTime"
type="datetimerange"
size="mini"
@change="_onChangeStartStop"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<div class="list">
<x-input v-model="searchParams.destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input>
<el-input v-model="searchParams.destTable" style="width: 120px;" size="mini" :placeholder="$t('Target Table')"></el-input>
</div>
<div class="list">
<x-input v-model="searchParams.sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-input>
<el-input v-model="searchParams.sourceTable" style="width: 120px;" size="mini" :placeholder="$t('Source Table')"></el-input>
</div>
<div class="list">
<x-select style="width: 90px;" @on-change="_onChangeState" :value="searchParams.state">
<x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 90px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down"></x-input>
<x-option
<el-select style="width: 90px;" @change="_onChangeState" :value="searchParams.state" :placeholder="$t('State')" size="mini">
<el-option
v-for="city in stateList"
:key="city.label"
:value="city.code"
:label="city.label">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
<div class="list">
<x-datepicker
v-model="searchParams.taskDate"
@on-change="_onChangeDate"
format="YYYY-MM-DD"
:panelNum="1">
<x-input slot="input" readonly slot-scope="{value}" style="width: 130px;" :value="value" size="small" :placeholder="$t('Date')"></x-input>
</x-datepicker>
<el-date-picker
v-model="searchParams.taskDate"
value-format="yyyy-MM-dd"
size="mini"
@change="_onChangeDate"
type="date"
:placeholder="$t('Date')">
</el-date-picker>
</div>
<div class="list">
<x-input v-model="searchParams.taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input>
<el-input v-model="searchParams.taskName" style="width: 130px;" size="mini" :placeholder="$t('Task Name')"></el-input>
</div>
</template>
</m-conditions>
@ -111,7 +104,8 @@
taskDate: '',
startDate: '',
endDate: ''
}
},
dataTime: [],
}
},
props: {},
@ -124,13 +118,13 @@
*/
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
this.searchParams.endDate = val[1]
},
/**
* change state
*/
_onChangeState (val) {
this.searchParams.state = val.value
this.searchParams.state = val
},
/**
* empty date
@ -141,7 +135,7 @@
this.$refs.datepicker.empty()
},
_onChangeDate (val) {
this.searchParams.taskDate = val.replace(/-/g, '')
this.searchParams.taskDate = val
}
},
created () {

96
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue

@ -17,68 +17,40 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th>
<span>{{$t('#')}}</span>
</th>
<th>
<span>{{$t('Task Name')}}</span>
</th>
<th width="66">
<span>{{$t('Task Date')}}</span>
</th>
<th width="150">
<span>{{$t('Start Time')}}</span>
</th>
<th width="150">
<span>{{$t('End Time')}}</span>
</th>
<th width="134">
<span>{{$t('Duration')}}(s)</span>
</th>
<th>
<span>{{$t('Source Table')}}</span>
</th>
<th width="100">
<span>{{$t('Record Number')}}</span>
</th>
<th>
<span>{{$t('Target Table')}}</span>
</th>
<th width="100">
<span>{{$t('Record Number')}}</span>
</th>
<th width="88">
<span>{{$t('State')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.procName)" data-html="true">{{item.procName}}</span>
</td>
<td><span>{{item.procDate}}</span></td>
<td>
<span v-if="item.startTime">{{item.startTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.endTime">{{item.endTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td><span>{{item.duration}}</span></td>
<td><span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.sourceTab)" data-html="true">{{item.sourceTab}}</span></td>
<td>
<span>{{item.sourceRowCount}}</span>
</td>
<td><span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.targetTab)" data-html="true">{{item.targetTab}}</span></td>
<td><span>{{item.targetRowCount}}</span></td>
<td><span>{{item.note}}</span></td>
</tr>
</table>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Task Name')" min-width="100">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.procName }}</p>
<div slot="reference" class="name-wrapper">
{{ scope.row.procName }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$t('Task Date')">
<template slot-scope="scope">
<span>{{scope.row.procDate | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Start Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.startTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('End Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.endTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column prop="description" :label="$t('Duration')+'(s)'"></el-table-column>
<el-table-column prop="sourceTab" :label="$t('Source Table')"></el-table-column>
<el-table-column prop="sourceRowCount" :label="$t('Record Number')"></el-table-column>
<el-table-column prop="targetTab" :label="$t('Target Table')"></el-table-column>
<el-table-column prop="targetRowCount" :label="$t('Record Number')"></el-table-column>
<el-table-column prop="note" :label="$t('State')"></el-table-column>
</el-table>
</div>
</div>
</template>

11
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue

@ -24,7 +24,16 @@
<m-list :task-record-list="taskRecordList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!taskRecordList.length && total<=0">

38
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue

@ -19,9 +19,9 @@
<div class="clearfix input-element" :class="disabled ? 'disabled' : ''">
<span class="tag-wrapper" v-for="(item,$index) in activeList" :key="$index" :class="activeIndex === $index ? 'active' : ''">
<span class="tag-text">{{item}}</span>
<em class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
<em class="remove-tag el-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
</span>
<x-poptip
<el-popover
placement="bottom-start"
:append-to-body="true"
:visible-arrow="false"
@ -41,23 +41,23 @@
<span class="label-wrapper" slot="reference" >
<!--@keydown.tab="_emailTab"-->
<input
class="email-input"
ref="emailInput"
:style="{width:emailWidth + 'px'}"
type="text"
v-model="email"
:disabled="disabled"
:placeholder="$t('Please enter email')"
@blur="_emailEnter"
@keydown.tab="_emailTab"
@keyup.delete="_emailDelete"
@keyup.enter="_emailEnter"
@keyup.space="_emailEnter"
@keyup.186="_emailEnter"
@keyup.up="_emailKeyup('up')"
@keyup.down="_emailKeyup('down')">
class="email-input"
ref="emailInput"
:style="{width:emailWidth + 'px'}"
type="text"
v-model="email"
:disabled="disabled"
:placeholder="$t('Please enter email')"
@blur="_emailEnter"
@keydown.tab="_emailTab"
@keyup.delete="_emailDelete"
@keyup.enter="_emailEnter"
@keyup.space="_emailEnter"
@keyup.186="_emailEnter"
@keyup.up="_emailKeyup('up')"
@keyup.down="_emailKeyup('down')">
</span>
</x-poptip>
</el-popover>
</div>
</div>
</template>
@ -299,6 +299,8 @@
<style lang="scss" rel="stylesheet/scss">
.email-model {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 5px;
.input-element {
min-height: 32px;
padding: 1px 8px;

615
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue

@ -17,129 +17,131 @@
<template>
<div class="list-model" style="position: relative;">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col" style="min-width: 50px">
<x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
</th>
<th scope="col" style="min-width: 40px">
<span>{{$t('#')}}</span>
</th>
<th scope="col" style="min-width: 200px;max-width: 300px;">
<span>{{$t('Process Name')}}</span>
</th>
<th scope="col" style="min-width: 50px">
<span>{{$t('State')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Create Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Update Time')}}</span>
</th>
<th scope="col" style="min-width: 150px">
<span>{{$t('Description')}}</span>
</th>
<th scope="col" style="min-width: 70px">
<span>{{$t('Modify User')}}</span>
</th>
<th scope="col" style="min-width: 70px">
<div style="width: 80px">
<span>{{$t('Timing state')}}</span>
</div>
</th>
<th scope="col" style="min-width: 300px">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td width="50"><x-checkbox v-model="item.isCheck" :disabled="item.releaseState === 'ONLINE'" @on-change="_arrDelChange"></x-checkbox></td>
<td width="50">
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
<span class="ellipsis">
<router-link :to="{ path: '/projects/definition/list/' + item.id}" tag="a" class="links" :title="item.name">
{{item.name}}
</router-link>
</span>
</td>
<td><span>{{_rtPublishStatus(item.releaseState)}}</span></td>
<td>
<span v-if="item.createTime">{{item.createTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.modifyBy">{{item.modifyBy}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.scheduleReleaseState === 'OFFLINE'">{{$t('offline')}}</span>
<span v-if="item.scheduleReleaseState === 'ONLINE'">{{$t('online')}}</span>
<span v-if="!item.scheduleReleaseState">-</span>
</td>
<td style="z-index: inherit;">
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Edit')" @click="_edit(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-edit"><!--{{$t('编辑')}}--></x-button>
<x-button type="success" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Start')" @click="_start(item)" :disabled="item.releaseState !== 'ONLINE'" icon="ans-icon-play"><!--{{$t('启动')}}--></x-button>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Timing')" @click="_timing(item)" :disabled="item.releaseState !== 'ONLINE' || item.scheduleReleaseState !== null" icon="ans-icon-timer"><!--{{$t('定时')}}--></x-button>
<x-button type="warning" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('online')" @click="_poponline(item)" v-if="item.releaseState === 'OFFLINE'" icon="ans-icon-upward"><!--{{$t('下线')}}--></x-button>
<x-button type="error" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('offline')" @click="_downline(item)" v-if="item.releaseState === 'ONLINE'" icon="ans-icon-downward"><!--{{$t('上线')}}--></x-button>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Copy Workflow')" @click="_copyProcess(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-copy"><!--{{$t('复制')}}--></x-button>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Cron Manage')" @click="_timingManage(item)" :disabled="item.releaseState !== 'ONLINE'" icon="ans-icon-datetime"><!--{{$t('定时管理')}}--></x-button>
<x-poptip
:ref="'poptip-delete-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
<el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
<el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Process Name')" min-width="200">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.name }}</p>
<div slot="reference" class="name-wrapper">
<router-link :to="{ path: '/projects/definition/list/' + scope.row.id}" tag="a" class="links" :title="scope.row.name">
{{scope.row.name}}
</router-link>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
:disabled="item.releaseState === 'ONLINE'"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('TreeView')" @click="_treeView(item)" icon="ans-icon-node"><!--{{$t('树形图')}}--></x-button>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Export')" @click="_export(item)" icon="ans-icon-download"><!--{{$t('导出')}}--></x-button>
<x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Version Info')" @click="_version(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-dependence"><!--{{$t('版本信息')}}--></x-button>
</td>
</tr>
</table>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$t('State')">
<template slot-scope="scope">
{{_rtPublishStatus(scope.row.releaseState)}}
</template>
</el-table-column>
<el-table-column :label="$t('Create Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.createTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column prop="description" :label="$t('Description')"></el-table-column>
<el-table-column prop="modifyBy" :label="$t('Modify User')"></el-table-column>
<el-table-column :label="$t('Timing state')">
<template slot-scope="scope">
<span v-if="scope.row.scheduleReleaseState === 'OFFLINE'">{{$t('offline')}}</span>
<span v-if="scope.row.scheduleReleaseState === 'ONLINE'">{{$t('online')}}</span>
<span v-if="!scope.row.scheduleReleaseState">-</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="335" fixed="right">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
<el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.releaseState === 'ONLINE'" @click="_edit(scope.row)" circle></el-button>
</el-tooltip>
<el-tooltip :content="$t('Start')" placement="top" :enterable="false">
<span><el-button type="success" size="mini" :disabled="scope.row.releaseState !== 'ONLINE'" icon="el-icon-video-play" @click="_start(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Timing')" placement="top" :enterable="false">
<el-button type="primary" size="mini" icon="el-icon-time" :disabled="scope.row.releaseState !== 'ONLINE' || scope.row.scheduleReleaseState !== null" @click="_timing(scope.row)" circle></el-button>
</el-tooltip>
<el-tooltip :content="$t('online')" placement="top" :enterable="false">
<span><el-button type="warning" size="mini" v-if="scope.row.releaseState === 'OFFLINE'" icon="el-icon-upload2" @click="_poponline(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('offline')" placement="top" :enterable="false">
<el-button type="danger" size="mini" icon="el-icon-download" v-if="scope.row.releaseState === 'ONLINE'" @click="_downline(scope.row)" circle></el-button>
</el-tooltip>
<el-tooltip :content="$t('Copy Workflow')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" :disabled="scope.row.releaseState === 'ONLINE'" icon="el-icon-document-copy" @click="_copyProcess(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Cron Manage')" placement="top" :enterable="false">
<el-button type="primary" size="mini" icon="el-icon-date" :disabled="scope.row.releaseState !== 'ONLINE'" @click="_timingManage(scope.row)" circle></el-button>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" :disabled="scope.row.releaseState === 'ONLINE'" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
<el-tooltip :content="$t('TreeView')" placement="top" :enterable="false">
<el-button type="primary" size="mini" icon="el-icon-s-data" @click="_treeView(scope.row)" circle></el-button>
</el-tooltip>
<el-tooltip :content="$t('Export')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-s-unfold" @click="_export(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Version Info')" placement="top" :enterable="false">
<el-button type="primary" size="mini" icon="el-icon-info" :disabled="scope.row.releaseState === 'ONLINE'" @click="_version(scope.row)" circle></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<x-poptip
ref="poptipDeleteAll"
placement="bottom-start"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete(-1)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete({},-1)">{{$t('Confirm')}}</x-button>
</div>
<template slot="reference">
<x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 22px;" >{{$t('Delete')}}</x-button>
</template>
</x-poptip>
<x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 80px;" @click="_batchExport(item)" >{{$t('Export')}}</x-button>
<x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 140px;" @click="_batchCopy(item)" >{{$t('Batch copy')}}</x-button>
<x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 225px;" @click="_batchMove(item)" >{{$t('Batch move')}}</x-button>
<el-tooltip :content="$t('delete')" placement="top">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
:title="$t('Delete?')"
@onConfirm="_delete({},-1)"
>
<el-button style="position: absolute; bottom: -48px; left: 19px;" type="primary" size="mini" :disabled="!strSelectIds" slot="reference">{{$t('Delete')}}</el-button>
</el-popconfirm>
</el-tooltip>
<el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 80px;" @click="_batchExport(item)" >{{$t('Export')}}</el-button>
<span><el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 140px;" @click="_batchCopy(item)" >{{$t('Batch copy')}}</el-button></span>
<el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 225px;" @click="_batchMove(item)" >{{$t('Batch move')}}</el-button>
<el-drawer
:visible.sync="drawer"
size="35%"
:with-header="false">
<m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion"></m-versions>
</el-drawer>
<el-dialog
:title="$t('Please set the parameters before starting')"
:visible.sync="startDialog"
width="65%">
<m-start :startData= "startData" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
</el-dialog>
<el-dialog
:title="$t('Set parameters before timing')"
:visible.sync="timingDialog"
width="65%">
<m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
</el-dialog>
<el-dialog
title="提示"
:visible.sync="relatedItemsDialog"
width="30%">
<m-related-items :tmp="tmp" @onBatchCopy="onBatchCopy" @onBatchMove="onBatchMove" @closeRelatedItems="closeRelatedItems"></m-related-items>
</el-dialog>
</div>
</template>
<script>
@ -157,7 +159,26 @@
return {
list: [],
strSelectIds: '',
checkAll: false
checkAll: false,
drawer: false,
versionData: {
processDefinition: {},
processDefinitionVersions: [],
total: null,
pageNo: null,
pageSize: null
},
startDialog: false,
startData: {},
timingDialog: false,
timingData: {
item: {},
receiversD: [],
receiversCcD: [],
type: ''
},
relatedItemsDialog: false,
tmp: false
}
},
props: {
@ -168,6 +189,14 @@
methods: {
...mapActions('dag', ['editProcessState', 'getStartCheck', 'getReceiver', 'deleteDefinition', 'batchDeleteDefinition', 'exportDefinition', 'getProcessDefinitionVersionsPage', 'copyProcess', 'switchProcessDefinitionVersion', 'deleteProcessDefinitionVersion', 'moveProcess']),
...mapActions('security', ['getWorkerGroupsAll']),
selectable(row,index) {
if(row.releaseState === 'ONLINE') {
return false
} else {
return true
}
},
_rtPublishStatus (code) {
return _.filter(publishStatus, v => v.code === code)[0].desc
},
@ -180,34 +209,19 @@
_start (item) {
this.getWorkerGroupsAll()
this.getStartCheck({ processDefinitionId: item.id }).then(res => {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mStart, {
on: {
onUpdate () {
self._onUpdate()
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item
}
})
}
})
this.startData = item
this.startDialog = true
}).catch(e => {
this.$message.error(e.msg || '')
})
},
onUpdateStart () {
this._onUpdate()
this.startDialog = false
},
closeStart () {
this.startDialog = false
},
/**
* get emial
*/
@ -227,52 +241,26 @@
_timing (item) {
let self = this
this._getReceiver(item.id).then(res => {
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mTiming, {
on: {
onUpdate () {
self._onUpdate()
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item,
receiversD: res.receivers,
receiversCcD: res.receiversCc,
type: 'timing'
}
})
}
})
this.timingData.item = item,
this.timingData.receiversD = res.receivers,
this.timingData.receiversCcD = res.receiversCc,
this.timingData.type = 'timing'
this.timingDialog = true
})
},
onUpdateTiming () {
this._onUpdate()
this.timingDialog = false
},
closeTiming () {
this.timingDialog = false
},
/**
* Timing manage
*/
_timingManage (item) {
this.$router.push({ path: `/projects/definition/list/timing/${item.id}` })
},
/**
* Close the delete layer
*/
_closeDelete (i) {
// close batch
if (i < 0) {
this.$refs['poptipDeleteAll'].doClose()
return
}
// close one
this.$refs[`poptip-delete-${i}`][0].doClose()
},
/**
* delete
*/
@ -286,11 +274,9 @@
this.deleteDefinition({
processDefinitionId: item.id
}).then(res => {
this.$refs[`poptip-delete-${i}`][0].doClose()
this._onUpdate()
this.$message.success(res.msg)
}).catch(e => {
this.$refs[`poptip-delete-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
@ -328,7 +314,7 @@
}).then(res => {
this.strSelectIds = ''
this.$message.success(res.msg)
$('body').find('.tooltip.fade.top.in').remove()
// $('body').find('.tooltip.fade.top.in').remove()
this._onUpdate()
}).catch(e => {
this.$message.error(e.msg || '')
@ -360,7 +346,69 @@
this.$message.error(e.msg || '')
})
},
/**
* 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.switchProcessDefinitionVersion({
version: version,
processDefinitionId: processDefinitionId
}).then(res=>{
this.$message.success($t('Switch Version Successfully'))
this.$router.push({ path: `/projects/definition/list/${processDefinitionId}` })
}).catch(e => {
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 || '')
})
},
_version (item) {
let self = this
this.getProcessDefinitionVersionsPage({
@ -372,109 +420,14 @@
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.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}` })
}).catch(e => {
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 || '')
})
},
this.versionData.processDefinition = item,
this.versionData.processDefinitionVersions = processDefinitionVersions,
this.versionData.total = total,
this.versionData.pageNo = pageNo,
this.versionData.pageSize = pageSize
this.drawer = true
/**
* 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: item,
processDefinitionVersions: processDefinitionVersions,
total: total,
pageNo: pageNo,
pageSize: pageSize
}
})
}
})
}).catch(e => {
this.$message.error(e.msg || '')
})
@ -498,59 +451,26 @@
* Batch Copy
*/
_batchCopy () {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mRelatedItems, {
on: {
onBatchCopy (item) {
self._copyProcess({id: self.strSelectIds,projectId: item})
modal.remove()
},
close () {
modal.remove()
}
},
props: {
tmp: false
}
})
}
})
this.relatedItemsDialog= true
this.tmp = false
},
onBatchCopy (item) {
this._copyProcess({id: this.strSelectIds,projectId: item})
this.relatedItemsDialog = false
},
closeRelatedItems () {
this.relatedItemsDialog = false
},
/**
* _batchMove
*/
_batchMove() {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mRelatedItems, {
on: {
onBatchMove (item) {
self._moveProcess({id: self.strSelectIds,projectId: item})
modal.remove()
},
close () {
modal.remove()
}
},
props: {
tmp: true
}
})
}
})
this.tmp = true
this.relatedItemsDialog = true
},
onBatchMove (item) {
this._moveProcess({id: this.strSelectIds,projectId: item})
this.relatedItemsDialog = false
},
/**
* Edit state
@ -567,33 +487,18 @@
_onUpdate () {
this.$emit('on-update')
},
/**
* click the select-all checkbox
*/
_topCheckBoxClick (is) {
_.map(this.list , v => v.isCheck = v.releaseState === 'ONLINE' ? false : is)
this._arrDelChange()
},
/**
* the array that to be delete
*/
_arrDelChange (v) {
let arr = []
this.list.forEach((item)=>{
if (item.isCheck) {
arr.push(item.id)
}
})
arr = _.map(v, 'id');
this.strSelectIds = _.join(arr, ',')
if (v === false) {
this.checkAll = false
}
},
/**
* batch delete
*/
_batchDelete () {
this.$refs['poptipDeleteAll'].doClose()
this.batchDeleteDefinition({
processDefinitionIds: this.strSelectIds
}).then(res => {
@ -628,6 +533,6 @@
},
mounted () {
},
components: { mVersions }
components: { mVersions, mStart, mTiming, mRelatedItems }
}
</script>

12
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue

@ -25,14 +25,14 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
<template slot="content">
<x-select v-model="itemId">
<x-option
<el-select v-model="itemId" size="small">
<el-option
v-for="item in itemList"
:key="item.id"
:value="item.id"
:label="item.name">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
</m-list-box-f>
</div>
@ -62,9 +62,9 @@
_ok () {
if(this._verification()) {
if(this.tmp) {
this.$emit('onBatchMove',this.itemId)
this.$emit('onBatchMove',this.itemId)
} else {
this.$emit('onBatchCopy',this.itemId)
this.$emit('onBatchCopy',this.itemId)
}
}
},

101
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue

@ -16,9 +16,6 @@
*/
<template>
<div class="start-process-model">
<div class="title-box">
<span>{{$t('Please set the parameters before starting')}}</span>
</div>
<div class="clearfix list">
<div class="text">
{{$t('Process Name')}}
@ -30,10 +27,10 @@
{{$t('Failure Strategy')}}
</div>
<div class="cont">
<x-radio-group v-model="failureStrategy" style="margin-top: 7px;">
<x-radio :label="'CONTINUE'">{{$t('Continue')}}</x-radio>
<x-radio :label="'END'">{{$t('End')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="failureStrategy" style="margin-top: 7px;" size="small">
<el-radio :label="'CONTINUE'">{{$t('Continue')}}</el-radio>
<el-radio :label="'END'">{{$t('End')}}</el-radio>
</el-radio-group>
</div>
</div>
<div class="clearfix list" v-if="sourceType === 'contextmenu'" style="margin-top: -8px;">
@ -41,11 +38,11 @@
{{$t('Node execution')}}
</div>
<div class="cont" style="padding-top: 6px;">
<x-radio-group v-model="taskDependType">
<x-radio :label="'TASK_POST'">{{$t('Backward execution')}}</x-radio>
<x-radio :label="'TASK_PRE'">{{$t('Forward execution')}}</x-radio>
<x-radio :label="'TASK_ONLY'">{{$t('Execute only the current node')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="taskDependType" size="small">
<el-radio :label="'TASK_POST'">{{$t('Backward execution')}}</el-radio>
<el-radio :label="'TASK_PRE'">{{$t('Forward execution')}}</el-radio>
<el-radio :label="'TASK_ONLY'">{{$t('Execute only the current node')}}</el-radio>
</el-radio-group>
</div>
</div>
<div class="clearfix list">
@ -53,14 +50,14 @@
{{$t('Notification strategy')}}
</div>
<div class="cont">
<x-select style="width: 200px;" v-model="warningType">
<x-option
<el-select style="width: 200px;" v-model="warningType" size="small">
<el-option
v-for="city in warningTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</div>
<div class="clearfix list">
@ -84,21 +81,22 @@
{{$t('Notification group')}}
</div>
<div class="cont">
<x-select
style="width: 200px;"
v-model="warningGroupId"
:disabled="!notifyGroupList.length">
<x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
<em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
<em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></em>
</x-input>
<x-option
<el-select
style="width: 200px;"
size="small"
v-model="warningGroupId"
:disabled="!notifyGroupList.length">
<el-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" size="small" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
<em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
<em slot="suffix" class="el-icon-bottom" style="font-size: 12px;" v-show="!warningGroupId"></em>
</el-input>
<el-option
v-for="city in notifyGroupList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
</el-option>
</el-select>
</div>
</div>
<div class="clearfix list">
@ -123,7 +121,7 @@
</div>
<div class="cont">
<div style="padding-top: 6px;">
<x-checkbox v-model="execType">{{$t('Whether it is a complement process?')}}</x-checkbox>
<el-checkbox v-model="execType" size="small">{{$t('Whether it is a complement process?')}}</el-checkbox>
</div>
</div>
</div>
@ -133,10 +131,10 @@
{{$t('Mode of execution')}}
</div>
<div class="cont">
<x-radio-group v-model="runMode" style="margin-top: 7px;">
<x-radio :label="'RUN_MODE_SERIAL'">{{$t('Serial execution')}}</x-radio>
<x-radio :label="'RUN_MODE_PARALLEL'">{{$t('Parallel execution')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="runMode" style="margin-top: 7px;">
<el-radio :label="'RUN_MODE_SERIAL'">{{$t('Serial execution')}}</el-radio>
<el-radio :label="'RUN_MODE_PARALLEL'">{{$t('Parallel execution')}}</el-radio>
</el-radio-group>
</div>
</div>
<div class="clearfix list">
@ -144,22 +142,23 @@
{{$t('Schedule date')}}
</div>
<div class="cont">
<x-datepicker
style="width: 360px;"
:panel-num="2"
placement="bottom-start"
@on-change="_datepicker"
:value="scheduleTime"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
</x-datepicker>
<el-date-picker
style="width: 360px"
v-model="scheduleTime"
size="small"
@change="_datepicker"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
</div>
</template>
<div class="submit">
<x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Start')}} </x-button>
<el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
<el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Start')}} </el-button>
</div>
</div>
</template>
@ -197,7 +196,7 @@
}
},
props: {
item: Object,
startData: Object,
startNodeList: {
type: String,
default: ''
@ -211,7 +210,7 @@
_start () {
this.spinnerLoading = true
let param = {
processDefinitionId: this.item.id,
processDefinitionId: this.startData.id,
scheduleTime: this.scheduleTime.length && this.scheduleTime.join(',') || '',
failureStrategy: this.failureStrategy,
warningType: this.warningType,
@ -231,7 +230,7 @@
}
this.store.dispatch('dag/processStart', param).then(res => {
this.$message.success(res.msg)
this.$emit('onUpdate')
this.$emit('onUpdateStart')
setTimeout(() => {
this.spinnerLoading = false
this.close()
@ -250,7 +249,7 @@
})
},
_getReceiver () {
this.store.dispatch('dag/getReceiver', { processDefinitionId: this.item.id }).then(res => {
this.store.dispatch('dag/getReceiver', { processDefinitionId: this.startData.id }).then(res => {
this.receivers = res.receivers && res.receivers.split(',') || []
this.receiversCc = res.receiversCc && res.receiversCc.split(',') || []
})
@ -259,7 +258,7 @@
this._start()
},
close () {
this.$emit('close')
this.$emit('closeStart')
}
},
watch: {
@ -269,7 +268,7 @@
},
created () {
this.warningType = this.warningTypeList[0].id
this.workflowName = this.item.name
this.workflowName = this.startData.name
this._getReceiver()
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
@ -291,7 +290,7 @@
this.warningGroupId = ''
})
})
this.workflowName = this.item.name
this.workflowName = this.startData.name
},
computed: {},
components: { mEmail, mPriority, mWorkerGroups }

143
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue

@ -16,48 +16,48 @@
*/
<template>
<div class="timing-process-model">
<div class="title-box">
<span>{{$t('Set parameters before timing')}}</span>
</div>
<div class="clearfix list">
<div class="text">
{{$t('Start and stop time')}}
</div>
<div class="cont">
<x-datepicker
style="width: 360px;"
:panel-num="2"
placement="bottom-start"
@on-change="_datepicker"
:value="scheduleTime"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
</x-datepicker>
<el-date-picker
style="width: 360px"
v-model="scheduleTime"
size="small"
@change="_datepicker"
type="datetimerange"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
</div>
<div class="clearfix list">
<x-button type="info" style="margin-left:20px" shape="circle" :loading="spinnerLoading" @click="preview()">{{$t('Execute time')}}</x-button>
<el-button type="info" style="margin-left:20px" size="small" round :loading="spinnerLoading" @click="preview()">{{$t('Execute time')}}</el-button>
<div class="text">
{{$t('Timing')}}
</div>
<div class="cont">
<template>
<x-poptip :ref="'poptip'" placement="bottom-start">
<div class="crontab-box">
<v-crontab v-model="crontab" :locale="i18n"></v-crontab>
</div>
<el-popover
placement="bottom-start"
trigger="click">
<template slot="reference">
<x-input
<el-input
style="width: 360px;"
type="text"
size="small"
readonly
:value="crontab"
autocomplete="off">
</x-input>
:value="crontab">
</el-input>
</template>
</x-poptip>
<div class="crontab-box">
<v-crontab v-model="crontab" :locale="i18n"></v-crontab>
</div>
</el-popover>
</template>
</div>
</div>
@ -73,10 +73,10 @@
{{$t('Failure Strategy')}}
</div>
<div class="cont">
<x-radio-group v-model="failureStrategy" style="margin-top: 7px;">
<x-radio :label="'CONTINUE'">{{$t('Continue')}}</x-radio>
<x-radio :label="'END'">{{$t('End')}}</x-radio>
</x-radio-group>
<el-radio-group v-model="failureStrategy" style="margin-top: 7px;" size="small">
<el-radio :label="'CONTINUE'">{{$t('Continue')}}</el-radio>
<el-radio :label="'END'">{{$t('End')}}</el-radio>
</el-radio-group>
</div>
</div>
<div class="clearfix list">
@ -84,16 +84,17 @@
{{$t('Notification strategy')}}
</div>
<div class="cont">
<x-select
style="width: 200px;"
v-model="warningType">
<x-option
v-for="city in warningTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
<el-select
style="width: 200px;"
size="small"
v-model="warningType">
<el-option
v-for="city in warningTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
</el-option>
</el-select>
</div>
</div>
<div class="clearfix list">
@ -117,21 +118,22 @@
{{$t('Notification group')}}
</div>
<div class="cont">
<x-select
style="width: 200px;"
:disabled="!notifyGroupList.length"
v-model="warningGroupId">
<x-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
<em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
<em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
</x-input>
<x-option
v-for="city in notifyGroupList"
:key="city.id"
:value="city.id"
:label="city.code">
</x-option>
</x-select>
<el-select
style="width: 200px;"
size="small"
:disabled="!notifyGroupList.length"
v-model="warningGroupId">
<el-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
<em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
<em slot="suffix" class="el-icon-bottom" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
</el-input>
<el-option
v-for="city in notifyGroupList"
:key="city.id"
:value="city.id"
:label="city.code">
</el-option>
</el-select>
</div>
</div>
<div class="clearfix list">
@ -151,8 +153,8 @@
</div>
</div>
<div class="submit">
<x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : (item.crontab ? $t('Edit') : $t('Create'))}} </x-button>
<el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
<el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : (timingData.item.crontab ? $t('Edit') : $t('Create'))}} </el-button>
</div>
</div>
</template>
@ -191,10 +193,7 @@
}
},
props: {
item: Object,
receiversD: Array,
receiversCcD: Array,
type: String
timingData: Object
},
methods: {
_datepicker (val) {
@ -237,19 +236,19 @@
let msg = ''
// edit
if (this.item.crontab) {
if (this.timingData.item.crontab) {
api = 'dag/updateSchedule'
searchParams.id = this.item.id
searchParams.id = this.timingData.item.id
msg = `${i18n.$t('Edit')}${i18n.$t('success')},${i18n.$t('Please go online')}`
} else {
api = 'dag/createSchedule'
searchParams.processDefinitionId = this.item.id
searchParams.processDefinitionId = this.timingData.item.id
msg = `${i18n.$t('Create')}${i18n.$t('success')}`
}
this.store.dispatch(api, searchParams).then(res => {
this.$message.success(msg)
this.$emit('onUpdate')
this.$emit('onUpdateTiming')
}).catch(e => {
this.$message.error(e.msg || '')
})
@ -294,7 +293,7 @@
this._timing()
},
close () {
this.$emit('close')
this.$emit('closeTiming')
},
preview () {
this._preview()
@ -303,7 +302,7 @@
watch: {
},
created () {
if(this.item.workerGroup===undefined) {
if(this.timingData.item.workerGroup===undefined) {
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
if (stateWorkerGroupsList.length) {
this.workerGroup = stateWorkerGroupsList[0].id
@ -315,12 +314,12 @@
})
}
} else {
this.workerGroup = this.item.workerGroup
this.workerGroup = this.timingData.item.workerGroup
}
if(this.item.crontab !== null){
this.crontab = this.item.crontab
if(this.timingData.item.crontab !== null){
this.crontab = this.timingData.item.crontab
}
if(this.type == 'timing') {
if(this.timingData.type == 'timing') {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
@ -339,13 +338,13 @@
this.crontab = '0 0 * * * ? *'
this.scheduleTime = times
}
this.receivers = _.cloneDeep(this.receiversD)
this.receiversCc = _.cloneDeep(this.receiversCcD)
this.receivers = _.cloneDeep(this.timingData.receiversD)
this.receiversCc = _.cloneDeep(this.timingData.receiversCcD)
},
mounted () {
let item = this.item
let item = this.timingData.item
// Determine whether to echo
if (this.item.crontab) {
if (this.timingData.item.crontab) {
this.crontab = item.crontab
this.scheduleTime = [formatDate(item.startTime), formatDate(item.endTime)]
this.failureStrategy = item.failureStrategy

171
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue

@ -21,103 +21,69 @@
<span class="name">{{$t('Version Info')}}</span>
</div>
<div class="table-box" v-if="processDefinitionVersions.length > 0">
<table class="fixed">
<caption><!-- placeHolder --></caption>
<tr>
<th scope="col" style="min-width: 40px;text-align: left">
<span>{{$t('Version')}}</span>
</th>
<th scope="col" style="min-width: 30px">
<span>{{$t('Description')}}</span>
</th>
<th scope="col" style="min-width: 50px">
<span>{{$t('Create Time')}}</span>
</th>
<th scope="col" style="min-width: 300px">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in processDefinitionVersions" :key="item.id">
<td>
<span v-if="item.version">
<span v-if="item.version === processDefinition.version" style="color: green"><strong>{{item.version}} {{$t('Current Version')}}</strong></span>
<span v-else>{{item.version}}</span>
<div class="table-box" v-if="versionData.processDefinitionVersions.length > 0">
<el-table :data="versionData.processDefinitionVersions" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="userName" :label="$t('Version')">
<template slot-scope="scope">
<span v-if="scope.row.version">
<span v-if="scope.row.version === versionData.processDefinition.version" style="color: green"><strong>{{scope.row.version}} {{$t('Current Version')}}</strong></span>
<span v-else>{{scope.row.version}}</span>
</span>
<span v-else>-</span>
</td>
<td style="word-break:break-all;">
<span v-if="item.description">{{item.description}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.createTime">{{item.createTime}}</span>
<span v-else>-</span>
</td>
<td>
<x-poptip
:ref="'poptip-switch-version-' + $index"
placement="top-end"
width="260">
<p>{{$t('Confirm Switch To This Version?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeSwitchVersion($index)">
{{$t('Cancel')}}
</x-button>
<x-button type="primary" size="xsmall" shape="circle"
@click="_mVersionSwitchProcessDefinitionVersion(item)">{{$t('Confirm')}}
</x-button>
</div>
<template slot="reference">
<x-button
icon="ans-icon-dependence"
type="primary"
shape="circle"
size="xsmall"
:disabled="item.version === processDefinition.version || 'ONLINE' === processDefinition.state"
data-toggle="tooltip"
:title="$t('Switch To This Version')">
</x-button>
</template>
</x-poptip>
<x-poptip
:ref="'poptip-delete-' + $index"
placement="top-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}
</x-button>
<x-button type="primary" size="xsmall" shape="circle"
@click="_mVersionDeleteProcessDefinitionVersion(item,$index)">{{$t('Confirm')}}
</x-button>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
:disabled="item.version === processDefinition.version || 'ONLINE' === processDefinition.state"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
</template>
</el-table-column>
<el-table-column prop="description" :label="$t('Description')"></el-table-column>
<el-table-column :label="$t('Create Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.createTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="100">
<template slot-scope="scope">
<el-tooltip :content="$t('Switch To This Version')" placement="top">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Confirm Switch To This Version?')"
@onConfirm="_mVersionSwitchProcessDefinitionVersion(scope.row)"
>
<el-button type="primary" size="mini" icon="el-icon-warning" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_mVersionDeleteProcessDefinitionVersion(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="processDefinitionVersions.length === 0">
<div v-if="versionData.processDefinitionVersions.length === 0">
<m-no-data><!----></m-no-data>
</div>
<div v-if="processDefinitionVersions.length > 0">
<div v-if="versionData.processDefinitionVersions.length > 0">
<div class="bottom-box">
<x-button type="text" @click="_close()"> {{$t('Cancel')}}</x-button>
<x-page :current="pageNo" :total="total" @on-change="_mVersionGetProcessDefinitionVersionsPage" small>
<!----></x-page>
<el-pagination
style="float:right"
background
@current-change="_mVersionGetProcessDefinitionVersionsPage"
layout="prev, pager, next"
:total="versionData.total">
</el-pagination>
<el-button type="text" size="mini" @click="_close()" style="float:right">{{$t('Cancel')}}</el-button>
</div>
</div>
@ -144,11 +110,7 @@
}
},
props: {
processDefinition: Object,
processDefinitionVersions: Array,
total: Number,
pageNo: Number,
pageSize: Number
versionData: Object
},
methods: {
/**
@ -157,7 +119,7 @@
_mVersionSwitchProcessDefinitionVersion (item) {
this.$emit('mVersionSwitchProcessDefinitionVersion', {
version: item.version,
processDefinitionId: this.processDefinition.id,
processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
@ -168,7 +130,7 @@
_mVersionDeleteProcessDefinitionVersion (item) {
this.$emit('mVersionDeleteProcessDefinitionVersion', {
version: item.version,
processDefinitionId: this.processDefinition.id,
processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
@ -180,25 +142,10 @@
this.$emit('mVersionGetProcessDefinitionVersionsPage', {
pageNo: val,
pageSize: this.pageSize,
processDefinitionId: this.processDefinition.id,
processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
/**
* Close the switch version layer
*/
_closeSwitchVersion (i) {
this.$refs[`poptip-switch-version-${i}`][0].doClose()
},
/**
* Close the delete layer
*/
_closeDelete (i) {
this.$refs[`poptip-delete-${i}`][0].doClose()
},
/**
* Close and destroy component and component internal events
*/

17
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue

@ -20,8 +20,8 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
<x-button type="ghost" size="small" @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button>
<x-button type="ghost" size="small" @click="_uploading">{{$t('Import process')}}</x-button>
<el-button size="mini" @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</el-button>
<el-button size="mini" @click="_uploading">{{$t('Import process')}}</el-button>
</template>
</m-conditions>
</template>
@ -29,7 +29,16 @@
<template v-if="processListP.length || total>0">
<m-list :process-list="processListP" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!processListP.length && total<=0">
@ -138,7 +147,7 @@
localStore.removeItem('subProcessId')
},
mounted() {
this.$modal.destroy()
},
beforeDestroy () {
sessionStorage.setItem('isLeft',1)

24
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue

@ -18,29 +18,29 @@
<m-list-construction :title="$t('TreeView')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
<em class="ans-icon-fail-empty" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
<em class="el-icon-back" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
</span>
</template>
<template slot="conditions"></template>
<template slot="content">
<div class="tree-view-index-model">
<div class="tree-limit-select">
<x-select v-model="limit" style="width: 70px;" @on-change="_onChangeSelect">
<x-option
<el-select v-model="limit" style="width: 70px;" @change="_onChangeSelect" size="small">
<el-option
v-for="city in [{value:25},{value:50},{value:75},{value:100}]"
:key="city.value"
:value="city.value"
:label="city.value">
</x-option>
</x-select>
<x-button
</el-option>
</el-select>
<el-button
@click="_rtTasksDag"
v-if="$route.query.subProcessIds"
type="primary"
size="default"
icon="ans-icon-arrow-to-left">
size="small"
icon="el-icon-d-arrow-left">
{{$t('Return_1')}}
</x-button>
</el-button>
</div>
<div class="tasks-color">
<div class="toolbar-color-sp">
@ -48,7 +48,7 @@
<span>Node Type</span>
</a>
<a href="javascript:" v-for="(k,v) in tasksType" :key="v">
<em class="ans-icon-circle-solid" :style="{color:k.color}"></em>
<em class="el-icon-user-solid" :style="{color:k.color}"></em>
<span>{{v}}</span>
</a>
</div>
@ -57,7 +57,7 @@
<span>{{$t('Task Status')}}</span>
</a>
<a href="javascript:" v-for="(item) in tasksState" :key="item.id">
<em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
<em class="fa fa-square" :style="{color:item.color}"></em>
<span>{{item.desc}}</span>
</a>
</div>
@ -189,7 +189,7 @@
this.$router.push({ path: `/projects/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
},
_onChangeSelect (o) {
this.limit = o.value
this.limit = o
this._getViewTree()
}
},

240
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue

@ -22,125 +22,74 @@
<div class="list-model" v-if="!isLoading">
<template v-if="list.length">
<div class="table-box">
<table>
<tr>
<th>
<span>{{$t('#')}}</span>
</th>
<th>
<span>{{$t('Process Name')}}</span>
</th>
<th>
<span>{{$t('Start Time')}}</span>
</th>
<th>
<span>{{$t('End Time')}}</span>
</th>
<th>
<span>{{$t('crontab')}}</span>
</th>
<th>
<span>{{$t('Failure Strategy')}}</span>
</th>
<th>
<span>{{$t('State')}}</span>
</th>
<th>
<span>{{$t('Create Time')}}</span>
</th>
<th>
<span>{{$t('Update Time')}}</span>
</th>
<th width="120">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span><a href="javascript:">{{item.processDefinitionName}}</a></span>
</td>
<td>
<span>{{item.startTime | formatDate}}</span>
</td>
<td>
<span>{{item.endTime | formatDate}}</span>
</td>
<td>
<span>{{item.crontab}}</span>
</td>
<td>
<span>{{item.failureStrategy}}</span>
</td>
<td>
<span>{{_rtReleaseState(item.releaseState)}}</span>
</td>
<td>
<span>{{item.createTime | formatDate}}</span>
</td>
<td>
<span>{{item.updateTime | formatDate}}</span>
</td>
<td>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
@click="_editTiming(item)"
icon="ans-icon-edit"
:disabled="item.releaseState === 'ONLINE'" >
</x-button>
<x-button
type="warning"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('online')"
@click="_online(item)"
icon="ans-icon-upward"
v-if="item.releaseState === 'OFFLINE'">
</x-button>
<x-button
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('offline')"
icon="ans-icon-downward"
@click="_offline(item)"
v-if="item.releaseState === 'ONLINE'">
</x-button>
<x-poptip
:ref="'poptip-delete-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
:disabled="item.releaseState === 'ONLINE'"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="processDefinitionName" :label="$t('Process Name')"></el-table-column>
<el-table-column :label="$t('Start Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.startTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('End Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.endTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column prop="crontab" :label="$t('crontab')"></el-table-column>
<el-table-column prop="failureStrategy" :label="$t('Failure Strategy')"></el-table-column>
<el-table-column :label="$t('State')">
<template slot-scope="scope">
<span>{{_rtReleaseState(scope.row.releaseState)}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Create Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.createTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="120">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top">
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.releaseState === 'ONLINE'" @click="_editTiming(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('online')" placement="top" v-if="scope.row.releaseState === 'OFFLINE'">
<span><el-button type="warning" size="mini" icon="el-icon-upload2" @click="_online(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('offline')" placement="top" v-if="scope.row.releaseState === 'ONLINE'">
<span><el-button type="danger" size="mini" icon="el-icon-download" @click="_offline(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-box">
<x-page :current="pageNo" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="pageSize"
:current-page.sync="pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!list.length">
@ -148,6 +97,12 @@
</template>
</div>
<m-spin :is-spin="isLoading"></m-spin>
<el-dialog
:title="$t('Set parameters before timing')"
:visible.sync="timingDialog"
width="65%">
<m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
</el-dialog>
</div>
</template>
<script>
@ -166,7 +121,13 @@
total: null,
pageNo: 1,
pageSize: 10,
list: []
list: [],
timingDialog: false,
timingData: {
item: {},
receiversD: [],
receiversCcD: []
}
}
},
props: {
@ -285,43 +246,28 @@
* timing
*/
_editTiming (item) {
let self = this
this._getReceiver(item.processDefinitionId).then(res => {
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mTiming, {
on: {
onUpdate () {
self.pageNo = 1
self._getScheduleList('false')
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item,
receiversD: res.receivers,
receiversCcD: res.receiversCc
}
})
}
})
this.timingData.item = item
this.timingData.receiversD = res.receivers
this.timingData.receiversCcD = res.receiversCc
this.timingDialog = true
})
}
},
onUpdateTiming () {
this.pageNo = 1
this._getScheduleList('false')
this.timingDialog = false
},
closeTiming () {
this.timingDialog = false
},
},
watch: {},
created () {
this._getScheduleList()
},
mounted () {},
components: { mSpin, mNoData }
components: { mSpin, mNoData, mTiming }
}
</script>

2
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue

@ -18,7 +18,7 @@
<m-list-construction :title="$t('Cron Manage')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
<em class="ans-icon-fail-empty" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
<em class="el-icon-circle-close" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
</span>
</template>
<template slot="content">

26
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue

@ -19,15 +19,16 @@
<template slot="content">
<div class="perject-home-content">
<div class="time-model">
<x-datepicker
:panel-num="2"
placement="bottom-end"
@on-change="_datepicker"
:value="[searchParams.startDate,searchParams.endDate]"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
</x-datepicker>
<el-date-picker
v-model="dataTime"
type="datetimerange"
size="small"
@change="_datepicker"
range-separator="-"
:start-placeholder="$t('startDate')"
:end-placeholder="$t('endDate')"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<div class="row" >
<div class="col-md-6">
@ -83,7 +84,8 @@
projectId: null,
startDate: '',
endDate: ''
}
},
dataTime: [],
}
},
props: {
@ -97,8 +99,8 @@
},
created () {
this.searchParams.projectId = this.id === 0 ? 0 : localStore.getItem('projectId')
this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
this.dataTime[0] = dayjs().format('YYYY-MM-DD 00:00:00')
this.dataTime[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
},
components: {
mSecondaryMenu,

2
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue

@ -24,7 +24,7 @@
<span>{{$t('Task Status')}}</span>
</a>
<a href="javascript:" v-for="(item) in tasksState" :key="item.id">
<em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
<em class="fa fa-square" :style="{color:item.color}"></em>
<span>{{item.desc}}</span>
</a>
</div>

487
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@ -17,289 +17,206 @@
<template>
<div class="list-model" style="position: relative;">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col" style="min-width: 50px">
<x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
</th>
<th scope="col" style="min-width: 30px">
<span>{{$t('#')}}</span>
</th>
<th scope="col" style="min-width: 200px;max-width: 300px;">
<span>{{$t('Process Name')}}</span>
</th>
<th scope="col" style="min-width: 30px">
<span>{{$t('State')}}</span>
</th>
<th scope="col" style="min-width: 70px">
<span>{{$t('Run Type')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Scheduling Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Start Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('End Time')}}</span>
</th>
<th scope="col" style="min-width: 60px">
<span>{{$t('Duration')}}s</span>
</th>
<th scope="col" style="min-width: 60px">
<span>{{$t('Run Times')}}</span>
</th>
<th scope="col" style="min-width: 55px">
<span>{{$t('fault-tolerant sign')}}</span>
</th>
<th scope="col" style="min-width: 135px">
<span>{{$t('Executor')}}</span>
</th>
<th scope="col" style="min-width: 100px">
<div style="width: 100px">
<span>{{$t('host')}}</span>
</div>
</th>
<th scope="col" style="min-width: 210px">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td width="50"><x-checkbox v-model="item.isCheck" @on-change="_arrDelChange"></x-checkbox></td>
<td width="50">
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
<span class="ellipsis" style="padding-left: 4px;"><router-link :to="{ path: '/projects/instance/list/' + item.id , query:{id: item.processDefinitionId}}" tag="a" class="links" :title="item.name">{{item.name}}</router-link></span>
</td>
<td>
<span v-html="_rtState(item.state)" style="cursor: pointer;"></span>
</td>
<td><span>{{_rtRunningType(item.commandType)}}</span></td>
<td>
<span v-if="item.scheduleTime">{{item.scheduleTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.startTime">{{item.startTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.endTime">{{item.endTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td width="70"><span>{{item.duration || '-'}}</span></td>
<td width="70"><span>{{item.runTimes}}</span></td>
<td><span>{{item.recovery}}</span></td>
<td>
<span v-if="item.executorName">{{item.executorName}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.host" style="word-break: break-all">{{item.host}}</span>
<el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Process Name')" min-width="200">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.name }}</p>
<div slot="reference" class="name-wrapper">
<router-link :to="{ path: '/projects/instance/list/' + scope.row.id , query:{id: scope.row.processDefinitionId}}" tag="a" class="links" :title="scope.row.name">{{scope.row.name}}</router-link>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$t('State')" width="50">
<template slot-scope="scope">
<span v-html="_rtState(scope.row.state)" style="cursor: pointer;"></span>
</template>
</el-table-column>
<el-table-column :label="$t('Run Type')">
<template slot-scope="scope">
{{_rtRunningType(scope.row.commandType)}}
</template>
</el-table-column>
<el-table-column :label="$t('Scheduling Time')" width="135">
<template slot-scope="scope">
<span v-if="scope.row.scheduleTime">{{scope.row.scheduleTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td style="z-index: inherit;">
<div v-show="item.disabled">
<x-button type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
@click="_reEdit(item)"
icon="ans-icon-edit"
:disabled="item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP'"></x-button>
<x-button type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Rerun')"
@click="_reRun(item,$index)"
icon="ans-icon-refresh"
:disabled="item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP'"></x-button>
<x-button type="success"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Recovery Failed')"
@click="_restore(item,$index)"
icon="ans-icon-fail-empty"
:disabled="item.state !== 'FAILURE'"></x-button>
<x-button type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="item.state === 'STOP' ? $t('Recovery Suspend') : $t('Stop')"
@click="_stop(item,$index)"
:icon="item.state === 'STOP' ? 'ans-icon-pause-solid' : 'ans-icon-stop'"
:disabled="item.state !== 'RUNNING_EXECUTION' && item.state != 'STOP'"></x-button>
<x-button type="warning"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="item.state === 'PAUSE' ? $t('Recovery Suspend') : $t('Pause')"
@click="_suspend(item,$index)"
:icon="item.state === 'PAUSE' ? 'ans-icon-pause-solid' : 'ans-icon-pause'"
:disabled="item.state !== 'RUNNING_EXECUTION' && item.state !== 'PAUSE'"></x-button>
<x-poptip
:ref="'poptip-delete-' + $index"
placement="top-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:disabled="item.state !== 'SUCCESS' && item.state !== 'FAILURE' && item.state !== 'STOP' && item.state !== 'PAUSE'"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
<x-button type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Gantt')"
@click="_gantt(item)"
icon="ans-icon-gantt">
</x-button>
</template>
</el-table-column>
<el-table-column :label="$t('Start Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.startTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('End Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.endTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column prop="duration" :label="$t('Duration')"></el-table-column>
<el-table-column prop="runTimes" :label="$t('Run Times')"></el-table-column>
<el-table-column prop="recovery" :label="$t('fault-tolerant sign')"></el-table-column>
<el-table-column prop="executorName" :label="$t('Executor')"></el-table-column>
<el-table-column prop="host" :label="$t('host')" width="150"></el-table-column>
<el-table-column :label="$t('Operation')" width="240" fixed="right">
<template slot-scope="scope">
<div v-show="scope.row.disabled">
<el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
<span>
<el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'" @click="_reEdit(scope.row)" circle></el-button>
</span>
</el-tooltip>
<el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'" icon="el-icon-refresh" @click="_reRun(scope.row,scope.$index)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Recovery Failed')" placement="top" :enterable="false">
<span>
<el-button type="success" size="mini" icon="el-icon-circle-close" :disabled="scope.row.state !== 'FAILURE'" @click="_restore(scope.row,scope.$index)" circle></el-button>
</span>
</el-tooltip>
<el-tooltip :content="scope.row.state === 'STOP' ? $t('Recovery Suspend') : $t('Stop')" placement="top" :enterable="false">
<span><el-button type="warning" size="mini" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state != 'STOP'" :icon="scope.row.state === 'STOP' ? 'el-icon-video-play' : 'el-icon-close'" @click="_stop(scope.row,scope.$index)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="scope.row.state === 'PAUSE' ? $t('Recovery Suspend') : $t('Pause')" placement="top" :enterable="false">
<span><el-button type="error" size="mini" :icon="scope.row.state === 'PAUSE' ? 'el-icon-video-play' : 'el-icon-video-pause'" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'PAUSE'" @click="_suspend(scope.row,scope.$index)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)">
<el-button type="danger" size="mini" icon="el-icon-delete" :disabled="scope.row.releaseState === 'ONLINE'" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
<el-tooltip :content="$t('Gantt')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-s-operation" @click="_gantt(scope.row)" circle></el-button></span>
</el-tooltip>
</div>
<div v-show="!item.disabled">
<div v-show="!scope.row.disabled">
<!--Edit-->
<x-button
<el-button
type="info"
shape="circle"
size="xsmall"
icon="ans-icon-edit"
disabled="true">
</x-button>
size="mini"
icon="el-icon-edit-outline"
disabled="true"
circle>
</el-button>
<!--Rerun-->
<x-button
v-show="buttonType === 'run'"
type="info"
shape="circle"
size="xsmall"
disabled="true">
{{item.count}}
</x-button>
<x-button
<el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
<span>
<el-button
v-show="buttonType === 'run'"
type="info"
size="mini"
disabled="true"
circle>
<span style="padding: 0 2px">{{scope.row.count}}</span>
</el-button>
</span>
</el-tooltip>
<el-button
v-show="buttonType !== 'run'"
type="info"
shape="circle"
size="xsmall"
icon="ans-icon-refresh"
disabled="true">
</x-button>
size="mini"
icon="el-icon-refresh"
disabled="true"
circle>
</el-button>
<!--Recovery Failed-->
<x-button
v-show="buttonType === 'store'"
type="success"
shape="circle"
size="xsmall"
disabled="true">
{{item.count}}
</x-button>
<x-button
v-show="buttonType !== 'store'"
type="success"
shape="circle"
size="xsmall"
icon="ans-icon-fail-empty"
disabled="true">
</x-button>
<span>
<el-button
v-show="buttonType === 'store'"
type="success"
size="mini"
circle
disabled="true">
<span style="padding: 0 3px">{{scope.row.count}}</span>
</el-button>
</span>
<el-button
v-show="buttonType !== 'store'"
type="success"
size="mini"
circle
icon="el-icon-circle-close"
disabled="true">
</el-button>
<!--Stop-->
<!--<x-button-->
<!--type="error"-->
<!--shape="circle"-->
<!--size="xsmall"-->
<!--icon="ans-icon-pause"-->
<!--disabled="true">-->
<!--</x-button>-->
<!--倒计时 => Recovery Suspend/Pause-->
<x-button
v-show="(item.state === 'PAUSE' || item.state == 'STOP') && buttonType === 'suspend'"
type="warning"
shape="circle"
size="xsmall"
disabled="true">
{{item.count}}
</x-button>
<!--Recovery Suspend/Pause-->
<span>
<el-button
style="padding: 0 3px"
v-show="(scope.row.state === 'PAUSE' || scope.row.state == 'STOP') && buttonType === 'suspend'"
type="warning"
size="mini"
circle
disabled="true">
{{scope.row.count}}
</el-button>
</span>
<!--Recovery Suspend-->
<x-button
v-show="(item.state === 'PAUSE' || item.state == 'STOP') && buttonType !== 'suspend'"
type="warning"
shape="circle"
size="xsmall"
icon="ans-icon-pause-solid"
disabled="true">
</x-button>
<el-button
v-show="(scope.row.state === 'PAUSE' || scope.row.state == 'STOP') && buttonType !== 'suspend'"
type="warning"
size="mini"
circle
icon="el-icon-video-play"
disabled="true">
</el-button>
<!--Pause-->
<x-button
v-show="item.state !== 'PAUSE'"
type="warning"
shape="circle"
size="xsmall"
icon="ans-icon-stop"
disabled="true">
</x-button>
<!--Stop-->
<x-button
v-show="item.state !== 'STOP'"
type="warning"
shape="circle"
size="xsmall"
icon="ans-icon-pause"
disabled="true">
</x-button>
<span>
<el-button
v-show="scope.row.state !== 'PAUSE'"
type="warning"
size="mini"
circle
icon="el-icon-close"
disabled="true">
</el-button>
</span>
<!--delete-->
<x-button
type="error"
shape="circle"
size="xsmall"
icon="ans-icon-trash"
:disabled="true">
</x-button>
<el-button
type="danger"
circle
size="mini"
icon="el-icon-delete"
:disabled="true">
</el-button>
<!--Gantt-->
<x-button
type="info"
shape="circle"
size="xsmall"
icon="ans-icon-gantt"
disabled="true">
</x-button>
<el-button
type="success"
circle
size="mini"
icon="el-icon-s-operation"
disabled="true">
</el-button>
</div>
</td>
</tr>
</table>
</template>
</el-table-column>
</el-table>
</div>
<x-poptip
ref="poptipDeleteAll"
placement="bottom-start"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete(-1)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete({},-1)">{{$t('Confirm')}}</x-button>
</div>
<template slot="reference">
<x-button size="xsmall" :disabled="!strDelete" style="position: absolute; bottom: -48px; left: 22px;" >{{$t('Delete')}}</x-button>
</template>
</x-poptip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
:title="$t('Delete?')"
@onConfirm="_delete({},-1)"
>
<el-button style="position: absolute; bottom: -48px; left: 19px;" type="primary" size="mini" :disabled="!strDelete" slot="reference">{{$t('Delete')}}</el-button>
</el-popconfirm>
</el-tooltip>
</div>
</template>
<script>
@ -337,19 +254,7 @@
*/
_rtState (code) {
let o = tasksState[code]
return `<em class="ansfont ${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
},
/**
* Close the delete layer
*/
_closeDelete (i) {
// close batch
if (i < 0) {
this.$refs['poptipDeleteAll'].doClose()
return
}
// close one
this.$refs[`poptip-delete-${i}`][0].doClose()
return `<em class="fa ansfont ${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
},
/**
* delete
@ -364,11 +269,9 @@
this.deleteInstance({
processInstanceId: item.id
}).then(res => {
this.$refs[`poptip-delete-${i}`][0].doClose()
this._onUpdate()
this.$message.success(res.msg)
}).catch(e => {
this.$refs[`poptip-delete-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
@ -383,6 +286,7 @@
* @param REPEAT_RUNNING
*/
_reRun (item, index) {
console.log(index)
this._countDownFn({
id: item.id,
executeType: 'REPEAT_RUNNING',
@ -525,20 +429,25 @@
})
this._arrDelChange()
},
// _arrDelChange (v) {
// let arr = []
// this.list.forEach((item)=>{
// if (item.isCheck) {
// arr.push(item.id)
// }
// })
// this.strDelete = _.join(arr, ',')
// if (v === false) {
// this.checkAll = false
// }
// },
_arrDelChange (v) {
let arr = []
this.list.forEach((item)=>{
if (item.isCheck) {
arr.push(item.id)
}
})
arr = _.map(v, 'id');
console.log(arr)
this.strDelete = _.join(arr, ',')
if (v === false) {
this.checkAll = false
}
},
_batchDelete () {
this.$refs['poptipDeleteAll'].doClose()
this.batchDeleteInstance({
processInstanceIds: this.strDelete
}).then(res => {

12
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue

@ -25,7 +25,16 @@
<m-list :process-instance-list="processInstanceList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!processInstanceList.length && total<=0">
@ -182,7 +191,6 @@
}
},
mounted () {
this.$modal.destroy()
// Cycle acquisition status
this.setIntervalP = setInterval(() => {
this._debounceGET('false')

53
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js

@ -14,29 +14,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import _ from 'lodash';
import _ from 'lodash'
import i18n from '@/module/i18n/index.js'
const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, id }, sourceWorkFlowId) => {
if (id === sourceWorkFlowId) return categoryDic['active']
if (id === sourceWorkFlowId) return categoryDic.active
switch (true) {
case workFlowPublishStatus === '0':
return categoryDic['0'];
return categoryDic['0']
case workFlowPublishStatus === '1' && schedulePublishStatus === '0':
return categoryDic['10'];
return categoryDic['10']
case workFlowPublishStatus === '1' && schedulePublishStatus === '1':
default:
return categoryDic['1'];
return categoryDic['1']
}
}
export default function (locations, links, sourceWorkFlowId, isShowLabel) {
const categoryDic = {
'active': { color: '#2D8DF0', category: i18n.$t('KinshipStateActive')},
'1': { color: '#00C800', category: i18n.$t('KinshipState1')},
'0': { color: '#999999', category: i18n.$t('KinshipState0')},
'10': { color: '#FF8F05', category: i18n.$t('KinshipState10')},
active: { color: '#2D8DF0', category: i18n.$t('KinshipStateActive') },
1: { color: '#00C800', category: i18n.$t('KinshipState1') },
0: { color: '#999999', category: i18n.$t('KinshipState0') },
10: { color: '#FF8F05', category: i18n.$t('KinshipState10') }
}
const newData = _.map(locations, (item) => {
const { color, category } = getCategory(categoryDic, item, sourceWorkFlowId)
@ -45,27 +44,27 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
emphasis: {
itemStyle: {
color
},
}
},
category
}
});
})
const categories = [
{ name: categoryDic.active.category},
{ name: categoryDic['1'].category},
{ name: categoryDic['0'].category},
{ name: categoryDic['10'].category},
{ name: categoryDic.active.category },
{ name: categoryDic['1'].category },
{ name: categoryDic['0'].category },
{ name: categoryDic['10'].category }
]
let option = {
const option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
backgroundColor: '#2D303A',
padding: [8, 12],
formatter: (params) => {
if (!params.data.name) return '';
const { name, scheduleStartTime, scheduleEndTime, crontab, workFlowPublishStatus, schedulePublishStatus } = params.data;
if (!params.data.name) return ''
const { name, scheduleStartTime, scheduleEndTime, crontab, workFlowPublishStatus, schedulePublishStatus } = params.data
const str = `
工作流名字${name}<br/>
调度开始时间${scheduleStartTime}<br/>
@ -74,7 +73,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
工作流发布状态${workFlowPublishStatus}<br/>
调度发布状态${schedulePublishStatus}<br/>
`
return str;
return str
},
color: '#2D303A',
textStyle: {
@ -85,16 +84,16 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
lineHeight: 12,
align: 'left',
padding: [4, 4, 4, 4]
},
}
}
},
}
},
color: [categoryDic.active.color, categoryDic['1'].color, categoryDic['0'].color, categoryDic['10'].color],
legend: [{
orient: 'horizontal',
top: 6,
left: 6,
data: categories,
data: categories
}],
series: [{
type: 'graph',
@ -111,9 +110,9 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
show: isShowLabel,
position: 'inside',
formatter: (params) => {
if (!params.data.name) return '';
if (!params.data.name) return ''
const str = params.data.name.split('_').map(item => `{a|${item}\n}`).join('')
return str;
return str
},
color: '#222222',
textStyle: {
@ -124,7 +123,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
lineHeight: 12,
align: 'left',
padding: [4, 4, 4, 4]
},
}
}
}
},
@ -139,7 +138,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
color: '#999999'
}
}]
};
}
return option
}

26
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue

@ -18,33 +18,33 @@
<div class="home-main index-model">
<div class="project-kinship-content">
<div class="search-bar">
<x-select filterable clearable
<el-select filterable clearable
:placeholder="$t('Process Name')"
@on-change="onChange"
@change="onChange"
:style="inputFocusStyle"
v-tooltip="tooltipOption(currentItemName)"
size="small">
<x-option
<el-option
v-for="work in workList"
:key="work.id"
:value="work.id"
:label="work.name"
v-tooltip="tooltipOption(work.name)"
>
</x-option>
</x-select>
<x-button type="primary"
icon="ans-icon-dot-circle"
size="small"
</el-option>
</el-select>
<el-button type="primary"
icon="fa-dot-circle-o"
size="mini"
v-tooltip.small.top.start="$t('Reset')"
@click="reset"
></x-button>
<x-button type="ghost"
icon="ans-icon-eye"
size="small"
></el-button>
<el-button
icon="el-icon-view"
size="mini"
v-tooltip.small.top="$t('Dag label display control')"
@click="changeLabel"
></x-button>
></el-button>
</div>
<graph-grid v-if="!isLoading && !!locations.length" :isShowLabel="isShowLabel"></graph-grid>
<template v-if="!isLoading && !locations.length">

24
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue

@ -21,24 +21,24 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="projectName"
maxlength="60"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
</div>
@ -83,8 +83,12 @@
this.$refs['popup'].spinnerLoading = true
this.store.dispatch(`projects/${this.item ? 'updateProjects' : 'createProjects'}`, param).then(res => {
this.$emit('onUpdate')
this.$message.success(res.msg)
this.$emit('_onUpdate')
this.$message({
message: res.msg,
type: 'success',
offset: 70
});
setTimeout(() => {
this.$refs['popup'].spinnerLoading = false
}, 800)

142
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue

@ -17,99 +17,52 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col">
<span>{{$t('#')}}</span>
</th>
<th scope="col">
<span>{{$t('Project Name')}}</span>
</th>
<th scope="col">
<span>{{$t('Owned Users')}}</span>
</th>
<th scope="col">
<span>{{$t('Process Define Count')}}</span>
</th>
<th scope="col">
<span>{{$t('Process Instance Running Count')}}</span>
</th>
<th scope="col">
<span>{{$t('Description')}}</span>
</th>
<th scope="col">
<span>{{$t('Create Time')}}</span>
</th>
<th scope="col">
<span>{{$t('Update Time')}}</span>
</th>
<th scope="col" width="80">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="$index">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span>
<a href="javascript:" @click="_switchProjects(item)" class="links">{{item.name}}</a>
</span>
</td>
<td>
<span>{{item.userName || '-'}}</span>
</td>
<td>
<span>{{item.defCount}}</span>
</td>
<td>
<span>{{item.instRunningCount}}</span>
</td>
<td>
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.createTime">{{item.createTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
@click="_edit(item)"
icon="ans-icon-edit">
</x-button>
<x-poptip
:ref="'poptip-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Project Name')">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.name }}</p>
<div slot="reference" class="name-wrapper">
<a href="javascript:" class="links" @click="_switchProjects(scope.row)">{{ scope.row.name }}</a>
</div>
<template slot="reference">
<x-button
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('delete')"
icon="ans-icon-trash">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="userName" :label="$t('Owned Users')"></el-table-column>
<el-table-column prop="defCount" :label="$t('Process Define Count')"></el-table-column>
<el-table-column prop="instRunningCount" :label="$t('Process Instance Running Count')"></el-table-column>
<el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
<el-table-column :label="$t('Create Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.createTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="150">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
@ -139,9 +92,6 @@
localStore.setItem('projectId', `${item.id}`)
this.$router.push({ path: `/projects/index` })
},
_closeDelete (i) {
this.$refs[`poptip-${i}`][0].doClose()
},
/**
* Delete Project
* @param item Current record
@ -151,11 +101,9 @@
this.deleteProjects({
projectId: item.id
}).then(res => {
this.$refs[`poptip-${i}`][0].doClose()
this.$emit('on-update')
this.$message.success(res.msg)
}).catch(e => {
this.$refs[`poptip-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},

47
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue

@ -19,7 +19,12 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
<x-button type="ghost" size="small" @click="_create('')">{{$t('Create Project')}}</x-button>
<el-button size="mini" @click="_create('')">{{$t('Create Project')}}</el-button>
<el-dialog
:visible.sync="createProjectDialog"
width="40%">
<m-create-project :item="item" @_onUpdate="_onUpdate"></m-create-project>
</el-dialog>
</template>
</m-conditions>
</template>
@ -27,7 +32,16 @@
<template v-if="projectsList.length || total>0">
<m-list :projects-list="projectsList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!projectsList.length && total<=0">
@ -60,7 +74,9 @@
pageSize: 10,
pageNo: 1,
searchVal: ''
}
},
createProjectDialog: false,
item: {}
}
},
mixins: [listUrlParamHandle],
@ -82,29 +98,11 @@
this.searchParams.pageSize = val
},
_create (item) {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mCreateProject, {
on: {
onUpdate () {
self._debounceGET()
modal.remove()
}
},
props: {
item: item
}
})
}
})
this.createProjectDialog = true
this.item = item
},
_onUpdate () {
this.createProjectDialog = false
this._debounceGET()
},
_getList (flag) {
@ -133,7 +131,6 @@
created () {
},
mounted () {
this.$modal.destroy()
},
components: { mListConstruction, mSpin, mConditions, mList, mCreateProject, mNoData }
}

196
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue

@ -17,104 +17,66 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col" style="min-width: 50px">
<span>{{$t('#')}}</span>
</th>
<th scope="col" style="min-width: 200px;max-width: 300px;">
<span>{{$t('Name')}}</span>
</th>
<th scope="col" style="min-width: 200px;max-width: 300px;">
<span>{{$t('Process Instance')}}</span>
</th>
<th scope="col" style="min-width: 60px">
<span>{{$t('Executor')}}</span>
</th>
<th scope="col" style="min-width: 70px">
<span style="margin-left: 5px">{{$t('Node Type')}}</span>
</th>
<th scope="col" style="min-width: 30px">
<span>{{$t('State')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Submit Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('Start Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('End Time')}}</span>
</th>
<th scope="col" style="min-width: 130px">
<span>{{$t('host')}}</span>
</th>
<th scope="col" style="min-width: 70px">
<span>{{$t('Duration')}}(s)</span>
</th>
<th scope="col" style="min-width: 60px">
<div style="width: 50px">
<span>{{$t('Retry Count')}}</span>
</div>
</th>
<th scope="col" style="min-width: 60px">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
<span class="ellipsis" :title="item.name">{{item.name}}</span>
</td>
<td style="min-width: 200px;max-width: 300px;padding-right: 10px;"><a href="javascript:" class="links" @click="_go(item)"><span class="ellipsis" :title="item.processInstanceName">{{item.processInstanceName}}</span></a></td>
<td>
<span v-if="item.executorName">{{item.executorName}}</span>
<span v-else>-</span>
</td>
<td><span style="margin-left: 5px">{{item.taskType}}</span></td>
<td><span v-html="_rtState(item.state)" style="cursor: pointer;"></span></td>
<td>
<span v-if="item.submitTime">{{item.submitTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.startTime">{{item.startTime | formatDate}}</span>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column prop="name" :label="$t('Name')"></el-table-column>
<el-table-column :label="$t('Process Instance')" min-width="200">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.processInstanceName }}</p>
<div slot="reference" class="name-wrapper">
<a href="javascript:" class="links" @click="_go(scope.row)"><span class="ellipsis" :title="scope.row.processInstanceName">{{scope.row.processInstanceName}}</span></a>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="executorName" :label="$t('Executor')"></el-table-column>
<el-table-column prop="taskType" :label="$t('Node Type')"></el-table-column>
<el-table-column :label="$t('State')" width="50">
<template slot-scope="scope">
<span v-html="_rtState(scope.row.state)" style="cursor: pointer;"></span>
</template>
</el-table-column>
<el-table-column :label="$t('Submit Time')" width="135">
<template slot-scope="scope">
<span v-if="scope.row.scheduleTime">{{scope.row.scheduleTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<span v-if="item.endTime">{{item.endTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td><span>{{item.host || '-'}}</span></td>
<td><span>{{item.duration}}</span></td>
<td><span>{{item.retryTimes}}</span></td>
<td>
<x-button
v-if="item.state === 'FAILURE' || item.state === 'NEED_FAULT_TOLERANCE' || item.state === 'KILL'"
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Force success')"
icon="ans-icon-success-solid"
@click="_forceSuccess(item)">
</x-button>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('View log')"
icon="ans-icon-log"
:disabled="item.taskType==='SUB_PROCESS'? true: false"
@click="_refreshLog(item)">
</x-button>
</td>
</tr>
</table>
</template>
</el-table-column>
<el-table-column :label="$t('Start Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.startTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('End Time')" width="135">
<template slot-scope="scope">
<span>{{scope.row.endTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column prop="host" :label="$t('host')" width="150"></el-table-column>
<el-table-column prop="duration" :label="$t('Duration')"></el-table-column>
<el-table-column prop="retryTimes" :label="$t('Retry Count')"></el-table-column>
<el-table-column :label="$t('Operation')" width="80" fixed="right">
<template slot-scope="scope">
<div>
<el-tooltip :content="$t('Force success')" placement="top" :enterable="false">
<span>
<el-button type="primary" size="mini" icon="el-icon-success" :disabled="!(scope.row.state === 'FAILURE' || scope.row.state === 'NEED_FAULT_TOLERANCE' || scope.row.state === 'KILL')" @click="_forceSuccess(scope.row)" circle></el-button>
</span>
</el-tooltip>
<el-tooltip :content="$t('View log')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" :disabled="scope.row.taskType==='SUB_PROCESS'? true: false" icon="el-icon-tickets" @click="_refreshLog(scope.row)" circle></el-button></span>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
:visible.sync="logDialog"
width="30%">
<m-log :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>
</el-dialog>
</div>
</template>
<script>
@ -129,7 +91,11 @@
return {
list: [],
isAuth: Permissions.getAuth(),
backfillItem: {}
backfillItem: {},
logDialog: false,
item: {},
source: '',
logId: null
}
},
props: {
@ -144,31 +110,17 @@
return `<em class="${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
},
_refreshLog (item) {
let self = this
let instance = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mLog, {
on: {
ok () {
},
close () {
instance.remove()
}
},
props: {
self: self,
source: 'list',
logId: item.id
}
})
}
})
this.item = item
this.source = 'list'
this.logId = item.id
this.logDialog = true
},
ok () {},
close () {
this.logDialog = false
},
_forceSuccess (item) {
this.forceTaskSuccess({taskInstanceId: item.id}).then(res => {
if (res.code === 0) {
@ -197,6 +149,6 @@
mounted () {
this.list = this.taskInstanceList
},
components: { }
components: { mLog}
}
</script>

12
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

@ -26,7 +26,16 @@
<m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!taskInstanceList.length">
@ -147,7 +156,6 @@
created () {
},
mounted () {
this.$modal.destroy()
// Cycle acquisition status
this.setIntervalP = setInterval(() => {
this._debounceGET('false')

1
dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue

@ -26,7 +26,6 @@
name: 'resource-index',
components: { mSecondaryMenu },
mounted() {
this.$modal.destroy()
},
}
</script>

1
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue

@ -21,7 +21,6 @@
export default {
name: 'file-manage-index',
mounted() {
this.$modal.destroy()
},
}
</script>

29
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue

@ -21,39 +21,39 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="fileName"
maxlength="60"
style="width: 300px;"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Format')}}</template>
<template slot="content">
<x-select v-model="suffix" style="width: 100px;" @on-change="_onChange">
<x-option
<el-select v-model="suffix" style="width: 100px;" size="small" @change="_onChange">
<el-option
v-for="city in fileTypeList"
:key="city"
:value="city"
:label="city">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
style="width: 430px;"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
@ -66,8 +66,8 @@
<template slot="name">&nbsp;</template>
<template slot="content">
<div class="submit">
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button>
<el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
<el-button type="text" size="small" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@ -172,7 +172,6 @@
created () {
},
mounted () {
this.$modal.destroy()
this._handlerEditor()
},
destroyed () {

34
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue

@ -21,47 +21,34 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="name"
maxlength="60"
style="width: 300px;"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<!-- <m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Format')}}</template>
<template slot="content">
<x-select v-model="type" style="width: 100px;">
<x-option
v-for="item in folderList"
:key="item.value"
:value="item.value"
:label="item.label">
</x-option>
</x-select>
</template>
</m-list-box-f> -->
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
style="width: 430px;"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">&nbsp;</template>
<template slot="content">
<div class="submit">
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button>
<el-button type="primary" size="mini" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
<el-button type="text" size="mini" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@ -128,7 +115,6 @@
created () {
},
mounted () {
this.$modal.destroy()
},
destroyed () {
},

22
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createUdfFolder/index.vue

@ -21,34 +21,34 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="name"
maxlength="60"
style="width: 300px;"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
style="width: 430px;"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">&nbsp;</template>
<template slot="content">
<div class="submit">
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
<x-button type="text" @click="() => $router.push({name: 'resource-udf'})"> {{$t('Cancel')}} </x-button>
<el-button type="primary" size="mini" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
<el-button type="text" size="mini" @click="() => $router.push({name: 'resource-udf'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@ -107,7 +107,6 @@
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`)
return false
}
return true
},
},
@ -115,7 +114,6 @@
created () {
},
mounted () {
this.$modal.destroy()
},
destroyed () {
},

6
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/details/index.vue

@ -21,10 +21,10 @@
<h2>
<span>{{name}}</span>
<div class="down">
<em class="ans-icon-download" style="font-size:20px" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></em>
<em class="el-icon-download" style="font-size:20px" data-container="body" data-toggle="tooltip" :title="$t('Download Details')" @click="_downloadFile"></em>
<em>{{size}}</em>
&nbsp;&nbsp;
<em class="ans-icon-fail-empty" style="font-size:20px" data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="close()"></em>
<em class="el-icon-circle-close" style="font-size:20px" data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="close()"></em>
&nbsp;&nbsp;
</div>
</h2>
@ -87,7 +87,7 @@
this.$router.go(-1)
},
_downloadFile () {
downloadFile('resources/download', {
downloadFile('/resources/download', {
id: this.$route.params.id
})
},

4
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/edit/index.vue

@ -27,8 +27,8 @@
<textarea id="code-edit-mirror" name="code-edit-mirror"></textarea>
</div>
<div class="submit-c">
<x-button type="text" shape="circle" @click="close()" :disabled="disabled"> {{$t('Return')}} </x-button>
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Save')}} </x-button>
<el-button type="text" @click="close()" :disabled="disabled" size="small"> {{$t('Return')}} </el-button>
<el-button type="primary" :loading="spinnerLoading" @click="ok()" round size="small">{{spinnerLoading ? 'Loading...' : $t('Save')}} </el-button>
</div>
</template>
<m-no-data :msg="msg" v-if="msg"></m-no-data>

215
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue

@ -17,113 +17,67 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col">
<span>{{$t('#')}}</span>
</th>
<th scope="col">
<span>{{$t('Name')}}</span>
</th>
<th scope="col">
<span>{{$t('Whether directory')}}</span>
</th>
<th scope="col">
<span>{{$t('File Name')}}</span>
</th>
<th scope="col">
<span>{{$t('Description')}}</span>
</th>
<th scope="col" width="100">
<span>{{$t('Size')}}</span>
</th>
<th scope="col" width="140">
<span>{{$t('Update Time')}}</span>
</th>
<th scope="col" width="140">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span class="ellipsis" v-tooltip.large.top.start.light="{text: item.alias, maxWidth: '500px'}">
<a href="javascript:" class="links" @click="_go(item)">{{item.alias}}</a>
</span>
</td>
<td>
<span>{{item.directory? $t('Yes') : $t('No')}}</span>
</td>
<td><span class="ellipsis" v-tooltip.large.top.start.light="{text: item.fileName, maxWidth: '500px'}">{{item.fileName}}</span></td>
<td>
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
<span v-else>-</span>
</td>
<td>
<span>{{_rtSize(item.size)}}</span>
</td>
<td>
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
:disabled="_rtDisb(item)"
@click="_edit(item,$index)"
icon="ans-icon-edit">
</x-button>
<x-button
type="info"
shape="circle"
size="xsmall"
icon="ans-icon-play"
data-toggle="tooltip"
:title="$t('Rename')"
@click="_rename(item,$index)">
</x-button>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Download')"
:disabled="item.directory? true: false"
@click="_downloadFile(item)"
icon="ans-icon-download">
</x-button>
<x-poptip
:ref="'poptip-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Name')">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.alias }}</p>
<div slot="reference" class="name-wrapper">
<a href="javascript:" class="links" @click="_go(scope.row)">{{ scope.row.alias }}</a>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$t('Whether directory')" width="100">
<template slot-scope="scope">
{{scope.row.directory? $t('Yes') : $t('No')}}
</template>
</el-table-column>
<el-table-column prop="fileName" :label="$t('File Name')"></el-table-column>
<el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
<el-table-column :label="$t('Size')">
<template slot-scope="scope">
{{_rtSize(scope.row.size)}}
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="150">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top">
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" :disabled="_rtDisb(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Rename')" placement="top">
<span><el-button type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Download')" placement="top">
<span><el-button type="primary" size="mini" icon="el-icon-download" @click="_downloadFile(scope.row)" :disabled="scope.row.directory? true: false" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
:visible.sync="renameDialog"
width="45%">
<m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
</el-dialog>
</div>
</template>
<script>
@ -138,7 +92,10 @@
name: 'file-manage-list',
data () {
return {
list: []
list: [],
renameDialog: false,
item: {},
index: null
}
},
props: {
@ -169,47 +126,31 @@
_rtSize (val) {
return bytesToSize(parseInt(val))
},
_closeDelete (i) {
this.$refs[`poptip-${i}`][0].doClose()
},
_delete (item, i) {
this.deleteResource({
id: item.id
}).then(res => {
this.$refs[`poptip-${i}`][0].doClose()
this.$emit('on-update')
this.$message.success(res.msg)
}).catch(e => {
this.$refs[`poptip-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
_rename (item, i) {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mRename, {
on: {
onUpDate (item) {
self.$set(self.list, i, item)
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item
}
})
}
})
this.item = item
this.index = i
this.renameDialog = true
},
onUpDate(item) {
this.$set(this.list, this.index, item)
this.renameDialog = false
},
close() {
this.renameDialog = false
},
_rtDisb ({ alias, size }) {
let i = alias.lastIndexOf('.')
let a = alias.substring(i, alias.length)
@ -235,6 +176,6 @@
mounted () {
this.list = this.fileResourcesList
},
components: { }
components: { mRename }
}
</script>
</script>

21
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/rename.vue

@ -15,29 +15,29 @@
* limitations under the License.
*/
<template>
<m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true">
<m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" @close="close" :asyn-loading="true">
<template slot="content">
<div class="resource-rename-model">
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="name"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
</div>
@ -101,6 +101,9 @@
resolve()
}
})
},
close() {
this.$emit('close')
}
},
watch: {},

22
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/index.vue

@ -19,11 +19,11 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
<x-button-group size="small" >
<x-button type="ghost" @click="() => $router.push({name: 'resource-file-createFolder'})">{{$t('Create folder')}}</x-button>
<x-button type="ghost" @click="() => $router.push({name: 'resource-file-create'})">{{$t('Create File')}}</x-button>
<x-button type="ghost" @click="_uploading">{{$t('Upload Files')}}</x-button>
</x-button-group>
<el-button-group size="small" >
<el-button size="mini" @click="() => $router.push({name: 'resource-file-createFolder'})">{{$t('Create folder')}}</el-button>
<el-button size="mini" @click="() => $router.push({name: 'resource-file-create'})">{{$t('Create File')}}</el-button>
<el-button size="mini" @click="_uploading">{{$t('Upload Files')}}</el-button>
</el-button-group>
</template>
</m-conditions>
</template>
@ -32,7 +32,16 @@
<m-list @on-update="_onUpdate" :file-resources-list="fileResourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
<el-pagination
background
@current-change="_page"
@size-change="_pageSize"
:page-size="searchParams.pageSize"
:current-page.sync="searchParams.pageNo"
:page-sizes="[10, 30, 50]"
layout="sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<template v-if="!fileResourcesList.length && total<=0">
@ -129,7 +138,6 @@
created () {
},
mounted () {
this.$modal.destroy()
},
beforeDestroy () {
sessionStorage.setItem('isLeft',1)

26
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subFile/index.vue

@ -21,39 +21,40 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="fileName"
maxlength="60"
style="width: 300px;"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Format')}}</template>
<template slot="content">
<x-select v-model="suffix" style="width: 100px;" @on-change="_onChange">
<x-option
<el-select v-model="suffix" size="small" style="width: 100px;" @change="_onChange">
<el-option
v-for="city in fileTypeList"
:key="city"
:value="city"
:label="city">
</x-option>
</x-select>
</el-option>
</el-select>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
style="width: 430px;"
size="small"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
@ -66,8 +67,8 @@
<template slot="name">&nbsp;</template>
<template slot="content">
<div class="submit">
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button>
<el-button type="primary" size="mini" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
<el-button type="text" size="mini" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@ -173,7 +174,6 @@
created () {
},
mounted () {
this.$modal.destroy()
this._handlerEditor()
},
destroyed () {

34
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subFileFolder/index.vue

@ -21,47 +21,34 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template>
<template slot="content">
<x-input
<el-input
type="input"
v-model="name"
maxlength="60"
style="width: 300px;"
:placeholder="$t('Please enter name')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter name')">
</el-input>
</template>
</m-list-box-f>
<!-- <m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Format')}}</template>
<template slot="content">
<x-select v-model="type" style="width: 100px;">
<x-option
v-for="item in folderList"
:key="item.value"
:value="item.value"
:label="item.label">
</x-option>
</x-select>
</template>
</m-list-box-f> -->
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
<x-input
<el-input
type="textarea"
v-model="description"
style="width: 430px;"
:placeholder="$t('Please enter description')"
autocomplete="off">
</x-input>
size="small"
:placeholder="$t('Please enter description')">
</el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">&nbsp;</template>
<template slot="content">
<div class="submit">
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button>
<el-button type="primary" size="mini" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
<el-button type="text" size="mini" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@ -128,7 +115,6 @@
created () {
},
mounted () {
this.$modal.destroy()
},
destroyed () {
},

211
dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue

@ -17,113 +17,67 @@
<template>
<div class="list-model">
<div class="table-box">
<table class="fixed">
<tr>
<th scope="col">
<span>{{$t('#')}}</span>
</th>
<th scope="col">
<span>{{$t('Name')}}</span>
</th>
<th scope="col">
<span>{{$t('Whether directory')}}</span>
</th>
<th scope="col">
<span>{{$t('File Name')}}</span>
</th>
<th scope="col">
<span>{{$t('Description')}}</span>
</th>
<th scope="col" width="100">
<span>{{$t('Size')}}</span>
</th>
<th scope="col" width="140">
<span>{{$t('Update Time')}}</span>
</th>
<th scope="col" width="140">
<span>{{$t('Operation')}}</span>
</th>
</tr>
<tr v-for="(item, $index) in list" :key="item.id">
<td>
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
</td>
<td>
<span class="ellipsis" v-tooltip.large.top.start.light="{text: item.alias, maxWidth: '500px'}">
<a href="javascript:" class="links" @click="_go(item)">{{item.alias}}</a>
</span>
</td>
<td>
<span>{{item.directory? $t('Yes') : $t('No')}}</span>
</td>
<td><span class="ellipsis" v-tooltip.large.top.start.light="{text: item.fileName, maxWidth: '500px'}">{{item.fileName}}</span></td>
<td>
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
<span v-else>-</span>
</td>
<td>
<span>{{_rtSize(item.size)}}</span>
</td>
<td>
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
<span v-else>-</span>
</td>
<td>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Edit')"
:disabled="_rtDisb(item)"
@click="_edit(item,$index)"
icon="ans-icon-edit">
</x-button>
<x-button
type="info"
shape="circle"
size="xsmall"
icon="ans-icon-play"
data-toggle="tooltip"
:title="$t('Rename')"
@click="_rename(item,$index)">
</x-button>
<x-button
type="info"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('Download')"
:disabled="item.directory? true: false"
@click="_downloadFile(item)"
icon="ans-icon-download">
</x-button>
<x-poptip
:ref="'poptip-' + $index"
placement="bottom-end"
width="90">
<p>{{$t('Delete?')}}</p>
<div style="text-align: right; margin: 0;padding-top: 4px;">
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
<el-table :data="list" size="mini" style="width: 100%">
<el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
<el-table-column :label="$t('Name')">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.alias }}</p>
<div slot="reference" class="name-wrapper">
<a href="javascript:" class="links" @click="_go(scope.row)">{{ scope.row.alias }}</a>
</div>
<template slot="reference">
<x-button
icon="ans-icon-trash"
type="error"
shape="circle"
size="xsmall"
data-toggle="tooltip"
:title="$t('delete')">
</x-button>
</template>
</x-poptip>
</td>
</tr>
</table>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$t('Whether directory')" width="100">
<template slot-scope="scope">
{{scope.row.directory? $t('Yes') : $t('No')}}
</template>
</el-table-column>
<el-table-column prop="fileName" :label="$t('File Name')"></el-table-column>
<el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
<el-table-column :label="$t('Size')">
<template slot-scope="scope">
{{_rtSize(scope.row.size)}}
</template>
</el-table-column>
<el-table-column :label="$t('Update Time')" min-width="120">
<template slot-scope="scope">
<span>{{scope.row.updateTime | formatDate}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('Operation')" width="150">
<template slot-scope="scope">
<el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" :disabled="_rtDisb(scope.row)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('Download')" placement="top" :enterable="false">
<span><el-button type="primary" size="mini" icon="el-icon-download" @click="_downloadFile(scope.row)" :disabled="scope.row.directory? true: false" circle></el-button></span>
</el-tooltip>
<el-tooltip :content="$t('delete')" placement="top" :enterable="false">
<el-popconfirm
:confirmButtonText="$t('Confirm')"
:cancelButtonText="$t('Cancel')"
icon="el-icon-info"
iconColor="red"
:title="$t('Delete?')"
@onConfirm="_delete(scope.row,scope.row.id)"
>
<el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
</el-popconfirm>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
:visible.sync="renameDialog"
width="45%">
<m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
</el-dialog>
</div>
</template>
<script>
@ -139,7 +93,8 @@
name: 'file-manage-list',
data () {
return {
list: []
list: [],
renameDialog: false
}
},
props: {
@ -170,47 +125,31 @@
_rtSize (val) {
return bytesToSize(parseInt(val))
},
_closeDelete (i) {
this.$refs[`poptip-${i}`][0].doClose()
},
_delete (item, i) {
this.deleteResource({
id: item.id
}).then(res => {
this.$refs[`poptip-${i}`][0].doClose()
this.$emit('on-update')
this.$message.success(res.msg)
}).catch(e => {
this.$refs[`poptip-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
_rename (item, i) {
let self = this
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mRename, {
on: {
onUpDate (item) {
self.$set(self.list, i, item)
modal.remove()
},
close () {
modal.remove()
}
},
props: {
item: item
}
})
}
})
this.item = item
this.index = i
this.renameDialog = true
},
onUpDate(item) {
this.$set(this.list, this.index, item)
this.renameDialog = false
},
close() {
this.renameDialog = false
},
_rtDisb ({ alias, size }) {
let i = alias.lastIndexOf('.')
let a = alias.substring(i, alias.length)
@ -246,6 +185,6 @@
mounted () {
this.list = this.fileResourcesList
},
components: { }
components: { mRename }
}
</script>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save