From 7890d7697d1c0f51e52296eff72144e5bcecdcd5 Mon Sep 17 00:00:00 2001 From: hengji2023 Date: Wed, 3 May 2023 13:44:36 +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=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- UI2.0/src/js/command-record.js | 11 +- UI2.0/src/js/online-tuning.js | 217 +++++++++++++++----- UI2.0/src/js/personal.js | 2 +- UI2.0/src/js/utils/utils.js | 21 +- UI2.0/src/pages/Command-record.vue | 6 +- UI2.0/src/pages/Online-tuning.vue | 305 +++-------------------------- 6 files changed, 221 insertions(+), 341 deletions(-) diff --git a/UI2.0/src/js/command-record.js b/UI2.0/src/js/command-record.js index 0e4aeb7..3c98c38 100644 --- a/UI2.0/src/js/command-record.js +++ b/UI2.0/src/js/command-record.js @@ -16,7 +16,7 @@ export default defineComponent({ var url = '/v1/UI/' + type + '/initialPage' axios(url, { uid: this.$store.state.User.userInfo.userId, - }, "get").then(res => { + }, 'get').then(res => { res = JSON.parse(res) this.recordNum = res.count }) @@ -27,7 +27,7 @@ export default defineComponent({ uid: this.$store.state.User.userInfo.userId, pageNum: this.curPage, pageSize: 15 - }, "get").then(res => { + }, 'get').then(res => { res = JSON.parse(res) this.recordList = res.data for(var i = 0; i < this.recordList.length; i++){ @@ -39,11 +39,10 @@ export default defineComponent({ this.getRecordNum(type) this.getRecordList(type) this.recordType = type - this.curPage = 1 }, getRecordDetail(type, id, mid) { if(typeof(type) == 'undefined'){ - if(this.recordType == 2) { + if(this.recordType == 'tuning') { this.$router.push({ path: "/offline", query: {id: id} @@ -75,7 +74,7 @@ export default defineComponent({ axios(url, { tid: id, description: this.descriptionList[index] - }, "get").then(res => { + }, 'get').then(res => { res = JSON.parse(res) if(res.status) { this.recordList[index].description = this.descriptionList[index] @@ -87,7 +86,7 @@ export default defineComponent({ axios(url, { cid: id, description: this.descriptionList[index] - }, "get").then(res => { + }, 'get').then(res => { res = JSON.parse(res) if(res.status) { this.recordList[index].description = this.descriptionList[index] diff --git a/UI2.0/src/js/online-tuning.js b/UI2.0/src/js/online-tuning.js index 35b06be..ad824e0 100644 --- a/UI2.0/src/js/online-tuning.js +++ b/UI2.0/src/js/online-tuning.js @@ -1,60 +1,169 @@ -import {defineComponent} from "vue"; +import {capitalize, defineComponent} from "vue"; import * as charts from './utils/charts.js'; +import axios from "./utils/AxiosConfig"; +import { getAvgFromArray } from "./utils/utils.js"; export default defineComponent({ - methods: {}, + data() { + return { + analysisData: { + workload: "", + round: [], + header: [], + csvData: [], + logData: [], + }, + circleChartData: { + cpu: 0.0, + storage: 0.0, + network: 0.0, + memory: 0.0, + }, + tableData: { + Rows: [], + Columns: [], + }, + configuration: { + lists: [], + current: "", + }, + } + }, + methods: { + getAnalysisData(csvLine, logLine) { + axios('/v1/UI/analysis/getAnalysisData', { + cid: this.$route.query.id, + csvLine: csvLine, + logLine, logLine, + }, 'get').then(res => { + if (typeof(res) === 'string') { + res = JSON.parse(res); + } + if (!res.isExist) { + this.$router.push({ + path: '/record', + }); + return; + } + 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.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.logData.push(...res.log_data); + } + this.insertTableRows(); + if (res.workload !== undefined) { + this.analysisData.workload = res.workload; + } + this.calCircleChartData(); + this.updateCircleChart(); + if (res.hasNext) { + setTimeout(this.getAnalysisData, res.interval, res.nextCsv, res.nextLog); + } + }) + }, + calCircleChartData() { + var cpuIndex = this.analysisData.header.findIndex(elem => elem === 'CPU.STAT.util'); + 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)); + }, + updateCircleChart() { + var echarts = require("echarts"); + for (var i = 1; i < 5; i++) { + var chartName = "percentage" + i; + var chartInstance = echarts.getInstanceByDom(document.getElementById(chartName)); + if (chartInstance != "" && chartInstance != null && chartInstance != undefined) { + chartInstance.dispose(); + } + } + var circleChart1 = echarts.init(document.getElementById("percentage1")); + var circleChart2 = echarts.init(document.getElementById("percentage2")); + var circleChart3 = echarts.init(document.getElementById("percentage3")); + var circleChart4 = echarts.init(document.getElementById("percentage4")); + charts.initCircleChart(circleChart1, this.circleChartData.cpu, "cpu"); + charts.initCircleChart(circleChart2, this.circleChartData.storage, "storage"); + charts.initCircleChart(circleChart3, this.circleChartData.network, "network"); + charts.initCircleChart(circleChart4, this.circleChartData.memory, "memory"); + }, + updateLineChart() { + var echarts = require("echarts"); + for (var i = 1; i < this.analysisData.header.length; i++) { + var chartName = "online" + i; + var chartInstance = echarts.getInstanceByDom(document.getElementById(chartName)); + if (chartInstance != "" && chartInstance != null && chartInstance != undefined) { + 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]]); + 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) + if (index === -1) { + this.configuration.lists.push(category) + } + } + console.log(this.configuration.lists) + }, + initTableColumns() { + this.tableData.Columns.push({ + name: 'round', + require: true, + label: 'ROUND', + align: 'left', + sortable: true, + field: row => row.name, + }) + for (var i = 0; i < this.analysisData.header.length; i++) { + this.tableData.Columns.push({ + name: this.analysisData.header[i].toLowerCase(), + require: true, + label: this.analysisData.header[i].toUpperCase(), + align: 'center', + field: this.analysisData.header[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]; + } + this.tableData.Rows.push(obj); + } + }, + }, + watch: { + "analysisData.round": { + deep: true, + handler:function(newVal) { + this.$nextTick(()=>{ + this.updateLineChart(); + }) + } + } + }, mounted() { - var echarts = require("echarts"); - var circleChart1 = echarts.init(document.getElementById("percentage1")); - var circleChart2 = echarts.init(document.getElementById("percentage2")); - var circleChart3 = echarts.init(document.getElementById("percentage3")); - var circleChart4 = echarts.init(document.getElementById("percentage4")); - var myChart1 = echarts.init(document.getElementById("online1")); - var myChart2 = echarts.init(document.getElementById("online2")); - var myChart3 = echarts.init(document.getElementById("online3")); - var myChart4 = echarts.init(document.getElementById("online4")); - var myChart5 = echarts.init(document.getElementById("online5")); - var myChart6 = echarts.init(document.getElementById("online6")); - - let xValue = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', - '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', - '28', '29', '30']; - let yValue = [[6, 2, 6, 7, 8, 7, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, - 6, 2, 9, 7, 8, 6, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, - 6, 2, 6, 7, 8, 7, 1, 6, 5, 5, 6, 2, 3, 7, 3, 9, 1, 6, 7, 5,]]; - charts.initCircleChart(circleChart1, 12.34, "cpu"); - charts.initCircleChart(circleChart2, 9.32, "storage"); - charts.initCircleChart(circleChart3, 20, "network"); - charts.initCircleChart(circleChart4, 10, "memory"); - - charts.initLineChart(myChart1, "", "", ["test1"], "cpu"); - charts.appendLineChartData(myChart1, xValue, ["test1"], yValue); - charts.addOptions(myChart1, "grid", 0, {"top": 18}); - charts.addOptions(myChart1, "legend", 0, {"top": "0"}); - - charts.initLineChart(myChart2, "", "", ["test1"], "storage"); - charts.appendLineChartData(myChart2, xValue, ["test1"], yValue); - charts.addOptions(myChart2, "grid", 0, {"top": 18}); - charts.addOptions(myChart2, "legend", 0, {"top": "0"}); - - charts.initLineChart(myChart3, "", "", ["test1"], "network"); - charts.appendLineChartData(myChart3, xValue, ["test1"], yValue); - charts.addOptions(myChart3, "grid", 0, {"top": 18}); - charts.addOptions(myChart3, "legend", 0, {"top": "0"}); - - charts.initLineChart(myChart4, "", "", ["test1"], "memory"); - charts.appendLineChartData(myChart4, xValue, ["test1"], yValue); - charts.addOptions(myChart4, "grid", 0, {"top": 18}); - charts.addOptions(myChart4, "legend", 0, {"top": "0"}); - - charts.initLineChart(myChart5, "", "", ["test1"], "perf"); - charts.appendLineChartData(myChart5, xValue, ["test1"], yValue); - charts.addOptions(myChart5, "grid", 0, {"top": 18}); - charts.addOptions(myChart5, "legend", 0, {"top": "0"}); - - charts.initLineChart(myChart6, "", "", ["test1"], "system"); - charts.appendLineChartData(myChart6, xValue, ["test1"], yValue); - charts.addOptions(myChart6, "grid", 0, {"top": 18}); - charts.addOptions(myChart6, "legend", 0, {"top": "0"}); + this.getAnalysisData(0, 0); }, }); diff --git a/UI2.0/src/js/personal.js b/UI2.0/src/js/personal.js index 80b2587..7a1e06a 100644 --- a/UI2.0/src/js/personal.js +++ b/UI2.0/src/js/personal.js @@ -1,6 +1,6 @@ import { defineComponent } from "vue"; import axios from "./utils/AxiosConfig"; -import base64Encode from './utils/utils' +import {base64Encode} from './utils/utils' export default defineComponent({ name: "PageIndex", diff --git a/UI2.0/src/js/utils/utils.js b/UI2.0/src/js/utils/utils.js index 12d2be6..a1abfe3 100644 --- a/UI2.0/src/js/utils/utils.js +++ b/UI2.0/src/js/utils/utils.js @@ -1,11 +1,28 @@ import CryptoJS from "crypto-js"; -export function getRandomInt(min, max) { +function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); } -export default function base64Encode(pwd) { +function base64Encode(pwd) { return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(pwd)); +} + +function getAvgFromArray(array) { + var total = 0; + var count = 0; + for (var el in array) { + total += parseFloat(array[el]); + count++; + } + total /= count; + return total; +} + +export { + getRandomInt, + base64Encode, + getAvgFromArray } \ No newline at end of file diff --git a/UI2.0/src/pages/Command-record.vue b/UI2.0/src/pages/Command-record.vue index 2ebacde..54a93fc 100644 --- a/UI2.0/src/pages/Command-record.vue +++ b/UI2.0/src/pages/Command-record.vue @@ -27,17 +27,17 @@ border-bottom-left-radius: 4px; margin-left: 32px; " - @click="getRecord('command')" + @click="curPage = 1;getRecord('command')" > 全部 - + diff --git a/UI2.0/src/pages/Online-tuning.vue b/UI2.0/src/pages/Online-tuning.vue index 83960d3..a2d05e1 100644 --- a/UI2.0/src/pages/Online-tuning.vue +++ b/UI2.0/src/pages/Online-tuning.vue @@ -1,15 +1,10 @@