openo-portal/portal-extsys/src/main/webapp/extsys/vim/js/vimChart.js

   1 /*\r
   2  * Copyright 2016-2017 ZTE Corporation.\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 var vimChart = {};\r
  17 \r
  18 \r
  19 var labelTop = {\r
  20     normal: {\r
  21         label: {\r
  22             show: true,\r
  23             position: 'outer',\r
  24             formatter: function (params) {\r
  25                 var total = params.series.data[1].value + params.series.data[0].value;\r
  26                 var util = params.series.data[0].util;                \r
  27                 return $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_used') + params.value + util + "\n" +\r
  28                     $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_total') + total + util;\r
  29             },\r
  30             textStyle: {\r
  31                 baseline: 'bottom',\r
  32                 fontWeight: 'normal'\r
  33 \r
  34             }\r
  35         },\r
  36         labelLine: {\r
  37             show: true\r
  38         }\r
  39     }\r
  40 };\r
  41 \r
  42 \r
  43 var labelFromatter = {\r
  44     normal: {\r
  45         label: {\r
  46             formatter: function (params) {\r
  47                 return params.series.data[0].name + "\n" + (100 - params.percent).toFixed(0) + '%'\r
  48             },\r
  49             textStyle: {\r
  50                 baseline: 'center',\r
  51                 color: "#000",\r
  52                 fontWeight: 'bold'\r
  53 \r
  54 \r
  55             }\r
  56         }\r
  57     }\r
  58 }\r
  59 var labelBottom = {\r
  60     normal: {\r
  61         color: '#ccc',\r
  62         label: {\r
  63             show: true,\r
  64             position: 'center'\r
  65         },\r
  66         labelLine: {\r
  67             show: false\r
  68         }\r
  69     },\r
  70     emphasis: {\r
  71         color: 'rgba(0,0,0,0)'\r
  72     }\r
  73 };\r
  74 \r
  75 var radius = [40, 55];\r
  76 \r
  77 var vimPieChart;\r
  78 \r
  79 vimChart.vimPieChartInit = function () {\r
  80     vimPieChart = echarts.init(document.getElementById('vimPieChartDiv'));\r
  81     vimPieChart.showLoading({\r
  82         text: "Loading",\r
  83         effect: "whirling",\r
  84         textStyle: {\r
  85             fontSize: 20\r
  86         }\r
  87     });\r
  88 \r
  89 }\r
  90 \r
  91 vimChart.vimPieChart = function (data) {\r
  92 \r
  93     var option = {\r
  94         animation: true,\r
  95         legend: {\r
  96             x: 'left',\r
  97             y: "top",\r
  98             data: [\r
  99                 $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'),\r
 100                 $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'),\r
 101                 $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk')\r
 102             ],\r
 103             orient: 'vertical'\r
 104         },\r
 105         color: ["#578ebe", "#44b6ae", "#DABA36"],\r
 106         title: {\r
 107             text: '',\r
 108             subtext: '',\r
 109             x: 'center'\r
 110         },\r
 111         toolbox: {\r
 112             show: true,\r
 113 \r
 114             feature: {\r
 115                 saveAsImage: {\r
 116                     show: true,\r
 117                     title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'),\r
 118                     type: 'png',\r
 119                     lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')]\r
 120                 }\r
 121             }\r
 122         },\r
 123         series: [\r
 124             {\r
 125                 type: 'pie',\r
 126                 center: ['15%', '55%'],\r
 127                 radius: radius,\r
 128                 itemStyle: labelFromatter,\r
 129                 data: [\r
 130                     {\r
 131                         name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'),\r
 132                         value: data.usage.cpu,\r
 133                         itemStyle: labelTop,\r
 134                         util: ''\r
 135                     },\r
 136                     {name: 'other', value: data.resource.cpu - data.usage.cpu, itemStyle: labelBottom}\r
 137 \r
 138                 ]\r
 139             },\r
 140             {\r
 141                 type: 'pie',\r
 142                 center: ['40%', '55%'],\r
 143                 radius: radius,\r
 144                 itemStyle: labelFromatter,\r
 145                 data: [\r
 146                     {\r
 147                         name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'),\r
 148                         value: data.usage.memoryMb,\r
 149                         itemStyle: labelTop,\r
 150                         util: 'MB'\r
 151                     },\r
 152                     {name: 'other', value: data.resource.memoryMb - data.usage.memoryMb, itemStyle: labelBottom}\r
 153 \r
 154                 ]\r
 155             },\r
 156             {\r
 157                 type: 'pie',\r
 158                 center: ['65%', '55%'],\r
 159                 radius: radius,\r
 160                 itemStyle: labelFromatter,\r
 161                 data: [\r
 162                     {\r
 163                         name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk'),\r
 164                         value: data.usage.diskGb,\r
 165                         itemStyle: labelTop,\r
 166                         util: 'GB'\r
 167                     },\r
 168                     {name: 'other', value: data.resource.diskGb - data.usage.diskGb, itemStyle: labelBottom}\r
 169 \r
 170                 ]\r
 171             }\r
 172 \r
 173         ]\r
 174     };\r
 175 \r
 176 \r
 177      \r
 178     vimPieChart.hideLoading();\r
 179     vimPieChart.setOption(option);\r
 180     window.onresize = vimPieChart.resize;\r
 181 \r
 182 \r
 183 }\r
 184 \r
 185 vimChart.getPieCenter = function (n) {\r
 186     var center;\r
 187     switch (n) {\r
 188         case 1:\r
 189             center = ['15%', '30%'];\r
 190             break;\r
 191         case 2:\r
 192             center = ['40%', '30%'];\r
 193             break;\r
 194         case 3:\r
 195             center = ['65%', '30%'];\r
 196             break;\r
 197         case 4:\r
 198             center = ['15%', '80%'];\r
 199             break;\r
 200         case 5:\r
 201             center = ['40%', '80%'];\r
 202             break;\r
 203         case 6:\r
 204             center = ['65%', '80%'];\r
 205             break;\r
 206         case 7:\r
 207             center = ['90%', '80%'];\r
 208             break;\r
 209 \r
 210     }\r
 211     return center;\r
 212 }\r
 213 \r
 214 \r
 215 var tenantPieChart;\r
 216 vimChart.tenantPieChartInit = function () {\r
 217     tenantPieChart = echarts.init(document.getElementById('tenantPieChartDiv'));\r
 218 \r
 219     tenantPieChart.showLoading({\r
 220         text: "Loading",\r
 221         effect: "whirling",\r
 222         textStyle: {\r
 223             fontSize: 20\r
 224         }\r
 225     });\r
 226 }\r
 227 vimChart.tenantPieChart = function (data) {\r
 228 \r
 229     var legend_data = new Array();\r
 230     var series = new Array();\r
 231     var n = 0;\r
 232 \r
 233     if (data.quota.instances != -1) {\r
 234         n++;\r
 235 \r
 236         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances'));\r
 237         var instances_series = {\r
 238             type: 'pie',\r
 239             center: vimChart.getPieCenter(n),\r
 240             radius: radius,\r
 241             itemStyle: labelFromatter,\r
 242             data: [\r
 243                 {\r
 244                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances'),\r
 245                     value: data.usage.instances,\r
 246                     itemStyle: labelTop,\r
 247                     util: ''\r
 248                 },\r
 249                 {name: 'other', value: data.quota.instances - data.usage.instances, itemStyle: labelBottom}\r
 250 \r
 251             ]\r
 252         };\r
 253         series.push(instances_series);\r
 254 \r
 255     }\r
 256     if (data.quota.cpu != -1) {\r
 257         n++;\r
 258         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu'));\r
 259         var cpu_series = {\r
 260             type: 'pie',\r
 261             center: vimChart.getPieCenter(n),\r
 262             radius: radius,\r
 263             itemStyle: labelFromatter,\r
 264             data: [\r
 265                 {\r
 266                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu'),\r
 267                     value: data.usage.cpu,\r
 268                     itemStyle: labelTop,\r
 269                     util: ''\r
 270                 },\r
 271                 {name: 'other', value: data.quota.cpu - data.usage.cpu, itemStyle: labelBottom}\r
 272 \r
 273             ]\r
 274         };\r
 275         series.push(cpu_series);\r
 276     }\r
 277     if (data.quota.memoryMb != -1) {\r
 278         n++;\r
 279         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb'));\r
 280         var memoryMb_series = {\r
 281             type: 'pie',\r
 282             center: vimChart.getPieCenter(n),\r
 283             radius: radius,\r
 284             itemStyle: labelFromatter,\r
 285             data: [\r
 286                 {\r
 287                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb'),\r
 288                     value: data.usage.memoryMb,\r
 289                     itemStyle: labelTop,\r
 290                     util: 'MB'\r
 291                 },\r
 292                 {name: 'other', value: data.quota.memoryMb - data.usage.memoryMb, itemStyle: labelBottom}\r
 293 \r
 294             ]\r
 295         };\r
 296         series.push(memoryMb_series);\r
 297     }\r
 298     if (data.quota.floatingIps != -1) {\r
 299         n++;\r
 300         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps'));\r
 301         var floatingIps_series = {\r
 302             type: 'pie',\r
 303             center: vimChart.getPieCenter(n),\r
 304             radius: radius,\r
 305             itemStyle: labelFromatter,\r
 306             data: [\r
 307                 {\r
 308                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps'),\r
 309                     value: data.usage.floatingIps,\r
 310                     itemStyle: labelTop,\r
 311                     util: ''\r
 312                 },\r
 313                 {name: 'other', value: data.quota.floatingIps - data.usage.floatingIps, itemStyle: labelBottom}\r
 314 \r
 315             ]\r
 316         };\r
 317         series.push(floatingIps_series);\r
 318     }\r
 319     if (data.quota.securityGroups != -1) {\r
 320         n++;\r
 321         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups'));\r
 322         var securityGroups_series = {\r
 323             type: 'pie',\r
 324             center: vimChart.getPieCenter(n),\r
 325             radius: radius,\r
 326             itemStyle: labelFromatter,\r
 327             data: [\r
 328                 {\r
 329                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups'),\r
 330                     value: data.usage.securityGroups,\r
 331                     itemStyle: labelTop,\r
 332                     util: ''\r
 333                 },\r
 334                 {name: 'other', value: data.quota.securityGroups - data.usage.securityGroups, itemStyle: labelBottom}\r
 335 \r
 336             ]\r
 337         };\r
 338         series.push(securityGroups_series);\r
 339     }\r
 340     if (data.quota.volumes != -1) {\r
 341         n++;\r
 342         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes'));\r
 343         var volumes_series = {\r
 344             type: 'pie',\r
 345             center: vimChart.getPieCenter(n),\r
 346             radius: radius,\r
 347             itemStyle: labelFromatter,\r
 348             data: [\r
 349                 {\r
 350                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes'),\r
 351                     value: data.usage.volumes,\r
 352                     itemStyle: labelTop,\r
 353                     util: ''\r
 354                 },\r
 355                 {name: 'other', value: data.quota.volumes - data.usage.volumes, itemStyle: labelBottom}\r
 356 \r
 357             ]\r
 358         };\r
 359         series.push(volumes_series);\r
 360     }\r
 361     if (data.quota.volumeStorage != -1) {\r
 362         n++;\r
 363         legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage'));\r
 364         var volumeStorage_series = {\r
 365             type: 'pie',\r
 366             center: vimChart.getPieCenter(n),\r
 367             radius: radius,\r
 368             itemStyle: labelFromatter,\r
 369             data: [\r
 370                 {\r
 371                     name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage'),\r
 372                     value: data.usage.volumeStorage,\r
 373                     itemStyle: labelTop,\r
 374                     util: 'GB'\r
 375                 },\r
 376                 {name: 'other', value: data.quota.volumeStorage - data.usage.volumeStorage, itemStyle: labelBottom}\r
 377 \r
 378             ]\r
 379         };\r
 380         series.push(volumeStorage_series);\r
 381     }\r
 382 \r
 383 \r
 384     var option = {\r
 385         animation: true,\r
 386         legend: {\r
 387             x: 'left',\r
 388             y: "top",\r
 389             data: legend_data,\r
 390             orient: 'vertical'\r
 391         },\r
 392         color: ["#578ebe", "#44b6ae", "#DABA36", "#F79695", "#9699e0", "#57b5e3", "#48c79c"],\r
 393         title: {\r
 394             text: '',\r
 395             subtext: '',\r
 396             x: 'center'\r
 397         },\r
 398         toolbox: {\r
 399             show: true,\r
 400             feature: {\r
 401                 saveAsImage: {\r
 402                     show: true,\r
 403                     title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'),\r
 404                     type: 'png',\r
 405                     lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')]\r
 406                 }\r
 407             }\r
 408         },\r
 409         series: series\r
 410     };\r
 411 \r
 412 \r
 413   \r
 414     tenantPieChart.hideLoading();\r
 415     tenantPieChart.setOption(option);\r
 416     window.onresize = tenantPieChart.resize;\r
 417 \r
 418 \r
 419 }\r
 420 \r
 421 vimChart.growl = function (message, type) {\r
 422     $.growl({\r
 423         icon: "fa fa-envelope-o fa-lg",\r
 424         title: "&nbsp;&nbsp;" + $.i18n.prop('com_zte_ums_eco_roc_vim_title_notice'),\r
 425         message: message + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"\r
 426     }, {\r
 427         type: type,\r
 428         delay: 0\r
 429     });\r
 430 }