Tenant options instead of free text

app/assets/javascripts/controllers/live_metrics/ad_hoc_metrics_controller.js

@@ -1,13 +1,26 @@
 /* global miqHttpInject */
-
-  ManageIQ.angular.app.controller('adHocMetricsController', ['$http', '$window', 'miqService',
-    'metricsUtilsFactory', 'metricsHttpFactory', 'metricsConfigFactory', 'metricsParseUrlFactory',
-    function($http, $window, miqService, metricsUtilsFactory, metricsHttpFactory, metricsConfigFactory, metricsParseUrlFactory) {
-
+ManageIQ.angular.app.controller('adHocMetricsController', ['$http', '$window', 'miqService',
+  'metricsUtilsFactory', 'metricsHttpFactory', 'metricsConfigFactory', 'metricsParseUrlFactory',
+  function($http, $window, miqService, metricsUtilsFactory, metricsHttpFactory, metricsConfigFactory, metricsParseUrlFactory) {
     var dash = this;
     var utils = metricsUtilsFactory(dash);
     var httpUtils = metricsHttpFactory(dash, $http, utils, miqService);
 
+    dash.getTenants = httpUtils.getTenants;
+    dash.refreshList = httpUtils.refreshList;
+    dash.refreshGraph = httpUtils.refreshGraph;
+    dash.setPage = httpUtils.setPage;
+
+    var pageSetup = function() {
+      // try to parse config variables from page url
+      // and set page config variables
+      metricsParseUrlFactory(dash, $window);
+      metricsConfigFactory(dash);
+
+      // load tenants
+      httpUtils.getTenants();
+    }
+
     var initialization = function() {
       dash.tenantChanged = false;
       dash.filterChanged = true;
@@ -41,9 +54,8 @@
         actionsConfig: dash.actionsConfig
       };
 
-      dash.url = '/container_dashboard/data' + dash.providerId  + '/?live=true&tenant=' + dash.tenant;
-
-      httpUtils.getMetricTags();
+      var _tenant = dash.tenant.value || dash.DEFAULT_TENANT;
+      dash.url = '/container_dashboard/data' + dash.providerId  + '/?live=true&tenant=' + _tenant;
     }
 
     var filterChange = function (filters, addOnly) {
@@ -54,6 +66,7 @@
       // prevent listing all metrics point
       if (dash.filterConfig.appliedFilters.length === 0) {
         dash.applied = false;
+        dash.itemSelected = false;
         dash.items = [];
         dash.page = 1;
         dash.pages = 1;
@@ -70,6 +83,7 @@
 
       // when change filter we automatically apply changes
       if (!addOnly) {
+        dash.itemSelected = false;
         dash.items = [];
         dash.page = 1;
         dash.pages = 1;
@@ -115,16 +129,10 @@
       initialization();
     };
 
-    dash.getTenants = httpUtils.getTenants;
-    dash.refreshList = httpUtils.refreshList;
-    dash.refreshGraph = httpUtils.refreshGraph;
-    dash.setPage = httpUtils.setPage;
-
-    // try to parse config variables from page url
-    // and set page config variables
-    metricsParseUrlFactory(dash, $window);
-    metricsConfigFactory(dash);
+    // one time initialization of page elemants
+    pageSetup();
 
     // initialize page elemants
     initialization();
-  }]);
+  }
+]);

app/assets/javascripts/controllers/live_metrics/util/metrics-config-factory.js

@@ -9,6 +9,9 @@ angular.module('miq.util').factory('metricsConfigFactory', function() {
       }
     };
 
+    dash.DEFAULT_TENANT = "_system";
+    dash.tenant = {value: null};
+
     dash.actionsConfig = {
       actionsInclude: true
     };

app/assets/javascripts/controllers/live_metrics/util/metrics-http-factory.js

@@ -68,13 +68,28 @@ angular.module('miq.util').factory('metricsHttpFactory', function() {
           miqService.handleFailure(error); });
     };
 
