This is an automated email from the ASF dual-hosted git repository.
menghaoran pushed a commit to branch master
in repository
https://gitbox.apache.org/repos/asf/shardingsphere-elasticjob-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 814aab0 Refactor config page
new b251900 Merge pull request #15 from
menghaoranss/refactor-add-config-page
814aab0 is described below
commit 814aab0e216e7351a47fe3dde9822f9e42040826
Author: menghaoranss <[email protected]>
AuthorDate: Fri Jul 24 20:07:54 2020 +0800
Refactor config page
---
.../src/lang/en-US.js | 37 ++--
.../src/lang/zh-CN.js | 36 ++--
.../src/views/app-config/api.js | 9 +-
.../src/views/app-config/module/appConfig.vue | 221 +++++++++++++++++----
4 files changed, 236 insertions(+), 67 deletions(-)
diff --git
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
index 4b050cc..11841e6 100644
---
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
+++
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/en-US.js
@@ -139,15 +139,18 @@ export default {
appConfig: {
btnTxt: 'ADD',
addDialog: {
- title: 'Add a data source',
- name: 'Name',
- driver: 'Driver',
- url: 'Url',
- username: 'Username',
- password: 'Password',
- btnConfirmTxt: 'Confirm',
- btnCancelTxt: 'Cancel',
- btnConnectTestTxt: 'Test connect'
+ title: 'Add app',
+ appName: 'App name',
+ script: 'Bootstrap script',
+ cpu: 'CPU count',
+ memory: 'Memory(MB)',
+ sampling: 'Event trace sampling count',
+ cacheEnable: 'App cache enable',
+ appURL: 'App URL'
+ },
+ dialog: {
+ editTitle: 'Modify app',
+ detailTitle: 'App detail'
},
table: {
appName: 'App name',
@@ -161,11 +164,17 @@ export default {
operateDel: 'Del',
},
rules: {
- name: 'Please enter the name of the data source',
- driver: 'Please enter the driver of the data source',
- url: 'Please enter the url of the data source',
- username: 'Please enter the username of the data source',
- password: 'Please enter the password of the data source'
+ appName: 'Please input app name',
+ appURL: 'Please input app url',
+ bootstrapScript: 'Please input bootstrap script',
+ cpuCount: 'Please input cpu count',
+ memoryMB: 'Please input memory',
+ eventTraceSamplingCount: 'Please input event trace sampling count'
+ },
+ tips: {
+ disableSuccess: 'Disable Success',
+ enableSuccess: 'Enable Success'
}
+
}
}
diff --git
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
index 5f04b26..e2546f5 100644
---
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
+++
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/lang/zh-CN.js
@@ -139,15 +139,18 @@ export default {
appConfig: {
btnTxt: '添加',
addDialog: {
- title: '添加事件追踪数据源',
- name: '数据源名称',
- driver: '数据源驱动',
- url: '数据源连接地址',
- username: '数据源用户名',
- password: '数据源密码',
- btnConfirmTxt: '确定',
- btnCancelTxt: '取消',
- btnConnectTestTxt: '测试连接'
+ title: '添加应用',
+ appName: '应用名称',
+ script: '启动脚本',
+ cpu: 'CPU核数',
+ memory: '占用内存(MB)',
+ sampling: '作业事件采样次数(仅Daemon)',
+ cacheEnable: '是否在本地缓存应用',
+ appURL: '应用所在路径'
+ },
+ dialog: {
+ editTitle: '修改应用',
+ detailTitle: '应用详情'
},
table: {
appName: '应用名称',
@@ -161,11 +164,16 @@ export default {
operateEnable: '生效'
},
rules: {
- name: '请输入数据源名称',
- driver: '请输入数据源驱动',
- url: '请输入数据源连接地址',
- username: '请输入数据源用户名',
- password: '请输入数据源密码'
+ appName: '请输入应用名称',
+ appURL: '请输入应用所在路径',
+ bootstrapScript: '请输入启动脚本',
+ cpuCount: '请输入CPU核数',
+ memoryMB: '请输入内存占用',
+ eventTraceSamplingCount: '请输入作业事件采样次数'
+ },
+ tips: {
+ disableSuccess: '失效成功',
+ enableSuccess: '生效成功'
}
}
}
diff --git
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/api.js
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/api.js
index 3aaa256..a2365b9 100644
---
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/api.js
+++
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/api.js
@@ -19,8 +19,9 @@ import API from '@/utils/api'
export default {
getApp: (params = {}) => API.get(`/api/app/list`, params),
- deleteRegCenter: (params = {}) => API.delete(`/api/registry-center`, params),
- postRegCenter: (params = {}) => API.post(`/api/registry-center/add`, params),
- getRegCenterActivated: (params = {}) =>
API.get(`/api/registry-center/activated`, params),
- postRegCenterConnect: (params = {}) =>
API.post(`/api/registry-center/connect`, params)
+ delete: (params = {}) => API.delete(`/api/app/` + params.appName, params),
+ addApp: (params = {}) => API.post(`/api/app/register`, params),
+ update: (params = {}) => API.post(`/api/app/update`, params),
+ disable: (params = {}) => API.post(`/api/app/` + params.appName +
`/disable`, params),
+ enable: (params = {}) => API.post(`/api/app/` + params.appName + `/enable`,
params)
}
diff --git
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/module/appConfig.vue
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/module/appConfig.vue
index f542380..2f236dd 100644
---
a/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/module/appConfig.vue
+++
b/shardingsphere-elasticjob-cloud-ui/shardingsphere-elasticjob-cloud-ui-frontend/src/views/app-config/module/appConfig.vue
@@ -42,7 +42,7 @@
size="mini"
type="primary"
:disabled="isGuest"
- @click="handleModify(scope.row)"
+ @click="handleDetail(scope.row)"
plain>{{ $t("appConfig.table.operateDetail") }}</el-button>
<el-button
size="mini"
@@ -54,14 +54,14 @@
size="mini"
type="primary"
:disabled="isGuest"
- @click="handleModify(scope.row)"
+ @click="handleDelete(scope.row)"
plain>{{ $t("appConfig.table.operateDel") }}</el-button>
<el-button
size="mini"
type="primary"
:disabled="isGuest"
- @click="handleModify(scope.row)"
- plain>{{ $t("appConfig.table.operateDisable") }}</el-button>
+ @click="handleDisable(scope.row)"
+ plain>{{ scope.row.disabled ?
$t("appConfig.table.operateEnable") :
$t("appConfig.table.operateDisable")}}</el-button>
</el-button-group>
</template>
</el-table-column>
@@ -77,42 +77,121 @@
</div>
</div>
<el-dialog
- :title="$t('appConfig.registDialog.title')"
+ :title="$t('appConfig.addDialog.title')"
:visible.sync="addDialogVisible"
width="1010px"
>
- <el-form ref="form" :model="form" :rules="rules" label-width="170px">
- <el-form-item :label="$t('appConfig.registDialog.name')" prop="name">
- <el-input :placeholder="$t('appConfig.rules.name')"
v-model="form.name" autocomplete="off" />
+ <el-form ref="form" :model="form" :rules="rules" label-width="210px">
+ <el-form-item :label="$t('appConfig.addDialog.appName')"
prop="appName">
+ <el-input :placeholder="$t('appConfig.rules.appName')"
v-model="form.appName" autocomplete="off" />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.script')"
prop="bootstrapScript">
+ <el-input
+ :placeholder="'bin/start.sh'"
+ v-model="form.bootstrapScript"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.cpu')" prop="cpuCount">
+ <el-input
+ :placeholder="$t('appConfig.rules.cpuCount')"
+ v-model="form.cpuCount"
+ autocomplete="off"
+ />
</el-form-item>
- <el-form-item :label="$t('appConfig.registDialog.address')"
prop="zkAddressList">
+ <el-form-item :label="$t('appConfig.addDialog.memory')"
prop="memoryMB">
<el-input
- :placeholder="$t('appConfig.rules.address')"
- v-model="form.zkAddressList"
+ :placeholder="$t('appConfig.rules.memoryMB')"
+ v-model="form.memoryMB"
autocomplete="off"
/>
</el-form-item>
- <el-form-item :label="$t('appConfig.registDialog.namespaces')"
prop="namespace">
+ <el-form-item :label="$t('appConfig.addDialog.sampling')"
prop="eventTraceSamplingCount">
<el-input
- :placeholder="$t('appConfig.rules.namespaces')"
- v-model="form.namespace"
+ :placeholder="$t('appConfig.rules.eventTraceSamplingCount')"
+ v-model="form.eventTraceSamplingCount"
autocomplete="off"
/>
</el-form-item>
- <el-form-item :label="$t('appConfig.registDialog.digest')">
+ <el-form-item :label="$t('appConfig.addDialog.appURL')" prop="appURL">
<el-input
- :placeholder="$t('appConfig.rules.digest')"
- v-model="form.digest"
+ :placeholder="$t('appConfig.rules.appURL')"
+ v-model="form.appURL"
autocomplete="off"
/>
</el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.cacheEnable')"
prop="cacheEnable">
+ <el-checkbox v-model="form.appCacheEnable"></el-checkbox>
+ </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
- <el-button @click="regustDialogVisible = false">{{
$t("appConfig.registDialog.btnCancelTxt") }}</el-button>
+ <el-button @click="addDialogVisible = false">{{ $t("btn.cancel")
}}</el-button>
<el-button
type="primary"
@click="onConfirm('form')"
- >{{ $t("appConfig.registDialog.btnConfirmTxt") }}</el-button>
+ >{{ $t("btn.submit") }}</el-button>
+ </div>
+ </el-dialog>
+ <el-dialog
+ :title="isEdit ? $t('appConfig.dialog.editTitle') :
$t('appConfig.dialog.detailTitle')"
+ :visible.sync="editDialogVisible"
+ width="1010px"
+ >
+ <el-form ref="editForm" :model="editForm" :rules="rules"
label-width="210px">
+ <el-form-item :label="$t('appConfig.addDialog.appName')"
prop="appName">
+ <el-input :placeholder="$t('appConfig.rules.appName')"
v-model="editForm.appName" autocomplete="off" disabled/>
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.script')"
prop="bootstrapScript">
+ <el-input
+ :placeholder="'bin/start.sh'"
+ v-model="editForm.bootstrapScript"
+ autocomplete="off"
+ disabled
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.cpu')" prop="cpuCount">
+ <el-input
+ :placeholder="$t('appConfig.rules.cpuCount')"
+ v-model="editForm.cpuCount"
+ autocomplete="off"
+ disabled
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.memory')"
prop="memoryMB">
+ <el-input
+ :placeholder="$t('appConfig.rules.memoryMB')"
+ v-model="editForm.memoryMB"
+ autocomplete="off"
+ disabled
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.sampling')"
prop="eventTraceSamplingCount">
+ <el-input
+ :placeholder="$t('appConfig.rules.eventTraceSamplingCount')"
+ v-model="editForm.eventTraceSamplingCount"
+ autocomplete="off"
+ :disabled="!isEdit"
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.appURL')" prop="appURL">
+ <el-input
+ :placeholder="$t('appConfig.rules.appURL')"
+ v-model="editForm.appURL"
+ autocomplete="off"
+ disabled
+ />
+ </el-form-item>
+ <el-form-item :label="$t('appConfig.addDialog.cacheEnable')"
prop="cacheEnable">
+ <el-checkbox v-model="editForm.appCacheEnable"
:disabled="!isEdit"></el-checkbox>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="editDialogVisible = false">{{ $t("btn.cancel")
}}</el-button>
+ <el-button
+ v-if="isEdit"
+ type="primary"
+ @click="edit('editForm')"
+ >{{ $t("btn.submit") }}</el-button>
</div>
</el-dialog>
</el-row>
@@ -126,6 +205,8 @@ export default {
data() {
return {
addDialogVisible: false,
+ editDialogVisible: false,
+ isEdit: false,
isGuest: window.localStorage.getItem('isGuest') === 'true',
column: [
{
@@ -142,44 +223,55 @@ export default {
}
],
form: {
- name: '',
- zkAddressList: '',
- namespace: '',
- digest: ''
+ appName: '',
+ appURL: '',
+ bootstrapScript: '',
+ cpuCount: '1',
+ memoryMB: '128',
+ eventTraceSamplingCount: '0',
+ appCacheEnable: true
},
+ editForm: {},
rules: {
- name: [
+ appName: [
+ {
+ required: true,
+ message: this.$t('appConfig').rules.appName,
+ trigger: 'change'
+ }
+ ],
+ bootstrapScript: [
{
required: true,
- message: this.$t('appConfig').rules.name,
+ message: this.$t('appConfig').rules.bootstrapScript,
trigger: 'change'
}
],
- zkAddressList: [
+ cpuCount: [
{
required: true,
- message: this.$t('appConfig').rules.address,
+ message: this.$t('appConfig').rules.cpuCount,
trigger: 'change'
}
],
- namespace: [
+ memoryMB: [
{
required: true,
- message: this.$t('appConfig').rules.namespaces,
+ message: this.$t('appConfig').rules.memoryMB,
trigger: 'change'
}
],
- instanceType: [
+ eventTraceSamplingCount: [
{
required: true,
- message: this.$t('appConfig').rules.centerType,
+ message: this.$t('appConfig').rules.eventTraceSamplingCount,
trigger: 'change'
}
],
- orchestrationName: [
+ appURL: [
{
required: true,
- message: this.$t('appConfig').rules.orchestrationName,
+ message: this.$t('appConfig').rules.appURL,
trigger: 'change'
}
]
@@ -251,14 +343,14 @@ export default {
onConfirm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
- API.postRegCenter(this.form).then(res => {
+ API.addApp(this.form).then(res => {
this.addDialogVisible = false
this.$notify({
title: this.$t('common').notify.title,
message: this.$t('common').notify.addSucMessage,
type: 'success'
})
- this.getRegCenter()
+ this.getApp()
})
} else {
console.log('error submit!!')
@@ -268,6 +360,65 @@ export default {
},
add() {
this.addDialogVisible = true
+ },
+ handleDetail(row) {
+ this.isEdit = false
+ this.editForm = row
+ this.editDialogVisible = true
+ },
+ handleModify(row) {
+ this.isEdit = true
+ this.editForm = row
+ this.editDialogVisible = true
+ },
+ edit(formName) {
+ this.$refs[formName].validate(valid => {
+ if (valid) {
+ API.update(this.editForm).then(res => {
+ this.editDialogVisible = false
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.editSucMessage,
+ type: 'success'
+ })
+ this.getApp()
+ })
+ } else {
+ console.log('error submit!!')
+ return false
+ }
+ })
+ },
+ handleDelete(row) {
+ API.delete({'appName': row.appName}).then(res => {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('common').notify.delSucMessage,
+ type: 'success'
+ })
+ this.getApp()
+ })
+ },
+ handleDisable(row) {
+ if (row.disabled) {
+ API.enable({'appName': row.appName}).then(res => {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('appConfig').tips.enableSuccess,
+ type: 'success'
+ })
+ this.getApp()
+ })
+ } else {
+ API.disable({'appName': row.appName}).then(res => {
+ this.$notify({
+ title: this.$t('common').notify.title,
+ message: this.$t('appConfig').tips.disableSuccess,
+ type: 'success'
+ })
+ this.getApp()
+ })
+ }
}
}
}
