Merge pull request #4 from cncounter/master
cluster state page add auto refresh config feature
diff --git a/shardingsphere-ui-frontend/src/lang/en-US.js b/shardingsphere-ui-frontend/src/lang/en-US.js
index 7f4eba7..1b4828f 100644
--- a/shardingsphere-ui-frontend/src/lang/en-US.js
+++ b/shardingsphere-ui-frontend/src/lang/en-US.js
@@ -243,6 +243,9 @@
offLine: 'OFFLINE',
disabled: 'DISABLED',
unknown: 'UNKNOWN'
+ },
+ configBar: {
+ refreshPeriodLabel: 'Auto Refresh'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/lang/zh-CN.js b/shardingsphere-ui-frontend/src/lang/zh-CN.js
index 07d7221..9f034eb 100644
--- a/shardingsphere-ui-frontend/src/lang/zh-CN.js
+++ b/shardingsphere-ui-frontend/src/lang/zh-CN.js
@@ -241,6 +241,9 @@
offLine: '下线',
disabled: '禁用',
unknown: '未知'
+ },
+ configBar: {
+ refreshPeriodLabel: '定时刷新'
}
}
}
diff --git a/shardingsphere-ui-frontend/src/views/cluster/module/clusterstate.vue b/shardingsphere-ui-frontend/src/views/cluster/module/clusterstate.vue
index 31b9523..9125b9a 100644
--- a/shardingsphere-ui-frontend/src/views/cluster/module/clusterstate.vue
+++ b/shardingsphere-ui-frontend/src/views/cluster/module/clusterstate.vue
@@ -16,7 +16,18 @@
-->
<template>
- <div style="width: 100%; height: 100%">
+ <div style="width: 100%; height: 100%; position: relative;">
+ <div class="configBar">
+ <label for="refreshPeriod">{{ $t("clusterState.configBar.refreshPeriodLabel") }}:</label>
+ <el-switch
+ v-model="autoRefreshFlag"
+ active-color="#13ce66"
+ inactive-color="#ff4949">
+ </el-switch>
+ <select v-model="refreshInterval" name="refreshPeriod">
+ <option v-for="(item,index) of refreshOptions" :value="item.millis" :key="index">{{ item.name }}</option>
+ </select>
+ </div>
<div id="myChart" class="echarts"></div>
</div>
</template>
@@ -47,6 +58,15 @@
},
myChart: {},
timer: {},
+ refreshOptions: [
+ { name: '30s', millis: 30000 },
+ { name: '60s', millis: 60000 },
+ { name: '2min', millis: 120000 },
+ { name: '5min', millis: 300000 },
+ { name: '30min', millis: 1800000 }
+ ],
+ prevRefreshMillis: 0,
+ autoRefreshFlag: true,
refreshInterval: 60000
}
},
@@ -64,6 +84,19 @@
refresh() {
this.loadAllInstanceStates()
},
+ tryAutoRefresh() {
+ const curMillis = new Date().getTime()
+ if (!this.autoRefreshFlag) {
+ return
+ } else if (!this.prevRefreshMillis) {
+ this.prevRefreshMillis = curMillis
+ return
+ } else if (curMillis - this.prevRefreshMillis < this.refreshInterval) {
+ return
+ }
+ this.prevRefreshMillis = curMillis
+ this.refresh()
+ },
loadAllInstanceStates() {
API.loadInstanceStates().then(res => {
const data = res.model
@@ -87,7 +120,7 @@
this.myChart.setOption(this.option)
},
startTimer() {
- this.timer = setInterval(this.refresh, this.refreshInterval, this.refreshInterval)
+ this.timer = setInterval(this.tryAutoRefresh, 1)
},
initProxy() {
this.proxy = []
@@ -368,4 +401,12 @@
width: 100%;
padding-top: 10px;
}
+.configBar {
+ z-index: 100;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ font-size: 14px;
+ font-weight: 500;
+}
</style>
