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-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 7eddfc6 Refactor scaling (#21)
7eddfc6 is described below
commit 7eddfc64d1618f32d844aea913fc03cf037f5ffc
Author: Haoran Meng <[email protected]>
AuthorDate: Tue Sep 22 15:48:51 2020 +0800
Refactor scaling (#21)
---
shardingsphere-ui-frontend/src/lang/en-US.js | 14 +-
shardingsphere-ui-frontend/src/lang/zh-CN.js | 6 +
.../src/views/data-scaling/module/index.vue | 229 ++++++---------------
3 files changed, 79 insertions(+), 170 deletions(-)
diff --git a/shardingsphere-ui-frontend/src/lang/en-US.js
b/shardingsphere-ui-frontend/src/lang/en-US.js
index 3447c50..4bb125a 100644
--- a/shardingsphere-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-ui-frontend/src/lang/en-US.js
@@ -155,10 +155,10 @@ export default {
dataScaling: {
btnTxt: 'ADD',
tableList: {
- jobId: 'jobId',
- jobName: 'jobName',
- status: 'status',
- operate: 'operate',
+ jobId: 'Job Id',
+ jobName: 'Job Name',
+ status: 'Status',
+ operate: 'Operation',
operateStop: 'stop',
operateSee: 'see'
},
@@ -195,6 +195,12 @@ export default {
serviceUrl: 'Service Url',
serviceNamePlaceholder: 'Please enter serviceName',
serviceUrlPlaceholder: 'Please enter serviceUrl'
+ },
+ detail: {
+ inventory: 'Inventory',
+ increment: 'Increment',
+ taskId: 'Sub Task Id',
+ delay: 'Delay(seconds)'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/lang/zh-CN.js
b/shardingsphere-ui-frontend/src/lang/zh-CN.js
index a12fc87..c2ed73e 100644
--- a/shardingsphere-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-ui-frontend/src/lang/zh-CN.js
@@ -193,6 +193,12 @@ export default {
serviceUrl: '服务地址',
serviceNamePlaceholder: '请输入服务名称',
serviceUrlPlaceholder: '请输入服务地址'
+ },
+ detail: {
+ inventory: '存量',
+ increment: '增量',
+ taskId: '子任务Id',
+ delay: '延迟(秒)'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
b/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
index 6573c90..76f6822 100644
--- a/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
+++ b/shardingsphere-ui-frontend/src/views/data-scaling/module/index.vue
@@ -53,7 +53,7 @@
size="small"
type="primary"
icon="el-icon-view"
- @click="handlerView(scope.row)"
+ @click="showSyncTaskProgressDetail(scope.row)"
/>
</el-tooltip>
<el-tooltip
@@ -188,141 +188,48 @@
</el-col>
</el-row>
</el-dialog>
- <!-- syncTaskProgress -->
- <el-dialog
- :visible.sync="DataScalingDialogProgressVisible"
- width="1010px"
- @close="close()"
- >
- <el-form :inline="true">
- <el-form-item label="JobID">
- {{ progressRow.id }}
- </el-form-item>
- <el-form-item label="JobName">
- {{ progressRow.jobName }}
- </el-form-item>
- <el-form-item label="Status">
- {{ progressRow.status }}
- </el-form-item>
- </el-form>
- <el-row :gutter="12">
- <el-col
- v-for="(item, index) in progressRow.syncTaskProgress"
- :span="6"
- :key="index"
- >
- <el-card shadow="hover">
- <el-form :inline="true">
- <el-form-item label="scalingTask">
- {{ item.id }}
- </el-form-item>
- <el-form-item label="syncStatus">
- {{ item.status }}
- </el-form-item>
- <el-form-item>
- <el-button
- size="mini"
- type="primary"
- icon="el-icon-thumb"
- @click="showSyncTaskProgressDetail(item)"
- ></el-button>
- </el-form-item>
- </el-form>
- </el-card>
- </el-col>
- </el-row>
- </el-dialog>
<!-- syncTaskProgressDetail -->
<el-dialog
:visible.sync="DataScalingDialogSyncTaskProgressDetailVisible"
- width="1010px"
+ width="1110px"
>
<el-form :inline="true">
- <el-form-item label="JobID">
- {{ syncTaskProgress.id }}
+ <el-form-item :label="this.$t('dataScaling').tableList.jobId">
+ {{ job.jobId }}
+ </el-form-item>
+ <el-form-item :label="this.$t('dataScaling').tableList.jobName">
+ {{ job.jobName }}
</el-form-item>
- <el-form-item label="Status">
- {{ syncTaskProgress.status }}
+ <el-form-item :label="this.$t('dataScaling').tableList.status">
+ {{ job.status }}
</el-form-item>
</el-form>
- <div class="progress-list">
- <el-row class="progress-item">
- <el-col :span="2">
- <el-button
- size="mini"
- type="success"
- icon="el-icon-check"
- circle
- ></el-button>
- </el-col>
- <el-col :span="2"><div style="color: #333; font-weight:
500;">Preparing</div></el-col>
- <el-col :span="6" class="collapse-progress collapse-active">
- <el-progress
- :stroke-width="10"
- :percentage="100"
- :show-text="false"
- ></el-progress>
- </el-col>
- </el-row>
- </div>
- <el-collapse>
- <el-collapse-item>
- <template slot="title">
- <el-row class="collapse-row progress-item">
- <el-col :span="2">
- <el-button
- size="mini"
- type="success"
- icon="el-icon-check"
- circle
- ></el-button>
- </el-col>
- <el-col :span="2"><div>History</div></el-col>
- <el-col :span="6" class="collapse-progress">
- <el-progress :stroke-width="10"
:percentage="percentageComputed"></el-progress>
- </el-col>
- </el-row>
- </template>
- <el-row :gutter="12">
- <el-col
- v-for="(item, index) in syncTaskProgress.historySyncTaskProgress"
- :span="8"
- :key="index"
- >
- <el-card shadow="hover" style="margin-bottom: 10px">
- {{ item.id }}
- <v-chart :options="getOption(item)" />
- </el-card>
- </el-col>
- </el-row>
- </el-collapse-item>
- <el-collapse-item>
- <template slot="title">
- <el-row class="collapse-row">
- <el-col :span="2">
- <el-button
- size="mini"
- type="success"
- icon="el-icon-check"
- circle
- ></el-button>
- </el-col>
- <el-col :span="2"><div>Realtime</div></el-col>
- </el-row>
- </template>
- <el-row class="progress-item">
- <el-col :span="10">
- <span style="color: #333; font-weight:
500;">delayMillisecond:</span>
- {{
- this.$moment(
- syncTaskProgress.realTimeSyncTaskProgress &&
- syncTaskProgress.realTimeSyncTaskProgress.delayMillisecond
- ).format('s')
- }}s
- </el-col>
+
+ <el-tabs v-model="activeName">
+ <el-tab-pane name="first">
+ <div slot="label">{{this.$t('dataScaling').detail.inventory}}
({{percentageComputed}}%)</div>
+ <el-row :gutter="10">
+ <div v-for="(item, index) in jobDetail.inventoryDataTasks">
+ <div v-for="(item1, idx) in item.innerTaskProgresses">
+ <el-col
+ :span="4"
+ :key="index"
+ >
+ <div style="margin-bottom: 10px;">{{item1.id}}</div>
+ <el-progress type="circle"
:percentage="getPercentage(item1)"></el-progress>
+ </el-col>
+ </div>
+ </div>
</el-row>
- </el-collapse-item>
- </el-collapse>
+ </el-tab-pane>
+ <el-tab-pane :label="this.$t('dataScaling').detail.increment"
name="second">
+ <el-table :data="jobDetail.incrementalDataTasks">
+ <el-table-column :label="this.$t('dataScaling').detail.taskId"
prop="id"></el-table-column>
+ <el-table-column :label="this.$t('dataScaling').detail.delay"
prop="delayMillisecond" :formatter="dateFormat"></el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+
</el-dialog>
<el-dialog
:visible.sync="serverDialogVisible"
@@ -356,11 +263,8 @@
<script>
import yaml from 'js-yaml'
import Vue from 'vue'
-import ChartBase from '@/components/ChartBase'
import moment from 'moment'
import clone from 'lodash/clone'
-import isEmpty from 'lodash/isEmpty'
-import 'echarts-liquidfill'
import API from '../api'
Vue.prototype.$moment = moment
@@ -395,13 +299,9 @@ let timer = null
export default {
name: 'DataScalingIndex',
- components: {
- 'v-chart': ChartBase
- },
data() {
return {
DataScalingDialogVisible: false,
- DataScalingDialogProgressVisible: false,
DataScalingDialogSyncTaskProgressDetailVisible: false,
DatasourceVisible: false,
serverDialogVisible: false,
@@ -437,8 +337,9 @@ export default {
url: '',
jobCount: '3'
},
- progressRow: {},
- syncTaskProgress: {},
+ job: {},
+ jobDetail: {},
+ activeName: 'first',
rules: {
source: [
{
@@ -544,13 +445,18 @@ export default {
)
},
percentageComputed() {
- const arr = this.syncTaskProgress.historySyncTaskProgress
+ const arr = this.jobDetail.inventoryDataTasks
if (!arr) return
let sumEstimatedRows = 0
let sumSyncedRows = 0
for (const v of arr) {
- sumEstimatedRows += v.estimatedRows
- sumSyncedRows += v.syncedRows
+ if (!v.innerTaskProgresses) {
+ break
+ }
+ for(const v1 of v.innerTaskProgresses) {
+ sumEstimatedRows += v1.estimatedRows
+ sumSyncedRows += v1.syncedRows
+ }
}
let res = 0
if (sumEstimatedRows) {
@@ -563,6 +469,14 @@ export default {
this.getJobServer()
},
methods: {
+ dateFormat(row, column) {
+ if (row.delayMillisecond === -1) {
+ return -1
+ }
+ return this.$moment(
+ row.delayMillisecond
+ ).format('s')
+ },
showServerDialog() {
this.serverDialogVisible = true
},
@@ -622,6 +536,13 @@ export default {
}
return nDecimal(res, 2) * 100
},
+ getPercentage(obj) {
+ let data = 0
+ if (obj.estimatedRows) {
+ data = obj.syncedRows / obj.estimatedRows
+ }
+ return data
+ },
getOption(obj) {
let data = 0
if (obj.estimatedRows) {
@@ -647,7 +568,6 @@ export default {
selectChange(item) {
this.getSchemaDataSource(item)
this.getSchemaRule(item)
- this.getSchemaMetadata(item)
},
getSchemaDataSource(schemaName) {
API.getSchemaDataSource(schemaName).then(res => {
@@ -669,16 +589,6 @@ export default {
}
})
},
- getSchemaMetadata(schemaName) {
- API.getSchemaMetadata(schemaName).then(res => {
- const { model } = res
- if (Object.prototype.toString.call(model) === '[object String]') {
- this.textareaRule = model
- } else {
- this.textareaRule = JSON.stringify(model, null, '\t')
- }
- })
- },
getSchema() {
API.getSchema().then(res => {
this.schemaData = res.model
@@ -713,14 +623,7 @@ export default {
const { jobId, status } = row
API.getJobProgress(jobId).then(res => {
const { model } = res
- this.progressRow = model
- if (!isEmpty(this.syncTaskProgress)) {
- for (const v of model.syncTaskProgress) {
- if (v.id === this.syncTaskProgress.id) {
- this.syncTaskProgress = v
- }
- }
- }
+ this.jobDetail = model
clearTimeout(timer)
if (status !== 'STOPPED') {
timer = setTimeout(() => {
@@ -730,13 +633,10 @@ export default {
}
})
},
- handlerView(row) {
- this.DataScalingDialogProgressVisible = true
- this.getJobProgress(row)
- },
showSyncTaskProgressDetail(item) {
+ this.job = item
this.DataScalingDialogSyncTaskProgressDetailVisible = true
- this.syncTaskProgress = item
+ this.getJobProgress(item)
},
onConfirm(formName) {
this.$refs[formName].validate(valid => {
@@ -746,12 +646,9 @@ export default {
ruleConfiguration: {
sourceDatasource: this.textareaDatasource,
sourceRule: this.textareaRule,
- // sourceDatasource: "ds_0: !!YamlDataSourceConfiguration\n
dataSourceClassName: com.zaxxer.hikari.HikariDataSource\n props:\n jdbcUrl:
jdbc:mysql://sharding-scaling-mysql:3306/test?serverTimezone=UTC&useSSL=false\n
username: root\n password: '123456'\n connectionTimeout: 30000\n
idleTimeout: 60000\n maxLifetime: 1800000\n maxPoolSize: 50\n
minPoolSize: 1\n maintenanceIntervalMilliseconds: 30000\n readOnly:
false\n",
- // sourceRule: "defaultDatabaseStrategy:\n inline:\n
algorithmExpression: ds_${user_id % 2}\n shardingColumn: user_id\ntables:\n
t1:\n actualDataNodes: ds_0.t1\n keyGenerateStrategy:\n column:
order_id\n logicTable: t1\n tableStrategy:\n inline:\n
algorithmExpression: t1\n shardingColumn: order_id\n t2:\n
actualDataNodes: ds_0.t2\n keyGenerateStrategy:\n column:
order_item_id\n logicTable: t2\n tableStrategy:\n [...]
destinationDataSources: {
username,
password,
- // url:
'jdbc:mysql://sharding-scaling-mysql:3306/test2?serverTimezone=UTC&useSSL=false'
url
}
},
