performance/src/main/webapp/performance/js/performanceChart.js

   1 /*
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *         http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 // draw the chart by performance datas
  17 function drawPerformanceChart() {
  18     var chartType = "";
  19     var titleText = document.getElementById("tableTitleText").innerHTML;
  20     var subTitleText = "subTitleText";
  21     var chartDataList = [];
  22     var resourceNameList = [];
  23     var timeList = [];
  24
  25     // get table datas
  26     var tableObj = document.getElementById("ict_pm_data");
  27     if (tableObj == null || tableObj.rows.length < 1) {
  28         return;
  29     }
  30
  31     // distinguish between chart types
  32     var ratioType = tableObj.rows[0].cells[5].innerText;
  33     if (ratioType.indexOf("CPU") > -1) {
  34         chartType = "CPU";
  35         subTitleText = "CPU USE RATIO";
  36     } else if (ratioType.indexOf("RAM") > -1) {
  37         chartType = "RAM";
  38         subTitleText = "RAM USE RATIO";
  39     } else if (ratioType.indexOf("VOLUME") > -1) {
  40         chartType = "FILESYSTEM";
  41         subTitleText = "LOGIC VOLUME FILESYSTEM USE RATIO";
  42     } else if (ratioType.indexOf("NIC") > -1) {
  43         chartType = "NIC";
  44         subTitleText = "ERROR PACKET RATIO BY ONE COLLECT-PERIOD (SEND AND RECEIVED)";
  45     } else {
  46         return;
  47     }
  48
  49     // collect datas for chart horizontal axis
  50     for (var i = 1; i < tableObj.rows.length; i++) {
  51         var strTime = tableObj.rows[i].cells[0].innerText;
  52
  53         if (timeList.length == 0) {
  54             // push the first start time into the x-axis
  55             timeList.push(strTime);
  56         } else {
  57             // push the start times into the x-axis and sort them
  58             for (var j = 0; j < timeList.length; j++) {
  59                 if (timeList[j] == strTime) {
  60                     break;
  61                 } else if (timeList[j] > strTime) {
  62                     timeList.splice(j, 0, strTime);
  63                     break;
  64                 } else if (j + 1 == timeList.length && timeList[j] < strTime) {
  65                     timeList.push(strTime);
  66                     break;
  67                 }
  68             }
  69         }
  70     }
  71
  72     // create chart resources
  73     for (var i = 1; i < tableObj.rows.length; i++) {
  74         var strTime = tableObj.rows[i].cells[0].innerText;
  75         var ratioIndex = getListIndex(timeList, strTime);
  76         var strName = "";
  77         var strRatio = "";
  78
  79         if (chartType == "CPU" || chartType == "RAM") {
  80             strName = tableObj.rows[i].cells[4].innerText;
  81             strRatio = tableObj.rows[i].cells[5].innerText;
  82         } else if (chartType == "FILESYSTEM") {
  83             strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[6].innerText + ")";
  84             strRatio = tableObj.rows[i].cells[9].innerText;
  85         } else if (chartType == "NIC") {
  86             strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[5].innerText + ")";
  87             strRatio = parseFloat(tableObj.rows[i].cells[10].innerText) + parseFloat(tableObj.rows[i].cells[11].innerText);
  88         }
  89
  90         if (chartDataList.length == 0) {
  91             // create the first chart resource and push it into the chartlist
  92             insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
  93         } else {
  94             // update the chart resources which exist in chartlist
  95             var existFlg = false;
  96             for (var j = 0; j < chartDataList.length; j++) {
  97                 if (chartDataList[j].name == strName) {
  98                     chartDataList[j].data[ratioIndex] = strRatio;
  99                     existFlg = true;
 100                     break;
 101                 }
 102             }
 103
 104             // create a new chart resource and push it into the chartlist
 105             if (!existFlg) {
 106                 insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
 107             }
 108         }
 109     }
 110
 111     for (var i = 0; i < chartDataList.length; i++) {
 112         // complete length of datalist for each chart resource
 113         if (chartDataList[i].data.length < timeList.length) {
 114             chartDataList[i].data[timeList.length - 1] = "";
 115         }
 116
 117         // create the name list of chart resources
 118         resourceNameList.push(chartDataList[i].name);
 119     }
 120
 121     // initialize the chart
 122     var dom = document.getElementById("chartCanvasDiv");
 123     var myChart = echarts.init(dom);
 124     option = null;
 125
 126     // set the chart by collected chart resources
 127     option = {
 128         title: {
 129             text: titleText,
 130             subtext: subTitleText,
 131             x: 'center'
 132         },
 133         tooltip: {
 134             trigger: 'axis'
 135         },
 136         legend: {
 137             data:resourceNameList,
 138             top: '10%'
 139         },
 140         grid: {
 141             top: '20%'
 142         },
 143         toolbox: {
 144             show: true,
 145             feature: {
 146                 magicType: {type: ['line', 'bar']},
 147                 restore: {},
 148                 saveAsImage: {}
 149             }
 150         },
 151         xAxis: {
 152             type: 'category',
 153             boundaryGap: false,
 154             data : timeList.map(function (str) {
 155                     return str.replace(' ', '\n')
 156                 })
 157         },
 158         yAxis: {
 159             name : 'percentage(%)',
 160             type: 'value'
 161         },
 162         series: chartDataList
 163     };
 164
 165     // draw the performance chart of all resources
 166     if (option && typeof option === "object") {
 167         myChart.setOption(option, true);
 168     };
 169 };
 170
 171 // define the struct of chart resource
 172 function chartData() {
 173     this.name = "";
 174     this.type = "line";
 175     this.smooth = true;
 176     this.data = [];
 177 };
 178
 179 // create a new chart resource and push it into the chartlist
 180 function insertChartDataList(chartDataList, name, data, dataIndex) {
 181     var cd = new chartData();
 182     cd.name = name;
 183     cd.data[dataIndex] = data;
 184     chartDataList.push(cd);
 185 };
 186
 187 // return the index of the specified element in the list
 188 function getListIndex(list, data) {
 189     var dataIndex = 0;
 190     for (var i = 0; i < list.length; i++) {
 191         if (list[i] == data) {
 192             return i;
 193         }
 194     }
 195     return dataIndex;
 196 };