Add a no results found message

closes #183
elastic · Jul 21, 2014 · 3ebef0e · 3ebef0e
1 parent 69781f4
commit 3ebef0e
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 263 deletions.
diff --git a/src/kibana/apps/discover/index.html b/src/kibana/apps/discover/index.html
@@ -32,7 +32,21 @@
           state="state">
         </disc-field-chooser>
       </div>
-      <div class="col-md-10">
+      <div class="col-md-10" ng-show="!hits && !searchSource.activeFetchCount">
+        <div class="discover-overlay">
+          <h2>No results found</h2>
+          <div class="col-md-12">
+            Unfortunately I could not find any results matching your search. I tried really hard. I looked all over the place. Try expanding your search, or increasing your time window if searching by time. I really want to make this work for you. Help me, help you.
+          </div>
+        </div>
+      </div>
+      <div class="col-md-10" ng-show="!hits && searchSource.activeFetchCount">
+        <div class="discover-overlay">
+          <h2>Searching</h2>
+          <div class="spinner large"></div>
+        </div>
+      </div>
+      <div class="col-md-10" ng-show="hits">
 
         <div class="discover-timechart" ng-if="vis">
           <center class="small">
@@ -47,7 +61,7 @@
             </select> -->
           </center>
 
-          <div ng-show="searchSource.activeFetchCount" class="discover-timechart-overlay">
+          <div ng-show="searchSource.activeFetchCount" class="discover-overlay">
             <div class="spinner large">
             </div>
           </div>

diff --git a/src/kibana/apps/discover/styles/main.css b/src/kibana/apps/discover/styles/main.css
@@ -93,7 +93,7 @@
   width: 100%;
   height: 100%;
 }
-.discover-timechart .discover-timechart-overlay {
+.discover-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -104,9 +104,11 @@
   text-align: center;
   background-color: #ffffff;
 }
-.discover-timechart .discover-timechart-overlay .spinner {
+.discover-overlay .spinner {
   position: absolute;
   top: 70px;
+  left: 0;
+  right: 0;
 }
 .discover-hits {
   background-color: #ecf0f1;

diff --git a/src/kibana/apps/discover/styles/main.less b/src/kibana/apps/discover/styles/main.less
@@ -31,23 +31,25 @@
     width: 100%;
     height: 100%;
   }
+}
+
+.discover-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 20;
 
-  .discover-timechart-overlay {
+  opacity: 0.75;
+  text-align: center;
+  background-color: #ffffff;
+
+  .spinner {
     position: absolute;
-    top: 0;
+    top: 70px;
     left: 0;
-    bottom: 0;
     right: 0;
-    z-index: 20;
-
-    opacity: 0.75;
-    text-align: center;
-    background-color: #ffffff;
-
-    .spinner {
-      position: absolute;
-      top: 70px;
-    }
   }
 }