test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-11-30 11:17:54 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Replace the front-end code of the plugin branch with the front-end code of the dev branch (#4353)

Browse Source 
* Replace the front-end code of the plugin branch with the front-end code of the dev branch
This commit is contained in:
break60 2020-12-31 16:45:47 +08:00 committed by GitHub
parent 14785f4e39
commit 5808a0a8b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
234 changed files with 8488 additions and 8638 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dolphinscheduler-ui/.babelrc
View File

@ -5,7 +5,15 @@
"debug": false,
"useBuiltIns": true,
"targets": {
"browsers": [ "ie > 8", "last 2 version", "safari >= 9" ]
"browsers": [
"> 1%",
"last 2 versions",
"ie >= 9",
"edge >= 12",
"firefox >= 28",
"chrome >= 29",
"opera >= 17"
]
},
"production": {
"plugins": ["transform-remove-console"]

7
dolphinscheduler-ui/.eslintignore Normal file
View File

@ -0,0 +1,7 @@
/_test_/
/build/
/dist/
/node/
/node_modules/
/target/
/*.js

12
dolphinscheduler-ui/.eslintrc.yml
View File

@ -26,9 +26,19 @@ globals:
Atomics: readonly
SharedArrayBuffer: readonly
PUBLIC_PATH: readonly
$t: readonly
parserOptions:
ecmaVersion: 2018
sourceType: module
plugins:
- vue
rules: {}
rules:
vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }]
prefer-promise-reject-errors: 'off'
no-prototype-builtins: 'off'
no-mixed-operators: 'off'
no-extend-native: 'off'
prefer-const: 'off'
no-var: 'error'
overrides:
- { 'files': ['*.vue'], 'rules': { 'indent': 'off' }}

12
dolphinscheduler-ui/build/config.js
View File

@ -47,7 +47,7 @@ const jsEntry = (() => {
parts.shift()
let modules = parts.join('/')
let entry = moduleName(modules)
obj[entry] = val
obj[entry] = ['babel-polyfill', val]
})
return obj
})()
@ -125,6 +125,16 @@ const baseConfig = {
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: true
}
},
{
test: /\.vue$/,
loader: 'vue-loader',

43
dolphinscheduler-ui/build/webpack.config.dev.js
View File

@ -19,6 +19,8 @@ const merge = require('webpack-merge')
const { assetsDir, baseConfig } = require('./config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ProgressPlugin = require('progress-bar-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const getEnv = require('env-parse').getEnv
const config = merge.smart(baseConfig, {
@ -33,6 +35,7 @@ const config = merge.smart(baseConfig, {
port: getEnv('DEV_PORT', 8888),
host: getEnv('DEV_HOST', 'localhost'),
noInfo: false,
overlay: { warnings: false, errors: true },
historyApiFallback: true,
disableHostCheck: true,
proxy: {
@ -42,12 +45,12 @@ const config = merge.smart(baseConfig, {
changeOrigin: true
}
},
progress: false,
quiet: false,
progress: true,
quiet: true,
stats: {
colors: true
},
clientLogLevel: 'none'
clientLogLevel: 'warning'
},
plugins: [
new ProgressPlugin(),
@ -57,4 +60,36 @@ const config = merge.smart(baseConfig, {
mode: 'development'
})
module.exports = config
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.devServer.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
config.devServer.port = port
// Add FriendlyErrorsPlugin
config.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${config.devServer.host}:${port}`],
},
onErrors: () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || ''
})
}
}
}))
resolve(config)
}
})
})

7
dolphinscheduler-ui/build/webpack.config.prod.js
View File

@ -51,12 +51,7 @@ const config = merge.smart(baseConfig, {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
compress: {}
},
cache: true,
parallel: true,

28
dolphinscheduler-ui/package.json
View File

@ -8,13 +8,12 @@
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js",
"clean": "rimraf dist",
"start": "npm run dev",
"lint": "eslint ./src --fix",
"lint": "eslint --ext .js,.vue ./src",
"lint:fix": "eslint --ext .js,.vue --fix ./src",
"build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js"
},
"dependencies": {
"@form-create/element-ui": "^1.0.18",
"@riophae/vue-treeselect": "^0.4.0",
"ans-ui": "1.1.9",
"axios": "^0.16.2",
"bootstrap": "3.3.7",
"canvg": "1.5.1",
@ -25,6 +24,7 @@
"dayjs": "^1.7.8",
"echarts": "4.1.0",
"element-ui": "2.13.2",
"font-awesome": "^4.7.0",
"html2canvas": "^0.5.0-beta4",
"jquery": "3.3.1",
"jquery-ui": "^1.12.1",
@ -33,7 +33,7 @@
"lodash": "^4.17.11",
"normalize.css": "^8.0.1",
"vue": "^2.5.17",
"vue-router": "^2.7.0",
"vue-router": "^3.0.0",
"vuex": "^3.0.0",
"vuex-router-sync": "^5.0.0"
},
@ -48,6 +48,7 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
@ -56,17 +57,23 @@
"env-parse": "^1.0.5",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"eslint-plugin-vue": "^7.2.0",
"file-loader": "^5.0.2",
"friendly-errors-webpack-plugin": "^1.7.0",
"globby": "^8.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.2",
"node-notifier": "^8.0.0",
"node-sass": "^4.14.1",
"pack": "^2.2.0",
"portfinder": "^1.0.28",
"postcss-loader": "^3.0.0",
"progress-bar-webpack-plugin": "^1.12.1",
"rimraf": "^2.6.2",
@ -80,5 +87,14 @@
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"ie >= 9",
"edge >= 12",
"firefox >= 28",
"chrome >= 29",
"opera >= 17"
]
}

5
dolphinscheduler-ui/pom.xml
View File

@ -20,7 +20,7 @@
<parent>
<artifactId>dolphinscheduler</artifactId>
<groupId>org.apache.dolphinscheduler</groupId>
<version>1.3.2-SNAPSHOT</version>
<version>1.3.4-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
@ -203,5 +203,4 @@
</profiles>
</project>
</project>

46
dolphinscheduler-ui/src/components/Counter.vue
View File

@ -24,30 +24,30 @@
</template>
<script>
export default {
props: {
factor: { type: Number, default: 1 }
},
data() {
return {
count: 0
};
},
methods: {
inc() {
this.count++;
export default {
props: {
factor: { type: Number, default: 1 }
},
dec() {
this.count--;
data () {
return {
count: 0
}
},
reset() {
this.count = 0;
}
},
computed: {
computedCount: function() {
return this.count * this.factor;
methods: {
inc () {
this.count++
},
dec () {
this.count--
},
reset () {
this.count = 0
}
},
computed: {
computedCount: function () {
return this.count * this.factor
}
}
}
};
</script>
</script>

14
dolphinscheduler-ui/src/components/Message.vue
View File

@ -19,10 +19,10 @@
</template>
<script>
export default {
name: 'message',
props: [
'msg'
]
}
</script>
export default {
name: 'message',
props: [
'msg'
]
}
</script>

23
dolphinscheduler-ui/src/js/conf/home/App.vue
View File

@ -17,15 +17,36 @@
<template>
<m-layout>
<m-nav slot="top"></m-nav>
<router-view slot="bottom"></router-view>
<router-view slot="bottom" v-if="isRenderRouterView"></router-view>
</m-layout>
</template>
<script>
import visibility from '@/module/visibility'
import mLayout from '@/module/components/layout/layout'
import mNav from '@/module/components/nav/nav'
export default {
name: 'app',
data () {
return {
isRenderRouterView: true
}
},
methods: {
reload () {
this.isRenderRouterView = false
this.$nextTick(() => {
this.isRenderRouterView = true
})
}
},
mounted () {
visibility.change((evt, hidden) => {
if (hidden === false) {
this.reload()
}
})
},
components: { mLayout, mNav }
}
</script>

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

@ -17,6 +17,7 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
@ -28,29 +29,23 @@ import i18n from '@/module/i18n'
import { sync } from 'vuex-router-sync'
import Chart from '@/module/ana-charts'
import '@/module/filter/formatDate'
import '@/module/filter/filterNull'
import themeData from '@/module/echarts/themeData.json'
import Permissions from '@/module/permissions'
import 'ans-ui/lib/ans-ui.min.css'
import ans from 'ans-ui/lib/ans-ui.min'
import en_US from 'ans-ui/lib/locale/en' // eslint-disable-line
import 'sass/conf/home/index.scss'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'canvg/dist/browser/canvg.min.js'
import formCreate, {maker} from '@form-create/element-ui'
import 'font-awesome/css/font-awesome.min.css'
// Component internationalization
const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {}
const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {}
i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI)
// Vue.use(ans)
Vue.use(ans, useOpt)
Vue.use(formCreate, {maker})
Vue.use(useOpt)
sync(store, router)

38
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
View File

@ -29,31 +29,31 @@ const toolOper = (dagThis) => {
return [
{
code: 'pointer',
icon: 'ans-icon-pointer',
icon: 'el-icon-thumb',
disable: disabled,
desc: `${i18n.$t('Drag Nodes and Selected Items')}`
},
{
code: 'line',
icon: 'ans-icon-slash',
icon: 'el-icon-top-right',
disable: disabled,
desc: `${i18n.$t('Select Line Connection')}`
},
{
code: 'remove',
icon: 'ans-icon-trash',
icon: 'el-icon-delete',
disable: disabled,
desc: `${i18n.$t('Delete selected lines or nodes')}`
},
{
code: 'download',
icon: 'ans-icon-download',
icon: 'el-icon-download',
disable: !dagThis.type,
desc: `${i18n.$t('Download')}`
},
{
code: 'screen',
icon: 'ans-icon-max',
icon: 'el-icon-full-screen',
disable: false,
desc: `${i18n.$t('Full Screen')}`
}
@ -150,98 +150,98 @@ const tasksState = {
id: 0,
desc: `${i18n.$t('Submitted successfully')}`,
color: '#A9A9A9',
icoUnicode: 'ans-icon-dot-circle',
icoUnicode: 'fa fa-dot-circle-o',
isSpin: false
},
RUNNING_EXECUTION: {
id: 1,
desc: `${i18n.$t('Executing')}`,
color: '#0097e0',
icoUnicode: 'ans-icon-gear',
icoUnicode: 'el-icon-s-tools',
isSpin: true
},
READY_PAUSE: {
id: 2,
desc: `${i18n.$t('Ready to pause')}`,
color: '#07b1a3',
icoUnicode: 'ans-icon-pause-solid',
icoUnicode: 'fa-pause-circle',
isSpin: false
},
PAUSE: {
id: 3,
desc: `${i18n.$t('Pause')}`,
color: '#057c72',
icoUnicode: 'ans-icon-pause',
icoUnicode: 'el-icon-video-pause',
isSpin: false
},
READY_STOP: {
id: 4,
desc: `${i18n.$t('Ready to stop')}`,
color: '#FE0402',
icoUnicode: 'ans-icon-coin',
icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
STOP: {
id: 5,
desc: `${i18n.$t('Stop')}`,
color: '#e90101',
icoUnicode: 'ans-icon-stop',
icoUnicode: 'fa-stop-circle',
isSpin: false
},
FAILURE: {
id: 6,
desc: `${i18n.$t('failed')}`,
color: '#000000',
icoUnicode: 'ans-icon-fail-empty',
icoUnicode: 'el-icon-circle-close',
isSpin: false
},
SUCCESS: {
id: 7,
desc: `${i18n.$t('success')}`,
color: '#33cc00',
icoUnicode: 'ans-icon-success-empty',
icoUnicode: 'el-icon-circle-check',
isSpin: false
},
NEED_FAULT_TOLERANCE: {
id: 8,
desc: `${i18n.$t('Need fault tolerance')}`,
color: '#FF8C00',
icoUnicode: 'ans-icon-pen',
icoUnicode: 'el-icon-edit',
isSpin: false
},
KILL: {
id: 9,
desc: `${i18n.$t('kill')}`,
color: '#a70202',
icoUnicode: 'ans-icon-minus-circle-empty',
icoUnicode: 'el-icon-remove-outline',
isSpin: false
},
WAITTING_THREAD: {
id: 10,
desc: `${i18n.$t('Waiting for thread')}`,
color: '#912eed',
icoUnicode: 'ans-icon-sand-clock',
icoUnicode: 'fa-hourglass-end',
isSpin: false
},
WAITTING_DEPEND: {
id: 11,
desc: `${i18n.$t('Waiting for dependence')}`,
color: '#5101be',
icoUnicode: 'ans-icon-dependence',
icoUnicode: 'fa-window-restore',
isSpin: false
},
DELAY_EXECUTION: {
id: 12,
desc: `${i18n.$t('Delay execution')}`,
color: '#5102ce',
icoUnicode: 'ans-icon-coin',
icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
FORCED_SUCCESS: {
id: 13,
desc: `${i18n.$t('Forced success')}`,
color: '#5102ce',
icoUnicode: 'ans-icon-success-solid',
icoUnicode: 'el-icon-success',
isSpin: false
}
}

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

@ -15,14 +15,13 @@
* limitations under the License.
*/
import Vue from 'vue'
let v = new Vue()
import _ from 'lodash'
import i18n from '@/module/i18n'
import { jsPlumb } from 'jsplumb'
import JSP from './plugIn/jsPlumbHandle'
import DownChart from './plugIn/downChart'
import store from '@/conf/home/store'
import dagre from "dagre"
import dagre from 'dagre'
/**
* Prototype method
@ -53,7 +52,9 @@ Dag.prototype.setConfig = function (o) {
*/
Dag.prototype.create = function () {
const self = this
jsPlumb.ready(() => {
const plumbIns = jsPlumb.getInstance()
plumbIns.reset()
plumbIns.ready(() => {
JSP.init({
dag: this.dag,
instance: this.instance,
@ -76,7 +77,7 @@ Dag.prototype.create = function () {
* Action event on the right side of the toolbar
*/
Dag.prototype.toolbarEvent = function ({ item, code, is }) {
let self = this
const self = this
switch (code) {
case 'pointer':
JSP.handleEventPointer(is)
@ -91,21 +92,15 @@ Dag.prototype.toolbarEvent = function ({ item, code, is }) {
JSP.handleEventScreen({ item, is })
break
case 'download':
v.$modal.dialog({
width: 350,
closable: false,
showMask: true,
maskClosable: true,
title: i18n.$t('Download'),
content: i18n.$t('Please confirm whether the workflow has been saved before downloading'),
ok: {
handle (e) {
DownChart.download({
dagThis: self.dag
})
}
},
cancel: {}
Vue.prototype.$confirm(`${i18n.$t('Please confirm whether the workflow has been saved before downloading')}`, `${i18n.$t('Download')}`, {
confirmButtonText: `${i18n.$t('Confirm')}`,
cancelButtonText: `${i18n.$t('Cancel')}`,
type: 'warning'
}).then(() => {
DownChart.download({
dagThis: self.dag
})
}).catch(() => {
})
break
}
@ -128,17 +123,19 @@ Dag.prototype.backfill = function (arg) {
for (const i in store.state.dag.connects) {
const connect = store.state.dag.connects[i]
g.setEdge(connect['endPointSourceId'], connect['endPointTargetId'])
g.setEdge(connect.endPointSourceId, connect.endPointTargetId)
}
dagre.layout(g)
const dataObject = {}
g.nodes().forEach(function (v) {
const node = g.node(v)
const location = store.state.dag.locations[node.label]
const obj = {}
obj.name = node.label
obj.name = location.name
obj.x = node.x + marginX
obj.y = node.y
obj.targetarr = location.targetarr
dataObject[node.label] = obj
})
jsPlumb.ready(() => {
@ -162,7 +159,9 @@ Dag.prototype.backfill = function (arg) {
})
})
} else {
jsPlumb.ready(() => {
const plumbIns = jsPlumb.getInstance()
plumbIns.reset()
plumbIns.ready(() => {
JSP.init({
dag: this.dag,
instance: this.instance,

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

@ -207,7 +207,6 @@
.operation {
overflow: hidden;
display: inline-block;
margin-right: 10px;
a {
float: left;
width: 28px;
@ -277,8 +276,9 @@ svg path:hover {
background: #fff;
border-radius: 3px;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
padding: 4px 0;
padding: 4px 4px;
visibility:hidden;
z-index: 10000;
a {
height: 30px;
line-height: 28px;

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

@ -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,44 @@
<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=""
:with-header="false">
<m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion" @closeVersion="closeVersion"></m-versions>
</el-drawer>
<el-drawer
:visible.sync="nodeDrawer"
size=""
:with-header="false">
<m-form-model v-if="nodeDrawer" :nodeData=nodeData @seeHistory="seeHistory" @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
</el-drawer>
<el-drawer
:visible.sync="lineDrawer"
size=""
: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=""
:wrapperClosable="false"
:with-header="false">
<m-udp></m-udp>
</el-drawer>
<el-dialog
:title="$t('Set the DAG diagram name')"
:visible.sync="dialogVisible"
width="auto">
<m-udp @onUdp="onUdpDialog" @close="closeDialog"></m-udp>
</el-dialog>
<el-dialog
:title="$t('Please set the parameters before starting')"
:visible.sync="startDialog"
width="auto">
<m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
</el-dialog>
</div>
</div>
</template>
@ -158,6 +202,7 @@
import { findComponentDownward } from '@/module/util/'
import disabledState from '@/module/mixin/disabledState'
import { mapActions, mapState, mapMutations } from 'vuex'
import mStart from '../../projects/pages/definition/pages/list/_source/start'
import mVersions from '../../projects/pages/definition/pages/list/_source/versions'
let eventModel
@ -179,7 +224,39 @@
isLoading: false,
taskId: null,
arg: false,
versionData: {
processDefinition: {
id: null,
version: '',
state: ''
},
processDefinitionVersions: [],
total: null,
pageNo: null,
pageSize: null
},
drawer: false,
nodeData: {
id: null,
taskType: '',
self: {},
preNode: [],
rearList: [],
instanceId: null
},
nodeDrawer: false,
lineData: {
id: null,
sourceId: '',
targetId: ''
},
lineDrawer: false,
udpDrawer: false,
dialogVisible: false,
startDialog: false,
startData: {},
startNodeList: '',
sourceType: ''
}
},
mixins: [disabledState],
@ -190,43 +267,54 @@
methods: {
...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState', 'switchProcessDefinitionVersion', 'getProcessDefinitionVersionsPage', 'deleteProcessDefinitionVersion']),
...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']),
startRunning (item, startNodeList, sourceType) {
this.startData = item
this.startNodeList = startNodeList
this.sourceType = sourceType
this.startDialog = true
},
onUpdateStart () {
this.startDialog = false
},
closeStart () {
this.startDialog = false
},
// DAG automatic layout
dagAutomaticLayout() {
if(this.store.state.dag.isEditDag) {
dagAutomaticLayout () {
if (this.store.state.dag.isEditDag) {
this.$message.warning(`${i18n.$t('Please save the DAG before formatting')}`)
return false
}
$('#canvas').html('')
// Destroy round robin
// Destroy round robin
Dag.init({
dag: this,
instance: jsPlumb.getInstance({
Endpoint: [
'Dot', { radius: 1, cssClass: 'dot-style' }
],
Connector: 'Bezier',
PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
ConnectionOverlays: [
[
'Arrow',
{
location: 1,
id: 'arrow',
length: 12,
foldback: 0.8
}
dag: this,
instance: jsPlumb.getInstance({
Endpoint: [
'Dot', { radius: 1, cssClass: 'dot-style' }
],
['Label', {
Connector: 'Bezier',
PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
ConnectionOverlays: [
[
'Arrow',
{
location: 1,
id: 'arrow',
length: 12,
foldback: 0.8
}
],
['Label', {
location: 0.5,
id: 'label'
}]
],
Container: 'canvas',
ConnectionsDetachable: true
}]
],
Container: 'canvas',
ConnectionsDetachable: true
})
})
})
if (this.tasks.length) {
Dag.backfill(true)
if (this.type === 'instance') {
@ -255,8 +343,8 @@
/**
* copy name
*/
_copyName(){
let clipboard = new Clipboard(`.copy-name`)
_copyName () {
let clipboard = new Clipboard('.copy-name')
clipboard.on('success', e => {
this.$message.success(`${i18n.$t('Copy success')}`)
// Free memory
@ -294,8 +382,8 @@
let dom = $(`#${v2.id}`)
let state = dom.find('.state-p')
let depState = ''
taskList.forEach(item=>{
if(item.name==v1.name) {
taskList.forEach(item => {
if (item.name === v1.name) {
depState = item.state
}
})
@ -371,7 +459,7 @@
this.spinnerLoading = true
// Storage store
Dag.saveStore().then(res => {
if(this._verifConditions(res.tasks)) {
if (this._verifConditions(res.tasks)) {
if (this.urlParam.id) {
/**
* Edit
@ -379,7 +467,12 @@
* @param saveEditDAGChart => Process definition editing
*/
this[this.type === 'instance' ? 'updateInstance' : 'updateDefinition'](this.urlParam.id).then(res => {
this.$message.success(res.msg)
// this.$message.success(res.msg)
this.$message({
message: res.msg,
type: 'success',
offset: 80
})
this.spinnerLoading = false
// Jump process definition
if (this.type === 'instance') {
@ -415,57 +508,36 @@
})
})
},
_closeDAG(){
_closeDAG () {
let $name = this.$route.name
if($name && $name.indexOf("definition") != -1){
this.$router.push({ name: 'projects-definition-list'})
}else{
this.$router.push({ name: 'projects-instance-list'})
if ($name && $name.indexOf('definition') !== -1) {
this.$router.push({ name: 'projects-definition-list' })
} else {
this.$router.push({ name: 'projects-instance-list' })
}
},
_verifConditions (value) {
let tasks = value
let bool = true
tasks.map(v=>{
if(v.type == 'CONDITIONS' && (v.conditionResult.successNode[0] =='' || v.conditionResult.successNode[0] == null || v.conditionResult.failedNode[0] =='' || v.conditionResult.failedNode[0] == null)) {
tasks.map(v => {
if (v.type === 'CONDITIONS' && (v.conditionResult.successNode[0] === '' || v.conditionResult.successNode[0] === null || v.conditionResult.failedNode[0] === '' || v.conditionResult.failedNode[0] === null)) {
bool = false
return false
}
})
if(!bool) {
if (!bool) {
this.$message.warning(`${i18n.$t('Successful branch flow and failed branch flow are required')}`)
this.spinnerLoading = false
return false
}
return true
},
/**
* Global parameter
* @param Promise
*/
_udpTopFloorPop () {
return new Promise((resolve, reject) => {
let modal = this.$modal.dialog({
closable: false,
showMask: true,
escClose: true,
className: 'v-modal-custom',
transitionName: 'opacityp',
render (h) {
return h(mUdp, {
on: {
onUdp () {
modal.remove()
resolve()
},
close () {
modal.remove()
}
}
})
}
})
})
onUdpDialog () {
this._save()
this.dialogVisible = false
},
closeDialog () {
this.dialogVisible = false
},
/**
* Save chart
@ -476,11 +548,7 @@
this.$message.warning(`${i18n.$t('Failed to create node to save')}`)
return
}
// Global parameters (optional)
this._udpTopFloorPop().then(() => {
return this._save()
})
this.dialogVisible = true
},
/**
* Return to the previous child node
@ -531,63 +599,75 @@
* View variables
*/
_toggleView () {
findComponentDownward(this.$root, `assist-dag-index`)._toggleView()
findComponentDownward(this.$root, 'assist-dag-index')._toggleView()
},
/**
* Starting parameters
*/
_toggleParam () {
findComponentDownward(this.$root, `starting-params-dag-index`)._toggleParam()
findComponentDownward(this.$root, 'starting-params-dag-index')._toggleParam()
},
addLineInfo ({ item, fromThis }) {
this.addConnects(item)
this.lineDrawer = false
},
cancel ({ fromThis }) {
this.lineDrawer = false
},
/**
* Create a node popup layer
* @param Object id
*/
_createLineLabel({id, sourceId, targetId}) {
// $('#jsPlumb_2_50').text('111')
let self = this
self.$modal.destroy()
const removeNodesEvent = (fromThis) => {
// Manually destroy events inside the component
fromThis.$destroy()
// Close the popup
eventModel.remove()
}
eventModel = this.$drawer({
className: 'dagMask',
render (h) {
return h(mFormLineModel,{
on: {
addLineInfo ({ item, fromThis }) {
self.addConnects(item)
setTimeout(() => {
removeNodesEvent(fromThis)
}, 100)
},
cancel ({fromThis}) {
removeNodesEvent(fromThis)
}
},
props: {
id: id,
sourceId: sourceId,
targetId: targetId
}
})
_createLineLabel ({ id, sourceId, targetId }) {
this.lineData.id = id
this.lineData.sourceId = sourceId
this.lineData.targetId = targetId
this.lineDrawer = true
},
seeHistory (taskName) {
this.nodeData.self.$router.push({
name: 'task-instance',
query: {
processInstanceId: this.nodeData.self.$route.params.id,
taskName: taskName
}
})
},
addTaskInfo ({ item, fromThis }) {
this.addTasks(item)
this.nodeDrawer = false
},
cacheTaskInfo ({ item, fromThis }) {
this.cacheTasks(item)
},
close ({ item, flag, fromThis }) {
this.addTasks(item)
// Edit status does not allow deletion of nodes
if (flag) {
jsPlumb.remove(this.nodeData.id)
}
this.nodeDrawer = false
},
onSubProcess ({ subProcessId, fromThis }) {
this._subProcessHandle(subProcessId)
},
_createNodes ({ id, type }) {
let self = this
let preNode = []
let rearNode = []
let rearList = []
$('div[data-targetarr*="' + id + '"]').each(function(){
rearNode.push($(this).attr("id"))
$('div[data-targetarr*="' + id + '"]').each(function () {
rearNode.push($(this).attr('id'))
})
if (rearNode.length>0) {
if (rearNode.length > 0) {
rearNode.forEach(v => {
let rearobj = {}
rearobj.value = $(`#${v}`).find('.name-p').text()
@ -609,78 +689,96 @@
} else {
preNode = []
}
if (eventModel) {
// Close the popup
eventModel.remove()
}
const removeNodesEvent = (fromThis) => {
// Manually destroy events inside the component
fromThis.$destroy()
// Close the popup
eventModel.remove()
}
this.taskId = id
type = type || self.dagBarId
eventModel = this.$drawer({
closable: false,
direction: 'right',
escClose: true,
className: 'dagMask',
render: h => h(mFormModel, {
on: {
addTaskInfo ({ item, fromThis }) {
self.addTasks(item)
setTimeout(() => {
removeNodesEvent(fromThis)
}, 100)
},
/**
* Cache the item
* @param item
* @param fromThis
*/
cacheTaskInfo({item, fromThis}) {
self.cacheTasks(item)
},
close ({ item,flag, fromThis }) {
self.addTasks(item)
// Edit status does not allow deletion of nodes
if (flag) {
jsPlumb.remove(id)
}
this.nodeData.id = id
this.nodeData.taskType = type
this.nodeData.self = self
this.nodeData.preNode = preNode
this.nodeData.rearList = rearList
this.nodeData.instanceId = this.$route.params.id
removeNodesEvent(fromThis)
},
onSubProcess ({ subProcessId, fromThis }) {
removeNodesEvent(fromThis)
self._subProcessHandle(subProcessId)
}
},
props: {
id: id,
taskType: type,
self: self,
preNode: preNode,
rearList: rearList,
instanceId: this.$route.params.id
}
})
})
this.nodeDrawer = true
},
removeEventModelById ($id) {
if(eventModel && this.taskId == $id){
if (eventModel && this.taskId === $id) {
eventModel.remove()
}
},
/**
* switch version in process definition version list
*
* @param version the version user want to change
* @param processDefinitionId the process definition id
* @param fromThis fromThis
*/
mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
this.$store.state.dag.isSwitchVersion = true
this.switchProcessDefinitionVersion({
version: version,
processDefinitionId: processDefinitionId
}).then(res => {
this.$message.success($t('Switch Version Successfully'))
this.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` })
}).catch(e => {
this.$store.state.dag.isSwitchVersion = false
this.$message.error(e.msg || '')
})
},
/**
* Paging event of process definition versions
*
* @param pageNo page number
* @param pageSize page size
* @param processDefinitionId the process definition id of page version
* @param fromThis fromThis
*/
mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) {
this.getProcessDefinitionVersionsPage({
pageNo: pageNo,
pageSize: pageSize,
processDefinitionId: processDefinitionId
}).then(res => {
this.versionData.processDefinitionVersions = res.data.lists
this.versionData.total = res.data.totalCount
this.versionData.pageSize = res.data.pageSize
this.versionData.pageNo = res.data.currentPage
}).catch(e => {
this.$message.error(e.msg || '')
})
},
/**
* delete one version of process definition
*
* @param version the version need to delete
* @param processDefinitionId the process definition id user want to delete
* @param fromThis fromThis
*/
mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
this.deleteProcessDefinitionVersion({
version: version,
processDefinitionId: processDefinitionId
}).then(res => {
this.$message.success(res.msg || '')
this.mVersionGetProcessDefinitionVersionsPage({
pageNo: 1,
pageSize: 10,
processDefinitionId: processDefinitionId,
fromThis: fromThis
})
}).catch(e => {
this.$message.error(e.msg || '')
})
},
/**
* query the process definition pagination version
*/
_version (item) {
let self = this
this.getProcessDefinitionVersionsPage({
pageNo: 1,
pageSize: 10,
@ -690,127 +788,27 @@
let total = res.data.totalCount
let pageSize = res.data.pageSize
let pageNo = res.data.currentPage
if (this.versionsModel) {
this.versionsModel.remove()
}
this.versionsModel = this.$drawer({
direction: 'right',
closable: true,
showMask: true,
escClose: true,
render (h) {
return h(mVersions, {
on: {
/**
* switch version in process definition version list
*
* @param version the version user want to change
* @param processDefinitionId the process definition id
* @param fromThis fromThis
*/
mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
self.$store.state.dag.isSwitchVersion = true
self.switchProcessDefinitionVersion({
version: version,
processDefinitionId: processDefinitionId
}).then(res => {
self.$message.success($t('Switch Version Successfully'))
setTimeout(() => {
fromThis.$destroy()
self.versionsModel.remove()
}, 0)
self.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` })
}).catch(e => {
self.$store.state.dag.isSwitchVersion = false
self.$message.error(e.msg || '')
})
},
/**
* Paging event of process definition versions
*
* @param pageNo page number
* @param pageSize page size
* @param processDefinitionId the process definition id of page version
* @param fromThis fromThis
*/
mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) {
self.getProcessDefinitionVersionsPage({
pageNo: pageNo,
pageSize: pageSize,
processDefinitionId: processDefinitionId
}).then(res => {
fromThis.processDefinitionVersions = res.data.lists
fromThis.total = res.data.totalCount
fromThis.pageSize = res.data.pageSize
fromThis.pageNo = res.data.currentPage
}).catch(e => {
self.$message.error(e.msg || '')
})
},
/**
* delete one version of process definition
*
* @param version the version need to delete
* @param processDefinitionId the process definition id user want to delete
* @param fromThis fromThis
*/
mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
self.deleteProcessDefinitionVersion({
version: version,
processDefinitionId: processDefinitionId
}).then(res => {
self.$message.success(res.msg || '')
fromThis.$emit('mVersionGetProcessDefinitionVersionsPage', {
pageNo: 1,
pageSize: 10,
processDefinitionId: processDefinitionId,
fromThis: fromThis
})
}).catch(e => {
self.$message.error(e.msg || '')
})
},
/**
* remove this drawer
*
* @param fromThis
*/
close ({ fromThis }) {
setTimeout(() => {
fromThis.$destroy()
self.versionsModel.remove()
}, 0)
}
},
props: {
processDefinition: {
id: self.urlParam.id,
version: self.$store.state.dag.version,
state: self.releaseState
},
processDefinitionVersions: processDefinitionVersions,
total: total,
pageNo: pageNo,
pageSize: pageSize
}
})
}
})
this.versionData.processDefinition.id = this.urlParam.id
this.versionData.processDefinition.version = this.$store.state.dag.version
this.versionData.processDefinition.state = this.releaseState
this.versionData.processDefinitionVersions = processDefinitionVersions
this.versionData.total = total
this.versionData.pageNo = pageNo
this.versionData.pageSize = pageSize
this.drawer = true
}).catch(e => {
this.$message.error(e.msg || '')
})
},
closeVersion () {
this.drawer = false
}
},
watch: {
'tasks': {
tasks: {
deep: true,
handler (o) {
// Edit state does not allow deletion of node a...
this.setIsEditDag(true)
}
@ -843,8 +841,8 @@
}
],
['Label', {
location: 0.5,
id: 'label'
location: 0.5,
id: 'label'
}]
],
Container: 'canvas',
@ -869,10 +867,13 @@
computed: {
...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])
},
components: {}
components: { mVersions, mFormModel, mFormLineModel, mUdp, mStart }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import "./dag";
.operBtn {
padding: 8px 6px;
}
</style>

68
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
View File

@ -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>
@ -143,21 +143,21 @@
if (p === 2 || p === 0) {
this.waitCompleteTimeout.strategy = is ? ['WARN'] : []
this.waitCompleteTimeout.interval = is ? 30 : null
}
}
},
_verification () {
// Verification timeout policy
if (this.enable
&& (this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length)
|| (this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) {
if (this.enable &&
(this.waitCompleteTimeout.enable && !this.waitCompleteTimeout.strategy.length) ||
(this.waitStartTimeout.enable && !this.waitStartTimeout.strategy.length)) {
this.$message.warning(`${this.$t('Timeout strategy must be selected')}`)
return false
}
// Verify timeout duration Non 0 positive integer
const reg = /^[1-9]\d*$/
if (this.enable
&& (this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval))
|| (this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) {
if (this.enable &&
(this.waitCompleteTimeout.enable && !reg.test(this.waitCompleteTimeout.interval)) ||
(this.waitStartTimeout.enable && (!reg.test(this.waitStartTimeout.interval || !reg.test(this.waitStartTimeout.checkInterval))))) {
this.$message.warning(`${this.$t('Timeout must be a positive integer')}`)
return false
}
@ -175,16 +175,16 @@
},
waitCompleteTimeout: {
strategy: (() => {
// Handling checkout sequence
let strategy = this.waitCompleteTimeout.strategy
if (strategy.length === 2 && strategy[0] === 'FAILED') {
return [strategy[1], strategy[0]].join(',')
} else {
return strategy.join(',')
}
})(),
interval: parseInt(this.waitCompleteTimeout.interval),
enable: this.waitCompleteTimeout.enable
// Handling checkout sequence
let strategy = this.waitCompleteTimeout.strategy
if (strategy.length === 2 && strategy[0] === 'FAILED') {
return [strategy[1], strategy[0]].join(',')
} else {
return strategy.join(',')
}
})(),
interval: parseInt(this.waitCompleteTimeout.interval),
enable: this.waitCompleteTimeout.enable
}
})
return true
@ -215,4 +215,4 @@
},
components: {}
}
</script>
</script>

39
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
View File

@ -15,33 +15,34 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
style="width: 157px;"
:disabled="isDetails"
@on-change="_onChange"
v-model="value">
<x-input
size="small"
@change="_onChange"
v-model="selectedValue">
<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'
@ -52,6 +53,7 @@
name: 'form-select-input',
data () {
return {
selectedValue: this.value,
isIconState: false,
isInput: true
}
@ -67,8 +69,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
@ -87,7 +89,7 @@
}, 1)
},
_onBlur () {
let val = $(this.$refs['input'].$el).find('input')[0].value
let val = $(this.$refs.input.$el).find('input')[0].value
if (this._validation(val)) {
this.$emit('valueEvent', val)
this._setIconState(val)
@ -106,12 +108,15 @@
}
},
watch: {
value (val) {
this.selectedValue = val
}
},
created () {
this._setIconState(this.value)
this._setIconState(this.selectedValue)
},
mounted () {
},
components: {}
}
</script>
</script>

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

@ -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>
@ -127,4 +127,4 @@
},
components: {}
}
</script>
</script>

20
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
View File

@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
:disabled="isDetails"
@on-change="_onChange"
v-model="value"
@change="_onChange"
v-model="selectedValue"
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'
@ -34,6 +35,7 @@
name: 'form-worker-group',
data () {
return {
selectedValue: this.value,
workerGroupsList: []
}
},
@ -50,11 +52,13 @@
},
methods: {
_onChange (o) {
this.value = o.value
this.$emit('workerGroupsEvent', o.value)
this.$emit('workerGroupsEvent', o)
}
},
watch: {
value (val) {
this.selectedValue = val
}
},
created () {
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []

78
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
View File

@ -15,25 +15,25 @@
* limitations under the License.
*/
<template>
<div class="form-model-model" v-clickoutside="_handleClose">
<div class="form-model-wrapper" v-clickoutside="_handleClose">
<div class="title-box">
<span class="name">{{$t('Current connection settings')}}</span>
</div>
<div class="content-box">
<div class="from-model">
<div class="form-model">
<!-- Node name -->
<div class="clearfix list">
<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,68 +41,62 @@
</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>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import i18n from '@/module/i18n'
import JSP from './../plugIn/jsPlumbHandle'
import disabledState from '@/module/mixin/disabledState'
export default {
name: 'form-line-model',
data () {
return {
// loading
// loading
spinnerLoading: false,
// node name
labelName: '',
labelName: ''
}
},
mixins: [disabledState],
props: {
id: String,
sourceId: String,
targetId: String
lineData: Object
},
methods: {
cancel() {
this.$emit('cancel', {
fromThis: this
})
},
ok() {
if($(`#${this.id}`).prev().attr('class')==='jtk-overlay') {
$(`#${this.id}`).prev().empty()
}
$(`#${this.id}`).text(this.labelName)
this.$emit('addLineInfo', {
item: {
labelName: this.labelName,
sourceId: this.sourceId,
targetId: this.targetId
},
fromThis: this
})
cancel () {
this.$emit('cancel', {
fromThis: this
})
},
ok () {
if ($(`#${this.lineData.id}`).prev().attr('class') === 'jtk-overlay') {
$(`#${this.lineData.id}`).prev().empty()
}
},
$(`#${this.lineData.id}`).text(this.labelName)
this.$emit('addLineInfo', {
item: {
labelName: this.labelName,
sourceId: this.lineData.sourceId,
targetId: this.lineData.targetId
},
fromThis: this
})
}
},
watch: {
},
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 () {
},
updated () {
},
@ -111,7 +105,7 @@
destroyed () {
},
computed: {
},
components: {}
}

58
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
View File

@ -14,8 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.form-model-model {
.form-model-wrapper {
width: 720px;
height: 100vh;
position: relative;
.title-box {
height: 61px;
@ -72,21 +73,21 @@
}
.content-box {
overflow-y: scroll;
height: calc(100vh - 61px);
padding-bottom: 60px;
height: calc(100vh - 121px);
}
}
.from-model {
.form-model {
padding-top: 26px;
padding-bottom: 10px;
>div {
clear: both;
}
.list {
position: relative;
display: flex;
margin-right: 25px;
margin-bottom: 10px;
.text-box {
width: 112px;
float: left;
width: 130px;
text-align: right;
margin-right: 8px;
>span {
@ -97,8 +98,7 @@
}
}
.cont-box {
width: 580px;
float: left;
flex: 1;
.label-box {
width: 100%;
}
@ -108,6 +108,27 @@
display: inline-block;
padding:0 6px 0 20px;
}
.cont-extra {
margin-left: 15px;
flex: 1;
}
.el-radio-group {
vertical-align: sub;
padding-top: 6px;
margin-top: 3px;
}
.user-def-params-model {
padding-top: 3px;
}
}
.cont-box + .text-box {
margin-left: 30px;
}
.display-flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.add {
line-height: 32px;
@ -120,4 +141,21 @@
float: left;
}
}
}
.requiredIcon {
color: #ff0000;
padding-right: 4px;
}
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
}

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

@ -15,34 +15,34 @@
* limitations under the License.
*/
<template>
<div class="form-model-model" v-clickoutside="_handleClose">
<div class="form-model-wrapper" v-clickoutside="_handleClose">
<div class="title-box">
<span class="name">{{$t('Current node settings')}}</span>
<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">
<div class="from-model">
<div class="form-model">
<!-- Node name -->
<div class="clearfix list">
<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">
<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>
@ -351,8 +342,8 @@
successBranch: '',
failedBranch: '',
conditionResult: {
'successNode': [],
'failedNode': []
successNode: [],
failedNode: []
},
// dependence
dependence: {},
@ -378,7 +369,7 @@
taskInstancePriority: 'MEDIUM',
// worker group id
workerGroup: 'default',
stateList:[
stateList: [
{
value: 'success',
label: `${i18n.$t('success')}`
@ -390,8 +381,8 @@
],
// preTasks
preTaskIdsInWorkflow: [],
preTasksToAdd: [], // pre-taskIds to add, used in jsplumb connects
preTasksToDelete: [], // pre-taskIds to delete, used in jsplumb connects
preTasksToAdd: [], // pre-taskIds to add, used in jsplumb connects
preTasksToDelete: [] // pre-taskIds to delete, used in jsplumb connects
}
},
/**
@ -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,7 @@
* Jump to task instance
*/
_seeHistory () {
this.self.$router.push({
name: 'task-instance',
query: {
processInstanceId: this.self.$route.params.id,
taskName: this.backfillItem.name
}
})
this.$modal.destroy()
this.$emit('seeHistory', this.backfillItem.name)
},
/**
* Enter the child node to judge the process instance or the process definition
@ -471,19 +450,19 @@
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
}
this.store.dispatch('dag/getSubProcessId', { taskId: stateId }).then(res => {
this.$emit('onSubProcess', {
subProcessId: res.data.subProcessInstanceId,
fromThis: this
})
}).catch(e => {
subProcessId: res.data.subProcessInstanceId,
fromThis: this
})
}).catch(e => {
this.$message.error(e.msg || '')
})
})
} else {
this.$emit('onSubProcess', {
subProcessId: this.backfillItem.params.processDefinitionId,
@ -508,8 +487,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,
@ -537,7 +516,7 @@
this.$message.warning(`${i18n.$t('Please enter name (required)')}`)
return false
}
if (this.successBranch !='' && this.successBranch !=null && this.successBranch == this.failedBranch) {
if (this.successBranch !== '' && this.successBranch !== null && this.successBranch === this.failedBranch) {
this.$message.warning(`${i18n.$t('Cannot select the same node for successful branch flow and failed branch flow')}`)
return false
}
@ -551,13 +530,13 @@
}
return true
},
_verifWorkGroup() {
_verifWorkGroup () {
let item = this.store.state.security.workerGroupsListAll.find(item => {
return item.id == this.workerGroup;
});
if(item==undefined) {
return item.id === this.workerGroup
})
if (item === undefined) {
this.$message.warning(`${i18n.$t('The Worker group no longer exists, please select the correct Worker group!')}`)
return false;
return false
}
return true
},
@ -570,37 +549,36 @@
return
}
// verif workGroup
if(!this._verifWorkGroup()) {
if (!this._verifWorkGroup()) {
return
}
// Verify task alarm parameters
if (this.taskType === 'DEPENDENT') {
if (!this.$refs['dependentTimeout']._verification()) {
if (this.nodeData.taskType === 'DEPENDENT') {
if (!this.$refs.dependentTimeout._verification()) {
return
}
} else {
if (!this.$refs['timeout']._verification()) {
if (!this.$refs.timeout._verification()) {
return
}
}
// Verify node parameters
if (!this.$refs[this.taskType]._verification()) {
if (!this.$refs[this.nodeData.taskType]._verification()) {
return
}
// Verify preTasks and update dag-things
if (this.$refs['PRE_TASK']) {
if (!this.$refs['PRE_TASK']._verification()) {
if (this.$refs.PRE_TASK) {
if (!this.$refs.PRE_TASK._verification()) {
return
}
else {
} 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
let targetId = this.nodeData.id
// Update new connections
this.preTasksToAdd.map(sourceId => {
@ -609,7 +587,7 @@
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}
HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 }
})
})
@ -617,7 +595,7 @@
let currentConnects = plumbIns.getAllConnections()
let len = currentConnects.length
for (let i = 0; i < len; i++) {
if (this.preTasksToDelete.indexOf(currentConnects[i].sourceId) > -1 && currentConnects[i].targetId == targetId) {
if (this.preTasksToDelete.indexOf(currentConnects[i].sourceId) > -1 && currentConnects[i].targetId === targetId) {
plumbIns.deleteConnection(currentConnects[i])
i -= 1
len -= 1
@ -626,14 +604,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 +644,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())
@ -695,7 +673,7 @@
fromThis: this
})
}
},
},
watch: {
/**
* Watch the item change, cache the value it changes
@ -710,16 +688,16 @@
// Backfill data
let taskList = this.store.state.dag.tasks
//fillback use cacheTasks
// 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
}
@ -735,22 +713,20 @@
this.maxRetryTimes = o.maxRetryTimes
this.retryInterval = o.retryInterval
this.delayTime = o.delayTime
if(o.conditionResult) {
if (o.conditionResult) {
this.successBranch = o.conditionResult.successNode[0]
this.failedBranch = o.conditionResult.failedNode[0]
}
// If the workergroup has been deleted, set the default workergroup
var hasMatch = false;
// If the workergroup has been deleted, set the default workergroup
for (let i = 0; i < this.store.state.security.workerGroupsListAll.length; i++) {
var workerGroup = this.store.state.security.workerGroupsListAll[i].id
if (o.workerGroup == workerGroup) {
hasMatch = true;
break;
let workerGroup = this.store.state.security.workerGroupsListAll[i].id
if (o.workerGroup === workerGroup) {
break
}
}
if(o.workerGroup == undefined) {
this.store.dispatch('dag/getTaskInstanceList',{
pageSize: 10, pageNo: 1, processInstanceId: this.instanceId, name: o.name
if (o.workerGroup === undefined) {
this.store.dispatch('dag/getTaskInstanceList', {
pageSize: 10, pageNo: 1, processInstanceId: this.nodeData.instanceId, name: o.name
}).then(res => {
this.workerGroup = res.totalList[0].workerGroup
})
@ -761,7 +737,6 @@
this.params = o.params || {}
this.dependence = o.dependence || {}
this.cacheDependence = o.dependence || {}
} else {
this.workerGroup = this.store.state.security.workerGroupsListAll[0].id
}
@ -769,7 +744,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(',')
@ -780,10 +755,10 @@
},
mounted () {
let self = this
$("#cancelBtn").mousedown(function(event){
event.preventDefault();
$('#cancelBtn').mousedown(function (event) {
event.preventDefault()
self.close()
});
})
},
updated () {
},
@ -796,14 +771,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
// 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,
@ -841,7 +816,7 @@
mDependentTimeout,
mPriority,
mWorkerGroups,
mPreTasks,
mPreTasks
}
}
</script>

71
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
View File

@ -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-full-screen"></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-minus"></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>
@ -67,7 +67,7 @@
*/
const handerTextareaSize = (isH = 0) => {
$('body').find('.tooltip.fade.top.in').remove()
return $('.textarea-ft').css({ 'height': `${$('.content-log-box').height() - isH}px` })
return $('.textarea-ft').css({ height: `${$('.content-log-box').height() - isH}px` })
}
let content = ''
@ -89,7 +89,7 @@
props: {
item: {
type: Object,
default: {}
default: Object
},
source: {
type: String,
@ -118,8 +118,8 @@
},
_ckLog () {
this.isLog = true
this.store.dispatch('dag/getLog', this._rtParam).then(res => {
this.$message.destroy()
if (!res.data) {
this.isData = false
setTimeout(() => {
@ -138,7 +138,6 @@
}, 800)
}
}).catch(e => {
this.$message.destroy()
this.$message.error(e.msg || '')
})
},
@ -169,7 +168,7 @@
* Download log
*/
_downloadLog () {
downloadFile('/dolphinscheduler/log/download-log', {
downloadFile('/log/download-log', {
taskInstanceId: this.stateId || this.logId
})
},
@ -180,8 +179,8 @@
this.loadingIndex = this.loadingIndex - 1
this._ckLog()
}, 1000, {
'leading': false,
'trailing': true
leading: false,
trailing: true
}),
/**
* down
@ -190,8 +189,8 @@
this.loadingIndex = this.loadingIndex + 1
this._ckLog()
}, 1000, {
'leading': false,
'trailing': true
leading: false,
trailing: true
}),
/**
* Monitor scroll bar
@ -203,11 +202,7 @@
// Listen for scrollbar events
if (($this.scrollTop() + $this.height()) === $this.height()) {
if (self.loadingIndex > 0) {
self.$message.loading({
content: `${i18n.$t('Loading Log...')}`,
duration: 0,
closable: false
})
self.$message.info(`${i18n.$t('Loading Log...')}`)
self._onUp()
}
}
@ -215,11 +210,7 @@
if ($this.get(0).scrollHeight === ($this.height() + $this.scrollTop())) {
// No data is not requested
if (self.isData) {
self.$message.loading({
content: `${i18n.$t('Loading Log...')}`,
duration: 0,
closable: false
})
self.$message.info(`${i18n.$t('Loading Log...')}`)
self._onDown()
}
}
@ -240,11 +231,7 @@
created () {
// Source is a task instance
if (this.source === 'list') {
this.$message.loading({
content: `${i18n.$t('Loading Log...')}`,
duration: 0,
closable: false
})
this.$message.info(`${i18n.$t('Loading Log...')}`)
this._ckLog()
}
},
@ -301,27 +288,30 @@
top: 12px;
a{
color: #0097e0;
font-size: 12px;
margin-left: 10px;
i {
em {
font-size: 17px;
font-weight: 400;
text-decoration: none !important;
vertical-align: middle;
}
}
.clock {
>i {
>em {
font-size: 20px;
vertical-align: middle;
transform: scale(1);
}
}
.refresh-log {
>i {
>em {
text-decoration: none;
font-size: 20px;
vertical-align: middle;
transform: scale(1);
}
&.active {
>i {
>em {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
@ -368,5 +358,16 @@
}
}
}
@-webkit-keyframes rotateloading{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotateloading{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotateloading{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotateloading{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
</style>

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

@ -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 || ''
@ -126,7 +128,7 @@
this.$emit('on-dsData', {
type: this.type,
datasource: val
});
})
}
},
created () {

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

@ -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>
@ -74,7 +74,7 @@
props: {
dependItemList: Array,
index: Number,
dependTaskList:Array
dependTaskList: Array
},
model: {
prop: 'dependItemList',
@ -109,7 +109,6 @@
* remove task
*/
_remove (i) {
this.dependTaskList[this.index].dependItemList.splice(i,1)
this._removeTip()
if (!this.dependItemList.length || this.dependItemList.length === 0) {
this.$emit('on-delete-all', {
@ -174,20 +173,20 @@
/**
* change process get dependItemList
*/
_onChangeProjectId ({ value }) {
_onChangeProjectId (value) {
this._getProcessByProjectId(value).then(definitionList => {
/*this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item))*/
/* this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item)) */
let definitionId = definitionList[0].value
this._getDependItemList(definitionId).then(depTasksList => {
let item = this.dependItemList[this.itemIndex]
// init set depTasks All
item.depTasks = 'ALL'
// set dependItemList item data
this.$set(this.dependItemList, this.itemIndex, this._cpOldParams(value,definitionId, definitionList,depTasksList, item))
this.$set(this.dependItemList, this.itemIndex, this._cpOldParams(value, definitionId, definitionList, depTasksList, item))
})
})
},
_onChangeDefinitionId ({ value }) {
_onChangeDefinitionId (value) {
// get depItem list data
this._getDependItemList(value).then(depTasksList => {
let item = this.dependItemList[this.itemIndex]
@ -197,7 +196,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)
@ -212,7 +211,7 @@
depTasksList: depTasksList,
cycle: 'day',
dateValue: 'today',
dateValueList: _.cloneDeep(dateValueList['day']),
dateValueList: _.cloneDeep(dateValueList.day),
state: ''
}
},
@ -231,7 +230,7 @@
}
},
_cpOldParams (value,definitionId, definitionList,depTasksList, item) {
_cpOldParams (value, definitionId, definitionList, depTasksList, item) {
return {
projectId: value,
definitionList: definitionList,

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

@ -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>
@ -82,7 +83,7 @@
// Current execution index
httpParamsIndex: null,
// 参数位置的下拉框
positionList:positionList
positionList: positionList
}
},
mixins: [disabledState],
@ -141,7 +142,7 @@
if (!v.prop) {
flag = false
}
if(v.value === ''){
if (v.value === '') {
this.$message.warning(`${i18n.$t('value is empty')}`)
return false
}
@ -172,7 +173,7 @@
}
})
if (!flag) {
this.$message.warning(`${i18n.$t('value is empty')}`)
this.$message.warning(`${i18n.$t('value is empty')}`)
return false
}
this.$emit('on-http-params', _.cloneDeep(this.httpParamsList))
@ -190,7 +191,7 @@
},
computed: {
inputStyle () {
return "width:30%"
return 'width:30%'
}
},
mounted () {
@ -201,35 +202,41 @@
<style lang="scss" rel="stylesheet/scss">
.user-def-params-model {
.el-input__inner {
height: 32px;
line-height: 32px;
}
.select-listpp {
margin-bottom: 6px;
.lt-add {
padding-left: 4px;
line-height: 32px;
a {
.iconfont {
font-size: 18px;
.iconfont, [class^="el-icon"] {
font-size: 17px;
vertical-align: middle;
margin-bottom: -2px;
display: inline-block;
margin-top: 0;
}
}
}
}
.add {
line-height: 32px;
a {
color: #000;
.iconfont {
font-size: 16px;
.iconfont, [class^="el-icon"] {
font-size: 18px;
vertical-align: middle;
display: inline-block;
margin-top: -5px;
margin-top: 0px;
}
}
}
.add-dp{
.add-dp {
a {
color: #0097e0;
.iconfont {
.iconfont, [class^="el-icon"] {
font-size: 18px;
vertical-align: middle;
display: inline-block;
@ -239,4 +246,3 @@
}
}
</style>

116
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue Normal file
View File

@ -0,0 +1,116 @@
/*
* 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 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>

68
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue Normal file
View File

@ -0,0 +1,68 @@
/*
* 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="clearfix list">
<div class="text-box">
<span><slot name="text"></slot></span>
</div>
<div class="cont-box">
<div class="label-box">
<slot name="content"></slot>
</div>
</div>
<div class="text-box">
<span><slot name="text-2"></slot></span>
</div>
<div class="cont-box">
<div class="label-box">
<slot name="content-2"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'list-4-box'
}
</script>
<style lang="scss" rel="stylesheet/scss">
.cont-box {
.label-box {
.ans-radio-group {
margin-top: 7px;
}
}
}
.v-checkbox-wrapper {
&.v-checkbox-wrapper-disabled {
color: #999 ;
.v-checkbox {
.v-checkbox-inner{
border-color:#dddee1;
background: #f7f7f7;
color: #bbbec4 ;
&:after{
border: 2px solid #ddd;
border-top: 0;
border-left: 0;
}
}
}
}
}
</style>

2
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
View File

@ -40,7 +40,6 @@
}
}
}
.v-checkbox-wrapper {
&.v-checkbox-wrapper-disabled {
color: #999 ;
@ -58,5 +57,4 @@
}
}
}
</style>

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

@ -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>
@ -193,7 +197,7 @@
},
computed: {
inputStyle () {
return `width:${this.hide ? 160 : 262}px`
return `width:${this.hide ? 160 : 252}px`
}
},
mounted () {
@ -208,31 +212,33 @@
margin-bottom: 6px;
.lt-add {
padding-left: 4px;
line-height: 32px;
a {
.iconfont {
font-size: 18px;
.iconfont, [class^="el-icon"] {
font-size: 17px;
vertical-align: middle;
margin-bottom: -2px;
display: inline-block;
margin-top: 0;
}
}
}
}
.add {
line-height: 32px;
a {
color: #000;
.iconfont {
font-size: 16px;
.iconfont, [class^="el-icon"] {
font-size: 18px;
vertical-align: middle;
display: inline-block;
margin-top: -5px;
margin-top: 0;
}
}
}
.add-dp{
.add-dp {
a {
color: #0097e0;
.iconfont {
.iconfont, [class^="el-icon"] {
font-size: 18px;
vertical-align: middle;
display: inline-block;

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

@ -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>
@ -45,7 +45,7 @@
</template>
<script>
import _ from 'lodash'
import { cycleList, dateValueList, nodeStatusList } from './commcon'
import { cycleList, nodeStatusList } from './commcon'
import disabledState from '@/module/mixin/disabledState'
export default {
name: 'node-status',
@ -64,7 +64,7 @@
props: {
dependItemList: Array,
index: Number,
dependTaskList:Array,
dependTaskList: Array,
preNode: Array
},
model: {
@ -78,7 +78,7 @@
_add () {
// btn loading
this.isLoading = true
this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
// remove tooltip
this._removeTip()
@ -87,7 +87,6 @@
* remove task
*/
_remove (i) {
this.dependTaskList[this.index].dependItemList.splice(i,1)
this._removeTip()
if (!this.dependItemList.length || this.dependItemList.length === 0) {
this.$emit('on-delete-all', {
@ -137,7 +136,7 @@
status: ''
}
},
_rtOldParams (value,depTasksList, item) {
_rtOldParams (value, depTasksList, item) {
return {
depTasks: '',
status: ''
@ -159,7 +158,6 @@
this.isInstance = this.router.history.current.name === 'projects-instance-details'
// get processlist
this._getProjectList().then(() => {
let projectId = this.projectList[0].value
if (!this.dependItemList.length) {
this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams()))
} else {

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

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

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

@ -27,14 +27,10 @@
</div>
</div>
</m-list-box>
<a class="ans-modal-box-close">
<em class="ans-icon-min" @click="closeModal"></em>
</a>
</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'
@ -46,7 +42,7 @@
data () {
return {
// script
rawScript: '',
rawScript: ''
}
},
mixins: [disabledState],
@ -59,13 +55,13 @@
*/
_handlerEditor () {
// editor
let self =this
let self = this
editor = codemirror('code-shell-mirror1', {
mode: 'shell',
readOnly: this.isDetails
})
editor.on("change",function(){
self.$emit('getSriptBoxValue',editor.getValue())
editor.on('change', function () {
self.$emit('getSriptBoxValue', editor.getValue())
})
this.keypress = () => {
@ -82,10 +78,6 @@
editor.setValue(this.rawScript)
return editor
},
closeModal() {
let self = this
self.$emit('closeAble')
}
},
watch: {},
@ -117,8 +109,7 @@
}
.from-mirror1 {
.CodeMirror {
min-height: 600px;
max-height: 700px;
height: calc(70vh - 90px);
}
}
</style>

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

@ -16,22 +16,22 @@
*/
<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>
import _ from 'lodash'
import { sqlTypeList } from './commcon'
import disabledState from '@/module/mixin/disabledState'
export default {
@ -53,14 +53,14 @@
* return sqlType
*/
_handleSqlTypeChanged (val) {
this.$emit('on-sqlType', val.value)
this.$emit('on-sqlType', val)
}
},
watch: {
},
created () {
this.$nextTick(() => {
if (this.sqlType != 0) {
if (this.sqlType !== 0) {
this.sqlTypeId = this.sqlType
} else {
this.sqlTypeId = this.sqlTypeList[0].id

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

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

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

@ -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>
:label="city.code">
</el-option>
</el-select>
</div>
</template>
<script>
@ -92,7 +93,7 @@
},
type (a) {
// The props parameter needs to be changed due to the scene.
this.udfs = ''
this.$emit('on-udfsData', '')
if (a === 'HIVE') {
this._getUdfList()
} else {

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

@ -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,9 +99,10 @@
$('body').find('.tooltip.fade.top.in').remove()
},
_onDeleteAll (i) {
this.dependTaskList.map((item,i)=>{
if(item.dependItemList.length === 0){
this.dependTaskList.splice(i,1)
this.dependTaskList[this.index].dependItemList.splice(i, 1)
this.dependTaskList.map((item, i) => {
if (item.dependItemList.length === 0) {
this.dependTaskList.splice(i, 1)
}
})
// this._deleteDep(i)
@ -109,7 +110,7 @@
_setGlobalRelation () {
this.relation = this.relation === 'AND' ? 'OR' : 'AND'
},
getDependTaskList(i){
getDependTaskList (i) {
// console.log('getDependTaskList',i)
},
_setRelation (i) {
@ -142,20 +143,17 @@
},
created () {
let o = this.backfillItem
let dependentResult = $(`#${o.id}`).data('dependent-result') || {}
// Does not represent an empty object backfill
if (!_.isEmpty(o)) {
this.relation = _.cloneDeep(o.dependence.relation) || 'AND'
this.dependTaskList = _.cloneDeep(o.dependence.dependTaskList) || []
let defaultState = this.isDetails ? 'WAITING' : ''
// Process instance return status display matches by key
_.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => {
$(`#${o.id}`).siblings().each(function(){
if(v1.depTasks == $(this).text()) {
$(`#${o.id}`).siblings().each(function () {
if (v1.depTasks === $(this).text()) {
v1.state = $(this).attr('data-dependent-depstate')
}
});
})
}))
}
},

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

@ -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-full-screen" @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>
@ -144,6 +141,27 @@
</div>
</m-list-box>
</div>
<div class="clearfix list">
<div class="text-box">
<span>{{$t('Running Memory')}}</span>
</div>
<div class="cont-box">
<span >{{$t('Min Memory')}}</span>
<m-select-input v-model="xms" :list="[1,2,3,4]">
</m-select-input>
<span>&nbsp;&nbsp;&nbsp;G &nbsp;&nbsp;</span>
<span >{{$t('Max Memory')}}</span>
<m-select-input v-model="xmx" :list="[1,2,3,4]">
</m-select-input>
<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>
@ -196,6 +214,12 @@
// Custom parameter
localParams: [],
customConfig: 0,
// jvm memory xms
xms: 1,
// jvm memory xms
xmx: 1,
scriptBoxDialog: false,
item: ''
}
},
mixins: [disabledState],
@ -204,64 +228,15 @@
createNodeId: Number
},
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()
}
})
}
})
setEditorVal () {
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) {
if (is) {
this.customConfig = 1
setTimeout(() => {
this._handlerJsonEditor()
@ -309,7 +284,7 @@
* verification
*/
_verification () {
if(this.customConfig) {
if (this.customConfig) {
if (!jsonEditor.getValue()) {
this.$message.warning(`${i18n.$t('Please enter a JSON Statement(required)')}`)
return false
@ -324,7 +299,9 @@
this.$emit('on-params', {
customConfig: this.customConfig,
json: jsonEditor.getValue(),
localParams: this.localParams
localParams: this.localParams,
xms: +this.xms,
xmx: +this.xmx
})
return true
} else {
@ -370,7 +347,9 @@
jobSpeedByte: this.jobSpeedByte * 1024,
jobSpeedRecord: this.jobSpeedRecord,
preStatements: this.preStatements,
postStatements: this.postStatements
postStatements: this.postStatements,
xms: +this.xms,
xmx: +this.xmx
})
return true
}
@ -440,23 +419,25 @@
dataSource: this.rtDatasource,
dtType: this.dtType,
dataTarget: this.rtDatatarget,
sql: editor?editor.getValue():'',
sql: editor ? editor.getValue() : '',
targetTable: this.targetTable,
jobSpeedByte: this.jobSpeedByte * 1024,
jobSpeedRecord: this.jobSpeedRecord,
preStatements: this.preStatements,
postStatements: this.postStatements
});
postStatements: this.postStatements,
xms: +this.xms,
xmx: +this.xmx
})
},
_destroyEditor () {
if (editor) {
if (editor) {
editor.toTextArea() // Uninstall
editor.off($('.code-sql-mirror'), 'keypress', this.keypress)
editor.off($('.code-sql-mirror'), 'changes', this.changes)
}
},
_destroyJsonEditor () {
if (jsonEditor) {
if (jsonEditor) {
jsonEditor.toTextArea() // Uninstall
jsonEditor.off($('.code-json-mirror'), 'keypress', this.keypress)
jsonEditor.off($('.code-json-mirror'), 'changes', this.changes)
@ -468,8 +449,11 @@
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
// set jvm memory
this.xms = o.params.xms || 1
this.xmx = o.params.xmx || 1
// backfill
if(o.params.customConfig == 0) {
if (o.params.customConfig === 0) {
this.customConfig = 0
this.enable = false
this.dsType = o.params.dsType || ''
@ -491,7 +475,7 @@
}
},
mounted () {
if(this.customConfig) {
if (this.customConfig) {
setTimeout(() => {
this._handlerJsonEditor()
}, 200)
@ -515,9 +499,9 @@
}
},
watch: {
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this._cacheParams();
this._cacheParams()
}
},
computed: {
@ -535,13 +519,6 @@
}
}
},
components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput }
components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
</style>

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

@ -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"
@ -97,9 +97,10 @@
$('body').find('.tooltip.fade.top.in').remove()
},
_onDeleteAll (i) {
this.dependTaskList.map((item,i)=>{
if(item.dependItemList.length === 0){
this.dependTaskList.splice(i,1)
this.dependTaskList[this.index].dependItemList.splice(i, 1)
this.dependTaskList.map((item, i) => {
if (item.dependItemList.length === 0) {
this.dependTaskList.splice(i, 1)
}
})
// this._deleteDep(i)
@ -107,7 +108,7 @@
_setGlobalRelation () {
this.relation = this.relation === 'AND' ? 'OR' : 'AND'
},
getDependTaskList(i){
getDependTaskList (i) {
// console.log('getDependTaskList',i)
},
_setRelation (i) {
@ -147,7 +148,9 @@
this.dependTaskList = _.cloneDeep(o.dependence.dependTaskList) || []
let defaultState = this.isDetails ? 'WAITING' : ''
// Process instance return status display matches by key
_.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => v1.state = dependentResult[`${v1.definitionId}-${v1.depTasks}-${v1.cycle}-${v1.dateValue}`] || defaultState))
_.map(this.dependTaskList, v => _.map(v.dependItemList, v1 => {
v1.state = dependentResult[`${v1.definitionId}-${v1.depTasks}-${v1.cycle}-${v1.dateValue}`] || defaultState
}))
}
},
mounted () {

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

@ -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,103 +57,109 @@
<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>
<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">
<div class="clearfix list">
<span class="sp1" style="word-break:break-all">{{$t('jobManagerMemory')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="jobManagerMemory"
:placeholder="$t('Please enter jobManager memory')"
style="width: 200px;"
autocomplete="off">
</x-input>
</span>
<span class="sp1 sp3">{{$t('taskManagerMemory')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="taskManagerMemory"
:placeholder="$t('Please enter the taskManager memory')"
style="width: 186px;"
autocomplete="off">
</x-input>
</span>
<m-list-4-box v-if="deployMode === 'cluster'">
<div slot="text">{{$t('App Name')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="appName"
:placeholder="$t('Please enter app name(optional)')">
</el-input>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('slot')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="slot"
:placeholder="$t('Please enter solt number')"
style="width: 200px;"
autocomplete="off">
</x-input>
</span>
<div v-if="flinkVersion !== '>=1.10'">
<span class="sp1 sp3">{{$t('taskManager')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="taskManager"
:placeholder="$t('Please enter taskManager number')"
style="width: 186px;"
autocomplete="off">
</x-input>
</span>
</div>
</m-list-4-box>
<m-list-4-box v-if="deployMode === 'cluster'">
<div slot="text">{{$t('JobManager Memory')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="jobManagerMemory"
:placeholder="$t('Please enter JobManager memory')">
</el-input>
</div>
</div>
<div slot="text-2">{{$t('TaskManager Memory')}}</div>
<div slot="content-2">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="taskManagerMemory"
:placeholder="$t('Please enter TaskManager memory')">
</el-input>
</div>
</m-list-4-box>
<m-list-4-box v-if="deployMode === 'cluster'">
<div slot="text">{{$t('Slot Number')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="slot"
:placeholder="$t('Please enter Slot number')">
</el-input>
</div>
<div slot="text-2" v-if="flinkVersion === '<1.10'">{{$t('TaskManager Number')}}</div>
<div slot="content-2" v-if="flinkVersion === '<1.10'">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="taskManager"
:placeholder="$t('Please enter TaskManager number')">
</el-input>
</div>
</m-list-4-box>
<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 +174,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>
@ -181,7 +188,7 @@
import i18n from '@/module/i18n'
import mLocalParams from './_source/localParams'
import mListBox from './_source/listBox'
import mResources from './_source/resources'
import mList4Box from './_source/list4Box'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import disabledState from '@/module/mixin/disabledState'
@ -214,6 +221,8 @@
jobManagerMemory: '1G',
// taskManager Memory
taskManagerMemory: '2G',
// Flink Job Name
appName: '',
// Command line argument
mainArgs: '',
// Other parameters
@ -223,17 +232,17 @@
// Program type(List)
programTypeList: [{ code: 'JAVA' }, { code: 'SCALA' }, { code: 'PYTHON' }],
flinkVersion:'<1.10',
flinkVersion: '<1.10',
// Flink Versions(List)
flinkVersionList: [{ code: '<1.10' }, { code: '>=1.10' }],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
},
allNoResources: [],
noRes: [],
noRes: []
}
},
props: {
@ -244,10 +253,10 @@
/**
* getResourceId
*/
marjarId(name) {
this.store.dispatch('dag/getResourceId',{
marjarId (name) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+name
fullName: '/' + name
}).then(res => {
this.mainJar = res.id
}).catch(e => {
@ -281,14 +290,13 @@
return false
}
if (!this.mainJar) {
this.$message.warning(`${i18n.$t('Please enter main jar package')}`)
return false
}
if (!this.jobManagerMemory) {
this.$message.warning(`${i18n.$t('Please enter jobManager memory')}`)
this.$message.warning(`${i18n.$t('Please enter JobManager memory')}`)
return false
}
@ -298,7 +306,7 @@
}
if (!this.taskManagerMemory) {
this.$message.warning(`${i18n.$t('Please enter the taskManager memory')}`)
this.$message.warning(`${i18n.$t('Please enter TaskManager memory')}`)
return false
}
@ -308,7 +316,7 @@
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
@ -326,7 +334,7 @@
},
deployMode: this.deployMode,
resourceList: _.map(this.resourceList, v => {
return {id: v}
return { id: v }
}),
localParams: this.localParams,
flinkVersion: this.flinkVersion,
@ -334,61 +342,62 @@
taskManager: this.taskManager,
jobManagerMemory: this.jobManagerMemory,
taskManagerMemory: this.taskManagerMemory,
appName: this.appName,
mainArgs: this.mainArgs,
others: this.others,
programType: this.programType
})
return true
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -397,22 +406,22 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
this.mainJarList = this.mainJarList.concat(noResources)
}
}
},
}
},
watch: {
// Listening type
@ -421,49 +430,55 @@
this.mainClass = ''
}
},
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val);
}
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
this.$emit('on-cache-params', val)
},
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
result.push(item1)
}
})
})
this.noRes = result
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
mainClass: this.mainClass,
mainJar: {
id: this.mainJar
},
deployMode: this.deployMode,
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams,
slot: this.slot,
taskManager: this.taskManager,
jobManagerMemory: this.jobManagerMemory,
taskManagerMemory: this.taskManagerMemory,
appName: this.appName,
mainArgs: this.mainArgs,
others: this.others,
programType: this.programType
@ -471,104 +486,68 @@
}
},
created () {
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if(o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if(o.params.mainJar.res=='') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.deployMode = o.params.deployMode || ''
this.flinkVersion = o.params.flinkVersion || '<1.10'
this.slot = o.params.slot || 1
this.taskManager = o.params.taskManager || '2'
this.jobManagerMemory = o.params.jobManagerMemory || '1G'
this.taskManagerMemory = o.params.taskManagerMemory || '2G'
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'SCALA'
// backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
type: 'FILE',
fullName: '/'+v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if (o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if (o.params.mainJar.res === '') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.deployMode = o.params.deployMode || ''
this.flinkVersion = o.params.flinkVersion || '<1.10'
this.slot = o.params.slot || 1
this.taskManager = o.params.taskManager || '2'
this.jobManagerMemory = o.params.jobManagerMemory || '1G'
this.taskManagerMemory = o.params.taskManagerMemory || '2G'
this.appName = o.params.appName || ''
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'SCALA'
// backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
}
},
mounted () {
},
components: { mLocalParams, mListBox, mResources, Treeselect }
components: { mLocalParams, mListBox, mList4Box, Treeselect }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.flink-model {
.list-box-4p {
.list {
margin-bottom: 14px;
.sp1 {
float: left;
width: 112px;
text-align: right;
margin-right: 10px;
font-size: 14px;
color: #777;
display: inline-block;
padding-top: 6px;
}
.sp2 {
float: left;
margin-right: 4px;
}
.sp3 {
width: 176px;
}
}
}
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
</style>

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

@ -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,43 +61,40 @@
<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>
<m-list-box >
<div slot="text">{{$t('Timeout Settings')}}</div>
<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 +106,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>
@ -144,8 +143,8 @@
data () {
return {
timeoutSettings: false,
connectTimeout : 60000 ,
socketTimeout : 60000 ,
connectTimeout: 60000,
socketTimeout: 60000,
url: '',
condition: '',
@ -154,7 +153,7 @@
httpMethod: 'GET',
httpMethodList: [{ code: 'GET' }, { code: 'POST' }, { code: 'HEAD' }, { code: 'PUT' }, { code: 'DELETE' }],
httpCheckCondition: 'STATUS_CODE_DEFAULT',
httpCheckConditionList: cookies.get('language') == 'en_US'? [{ code: 'STATUS_CODE_DEFAULT',value:'Default response code 200' }, { code: 'STATUS_CODE_CUSTOM',value:'Custom response code' }, { code: 'BODY_CONTAINS',value:'Content includes' }, { code: 'BODY_NOT_CONTAINS',value:'Content does not contain' }]:[{ code: 'STATUS_CODE_DEFAULT',value:'默认响应码200' }, { code: 'STATUS_CODE_CUSTOM',value:'自定义响应码' }, { code: 'BODY_CONTAINS',value:'内容包含' }, { code: 'BODY_NOT_CONTAINS',value:'内容不包含' }]
httpCheckConditionList: cookies.get('language') === 'en_US' ? [{ code: 'STATUS_CODE_DEFAULT', value: 'Default response code 200' }, { code: 'STATUS_CODE_CUSTOM', value: 'Custom response code' }, { code: 'BODY_CONTAINS', value: 'Content includes' }, { code: 'BODY_NOT_CONTAINS', value: 'Content does not contain' }] : [{ code: 'STATUS_CODE_DEFAULT', value: '默认响应码200' }, { code: 'STATUS_CODE_CUSTOM', value: '自定义响应码' }, { code: 'BODY_CONTAINS', value: '内容包含' }, { code: 'BODY_NOT_CONTAINS', value: '内容不包含' }]
}
},
props: {
@ -205,8 +204,8 @@
httpMethod: this.httpMethod,
httpCheckCondition: this.httpCheckCondition,
condition: this.condition,
connectTimeout : this.connectTimeout ,
socketTimeout : this.socketTimeout
connectTimeout: this.connectTimeout,
socketTimeout: this.socketTimeout
})
return true
}
@ -220,8 +219,8 @@
httpMethod: this.httpMethod,
httpCheckCondition: this.httpCheckCondition,
condition: this.condition,
connectTimeout : this.connectTimeout ,
socketTimeout : this.socketTimeout
connectTimeout: this.connectTimeout,
socketTimeout: this.socketTimeout
}
}
},
@ -231,32 +230,32 @@
* @param val
*/
cacheParams (val) {
this.$emit('on-cache-params', val);
this.$emit('on-cache-params', val)
}
},
created () {
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.url = o.params.url || ''
this.httpMethod = o.params.httpMethod || 'GET'
this.httpCheckCondition = o.params.httpCheckCondition || 'DEFAULT'
this.condition = o.params.condition || ''
this.connectTimeout = o.params.connectTimeout
this.socketTimeout = o.params.socketTimeout
if(this.connectTimeout != 60000 || this.socketTimeout != 60000 ){
this.timeoutSettings = true
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
let httpParams = o.params.httpParams || []
if (httpParams.length) {
this.httpParams = httpParams
}
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.url = o.params.url || ''
this.httpMethod = o.params.httpMethod || 'GET'
this.httpCheckCondition = o.params.httpCheckCondition || 'DEFAULT'
this.condition = o.params.condition || ''
this.connectTimeout = o.params.connectTimeout
this.socketTimeout = o.params.socketTimeout
if (this.connectTimeout !== 60000 || this.socketTimeout !== 60000) {
this.timeoutSettings = true
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
let httpParams = o.params.httpParams || []
if (httpParams.length) {
this.httpParams = httpParams
}
}
},
mounted () {
},

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

@ -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>
@ -100,7 +100,6 @@
import _ from 'lodash'
import i18n from '@/module/i18n'
import mListBox from './_source/listBox'
import mResources from './_source/resources'
import mLocalParams from './_source/localParams'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@ -131,7 +130,7 @@
programType: 'JAVA',
// Program type(List)
programTypeList: [{ code: 'JAVA' }, { code: 'PYTHON' }],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
@ -148,10 +147,10 @@
/**
* getResourceId
*/
marjarId(name) {
this.store.dispatch('dag/getResourceId',{
marjarId (name) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+name
fullName: '/' + name
}).then(res => {
this.mainJar = res.id
}).catch(e => {
@ -176,55 +175,55 @@
_onCacheResourcesData (a) {
this.cacheResourceList = a
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -233,15 +232,15 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
@ -264,7 +263,7 @@
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
@ -280,7 +279,7 @@
id: this.mainJar
},
resourceList: _.map(this.resourceList, v => {
return {id: v}
return { id: v }
}),
localParams: this.localParams,
mainArgs: this.mainArgs,
@ -288,8 +287,8 @@
programType: this.programType
})
return true
},
}
},
watch: {
/**
@ -300,43 +299,48 @@
this.mainClass = ''
}
},
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val);
}
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
this.$emit('on-cache-params', val)
},
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
result.push(item1)
}
})
})
this.noRes = result
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
mainClass: this.mainClass,
mainJar: {
id: this.mainJar
},
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams,
mainArgs: this.mainArgs,
others: this.others,
@ -345,94 +349,62 @@
}
},
created () {
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if(o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if(o.params.mainJar.res=='') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'JAVA'
// backfill resourceList
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
type: 'FILE',
fullName: '/'+v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let backResource = o.params.resourceList || []
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if (o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if (o.params.mainJar.res === '') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'JAVA'
// backfill resourceList
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let backResource = o.params.resourceList || []
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
}
},
mounted () {
},
components: { mLocalParams, mListBox, mResources, Treeselect }
components: { mLocalParams, mListBox, Treeselect }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.spark-model {
.list-box-4p {
.list {
margin-bottom: 14px;
.sp1 {
float: left;
width: 112px;
text-align: right;
margin-right: 10px;
font-size: 14px;
color: #777;
display: inline-block;
padding-top: 6px;
}
.sp2 {
float: left;
margin-right: 4px;
}
}
}
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
</style>

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

@ -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>
@ -52,15 +53,15 @@
},
data () {
return {
preTasksSelectorId: '_preTasksSelectorId', // Refresh target vue-component by changing id
preTasksSelectorId: '_preTasksSelectorId', // Refresh target vue-component by changing id
preTasks: [],
preTasksOld: [],
preTasksOld: []
}
},
mounted () {
this.preTasks = this.backfillItem['preTasks'] || this.preTasks
this.preTasks = this.backfillItem.preTasks || this.preTasks
this.preTasksOld = this.preTasks
// Refresh target vue-component by changing id
this.$nextTick(() => {
this.preTasksSelectorId = 'preTasksSelectorId'
@ -68,7 +69,7 @@
},
computed: {
preTaskList: function () {
let currentTaskId = this.backfillItem['id'] || this.id
let currentTaskId = this.backfillItem.id || this.id
let cacheTasks = Object.assign({}, this.store.state.dag.tasks)
let keys = Object.keys(cacheTasks)
for (let i = 0; i < keys.length; i++) {
@ -91,7 +92,7 @@
// preTaskIds used to delete connection
preTasksToDelete: function () {
return this.preTasksOld.filter(taskId => this.preTasks.indexOf(taskId) === -1)
},
}
},
methods: {
// Pass data to parent-level to process dag
@ -99,7 +100,7 @@
this.$emit('on-pre-tasks', {
preTasks: this.preTasks,
preTasksToAdd: this.preTasksToAdd,
preTasksToDelete: this.preTasksToDelete,
preTasksToDelete: this.preTasksToDelete
})
return true
}

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

@ -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>
@ -122,9 +122,9 @@
}
},
watch: {
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val);
this.$emit('on-cache-params', val)
}
},
computed: {
@ -162,6 +162,3 @@
components: { mListBox, mDatasource, mLocalParams }
}
</script>
<style lang="scss" rel="stylesheet/scss">
</style>

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

@ -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-full-screen" @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>
@ -61,7 +61,6 @@
import i18n from '@/module/i18n'
import mListBox from './_source/listBox'
import mScriptBox from './_source/scriptBox'
import mResources from './_source/resources'
import mLocalParams from './_source/localParams'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@ -84,13 +83,15 @@
// Cache ResourceList
cacheResourceList: [],
resourceOptions: [],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
},
allNoResources: [],
noRes: []
noRes: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -104,33 +105,12 @@
_onLocalParams (a) {
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()
}
})
}
})
setEditorVal () {
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
},
/**
* return resourceList
@ -160,7 +140,7 @@
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
@ -168,7 +148,7 @@
// storage
this.$emit('on-params', {
resourceList: _.map(this.resourceList, v => {
return {id: v}
return { id: v }
}),
localParams: this.localParams,
rawScript: editor.getValue()
@ -200,55 +180,55 @@
return editor
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.resourceOptions.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.resourceOptions.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -257,15 +237,15 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
@ -275,39 +255,44 @@
}
},
watch: {
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val);
}
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.resourceOptions.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
this.$emit('on-cache-params', val)
},
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
result.push(item1)
}
})
})
this.noRes = result
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.resourceOptions.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams
}
}
@ -327,10 +312,10 @@
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+v.res
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
@ -362,21 +347,6 @@
editor.toTextArea() // Uninstall
editor.off($('.code-python-mirror'), 'keypress', this.keypress)
},
components: { mLocalParams, mListBox, mResources,Treeselect }
components: { mLocalParams, mListBox, Treeselect, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
</style>

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

@ -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-full-screen" @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"
append-to-body="true"
width="80%">
<m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
</el-dialog>
</div>
</template>
<script>
@ -68,7 +63,6 @@
import i18n from '@/module/i18n'
import mListBox from './_source/listBox'
import mScriptBox from './_source/scriptBox'
import mResources from './_source/resources'
import mLocalParams from './_source/localParams'
import disabledState from '@/module/mixin/disabledState'
import Treeselect from '@riophae/vue-treeselect'
@ -92,13 +86,15 @@
cacheResourceList: [],
// define options
options: [],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
},
allNoResources: [],
noRes: []
noRes: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -112,33 +108,16 @@
_onLocalParams (a) {
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()
}
})
}
})
setEditorVal () {
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
// this.scriptBoxDialog = false
},
closeAble () {
// this.scriptBoxDialog = false
},
/**
* return resourceList
@ -168,12 +147,12 @@
return false
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
// Process resourcelist
let dataProcessing= _.map(this.resourceList, v => {
let dataProcessing = _.map(this.resourceList, v => {
return {
id: v
}
@ -210,55 +189,55 @@
return editor
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.options.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -267,15 +246,15 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
@ -285,39 +264,44 @@
}
},
watch: {
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val);
}
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
this.$emit('on-cache-params', val)
},
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
result.push(item1)
}
})
})
this.noRes = result
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.options.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams
}
}
@ -327,7 +311,7 @@
this.diGuiTree(item)
this.options = item
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.rawScript = o.params.rawScript || ''
@ -336,11 +320,11 @@
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
_.map(resourceList, v => {
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+v.res
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
@ -355,7 +339,7 @@
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
@ -374,34 +358,6 @@
editor.off($('.code-shell-mirror'), 'keypress', this.keypress)
}
},
components: { mLocalParams, mListBox, mResources, mScriptBox, Treeselect }
components: { mLocalParams, mListBox, mScriptBox, Treeselect }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
.scriptModal {
.ans-modal-box-content-wrapper {
width: 90%;
.ans-modal-box-close {
right: -12px;
top: -16px;
color: #fff;
}
}
}
.ans-modal-box-close {
z-index: 100;
}
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
</style>

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

@ -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,93 @@
<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
:disabled="isDetails"
type="input"
v-model="driverCores"
:placeholder="$t('Please enter driver core number')"
style="width: 200px;"
autocomplete="off">
</x-input>
</span>
<span class="sp1 sp3">{{$t('Driver memory use')}}</span>
<span class="sp2">
<x-input
:disabled="isDetails"
type="input"
v-model="driverMemory"
:placeholder="$t('Please enter driver memory use')"
style="width: 186px;"
autocomplete="off">
</x-input>
</span>
<m-list-4-box>
<div slot="text">{{$t('Driver cores')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="driverCores"
:placeholder="$t('Please enter Driver cores')">
</el-input>
</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>
</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>
</span>
<div slot="text-2">{{$t('Driver memory')}}</div>
<div slot="content-2">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="driverMemory"
:placeholder="$t('Please enter Driver memory')">
</el-input>
</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>
</span>
</m-list-4-box>
<m-list-4-box>
<div slot="text">{{$t('Executor Number')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="numExecutors"
:placeholder="$t('Please enter Executor number')">
</el-input>
</div>
</div>
<div slot="text-2">{{$t('Executor memory')}}</div>
<div slot="content-2">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="executorMemory"
:placeholder="$t('Please enter Executor memory')">
</el-input>
</div>
</m-list-4-box>
<m-list-4-box>
<div slot="text">{{$t('Executor cores')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="executorCores"
:placeholder="$t('Please enter Executor cores')">
</el-input>
</div>
</m-list-4-box>
<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 +170,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">
@ -203,7 +188,7 @@
import i18n from '@/module/i18n'
import mLocalParams from './_source/localParams'
import mListBox from './_source/listBox'
import mResources from './_source/resources'
import mList4Box from './_source/list4Box'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import disabledState from '@/module/mixin/disabledState'
@ -250,7 +235,7 @@
sparkVersion: 'SPARK2',
// Spark version(LIst)
sparkVersionList: [{ code: 'SPARK2' }, { code: 'SPARK1' }],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
@ -267,10 +252,10 @@
/**
* getResourceId
*/
marjarId(name) {
this.store.dispatch('dag/getResourceId',{
marjarId (name) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+name
fullName: '/' + name
}).then(res => {
this.mainJar = res.id
}).catch(e => {
@ -295,55 +280,55 @@
_onCacheResourcesData (a) {
this.cacheResourceList = a
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -352,15 +337,15 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
@ -383,28 +368,28 @@
}
if (!this.numExecutors) {
this.$message.warning(`${i18n.$t('Please enter the number of Executor')}`)
this.$message.warning(`${i18n.$t('Please enter Executor number')}`)
return false
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
if (!Number.isInteger(parseInt(this.numExecutors))) {
this.$message.warning(`${i18n.$t('The number of Executors should be a positive integer')}`)
this.$message.warning(`${i18n.$t('The Executor Number should be a positive integer')}`)
return false
}
if (!this.executorMemory) {
this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`)
this.$message.warning(`${i18n.$t('Please enter Executor memory')}`)
return false
}
if (!this.executorMemory) {
this.$message.warning(`${i18n.$t('Please enter the Executor memory')}`)
this.$message.warning(`${i18n.$t('Please enter Executor memory')}`)
return false
}
@ -414,7 +399,7 @@
}
if (!this.executorCores) {
this.$message.warning(`${i18n.$t('Please enter ExecutorPlease enter Executor core number')}`)
this.$message.warning(`${i18n.$t('Please enter Executor cores')}`)
return false
}
@ -427,7 +412,7 @@
return false
}
// Process resourcelist
let dataProcessing= _.map(this.resourceList, v => {
let dataProcessing = _.map(this.resourceList, v => {
return {
id: v
}
@ -462,44 +447,49 @@
this.mainClass = ''
}
},
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.$emit('on-cache-params', val)
}
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.mainJarList.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
},
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
result.push(item1)
}
})
})
this.noRes = result
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.mainJarList.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
mainClass: this.mainClass,
mainJar: {
id: this.mainJar
},
deployMode: this.deployMode,
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams,
driverCores: this.driverCores,
driverMemory: this.driverMemory,
@ -514,104 +504,69 @@
}
},
created () {
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
let item = this.store.state.dag.resourcesListS
let items = this.store.state.dag.resourcesListJar
this.diGuiTree(item)
this.diGuiTree(items)
this.mainJarList = item
this.mainJarLists = items
let o = this.backfillItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if(o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if(o.params.mainJar.res=='') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.deployMode = o.params.deployMode || ''
this.driverCores = o.params.driverCores || 1
this.driverMemory = o.params.driverMemory || '512M'
this.numExecutors = o.params.numExecutors || 2
this.executorMemory = o.params.executorMemory || '2G'
this.executorCores = o.params.executorCores || 2
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'SCALA'
this.sparkVersion = o.params.sparkVersion || 'SPARK2'
// backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
type: 'FILE',
fullName: '/'+v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.mainClass = o.params.mainClass || ''
if (o.params.mainJar.res) {
this.marjarId(o.params.mainJar.res)
} else if (o.params.mainJar.res === '') {
this.mainJar = ''
} else {
this.mainJar = o.params.mainJar.id || ''
}
this.deployMode = o.params.deployMode || ''
this.driverCores = o.params.driverCores || 1
this.driverMemory = o.params.driverMemory || '512M'
this.numExecutors = o.params.numExecutors || 2
this.executorMemory = o.params.executorMemory || '2G'
this.executorCores = o.params.executorCores || 2
this.mainArgs = o.params.mainArgs || ''
this.others = o.params.others
this.programType = o.params.programType || 'SCALA'
this.sparkVersion = o.params.sparkVersion || 'SPARK2'
// backfill resourceList
let backResource = o.params.resourceList || []
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
}).catch(e => {
this.resourceList.push(v.res)
this.dataProcess(backResource)
})
} else {
this.resourceList.push(v.id)
this.dataProcess(backResource)
}
})
this.cacheResourceList = resourceList
}
// backfill localParams
let localParams = o.params.localParams || []
if (localParams.length) {
this.localParams = localParams
}
}
},
mounted () {
},
components: { mLocalParams, mListBox, mResources, Treeselect }
components: { mLocalParams, mListBox, mList4Box, Treeselect }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.spark-model {
.list-box-4p {
.list {
margin-bottom: 14px;
.sp1 {
float: left;
width: 112px;
text-align: right;
margin-right: 10px;
font-size: 14px;
color: #777;
display: inline-block;
padding-top: 6px;
}
.sp2 {
float: left;
margin-right: 4px;
}
.sp3 {
width: 176px;
}
}
}
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
</style>

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

@ -35,51 +35,49 @@
:sql-type="sqlType">
</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>
<template v-if="sqlType==0">
<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 alert')"
autocomplete="off">
</x-input>
:placeholder="$t('Please enter the title of email')">
</el-input>
</div>
</m-list-box>
<m-list-box>
<!-- TODO Wait for the alarm group/instance page to be developed and add specific content -->
<div slot="text"><strong class='requiredIcon'>*</strong>{{$t('AlertGroup')}}</div>
<div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Recipient')}}</div>
<div slot="content">
<x-input
type="input"
v-model="groupId"
:placeholder="$t('Please select the alert group')"
autocomplete="off">
</x-input>
<m-email ref="refEmail" v-model="receivers" :disabled="isDetails" :repeat-data="receiversCc"></m-email>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Cc')}}</div>
<div slot="content">
<m-email ref="refCc" v-model="receiversCc" :disabled="isDetails" :repeat-data="receivers"></m-email>
</div>
</m-list-box>
</template>
<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>
@ -92,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-full-screen" @click="setEditorVal"></em>
</a>
</div>
</div>
@ -138,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>
@ -176,8 +180,6 @@
sqlType: '0',
// Email title
title: '',
// Alert groupId
groupId: '',
// Form/attachment
showType: ['TABLE'],
// Sql parameter
@ -185,7 +187,13 @@
// Pre statements
preStatements: [],
// Post statements
postStatements: []
postStatements: [],
// recipients
receivers: [],
// copy to
receiversCc: [],
item: '',
scriptBoxDialog: false
}
},
mixins: [disabledState],
@ -194,40 +202,19 @@
createNodeId: Number
},
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()
}
})
}
})
setEditorVal () {
this.item = editor.getValue()
this.scriptBoxDialog = true
},
getSriptBoxValue (val) {
editor.setValue(val)
},
/**
* return sqlType
*/
_onSqlType (a) {
this.sqlType = a
if(a==0) {
if (a === 0) {
this.showType = ['TABLE']
}
},
@ -275,18 +262,24 @@
if (!this.$refs.refDs._verifDatasource()) {
return false
}
/*
if (this.sqlType==0 && !this.showType.length) {
if (this.sqlType === 0 && !this.showType.length) {
this.$message.warning(`${i18n.$t('One form or attachment must be selected')}`)
return false
}
*/
if (this.sqlType==0 && !this.title) {
this.$message.warning(`${i18n.$t('Please enter the title of alert')}`)
if (this.sqlType === 0 && !this.title) {
this.$message.warning(`${i18n.$t('Mail subject required')}`)
return false
}
if (this.sqlType==0 && !this.groupId) {
this.$message.warning(`${i18n.$t('Please select the alert group')}`)
if (this.sqlType === 0 && !this.receivers.length) {
this.$message.warning(`${i18n.$t('Recipient required')}`)
return false
}
// receivers Subcomponent verification
if (this.sqlType === 0 && !this.$refs.refEmail._manualEmail()) {
return false
}
// receiversCc Subcomponent verification
if (this.sqlType === 0 && !this.$refs.refCc._manualEmail()) {
return false
}
// udfs Subcomponent verification Verification only if the data type is HIVE
@ -319,7 +312,8 @@
udfs: this.udfs,
sqlType: this.sqlType,
title: this.title,
groupId: this.groupId,
receivers: this.receivers.join(','),
receiversCc: this.receiversCc.join(','),
showType: (() => {
/**
* Special processing return order TABLE,ATTACHMENT
@ -380,7 +374,10 @@
} else {
param.processInstanceId = current.params.id
}
this.store.dispatch('dag/getReceiver', param).then(res => {
this.receivers = res.receivers && res.receivers.split(',') || []
this.receiversCc = res.receiversCc && res.receiversCc.split(',') || []
})
},
_cacheParams () {
this.$emit('on-cache-params', {
@ -390,9 +387,9 @@
udfs: this.udfs,
sqlType: this.sqlType,
title: this.title,
groupId: this.groupId,
receivers: this.receivers.join(','),
receiversCc: this.receiversCc.join(','),
showType: (() => {
let showType = this.showType
if (showType.length === 2 && showType[0] === 'ATTACHMENT') {
return [showType[1], showType[0]].join(',')
@ -404,10 +401,10 @@
connParams: this.connParams,
preStatements: this.preStatements,
postStatements: this.postStatements
});
})
},
_destroyEditor () {
if (editor) {
if (editor) {
editor.toTextArea() // Uninstall
editor.off($('.code-sql-mirror'), 'keypress', this.keypress)
editor.off($('.code-sql-mirror'), 'changes', this.changes)
@ -417,12 +414,13 @@
watch: {
// Listening to sqlType
sqlType (val) {
if (val==0) {
if (val === 0) {
this.showType = []
}
if (val != 0) {
if (val !== 0) {
this.title = ''
this.groupId = ''
this.receivers = []
this.receiversCc = []
}
},
// Listening data source
@ -431,7 +429,7 @@
this.connParams = ''
}
},
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this._cacheParams()
}
@ -449,7 +447,7 @@
this.sqlType = o.params.sqlType
this.connParams = o.params.connParams || ''
this.localParams = o.params.localParams || []
if(o.params.showType == '') {
if (o.params.showType === '') {
this.showType = []
} else {
this.showType = o.params.showType.split(',') || []
@ -457,7 +455,8 @@
this.preStatements = o.params.preStatements || []
this.postStatements = o.params.postStatements || []
this.title = o.params.title || ''
this.groupId = o.params.groupId || ''
this.receivers = o.params.receivers && o.params.receivers.split(',') || []
this.receiversCc = o.params.receiversCc && o.params.receiversCc.split(',') || []
}
// read tasks from cache
if (!_.some(this.store.state.dag.cacheTasks, { id: this.createNodeId }) &&
@ -488,9 +487,9 @@
udfs: this.udfs,
sqlType: this.sqlType,
title: this.title,
groupId: this.groupId,
receivers: this.receivers.join(','),
receiversCc: this.receiversCc.join(','),
showType: (() => {
let showType = this.showType
if (showType.length === 2 && showType[0] === 'ATTACHMENT') {
return [showType[1], showType[0]].join(',')
@ -505,18 +504,6 @@
}
}
},
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail }
components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.requiredIcon {
color: #ff0000;
padding-right: 4px;
}
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
</style>

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

File diff suppressed because it is too large Load Diff

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

@ -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
@ -96,7 +97,7 @@
created () {
let processListS = _.cloneDeep(this.store.state.dag.processListS)
let id = null
if(this.router.history.current.name==='projects-instance-details') {
if (this.router.history.current.name === 'projects-instance-details') {
id = this.router.history.current.query.id || null
} else {
id = this.router.history.current.params.id || null
@ -118,7 +119,7 @@
this.wdiCurr = o.params.processDefinitionId
} else {
if (this.processDefinitionList.length) {
this.wdiCurr = this.processDefinitionList[0]['id']
this.wdiCurr = this.processDefinitionList[0].id
this.$emit('on-set-process-name', this._handleName(this.wdiCurr))
}
}

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

@ -17,58 +17,56 @@
<template>
<div class="shell-model">
<!--deploy mode-->
<div class="list-box-4p">
<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>
</span>
<span class="sp1 sp3">{{$t('Queue')}}</span>
<span class="sp4">
<x-input
:disabled="isDetails"
type="input"
v-model="queue"
:placeholder="$t('Please enter queue value')"
style="width: 60%;"
autocomplete="off">
</x-input>
</span>
<m-list-box>
<div slot="text">{{$t('Deploy Mode')}}</div>
<div slot="content">
<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>
</div>
</div>
</m-list-box>
<!--master-->
<div class="list-box-4p" v-if="deployMode !== 'local'">
<div class="clearfix list">
<span class="sp1">{{$t('Master')}}</span>
<span class="sp4">
<x-select
style="width: 130px;"
v-model="master"
:disabled="isDetails">
<x-option
<m-list-box v-if="deployMode !== 'local'">
<div slot="text">{{$t('Master')}}</div>
<div slot="content" class="display-flex">
<el-select
size="small"
v-model="master"
:disabled="isDetails">
<el-option
v-for="city in masterType"
:key="city.code"
:value="city.code"
:label="city.code">
</x-option>
</x-select>
</span>
<span v-if="masterUrlState">
<x-input
:disabled="isDetails"
type="input"
v-model="masterUrl"
:placeholder="$t('Please Enter Url')"
style="width: 60%;"
autocomplete="off">
</x-input>
</span>
</el-option>
</el-select>
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="masterUrl"
:placeholder="$t('Please Enter Url')"
class="cont-extra"
v-if="masterUrlState">
</el-input>
</div>
</div>
</m-list-box>
<!--queue-->
<m-list-box v-if="deployMode !== 'local' && master === 'yarn'">
<div slot="text">{{$t('Queue')}}</div>
<div slot="content">
<el-input
:disabled="isDetails"
type="input"
size="small"
v-model="queue"
:placeholder="$t('Please enter queue value')"
style="width: 192px;">
</el-input>
</div>
</m-list-box>
<!--config file-->
<m-list-box>
<div slot="text">{{$t('Resources')}}</div>
@ -92,12 +90,11 @@
</m-list-box>
</div>
</template>
<script>
import _ from 'lodash'
import i18n from '@/module/i18n'
import mListBox from './_source/listBox'
import mScriptBox from './_source/scriptBox'
import mResources from './_source/resources'
import mLocalParams from './_source/localParams'
import disabledState from '@/module/mixin/disabledState'
import Treeselect from '@riophae/vue-treeselect'
@ -111,9 +108,9 @@
// script
rawScript: '',
// waterdrop script
baseScript: 'sh ${WATERDROP_HOME}/bin/start-waterdrop.sh',
baseScript: 'sh ${WATERDROP_HOME}/bin/start-waterdrop.sh', // eslint-disable-line
// resourceNameVal
resourceNameVal : [],
resourceNameVal: [],
// Custom parameter
localParams: [],
// resource(list)
@ -127,14 +124,14 @@
// Spark version(LIst)
masterType: [{ code: 'yarn' }, { code: 'local' }, { code: 'spark://' }, { code: 'mesos://' }],
// Deployment masterUrl state
masterUrlState:false,
masterUrlState: false,
// Deployment masterUrl
masterUrl: '',
// Cache ResourceList
cacheResourceList: [],
// define options
options: [],
normalizer(node) {
normalizer (node) {
return {
label: node.name
}
@ -176,7 +173,7 @@
return false
}
// noRes
if (this.noRes.length>0) {
if (this.noRes.length > 0) {
this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`)
return false
}
@ -185,40 +182,40 @@
this.$message.warning(`${i18n.$t('Please select the waterdrop resources')}`)
return false
}
if (this.resourceNameVal.resourceList && this.resourceNameVal.resourceList.length==0) {
if (this.resourceNameVal.resourceList && this.resourceNameVal.resourceList.length === 0) {
this.$message.warning(`${i18n.$t('Please select the waterdrop resources')}`)
return false
}
// Process resourcelist
let dataProcessing= _.map(this.resourceList, v => {
let dataProcessing = _.map(this.resourceList, v => {
return {
id: v
}
})
//verify deploy mode
// verify deploy mode
let deployMode = this.deployMode
let master = this.master
let masterUrl = this.masterUrl
if(this.deployMode == 'local'){
if (this.deployMode === 'local') {
master = 'local'
masterUrl = ''
deployMode = 'client'
}
// get local params
let locparams = ''
this.localParams.forEach(v=>{
locparams = locparams + ' --variable ' + v.prop + '=' + v.value
}
this.localParams.forEach(v => {
locparams = locparams + ' --variable ' + v.prop + '=' + v.value
}
)
// get waterdrop script
let tureScript = ''
this.resourceNameVal.resourceList.forEach(v=>{
this.resourceNameVal.resourceList.forEach(v => {
tureScript = tureScript + this.baseScript +
' --master '+ master + masterUrl +
' --deploy-mode '+ deployMode +
' --queue '+ this.queue +
' --config ' + v.res +
' --master ' + master + masterUrl +
' --deploy-mode ' + deployMode +
' --queue ' + this.queue +
' --config ' + v.res +
locparams + ' \n'
})
@ -226,60 +223,60 @@
this.$emit('on-params', {
resourceList: dataProcessing,
localParams: this.localParams,
rawScript: tureScript,
rawScript: tureScript
})
return true
},
diGuiTree(item) { // Recursive convenience tree structure
diGuiTree (item) { // Recursive convenience tree structure
item.forEach(item => {
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?
this.operationTree(item) : this.diGuiTree(item.children);
item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
? this.operationTree(item) : this.diGuiTree(item.children)
})
},
operationTree(item) {
if(item.dirctory) {
item.isDisabled =true
operationTree (item) {
if (item.dirctory) {
item.isDisabled = true
}
delete item.children
},
searchTree(element, id) {
searchTree (element, id) {
// 根据id查找节点
if (element.id == id) {
return element;
} else if (element.children != null) {
var i;
var result = null;
for (i = 0; result == null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id);
if (element.id === id) {
return element
} else if (element.children !== null) {
let i
let result = null
for (i = 0; result === null && i < element.children.length; i++) {
result = this.searchTree(element.children[i], id)
}
return result;
return result
}
return null;
return null
},
dataProcess(backResource) {
dataProcess (backResource) {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.options.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
resourceIdArr = isResourceId.map(item => {
return item.id
})
Array.prototype.diff = function(a) {
return this.filter(function(i) {return a.indexOf(i) < 0;});
};
let diffSet = this.resourceList.diff(resourceIdArr);
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0 })
}
let diffSet = this.resourceList.diff(resourceIdArr)
let optionsCmp = []
if(diffSet.length>0) {
diffSet.forEach(item=>{
backResource.forEach(item1=>{
if(item==item1.id || item==item1.res) {
if (diffSet.length > 0) {
diffSet.forEach(item => {
backResource.forEach(item1 => {
if (item === item1.id || item === item1.res) {
optionsCmp.push(item1)
}
})
@ -288,15 +285,15 @@
let noResources = [{
id: -1,
name: $t('Unauthorized or deleted resources'),
fullName: '/'+$t('Unauthorized or deleted resources'),
fullName: '/' + $t('Unauthorized or deleted resources'),
children: []
}]
if(optionsCmp.length>0) {
if (optionsCmp.length > 0) {
this.allNoResources = optionsCmp
optionsCmp = optionsCmp.map(item=>{
return {id: item.id,name: item.name,fullName: item.res}
optionsCmp = optionsCmp.map(item => {
return { id: item.id, name: item.name, fullName: item.res }
})
optionsCmp.forEach(item=>{
optionsCmp.forEach(item => {
item.isNew = true
})
noResources[0].children = optionsCmp
@ -306,57 +303,62 @@
}
},
watch: {
//Watch the cacheParams
// Watch the cacheParams
cacheParams (val) {
this.resourceNameVal = val
this.$emit('on-cache-params', val);
this.$emit('on-cache-params', val)
},
"master": {
handler(code) {
if(code == 'spark://'){
this.masterUrlState = true;
}else if(code == 'mesos://'){
this.masterUrlState = true;
}else{
this.masterUrlState = false;
this.masterUrl = ''
}
}
},
},
computed: {
cacheParams () {
let isResourceId = []
let resourceIdArr = []
if(this.resourceList.length>0) {
this.resourceList.forEach(v=>{
this.options.forEach(v1=>{
if(this.searchTree(v1,v)) {
isResourceId.push(this.searchTree(v1,v))
}
})
})
resourceIdArr = isResourceId.map(item=>{
return {id: item.id,name: item.name,res: item.fullName}
})
}
resourceIdArr (arr) {
let result = []
resourceIdArr.forEach(item=>{
this.allNoResources.forEach(item1=>{
if(item.id==item1.id) {
arr.forEach(item => {
this.allNoResources.forEach(item1 => {
if (item.id === item1.id) {
// resultBool = true
result.push(item1)
}
})
})
this.noRes = result
},
master: {
handler (code) {
if (code === 'spark://') {
this.masterUrlState = true
} else if (code === 'mesos://') {
this.masterUrlState = true
} else {
this.masterUrlState = false
this.masterUrl = ''
}
}
}
},
computed: {
resourceIdArr () {
let isResourceId = []
let resourceIdArr = []
if (this.resourceList.length > 0) {
this.resourceList.forEach(v => {
this.options.forEach(v1 => {
if (this.searchTree(v1, v)) {
isResourceId.push(this.searchTree(v1, v))
}
})
})
resourceIdArr = isResourceId.map(item => {
return { id: item.id, name: item.name, res: item.fullName }
})
}
return resourceIdArr
},
cacheParams () {
return {
resourceList: resourceIdArr,
resourceList: this.resourceIdArr,
localParams: this.localParams,
deployMode: this.deployMode,
master: this.master,
masterUrl: this.masterUrl,
queue:this.queue,
queue: this.queue
}
}
},
@ -369,7 +371,7 @@
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
this.master = o.params.master || 'yarn'
this.deployMode = o.params.deployMode || 'client'
this.deployMode = o.params.deployMode || 'client'
this.masterUrl = o.params.masterUrl || ''
this.queue = o.params.queue || 'default'
this.rawScript = o.params.rawScript || ''
@ -379,10 +381,10 @@
let resourceList = o.params.resourceList || []
if (resourceList.length) {
_.map(resourceList, v => {
if(!v.id) {
this.store.dispatch('dag/getResourceId',{
if (!v.id) {
this.store.dispatch('dag/getResourceId', {
type: 'FILE',
fullName: '/'+v.res
fullName: '/' + v.res
}).then(res => {
this.resourceList.push(res.id)
this.dataProcess(backResource)
@ -407,61 +409,6 @@
},
destroyed () {
},
components: { mLocalParams, mListBox, mResources, mScriptBox, Treeselect }
components: { mLocalParams, mListBox, Treeselect }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
.scriptModal {
.ans-modal-box-content-wrapper {
width: 90%;
.ans-modal-box-close {
right: -12px;
top: -16px;
color: #fff;
}
}
}
.ans-modal-box-close {
z-index: 100;
}
.ans-modal-box-max {
position: absolute;
right: -12px;
top: -16px;
}
.vue-treeselect--disabled {
.vue-treeselect__control {
background-color: #ecf3f8;
.vue-treeselect__single-value {
color: #6d859e;
}
}
}
.list-box-4p {
.list {
margin-bottom: 14px;
.sp1 {
float: left;
width: 112px;
text-align: right;
margin-right: 10px;
font-size: 14px;
color: #777;
display: inline-block;
padding-top: 6px;
}
.sp2 {
float: left;
margin-right: 4px;
padding-top: 6px;
}
.sp3 {
width: 90px;
}
.sp4 {
float: left;
margin-right: 4px;
}
}
}
</style>

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

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

@ -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-minus'
screenOpen = true
} else {
item.icon = 'ans-icon-max'
item.icon = 'el-icon-full-screen'
screenOpen = false
}
const $mainLayoutModel = $('.main-layout-model')
@ -658,7 +627,7 @@ JSP.prototype.saveStore = function () {
tasks.push(tasksParam)
}
})
if(store.state.dag.connects.length ===this.JspInstance.getConnections().length) {
if (store.state.dag.connects.length === this.JspInstance.getConnections().length) {
_.map(store.state.dag.connects, u => {
connects.push({
endPointSourceId: u.endPointSourceId,
@ -666,7 +635,7 @@ JSP.prototype.saveStore = function () {
label: u.label
})
})
} else if(store.state.dag.connects.length>0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) {
} else if (store.state.dag.connects.length > 0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) {
_.map(this.JspInstance.getConnections(), v => {
connects.push({
endPointSourceId: v.sourceId,
@ -676,12 +645,12 @@ JSP.prototype.saveStore = function () {
})
_.map(store.state.dag.connects, u => {
_.map(connects, v => {
if(u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId===v.endPointTargetId) {
if (u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId === v.endPointTargetId) {
v.label = u.label
}
})
})
} else if(store.state.dag.connects.length===0) {
} else if (store.state.dag.connects.length === 0) {
_.map(this.JspInstance.getConnections(), v => {
connects.push({
endPointSourceId: v.sourceId,
@ -690,7 +659,7 @@ JSP.prototype.saveStore = function () {
})
})
}
_.map(tasksAll(), v => {
locations[v.id] = {
name: v.name,
@ -783,7 +752,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
_.map(connects, v => {
let sourceId = v.endPointSourceId.split('-')
let targetId = v.endPointTargetId.split('-')
let labels = v.label
const labels = v.label
if (sourceId.length === 4 && targetId.length === 4) {
sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
@ -791,24 +760,24 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
sourceId = v.endPointSourceId
targetId = v.endPointTargetId
}
if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) {
if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) {
this.JspInstance.connect({
source: sourceId,
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#4caf50' },
HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
overlays:[["Label", { label: labels} ]]
HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
overlays: [['Label', { label: labels }]]
})
} else if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
} else if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
this.JspInstance.connect({
source: sourceId,
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#252d39' },
HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
overlays:[["Label", { label: labels} ]]
HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
overlays: [['Label', { label: labels }]]
})
} else {
this.JspInstance.connect({
@ -816,8 +785,8 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
overlays:[["Label", { label: labels} ]]
HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
overlays: [['Label', { label: labels }]]
})
}
})

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

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

15
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
View File

@ -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>
@ -35,10 +35,11 @@
</div>
</template>
<script>
import _ from 'lodash'
import store from '@/conf/home/store'
import { runningType } from '@/conf/home/pages/dag/_source/config'
import { warningTypeList } from '@/conf/home/pages/projects/pages/definition/pages/list/_source/util'
export default {
name: 'starting-params-dag-index',
data () {
@ -69,16 +70,16 @@
return '-'
},
_rtWorkerGroupName (id) {
let o = _.filter(this.workerGroupList, v => v.id === id)
let o = _.filter(this.workerGroupList, v => v.id === id)
if (o && o.length) {
return o[0].name
}
return '-'
},
_getNotifyGroupList () {
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
})
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
})
},
_getWorkerGroupList () {
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
@ -92,7 +93,7 @@
}
},
watch: {
'$route': {
$route: {
deep: true,
handler () {
this.isActive = false

34
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
View File

@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
<x-select
<el-select
:disabled="isDetails"
@on-change="_onChange"
v-model="value"
@change="_onChange"
v-model="selectedValue"
size="small"
style="width: 180px">
<x-option
<el-option
v-for="item in itemList"
:key="item.id"
:value="item.id"
:label="item.tenantName">
</x-option>
</x-select>
:label="item.tenantCode">
</el-option>
</el-select>
</template>
<script>
import disabledState from '@/module/mixin/disabledState'
@ -34,6 +35,7 @@
name: 'form-tenant',
data () {
return {
selectedValue: this.value,
itemList: []
}
},
@ -48,23 +50,25 @@
prop: 'value',
event: 'tenantSelectEvent'
},
mounted() {
let result = this.itemList.some(item=>{
if(item.id == this.value) {
mounted () {
let result = this.itemList.some(item => {
if (item.id === this.value) {
return true
}
})
if(!result) {
this.value = 'default'
})
if (!result) {
this.selectedValue = 'default'
}
},
methods: {
_onChange (o) {
this.value = o.value
this.$emit('tenantSelectEvent', o.value)
this.$emit('tenantSelectEvent', o)
}
},
watch: {
value (val) {
this.selectedValue = val
}
},
created () {
let stateTenantAllList = this.store.state.security.tenantAllList || []

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

@ -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>
@ -93,7 +91,7 @@
import mLocalParams from '../formModel/tasks/_source/localParams'
import disabledState from '@/module/mixin/disabledState'
import Affirm from '../jumpAffirm'
import FormTenant from "./_source/selectTenant";
import FormTenant from './_source/selectTenant'
export default {
name: 'udp',
@ -136,7 +134,7 @@
}
return true
},
_accuStore(){
_accuStore () {
this.store.commit('dag/setGlobalParams', _.cloneDeep(this.udpList))
this.store.commit('dag/setName', _.cloneDeep(this.name))
this.store.commit('dag/setTimeout', _.cloneDeep(this.timeout))
@ -212,10 +210,9 @@
this.tenantId = dag.tenantId
}
})
},
mounted () {},
components: {FormTenant, mLocalParams }
components: { FormTenant, mLocalParams }
}
</script>

2
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/index.vue
View File

@ -37,7 +37,7 @@
}
},
watch: {
'$route': {
$route: {
deep: true,
handler () {
this.isActive = false

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

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

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue
View File

@ -41,8 +41,8 @@
props: {},
methods: {
...mapMutations('dag', ['resetParams', 'setIsDetails']),
...mapActions('dag', ['getProcessList','getProjectList', 'getResourcesList', 'getProcessDetails','getResourcesListJar']),
...mapActions('security', ['getTenantList','getWorkerGroupsAll']),
...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getProcessDetails', 'getResourcesListJar']),
...mapActions('security', ['getTenantList', 'getWorkerGroupsAll']),
/**
* init
*/
@ -89,7 +89,7 @@
},
watch: {
// Listening for routing changes
'$route': {
$route: {
deep: true,
handler () {
this.init()

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue
View File

@ -40,8 +40,8 @@
props: {},
methods: {
...mapMutations('dag', ['resetParams']),
...mapActions('dag', ['getProcessList','getProjectList', 'getResourcesList','getResourcesListJar','getResourcesListJar']),
...mapActions('security', ['getTenantList','getWorkerGroupsAll']),
...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getResourcesListJar', 'getResourcesListJar']),
...mapActions('security', ['getTenantList', 'getWorkerGroupsAll']),
/**
* init
*/
@ -74,7 +74,7 @@
}
},
watch: {
'$route': {
$route: {
deep: true,
handler () {
this.init()

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue
View File

@ -43,8 +43,8 @@
props: {},
methods: {
...mapMutations('dag', ['setIsDetails', 'resetParams']),
...mapActions('dag', ['getProcessList','getProjectList', 'getResourcesList', 'getInstancedetail','getResourcesListJar']),
...mapActions('security', ['getTenantList','getWorkerGroupsAll']),
...mapActions('dag', ['getProcessList', 'getProjectList', 'getResourcesList', 'getInstancedetail', 'getResourcesListJar']),
...mapActions('security', ['getTenantList', 'getWorkerGroupsAll']),
/**
* init
*/
@ -101,7 +101,7 @@
}
},
watch: {
'$route': {
$route: {
deep: true,
handler () {
this.init()

168
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
View File

@ -16,147 +16,143 @@
*/
<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>
<script>
import i18n from '@/module/i18n'
import store from '@/conf/home/store'
import {isJson} from '@/module/util/util'
import mPopup from '@/module/components/popup/popup'
import { isJson } from '@/module/util/util'
import mListBoxF from '@/module/components/listBoxF/listBoxF'
export default {
@ -179,7 +175,7 @@
// data storage name
database: '',
// principal
principal:'',
principal: '',
// database username
userName: '',
// Database password
@ -193,8 +189,8 @@
showPrincipal: true,
showdDatabase: false,
showConnectType: false,
isShowPrincipal:true,
prePortMapper:{},
isShowPrincipal: true,
prePortMapper: {},
datasourceTypeList: [
{
value: 'MYSQL',
@ -332,7 +328,7 @@
return false
}
if (!this.database && this.showdDatabase == false) {
if (!this.database && this.showdDatabase === false) {
this.$message.warning(`${i18n.$t('Please enter database name')}`)
return false
}
@ -355,7 +351,7 @@
if (this.item) {
param.id = this.item.id
}
this.store.dispatch(`datasource/${this.item ? `updateDatasource` : `createDatasources`}`, param).then(res => {
this.store.dispatch(`datasource/${this.item ? 'updateDatasource' : 'createDatasources'}`, param).then(res => {
this.$message.success(res.msg)
this.spinnerLoading = false
this.$emit('onUpdate')
@ -367,18 +363,17 @@
/**
* Get modified data
*/
_getEditDatasource() {
this.store.dispatch('datasource/getEditDatasource', {id: this.item.id}).then(res => {
_getEditDatasource () {
this.store.dispatch('datasource/getEditDatasource', { id: this.item.id }).then(res => {
this.type = res.type
this.name = res.name
this.note = res.note
this.host = res.host
//When in Editpage, Prevent default value overwrite backfill value
let that = this;
// When in Editpage, Prevent default value overwrite backfill value
setTimeout(() => {
this.port = res.port
},0)
}, 0)
this.principal = res.principal
this.database = res.database
@ -393,25 +388,23 @@
/**
* Set default port for each type.
*/
_setDefaultValues(value) {
//Default type is MYSQL
_setDefaultValues (value) {
// Default type is MYSQL
let type = this.type || 'MYSQL'
let defaultPort = this._getDefaultPort(type)
//Backfill the previous input from memcache
// Backfill the previous input from memcache
let mapperPort = this.prePortMapper[type]
this.port = mapperPort || defaultPort
},
/**
* Get default port by type
*/
_getDefaultPort(type) {
var defaultPort = ''
_getDefaultPort (type) {
let defaultPort = ''
switch (type) {
case 'MYSQL':
defaultPort = '3306'
@ -442,10 +435,9 @@
break
default:
break
}
return defaultPort
},
}
},
created () {
// Backfill
@ -454,33 +446,32 @@
}
this._setDefaultValues()
},
watch: {
type(value){
if(value == 'POSTGRESQL') {
this.showdDatabase = true;
type (value) {
if (value === 'POSTGRESQL') {
this.showdDatabase = true
} else {
this.showdDatabase = false;
this.showdDatabase = false
}
if (value== 'ORACLE' && !this.item.id) {
this.showConnectType = true;
if (value === 'ORACLE' && !this.item.id) {
this.showConnectType = true
this.connectType = 'ORACLE_SERVICE_NAME'
} else if(value== 'ORACLE' && this.item.id) {
this.showConnectType = true;
} else if (value === 'ORACLE' && this.item.id) {
this.showConnectType = true
} else {
this.showConnectType = false;
this.showConnectType = false
}
//Set default port for each type datasource
// Set default port for each type datasource
this._setDefaultValues(value)
return new Promise((resolve, reject) => {
this.store.dispatch('datasource/getKerberosStartupState').then(res => {
this.isShowPrincipal=res
if((value =='HIVE'||value == 'SPARK')&&this.isShowPrincipal== true){
this.isShowPrincipal = res
if ((value === 'HIVE' || value === 'SPARK') && this.isShowPrincipal === true) {
this.showPrincipal = false
}else{
} else {
this.showPrincipal = true
}
}).catch(e => {
@ -493,14 +484,14 @@
* Cache the previous input port for each type datasource
* @param value
*/
port(value){
port (value) {
this.prePortMapper[this.type] = value
}
},
mounted () {
},
components: { mPopup, mListBoxF }
components: { mListBoxF }
}
</script>
@ -542,5 +533,4 @@
}
}
</style>

141
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
View File

@ -17,97 +17,51 @@
<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 :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 +88,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 => {

66
dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
View File

@ -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="auto"
: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">
@ -66,7 +82,10 @@
pageNo: 1,
// Search value
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
@ -124,8 +128,8 @@
_getList (flag) {
this.isLoading = !flag
this.getDatasourcesListP(this.searchParams).then(res => {
if(this.searchParams.pageNo>1 && res.totalList.length == 0) {
this.searchParams.pageNo = this.searchParams.pageNo -1
if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
this.searchParams.pageNo = this.searchParams.pageNo - 1
} else {
this.datasourcesList = []
this.datasourcesList = res.totalList
@ -138,7 +142,7 @@
},
_onUpdate () {
this._debounceGET('false')
},
}
},
watch: {
// router
@ -151,6 +155,6 @@
},
mounted () {
},
components: { mList, mConditions, mSpin, mListConstruction, mNoData }
components: { mList, mConditions, mSpin, mListConstruction, mNoData, mCreateDataSource }
}
</script>

17
dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue
View File

@ -19,13 +19,12 @@
</template>
<script>
import mProjectHome from '@/conf/home/pages/projects/pages/index'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'home',
components: { mProjectHome, mListConstruction },
mounted() {
this.$modal.destroy()
},
}
import mProjectHome from '@/conf/home/pages/projects/pages/index'
export default {
name: 'home',
components: { mProjectHome },
mounted () {
}
}
</script>

6
dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue
View File

@ -25,9 +25,9 @@
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
export default {
name: 'monitor-index',
mounted() {
this.$modal.destroy()
mounted () {
},
components: { mSecondaryMenu }
}
</script>
</script>

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

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

114
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
View File

@ -17,103 +17,38 @@
<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>
<script>
export default {
name: 'zookeeper-list',
data () {
return {
list: []
}
},
props: {
list: Array
}
@ -137,4 +72,3 @@
}
}
</style>

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

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

85
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
View File

@ -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">
@ -92,41 +79,39 @@
</div>
</template>
<script>
import { mapActions } from "vuex";
import mList from "./_source/zookeeperList";
import mSpin from "@/module/components/spin/spin";
import mNoData from "@/module/components/noData/noData";
import themeData from "@/module/echarts/themeData.json";
import mListConstruction from "@/module/components/listConstruction/listConstruction";
import { mapActions } from 'vuex'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import themeData from '@/module/echarts/themeData.json'
export default {
name: "servers-mysql",
data() {
return {
isLoading: false,
mysqlList: [],
color: themeData.color
};
},
props: {},
methods: {
...mapActions("monitor", ["getDatabaseData"])
},
watch: {},
created() {
this.isLoading = true;
this.getDatabaseData()
.then(res => {
this.mysqlList = res;
this.isLoading = false;
})
.catch(() => {
this.isLoading = false;
});
},
mounted() {},
components: { mList, mListConstruction, mSpin, mNoData }
};
export default {
name: 'servers-mysql',
data () {
return {
isLoading: false,
mysqlList: [],
color: themeData.color
}
},
props: {},
methods: {
...mapActions('monitor', ['getDatabaseData'])
},
watch: {},
created () {
this.isLoading = true
this.getDatabaseData()
.then(res => {
this.mysqlList = res
this.isLoading = false
})
.catch(() => {
this.isLoading = false
})
},
mounted () {},
components: { mSpin, mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import "./servers";
@ -148,4 +133,4 @@ export default {
color: #2a455b;
}
}
</style>
</style>

5
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
View File

@ -68,7 +68,6 @@
import _ from 'lodash'
import { mapActions } from 'vuex'
import mGauge from './_source/gauge'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import themeData from '@/module/echarts/themeData.json'
@ -95,7 +94,7 @@
this.getMasterData().then(res => {
this.masterList = _.map(res, (v, i) => {
return _.assign(v, {
id: v.host + "_" + v.id,
id: v.host + '_' + v.id,
resInfo: JSON.parse(v.resInfo)
})
})
@ -104,7 +103,7 @@
this.isLoading = false
})
},
components: { mList, mListConstruction, mSpin, mNoData, mGauge }
components: { mListConstruction, mSpin, mNoData, mGauge }
}
</script>
<style lang="scss" rel="stylesheet/scss">

26
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/statistics.vue
View File

@ -67,14 +67,14 @@
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import themeData from '@/module/echarts/themeData.json'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'statistics',
name: 'statistics',
data () {
return {
isLoading: false,
@ -83,12 +83,12 @@
color: themeData.color
}
},
props:{},
props: {},
methods: {
//...mapActions('monitor', ['getDatabaseData'])
// ...mapActions('monitor', ['getDatabaseData'])
// ...mapActions('projects', ['getCommandStateCount']),
...mapActions('projects', ['getQueueCount']),
...mapActions('projects', ['getCommandStateCount']),
...mapActions('projects', ['getCommandStateCount'])
},
watch: {},
created () {
@ -98,31 +98,31 @@
this.isLoading = false
}).catch(() => {
this.isLoading = false
})
})
this.getCommandStateCount().then(res => {
let normal = 0
let error = 0
_.forEach(res.data, (v, i) => {
let key = _.keys(v)
if(key[0] == 'errorCount') {
if (key[0] === 'errorCount') {
error = error + v.errorCount
}
if(key[1] == 'normalCount'){
if (key[1] === 'normalCount') {
normal = normal + v.normalCount
}
}
}
)
this.commandCountData = {
'normalCount': normal,
'errorCount' : error
normalCount: normal,
errorCount: error
}
}).catch( () => {
}).catch(() => {
})
},
mounted () {
},
components: { mListConstruction, mSpin, mNoData }
components: { mListConstruction, mSpin }
}
</script>

28
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
View File

@ -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>
@ -68,7 +73,6 @@
import _ from 'lodash'
import { mapActions } from 'vuex'
import mGauge from './_source/gauge'
import mList from './_source/zookeeperList'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import themeData from '@/module/echarts/themeData.json'
@ -81,29 +85,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: {},
@ -115,7 +111,7 @@
this.getWorkerData().then(res => {
this.workerList = _.map(res, (v, i) => {
return _.assign(v, {
id: v.host + "_" + v.id,
id: v.host + '_' + v.id,
resInfo: JSON.parse(v.resInfo)
})
})
@ -124,7 +120,7 @@
this.isLoading = true
})
},
components: { mList, mListConstruction, mSpin, mNoData, mGauge, zookeeperDirectoriesPopup }
components: { mListConstruction, mSpin, mNoData, mGauge, zookeeperDirectoriesPopup }
}
</script>
<style lang="scss" rel="stylesheet/scss">

24
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/index.vue Normal file
View File

@ -0,0 +1,24 @@
/*
* 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>
<router-view></router-view>
</template>
<script>
export default {
name: 'projects-conditions-index'
}
</script>

0
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/common.js → dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/common.js
View File

63
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/index.vue → dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue
View File

@ -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>
@ -68,7 +60,7 @@
import { stateType } from './common'
import mConditions from '@/module/components/conditions/conditions'
export default {
name: 'instance-conditions',
name: 'process-instance-conditions',
data () {
return {
// state(list)
@ -86,7 +78,8 @@
host: '',
// executor name
executorName: ''
}
},
dataTime: []
}
},
props: {},
@ -100,20 +93,14 @@
_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
},
/**
* empty date
*/
_dateEmpty () {
this.searchParams.startDate = ''
this.searchParams.endDate = ''
this.$refs.datepicker.empty()
this.searchParams.stateType = val
}
},
watch: {

124
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue Normal file
View File

@ -0,0 +1,124 @@
/*
* 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>
<m-conditions>
<template slot="search-group">
<div class="list">
<el-button size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
<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">
<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">
</el-option>
</el-select>
</div>
<div class="list">
<el-input v-model="searchParams.host" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('host')"></el-input>
</div>
<div class="list">
<el-input v-model="searchParams.executorName" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('Executor')"></el-input>
</div>
<div class="list">
<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">
<el-input v-model="searchParams.searchVal" @keyup.enter.native="_ckQuery" style="width: 160px;" size="mini" :placeholder="$t('name')"></el-input>
</div>
</template>
</m-conditions>
</template>
<script>
import _ from 'lodash'
import { stateType } from './common'
import mConditions from '@/module/components/conditions/conditions'
export default {
name: 'task-instance-conditions',
data () {
return {
// state(list)
stateTypeList: stateType,
searchParams: {
// state
stateType: '',
// start date
startDate: '',
// end date
endDate: '',
// search value
searchVal: '',
// host
host: '',
// executor name
executorName: '',
processInstanceName: ''
},
dataTime: []
}
},
props: {},
methods: {
_ckQuery () {
this.$emit('on-query', this.searchParams)
},
/**
* change times
*/
_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
}
},
watch: {
},
created () {
// Routing parameter merging
if (!_.isEmpty(this.$route.query)) {
this.searchParams = _.assign(this.searchParams, this.$route.query)
}
},
mounted () {
},
computed: {
},
components: { mConditions }
}
</script>

80
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
View File

@ -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>
@ -81,26 +74,26 @@
stateList: [
{
label: `${this.$t('none')}`,
code: ``
code: ''
},
{
label: `${this.$t('success')}`,
code: `成功`
code: '成功'
},
{
label: `${this.$t('waiting')}`,
code: `等待`
code: '等待'
},
{
label: `${this.$t('execution')}`,
code: `执行中`
code: '执行中'
},
{
label: `${this.$t('finish')}`,
code: `完成`
code: '完成'
}, {
label: `${this.$t('failed')}`,
code: `失败`
code: '失败'
}
],
searchParams: {
@ -111,7 +104,8 @@
taskDate: '',
startDate: '',
endDate: ''
}
},
dataTime: []
}
},
props: {},
@ -130,7 +124,7 @@
* 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 () {
@ -154,4 +148,4 @@
},
components: { mConditions }
}
</script>
</script>

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

@ -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>
@ -116,4 +88,4 @@
},
components: { }
}
</script>
</script>

14
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
View File

@ -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">
@ -42,7 +51,6 @@
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
@ -110,6 +118,6 @@
},
mounted () {
},
components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
components: { mList, mConditions, mSpin, mListConstruction, mNoData }
}
</script>

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

@ -19,9 +19,8 @@
</template>
<script>
import mCreateDag from '@/conf/home/pages/dag/index'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
export default {
name: 'definition-create-index',
components: { mCreateDag, mSecondaryMenu }
components: { mCreateDag }
}
</script>

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

@ -18,10 +18,9 @@
<m-definition-details></m-definition-details>
</template>
<script>
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mDefinitionDetails from '@/conf/home/pages/dag/definitionDetails.vue'
export default {
name: 'definition-details-index',
components: { mDefinitionDetails, mSecondaryMenu }
components: { mDefinitionDetails }
}
</script>

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

@ -17,11 +17,11 @@
<template>
<div class="ans-input email-model">
<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-wrapper" v-for="(item,$index) in activeListL" :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>
@ -74,6 +74,7 @@
tagModel: false,
email: '',
activeIndex: null,
activeListL: _.cloneDeep(this.activeList),
emailList: [],
index: 0,
emailWidth: 100,
@ -100,18 +101,18 @@
if (this.email === '') {
return true
}
this.email = _.trim(this.email).replace(/(;$)|(；$)/g, "")
this.email = _.trim(this.email).replace(/(;$)|(；$)/g, '')
let email = this.email
let is = (n) => {
return _.some(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList)), v => v === n)
return _.some(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL)), v => v === n)
}
if (isEmial(email)) {
if (!is(email)) {
this.emailWidth = 0
this.activeList.push(email)
this.activeListL.push(email)
this.email = ''
this._handlerEmailWitch()
return true
@ -132,7 +133,7 @@
this.emailList = []
this.isEmail = false
} else {
let a = _.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList))
let a = _.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL))
let b = a.concat(emailList)
let list = fuzzyQuery(b, val)
this.emailList = _.uniqWith(list.length && list, _.isEqual)
@ -161,11 +162,11 @@
if (!this.isCn) {
this.emailWidth = 0
if (_.isInteger(this.activeIndex)) {
this.activeList.pop()
this.activeListL.pop()
this.activeIndex = null
} else {
if (!this.email) {
this.activeIndex = this.activeList.length - 1
this.activeIndex = this.activeListL.length - 1
}
}
this._handlerEmailWitch()
@ -176,7 +177,7 @@
*/
_del (i) {
this.emailWidth = 0
this.activeList.splice(i, 1)
this.activeListL.splice(i, 1)
this._handlerEmailWitch()
},
/**
@ -221,14 +222,14 @@
this.email = ''
// Non-existing data
if (_.filter(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList)), v => v === item).length) {
if (_.filter(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL)), v => v === item).length) {
this.$message.warning(`${i18n.$t('Mailbox already exists! Recipients and copyers cannot repeat')}`)
return
}
// Width initialization
this.emailWidth = 0
// Insert data
this.activeList.push(item)
this.activeListL.push(item)
// Calculated width
this._handlerEmailWitch()
// Check mailbox index initialization
@ -264,7 +265,12 @@
this.activeIndex = null
},
activeList (val) {
this.$emit('valueEvent', val)
this.activeListL = _.cloneDeep(val)
},
activeListL (val) {
if (!_.isEqual(val, this.activeList)) {
this.$emit('valueEvent', val)
}
}
},
created () {
@ -299,6 +305,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;

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

@ -17,129 +17,135 @@
<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 :label="$t('Description')">
<template slot-scope="scope">
<span>{{scope.row.description | filterNull}}</span>
</template>
</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=""
:with-header="false">
<m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion" @closeVersion="closeVersion"></m-versions>
</el-drawer>
<el-dialog
:title="$t('Please set the parameters before starting')"
:visible.sync="startDialog"
width="auto">
<m-start :startData= "startData" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
</el-dialog>
<el-dialog
:title="$t('Set parameters before timing')"
:visible.sync="timingDialog"
width="auto">
<m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
</el-dialog>
<el-dialog
:title="$t('Info')"
:visible.sync="relatedItemsDialog"
width="auto">
<m-related-items :tmp="tmp" @onBatchCopy="onBatchCopy" @onBatchMove="onBatchMove" @closeRelatedItems="closeRelatedItems"></m-related-items>
</el-dialog>
</div>
</template>
<script>
@ -157,7 +163,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 +193,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 +213,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
*/
@ -225,54 +243,27 @@
* timing
*/
_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 +277,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 +317,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,9 +349,70 @@
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({
pageNo: 1,
pageSize: 10,
@ -372,118 +422,26 @@
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 || '')
})
},
/**
* 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
}
})
}
})
this.versionData.processDefinition = item
this.versionData.processDefinitionVersions = processDefinitionVersions
this.versionData.total = total
this.versionData.pageNo = pageNo
this.versionData.pageSize = pageSize
this.drawer = true
}).catch(e => {
this.$message.error(e.msg || '')
})
},
closeVersion () {
this.drawer = false
},
_batchExport () {
this.exportDefinition({
processDefinitionIds: this.strSelectIds,
fileName: "process_"+new Date().getTime()
fileName: 'process_' + new Date().getTime()
}).then(res => {
this._onUpdate()
this.checkAll = false
@ -498,59 +456,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
}
})
}
})
_batchMove () {
this.tmp = true
this.relatedItemsDialog = true
},
onBatchMove (item) {
this._moveProcess({ id: this.strSelectIds, projectId: item })
this.relatedItemsDialog = false
},
/**
* Edit state
@ -567,33 +492,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 +538,6 @@
},
mounted () {
},
components: { mVersions }
components: { mVersions, mStart, mTiming, mRelatedItems }
}
</script>

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

@ -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>
@ -40,7 +40,6 @@
</m-popup>
</template>
<script>
import _ from 'lodash'
import i18n from '@/module/i18n'
import store from '@/conf/home/store'
import mPopup from '@/module/components/popup/popup'
@ -56,39 +55,39 @@
}
},
props: {
tmp: Boolean
tmp: Boolean
},
methods: {
_ok () {
if(this._verification()) {
if(this.tmp) {
this.$emit('onBatchMove',this.itemId)
} else {
this.$emit('onBatchCopy',this.itemId)
}
if (this._verification()) {
if (this.tmp) {
this.$emit('onBatchMove', this.itemId)
} else {
this.$emit('onBatchCopy', this.itemId)
}
}
},
_verification() {
if(!this.itemId) {
this.$message.warning(`${i18n.$t('Project name is required')}`)
return false
_verification () {
if (!this.itemId) {
this.$message.warning(`${i18n.$t('Project name is required')}`)
return false
}
return true
}
},
watch: {
},
created () {
this.store.dispatch('dag/getAllItems', {}).then(res => {
if(res.data.length> 0) {
this.itemList = res.data
}
})
this.store.dispatch('dag/getAllItems', {}).then(res => {
if (res.data.length > 0) {
this.itemList = res.data
}
})
},
mounted () {
},
components: { mPopup, mListBoxF }
}
</script>
</script>

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

@ -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,27 +142,27 @@
{{$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>
<script>
import _ from 'lodash'
import dayjs from 'dayjs'
import mEmail from './email.vue'
import store from '@/conf/home/store'
@ -197,7 +195,7 @@
}
},
props: {
item: Object,
startData: Object,
startNodeList: {
type: String,
default: ''
@ -211,11 +209,11 @@
_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,
warningGroupId: this.warningGroupId=='' ? 0 : this.warningGroupId,
warningGroupId: this.warningGroupId === '' ? 0 : this.warningGroupId,
execType: this.execType ? 'COMPLEMENT_DATA' : null,
startNodeList: this.startNodeList,
taskDependType: this.taskDependType,
@ -231,7 +229,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()
@ -243,14 +241,14 @@
},
_getNotifyGroupList () {
return new Promise((resolve, reject) => {
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
resolve()
})
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
resolve()
})
})
},
_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 +257,7 @@
this._start()
},
close () {
this.$emit('close')
this.$emit('closeStart')
}
},
watch: {
@ -269,7 +267,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 || []
@ -278,7 +276,7 @@
} else {
this.store.dispatch('security/getWorkerGroupsAll').then(res => {
this.$nextTick(() => {
if(res.length>0) {
if (res.length > 0) {
this.workerGroup = res[0].id
}
})
@ -291,7 +289,7 @@
this.warningGroupId = ''
})
})
this.workflowName = this.item.name
this.workflowName = this.startData.name
},
computed: {},
components: { mEmail, mPriority, mWorkerGroups }

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

@ -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">
<el-popover
placement="bottom-start"
trigger="click">
<template slot="reference">
<el-input
style="width: 360px;"
type="text"
size="small"
readonly
:value="crontab">
</el-input>
</template>
<div class="crontab-box">
<v-crontab v-model="crontab" :locale="i18n"></v-crontab>
</div>
<template slot="reference">
<x-input
style="width: 360px;"
type="text"
readonly
:value="crontab"
autocomplete="off">
</x-input>
</template>
</x-poptip>
</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) {
@ -229,7 +228,7 @@
failureStrategy: this.failureStrategy,
warningType: this.warningType,
processInstancePriority: this.processInstancePriority,
warningGroupId: this.warningGroupId =='' ? 0 : this.warningGroupId,
warningGroupId: this.warningGroupId === '' ? 0 : this.warningGroupId,
receivers: this.receivers.join(',') || '',
receiversCc: this.receiversCc.join(',') || '',
workerGroup: this.workerGroup
@ -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 || '')
})
@ -257,44 +256,43 @@
},
_preview () {
if (this._verification()) {
let api = 'dag/previewSchedule'
let searchParams = {
schedule: JSON.stringify({
startTime: this.scheduleTime[0],
endTime: this.scheduleTime[1],
crontab: this.crontab
})
}
let msg = ''
if (this._verification()) {
let api = 'dag/previewSchedule'
let searchParams = {
schedule: JSON.stringify({
startTime: this.scheduleTime[0],
endTime: this.scheduleTime[1],
crontab: this.crontab
})
}
this.store.dispatch(api, searchParams).then(res => {
if (res.length) {
this.previewTimes = res
} else {
this.$message.warning(`${i18n.$t('There is no data for this period of time')}`)
}
})
}
},
this.store.dispatch(api, searchParams).then(res => {
if (res.length) {
this.previewTimes = res
} else {
this.$message.warning(`${i18n.$t('There is no data for this period of time')}`)
}
})
}
},
_getNotifyGroupList () {
return new Promise((resolve, reject) => {
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
if (this.notifyGroupList.length) {
resolve()
} else {
reject(new Error(0))
}
})
this.store.dispatch('dag/getNotifyGroupList').then(res => {
this.notifyGroupList = res
if (this.notifyGroupList.length) {
resolve()
} else {
reject(new Error(0))
}
})
})
},
ok () {
this._timing()
},
close () {
this.$emit('close')
this.$emit('closeTiming')
},
preview () {
this._preview()
@ -303,7 +301,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,37 +313,37 @@
})
}
} 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
let day = date.getDate()
if (month < 10) {
month = "0" + month;
month = '0' + month
}
if (day < 10) {
day = "0" + day;
day = '0' + day
}
let startDate = year + "-" + month + "-" + day + ' ' + '00:00:00'
let endDate = (year+100) + "-" + month + "-" + day + ' ' + '00:00:00'
let startDate = year + '-' + month + '-' + day + ' ' + '00:00:00'
let endDate = (year + 100) + '-' + month + '-' + day + ' ' + '00:00:00'
let times = []
times[0] = startDate
times[1] = endDate
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
@ -356,13 +354,13 @@
// let list = _.filter(this.notifyGroupList, v => v.id === item.warningGroupId)
this.warningGroupId = item.warningGroupId
})
}).catch(() => this.warningGroupId = '')
}).catch(() => { this.warningGroupId = '' })
} else {
this._getNotifyGroupList().then(() => {
this.$nextTick(() => {
this.warningGroupId = ''
})
}).catch(() => this.warningGroupId = '')
}).catch(() => { this.warningGroupId = '' })
}
},
components: { vCrontab, mEmail, mPriority, mWorkerGroups }
@ -381,7 +379,7 @@
.v-crontab {
}
}
.from-model {
.form-model {
padding-top: 0;
}
.title-box {
@ -414,16 +412,16 @@
padding-bottom: 30px;
}
}
.v-crontab-from-model {
.v-crontab-form-model {
.list-box {
padding: 0;
}
}
.x-date-packer-panel .x-date-packer-day .lattice label.bg-hover {
background: #00BFFF!important;
background: #00BFFF!important;
margin-top: -4px;
}
.x-date-packer-panel .x-date-packer-day .lattice em:hover {
background: #0098e1!important;
background: #0098e1!important;
}
</style>

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

@ -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,33 +142,16 @@
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
*/
_close () {
// flag Whether to delete a node this.$destroy()
this.$emit('close', {
fromThis: this
})
this.$emit('closeVersion')
}
},
created () {

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

@ -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">
@ -49,7 +58,6 @@
import mNoData from '@/module/components/noData/noData'
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
import mConditions from '@/module/components/conditions/conditions'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
import { findComponentDownward } from '@/module/util/'
@ -100,15 +108,15 @@
* get data list
*/
_getList (flag) {
if(sessionStorage.getItem('isLeft')==0) {
if (sessionStorage.getItem('isLeft') === 0) {
this.isLeft = false
} else {
this.isLeft = true
}
this.isLoading = !flag
this.getProcessListP(this.searchParams).then(res => {
if(this.searchParams.pageNo>1 && res.totalList.length == 0) {
this.searchParams.pageNo = this.searchParams.pageNo -1
if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
this.searchParams.pageNo = this.searchParams.pageNo - 1
} else {
this.processListP = []
this.processListP = res.totalList
@ -137,13 +145,13 @@
created () {
localStore.removeItem('subProcessId')
},
mounted() {
this.$modal.destroy()
mounted () {
},
beforeDestroy () {
sessionStorage.setItem('isLeft',1)
sessionStorage.setItem('isLeft', 1)
},
components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
components: { mList, mConditions, mSpin, mListConstruction, mNoData }
}
</script>
@ -176,4 +184,4 @@
}
}
}
</style>
</style>

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

@ -16,26 +16,31 @@
*/
<template>
<m-list-construction :title="$t('TreeView')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
<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">
@ -43,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>
@ -52,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>
@ -77,7 +82,6 @@
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import { tasksType, tasksState } from '@/conf/home/pages/dag/_source/config'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
@ -101,6 +105,9 @@
props: {},
methods: {
...mapActions('dag', ['getViewTree']),
_close () {
this.$router.go(-1)
},
/**
* get tree data
*/
@ -181,7 +188,7 @@
this.$router.push({ path: `/projects/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
},
_onChangeSelect (o) {
this.limit = o.value
this.limit = o
this._getViewTree()
}
},
@ -195,7 +202,7 @@
},
mounted () {
},
components: { mSpin, mSecondaryMenu, mListConstruction, mNoData }
components: { mSpin, mListConstruction, mNoData }
}
</script>
@ -257,5 +264,4 @@
}
}
</style>

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

@ -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="auto">
<m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
</el-dialog>
</div>
</template>
<script>
@ -166,13 +121,19 @@
total: null,
pageNo: 1,
pageSize: 10,
list: []
list: [],
timingDialog: false,
timingData: {
item: {},
receiversD: [],
receiversCcD: []
}
}
},
props: {
},
methods: {
...mapActions('dag', ['getScheduleList', 'scheduleOffline', 'scheduleOnline', 'getReceiver','deleteTiming']),
...mapActions('dag', ['getScheduleList', 'scheduleOffline', 'scheduleOnline', 'getReceiver', 'deleteTiming']),
/**
* delete
*/
@ -285,35 +246,20 @@
* 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: {},
@ -321,7 +267,7 @@
this._getScheduleList()
},
mounted () {},
components: { mSpin, mNoData }
components: { mSpin, mNoData, mTiming }
}
</script>

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

@ -16,6 +16,11 @@
*/
<template>
<m-list-construction :title="$t('Cron Manage')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
<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">
<m-list></m-list>
</template>
@ -23,10 +28,14 @@
</template>
<script>
import mList from './_source/list'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default {
name: 'definition-timing-index',
components: { mList, mListConstruction, mSecondaryMenu }
methods: {
_close () {
this.$router.go(-1)
}
},
components: { mList, mListConstruction }
}
</script>

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

@ -70,7 +70,7 @@
},
watch: {
'searchParams': {
searchParams: {
deep: true,
immediate: true,
handler (o) {
@ -91,4 +91,4 @@
computed: {},
components: { mNoData }
}
</script>
</script>

6
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue
View File

@ -38,7 +38,7 @@
return {
isSpin: true,
msg: true,
parameter: {projectId: 0}
parameter: { projectId: 0 }
}
},
props: {
@ -71,9 +71,9 @@
},
created () {
this.isSpin = true
this.parameter.projectId = this.projectId;
this.parameter.projectId = this.projectId
this.getDefineUserCount(this.parameter).then(res => {
this.msg = res.data.count > 0 ? true : false
this.msg = res.data.count > 0
this.defineUserList = []
this._handleDefineUser(res)
this.isSpin = false

26
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
View File

@ -19,7 +19,7 @@
<div v-show="!msg">
<div class="data-area" v-spin="isSpin" style="height: 430px;">
<div class="col-md-7">
<div id="process-state-pie" style="height:260px;margin-top: 100px;"></div>
<div id="process-state-pie" style="width:100%;height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
@ -31,7 +31,10 @@
</tr>
<tr v-for="(item,$index) in processStateList" :key="$index">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" @click="searchParams.projectId && _goProcess(item.key)" :class="searchParams.projectId ?'links':''">{{item.value}}</a></span></td>
<td>
<a v-if="currentName === 'home'" style="cursor: default">{{item.value}}</a>
<span v-else><a href="javascript:" @click="searchParams.projectId && _goProcess(item.key)">{{item.value}}</a></span>
</td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
@ -49,15 +52,17 @@
import { mapActions } from 'vuex'
import { pie } from './chartConfig'
import Chart from '@/module/ana-charts'
import echarts from 'echarts'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
import { stateType } from '@/conf/home/pages/projects/pages/_source/conditions/instance/common'
export default {
name: 'process-state-count',
data () {
return {
isSpin: true,
msg: '',
processStateList: []
processStateList: [],
currentName: ''
}
},
props: {
@ -69,7 +74,7 @@
this.$router.push({
name: 'projects-instance-list',
query: {
stateType: _.find(stateType, ['label', name])['code'],
stateType: _.find(stateType, ['label', name]).code,
startDate: this.searchParams.startDate,
endDate: this.searchParams.endDate
}
@ -79,7 +84,7 @@
let data = res.data.taskCountDtos
this.processStateList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
key: _.find(stateType, ['code', v.taskStateType]).label,
value: v.count
}
})
@ -94,7 +99,7 @@
}
},
watch: {
'searchParams': {
searchParams: {
deep: true,
immediate: true,
handler (o) {
@ -108,11 +113,15 @@
this.isSpin = false
})
}
},
'$store.state.projects.sideBar': function () {
echarts.init(document.getElementById('process-state-pie')).resize()
}
},
beforeCreate () {
},
created () {
this.currentName = this.$router.currentRoute.name
},
beforeMount () {
},
@ -132,7 +141,4 @@
</script>
<style lang="scss" rel="stylesheet/scss">
.process-state-count-model {
}
</style>

6
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/queueCount.vue
View File

@ -29,7 +29,7 @@
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in queueList">
<tr :key="$index" v-for="(item,$index) in queueList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" >{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
@ -76,7 +76,7 @@
}
},
watch: {
'searchParams': {
searchParams: {
deep: true,
immediate: true,
handler (o) {
@ -98,4 +98,4 @@
},
components: { mNoData }
}
</script>
</script>

145
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
View File

@ -1,145 +0,0 @@
/*
* 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="task-ctatus-count-model">
<div v-show="!msg">
<div class="data-area" v-spin="isSpin" style="height: 430px;">
<div class="col-md-7">
<div id="task-status-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in taskCtatusList" :key="$index">
<td><span>{{$index+1}}</span></td>
<td>
<span>
<a href="javascript:" @click="searchParams.projectId && _goTask(item.key)" :class="searchParams.projectId ?'links':''">{{item.value}}</a>
</span>
</td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div v-show="msg">
<m-no-data :msg="msg" v-if="msg" :height="430"></m-no-data>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { pie } from './chartConfig'
import Chart from '@/module/ana-charts'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
export default {
name: 'task-ctatus-count',
data () {
return {
isSpin: true,
msg: '',
taskCtatusList: []
}
},
props: {
searchParams: Object
},
methods: {
...mapActions('projects', ['getTaskCtatusCount']),
_goTask (name) {
this.$router.push({
name: 'task-instance',
query: {
stateType: _.find(stateType, ['label', name])['code'],
startDate: this.searchParams.startDate,
endDate: this.searchParams.endDate
}
})
},
_handleTaskCtatus (res) {
let data = res.data.taskCountDtos
this.taskCtatusList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count,
type: 'type'
}
})
const myChart = Chart.pie('#task-status-pie', this.taskCtatusList, { title: '' })
myChart.echart.setOption(pie)
// 首页不允许跳转
if (this.searchParams.projectId) {
myChart.echart.on('click', e => {
this._goTask(e.data.name)
})
}
}
},
watch: {
'searchParams': {
deep: true,
immediate: true,
handler (o) {
this.isSpin = true
this.getTaskCtatusCount(o).then(res => {
this.taskCtatusList = []
this._handleTaskCtatus(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
}
}
},
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.task-ctatus-count-model {
}
</style>

8
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskStatusCount.vue
View File

@ -54,7 +54,7 @@
import { pie } from './chartConfig'
import Chart from '@/module/ana-charts'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
import { stateType } from '@/conf/home/pages/projects/pages/_source/conditions/instance/common'
export default {
name: 'task-status-count',
@ -74,7 +74,7 @@
this.$router.push({
name: 'task-instance',
query: {
stateType: _.find(stateType, ['label', name])['code'],
stateType: _.find(stateType, ['label', name]).code,
startDate: this.searchParams.startDate,
endDate: this.searchParams.endDate
}
@ -85,7 +85,7 @@
this.taskStatusList = _.map(data, v => {
return {
// CHECK!!
key: _.find(stateType, ['code', v.taskStateType])['label'],
key: _.find(stateType, ['code', v.taskStateType]).label,
value: v.count,
type: 'type'
}
@ -102,7 +102,7 @@
}
},
watch: {
'searchParams': {
searchParams: {
deep: true,
immediate: true,
handler (o) {

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