openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js

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