|
1 | 1 | const UNIT_BYTES = [ |
2 | | - "", "K", "M", "G", "T", "E" |
| 2 | + "K", "M", "G", "T", "E" |
3 | 3 | ]; |
4 | 4 | const calc_bits = (v) => { |
5 | 5 | v *= 8 |
@@ -112,10 +112,9 @@ const calc_more_bytes = (...values) => { |
112 | 112 | axios.get("master?url=/openbmclapi/metric/dashboard").then(response => { |
113 | 113 | if (response.status != 200) return |
114 | 114 | data = response.data |
115 | | - console.log(data) |
116 | 115 | document.getElementById("t-clusters-nodes").innerText = data.currentNodes |
117 | 116 | document.getElementById("t-clusters-bandwidth").innerText = data.currentBandwidth.toFixed(2) + " M" |
118 | | - document.getElementById("t-clusters-bytes").innerText = calc_bytes(data.bytes * 1024.0) |
| 117 | + document.getElementById("t-clusters-bytes").innerText = calc_bytes(data.bytes) |
119 | 118 | document.getElementById("t-clusters-req").innerText = (data.hits / 10000).toFixed(2) |
120 | 119 | nodes = [] |
121 | 120 | bytes = [] |
@@ -203,6 +202,100 @@ const calc_more_bytes = (...values) => { |
203 | 202 | ).childWidth("33.33%", "33.33%", "33.33%").valueOf() |
204 | 203 | ] |
205 | 204 | } |
| 205 | + }, |
| 206 | + "dashboard": { |
| 207 | + "connect": () => { |
| 208 | + if (!("dashboard" in core_modules_locals)) { |
| 209 | + core_modules_locals["dashboard"] = { |
| 210 | + "refresh": () => { |
| 211 | + axios.get("/dashboard").then(resp => { |
| 212 | + if (resp.status != 200) return |
| 213 | + data = resp.data |
| 214 | + req = Array.from({ length: 24 }, (_, __) => null) |
| 215 | + hits = Array.from({ length: 24 }, (_, __) => null) |
| 216 | + bandwidth = Array.from({ length: 24 }, (_, __) => null) |
| 217 | + bytes = Array.from({ length: 24 }, (_, __) => null) |
| 218 | + days = data.days[0] |
| 219 | + for (day of data.days) { |
| 220 | + if (days._day < day._day) |
| 221 | + days = day |
| 222 | + } |
| 223 | + for (hourly of data.hourly) { |
| 224 | + const hour = hourly._hour |
| 225 | + req[hour] = (hourly.qps / 10000).toFixed(2) |
| 226 | + hits[hour] = (hourly.hits / 10000).toFixed(2) |
| 227 | + bandwidth[hour] = (hourly.bandwidth * 8 / 1024.0 / 1024.0).toFixed(2) |
| 228 | + bytes[hour] = (hourly.bytes / 1024.0 / 1024.0 / 1024.0).toFixed(2) |
| 229 | + } |
| 230 | + core_modules_locals["dashboard"]["req"] .setOption({title: {text: "每小时请求分布(万)"}, tooltip:{formatter: e => e[0].data == null ? '' : '<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#0fc6c2;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">请求: </span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">'+e[0].data+'万</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div>'},series: [{data: req}]}) |
| 231 | + core_modules_locals["dashboard"]["bytes"] .setOption({title: {text: "每小时流量分布(GiB)"}, tooltip:{formatter: e => e[0].data == null ? '' : '<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#0fc6c2;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">流量: </span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">'+e[0].data+'GiB</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div>'},series: [{data: bytes}]}) |
| 232 | + core_modules_locals["dashboard"]["hit"] .setOption({title: {text: "每小时请求文件数(万)"}, tooltip:{formatter: e => e[0].data == null ? '' : '<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#0fc6c2;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">请求文件: </span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">'+e[0].data+'万</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div>'},series: [{data: hits}]}) |
| 233 | + core_modules_locals["dashboard"]["bandwidth"] .setOption({title: {text: "每小时峰值出网带宽(Mbps)"}, tooltip:{formatter: e => e[0].data == null ? '' : '<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#0fc6c2;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">带宽: </span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">'+e[0].data+'Mbps</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div>'},series: [{data: bandwidth}]}) |
| 234 | + document.getElementById("t-d-req").innerText = (days.qps / 10000).toFixed(2) |
| 235 | + document.getElementById("t-d-bytes").innerText = calc_bytes(days.bytes) |
| 236 | + document.getElementById("t-d-hit").innerText = (days.hit / 10000).toFixed(2) |
| 237 | + document.getElementById("t-d-bandwidth").innerText = (days.bandwidth * 8 / 1024.0 / 1024.0).toFixed(2) + " M" |
| 238 | + }) |
| 239 | + }, |
| 240 | + "bandwidth": echarts.init(document.getElementById("e-d-bandwidth")), |
| 241 | + "bytes": echarts.init(document.getElementById("e-d-bytes")), |
| 242 | + "req": echarts.init(document.getElementById("e-d-req")), |
| 243 | + "hit": echarts.init(document.getElementById("e-d-hit")), |
| 244 | + "load": echarts.init(document.getElementById("e-d-cpu")), |
| 245 | + "options": {tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#0FC6C2"}}},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:!0},xAxis:{type:"category",boundaryGap:!1,data:time_hours},yAxis:{type:"value",axisLabel:{formatter:"{value}"}},series:[{name:"",type:"line",stack:"",areaStyle:{},color:"#0FC6C2",symbol:"circle",symbolSize:4,data:[],smooth:!0,animationEasing:"cubicOut",animationDelay:function(t){return 10*t}}]}, |
| 246 | + } |
| 247 | + core_modules_locals["dashboard"]["bandwidth"].setOption(core_modules_locals["dashboard"]["options"]) |
| 248 | + core_modules_locals["dashboard"]["bytes"] .setOption(core_modules_locals["dashboard"]["options"]) |
| 249 | + core_modules_locals["dashboard"]["req"] .setOption(core_modules_locals["dashboard"]["options"]) |
| 250 | + core_modules_locals["dashboard"]["hit"] .setOption(core_modules_locals["dashboard"]["options"]) |
| 251 | + } |
| 252 | + core_modules_locals["dashboard"]["timer"] = setInterval(core_modules_locals["dashboard"].refresh, 30000) |
| 253 | + core_modules_locals["dashboard"].refresh() |
| 254 | + }, |
| 255 | + "page": () => [ |
| 256 | + ExtendFlex().append( |
| 257 | + ExtendElement("div").append( |
| 258 | + ExtendElement("div").css("panel").append( |
| 259 | + ExtendElement("h4").text("当日出网峰值带宽").valueOf(), |
| 260 | + ExtendElement("h2").append( |
| 261 | + ExtendElement("span").text("0 ").id("t-d-bandwidth").valueOf(), |
| 262 | + ExtendElement("span").text("bps").valueOf() |
| 263 | + ).valueOf(), |
| 264 | + ExtendElement("div").id("e-d-bandwidth").style("height: 216px; width: 100%").valueOf() |
| 265 | + ).valueOf(), |
| 266 | + ExtendElement("div").css("panel").append( |
| 267 | + ExtendElement("h4").text("当日请求文件数").valueOf(), |
| 268 | + ExtendElement("h2").append( |
| 269 | + ExtendElement("span").text("0 ").id("t-d-hit").valueOf(), |
| 270 | + ExtendElement("span").text("万").valueOf() |
| 271 | + ).valueOf(), |
| 272 | + ExtendElement("div").id("e-d-hit").style("height: 216px; width: 100%").valueOf() |
| 273 | + ).valueOf(), |
| 274 | + ), |
| 275 | + ExtendElement("div").append( |
| 276 | + ExtendElement("div").css("panel").append( |
| 277 | + ExtendElement("h4").text("当日总流量").valueOf(), |
| 278 | + ExtendElement("h2").append( |
| 279 | + ExtendElement("span").text("0 ").id("t-d-bytes").valueOf(), |
| 280 | + ExtendElement("span").text("iB").valueOf() |
| 281 | + ).valueOf(), |
| 282 | + ExtendElement("div").id("e-d-bytes").style("height: 216px; width: 100%").valueOf() |
| 283 | + ).valueOf(), |
| 284 | + ExtendElement("div").css("panel").append( |
| 285 | + ExtendElement("h4").text("当日请求数").valueOf(), |
| 286 | + ExtendElement("h2").append( |
| 287 | + ExtendElement("span").text("0 ").id("t-d-req").valueOf(), |
| 288 | + ExtendElement("span").text("万").valueOf() |
| 289 | + ).valueOf(), |
| 290 | + ExtendElement("div").id("e-d-req").style("height: 216px; width: 100%").valueOf() |
| 291 | + ).valueOf(), |
| 292 | + ), |
| 293 | + ExtendElement("div").css("panel").append( |
| 294 | + ExtendElement("h4").text("五分钟负载").valueOf(), |
| 295 | + ExtendElement("div").id("e-d-cpu").style("height: 98%; width: 100%").valueOf() |
| 296 | + ), |
| 297 | + ).childWidth("33.33%", "33.33%", "33.33%").valueOf() |
| 298 | + ] |
206 | 299 | } |
207 | 300 | } |
208 | 301 | const handler = ((root, key, type) => { |
|
0 commit comments