diff --git a/UI2.0/src/js/command-record.js b/UI2.0/src/js/command-record.js index 0e4aeb7776ab06bd08f3ca31a4f606f28436e12c..3c98c38aba439554b79ab47de5222f874bfc53f0 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 35b06bec86132af38136c2e2d506e7700bc974e3..ad824e03e28533c4cdadbe91d895c99a1bf0ddff 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 80b258794efabd212c65526400856fd864d0e7ab..7a1e06ad160b38226c223f4ca8d9d23f08b4b4ed 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 12d2be6b73b93ec3f3615060403aed5b8664d403..a1abfe3671c9c135828161e15b04f533b2c8840c 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 2ebacdeddadb1f235a2876ac1cbbba63b1ac4620..54a93fcd3d5e77217668bff7adb48c9aad3439ab 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 83960d330df00a4d368b8fe2a245aa69d3e61d4b..a2d05e11b7f7fb07b291561b6e7aa11a26daeaad 100644 --- a/UI2.0/src/pages/Online-tuning.vue +++ b/UI2.0/src/pages/Online-tuning.vue @@ -1,15 +1,10 @@