apiroute/apiroute-service/src/main/resources/iui-route/js/statusUtil.js

   1 var statusUtil = {};\r
   2 \r
   3 statusUtil.statisticsPollTime=60000;\r
   4 statusUtil.connectionsPollTime=5000;\r
   5 statusUtil.connectionsXAxisCount=12;\r
   6 statusUtil.statisticsXAxisCount=60;\r
   7 statusUtil.connection=true;\r
   8 \r
   9 statusUtil.initChart= function(){\r
  10         statusUtil.init_statistics_requestChart();\r
  11         statusUtil.init_status_requestChart();\r
  12         statusUtil.init_connectionChart();\r
  13 \r
  14 }\r
  15 \r
  16 statusUtil.getQueryString= function(name) { \r
  17     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); \r
  18     var r = window.location.search.substr(1).match(reg); \r
  19     if (r != null) \r
  20         return unescape(r[2]);\r
  21     return null; \r
  22 } \r
  23 \r
  24 statusUtil.init_statistics_requestChart= function(){\r
  25 \r
  26 \r
  27         var times = [];\r
  28         var datas=[];\r
  29         var latestTime="";\r
  30         $.ajax({\r
  31         "type": 'get',\r
  32         "async": false,\r
  33         "timeout" : 2000, \r
  34         "url":  apiBasePath+"/statistics/request?latestNum=10",\r
  35         "dataType": "json",\r
  36         success: function (resp) { \r
  37    \r
  38          var initDatas = (resp==null)?[]:resp;\r
  39          for(var i=0;i<initDatas.length;i++){\r
  40                 var dataArray=initDatas[i].split("|");\r
  41                 times.push(statusUtil.getLocalTime(dataArray[0]));\r
  42                 datas.push(dataArray[1]);\r
  43          }\r
  44 \r
  45          if(initDatas.length>0){\r
  46                 latestTime=initDatas[initDatas.length-1];\r
  47         }\r
  48 \r
  49                                                                         \r
  50         },\r
  51          error: function(XMLHttpRequest, textStatus, errorThrown) {\r
  52            statusUtil.connection=false;\r
  53                              alert("get Chart Data fails："+textStatus+":"+errorThrown); \r
  54          }\r
  55     });\r
  56 \r
  57 \r
  58         var requestChart = echarts.init(document.getElementById('statisticsLineChartDiv'), 'macarons');\r
  59 \r
  60         var option = {\r
  61 \r
  62              tooltip : {\r
  63                         trigger: 'axis'\r
  64                     },\r
  65                 toolbox: {\r
  66                         feature: {\r
  67                             saveAsImage: {\r
  68                   name:'MSB历史访问次数统计图'\r
  69                 }\r
  70                         }\r
  71                     },\r
  72             legend: {\r
  73                 data:['每分钟处理请求数']\r
  74             },             \r
  75                 xAxis: \r
  76         {\r
  77             type: 'category',\r
  78             boundaryGap: false,\r
  79             data: times,\r
  80             name: '采集点'\r
  81 \r
  82         },\r
  83                 yAxis:\r
  84         {\r
  85             type: 'value',\r
  86             scale: true,\r
  87             name: '请求数',\r
  88             minInterval: 1,\r
  89             min: 0,\r
  90             boundaryGap: [0.1, 0.1]\r
  91         },\r
  92         series: [\r
  93                 {\r
  94                     name:'每分钟处理请求数',\r
  95                     type:'line',\r
  96                     stack: 'status',\r
  97                     data:datas\r
  98                 }               \r
  99         ]\r
 100         };\r
 101 \r
 102         // 使用刚指定的配置项和数据显示图表。\r
 103         requestChart.setOption(option);\r
 104         window.onresize = requestChart.resize;\r
 105  if(statusUtil.connection==true){\r
 106       setInterval(function () {\r
 107 \r
 108       $.ajax({\r
 109         "type": 'get',\r
 110         "async": true,\r
 111         "timeout" : 3000, \r
 112         "url":  apiBasePath+"/statistics/request",\r
 113         "dataType": "json",\r
 114         success: function (resp) { \r
 115    \r
 116          var latestData = (resp==null)?[]:resp;\r
 117          \r
 118          if(latestData.length>0){\r
 119                 var dataArray=latestData[0].split("|");\r
 120                 \r
 121                 var data = option.series[0].data;\r
 122                 \r
 123                 if(latestTime!=dataArray[0]){    \r
 124                           data.push(dataArray[1]);                        \r
 125                                     option.xAxis.data.push(statusUtil.getLocalTime(dataArray[0]));\r
 126                         if(data.length>=statusUtil.statisticsXAxisCount){\r
 127                                   data.shift();                         \r
 128                                   option.xAxis.data.shift();\r
 129                                     }\r
 130 \r
 131            \r
 132            var maxVaule=Math.max.apply(null, data);\r
 133            if(maxVaule<5){\r
 134             option.yAxis.max=5;\r
 135            }\r
 136            else{\r
 137             option.yAxis.max=null;\r
 138            }  \r
 139                                   requestChart.setOption(option);\r
 140 \r
 141           latestTime=dataArray[0];\r
 142                         }\r
 143                                                         \r
 144            }\r
 145        }\r
 146    });\r
 147 \r
 148                    \r
 149   }, statusUtil.statisticsPollTime);  \r
 150  }\r
 151 }\r
 152 \r
 153 var statusLineChart;\r
 154 var statusLineChartOption;\r
 155 statusUtil.init_status_requestChart= function(){\r
 156 \r
 157 statusLineChart = echarts.init(document.getElementById('statusLineChartDiv'), 'macarons');\r
 158 \r
 159 statusLineChartOption = {\r
 160              color:[ "#2ec7c9",\r
 161             "#b6a2de",\r
 162             "#ffb980"],           \r
 163              tooltip : {\r
 164                         trigger: 'axis'\r
 165                     },\r
 166                 toolbox: {\r
 167                         feature: {\r
 168                             saveAsImage: {\r
 169                   name:'MSB正在处理请求数图'\r
 170                 }\r
 171                         }\r
 172                     },\r
 173             legend: {\r
 174                 data:['已转发等待响应','已接收待转发','收到响应待返回']\r
 175             },             \r
 176                 xAxis: \r
 177         {\r
 178             type: 'category',\r
 179             boundaryGap: false,\r
 180             name: '采集点',\r
 181             data: []\r
 182         },\r
 183                 yAxis:\r
 184         {\r
 185             type: 'value',\r
 186             scale: true,\r
 187             name: '请求数',\r
 188             min: 0,\r
 189             minInterval: 1,\r
 190             boundaryGap: [0.1, 0.1]\r
 191         },\r
 192         series: [\r
 193                 {\r
 194                     name:'已转发等待响应',\r
 195                     type:'line',\r
 196                     data:[]\r
 197                 },\r
 198                 {\r
 199                     name:'已接收待转发',\r
 200                     type:'line',\r
 201                     data:[]\r
 202                 },\r
 203                 {\r
 204                     name:'收到响应待返回',\r
 205                     type:'line',\r
 206                     data:[]\r
 207                 }\r
 208         \r
 209         ]\r
 210         };\r
 211 \r
 212         // 使用刚指定的配置项和数据显示图表。\r
 213         statusLineChart.setOption(statusLineChartOption);\r
 214         window.onresize = statusLineChart.resize;\r
 215  if(statusUtil.connection==true){  \r
 216 \r
 217     statusUtil.getStatusLineChart4Data();\r
 218 \r
 219      setInterval(function () {\r
 220       statusUtil.getStatusLineChart4Data();\r
 221         }, statusUtil.connectionsPollTime);  \r
 222   }\r
 223 }\r
 224 \r
 225 statusUtil.getStatusLineChart4Data=function(){\r
 226 \r
 227       $.ajax({\r
 228         "type": 'get',\r
 229         "async": true,\r
 230         "timeout" : 3000, \r
 231         "url":  apiBasePath+"/status/request",\r
 232         "dataType": "json",\r
 233         success: function (resp) { \r
 234    \r
 235          if(resp!=null){\r
 236           var forward_data= statusLineChartOption.series[0].data;\r
 237           var accept_data = statusLineChartOption.series[1].data;\r
 238           var receive_data = statusLineChartOption.series[2].data;\r
 239       \r
 240 \r
 241 \r
 242           if(accept_data.length>=statusUtil.statisticsXAxisCount){\r
 243               accept_data.shift();\r
 244               forward_data.shift();\r
 245               receive_data.shift();\r
 246               statusLineChartOption.xAxis.data.shift();\r
 247           }\r
 248           \r
 249            \r
 250            accept_data.push(resp.accept_preparing_forward);           \r
 251            forward_data.push(resp.forward_waiting_response);\r
 252            receive_data.push(resp.receive_resp_not_return);\r
 253 \r
 254             var allValue=accept_data.concat(forward_data).concat(receive_data);\r
 255            var maxVaule=Math.max.apply(null, allValue);\r
 256            if(maxVaule<5){\r
 257             statusLineChartOption.yAxis.max=5;\r
 258            }\r
 259            else{\r
 260             statusLineChartOption.yAxis.max=null;\r
 261            }\r
 262           \r
 263        \r
 264           statusLineChartOption.xAxis.data.push(statusUtil.getCurrentTime());\r
 265 \r
 266           statusLineChart.setOption(statusLineChartOption);\r
 267          }                                    \r
 268            }\r
 269        });\r
 270 }\r
 271 \r
 272 var connectionChart;\r
 273 var connectionChartOption;\r
 274 \r
 275 statusUtil.init_connectionChart= function(){\r
 276 \r
 277 \r
 278 \r
 279           connectionChart = echarts.init(document.getElementById('connectionBarChartDiv'), 'macarons');\r
 280      \r
 281        \r
 282      connectionChartOption = {\r
 283                       \r
 284             tooltip : {\r
 285                         trigger: 'axis',\r
 286                         axisPointer : {           \r
 287                             type : 'shadow'       \r
 288                         }\r
 289                         },\r
 290                 toolbox: {\r
 291                         feature: {\r
 292                             saveAsImage: {\r
 293                   name:'MSB当前连接数统计图'\r
 294                 }\r
 295                         }\r
 296                     },\r
 297             legend: {\r
 298                 data:['Active','Waiting','Writing','Reading']\r
 299             },             \r
 300                 xAxis: \r
 301         {\r
 302             type: 'category',\r
 303             boundaryGap: true,\r
 304             name: '采集点',\r
 305            // axisLabel:{\r
 306            //    interval:0,\r
 307            //    rotate:45\r
 308            //  },\r
 309             data: []\r
 310         },\r
 311                 yAxis:\r
 312         {\r
 313             type: 'value',\r
 314             scale: true,\r
 315             name: '连接数',\r
 316             min: 0,\r
 317             minInterval: 1,\r
 318             boundaryGap: [0.1, 0.1]\r
 319           \r
 320         },\r
 321         series: [\r
 322         {\r
 323             name:'Active',\r
 324             type:'bar',\r
 325             data:[]\r
 326         },\r
 327         {\r
 328             name:'Waiting',\r
 329             type:'bar',\r
 330             stack: 'connection',\r
 331             data:[]\r
 332         },\r
 333         {\r
 334             name:'Writing',\r
 335             type:'bar',\r
 336             stack: 'connection',\r
 337             data:[]\r
 338         },\r
 339         {\r
 340             name:'Reading',\r
 341             type:'bar',\r
 342             stack: 'connection',\r
 343             data:[]\r
 344         }\r
 345         ]\r
 346         };\r
 347 \r
 348         // 使用刚指定的配置项和数据显示图表。\r
 349         connectionChart.setOption(connectionChartOption);\r
 350         window.onresize = connectionChart.resize;\r
 351         \r
 352       if(statusUtil.connection==true){    \r
 353           statusUtil.getConnectionChart4Data();\r
 354 \r
 355             setInterval(function () {\r
 356             statusUtil.getConnectionChart4Data();\r
 357          }, statusUtil.connectionsPollTime);   \r
 358       }\r
 359 }\r
 360 \r
 361 statusUtil.getConnectionChart4Data=function(){\r
 362 $.ajax({\r
 363         "type": 'get',\r
 364         "async": true,\r
 365         "url":  apiBasePath+"/status/connection",\r
 366         "dataType": "json",\r
 367         success: function (resp) { \r
 368    \r
 369          if(resp!=null){\r
 370             var active_data =  connectionChartOption.series[0].data;\r
 371             var waiting_data = connectionChartOption.series[1].data;\r
 372           var writing_data = connectionChartOption.series[2].data;\r
 373           var reading_data = connectionChartOption.series[3].data;\r
 374 \r
 375 \r
 376           if(active_data.length>=statusUtil.connectionsXAxisCount){\r
 377               active_data.shift();\r
 378               waiting_data.shift();\r
 379               writing_data.shift();\r
 380               reading_data.shift();\r
 381               connectionChartOption.xAxis.data.shift();\r
 382           }\r
 383           \r
 384            active_data.push(resp.connections_active); \r
 385            waiting_data.push(resp.connections_waiting);           \r
 386            writing_data.push(resp.connections_writing);\r
 387            reading_data.push(resp.connections_reading);\r
 388 \r
 389            var allValue=active_data.concat(waiting_data).concat(writing_data).concat(reading_data)\r
 390            var maxVaule=Math.max.apply(null, allValue)\r
 391            if(maxVaule<5){\r
 392             connectionChartOption.yAxis.max=5;\r
 393            }\r
 394            else{\r
 395             connectionChartOption.yAxis.max=null;\r
 396            }\r
 397 \r
 398 \r
 399           connectionChartOption.xAxis.data.push(statusUtil.getCurrentTime());\r
 400 \r
 401           connectionChart.setOption(connectionChartOption);\r
 402                                             \r
 403            }\r
 404          }\r
 405        });\r
 406 \r
 407 }\r
 408 \r
 409 \r
 410 statusUtil.getCurrentTime=function(){\r
 411           var date = new Date();          \r
 412           var axisData = [statusUtil.addZero(date.getHours()),statusUtil.addZero(date.getMinutes()),statusUtil.addZero(date.getSeconds())].join(":");\r
 413           return axisData;\r
 414   }\r
 415 \r
 416 statusUtil.addZero=function(s) {\r
 417         return s < 10 ? '0' + s: s;\r
 418     }\r
 419 \r
 420 \r
 421 statusUtil.getLocalTime=function(nS) {  \r
 422           var date = new Date(parseInt(nS)*1000);    \r
 423           var fullDate= [statusUtil.addZero(date.getFullYear()),statusUtil.addZero(date.getMonth() + 1 ) ,statusUtil.addZero(date.getDate())].join("-");\r
 424               fullDate+=" ";   \r
 425               fullDate += [statusUtil.addZero(date.getHours()),statusUtil.addZero(date.getMinutes()),statusUtil.addZero(date.getSeconds())].join(":");\r
 426           return fullDate;\r
 427 \r
 428 }