extsys/src/main/webapp/extsys/vim/js/vimChart.js

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