cloudstack/ui/scripts/ui-custom/metricsView.js

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you 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.
(function($, cloudStack) {

    cloudStack.uiCustom.metricsView = function(args) {
        return function(ctxArgs) {

            var metricsListView = cloudStack.sections.metrics.listView;
            var metricsLabel = _l('label.metrics');
            var context = {};
            if (ctxArgs && ctxArgs.hasOwnProperty('context')) {
                context = ctxArgs.context;
            }

            if (args.resource == 'zones') {
                metricsLabel = _l('label.zones') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.zones.listView;

            } else if (args.resource == 'clusters') {
                metricsLabel = _l('label.clusters') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.clusters.listView;

            } else if (args.resource == 'hosts') {
                metricsLabel = _l('label.hosts') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.hosts.listView;

                if (context && !context.filterBy) {
                    if (context.hasOwnProperty('clusters') && context.clusters[0]) {
                        context.filterBy = 'clusterid';
                        context.id = context.clusters[0].id;
                    }
                    if (context.hasOwnProperty('instances') && context.instances[0]) {
                        context.filterBy = 'virtualmachineid';
                        context.id = context.instances[0].id;
                    }
                }
            } else if (args.resource == 'storagepool') {
                metricsLabel = _l('label.primary.storage') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.storagepool.listView;

            } else if (args.resource == 'vms') {
                metricsLabel = _l('label.instances') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.instances.listView;
                metricsListView.advSearchFields = cloudStack.sections.instances.listView.advSearchFields;

                if (context && !context.filterBy) {
                    if (context.hasOwnProperty('hosts') && context.hosts[0]) {
                        context.filterBy = 'hostid';
                        context.id = context.hosts[0].id;
                    }
                }
            } else if (args.resource == 'volumes') {
                metricsLabel = _l('label.volumes') + ' ' + metricsLabel;
                metricsListView = cloudStack.sections.metrics.volumes.listView;
                metricsListView.advSearchFields = cloudStack.sections.storage.sections.volumes.listView.advSearchFields;
                metricsListView.groupableColumns = false;

                if (context && !context.filterBy) {
                    if (context.hasOwnProperty('instances') && context.instances[0]) {
                        context.filterBy = 'virtualmachineid';
                        context.id = context.instances[0].id;
                    }
                    if (context.hasOwnProperty('primarystorages') && context.primarystorages[0]) {
                        context.filterBy = 'storageid';
                        context.id = context.primarystorages[0].id;
                    }
                }
            }

            if (context.metricsFilterData) {
                delete context.metricsFilterData;
            }

            if (context.filterBy) {
                context.metricsFilterData = {
                    key: context.filterBy,
                    value: context.id
                };
            }

            // list view refresh button
            metricsListView.actions = {
                refreshMetrics: {
                    label: 'label.refresh',
                    isHeader: true,
                    addRow: true,
                    action: {
                        custom: function (args) {
                            return function() {
                            };
                        }
                    }
                }
            };

            metricsListView.hideSearchBar = false;
            metricsListView.needsRefresh = true;
            metricsListView.noSplit = true;
            metricsListView.horizontalOverflow = true;
            metricsListView.groupableColumns = true;

            if (args.resource != 'vms' && args.resource != 'volumes' && args.resource != 'zones') {
                metricsListView.advSearchFields = {
                    name: {
                        label: 'label.name'
                    },
                    zoneid: {
                        label: 'label.zone',
                        select: function(args) {
                            $.ajax({
                                url: createURL('listZones'),
                                data: {
                                    listAll: true
                                },
                                success: function(json) {
                                    var zones = json.listzonesresponse.zone ? json.listzonesresponse.zone : [];

                                    args.response.success({
                                        data: $.map(zones, function(zone) {
                                            return {
                                                id: zone.id,
                                                description: zone.name
                                            };
                                        })
                                    });
                                }
                            });
                        }
                    }
                };
            }

            var $browser = $('#browser .container');
            return $browser.cloudBrowser('addPanel', {
                  title: metricsLabel,
                  maximizeIfSelected: true,
                  complete: function($newPanel) {
                      $newPanel.listView({
                          $browser: $browser,
                          context: context,
                          listView: metricsListView
                      });
                      // Make metrics tables horizontally scrollable
                      $newPanel.find('.list-view').css({'overflow-x': 'visible'});
                      // Refresh metrics when refresh button is clicked
                      $newPanel.find('.refreshMetrics').click(function() {
                          var sortedTh = $newPanel.find('table thead tr:last th.sorted');
                          var thIndex = sortedTh.index();
                          var thClassName = null;
                          var wasSorted = false;
                          var sortClassName = 'asc';
                          if (sortedTh && sortedTh.hasClass('sorted')) {
                              wasSorted = true;
                              var classes = sortedTh.attr('class').split(/\s+/);
                              thClassName = classes[0];
                              if (classes.indexOf('desc') > -1) {
                                  sortClassName = 'desc';
                              }
                          }
                          $browser.cloudBrowser('removeLastPanel', {});
                          var refreshedPanel = cloudStack.uiCustom.metricsView(args)(ctxArgs);
                          if (wasSorted && thClassName) {
                              refreshedPanel.find('th.' + thClassName).filter(function() {
                                  return $(this).index() == thIndex;
                              }).addClass('sorted').addClass(sortClassName);
                          }
                      });

                      var browseBy = metricsListView.browseBy;
                      if (browseBy) {
                          $newPanel.bind('click', function(event) {
                              event.stopPropagation();
                              var $target = $(event.target);
                              var id = $target.closest('tr').data('list-view-item-id');
                              var jsonObj = $target.closest('tr').data('jsonObj');
                              if (browseBy.filterKey && jsonObj) {
                                  if (jsonObj.hasOwnProperty(browseBy.filterKey)) {
                                      id = jsonObj[browseBy.filterKey];
                                  } else {
                                      return; // return if provided key is missing
                                  }
                              }
                              if (id && ($target.hasClass('first') || $target.parent().hasClass('first')) && ($target.is('td') || $target.parent().is('td'))) {
                                  context.id = id;
                                  context.filterBy = browseBy.filterBy;
                                  ctxArgs.context = context;
                                  cloudStack.uiCustom.metricsView({resource: browseBy.resource})(ctxArgs);
                              }
                          });
                      }
                  }
            });
        };
    };
})(jQuery, cloudStack);