From 40e07512fe3e2f2e1c68f2d19d437d27422d1030 Mon Sep 17 00:00:00 2001 From: WaterTiger Date: Fri, 14 Jul 2023 12:06:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0A-Tune-UI=E5=9C=A8=E7=BA=BF?= =?UTF-8?q?=E8=B0=83=E4=BC=98=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E5=8F=8A=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- UI2.0/src/js/online-tuning.js | 158 +++++++++++++++++++++++++----- UI2.0/src/js/utils/charts.js | 1 + UI2.0/src/pages/Online-tuning.vue | 37 +++++-- 3 files changed, 167 insertions(+), 29 deletions(-) diff --git a/UI2.0/src/js/online-tuning.js b/UI2.0/src/js/online-tuning.js index ad824e0..57d1dd2 100644 --- a/UI2.0/src/js/online-tuning.js +++ b/UI2.0/src/js/online-tuning.js @@ -1,5 +1,5 @@ import {capitalize, defineComponent} from "vue"; -import * as charts from './utils/charts.js'; +import * as charts from "./utils/charts.js"; import axios from "./utils/AxiosConfig"; import { getAvgFromArray } from "./utils/utils.js"; @@ -7,7 +7,8 @@ export default defineComponent({ data() { return { analysisData: { - workload: "", + workload: [], + name: [], round: [], header: [], csvData: [], @@ -23,10 +24,20 @@ export default defineComponent({ Rows: [], Columns: [], }, + tableLog: { + Rows: [], + Columns: [], + }, configuration: { - lists: [], - current: "", + lists: ["全部"], + current: "全部", }, + commands: { + recordList: [], + curPage: 1, + recordNum: 0, + selected: 0, + } } }, methods: { @@ -34,7 +45,7 @@ export default defineComponent({ axios('/v1/UI/analysis/getAnalysisData', { cid: this.$route.query.id, csvLine: csvLine, - logLine, logLine, + logLine: logLine, }, 'get').then(res => { if (typeof(res) === 'string') { res = JSON.parse(res); @@ -48,21 +59,25 @@ export default defineComponent({ if (csvLine === 0) { this.analysisData.round = res.round; this.analysisData.header = res.table_header; - this.analysisData.csvData = res.csv_data; - this.analysisData.logData= res.log_data; + this.analysisData.csvData[0] = res.csv_data; + this.analysisData.logData = res.log_data; + if (res.workload !== undefined) { + this.analysisData.workload[0] = res.workload; + } + if (res.name !== undefined) { + this.analysisData.name[0] = res.name; + } this.initTableColumns(); this.initConfiguration(); } else { this.analysisData.round.push(...res.round); for (var i = 0; i < this.analysisData.header.length; i++) { - this.analysisData.csvData[i].push(...res.csv_data[i]); + this.analysisData.csvData[0][i].push(...res.csv_data[i]); } this.analysisData.logData.push(...res.log_data); } this.insertTableRows(); - if (res.workload !== undefined) { - this.analysisData.workload = res.workload; - } + this.calCircleChartData(); this.updateCircleChart(); if (res.hasNext) { @@ -75,10 +90,10 @@ export default defineComponent({ var storageIndex = this.analysisData.header.findIndex(elem => elem === 'STORAGE.STAT.util'); var netIndex = this.analysisData.header.findIndex(elem => elem === 'NET.STAT.ifutil'); var memIndex = this.analysisData.header.findIndex(elem => elem === 'MEM.BANDWIDTH.Total_Util'); - this.circleChartData.cpu = parseFloat(getAvgFromArray(this.analysisData.csvData[cpuIndex]).toFixed(2)); - this.circleChartData.storage = parseFloat(getAvgFromArray(this.analysisData.csvData[storageIndex]).toFixed(2)); - this.circleChartData.network = parseFloat(getAvgFromArray(this.analysisData.csvData[netIndex]).toFixed(2)); - this.circleChartData.storage = parseFloat(getAvgFromArray(this.analysisData.csvData[memIndex]).toFixed(2)); + this.circleChartData.cpu = parseFloat(getAvgFromArray(this.analysisData.csvData[0][cpuIndex]).toFixed(2)); + this.circleChartData.storage = parseFloat(getAvgFromArray(this.analysisData.csvData[0][storageIndex]).toFixed(2)); + this.circleChartData.network = parseFloat(getAvgFromArray(this.analysisData.csvData[0][netIndex]).toFixed(2)); + this.circleChartData.storage = parseFloat(getAvgFromArray(this.analysisData.csvData[0][memIndex]).toFixed(2)); }, updateCircleChart() { var echarts = require("echarts"); @@ -107,21 +122,25 @@ export default defineComponent({ chartInstance.dispose(); } var chart = echarts.init(document.getElementById(chartName)); - charts.initLineChart(chart, "", "", ["test1"], this.analysisData.header[i]); - charts.appendLineChartData(chart, this.analysisData.round, ["test1"], [this.analysisData.csvData[i]]); + var data = [] + for (var j = 0; j <= this.commands.selected; j++) { + data[j] = this.analysisData.csvData[j][i]; + } + charts.initLineChart(chart, "", "", [], this.analysisData.header[i]); + charts.appendLineChartData(chart, this.analysisData.round, this.analysisData.name, data); charts.addOptions(chart, "grid", 0, {"top": 18}); charts.addOptions(chart, "legend", 0, {"top": "0"}); } + }, initConfiguration() { for (var i = 1; i < this.analysisData.header.length; i++) { var category = this.analysisData.header[i].split(".")[0]; - var index = this.configuration.lists.indexOf(category) + var index = this.configuration.lists.indexOf(category); if (index === -1) { - this.configuration.lists.push(category) + this.configuration.lists.push(category); } } - console.log(this.configuration.lists) }, initTableColumns() { this.tableData.Columns.push({ @@ -141,17 +160,110 @@ export default defineComponent({ field: this.analysisData.header[i].toLowerCase(), }) } + this.tableLog.Columns.push({ + name: 'round', + require: true, + label: 'ROUND', + align: 'left', + sortable: true, + field: row => row.name, + }) + var logKeys = Object.keys(this.analysisData.logData[0]) + for (var i=0; i < logKeys.length; i++) { + this.tableLog.Columns.push({ + name: logKeys[i].toLowerCase(), + require: true, + label: logKeys[i].toUpperCase(), + align: 'center', + field: logKeys[i].toLowerCase(), + }) + } }, insertTableRows() { for (var i = this.tableData.Rows.length + 1; i <= this.analysisData.round.length; i++) { var obj = new Object(); obj["name"] = i; - for (var j = 0; j < this.analysisData.header.length;j++) { - obj[this.analysisData.header[j].toLowerCase()] = this.analysisData.csvData[j][i-1]; + for (var j = 0; j < this.analysisData.header.length; j++) { + obj[this.analysisData.header[j].toLowerCase()] = this.analysisData.csvData[0][j][i-1]; } this.tableData.Rows.push(obj); } + var logKeys = Object.keys(this.analysisData.logData[0]) + for (var i = this.tableLog.Rows.length + 1; i <= this.analysisData.logData.length; i++) { + var obj = new Object(); + obj["name"] = i; + for (var j = 0; j < logKeys.length; j++) { + obj[logKeys[j].toLowerCase()] = this.analysisData.logData[i-1][logKeys[j]]; + } + this.tableLog.Rows.push(obj); + } }, + getRecordNum() { + axios('/v1/UI/analysis/initialPage', { + uid: this.$store.state.User.userInfo.userId, + }, 'get').then(res => { + res = JSON.parse(res); + this.commands.recordNum = res.count; + }) + }, + getRecordList() { + axios('/v1/UI/analysis/getList', { + uid: this.$store.state.User.userInfo.userId, + pageNum: this.commands.curPage, + pageSize: 10, + }, 'get').then(res => { + res = JSON.parse(res); + this.commands.recordList = res.data; + }) + }, + async getSelectedCommandData(cid, csvLine) { + var hasNext = false; + var nextCsv = 0; + await axios('/v1/UI/analysis/getAnalysisData', { + cid: cid, + csvLine: csvLine, + logLine: Number.MAX_SAFE_INTEGER, + }, 'get').then(res => { + res = JSON.parse(res); + if (!res.isExist) { + return; + } + if (csvLine === 0) { + this.analysisData.csvData[this.commands.selected] = res.csv_data; + this.analysisData.name[this.commands.selected] = res.name; + } else { + for (var i = 0; i < this.analysisData.header.length; i++) { + this.analysisData.csvData[this.commands.selected][i].push(...res.csv_data[i]); + } + } + hasNext = res.hasNext; + nextCsv = res.nextCsv; + }) + if (hasNext && this.analysisData.csvData[0][0].length > + this.analysisData.csvData[this.commands.selected][0].length) { + await this.getSelectedCommandData(cid, nextCsv); + } + this.updateLineChart(); + }, + selectCommand(event) { + if (event.target.value === 'next') { + this.commands.curPage += 1; + this.getRecordList(); + } else if (event.target.value === 'prev') { + this.commands.curPage -= 1; + this.getRecordList(); + } else { + if (this.commands.selected >= 2) { + return; + } else { + this.commands.selected += 1; + this.getSelectedCommandData(parseInt(event.target.value), 0); + } + } + }, + IsShowCommandItem(name) { + return !this.analysisData.name.includes(name) && this.commands.selected < 2; + } }, watch: { "analysisData.round": { @@ -165,5 +277,7 @@ export default defineComponent({ }, mounted() { this.getAnalysisData(0, 0); + this.getRecordNum(); + this.getRecordList(); }, }); diff --git a/UI2.0/src/js/utils/charts.js b/UI2.0/src/js/utils/charts.js index 3557df8..4bfd76c 100644 --- a/UI2.0/src/js/utils/charts.js +++ b/UI2.0/src/js/utils/charts.js @@ -210,6 +210,7 @@ export function initBarChart(chart, xName, yName, barNames, colors) { calculable: true, xAxis: [ { + name: xName, type: "category", data: [], axisLine: { diff --git a/UI2.0/src/pages/Online-tuning.vue b/UI2.0/src/pages/Online-tuning.vue index a2d05e1..5d37f4e 100644 --- a/UI2.0/src/pages/Online-tuning.vue +++ b/UI2.0/src/pages/Online-tuning.vue @@ -4,11 +4,11 @@ background-color: #f1f2f6; ">
-
+
在线调优
-
- /key_parameters_select-1637120248097 +
+ /{{analysisData.name[0]}}
@@ -62,10 +62,18 @@ 选择命令 - - - + + +
@@ -74,7 +82,7 @@
+ v-show="configuration.current === '全部' || rows.split('.')[0] === configuration.current">
{{rows}}
@@ -114,6 +122,21 @@ row-key="round" >
+
+ 日志详情 +
+
+ +
-- Gitee