cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bhais...@apache.org
Subject [1/7] git commit: updated refs/heads/4.5 to 2f250e2
Date Fri, 20 Nov 2015 06:17:40 GMT
Repository: cloudstack
Updated Branches:
  refs/heads/4.5 efe93d748 -> 2f250e269


http://git-wip-us.apache.org/repos/asf/cloudstack/blob/d34da5aa/ui/scripts/ui-custom/metricsView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/metricsView.js b/ui/scripts/ui-custom/metricsView.js
new file mode 100644
index 0000000..ef5dbba
--- /dev/null
+++ b/ui/scripts/ui-custom/metricsView.js
@@ -0,0 +1,140 @@
+// 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() {
+            var metricsListView = cloudStack.sections.metrics.listView;
+            var metricsLabel = _l('label.metrics');
+
+            if (args.resource == 'zones') {
+                metricsListView = cloudStack.sections.metrics.zones.listView;
+                metricsLabel = _l('label.zones') + ' ' + metricsLabel;
+            } else if (args.resource == 'clusters') {
+                metricsListView = cloudStack.sections.metrics.clusters.listView;
+                metricsLabel = _l('label.clusters') + ' ' + metricsLabel;
+            } else if (args.resource == 'hosts') {
+                metricsListView = cloudStack.sections.metrics.hosts.listView;
+                metricsLabel = _l('label.hosts') + ' ' + metricsLabel;
+            } else if (args.resource == 'storagepool') {
+                metricsListView = cloudStack.sections.metrics.storagepool.listView;
+                metricsLabel = _l('label.primary.storage') + ' ' + metricsLabel;
+            } else if (args.resource == 'vms') {
+                metricsListView = cloudStack.sections.metrics.instances.listView;
+                metricsLabel = _l('label.instances') + ' ' + metricsLabel;
+            } else if (args.resource == 'volumes') {
+                metricsListView = cloudStack.sections.metrics.volumes.listView;
+                metricsLabel = _l('label.volumes') + ' ' + metricsLabel;
+            }
+
+            // list view refresh button
+            metricsListView.actions = {
+                refreshMetrics: {
+                    label: 'label.refresh',
+                    isHeader: true,
+                    addRow: true,
+                    action: {
+                        custom: function (args) {
+                            return function() {
+                            };
+                        }
+                    }
+                }
+            };
+
+            metricsListView.hideSearchBar = true;
+            metricsListView.needsRefresh = true;
+            metricsListView.noSplit = true;
+            metricsListView.horizontalOverflow = true;
+            metricsListView.groupableColumns = true;
+
+            if (args.resource == 'volumes') {
+                metricsListView.groupableColumns = false;
+            }
+
+            var metricsContext = cloudStack.context;
+            if (metricsContext.metricsFilterData) {
+                delete metricsContext.metricsFilterData;
+            }
+            if (args.filterBy) {
+                metricsContext.metricsFilterData = {
+                    key: args.filterBy,
+                    value: args.id
+                };
+            }
+
+            var $browser = $('#browser .container');
+            return $browser.cloudBrowser('addPanel', {
+                  title: metricsLabel,
+                  maximizeIfSelected: true,
+                  complete: function($newPanel) {
+                      $newPanel.listView({
+                          $browser: $browser,
+                          context: metricsContext,
+                          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)();
+                          if (wasSorted && thClassName) {
+                              refreshedPanel.find('th.' + thClassName).filter(function()
{
+                                  return $(this).index() == thIndex;
+                              }).addClass('sorted').addClass(sortClassName);
+                          }
+                      });
+
+                      var filterMetricView = metricsListView.browseBy;
+                      if (filterMetricView) {
+                          $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 (filterMetricView.filterKey && jsonObj) {
+                                  if (jsonObj.hasOwnProperty(filterMetricView.filterKey))
{
+                                  id = jsonObj[filterMetricView.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'))) {
+                                  filterMetricView.id = id;
+                                  cloudStack.uiCustom.metricsView(filterMetricView)();
+                              }
+                          });
+                      }
+                  }
+            });
+        };
+    };
+})(jQuery, cloudStack);

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/d34da5aa/ui/scripts/ui/widgets/cloudBrowser.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js
index 007025b..b7a5c38 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -321,6 +321,14 @@
             return $panel;
         },
 
+        removeLastPanel: function(args) {
+            $('div.panel:last').stop(); // Prevent destroyed panels from animating
+            this.element.find('div.panel:last').remove();
+            this.element.find('div.panel:last').removeClass('reduced');
+            $('#breadcrumbs').find('ul li:last').remove();
+            $('#breadcrumbs').find('ul div.end').remove();
+        },
+
         /**
          * Clear all panels
          */

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/d34da5aa/ui/scripts/ui/widgets/dataTable.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js
index 4c02531..22ddda6 100644
--- a/ui/scripts/ui/widgets/dataTable.js
+++ b/ui/scripts/ui/widgets/dataTable.js
@@ -141,49 +141,95 @@
          * @param columnIndex Index of column (starting at 0) to sort by
          */
         var sortTable = function(columnIndex) {
-            return false;
             var direction = 'asc';
 
-            if ($table.find('thead th').hasClass('sorted ' + direction)) {
+            if ($table.find('thead tr:last th').hasClass('sorted ' + direction)) {
                 direction = 'desc';
             }
 
-            $table.find('thead th').removeClass('sorted desc asc');
-            $($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
+            $table.find('thead tr:last th').removeClass('sorted desc asc');
+            $($table.find('thead tr:last th')[columnIndex]).addClass('sorted').addClass(direction);
 
             var $elems = $table.find('tbody td').filter(function() {
                 return $(this).index() == columnIndex;
             });
 
+            if ($elems.length < 2) {
+                return;
+            }
+
+            var stringComparator = function(a,b) {
+                return a.html().localeCompare(b.html());
+            };
+            var numericComparator = function(a,b) {
+                return parseFloat(a.children().html()) < parseFloat(b.children().html())
? 1 : -1;
+            };
+            var stateComparator = function(a,b) {
+                return a.attr('title').localeCompare(b.attr('title'));
+            };
+            var isNumeric = function(obj) {
+                return !$.isArray(obj) && !isNaN(parseFloat(obj)) && isFinite(parseFloat(obj));
+            }
+
+            var comparator = stringComparator;
+            var hasAllRowsSameValue = true;
+            var firstElem = $($elems[0]).html();
             var sortData = [];
+            var numericDataCount = 0;
             $elems.each(function() {
-                sortData.push($(this).html());
-                sortData.sort();
-
-                if (direction == 'asc') {
-                    sortData.reverse();
+                var text = $(this).html();
+                if (hasAllRowsSameValue) {
+                    if (firstElem !== text) {
+                        hasAllRowsSameValue = false;
+                    }
+                }
+                if (isNumeric(text) || !text) {
+                    numericDataCount++;
                 }
+                sortData.push($(this));
             });
 
+            if ($($elems[0]).hasClass('state')) {
+                comparator = stateComparator;
+            } else {
+                if (hasAllRowsSameValue) {
+                    return;
+                }
+                if (columnIndex != 0 && numericDataCount > ($elems.length / 4))
{
+                    comparator = numericComparator;
+                }
+            }
+
+            sortData.sort(comparator);
+
+            if (direction == 'asc') {
+                sortData.reverse();
+            }
+
+            var elements = [];
             $(sortData).each(function() {
-                var sortKey = this;
-                var $targetCell = $elems.filter(function() {
-                    return $(this).html() == sortKey;
-                });
-                var $targetContainer = $targetCell.parent();
+                elements.push($(this).parent().clone(true));
+            });
 
-                $targetContainer.remove().appendTo($table.find('tbody'));
+            var $tbody = $table.find('tbody');
+            $tbody.empty();
+            $(elements).each(function() {
+                $(this).appendTo($tbody);
             });
 
             computeEvenOddRows();
         };
 
         var resizeHeaders = function() {
-            var $thead = $table.closest('div.data-table').find('thead');
+            var $thead = $table.hasClass('no-split') ? $table.find('thead') : $table.closest('div.data-table').find('thead');
             var $tbody = $table.find('tbody');
             var $ths = $thead.find('th');
             var $tds = $tbody.find('tr:first td');
 
+            if ($table.hasClass('no-split')) {
+                $tbody.width($thead.width());
+            }
+
             if ($ths.size() > $tds.size()) {
                 $ths.width(
                     $table.width() / $ths.size()
@@ -194,6 +240,10 @@
             $ths.each(function() {
                 var $th = $(this);
 
+                if ($th.hasClass('collapsible-column')) {
+                    return true;
+                }
+
                 var $td = $tds.filter(function() {
                     return $(this).index() == $th.index();
                 });
@@ -238,9 +288,12 @@
                 $table.find('tbody').closest('table').addClass('body');
             }
 
-            $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
-            $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout',
resizeDragEvent);
-            $table.find('th:not(:has(input))').bind('click', function(event) {
+            if (!$table.hasClass('horizontal-overflow')) {
+                $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
+                $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout',
resizeDragEvent);
+            }
+
+            $table.find('thead tr:last th:not(:has(input)):not(.collapsible-column):not(.quick-view)').unbind('click').bind('click',
function(event) {
                 if ($(this).hasClass('resizable')) {
                     return false;
                 }

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/d34da5aa/ui/scripts/ui/widgets/listView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 07b60d9..9b83940 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -765,10 +765,12 @@
     var createHeader = function(preFilter, fields, $table, actions, options) {
         if (!options) options = {};
 
-        var $thead = $('<thead>').prependTo($table).append($('<tr>'));
+        var $tr = $('<tr>');
+        var $thead = $('<thead>').prependTo($table).append($tr);
         var reorder = options.reorder;
         var detailView = options.detailView;
         var multiSelect = options.multiSelect;
+        var groupableColumns = options.groupableColumns;
         var viewArgs = $table.closest('.list-view').data('view-args');
         var uiCustom = viewArgs.uiCustom;
         var hiddenFields = [];
@@ -776,8 +778,110 @@
         if (preFilter != null)
             hiddenFields = preFilter();
 
+        var addColumnToTr = function($tr, key, colspan, label, needsCollapsibleColumn) {
+            var trText = _l(label);
+            var $th = $('<th>').addClass(key).attr('colspan', colspan).appendTo($tr);
+            if ($th.index()) $th.addClass('reduced-hide');
+            $th.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3'});
+            if (needsCollapsibleColumn) {
+                var karetLeft = $('<span>').css({'margin-right': '10px'});
+                karetLeft.attr('title', trText);
+                karetLeft.appendTo($th);
+                $('<span>').html('&laquo').css({'font-size': '15px', 'float': 'right'}).appendTo(karetLeft);
+                $('<span>').html(trText).appendTo(karetLeft);
+
+                $th.click(function(event) {
+                    event.stopPropagation();
+                    var $th = $(this);
+                    var startIndex = 0;
+                    $th.prevAll('th').each(function() {
+                        startIndex += parseInt($(this).attr('colspan'));
+                    });
+                    var endIndex = startIndex + parseInt($th.attr('colspan'));
+                    // Hide Column group
+                    $th.hide();
+                    $th.closest('table').find('tbody td').filter(function() {
+                        return $(this).index() >= startIndex && $(this).index()
< endIndex;
+                    }).hide();
+                    $th.closest('table').find('thead tr:last th').filter(function() {
+                        return $(this).index() >= startIndex && $(this).index()
< endIndex;
+                    }).hide();
+                    // Show collapsible column with blank cells
+                    $th.next('th').show();
+                    $th.closest('table').find('tbody td').filter(function() {
+                        return $(this).index() == endIndex;
+                    }).show();
+                    $th.closest('table').find('thead tr:last th').filter(function() {
+                        return $(this).index() == endIndex;
+                    }).show();
+                    // Refresh list view
+                    $tr.closest('.list-view').find('.no-split').dataTable('refresh');
+                });
+
+                var karetRight = addColumnToTr($tr, 'collapsible-column', 1, '');
+                $('<span>').html(trText.substring(0,3)).appendTo(karetRight);
+                $('<span>').css({'font-size': '15px'}).html(' &raquo').appendTo(karetRight);
+                karetRight.attr('title', trText);
+                karetRight.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px
solid #C6C3C3', 'min-width': '10px', 'width': '10px', 'max-width': '45px', 'padding': '2px'});
+                karetRight.hide();
+                karetRight.click(function(event) {
+                    event.stopPropagation();
+                    var prevTh = $(this).prev('th');
+                    var startIndex = 0;
+                    prevTh.prevAll('th').each(function() {
+                        startIndex += parseInt($(this).attr('colspan'));
+                    });
+                    var endIndex = startIndex + parseInt(prevTh.attr('colspan'));
+
+                    prevTh.show();
+                    prevTh.closest('table').find('tbody td').filter(function() {
+                        return $(this).index() >= startIndex && $(this).index()
< endIndex;
+                    }).show();
+                    prevTh.closest('table').find('thead tr:last th').filter(function() {
+                        return $(this).index() >= startIndex && $(this).index()
< endIndex;
+                    }).show();
+
+                    prevTh.next('th').hide();
+                    prevTh.closest('table').find('tbody td').filter(function() {
+                        return $(this).index() == endIndex;
+                    }).hide();
+                    prevTh.closest('table').find('thead tr:last th').filter(function() {
+                        return $(this).index() == endIndex;
+                    }).hide();
+
+                    $tr.closest('.list-view').find('.no-split').dataTable('refresh');
+                });
+            } else {
+                $th.html(trText);
+            }
+            return $th;
+        };
+
+        if (groupableColumns) {
+            $tr.addClass('groupable-header-columns').addClass('groupable-header');
+            $.each(fields, function(key) {
+                var field = this;
+                if (field.columns) {
+                    var colspan = Object.keys(field.columns).length;
+                    addColumnToTr($tr, key, colspan, field.label, true);
+                } else {
+                    var label = '';
+                    if (key == 'name') {
+                        label = 'label.resources';
+                    }
+                    addColumnToTr($tr, key, 1, label);
+                }
+                return true;
+            });
+            if (detailView && !$.isFunction(detailView) && !detailView.noCompact
&& !uiCustom) {
+                addColumnToTr($tr, 'quick-view', 1, '');
+            }
+            $tr = $('<tr>').appendTo($thead);
+            $tr.addClass('groupable-header');
+        }
+
         if (multiSelect) {
-            var $th = $('<th>').addClass('multiselect').appendTo($thead.find('tr'));
+            var $th = $('<th>').addClass('multiselect').appendTo($tr);
             var content = $('<input>')
                 .attr('type', 'checkbox')
                 .addClass('multiSelectMasterCheckbox')
@@ -794,18 +898,24 @@
             if ($.inArray(key, hiddenFields) != -1)
                 return true;
             var field = this;
-            var $th = $('<th>').addClass(key).appendTo($thead.find('tr'));
-
-            if ($th.index()) $th.addClass('reduced-hide');
-
-            $th.html(_l(field.label));
-
+            if (field.columns) {
+                $.each(field.columns, function(idx) {
+                    var subfield = this;
+                    addColumnToTr($tr, key, 1, subfield.label);
+                    return true;
+                });
+                var blankCell = addColumnToTr($tr, 'collapsible-column', 1, '');
+                blankCell.css({'min-width': '10px', 'width': '10px'});
+                blankCell.hide();
+            } else {
+                addColumnToTr($tr, key, 1, field.label);
+            }
             return true;
         });
 
         // Re-order row buttons
         if (reorder) {
-            $thead.find('tr').append(
+            $tr.append(
                 $('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide')
             );
         }
@@ -826,7 +936,7 @@
         );
 
         if (actions && !options.noActionCol && renderActionCol(actions) &&
actionsArray.length != headerActionsArray.length) {
-            $thead.find('tr').append(
+            $tr.append(
                 $('<th></th>')
                 .html(_l('label.actions'))
                 .addClass('actions reduced-hide')
@@ -835,7 +945,7 @@
 
         // Quick view
         if (detailView && !$.isFunction(detailView) && !detailView.noCompact
&& !uiCustom) {
-            $thead.find('tr').append(
+            $tr.append(
                 $('<th></th>')
                 .html(_l('label.quickview'))
                 .addClass('quick-view reduced-hide')
@@ -1033,6 +1143,7 @@
         var listViewArgs = $listView.data('view-args');
         var uiCustom = listViewArgs.uiCustom;
         var subselect = uiCustom ? listViewArgs.listView.subselect : null;
+        var hasCollapsibleColumn = false;
 
         if (!(data && data.length)) {
             $listView.data('end-of-table', true);
@@ -1088,8 +1199,25 @@
                 );
             }
 
-            // Add field data
+            var reducedFields = {};
+            var idx = 0;
             $.each(fields, function(key) {
+                var field = this;
+                if (field.columns) {
+                    $.each(field.columns, function(innerKey) {
+                        reducedFields[innerKey] = this;
+                    });
+                    reducedFields['blank-cell-' + idx] = {blankCell: true};
+                    idx += 1;
+                    hasCollapsibleColumn = true;
+                } else {
+                    reducedFields[key] = this;
+                }
+                return true;
+            });
+
+            // Add field data
+            $.each(reducedFields, function(key) {
                 if ($.inArray(key, hiddenFields) != -1)
                     return true;
                 var field = this;
@@ -1103,6 +1231,11 @@
                     $td.addClass('truncated');
                 }
 
+                if (field.blankCell) {
+                    $td.css({'min-width': '10px', 'width': '10px'});
+                    $td.hide();
+                }
+
                 if (field.indicator) {
                     $td.addClass('state').addClass(field.indicator[content]);
 
@@ -1110,6 +1243,19 @@
                     //$tr.find('td:first').addClass('item-state-' + field.indicator[content]);
                 }
 
+                if (field.thresholdcolor && field.thresholds) {
+                    if ((field.thresholds.disable in dataItem) && (field.thresholds.notification
in dataItem)) {
+                        var disableThreshold = parseFloat(dataItem[field.thresholds.disable]);
+                        var notificationThreshold = parseFloat(dataItem[field.thresholds.notification]);
+                        var value = parseFloat(content);
+                        if (value >= disableThreshold) {
+                            $td.addClass('alert-disable-threshold');
+                        } else if (value >= notificationThreshold) {
+                            $td.addClass('alert-notification-threshold');
+                        }
+                    }
+                }
+
                 if (field.id == true) id = field.id;
                 if ($td.index()) $td.addClass('reduced-hide');
                 if (field.action) {
@@ -1136,9 +1282,12 @@
 
                         $ul.appendTo($td);
                     } else {
-                        $td.append(
-                            $('<span>').html(_s(content))
-                        );
+                        var span = $('<span>').html(_s(content));
+                        if (field.compact) {
+                            span.addClass('compact');
+                            span.html('');
+                        }
+                        $td.append(span);
                     }
                 }
 
@@ -1376,8 +1525,8 @@
                     .appendTo($tr);
                 $quickView.mouseover(
                     // Show quick view
-
                     function() {
+                        var $quickView = $(this);
                         var $quickViewTooltip = $('<div>').addClass('quick-view-tooltip
hovered-elem');
                         var $tr = $quickView.closest('tr');
                         var $listView = $tr.closest('.list-view');
@@ -1461,7 +1610,7 @@
                         });
                         $quickViewTooltip.css({
                             position: 'absolute',
-                            left: $tr.offset().left + $tr.width() - $quickViewTooltip.width(),
+                            left: $quickView.offset().left + $quickView.outerWidth() - $quickViewTooltip.width()
- 2*(parseInt($quickView.css('border-left-width')) + parseInt($quickView.css('border-right-width'))),
                             top: $quickView.offset().top,
                             zIndex: $tr.closest('.panel').zIndex() + 1
                         });
@@ -1476,6 +1625,14 @@
             }
         });
 
+        // Toggle collapsible column to fix alignment of hidden/shown cells
+        if (hasCollapsibleColumn) {
+            $tbody.closest('table').find('tr:first th.collapsible-column:visible').prev('th').click();
+        }
+
+        // Re-sort table if a column was previously sorted
+        $listView.find('thead tr:last th.sorted').click().click();
+
         return rows;
     };
 
@@ -1794,8 +1951,19 @@
                 reorder: reorder,
                 detailView: listViewData.detailView,
                 'multiSelect': multiSelect,
-                noActionCol: listViewData.noActionCol
+                noActionCol: listViewData.noActionCol,
+                groupableColumns: listViewData.groupableColumns
             });
+
+        if (listViewData.noSplit) {
+            $table.addClass('no-split');
+        }
+
+        if (listViewData.horizontalOverflow) {
+            $table.addClass('horizontal-overflow');
+            $table.parent().css({'overflow-x': 'auto'});
+        }
+
         createFilters($toolbar, listViewData.filters);
                 
         if (listViewData.hideSearchBar != true) {


Mime
View raw message