Merge pull request #6156 from stormpython/visualize

New Design for Visualize

src/plugins/kibana/public/visualize/editor/styles/_editor.less

@@ -26,13 +26,20 @@
       &:before {
         display: none;
       }
+      &:hover {
+        background-color: transparent;
+      }
     }
+
     > li {
       > a {
         padding: 4px 0;
         margin: 0 10px;
         color: @kibanaGray2;
       }
+      > a:hover {
+        border-bottom: 2px solid @kibanaGray2;
+      }
     }
 
     .danger {
@@ -104,7 +111,7 @@
 
     .index-pattern,
     nav {
-      min-height: 34px;
+      min-height: @app-icon-height;
       border-radius: 0px;
     }
 

src/plugins/kibana/public/visualize/styles/main.less

@@ -3,44 +3,98 @@
 @import (reference) "~ui/styles/list-group-menu";
 
 .vis-wizard {
-  h1 {
-    margin-top: 45px;
-  }
-}
+  margin-right: 0;
+  margin-left: 0;
+  padding-left: 0;
+  padding-right: 0;
+
+  @media (min-width: @screen-lg) {
+    .wizard {
+      padding: 0;
+      display: flex;
 
-.wizard-vis-type {
-  .list-group-item();
-  .list-group-menu .list-group-menu-item();
+      .wizard-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0px 2.5px;
+
+        .wizard-row {
+          flex: 1;
+          background-color: @kibanaGray6;
+        }
+      }
+    }
+  }
 
-  // overrided for tablet and desktop
-  @media (min-width: @screen-md-min) {
-    display: flex;
-    align-items: flex-start;
+  h3 {
+    margin-top: 35px;
+    padding: 0px 15px;
   }
 
-  &-heading {
-    flex: 0 0 200px;
-    display: flex;
-    align-items: center;
-    font-size: 1.2em;
-
-    .fa {
-      flex: 0 0 auto;
-      margin-right: @padding-base-horizontal;
-      font-size: 1.5em;
-      text-align: center;
+  .wizard-row {
+    .panel {
+      margin-bottom: 0;
+      border: none;
+    }
+
+    .panel-default > .panel-heading {
+      background-color: @kibanaGray6;
+    }
+
+    .list-group {
+      margin-bottom: 0;
+
+      .list-group-item {
+        border-radius: 0;
+        border: none;
+      }
     }
 
-    h4 {
-      flex: 1 0 auto;
+    .striped {
+      li:nth-child(odd) {
+        background-color: @white;
+      }
+
+      li:nth-child(even) {
+        background-color: @kibanaGray6;
+      }
     }
   }
 
-  &-description {
-    flex: 1 1 auto;
-    color: @wizard-vis-type-description-color;
+  .wizard-type {
+    flex: 1;
+    .list-group-item();
+    .list-group-menu .list-group-menu-item();
+
+    border: none;
+    border-radius: 0;
+    background-color: @kibanaGray6;
+
+    &-heading {
+      flex: 0 0 200px;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+
+      .fa {
+        flex: 0 0 auto;
+        margin-right: @padding-base-horizontal;
+        font-size: 1.5em;
+        text-align: center;
+        color: @saved-object-finder-icon-color;
+      }
+
+      h4 {
+        flex: 1 0 auto;
+      }
+    }
+
+    &-description {
+      flex: 1 1 auto;
+      color: @wizard-vis-type-description-color;
+    }
   }
 }
 
-
 @import "../editor/styles/_editor.less";

src/plugins/kibana/public/visualize/wizard/step_1.html

@@ -1,24 +1,22 @@
-<h1>
-  Create a new visualization <br class="visible-xs">
-  <span class="pull-right label label-default hidden-xs">Step 1</span>
-  <span class="label label-default visible-xs">Step 1</span>
-</h1>
-
-<div class="wizard-vis-types">
-  <a class="wizard-vis-type"
-     ng-repeat="type in visTypes.inTitleOrder"
-     ng-href="{{ visTypeUrl(type) }}">
-    <div class="wizard-vis-type-heading">
-      <i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
-      <h4>{{type.title}}</h4>
+<div class="wizard">
+  <div class="wizard-column">
+    <h3>Create New Visualization</h3>
+    <div class="wizard-row">
+      <a class="wizard-type" ng-repeat="type in visTypes.inTitleOrder" ng-href="{{ visTypeUrl(type) }}">
+        <div class="wizard-type-heading">
+          <i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
+          <h4>{{type.title}}</h4>
+        </div>
+        <p class="wizard-type-description">{{type.description}}</p>
+      </a>
     </div>
-    <p class="wizard-vis-type-description">{{type.description}}</p>
-  </a>
+  </div>
+  <div class="wizard-column">
+    <h3>Or, Open a Saved Visualization</h3>
+    <saved-object-finder
+      title="Saved Visualizations"
+      type="visualizations"
+      class="wizard-row">
+    </saved-object-finder>
+  </div>
 </div>
-
-<h1>Or, open a saved visualization</h1>
-
-<saved-object-finder
-        title="Saved Visualizations"
-        type="visualizations">
-</saved-object-finder>

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,37 +1,26 @@
-<h1>
-  Select a search source
-  <span class="pull-right label label-default hidden-xs">Step 2</span>
-  <span class="label label-default visible-xs">Step 2</span>
-</h1>
-<ul class="list-group list-group-menu" ng-switch on="stepTwoMode">
-  <li ng-click="stepTwoMode='new'"
-      ng-class="{'active': stepTwoMode=='new'}"
-      class="list-group-item list-group-menu-item">
-    From a new search
-  </li>
-  <li class="list-group-item" ng-switch-when="new">
+<div class="wizard">
+  <div class="wizard-column">
+    <h3>From a New Search</h3>
     <!-- Index patterns -->
-    Select an index pattern
-    <div class="form-group">
-      <select
-              class="form-control"
-              ng-model="indexPattern.selection"
-              ng-options="pattern as pattern for pattern in indexPattern.list | orderBy:'toString()'">
-      </select>
+    <div class="wizard-row">
+      <div class="panel panel-default">
+        <div class="panel-heading">Index Patterns</div>
+      </div>
+      <ul class="striped list-group">
+        <li class="list-group-item" ng-repeat="pattern in indexPattern.list | orderBy: 'toString()'">
+          <a class="index-link" kbn-href="{{ makeUrl(pattern) }}">{{pattern}}</a>
+        </li>
+      </ul>
     </div>
-  </li>
-
-  <li ng-click="stepTwoMode='saved'"
-      ng-class="{'active': stepTwoMode=='saved'}"
-      class="list-group-item list-group-menu-item">
-    From a saved search
-  </li>
-  <li class="list-group-item" ng-switch-when="saved">
+  </div>
+  <div class="wizard-column">
+    <h3>Or, From a Saved Search</h3>
     <!-- Saved searches -->
     <saved-object-finder
-            title="Saved Searches"
-            type="searches"
-            make-url="step2WithSearchUrl">
+        title="Saved Searches"
+        type="searches"
+        class="wizard-row"
+        make-url="step2WithSearchUrl">
     </saved-object-finder>
-  </li>
-</ul>
+  </div>
+</div>

src/plugins/kibana/public/visualize/wizard/wizard.js

@@ -8,7 +8,7 @@ import uiModules from 'ui/modules';
 
 
 const templateStep = function (num, txt) {
-  return '<div ng-controller="VisualizeWizardStep' + num + '" class="container vis-wizard">' + txt + '</div>';
+  return '<div ng-controller="VisualizeWizardStep' + num + '" class="container-fluid vis-wizard">' + txt + '</div>';
 };
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
@@ -56,16 +56,8 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, $location, t
     list: $route.current.locals.indexPatternIds
   };
 
-  $scope.$watch('stepTwoMode', function (mode) {
-    if (mode === 'new') {
-      if ($scope.indexPattern.list && $scope.indexPattern.list.length === 1) {
-        $scope.indexPattern.selection = $scope.indexPattern.list[0];
-      }
-    }
-  });
-
-  $scope.$watch('indexPattern.selection', function (pattern) {
+  $scope.makeUrl = function (pattern) {
     if (!pattern) return;
-    kbnUrl.change('/visualize/create?type={{type}}&indexPattern={{pattern}}', {type: type, pattern: pattern});
-  });
+    return `#/visualize/create?type=${type}&indexPattern=${pattern}`;
+  };
 });

src/ui/public/chrome/directives/app_switcher/app_switcher.less

@@ -1,20 +1,6 @@
 @import (reference) "~ui/styles/mixins";
 @import (reference) "~ui/styles/variables";
 
-// as - App Switcher
-@as-open-width: 160px;
-@as-closed-width: 53px;
-@app-icon-height: 38px;
-@app-line-height: 24px;
-@transition-time: .35s;
-@transition-delay: .25s;
-@app-links-wrapper-background: #3caed2;
-@app-links-active-background: lighten(@app-links-wrapper-background, 7.5%);
-
-@firstLinkColor: #E4BB51;
-@secondLinkColor: #8AC336;
-@thirdLinkColor: #59C6C5;
-
 body { overflow-x: hidden; }
 
 .app-links-wrapper {

src/ui/public/directives/saved_object_finder.js

@@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
 
       filterResults();
 
+      /**
+       * Boolean that keeps track of whether hits are sorted ascending (true)
+       * or descending (false) by title
+       * @type {Boolean}
+       */
+      self.isAscending = true;
+
+      /**
+       * Sorts saved object finder hits either ascending or descending
+       * @param  {Array} hits Array of saved finder object hits
+       * @return {Array} Array sorted either ascending or descending
+       */
+      self.sortHits = function (hits) {
+        self.isAscending = !self.isAscending;
+        self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse();
+      };
+
       /**
        * Passed the hit objects and will determine if the
        * hit should have a url in the UI, returns it if so

src/ui/public/paginated_table/paginated_table.html

@@ -33,5 +33,4 @@
   <!-- auto-inserted by the paginate directive... -->
   <!-- <paginate-controls></paginate-controls> -->
   <div class="pagination-container" ng-transclude></div>
-
 </paginate>