allow visualize view to hand off “no results” scenario

src/plugins/metric_vis/public/metric_vis.html

@@ -1,6 +1,16 @@
 <div ng-controller="KbnMetricVisController" class="metric-vis">
-    <div class="metric-container" ng-repeat="metric in metrics">
-        <div class="metric-value" ng-style="{'font-size': vis.params.fontSize+'pt'}">{{metric.value}}</div>
-        <div>{{metric.label}}</div>
+  <div class="metric-container" ng-repeat="metric in metrics">
+    <div ng-hide="!metric.value">
+      <div class="metric-value" ng-style="{'font-size': vis.params.fontSize+'pt'}">{{metric.value}}</div>
+      <div>{{metric.label}}</div>
     </div>
+    <div ng-if="!metric.value">
+      <div class="item top"></div>
+      <div class="item">
+        <h2 aria-hidden="true"><i aria-hidden="true" class="fa fa-meh-o"></i></h2>
+        <div>No data available for {{metric.label}}</div>
+      </div>
+      <div class="item bottom"></div>
+    </div>
+  </div>
 </div>

src/ui/public/visualize/visualize.html

@@ -1,4 +1,4 @@
-<div ng-if="vis.type.requiresSearch && esResp.hits.total === 0"
+<div ng-show="showNoResultsMessage(this);"
   class="text-center visualize-error visualize-chart">
   <div class="item top"></div>
   <div class="item">
@@ -7,7 +7,7 @@ <h4>No results found</h4>
   </div>
   <div class="item bottom"></div>
 </div>
-<div ng-hide="vis.type.requiresSearch && esResp.hits.total === 0"
+<div ng-show="hasResults(this);"
   ng-style="loadingStyle"
   ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
   class="visualize-chart"></div>

src/ui/public/visualize/visualize.js

@@ -46,6 +46,24 @@ define(function (require) {
         $scope.spy = {};
         $scope.spy.mode = ($scope.uiState) ? $scope.uiState.get('spy.mode', {}) : {};
 
+        $scope.showNoResultsMessage = function (scope) {
+          var requiresSearch = _.get(scope, 'vis.type.requiresSearch');
+          var hasZeroHits = _.get(scope, 'esResp.hits.total') === 0;
+          if (requiresSearch && hasZeroHits) {
+            // check for any visType that can visualize zero hits
+            return _.get(scope, 'vis.type.name') !== 'metric';
+          }
+          return true;
+        };
+
+        $scope.hasResults = function (scope) {
+          var requiresSearch = _.get(scope, 'vis.type.requiresSearch');
+          var hasZeroHits = _.get(scope, 'esResp.hits.total') === 0;
+          var canBeZero = _.get(scope, 'vis.type.name') === 'metric';
+
+          return requiresSearch && (hasZeroHits || canBeZero);
+        };
+
         var applyClassNames = function () {
           var $spyEl = getSpyEl();
           var $visEl = getVisEl();