-    var getTenants = function(include) {
-      return $http.get(dash.url + "&query=get_tenants&limit=7&include=" + include).then(function(response) {
+    var getTenants = function() {
+      var url = '/container_dashboard/data' + dash.providerId  + '/?live=true&query=get_tenants';
+
+      return $http.get(url).then(function(response) {
         if (utils.checkResponse(response) === false) {
-          return [];
+          dash.tenantList = [];
+          dash.tenant = {value: null};
+          return;
         }
 
-        return response.data.tenants;
+        // get the tenant list, and set the current tenant
+        dash.tenantList = response.data.tenants;
+        dash.tenant = dash.tenantList[0];
+
+        // try to set the current tenant to be the default one
+        dash.tenantList.forEach(function callback(obj, i) {
+          if (obj.value === dash.DEFAULT_TENANT) {
+            dash.tenant = dash.tenantList[i];
+          }
+        });
+
+        getMetricTags();
       });
     }
 

app/assets/javascripts/controllers/live_metrics/util/metrics-parse-url-factroy.js

@@ -5,7 +5,7 @@ angular.module('miq.util').factory('metricsParseUrlFactory', function() {
     dash.providerId = '/' + (/^\/[^\/]+\/([r\d]+)$/.exec(pathname)[1]);
 
     // TODO: get this values from GET/POST values ?
-    dash.tenant = '_system';
+    dash.tenantList = [];
     dash.minBucketDurationInSecondes = 20 * 60;
     dash.max_metrics = 1000;
     dash.items_per_page = 10;

app/assets/javascripts/controllers/live_metrics/util/metrics-utils-factory.js

@@ -21,6 +21,7 @@ angular.module('miq.util').factory('metricsUtilsFactory', function() {
 
       var data = response.data;
 
+      dash.filterConfig.fields = [];
       if (data && angular.isArray(data.metric_tags)) {
         data.metric_tags.sort();
         for (var i = 0; i < data.metric_tags.length; i++) {
@@ -32,9 +33,6 @@ angular.module('miq.util').factory('metricsUtilsFactory', function() {
               filterType: 'alpha',
             });
         }
-      } else {
-        // No filters available, apply without filtering
-        dash.filterConfig.fields = [];
       }
     }
 

app/assets/stylesheets/metrics.scss

@@ -2,13 +2,12 @@
   overflow-x:hidden;
 
   .ad-hoc-toolbar {
-      margin-left: 10px;
+    margin-left: 10px;
   }
 
   .ad-hoc-tenant {
     margin-left: 5px;
-
-    input  {
+    input {
       display: inline;
       width: 190px;
     }
@@ -17,22 +16,34 @@
       vertical-align: top;
       margin-bottom: 10px;
     }
-  }
 
-  .form-group.toolbar-actions.ng-scope {
-    width: calc(100% - 295px);
+    .btn {
+      margin-left: 0;
+    }
   }
 
-  .toolbar-pf-include-actions.ng-scope {
-    width: 100%;
+  .form-group {
+    &.toolbar-pf-filter {
+      margin-bottom: 0;
+    }
+
+    &.toolbar-actions.ng-scope {
+      margin-bottom: 0;
+    }
   }
 
-  .pagination, .pagination-div, .form-group.pagination-div.ng-scope {
+  .pagination {
     display: flex;
     float: right;
-    margin: 0px;
-    margin-bottom: 0px;
+    margin: 0;
+    margin-bottom: 0;
+  }
 
+  .pagination-div {
+    display: flex;
+    float: right;
+    margin: 0;
+    margin-bottom: 0;
     .page-input {
       width: 40px;
       margin-left: 10px;
@@ -41,40 +52,78 @@
     }
   }
 
-  .form-group.toolbar-pf-filter,
-  .form-group.toolbar-actions.ng-scope,
-  .toolbar-pf-actions.ng-pristine.ng-valid.no-filter-results {
-    margin-bottom: 5px;
-  }
+  .graph-view {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    .form-group.toolbar-actions.ng-scope {
+      margin-bottom: 10px;
+    }
 
-  .list-view-container, .line-chart, .blank-slate-pf {
-    margin-bottom: 0;
-    min-height: calc(100vh - 357px);
-    margin-left: 20px;
-    margin-right: 20px;
+    .dropdown-kebab-pf .dropdown-menu {
+      left: 0;
+    }
+
+    .toolbar-pf-actions .dropdown-kebab-pf {
+      float: none;
+      margin-left: 10px;
+    }
   }
 
   .list-view-container {
+    min-height: calc(100vh - 362px);
     padding-top: 10px;
+    margin-bottom: 0;
   }
 
-  .graph-view {
+  .line-chart {
+    min-height: calc(100vh - 347px);
+    margin-top: 36px;
+    margin-left: 30px;
+    margin-right: 50px;
+    margin-bottom: 0;
+  }
+
+  .blank-slate-pf {
+    min-height: calc(100vh - 362px);
+    margin-bottom: 0;
+  }
+
+  .list-view {
     overflow-x: hidden;
     overflow-y: hidden;
 
+    .form-group {
+      &.toolbar-actions.ng-scope {
+        width: calc(100% - 425px);
+      }
+    }
+
     .dropdown-kebab-pf .dropdown-menu {
-      left: 0px;
+      left: -5px;
     }
-  }
 
-  .line-chart {
-    margin-top: 36px;
-    margin-left: 30px;
-    margin-right: 50px;
+    .toolbar-pf-actions .dropdown-kebab-pf {
+      float: none;
+      margin-left: 10px;
+    }
+
+    .filter-pf.filter-fields .form-group {
+      width: 410px;
+    }
+
+    .toolbar-pf .form-group {
+      .btn-group {
+        margin-left: 0;
+      }
+
+      .btn {
+        margin-left: 0;
+      }
+    }
   }
 
   .timeline-date-input {
-    width: 250px;
+    width: 300px;
   }
 
   .list-group {
@@ -84,4 +133,35 @@
   .bootstrap-touchspin {
     text-align: center;
   }
+
+  .tenant-filter-bar {
+    margin-left: 5px;
+    .dropdown-menu.open {
+      margin-top: -11px;
+    }
+  }
+
+  .timeline-stepper {
+    margin-left: 5px;
+  }
+
+  .toolbar-pf-include-actions.ng-scope {
+    width: 100%;
+  }
+
+  .toolbar-pf-actions.ng-pristine.ng-valid.no-filter-results {
+    margin-bottom: 0;
+  }
+
+  .btn.btn-default.dropdown-toggle.filter-fields {
+    min-width: 100px;
+  }
+
+  .filters-selector .btn {
+    margin-left: 0;
+  }
+
+  .tenants-selector .btn {
+    margin-left: 0;
+  }
 }

app/services/hawkular_proxy_service.rb

@@ -1,6 +1,15 @@
 class HawkularProxyService
   include UiServiceMixin
 
+  TENANT_LABEL_MAX_LEN = 25
+  TENANT_LABEL_SPECIAL_CASES = {
+    "_system"         => "System",
+    "_ops"            => "Operations",
+    "default"         => "Default",
+    "admin"           => "Admin",
+    "openshift-infra" => "OpenShift Infra"
+  }.freeze
+
   def initialize(provider_id, controller)
     @provider_id = provider_id
     @controller = controller
@@ -110,16 +119,20 @@ def tenants(limit)
     tenants = @cli.hawkular_client.http_get('/tenants')
 
     if @params['include'].blank?
-      tenants.map! { |x| x["id"] }
+      tenants.map! { |x| {:label => labelize(x["id"]), :value => x["id"]} }
     else
-      tenants.map! { |x| x["id"] if x["id"].include?(@params['include']) }
+      tenants.map! { |x| {:label => labelize(x["id"]), :value => x["id"]} if x["id"].include?(@params['include']) }
     end
 
     tenants.compact[0...limit]
   end
 
   private
 
+  def labelize(id)
+    TENANT_LABEL_SPECIAL_CASES.fetch(id, id.truncate(TENANT_LABEL_MAX_LEN))
+  end
+
   def _metric_definitions(tags, type)
     if type.blank?
       @cli.hawkular_client.counters.query(tags).compact +