Metrics Views for CloudStack UI

Introduction

In order to identify issues within CloudStack, a CloudStack admin would go through various resources such as zones/clusters/hosts/storage pool or with VMs or volumes, using a CLI or some other tool/script to find CPU/Memory/Disk/Network usage of that resource to figure out if that resource is exhausted, or having issues for example host is down, storage pool is full etc. The metrics view aims to solve that problem by showing metrics information for these resources which would allow hierarchical navigation to triage issue (for example, Zone -> Cluster -> Host -> Instances -> Volumes, Storage Pool -> Volumes), allow common operation (like quick view), mark threshold data (such as coloring a tabular cell for resources that have reached notification/disable threshold), allow data to be sorted and refreshed.

Bug Reference

CLOUDSTACK-9020 - Getting issue details... STATUS

Document History

Feature Specifications

1. Reusable Table Widget and JS component/framework:
   1. A horizontally and vertically scroll-able table (with horizontal/vertical scroll bars)
   2. Alternate row coloring of table rows
   3. Sortable columns
   4. Refresh button
   5. Threshold table cell coloring (orange for those values exceed notification threshold, red for those resources that have exceeded disable thresholds)
   6. Collapsible column, grouping of columns into super column (for example, 3 sub columns in one column)
   7. Compact data: state icons (with tooltip instead of full text), lower minimum width
   8. Translatable labels
   9. Quick action or quick-view column, common operations in each metrics table
   10. Panel navigation from one view to other view with support to filter (for example, navigation from Zone -> Cluster, showing only clusters in the selected zone)
   11. Infinite scrolling to avoid blocking UI or failing on large API response
2. Views for: Zones, Clusters, Hosts, Instances, Storage Pool and Volumes
3. Navigation: Zone -> Cluster -> Host -> Instance -> Volumes -> Storage Pool, Storage Pool -> Volume
4. Zone Metrics View:
   1. Fields: name, state, number of clusters, cpu usage (used, maximum deviation, allocated, total Ghz), memory usage (used, maximum deviation, allocated, total GB)
   2. Thresholds using global settings for notification and disable thresholds of cpu and memory
5. Cluster Metrics View:
   1. Fields: name, state, number of hosts, cpu usage (used, max deviation, allocated, total Ghz), memory usage (used, maximum deviation, allocated, total GB)
   2. Thresholds using cluster level setting for notification/disable thresholds for cpu and memory
6. Host Metrics View:
   1. Fields: name, state, cpu related (cores, total Ghz, used, allocated ghz), memory related (total, allocated, used), network (read/write GBs)
   2.  Threshold based on cluster in which host belogs,  for notification/disable thresholds for cpu and memory
7. Instance Metrics View:
   
   1. Fields: name, state, cpu related (cores, total Ghz, used, allocated ghz), memory related (total, allocated, used), network (read/write mbs), disk (read/write mbs and iops)
      
8. Storage Pool Metrics View: (Primary storage)
   1. Fields: Storage pool name, state, scope, type, disk related (used, total, allocated, unallocated)
   2. Thresholds: global and cluster level disk thresholds (disable and notification)
9. Volume Metrics View:
   
   1. Fields: Volume name, VM name (if volume is attached), size, type (shared/local, root/data disk), storage pool name
10. Sorting logic:
    1. Sort tables alphabetically
    2. If data appears to be numeric, sort numerically
    3. If column/data is state, sort using the icon/label or title field
    4. If a column was previously sorted, infinite scrolling would add new rows and the UI should resort the data by the previously sorted column to result in the same sorted order
    5. If a column was previously sorted, refreshing metrics should result in the view being sorted by the previously sorted column
11. Pagination size: allow users/admins to set a default page size for UI, by default.ui.page.size of at least 100. The current global pageSize value in UI is set to 20.

Implementation

1. Framework and widget:
   1. Refactor listView.js to allow for such a general widget based on listView
   2. Implement a general JS module: metrics widget/framework with navigation, refresh and other common operations in metricsView.js
   3. Implement sorting in dataTable.js, allow sorting of all tabular data based on state, name (string values) or numbers (numeric data)
   4. Allow addition of metrics to any existing resource by adding a custom action on its listView such as:
      

      viewMetrics: { 
          label: 'label.metrics', 
          isHeader: true, 
         addRow: false, 
         action: { 
            custom: cloudStack.uiCustom.metricsView({resource: 'resource'}) 
          }
      },

   5. Allow developers to declare listView fields defining options -- if the column has sub columns, thresholds or can be collapsed with following rules:
      

      cpuallocated: { 
          label: 'label.metrics.cpu.allocated', 
          collapsible: true, 
          columns: { 
              cpuallocated: { 
                 label: 'label.metrics.allocated', 
                 thresholdcolor: true, 
                 thresholds: { 
                     notification: 'cpunotificationthreshold', 
                     disable: 'cpudisablethreshold' 
                 } 
             }, 
             cputotal: { 
                label: 'label.metrics.cpu.total' 
             } 
          } 
      },

   6. Allow developers to add navigation from one metrics view to other with following block in listView block:

      browseBy: { 
         filterKey: 'storageid', 
         filterBy: 'id', 
         resource: 'storagepool' 
      },
      In the above block, resource defines the next metrics view, filterBy defines the key in the API request used to render the next metrics view (?command=Api&key=value) where filterKey is the key from the table's row's json data which holds the value (uuid for example) that can be used in the next navigation call. 

   7. Implement method to add/remove panels from the breadcrumbs to show navigation between metric views etc.
      
      
      
2. General Metrics View:
   1. Show metrics button in the main resource view:
      
      
      
   2. General metrics view table/widget showing collapsible columns, quick view, refresh button, breadcrumb navigation, threshold coloring, sortable columns and compact state column:
      
      
   3. Quick-view column in action:
      
      
      
3. Zone metrics view:
    
   
   
4. Cluster metrics view:
   
   
   
5. Host metrics view:
   
   
   
6. Instance metrics view:
   
   
   
7. Volume metrics view:
   
   
   
8. Storage pool metrics view: