You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ki...@apache.org on 2020/12/31 08:45:57 UTC
[incubator-dolphinscheduler] branch alert_plugin_design updated:
Replace the front-end code of the plugin branch with the front-end code of
the dev branch (#4353)
This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch alert_plugin_design
in repository https://gitbox.apache.org/repos/asf/incubator-dolphinscheduler.git
The following commit(s) were added to refs/heads/alert_plugin_design by this push:
new 5808a0a Replace the front-end code of the plugin branch with the front-end code of the dev branch (#4353)
5808a0a is described below
commit 5808a0a8b1ad0f4ba77116a2fb61e97d8cc7c55d
Author: break60 <79...@qq.com>
AuthorDate: Thu Dec 31 16:45:47 2020 +0800
Replace the front-end code of the plugin branch with the front-end code of the dev branch (#4353)
* Replace the front-end code of the plugin branch with the front-end code of the dev branch
---
dolphinscheduler-ui/.babelrc | 10 +-
dolphinscheduler-ui/.eslintignore | 7 +
dolphinscheduler-ui/.eslintrc.yml | 12 +-
dolphinscheduler-ui/build/config.js | 12 +-
dolphinscheduler-ui/build/webpack.config.dev.js | 43 +-
dolphinscheduler-ui/build/webpack.config.prod.js | 7 +-
dolphinscheduler-ui/package.json | 28 +-
dolphinscheduler-ui/pom.xml | 5 +-
dolphinscheduler-ui/src/components/Counter.vue | 46 +-
dolphinscheduler-ui/src/components/Message.vue | 14 +-
dolphinscheduler-ui/src/js/conf/home/App.vue | 23 +-
dolphinscheduler-ui/src/js/conf/home/index.js | 15 +-
.../src/js/conf/home/pages/dag/_source/config.js | 38 +-
.../src/js/conf/home/pages/dag/_source/dag.js | 43 +-
.../src/js/conf/home/pages/dag/_source/dag.scss | 4 +-
.../src/js/conf/home/pages/dag/_source/dag.vue | 705 +++++++++++----------
.../_source/formModel/_source/dependentTimeout.vue | 68 +-
.../dag/_source/formModel/_source/selectInput.vue | 39 +-
.../dag/_source/formModel/_source/timeoutAlarm.vue | 16 +-
.../dag/_source/formModel/_source/workerGroups.vue | 20 +-
.../pages/dag/_source/formModel/formLineModel.vue | 78 ++-
.../pages/dag/_source/formModel/formModel.scss | 58 +-
.../home/pages/dag/_source/formModel/formModel.vue | 261 ++++----
.../conf/home/pages/dag/_source/formModel/log.vue | 71 ++-
.../_source/formModel/tasks/_source/datasource.vue | 24 +-
.../formModel/tasks/_source/dependItemList.vue | 67 +-
.../_source/formModel/tasks/_source/httpParams.vue | 58 +-
.../tasks/_source/{scriptBox.vue => jsonBox.vue} | 20 +-
.../tasks/_source/{listBox.vue => list4Box.vue} | 12 +-
.../_source/formModel/tasks/_source/listBox.vue | 2 -
.../formModel/tasks/_source/localParams.vue | 58 +-
.../_source/formModel/tasks/_source/nodeStatus.vue | 36 +-
.../_source/formModel/tasks/_source/resources.vue | 9 +-
.../_source/formModel/tasks/_source/scriptBox.vue | 19 +-
.../_source/formModel/tasks/_source/sqlType.vue | 18 +-
.../formModel/tasks/_source/statementList.vue | 13 +-
.../dag/_source/formModel/tasks/_source/udfs.vue | 13 +-
.../dag/_source/formModel/tasks/conditions.vue | 24 +-
.../pages/dag/_source/formModel/tasks/datax.vue | 161 ++---
.../dag/_source/formModel/tasks/dependent.vue | 19 +-
.../pages/dag/_source/formModel/tasks/flink.vue | 461 +++++++-------
.../pages/dag/_source/formModel/tasks/http.vue | 99 ++-
.../home/pages/dag/_source/formModel/tasks/mr.vue | 296 ++++-----
.../dag/_source/formModel/tasks/pre_tasks.vue | 23 +-
.../dag/_source/formModel/tasks/procedure.vue | 21 +-
.../pages/dag/_source/formModel/tasks/python.vue | 200 +++---
.../pages/dag/_source/formModel/tasks/shell.vue | 228 +++----
.../pages/dag/_source/formModel/tasks/spark.vue | 483 +++++++-------
.../home/pages/dag/_source/formModel/tasks/sql.vue | 163 +++--
.../pages/dag/_source/formModel/tasks/sqoop.vue | 670 ++++++++++----------
.../dag/_source/formModel/tasks/sub_process.vue | 25 +-
.../dag/_source/formModel/tasks/waterdrop.vue | 333 ++++------
.../home/pages/dag/_source/jumpAffirm/index.js | 43 +-
.../home/pages/dag/_source/plugIn/jsPlumbHandle.js | 83 +--
.../js/conf/home/pages/dag/_source/plugIn/util.js | 12 +-
.../home/pages/dag/_source/startingParam/index.vue | 15 +-
.../pages/dag/_source/udp/_source/selectTenant.vue | 34 +-
.../src/js/conf/home/pages/dag/_source/udp/udp.vue | 33 +-
.../conf/home/pages/dag/_source/variable/index.vue | 2 +-
.../pages/dag/_source/variable/variablesView.vue | 16 +-
.../js/conf/home/pages/dag/definitionDetails.vue | 6 +-
.../src/js/conf/home/pages/dag/index.vue | 6 +-
.../src/js/conf/home/pages/dag/instanceDetails.vue | 6 +-
.../pages/list/_source/createDataSource.vue | 168 +++--
.../pages/datasource/pages/list/_source/list.vue | 141 ++---
.../home/pages/datasource/pages/list/index.vue | 66 +-
.../src/js/conf/home/pages/home/index.vue | 17 +-
.../src/js/conf/home/pages/monitor/index.vue | 6 +-
.../pages/servers/_source/zookeeperDirectories.vue | 23 +-
.../pages/servers/_source/zookeeperList.vue | 114 +---
.../home/pages/monitor/pages/servers/apiserver.vue | 6 -
.../conf/home/pages/monitor/pages/servers/db.vue | 85 +--
.../home/pages/monitor/pages/servers/master.vue | 5 +-
.../pages/monitor/pages/servers/statistics.vue | 26 +-
.../home/pages/monitor/pages/servers/worker.vue | 28 +-
.../{instance => _source/conditions}/index.vue | 4 +-
.../instance}/common.js | 0
.../instance/processInstance.vue} | 63 +-
.../instance/taskInstance.vue} | 69 +-
.../_source/taskRecordList/_source/conditions.vue | 80 ++-
.../pages/_source/taskRecordList/_source/list.vue | 98 +--
.../pages/_source/taskRecordList/index.vue | 14 +-
.../pages/definition/pages/create/index.vue | 3 +-
.../pages/definition/pages/details/index.vue | 3 +-
.../pages/definition/pages/list/_source/email.vue | 66 +-
.../pages/definition/pages/list/_source/list.vue | 628 ++++++++----------
.../definition/pages/list/_source/relatedItems.vue | 45 +-
.../pages/definition/pages/list/_source/start.vue | 114 ++--
.../pages/definition/pages/list/_source/timing.vue | 218 ++++---
.../definition/pages/list/_source/versions.vue | 175 ++---
.../projects/pages/definition/pages/list/index.vue | 32 +-
.../projects/pages/definition/pages/tree/index.vue | 34 +-
.../pages/definition/timing/_source/list.vue | 240 +++----
.../projects/pages/definition/timing/index.vue | 13 +-
.../pages/index/_source/commandStateCount.vue | 4 +-
.../pages/index/_source/defineUserCount.vue | 6 +-
.../pages/index/_source/processStateCount.vue | 26 +-
.../projects/pages/index/_source/queueCount.vue | 6 +-
.../pages/index/_source/taskCtatusCount.vue | 145 -----
.../pages/index/_source/taskStatusCount.vue | 8 +-
.../conf/home/pages/projects/pages/index/index.vue | 34 +-
.../home/pages/projects/pages/instance/index.vue | 2 +-
.../pages/instance/pages/details/index.vue | 5 +-
.../projects/pages/instance/pages/gantt/index.vue | 6 +-
.../pages/instance/pages/list/_source/list.vue | 487 ++++++--------
.../projects/pages/instance/pages/list/index.vue | 33 +-
.../projects/pages/kinship/_source/graphGrid.vue | 12 +-
.../pages/kinship/_source/graphGridOption.js | 53 +-
.../home/pages/projects/pages/kinship/index.vue | 72 +--
.../projects/pages/list/_source/createProject.vue | 50 +-
.../pages/projects/pages/list/_source/list.vue | 150 ++---
.../conf/home/pages/projects/pages/list/index.vue | 58 +-
.../projects/pages/taskInstance/_source/list.vue | 200 +++---
.../pages/projects/pages/taskInstance/index.vue | 40 +-
.../home/pages/projects/pages/timing/index.vue | 2 +-
.../src/js/conf/home/pages/resource/index.vue | 5 +-
.../conf/home/pages/resource/pages/file/index.vue | 5 +-
.../resource/pages/file/pages/create/index.vue | 35 +-
.../pages/file/pages/createFolder/index.vue | 44 +-
.../pages/file/pages/createUdfFolder/index.vue | 32 +-
.../resource/pages/file/pages/details/index.vue | 20 +-
.../pages/resource/pages/file/pages/edit/index.vue | 10 +-
.../pages/file/pages/list/_source/list.vue | 223 +++----
.../pages/file/pages/list/_source/rename.vue | 32 +-
.../pages/resource/pages/file/pages/list/index.vue | 32 +-
.../resource/pages/file/pages/subFile/index.vue | 34 +-
.../pages/file/pages/subFileFolder/index.vue | 43 +-
.../pages/file/pages/subdirectory/_source/list.vue | 221 +++----
.../file/pages/subdirectory/_source/rename.vue | 32 +-
.../pages/file/pages/subdirectory/index.vue | 49 +-
.../pages/udf/pages/createUdfFolder/index.vue | 30 +-
.../pages/udf/pages/function/_source/createUdf.vue | 84 +--
.../pages/udf/pages/function/_source/list.vue | 196 ++----
.../resource/pages/udf/pages/function/index.vue | 67 +-
.../pages/udf/pages/resource/_source/list.vue | 218 +++----
.../pages/udf/pages/resource/_source/rename.vue | 32 +-
.../resource/pages/udf/pages/resource/index.vue | 28 +-
.../udf/pages/subUdfDirectory/_source/list.vue | 207 +++---
.../udf/pages/subUdfDirectory/_source/rename.vue | 29 +-
.../pages/udf/pages/subUdfDirectory/index.vue | 45 +-
.../pages/udf/pages/subUdfFolder/index.vue | 29 +-
.../src/js/conf/home/pages/security/index.vue | 3 +-
.../alarmPluginExample/_source/createWarning.vue | 145 -----
.../pages/alarmPluginExample/_source/list.vue | 224 -------
.../security/pages/alarmPluginExample/index.vue | 161 -----
.../security/pages/queue/_source/createQueue.vue | 42 +-
.../pages/security/pages/queue/_source/list.vue | 96 +--
.../conf/home/pages/security/pages/queue/index.vue | 69 +-
.../pages/tenement/_source/createTenement.vue | 74 +--
.../pages/security/pages/tenement/_source/list.vue | 20 +-
.../home/pages/security/pages/tenement/index.vue | 58 +-
.../conf/home/pages/security/pages/token/index.vue | 3 +-
.../security/pages/users/_source/createUser.vue | 93 +--
.../pages/security/pages/users/_source/list.vue | 464 ++++++--------
.../conf/home/pages/security/pages/users/index.vue | 70 +-
.../pages/warningGroups/_source/createWarning.vue | 42 +-
.../security/pages/warningGroups/_source/list.vue | 223 +++----
.../pages/security/pages/warningGroups/index.vue | 70 +-
.../pages/workerGroups/_source/createWorker.vue | 34 +-
.../security/pages/workerGroups/_source/list.vue | 68 +-
.../pages/security/pages/workerGroups/index.vue | 43 +-
.../src/js/conf/home/pages/user/index.vue | 5 +-
.../home/pages/user/pages/account/_source/info.vue | 58 +-
.../conf/home/pages/user/pages/account/index.vue | 5 +-
.../pages/user/pages/password/_source/info.vue | 14 +-
.../conf/home/pages/user/pages/password/index.vue | 5 +-
.../pages/user/pages/token/_source/createToken.vue | 55 +-
.../home/pages/user/pages/token/_source/list.vue | 112 ++--
.../js/conf/home/pages/user/pages/token/index.vue | 71 +--
.../src/js/conf/home/router/index.js | 8 -
.../src/js/conf/home/store/dag/actions.js | 18 +-
.../src/js/conf/home/store/dag/mutations.js | 4 +-
.../src/js/conf/home/store/kinship/actions.js | 26 +-
.../src/js/conf/home/store/projects/mutations.js | 6 +
.../src/js/conf/home/store/projects/state.js | 2 +-
.../src/js/conf/home/store/security/actions.js | 2 +-
dolphinscheduler-ui/src/js/conf/login/App.vue | 34 +-
dolphinscheduler-ui/src/js/conf/login/index.js | 10 +-
dolphinscheduler-ui/src/js/module/axios/jsonp.js | 20 +-
.../src/js/module/axios/querystring.js | 14 +-
.../js/module/components/conditions/conditions.vue | 10 +-
.../crontab/source/_source/input-number.vue | 9 +-
.../components/crontab/source/_times/day.vue | 136 ++--
.../components/crontab/source/_times/hour.vue | 38 +-
.../components/crontab/source/_times/minute.vue | 38 +-
.../components/crontab/source/_times/month.vue | 38 +-
.../components/crontab/source/_times/second.vue | 38 +-
.../components/crontab/source/_times/year.vue | 40 +-
.../js/module/components/crontab/source/app.vue | 14 +-
.../js/module/components/crontab/source/index.scss | 2 +-
.../module/components/crontab/source/util/index.js | 2 +-
.../components/fileUpdate/definitionUpdate.vue | 42 +-
...sourceChildUpdate.vue => fileChildReUpdate.vue} | 83 ++-
.../components/fileUpdate/fileChildUpdate.vue | 53 +-
.../{resourceChildUpdate.vue => fileReUpload.vue} | 88 +--
.../js/module/components/fileUpdate/fileUpdate.vue | 52 +-
.../components/fileUpdate/resourceChildUpdate.vue | 53 +-
.../js/module/components/fileUpdate/udfUpdate.vue | 26 +-
.../src/js/module/components/layout/layout.vue | 6 +-
.../listConstruction/listConstruction.vue | 1 +
.../src/js/module/components/nav/nav.vue | 355 +++++------
.../src/js/module/components/popup/popup.vue | 1 -
.../src/js/module/components/priority/priority.vue | 52 +-
.../components/secondaryMenu/_source/menu.js | 41 +-
.../components/secondaryMenu/secondaryMenu.vue | 12 +-
.../components/tooltipsJSON/tooltipsJSON.vue | 10 +-
.../src/js/module/components/transfer/resource.vue | 183 +++---
.../src/js/module/components/transfer/transfer.vue | 71 +--
.../src/js/module/download/index.js | 4 +-
dolphinscheduler-ui/src/js/module/filter/filter.js | 28 +-
.../mutations.js => module/filter/filterNull.js} | 9 +-
.../src/js/module/i18n/locale/en_US.js | 110 ++--
.../src/js/module/i18n/locale/zh_CN.js | 106 ++--
dolphinscheduler-ui/src/js/module/io/index.js | 2 +-
.../src/js/module/permissions/index.js | 1 +
.../src/js/module/util/localStorage.js | 6 +-
.../src/js/module/visibility/index.js | 70 ++
dolphinscheduler-ui/src/sass/common/_table.scss | 6 +
dolphinscheduler-ui/src/sass/common/index.scss | 6 +-
dolphinscheduler-ui/src/sass/conf/login/index.scss | 2 +-
.../data/project/CreateProjectData.java | 25 +-
.../data/project/CreateWorkflowData.java | 77 +++
.../locator/project/CreateProjectLocator.java | 47 ++
.../locator/project/CreateWorkflowLocator.java | 183 ++++++
.../locator/security/TenantManageLocator.java | 8 +-
.../page/project/CreateProjectPage.java | 74 +++
.../page/project/CreateWorkflowPage.java | 201 ++++++
.../page/security/TenantManagePage.java | 3 +-
.../testcase/deleteData/DeleteProjectTest.java | 39 ++
.../testcase/deleteData/DeleteTenantTest.java | 38 ++
.../testcase/deleteData/DeleteUserTest.java | 42 ++
.../testcase/deleteData/DeleteWorkflowTest.java | 43 ++
e2e/src/test/resources/testData/security_zh_cn.yml | 1 -
e2e/testng.xml | 8 +-
234 files changed, 7561 insertions(+), 8742 deletions(-)
diff --git a/dolphinscheduler-ui/.babelrc b/dolphinscheduler-ui/.babelrc
index aeb5ba2..5fe8580 100644
--- a/dolphinscheduler-ui/.babelrc
+++ b/dolphinscheduler-ui/.babelrc
@@ -5,7 +5,15 @@
"debug": false,
"useBuiltIns": true,
"targets": {
- "browsers": [ "ie > 8", "last 2 version", "safari >= 9" ]
+ "browsers": [
+ "> 1%",
+ "last 2 versions",
+ "ie >= 9",
+ "edge >= 12",
+ "firefox >= 28",
+ "chrome >= 29",
+ "opera >= 17"
+ ]
},
"production": {
"plugins": ["transform-remove-console"]
diff --git a/dolphinscheduler-ui/.eslintignore b/dolphinscheduler-ui/.eslintignore
new file mode 100644
index 0000000..cd1b821
--- /dev/null
+++ b/dolphinscheduler-ui/.eslintignore
@@ -0,0 +1,7 @@
+/_test_/
+/build/
+/dist/
+/node/
+/node_modules/
+/target/
+/*.js
diff --git a/dolphinscheduler-ui/.eslintrc.yml b/dolphinscheduler-ui/.eslintrc.yml
index 8d4020f..64c83e6 100644
--- a/dolphinscheduler-ui/.eslintrc.yml
+++ b/dolphinscheduler-ui/.eslintrc.yml
@@ -26,9 +26,19 @@ globals:
Atomics: readonly
SharedArrayBuffer: readonly
PUBLIC_PATH: readonly
+ $t: readonly
parserOptions:
ecmaVersion: 2018
sourceType: module
plugins:
- vue
-rules: {}
+rules:
+ vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }]
+ prefer-promise-reject-errors: 'off'
+ no-prototype-builtins: 'off'
+ no-mixed-operators: 'off'
+ no-extend-native: 'off'
+ prefer-const: 'off'
+ no-var: 'error'
+overrides:
+ - { 'files': ['*.vue'], 'rules': { 'indent': 'off' }}
diff --git a/dolphinscheduler-ui/build/config.js b/dolphinscheduler-ui/build/config.js
index 11bbec5..1186066 100644
--- a/dolphinscheduler-ui/build/config.js
+++ b/dolphinscheduler-ui/build/config.js
@@ -47,7 +47,7 @@ const jsEntry = (() => {
parts.shift()
let modules = parts.join('/')
let entry = moduleName(modules)
- obj[entry] = val
+ obj[entry] = ['babel-polyfill', val]
})
return obj
})()
@@ -126,6 +126,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',
options: {
diff --git a/dolphinscheduler-ui/build/webpack.config.dev.js b/dolphinscheduler-ui/build/webpack.config.dev.js
index d443bf8..ea25033 100644
--- a/dolphinscheduler-ui/build/webpack.config.dev.js
+++ b/dolphinscheduler-ui/build/webpack.config.dev.js
@@ -19,6 +19,8 @@ const merge = require('webpack-merge')
const { assetsDir, baseConfig } = require('./config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ProgressPlugin = require('progress-bar-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
const getEnv = require('env-parse').getEnv
const config = merge.smart(baseConfig, {
@@ -33,6 +35,7 @@ const config = merge.smart(baseConfig, {
port: getEnv('DEV_PORT', 8888),
host: getEnv('DEV_HOST', 'localhost'),
noInfo: false,
+ overlay: { warnings: false, errors: true },
historyApiFallback: true,
disableHostCheck: true,
proxy: {
@@ -42,12 +45,12 @@ const config = merge.smart(baseConfig, {
changeOrigin: true
}
},
- progress: false,
- quiet: false,
+ progress: true,
+ quiet: true,
stats: {
colors: true
},
- clientLogLevel: 'none'
+ clientLogLevel: 'warning'
},
plugins: [
new ProgressPlugin(),
@@ -57,4 +60,36 @@ const config = merge.smart(baseConfig, {
mode: 'development'
})
-module.exports = config
+module.exports = new Promise((resolve, reject) => {
+ portfinder.basePort = process.env.PORT || config.devServer.port
+ portfinder.getPort((err, port) => {
+ if (err) {
+ reject(err)
+ } else {
+ // publish the new Port, necessary for e2e tests
+ process.env.PORT = port
+ // add port to devServer config
+ config.devServer.port = port
+ // Add FriendlyErrorsPlugin
+ config.plugins.push(new FriendlyErrorsPlugin({
+ compilationSuccessInfo: {
+ messages: [`Your application is running here: http://${config.devServer.host}:${port}`],
+ },
+ onErrors: () => {
+ const notifier = require('node-notifier')
+ return (severity, errors) => {
+ if (severity !== 'error') return
+ const error = errors[0]
+ const filename = error.file && error.file.split('!').pop()
+ notifier.notify({
+ title: packageConfig.name,
+ message: severity + ': ' + error.name,
+ subtitle: filename || ''
+ })
+ }
+ }
+ }))
+ resolve(config)
+ }
+ })
+})
diff --git a/dolphinscheduler-ui/build/webpack.config.prod.js b/dolphinscheduler-ui/build/webpack.config.prod.js
index 4bb90d5..1024ac6 100644
--- a/dolphinscheduler-ui/build/webpack.config.prod.js
+++ b/dolphinscheduler-ui/build/webpack.config.prod.js
@@ -51,12 +51,7 @@ const config = merge.smart(baseConfig, {
minimizer: [
new TerserPlugin({
terserOptions: {
- compress: {
- warnings: false,
- drop_console: true,
- drop_debugger: true,
- pure_funcs: ['console.log']
- }
+ compress: {}
},
cache: true,
parallel: true,
diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index af0ac54..609dd10 100644
--- a/dolphinscheduler-ui/package.json
+++ b/dolphinscheduler-ui/package.json
@@ -8,13 +8,12 @@
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.dev.js",
"clean": "rimraf dist",
"start": "npm run dev",
- "lint": "eslint ./src --fix",
+ "lint": "eslint --ext .js,.vue ./src",
+ "lint:fix": "eslint --ext .js,.vue --fix ./src",
"build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js"
},
"dependencies": {
- "@form-create/element-ui": "^1.0.18",
"@riophae/vue-treeselect": "^0.4.0",
- "ans-ui": "1.1.9",
"axios": "^0.16.2",
"bootstrap": "3.3.7",
"canvg": "1.5.1",
@@ -25,6 +24,7 @@
"dayjs": "^1.7.8",
"echarts": "4.1.0",
"element-ui": "2.13.2",
+ "font-awesome": "^4.7.0",
"html2canvas": "^0.5.0-beta4",
"jquery": "3.3.1",
"jquery-ui": "^1.12.1",
@@ -33,7 +33,7 @@
"lodash": "^4.17.11",
"normalize.css": "^8.0.1",
"vue": "^2.5.17",
- "vue-router": "^2.7.0",
+ "vue-router": "^3.0.0",
"vuex": "^3.0.0",
"vuex-router-sync": "^5.0.0"
},
@@ -48,6 +48,7 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
+ "babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
@@ -56,17 +57,23 @@
"env-parse": "^1.0.5",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
+ "eslint-friendly-formatter": "^4.0.1",
+ "eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
- "eslint-plugin-vue": "^6.2.2",
+ "eslint-plugin-vue": "^7.2.0",
"file-loader": "^5.0.2",
+ "friendly-errors-webpack-plugin": "^1.7.0",
"globby": "^8.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.2",
+ "node-notifier": "^8.0.0",
"node-sass": "^4.14.1",
+ "pack": "^2.2.0",
+ "portfinder": "^1.0.28",
"postcss-loader": "^3.0.0",
"progress-bar-webpack-plugin": "^1.12.1",
"rimraf": "^2.6.2",
@@ -80,5 +87,14 @@
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
- }
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "ie >= 9",
+ "edge >= 12",
+ "firefox >= 28",
+ "chrome >= 29",
+ "opera >= 17"
+ ]
}
diff --git a/dolphinscheduler-ui/pom.xml b/dolphinscheduler-ui/pom.xml
index 13644ba..1263502 100644
--- a/dolphinscheduler-ui/pom.xml
+++ b/dolphinscheduler-ui/pom.xml
@@ -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>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/components/Counter.vue b/dolphinscheduler-ui/src/components/Counter.vue
index 6fafb5a..74dbfcd 100644
--- a/dolphinscheduler-ui/src/components/Counter.vue
+++ b/dolphinscheduler-ui/src/components/Counter.vue
@@ -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>
\ No newline at end of file
+</script>
diff --git a/dolphinscheduler-ui/src/components/Message.vue b/dolphinscheduler-ui/src/components/Message.vue
index 95f5236..aba5ea6 100644
--- a/dolphinscheduler-ui/src/components/Message.vue
+++ b/dolphinscheduler-ui/src/components/Message.vue
@@ -19,10 +19,10 @@
</template>
<script>
-export default {
- name: 'message',
- props: [
- 'msg'
- ]
-}
-</script>
\ No newline at end of file
+ export default {
+ name: 'message',
+ props: [
+ 'msg'
+ ]
+ }
+</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/App.vue b/dolphinscheduler-ui/src/js/conf/home/App.vue
index 97110e5..2d7a5f3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/App.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/App.vue
@@ -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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/index.js b/dolphinscheduler-ui/src/js/conf/home/index.js
index 381e203..8db055a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/index.js
@@ -17,6 +17,7 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import 'babel-polyfill'
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
@@ -28,29 +29,23 @@ import i18n from '@/module/i18n'
import { sync } from 'vuex-router-sync'
import Chart from '@/module/ana-charts'
import '@/module/filter/formatDate'
+import '@/module/filter/filterNull'
import themeData from '@/module/echarts/themeData.json'
import Permissions from '@/module/permissions'
-import 'ans-ui/lib/ans-ui.min.css'
-import ans from 'ans-ui/lib/ans-ui.min'
-import en_US from 'ans-ui/lib/locale/en' // eslint-disable-line
import 'sass/conf/home/index.scss'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'canvg/dist/browser/canvg.min.js'
-
-import formCreate, {maker} from '@form-create/element-ui'
+import 'font-awesome/css/font-awesome.min.css'
// Component internationalization
-const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {}
+const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {}
i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI)
-
// Vue.use(ans)
-Vue.use(ans, useOpt)
-
-Vue.use(formCreate, {maker})
+Vue.use(useOpt)
sync(store, router)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
index 18fbd94..566896a 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
@@ -29,31 +29,31 @@ const toolOper = (dagThis) => {
return [
{
code: 'pointer',
- icon: 'ans-icon-pointer',
+ icon: 'el-icon-thumb',
disable: disabled,
desc: `${i18n.$t('Drag Nodes and Selected Items')}`
},
{
code: 'line',
- icon: 'ans-icon-slash',
+ icon: 'el-icon-top-right',
disable: disabled,
desc: `${i18n.$t('Select Line Connection')}`
},
{
code: 'remove',
- icon: 'ans-icon-trash',
+ icon: 'el-icon-delete',
disable: disabled,
desc: `${i18n.$t('Delete selected lines or nodes')}`
},
{
code: 'download',
- icon: 'ans-icon-download',
+ icon: 'el-icon-download',
disable: !dagThis.type,
desc: `${i18n.$t('Download')}`
},
{
code: 'screen',
- icon: 'ans-icon-max',
+ icon: 'el-icon-full-screen',
disable: false,
desc: `${i18n.$t('Full Screen')}`
}
@@ -150,98 +150,98 @@ const tasksState = {
id: 0,
desc: `${i18n.$t('Submitted successfully')}`,
color: '#A9A9A9',
- icoUnicode: 'ans-icon-dot-circle',
+ icoUnicode: 'fa fa-dot-circle-o',
isSpin: false
},
RUNNING_EXECUTION: {
id: 1,
desc: `${i18n.$t('Executing')}`,
color: '#0097e0',
- icoUnicode: 'ans-icon-gear',
+ icoUnicode: 'el-icon-s-tools',
isSpin: true
},
READY_PAUSE: {
id: 2,
desc: `${i18n.$t('Ready to pause')}`,
color: '#07b1a3',
- icoUnicode: 'ans-icon-pause-solid',
+ icoUnicode: 'fa-pause-circle',
isSpin: false
},
PAUSE: {
id: 3,
desc: `${i18n.$t('Pause')}`,
color: '#057c72',
- icoUnicode: 'ans-icon-pause',
+ icoUnicode: 'el-icon-video-pause',
isSpin: false
},
READY_STOP: {
id: 4,
desc: `${i18n.$t('Ready to stop')}`,
color: '#FE0402',
- icoUnicode: 'ans-icon-coin',
+ icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
STOP: {
id: 5,
desc: `${i18n.$t('Stop')}`,
color: '#e90101',
- icoUnicode: 'ans-icon-stop',
+ icoUnicode: 'fa-stop-circle',
isSpin: false
},
FAILURE: {
id: 6,
desc: `${i18n.$t('failed')}`,
color: '#000000',
- icoUnicode: 'ans-icon-fail-empty',
+ icoUnicode: 'el-icon-circle-close',
isSpin: false
},
SUCCESS: {
id: 7,
desc: `${i18n.$t('success')}`,
color: '#33cc00',
- icoUnicode: 'ans-icon-success-empty',
+ icoUnicode: 'el-icon-circle-check',
isSpin: false
},
NEED_FAULT_TOLERANCE: {
id: 8,
desc: `${i18n.$t('Need fault tolerance')}`,
color: '#FF8C00',
- icoUnicode: 'ans-icon-pen',
+ icoUnicode: 'el-icon-edit',
isSpin: false
},
KILL: {
id: 9,
desc: `${i18n.$t('kill')}`,
color: '#a70202',
- icoUnicode: 'ans-icon-minus-circle-empty',
+ icoUnicode: 'el-icon-remove-outline',
isSpin: false
},
WAITTING_THREAD: {
id: 10,
desc: `${i18n.$t('Waiting for thread')}`,
color: '#912eed',
- icoUnicode: 'ans-icon-sand-clock',
+ icoUnicode: 'fa-hourglass-end',
isSpin: false
},
WAITTING_DEPEND: {
id: 11,
desc: `${i18n.$t('Waiting for dependence')}`,
color: '#5101be',
- icoUnicode: 'ans-icon-dependence',
+ icoUnicode: 'fa-window-restore',
isSpin: false
},
DELAY_EXECUTION: {
id: 12,
desc: `${i18n.$t('Delay execution')}`,
color: '#5102ce',
- icoUnicode: 'ans-icon-coin',
+ icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
FORCED_SUCCESS: {
id: 13,
desc: `${i18n.$t('Forced success')}`,
color: '#5102ce',
- icoUnicode: 'ans-icon-success-solid',
+ icoUnicode: 'el-icon-success',
isSpin: false
}
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
index d7f2f78..e98cda2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
@@ -15,14 +15,13 @@
* limitations under the License.
*/
import Vue from 'vue'
-let v = new Vue()
import _ from 'lodash'
import i18n from '@/module/i18n'
import { jsPlumb } from 'jsplumb'
import JSP from './plugIn/jsPlumbHandle'
import DownChart from './plugIn/downChart'
import store from '@/conf/home/store'
-import dagre from "dagre"
+import dagre from 'dagre'
/**
* Prototype method
@@ -53,7 +52,9 @@ Dag.prototype.setConfig = function (o) {
*/
Dag.prototype.create = function () {
const self = this
- jsPlumb.ready(() => {
+ const plumbIns = jsPlumb.getInstance()
+ plumbIns.reset()
+ plumbIns.ready(() => {
JSP.init({
dag: this.dag,
instance: this.instance,
@@ -76,7 +77,7 @@ Dag.prototype.create = function () {
* Action event on the right side of the toolbar
*/
Dag.prototype.toolbarEvent = function ({ item, code, is }) {
- let self = this
+ const self = this
switch (code) {
case 'pointer':
JSP.handleEventPointer(is)
@@ -91,21 +92,15 @@ Dag.prototype.toolbarEvent = function ({ item, code, is }) {
JSP.handleEventScreen({ item, is })
break
case 'download':
- v.$modal.dialog({
- width: 350,
- closable: false,
- showMask: true,
- maskClosable: true,
- title: i18n.$t('Download'),
- content: i18n.$t('Please confirm whether the workflow has been saved before downloading'),
- ok: {
- handle (e) {
- DownChart.download({
- dagThis: self.dag
- })
- }
- },
- cancel: {}
+ Vue.prototype.$confirm(`${i18n.$t('Please confirm whether the workflow has been saved before downloading')}`, `${i18n.$t('Download')}`, {
+ confirmButtonText: `${i18n.$t('Confirm')}`,
+ cancelButtonText: `${i18n.$t('Cancel')}`,
+ type: 'warning'
+ }).then(() => {
+ DownChart.download({
+ dagThis: self.dag
+ })
+ }).catch(() => {
})
break
}
@@ -128,17 +123,19 @@ Dag.prototype.backfill = function (arg) {
for (const i in store.state.dag.connects) {
const connect = store.state.dag.connects[i]
- g.setEdge(connect['endPointSourceId'], connect['endPointTargetId'])
+ g.setEdge(connect.endPointSourceId, connect.endPointTargetId)
}
dagre.layout(g)
const dataObject = {}
g.nodes().forEach(function (v) {
const node = g.node(v)
+ const location = store.state.dag.locations[node.label]
const obj = {}
- obj.name = node.label
+ obj.name = location.name
obj.x = node.x + marginX
obj.y = node.y
+ obj.targetarr = location.targetarr
dataObject[node.label] = obj
})
jsPlumb.ready(() => {
@@ -162,7 +159,9 @@ Dag.prototype.backfill = function (arg) {
})
})
} else {
- jsPlumb.ready(() => {
+ const plumbIns = jsPlumb.getInstance()
+ plumbIns.reset()
+ plumbIns.ready(() => {
JSP.init({
dag: this.dag,
instance: this.instance,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
index 88f2d11..41a44bc 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@@ -207,7 +207,6 @@
.operation {
overflow: hidden;
display: inline-block;
- margin-right: 10px;
a {
float: left;
width: 28px;
@@ -277,8 +276,9 @@ svg path:hover {
background: #fff;
border-radius: 3px;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
- padding: 4px 0;
+ padding: 4px 4px;
visibility:hidden;
+ z-index: 10000;
a {
height: 30px;
line-height: 28px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 1880adc..a61d289 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -34,31 +34,33 @@
<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>
- <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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
index 2b2ed78..8d8f13c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
@@ -23,7 +23,7 @@
<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>
\ No newline at end of file
+</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
index 1d3902c..160db6e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
@@ -15,33 +15,34 @@
* limitations under the License.
*/
<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>
\ No newline at end of file
+</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
index 0dcab3e..2fece25 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
@@ -23,7 +23,7 @@
<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>
\ No newline at end of file
+</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
index 8efe5c2..de2b2c7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
@@ -15,18 +15,19 @@
* limitations under the License.
*/
<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 || []
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
index 2864b3c..0e6ee77 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
@@ -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: {}
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
index 9d9667f..d79f7cf 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
@@ -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;
}
}
-}
\ No newline at end of file
+ .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;
+ }
+ }
+ }
+}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index b6c48fe..4dd5fcb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
index 7874b53..502adc7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
@@ -29,16 +29,16 @@
<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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
index 05e248f..0a3f17b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
@@ -17,28 +17,30 @@
<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 () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
index abec923..abadc2c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@@ -17,39 +17,39 @@
<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,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
index de5f781..6b95d23 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
@@ -20,50 +20,51 @@
v-for="(item,$index) in httpParamsList"
:key="item.id"
@click="_getIndex($index)">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="httpParamsList[$index].prop"
:placeholder="$t('prop(required)')"
- @on-blur="_verifProp()"
+ @blur="_verifProp()"
:style="inputStyle">
- </x-input>
- <x-select
+ </el-input>
+ <el-select
@change="_handlePositionChanged"
v-model="httpParamsList[$index].httpParametersType"
:placeholder="$t('Http Parameters Position')"
:disabled="isDetails"
:style="inputStyle"
>
- <x-option
+ <el-option
v-for="position in positionList"
:key="position.code"
:value="position.id"
:label="position.code">
- </x-option>
- </x-select>
- <x-input
+ </el-option>
+ </el-select>
+ <el-input
:disabled="isDetails"
type="text"
v-model="httpParamsList[$index].value"
:placeholder="$t('value(required)')"
- @on-blur="_handleValue()"
+ @blur="_handleValue()"
:style="inputStyle">
- </x-input>
+ </el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (httpParamsList.length - 1)">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add-dp" v-if="!httpParamsList.length">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
@@ -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>
-
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
similarity index 87%
copy from dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
copy to dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
index 91e1cb7..04375e6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
@@ -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,12 +42,12 @@
data () {
return {
// script
- rawScript: '',
+ rawScript: ''
}
},
mixins: [disabledState],
props: {
- item: String
+ jsonItem: String
},
methods: {
/**
@@ -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('getJsonBoxValue', editor.getValue())
})
this.keypress = () => {
@@ -82,15 +78,11 @@
editor.setValue(this.rawScript)
return editor
- },
- closeModal() {
- let self = this
- self.$emit('closeAble')
}
},
watch: {},
created () {
- let o = this.item
+ let o = this.jsonItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue
similarity index 87%
copy from dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
copy to dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue
index 237d66f..f4d3f76 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/list4Box.vue
@@ -24,11 +24,19 @@
<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-box'
+ name: 'list-4-box'
}
</script>
@@ -40,7 +48,6 @@
}
}
}
-
.v-checkbox-wrapper {
&.v-checkbox-wrapper-disabled {
color: #999 ;
@@ -58,5 +65,4 @@
}
}
}
-
</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
index 237d66f..351e55d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/listBox.vue
@@ -40,7 +40,6 @@
}
}
}
-
.v-checkbox-wrapper {
&.v-checkbox-wrapper-disabled {
color: #999 ;
@@ -58,5 +57,4 @@
}
}
}
-
</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
index 0bbbb66..c001a20 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
@@ -20,64 +20,68 @@
v-for="(item,$index) in localParamsList"
:key="item.id"
@click="_getIndex($index)">
- <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;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
index fe9b28b..0650386 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
@@ -17,27 +17,27 @@
<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 {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
index 8b578c7..99c2816 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
@@ -16,19 +16,20 @@
*/
<template>
<div class="resource-list-model">
- <x-select multiple
+ <el-select multiple
v-model="value"
filterable
+ size="small"
:disabled="isDetails"
:placeholder="$t('Please select resources')"
style="width: 100%;">
- <x-option
+ <el-option
v-for="city in resList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</template>
<script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
index 91e1cb7..fbacff8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
@@ -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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
index ecb7d2c..ec20f82 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
@@ -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
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
index ecd10a9..145bcb9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
@@ -20,30 +20,31 @@
v-for="(item,$index) in localStatementList"
:key="item.id"
@click="_getIndex($index)">
- <x-input
+ <el-input
:disabled="isDetails"
type="textarea"
+ size="small"
resize="none"
:autosize="{minRows:1}"
:placeholder="$t('Please enter a non-query SQL statement')"
v-model="localStatementList[$index]"
- @on-blur="_verifProp()"
+ @blur="_verifProp()"
style="width: 525px;">
- </x-input>
+ </el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (localStatementList.length - 1)">
<a href="javascript:" @click="!isDetails && _addStatement()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add" v-if="!localStatementList.length">
<a href="javascript:" @click="!isDetails && _addStatement()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
index e27a683..9c83b87 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
@@ -16,17 +16,18 @@
*/
<template>
<div class="udfs-model">
- <x-select multiple
+ <el-select multiple
v-model="udfsStr"
:disabled="isDetails"
+ size="small"
style="width: 100%;">
- <x-option
+ <el-option
v-for="city in udfsList"
:key="city.id"
:value="city.id"
- :label="city.code">
- </x-option>
- </x-select>
+ :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 {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
index 621de81..8c96ec3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
@@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
- <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
- <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
- <em class="ans-icon-trash dep-delete"
+ <em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"
@@ -99,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')
}
- });
+ })
}))
}
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
index 6ced1ad..fb9f2fa 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
@@ -21,7 +21,7 @@
<div slot="content">
<label class="label-box">
<div style="padding-top: 5px;">
- <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+ <el-switch v-model="enable" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -31,10 +31,10 @@
<div slot="text">{{$t('Datasource')}}</div>
<div slot="content">
<m-datasource
- ref="refDs"
- @on-dsData="_onDsData"
- :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
- :data="{ type:dsType,datasource:datasource }">
+ ref="refDs"
+ @on-dsData="_onDsData"
+ :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
+ :data="{ type:dsType,datasource:datasource }">
</m-datasource>
</div>
</m-list-box>
@@ -48,7 +48,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-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> G </span>
+ <span >{{$t('Max Memory')}}</span>
+ <m-select-input v-model="xmx" :list="[1,2,3,4]">
+ </m-select-input>
+ <span> 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>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
index 79d127a..9781428 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
@@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
- <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
- <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
- <em class="ans-icon-trash dep-delete"
+ <em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"
@@ -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 () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
index 87d9146..1fe8ca9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
@@ -19,30 +19,31 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="programType"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="mainClass"
- :placeholder="$t('Please enter main class')"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="mainClass"
+ :placeholder="$t('Please enter main class')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -56,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 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>
+ <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);
+ this.$emit('on-cache-params', val)
+ },
+ resourceIdArr (arr) {
+ let result = []
+ arr.forEach(item => {
+ this.allNoResources.forEach(item1 => {
+ if (item.id === item1.id) {
+ // resultBool = true
+ result.push(item1)
+ }
+ })
+ })
+ this.noRes = result
}
},
computed: {
- cacheParams () {
+ 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))
+ 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 = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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'
+ 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)
+ // 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)
- }
- })
- this.cacheResourceList = resourceList
- }
+ }).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
- }
+ // 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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
index 425cb2e..bbd5e53 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
@@ -19,30 +19,32 @@
<m-list-box>
<div slot="text">{{$t('Http Url')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="url"
:placeholder="$t('Please Enter Http Url')"
autocomplete="off">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Http Method')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 150px;"
+ size="small"
v-model="httpMethod"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in httpMethodList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
@@ -59,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_CONTA [...]
}
},
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 () {
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
index a53501d..356eefd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
@@ -19,26 +19,26 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
- <x-select v-model="programType" :disabled="isDetails" style="width: 110px;">
- <x-option
+ <el-select v-model="programType" :disabled="isDetails" style="width: 110px;" size="small">
+ <el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="mainClass"
- :placeholder="$t('Please enter main class')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter main class')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -52,27 +52,27 @@
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="mainArgs"
- :placeholder="$t('Please enter Command-line parameters')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter Command-line parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
+ size="small"
v-model="others"
- :placeholder="$t('Please enter other parameters')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter other parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -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);
+ this.$emit('on-cache-params', val)
+ },
+ resourceIdArr (arr) {
+ let result = []
+ arr.forEach(item => {
+ this.allNoResources.forEach(item1 => {
+ if (item.id === item1.id) {
+ // resultBool = true
+ result.push(item1)
+ }
+ })
+ })
+ this.noRes = result
}
},
computed: {
- cacheParams () {
+ 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))
+ 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 = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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'
+ // 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)
+ // 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)
- }
- })
- this.cacheResourceList = resourceList
- }
+ }).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
- }
+ // 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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
index adf889e..c922f98 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
@@ -22,21 +22,22 @@
</div>
<div class="cont-box">
<div class="label-box">
- <x-select
+ <el-select
ref="preTasksSelector"
style="width: 100%;"
filterable
multiple
+ size="small"
v-model="preTasks"
:disabled="isDetails"
:id="preTasksSelectorId">
- <x-option
+ <el-option
v-for="task in preTaskList"
:key="task.id"
:value="task.id"
:label="task.name">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</div>
</div>
@@ -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
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
index e84f37d..790977d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
@@ -30,13 +30,13 @@
<m-list-box>
<div slot="text">{{$t('methods')}}</div>
<div slot="content">
- <x-input
- type="input"
- :disabled="isDetails"
- v-model="method"
- :placeholder="$t('Please enter method(optional)')"
- autocomplete="off">
- </x-input>
+ <el-input
+ type="input"
+ size="small"
+ :disabled="isDetails"
+ v-model="method"
+ :placeholder="$t('Please enter method(optional)')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
index c6c2a22..8c1eee0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
@@ -23,7 +23,7 @@
<textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-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);
+ this.$emit('on-cache-params', val)
+ },
+ resourceIdArr (arr) {
+ let result = []
+ arr.forEach(item => {
+ this.allNoResources.forEach(item1 => {
+ if (item.id === item1.id) {
+ // resultBool = true
+ result.push(item1)
+ }
+ })
+ })
+ this.noRes = result
}
},
computed: {
- cacheParams () {
+ 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))
+ 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}
+ resourceIdArr = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
index da94162..55b9aca 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@@ -26,7 +26,7 @@
style="opacity: 0">
</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);
+ this.$emit('on-cache-params', val)
+ },
+ resourceIdArr (arr) {
+ let result = []
+ arr.forEach(item => {
+ this.allNoResources.forEach(item1 => {
+ if (item.id === item1.id) {
+ // resultBool = true
+ result.push(item1)
+ }
+ })
+ })
+ this.noRes = result
}
},
computed: {
- cacheParams () {
+ 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))
+ 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 = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
index 0948c97..efeb7e9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
@@ -19,45 +19,47 @@
<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 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>
+ </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 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('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>
- <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 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>
- </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)
+ },
+ resourceIdArr (arr) {
+ let result = []
+ arr.forEach(item => {
+ this.allNoResources.forEach(item1 => {
+ if (item.id === item1.id) {
+ // resultBool = true
+ result.push(item1)
+ }
+ })
+ })
+ this.noRes = result
}
},
computed: {
- cacheParams () {
+ 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))
+ 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 = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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'
+ // 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)
+ // 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)
- }
- })
- this.cacheResourceList = resourceList
- }
+ }).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
- }
+ // 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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index 8e892ab..7e3ae46 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -35,51 +35,49 @@
:sql-type="sqlType">
</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.receivers.length) {
+ this.$message.warning(`${i18n.$t('Recipient required')}`)
return false
}
- if (this.sqlType==0 && !this.groupId) {
- this.$message.warning(`${i18n.$t('Please select the alert group')}`)
+ // 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>
-
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
index c852f7f..7647e67 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
@@ -20,23 +20,14 @@
<m-list-box>
<div slot="text">{{$t('Custom Job')}}</div>
<div slot="content">
- <x-switch
- v-model="isCustomTask"
- @on-click="_onSwitch"
- :disabled="isDetails"
- >
- </x-switch>
+ <el-switch size="small" v-model="isCustomTask" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="isCustomTask">
<div slot="text">{{$t('Custom Script')}}</div>
<div slot="content">
<div class="from-mirror">
- <textarea
- id="code-shell-mirror"
- name="code-shell-mirror"
- style="opacity: 0;">
- </textarea>
+ <textarea id="code-shell-mirror" name="code-shell-mirror" style="opacity: 0;"></textarea>
</div>
</div>
</m-list-box>
@@ -44,29 +35,25 @@
<m-list-box>
<div slot="text">{{$t('Sqoop Job Name')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- type="text"
- v-model="jobName"
- :placeholder="$t('Please enter Job Name(required)')">
- </x-input>
+ <el-input :disabled="isDetails" size="small" type="text" v-model="jobName" :placeholder="$t('Please enter Job Name(required)')"></el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Direct')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="modelType"
:disabled="isDetails"
- @on-change="_handleModelTypeChange">
- <x-option
+ @change="_handleModelTypeChange">
+ <el-option
v-for="city in modelTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
@@ -100,18 +87,19 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="sourceType"
:disabled="isDetails"
- @on-change="_handleSourceTypeChange">
- <x-option
+ @change="_handleSourceTypeChange">
+ <el-option
v-for="city in sourceTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
@@ -134,10 +122,10 @@
<m-list-box>
<div slot="text">{{$t('ModelType')}}</div>
<div slot="content">
- <x-radio-group v-model="srcQueryType" @on-change="_handleQueryType">
- <x-radio label="0">{{$t('Form')}}</x-radio>
- <x-radio label="1">SQL</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType">
+ <el-radio label="0">{{$t('Form')}}</el-radio>
+ <el-radio label="1">SQL</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
@@ -146,34 +134,36 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceMysqlParams.srcTable"
:placeholder="$t('Please enter Mysql Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ColumnType')}}</div>
<div slot="content">
- <x-radio-group v-model="sourceMysqlParams.srcColumnType">
- <x-radio label="0">{{$t('All Columns')}}</x-radio>
- <x-radio label="1">{{$t('Some Columns')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="sourceMysqlParams.srcColumnType" size="small" style="vertical-align: sub;">
+ <el-radio label="0">{{$t('All Columns')}}</el-radio>
+ <el-radio label="1">{{$t('Some Columns')}}</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceMysqlParams.srcColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -184,45 +174,49 @@
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -231,12 +225,13 @@
<m-list-box>
<div slot="text">{{$t('Export Dir')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHdfsParams.exportDir"
:placeholder="$t('Please enter Export Dir(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -251,7 +246,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-full-screen" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -290,91 +285,97 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="targetType"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in targetTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<div v-show="targetType==='HIVE'">
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CreateHiveTable')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.createHiveTable"></x-switch>
+ <el-switch v-model="targetHiveParams.createHiveTable" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DropDelimiter')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.dropDelimiter"></x-switch>
+ <el-switch v-model="targetHiveParams.dropDelimiter" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('OverWriteSrc')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.hiveOverWrite"></x-switch>
+ <el-switch v-model="targetHiveParams.hiveOverWrite" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ReplaceDelimiter')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.replaceDelimiter"
:placeholder="$t('Please enter Replace Delimiter')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</div>
@@ -382,62 +383,65 @@
<m-list-box>
<div slot="text">{{$t('Target Dir')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.targetPath"
:placeholder="$t('Please enter Target Dir(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DeleteTargetDir')}}</div>
<div slot="content">
- <x-switch v-model="targetHdfsParams.deleteTargetDir"></x-switch>
+ <el-switch v-model="targetHdfsParams.deleteTargetDir" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CompressionCodec')}}</div>
<div slot="content">
- <x-radio-group v-model="targetHdfsParams.compressionCodec">
- <x-radio label="snappy">snappy</x-radio>
- <x-radio label="lzo">lzo</x-radio>
- <x-radio label="gzip">gzip</x-radio>
- <x-radio label="">no</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetHdfsParams.compressionCodec" size="small">
+ <el-radio label="snappy">snappy</el-radio>
+ <el-radio label="lzo">lzo</el-radio>
+ <el-radio label="gzip">gzip</el-radio>
+ <el-radio label="">no</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FileType')}}</div>
<div slot="content">
- <x-radio-group v-model="targetHdfsParams.fileType">
- <x-radio label="--as-avrodatafile">avro</x-radio>
- <x-radio label="--as-sequencefile">sequence</x-radio>
- <x-radio label="--as-textfile">text</x-radio>
- <x-radio label="--as-parquetfile">parquet</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetHdfsParams.fileType" size="small">
+ <el-radio label="--as-avrodatafile">avro</el-radio>
+ <el-radio label="--as-sequencefile">sequence</el-radio>
+ <el-radio label="--as-textfile">text</el-radio>
+ <el-radio label="--as-parquetfile">parquet</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</div>
@@ -458,71 +462,76 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetTable"
:placeholder="$t('Please enter Mysql Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('IsUpdate')}}</div>
<div slot="content">
- <x-switch v-model="targetMysqlParams.isUpdate"></x-switch>
+ <el-switch v-model="targetMysqlParams.isUpdate" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateKey')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetUpdateKey"
:placeholder="$t('Please enter Update Key')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateMode')}}</div>
<div slot="content">
- <x-radio-group v-model="targetMysqlParams.targetUpdateMode">
- <x-radio label="updateonly">{{$t('OnlyUpdate')}}</x-radio>
- <x-radio label="allowinsert">{{$t('AllowInsert')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetMysqlParams.targetUpdateMode" size="small">
+ <el-radio label="updateonly">{{$t('OnlyUpdate')}}</el-radio>
+ <el-radio label="allowinsert">{{$t('AllowInsert')}}</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
@@ -530,13 +539,13 @@
<m-list-box>
<div slot="text">{{$t('Concurrency')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="concurrency"
:placeholder="$t('Please enter Concurrency')">
-
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -551,6 +560,12 @@
</m-local-params>
</div>
</m-list-box>
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -599,105 +614,106 @@
/**
* mysql query type
*/
- srcQueryType:'1',
+ srcQueryType: '1',
/**
* source data source
*/
- srcDatasource:'',
+ srcDatasource: '',
/**
* target data source
*/
- targetDatasource:'',
+ targetDatasource: '',
/**
* concurrency
*/
- concurrency:1,
+ concurrency: 1,
/**
* default job type
*/
- jobType:'TEMPLATE',
+ jobType: 'TEMPLATE',
/**
* direct model type
*/
- modelType:'import',
+ modelType: 'import',
modelTypeList: [{ code: 'import' }, { code: 'export' }],
sourceTypeList: [
{
- code: "MYSQL"
- },
+ code: 'MYSQL'
+ }
],
- targetTypeList:[
+ targetTypeList: [
{
- code:"HIVE"
+ code: 'HIVE'
},
{
- code:"HDFS"
+ code: 'HDFS'
}
],
- sourceType:"MYSQL",
- targetType:"HDFS",
-
- sourceMysqlParams:{
- srcType:"MYSQL",
- srcDatasource:"",
- srcTable:"",
- srcQueryType:"1",
- srcQuerySql:'',
- srcColumnType:"0",
- srcColumns:"",
- srcConditionList:[],
- mapColumnHive:[],
- mapColumnJava:[]
+ sourceType: 'MYSQL',
+ targetType: 'HDFS',
+
+ sourceMysqlParams: {
+ srcType: 'MYSQL',
+ srcDatasource: '',
+ srcTable: '',
+ srcQueryType: '1',
+ srcQuerySql: '',
+ srcColumnType: '0',
+ srcColumns: '',
+ srcConditionList: [],
+ mapColumnHive: [],
+ mapColumnJava: []
},
- sourceHdfsParams:{
- exportDir:""
+ sourceHdfsParams: {
+ exportDir: ''
},
- sourceHiveParams:{
- hiveDatabase:"",
- hiveTable:"",
- hivePartitionKey:"",
- hivePartitionValue:""
+ sourceHiveParams: {
+ hiveDatabase: '',
+ hiveTable: '',
+ hivePartitionKey: '',
+ hivePartitionValue: ''
},
- targetHdfsParams:{
- targetPath:"",
- deleteTargetDir:true,
- fileType:"--as-avrodatafile",
- compressionCodec:"snappy",
- fieldsTerminated:"",
- linesTerminated:"",
+ targetHdfsParams: {
+ targetPath: '',
+ deleteTargetDir: true,
+ fileType: '--as-avrodatafile',
+ compressionCodec: 'snappy',
+ fieldsTerminated: '',
+ linesTerminated: ''
},
- targetMysqlParams:{
- targetType:"MYSQL",
- targetDatasource:"",
- targetTable:"",
- targetColumns:"",
- fieldsTerminated:"",
- linesTerminated:"",
- preQuery:"",
- isUpdate:false,
- targetUpdateKey:"",
- targetUpdateMode:"allowinsert"
+ targetMysqlParams: {
+ targetType: 'MYSQL',
+ targetDatasource: '',
+ targetTable: '',
+ targetColumns: '',
+ fieldsTerminated: '',
+ linesTerminated: '',
+ preQuery: '',
+ isUpdate: false,
+ targetUpdateKey: '',
+ targetUpdateMode: 'allowinsert'
},
- targetHiveParams:{
- hiveDatabase:"",
- hiveTable:"",
- createHiveTable:false,
- dropDelimiter:false,
- hiveOverWrite:true,
- replaceDelimiter:"",
- hivePartitionKey:"",
- hivePartitionValue:""
-
- }
+ targetHiveParams: {
+ hiveDatabase: '',
+ hiveTable: '',
+ createHiveTable: false,
+ dropDelimiter: false,
+ hiveOverWrite: true,
+ replaceDelimiter: '',
+ hivePartitionKey: '',
+ hivePartitionValue: ''
+ },
+ item: '',
+ scriptBoxDialog: false
}
},
mixins: [disabledState],
@@ -705,129 +721,108 @@
backfillItem: Object
},
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
},
- _handleQueryType(o){
+ getSriptBoxValue (val) {
+ editor.setValue(val)
+ },
+ _handleQueryType (o) {
this.sourceMysqlParams.srcQueryType = this.srcQueryType
this._getTargetTypeList(this.sourceType)
this.targetType = this.targetTypeList[0].code
},
- _handleModelTypeChange(a){
- this._getSourceTypeList(a.label)
+ _handleModelTypeChange (a) {
+ this._getSourceTypeList(a)
this.sourceType = this.sourceTypeList[0].code
- this._handleSourceTypeChange({label: this.sourceType, value: this.sourceType})
+ this._handleSourceTypeChange({ label: this.sourceType, value: this.sourceType })
},
- _handleSourceTypeChange(a){
+ _handleSourceTypeChange (a) {
this._getTargetTypeList(a.label)
this.targetType = this.targetTypeList[0].code
},
- _getSourceTypeList(data){
- switch(data){
+ _getSourceTypeList (data) {
+ switch (data) {
case 'import':
this.sourceTypeList = [
{
- code:"MYSQL"
- },
+ code: 'MYSQL'
+ }
]
- break;
+ break
case 'export':
this.sourceTypeList = [
{
- code: "HDFS"
+ code: 'HDFS'
},
{
- code: "HIVE"
+ code: 'HIVE'
}
]
- break;
+ break
default:
this.sourceTypeList = [
{
- code:"MYSQL"
+ code: 'MYSQL'
},
{
- code:"HIVE"
+ code: 'HIVE'
},
{
- code:"HDFS"
+ code: 'HDFS'
}
]
- break;
+ break
}
},
- _getTargetTypeList(data){
- switch(data){
+ _getTargetTypeList (data) {
+ switch (data) {
case 'MYSQL':
- if (this.srcQueryType === "1") {
+ if (this.srcQueryType === '1') {
this.targetTypeList = [
{
- code: "HDFS"
+ code: 'HDFS'
}]
} else {
this.targetTypeList = [
{
- code: "HIVE"
+ code: 'HIVE'
},
{
- code: "HDFS"
+ code: 'HDFS'
}
]
}
- break;
+ break
case 'HDFS':
this.targetTypeList = [
{
- code:"MYSQL"
+ code: 'MYSQL'
}
]
- break;
+ break
case 'HIVE':
this.targetTypeList = [
{
- code:"MYSQL"
+ code: 'MYSQL'
}
]
- break;
+ break
default:
this.targetTypeList = [
{
- code:"HIVE"
+ code: 'HIVE'
},
{
- code:"HDFS"
+ code: 'HDFS'
}
]
- break;
+ break
}
},
@@ -858,26 +853,26 @@
/**
* stringify the source params
*/
- _handleSourceParams() {
- var params = null
- switch(this.sourceType){
- case "MYSQL":
- this.sourceMysqlParams.srcQuerySql = this.sourceMysqlParams.srcQueryType === "1" && editor ?
- editor.getValue() : this.sourceMysqlParams.srcQuerySql
+ _handleSourceParams () {
+ let params = null
+ switch (this.sourceType) {
+ case 'MYSQL':
+ this.sourceMysqlParams.srcQuerySql = this.sourceMysqlParams.srcQueryType === '1' && editor
+ ? editor.getValue() : this.sourceMysqlParams.srcQuerySql
params = JSON.stringify(this.sourceMysqlParams)
- break;
- case "ORACLE":
+ break
+ case 'ORACLE':
params = JSON.stringify(this.sourceOracleParams)
- break;
- case "HDFS":
+ break
+ case 'HDFS':
params = JSON.stringify(this.sourceHdfsParams)
- break;
- case "HIVE":
+ break
+ case 'HIVE':
params = JSON.stringify(this.sourceHiveParams)
- break;
+ break
default:
- params = "";
- break;
+ params = ''
+ break
}
return params
},
@@ -885,21 +880,21 @@
/**
* stringify the target params
*/
- _handleTargetParams() {
- var params = null
- switch(this.targetType){
- case "HIVE":
+ _handleTargetParams () {
+ let params = null
+ switch (this.targetType) {
+ case 'HIVE':
params = JSON.stringify(this.targetHiveParams)
- break;
- case "HDFS":
+ break
+ case 'HDFS':
params = JSON.stringify(this.targetHdfsParams)
- break;
- case "MYSQL":
+ break
+ case 'MYSQL':
params = JSON.stringify(this.targetMysqlParams)
- break;
+ break
default:
- params = "";
- break;
+ params = ''
+ break
}
return params
@@ -908,47 +903,46 @@
/**
* get source params by source type
*/
- _getSourceParams(data) {
- switch(this.sourceType){
- case "MYSQL":
+ _getSourceParams (data) {
+ switch (this.sourceType) {
+ case 'MYSQL':
this.sourceMysqlParams = JSON.parse(data)
this.srcDatasource = this.sourceMysqlParams.srcDatasource
- break;
- case "ORACLE":
+ break
+ case 'ORACLE':
this.sourceOracleParams = JSON.parse(data)
- break;
- case "HDFS":
+ break
+ case 'HDFS':
this.sourceHdfsParams = JSON.parse(data)
- break;
- case "HIVE":
+ break
+ case 'HIVE':
this.sourceHiveParams = JSON.parse(data)
- break;
+ break
default:
- break;
+ break
}
},
/**
* get target params by target type
*/
- _getTargetParams(data) {
- switch(this.targetType){
- case "HIVE":
+ _getTargetParams (data) {
+ switch (this.targetType) {
+ case 'HIVE':
this.targetHiveParams = JSON.parse(data)
- break;
- case "HDFS":
+ break
+ case 'HDFS':
this.targetHdfsParams = JSON.parse(data)
- break;
- case "MYSQL":
+ break
+ case 'MYSQL':
this.targetMysqlParams = JSON.parse(data)
this.targetDatasource = this.targetMysqlParams.targetDatasource
- break;
+ break
default:
- break;
+ break
}
},
-
/**
* verification
*/
@@ -962,7 +956,7 @@
this.$message.warning(`${i18n.$t('Please enter Custom Shell(required)')}`)
return false
}
- sqoopParams['customShell'] = shellEditor.getValue()
+ sqoopParams.customShell = shellEditor.getValue()
} else {
if (!this.jobName) {
this.$message.warning(`${i18n.$t('Please enter Job Name(required)')}`)
@@ -970,7 +964,7 @@
}
switch (this.sourceType) {
- case "MYSQL":
+ case 'MYSQL':
if (!this.$refs.refSourceDs._verifDatasource()) {
return false
}
@@ -979,84 +973,84 @@
this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
return false
}
- this.sourceMysqlParams.srcTable = ""
- this.sourceMysqlParams.srcColumnType = "0"
- this.sourceMysqlParams.srcColumns = ""
+ this.sourceMysqlParams.srcTable = ''
+ this.sourceMysqlParams.srcColumnType = '0'
+ this.sourceMysqlParams.srcColumns = ''
} else {
- if (this.sourceMysqlParams.srcTable === "") {
+ if (this.sourceMysqlParams.srcTable === '') {
this.$message.warning(`${i18n.$t('Please enter Mysql Table(required)')}`)
return false
}
- this.sourceMysqlParams.srcQuerySql = ""
- if (this.sourceMysqlParams.srcColumnType === "1" && this.sourceMysqlParams.srcColumns === "") {
+ this.sourceMysqlParams.srcQuerySql = ''
+ if (this.sourceMysqlParams.srcColumnType === '1' && this.sourceMysqlParams.srcColumns === '') {
this.$message.warning(`${i18n.$t('Please enter Columns (Comma separated)')}`)
return false
}
- if (this.sourceMysqlParams.srcColumnType === "0") {
- this.sourceMysqlParams.srcColumns = ""
+ if (this.sourceMysqlParams.srcColumnType === '0') {
+ this.sourceMysqlParams.srcColumns = ''
}
}
- break;
- case "HDFS":
- if (this.sourceHdfsParams.exportDir === "") {
+ break
+ case 'HDFS':
+ if (this.sourceHdfsParams.exportDir === '') {
this.$message.warning(`${i18n.$t('Please enter Export Dir(required)')}`)
return false
}
- break;
- case "HIVE":
- if (this.sourceHiveParams.hiveDatabase === "") {
+ break
+ case 'HIVE':
+ if (this.sourceHiveParams.hiveDatabase === '') {
this.$message.warning(`${i18n.$t('Please enter Hive Database(required)')}`)
return false
}
- if (this.sourceHiveParams.hiveTable === "") {
+ if (this.sourceHiveParams.hiveTable === '') {
this.$message.warning(`${i18n.$t('Please enter Hive Table(required)')}`)
return false
}
- break;
+ break
default:
- break;
+ break
}
switch (this.targetType) {
- case "HIVE":
- if (this.targetHiveParams.hiveDatabase === "") {
+ case 'HIVE':
+ if (this.targetHiveParams.hiveDatabase === '') {
this.$message.warning(`${i18n.$t('Please enter Hive Database(required)')}`)
return false
}
- if (this.targetHiveParams.hiveTable === "") {
+ if (this.targetHiveParams.hiveTable === '') {
this.$message.warning(`${i18n.$t('Please enter Hive Table(required)')}`)
return false
}
- break;
- case "HDFS":
- if (this.targetHdfsParams.targetPath === "") {
+ break
+ case 'HDFS':
+ if (this.targetHdfsParams.targetPath === '') {
this.$message.warning(`${i18n.$t('Please enter Target Dir(required)')}`)
return false
}
- break;
- case "MYSQL":
+ break
+ case 'MYSQL':
if (!this.$refs.refTargetDs._verifDatasource()) {
return false
}
- if (this.targetMysqlParams.targetTable === "") {
+ if (this.targetMysqlParams.targetTable === '') {
this.$message.warning(`${i18n.$t('Please enter Mysql Table(required)')}`)
return false
}
- break;
+ break
default:
- break;
+ break
}
- sqoopParams['jobName'] = this.jobName
- sqoopParams['hadoopCustomParams'] = this.hadoopCustomParams
- sqoopParams['sqoopAdvancedParams'] = this.sqoopAdvancedParams
- sqoopParams['concurrency'] = this.concurrency
- sqoopParams['modelType'] = this.modelType
- sqoopParams['sourceType'] = this.sourceType
- sqoopParams['targetType'] = this.targetType
- sqoopParams['targetParams'] = this._handleTargetParams()
- sqoopParams['sourceParams'] = this._handleSourceParams()
+ sqoopParams.jobName = this.jobName
+ sqoopParams.hadoopCustomParams = this.hadoopCustomParams
+ sqoopParams.sqoopAdvancedParams = this.sqoopAdvancedParams
+ sqoopParams.concurrency = this.concurrency
+ sqoopParams.modelType = this.modelType
+ sqoopParams.sourceType = this.sourceType
+ sqoopParams.targetType = this.targetType
+ sqoopParams.targetParams = this._handleTargetParams()
+ sqoopParams.sourceParams = this._handleSourceParams()
}
// storage
@@ -1147,14 +1141,14 @@
_cacheParams () {
this.$emit('on-cache-params', {
- concurrency:this.concurrency,
- modelType:this.modelType,
- sourceType:this.sourceType,
- targetType:this.targetType,
- sourceParams:this._handleSourceParams(),
- targetParams:this._handleTargetParams(),
- localParams:this.localParams
- });
+ concurrency: this.concurrency,
+ modelType: this.modelType,
+ sourceType: this.sourceType,
+ targetType: this.targetType,
+ sourceParams: this._handleSourceParams(),
+ targetParams: this._handleTargetParams(),
+ localParams: this.localParams
+ })
},
_destroyEditor () {
@@ -1176,10 +1170,10 @@
watch: {
// Listening to sqlType
sqlType (val) {
- if (val==0) {
+ if (val === 0) {
this.showType = []
}
- if (val != 0) {
+ if (val !== 0) {
this.title = ''
this.receivers = []
this.receiversCc = []
@@ -1191,7 +1185,7 @@
this.connParams = ''
}
},
- //Watch the cacheParams
+ // Watch the cacheParams
cacheParams (val) {
this._cacheParams()
}
@@ -1253,32 +1247,20 @@
computed: {
cacheParams () {
return {
- concurrency:this.concurrency,
- modelType:this.modelType,
- sourceType:this.sourceType,
- targetType:this.targetType,
- localParams:this.localParams,
- sourceMysqlParams:this.sourceMysqlParams,
- sourceHdfsParams:this.sourceHdfsParams,
- sourceHiveParams:this.sourceHiveParams,
- targetHdfsParams:this.targetHdfsParams,
- targetMysqlParams:this.targetMysqlParams,
- targetHiveParams:this.targetHiveParams
+ concurrency: this.concurrency,
+ modelType: this.modelType,
+ sourceType: this.sourceType,
+ targetType: this.targetType,
+ localParams: this.localParams,
+ sourceMysqlParams: this.sourceMysqlParams,
+ sourceHdfsParams: this.sourceHdfsParams,
+ sourceHiveParams: this.sourceHiveParams,
+ targetHdfsParams: this.targetHdfsParams,
+ targetMysqlParams: this.targetMysqlParams,
+ targetHiveParams: this.targetHiveParams
}
}
},
- components: { mListBox, mDatasource, mLocalParams}
+ components: { mListBox, mDatasource, mLocalParams, 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>
-
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
index e96d409..23fe4ce 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
@@ -22,19 +22,20 @@
</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))
}
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
index f67ec6d..bdf2e33 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
@@ -17,58 +17,56 @@
<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>
+ </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>
- </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;
+ resourceIdArr (arr) {
+ let result = []
+ 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: {
- cacheParams () {
+ 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))
+ 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 = isResourceId.map(item => {
+ return { id: item.id, name: item.name, res: item.fullName }
})
}
- let result = []
- resourceIdArr.forEach(item=>{
- this.allNoResources.forEach(item1=>{
- if(item.id==item1.id) {
- // resultBool = true
- result.push(item1)
- }
- })
- })
- this.noRes = result
+ 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>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
index c1f77f6..9f55265 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
@@ -14,10 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import Vue from 'vue'
-import mAffirm from './jumpAffirm'
import store from '@/conf/home/store'
+import i18n from '@/module/i18n'
import router from '@/conf/home/router'
import { uuid, findComponentDownward } from '@/module/util/'
@@ -81,34 +80,18 @@ Affirm.paramVerification = (name) => {
* Pop-up judgment
*/
Affirm.isPop = (fn) => {
- Vue.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mAffirm, {
- on: {
- ok () {
- // save
- findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
- fn()
- Vue.$modal.destroy()
- }).catch(() => {
- fn()
- Vue.$modal.destroy()
- })
- },
- close () {
- fn()
- Vue.$modal.destroy()
- }
- },
- props: {
- }
- })
- }
+ Vue.prototype.$confirm(`${i18n.$t('Whether to save the DAG graph')}`, '', {
+ confirmButtonText: `${i18n.$t('Save')}`,
+ cancelButtonText: `${i18n.$t('Cancel')}`,
+ type: 'warning'
+ }).then(() => {
+ findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
+ fn()
+ }).catch(() => {
+ fn()
+ })
+ }).catch(() => {
+ fn()
})
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 03c3d2d..0037af6 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -17,7 +17,6 @@
import 'jquery-ui/ui/widgets/draggable'
import 'jquery-ui/ui/widgets/droppable'
import 'jquery-ui/ui/widgets/resizable'
-import Vue from 'vue'
import _ from 'lodash'
import i18n from '@/module/i18n'
import { jsPlumb } from 'jsplumb'
@@ -34,7 +33,6 @@ import {
rtTargetarrArr,
computeScale
} from './util'
-import mStart from '@/conf/home/pages/projects/pages/definition/pages/list/_source/start'
import multiDrag from './multiDrag'
const JSP = function () {
@@ -88,7 +86,7 @@ JSP.prototype.init = function ({ dag, instance, options }) {
if (this.config.isClick) {
this.connectClick(e)
} else {
- findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId})
+ findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({ id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId })
}
})
@@ -208,8 +206,8 @@ JSP.prototype.jsonHandle = function ({ largeJson, locations }) {
taskType: v.type,
runFlag: v.runFlag,
nodenumber: locations[v.id].nodenumber,
- successNode: v.conditionResult === undefined? '' : v.conditionResult.successNode[0],
- failedNode: v.conditionResult === undefined? '' : v.conditionResult.failedNode[0]
+ successNode: v.conditionResult === undefined ? '' : v.conditionResult.successNode[0],
+ failedNode: v.conditionResult === undefined ? '' : v.conditionResult.failedNode[0]
}))
// contextmenu event
@@ -280,10 +278,10 @@ JSP.prototype.tasksContextmenu = function (event) {
const isTwo = store.state.dag.isDetails
const html = [
- `<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({
... 18900 lines suppressed ...