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