INT-141 Show collection stats

scout-style/10strap.less

@@ -56,7 +56,7 @@ hr.inverse {
 code {
   font-family: Menlo, monospace;
   color: @gray1;
-  background-color: @gray6;  // @worldhack: was @gray8
+  background-color: @gray7;
 }
 
 input,

scout-style/index.less

@@ -4,7 +4,8 @@
 @import "bootstrap";
 
 // Configuration
-@import "./variables.less";
+// @import "./variables.less";
+@octicons-font-path: "fonts";
 
 // Tweaks to bootstrap
 @import "./10strap.less";
@@ -50,8 +51,6 @@ html, body{
   }
 }
 
-
-
 #statusbar {
   background: 0 0;
   position: fixed;
@@ -60,7 +59,6 @@ html, body{
   right: 0;
   z-index: 1020;
 
-
   .progress {
     position: fixed;
     top: 0;
@@ -71,6 +69,7 @@ html, body{
     z-index: 2000;
     border-radius: 0;
     transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
     .progress-bar {
       background-color: @component-active-bg;
     }
@@ -80,15 +79,14 @@ html, body{
 .spinner-circles {
   width: 40px;
   height: 40px;
-
   position: relative;
   margin: 40px auto;
 
   .circle-1, .circle-2 {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    background-color: @brand-primary;
+    background-color: @green2;
     opacity: 0.6;
     position: absolute;
     top: 0;
@@ -120,6 +118,48 @@ html, body{
 }
 
 
-// styles for demo
 
+// component styles
+.collection-stats-holder {
+  position: absolute;
+  right: 20px;
+}
+.collection-stats {
+  float: left;
+  font-weight: 200;
+  list-style: none;
+  padding: 0 30px 0 0;
+  margin: 11px 30px 0 0;
+  border-right: 1px solid @gray7;
+
+  &:last-child {
+    border-right: none;
+    padding: 0;
+    margin: 11px 0 0 0;
+  }
+}
+.collection-stats-item {
+  display: inline-block;
+  margin-right: 10px;
 
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.collection-stats-primary-label {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 12px;
+  color: @gray3;
+}
+.collection-stats-primary-value {
+  font-size: 36px;
+  line-height: 36px;
+}
+.collection-stats-label {
+  font-size: 11px;
+  color: @gray3;
+}
+.collection-stats-value {
+  font-size: 14px;
+}

scout-style/sidebar.less

@@ -1,3 +1,7 @@
+@sidebar-bg: @pw;
+@sidebar-border: @gray7;
+@sidebar-width: 220px;
+
 .sidebar {
   border-radius: 0;
   position: fixed;
@@ -20,7 +24,7 @@
       padding: 5px 5px 5px 30px;
       height: auto;
       background: @pw;
-      border-color: @gray6;
+      // border-color: @gray6;
     }
     input[type=search] {
       border-radius: 18px;

scout-style/variables.less

@@ -1,9 +1,9 @@
 //
 // Variables
 // --------------------------------------------------
-@sidebar-bg: @pw;
-@sidebar-border: @gray6; // @worldhack: was @gray7
-@sidebar-width: 220px;
+// @sidebar-bg: @pw;
+// @sidebar-border: @gray6; // @worldhack: was @gray7
+// @sidebar-width: 220px;
 
 @octicons-font-path: "fonts";
 //== Colors

scout-ui/src/collection-stats/index.jade

@@ -1,17 +1,21 @@
-div.row.hidden
-  .col-md-6
-    dl.dl-horizontal
-      dt # documents
-      dd(data-hook='document_count')
-      dt total document size
-      dd(data-hook='document_size')
-      dt average document size
-      dd(data-hook='document_size_average')
-  .col-md-6
-    dl.dl-horizontal
-      dt # indexes
-      dd(data-hook='index_count')
-      dt total index size
-      dd(data-hook='index_size')
-      dt average index size
-      dd(data-hook='index_size_average')
+div.collection-stats-holder
+  ul.collection-stats
+    li.collection-stats-item
+      .collection-stats-primary-label Documents
+      .collection-stats-primary-value(data-hook='document_count')
+    li.collection-stats-item
+      .collection-stats-label total size
+      .collection-stats-value(data-hook='document_size')
+    li.collection-stats-item
+      .collection-stats-label avg. size
+      .collection-stats-value(data-hook='document_size_average')
+  ul.collection-stats
+    li.collection-stats-item
+      .collection-stats-primary-label Indexes
+      .collection-stats-primary-value(data-hook='index_count')
+    li.collection-stats-item
+      .collection-stats-label total size
+      .collection-stats-value(data-hook='index_size')
+    li.collection-stats-item
+      .collection-stats-label avg. size
+      .collection-stats-value(data-hook='index_size_average')

scout-ui/src/field-list/index.less

@@ -9,7 +9,7 @@
 
     hr.field-divider {
       margin-bottom: 12px;
-      border-top: 1px solid @gray6;  // @worldhack: was @gray7
+      border-top: 1px solid @gray7;
     }
 
     .schema-field-list {

scout-ui/src/home/collection.jade

@@ -1,13 +1,13 @@
 .collection-view
-  .header
-    .container-fluid
-      h3(data-hook='name')
-      .row
-        .col-md-12
-          div(data-hook='stats-subview')
-      .row
-        .col-md-12
-          div(data-hook='refine-bar')
+  .sampling-status
+    span This report is based on a sample of 1000 documents. #[a(href='#') Learn More]
+  header
+    .row
+      .col-md-6
+        h1(data-hook='name')
+      .col-md-6
+        div(data-hook='stats-subview')
+  div(data-hook='refine-bar')
   .column-container
     .column.main
       div(data-hook='fields-subview')

scout-ui/src/home/index.less

@@ -53,24 +53,45 @@
 }
 
 .collection-view {
+  .sampling-status {
+    position: absolute;
+    margin: 3px 0 0 6px;
+    z-index: 2;
 
-  @header-height: 120px;
+    span {
+      font-size: 13px;
+      font-weight: 200;
 
-  .header {
-    padding-left: 20px;
-    display: flex;
+      a {
+        font-weight: normal;
+      }
+    }
+  }
+  header {
+    padding: 12px 20px;
     position: relative;
-    z-index: 10;
-    height: @header-height;
+    z-index: 1;
   }
+  .refine-view-container {
+    background: @gray8;
+    padding: 12px 20px;
+    position: relative;
+    z-index: 1;
 
+    input.form-control.input-sm {
+      width: 90%;
+      background: @pw;
+      height: 28px;
+      margin-right: 10px;
+    }
+  }
   .column-container {
     padding-right: 20px;
     display: flex;
     overflow: hidden;
     height: 100vh;
-    margin-top: -@header-height;
-    padding-top: @header-height;
+    margin-top: -168px; // total computed header + .refine-view-container height
+    padding-top: 168px; // total computed header + .refine-view-container height
     position: relative;
     width: 100%;
   }
@@ -85,6 +106,7 @@
   }
 
   .main {
+    padding: 0 0 0 20px;
     flex: 1;
   }
 

scout-ui/src/minicharts/index.less

@@ -6,7 +6,7 @@
 @mc-blue4: lighten(@mc-blue0, 30%);
 @mc-blue5: lighten(@mc-blue0, 37.5%);
 
-@mc-bg: @gray6;   // @worldhack: was #F2F4F5
+@mc-bg: @gray8;
 @mc-fg: @mc-blue0;
 
 div.minichart.unique {
@@ -66,7 +66,7 @@ svg.minichart {
   font-size: 10px;
 
   text {
-    fill: @gray2; // @worldhack: was @gray4
+    fill: @gray4;
     font-weight: bold;
   }
 
@@ -129,11 +129,11 @@ svg.minichart {
 
   .legend {
     text {
-      fill: @gray4; // @worldhack: was @gray5
+      fill: @gray5;
     }
 
     line {
-      stroke: @gray6; // @worldhack: was @gray7
+      stroke: @gray7;
     }
     shape-rendering: crispEdges;
   }

scout-ui/src/refine-view/index.jade

@@ -1,6 +1,5 @@
 .refine-view-container
-  form
-    .input-group(data-hook='refine-input-group')
-      input#refineInput.form-control(type='text', data-hook='refine-input')
-      span.input-group-btn
-        button.btn.btn-default(type='button', data-hook='refine-button') Refine
+  form.form-inline
+    div(data-hook='refine-input-group')
+      input#refineInput.form-control.input-sm(type='text', data-hook='refine-input')
+      button.btn.btn-default.btn-sm(type='button', data-hook='refine-button') Refine