Merge pull request #6239 from elastic/feature/design

Kibana 5 design

.gitignore

@@ -1,4 +1,5 @@
 .aws-config.json
+.ackrc
 .DS_Store
 .node_binaries
 node_modules

package.json

@@ -11,7 +11,7 @@
     "dashboarding"
   ],
   "private": false,
-  "version": "5.0.0-snapshot",
+  "version": "5.0.0-reskin-snapshot",
   "build": {
     "number": 8467,
     "sha": "6cb7fec4e154faa0a4a3fee4b33dfef91b9870d9"

src/optimize/base_optimizer.js

@@ -63,6 +63,7 @@ class BaseOptimizer {
 
   getConfig() {
     let mapQ = this.sourceMaps ? '?sourceMap' : '';
+    let mapQPre = mapQ ? mapQ + '&' : '?';
 
     return {
       context: fromRoot('.'),
@@ -101,7 +102,7 @@ class BaseOptimizer {
             test: /\.less$/,
             loader: ExtractTextPlugin.extract(
               'style',
-              `css${mapQ}!autoprefixer${mapQ ? mapQ + '&' : '?'}{ "browsers": ["last 2 versions","> 5%"] }!less${mapQ}`
+              `css${mapQ}!autoprefixer${mapQPre}{ "browsers": ["last 2 versions","> 5%"] }!less${mapQPre}dumpLineNumbers=comments`
             )
           },
           { test: /\.css$/, loader: ExtractTextPlugin.extract('style', `css${mapQ}`) },

src/plugins/kibana/index.js

@@ -3,7 +3,7 @@ import search from './server/routes/api/search';
 
 module.exports = function (kibana) {
   return new kibana.Plugin({
-
+    id: 'kibana',
     config: function (Joi) {
       return Joi.object({
         enabled: Joi.boolean().default(true),
@@ -14,7 +14,9 @@ module.exports = function (kibana) {
 
     uiExports: {
       app: {
+        id: 'kibana',
         title: 'Kibana',
+        listed: false,
         description: 'the kibana you know and love',
         //icon: 'plugins/kibana/settings/sections/about/barcode.svg',
         main: 'plugins/kibana/kibana',
@@ -33,9 +35,39 @@ module.exports = function (kibana) {
           return {
             kbnDefaultAppId: config.get('kibana.defaultAppId')
           };
-        }
+        },
       },
 
+      links: [
+        {
+          title: 'Discover',
+          order: -1003,
+          url: '/app/kibana#/discover',
+          description: 'interactively explore your data',
+          icon: 'plugins/kibana/assets/discover.svg',
+        },
+        {
+          title: 'Visualize',
+          order: -1002,
+          url: '/app/kibana#/visualize',
+          description: 'design data visualizations',
+          icon: 'plugins/kibana/assets/visualize.svg',
+        },
+        {
+          title: 'Dashboard',
+          order: -1001,
+          url: '/app/kibana#/dashboard',
+          description: 'compose visualizations for much win',
+          icon: 'plugins/kibana/assets/dashboard.svg',
+        },
+        {
+          title: 'Settings',
+          order: 1000,
+          url: '/app/kibana#/settings',
+          description: 'define index patterns, change config, and more',
+          icon: 'plugins/kibana/assets/settings.svg',
+        }
+      ],
       injectDefaultVars(server, options) {
         return {
           kbnIndex: options.index

src/plugins/kibana/public/dashboard/components/panel/panel.html

@@ -1,18 +1,15 @@
 <div class="panel panel-default" ng-switch on="panel.type" ng-if="savedObj || error">
   <div class="panel-heading">
     <span class="panel-title" title="{{::savedObj.title}}">
-      <i
-        class="fa"
-        ng-class="savedObj.vis.type.icon"
-        aria-label="{{::savedObj.vis.type.title}} Icon"
-        title="{{::savedObj.vis.type.title}}">
-      </i>
       {{::savedObj.title}}
     </span>
     <div class="btn-group">
       <a aria-label="Edit" ng-show="chrome.getVisible() && editUrl" ng-href="{{::editUrl}}">
         <i aria-hidden="true" class="fa fa-pencil"></i>
       </a>
+      <a aria-label="Move" ng-show="chrome.getVisible()" class="panel-move">
+        <i aria-hidden="true" class="fa fa-arrows"></i>
+      </a>
       <a aria-label="Remove" ng-show="chrome.getVisible()" ng-click="remove()">
         <i aria-hidden="true" class="fa fa-times"></i>
       </a>

src/plugins/kibana/public/dashboard/directives/grid.js

@@ -27,7 +27,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
       // number of columns to render
       const COLS = 12;
       // number of pixed between each column/row
-      const SPACER = 10;
+      const SPACER = 0;
       // pixels used by all of the spacers (gridster puts have a spacer on the ends)
       const spacerSize = SPACER * COLS;
 
@@ -46,7 +46,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
             stop: readGridsterChangeHandler
           },
           draggable: {
-            handle: '.panel-heading, .panel-title',
+            handle: '.panel-move, .fa-arrows',
             stop: readGridsterChangeHandler
           }
         }).data('gridster');
@@ -232,4 +232,3 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
     }
   };
 });
-

src/plugins/kibana/public/dashboard/index.html

@@ -1,7 +1,62 @@
 <div dashboard-app class="app-container dashboard-container">
-  <navbar ng-show="chrome.getVisible()" name="dashboard">
-    <span class="name" ng-if="dash.id" ng-bind="::dash.title" tooltip="{{::dash.title}}" tooltip-append-to-body="true"></span>
+  <navbar name="dashboard-options" class="kibana-nav-options">
+    <div class="kibana-nav-info">
+      <span ng-show="dash.id" class="kibana-nav-info-title">
+        <span ng-bind="::dash.title"></span>
+      </span>
+    </div>
+
+    <div class="button-group kibana-nav-actions" role="toolbar">
+      <button ng-click="newDashboard()"
+        aria-label="New Dashboard">
+        <span>New</span>
+      </button>
+      <button
+        aria-label="Save Dashboard"
+        aria-haspopup="false"
+        aria-expanded="{{ configTemplate.is('save') }}"
+        ng-class="{active: configTemplate.is('save')}"
+        ng-click="configTemplate.toggle('save');">
+        <span>Save</span>
+      </button>
+      <button
+        aria-label="Load Saved Dashboard"
+        aria-haspopup="false"
+        aria-expanded="{{ configTemplate.is('load') }}"
+        ng-class="{active: configTemplate.is('load')}"
+        ng-click="configTemplate.toggle('load');">
+        <span>Open</span>
+      </button>
+      <button
+        aria-label="Share Dashboard"
+        aria-haspopup="false"
+        aria-expanded="{{ configTemplate.is('share') }}"
+        ng-class="{active: configTemplate.is('share')}"
+        ng-click="configTemplate.toggle('share');">
+        <span>Share</span>
+      </button>
+      <button
+        aria-label="Add Visualization"
+        aria-haspopup="false"
+        aria-expanded="{{ configTemplate.is('pickVis') }}"
+        ng-class="{active: configTemplate.is('pickVis')}"
+        ng-click="configTemplate.toggle('pickVis');">
+        <span>Add visualization</span>
+      </button>
+      <button
+        aria-label="Options"
+        aria-haspopup="false"
+        aria-expanded="{{ configTemplate.is('options') }}"
+        ng-class="{active: configTemplate.is('options')}"
+        ng-click="configTemplate.toggle('options');">
+        <span>Options</span>
+      </button>
+      <div class="chrome-actions"kbn-chrome-append-nav-controls></div>
+    </div>
+  </navbar>
+  <config config-template="configTemplate" config-object="opts"></config>
 
+  <navbar ng-show="chrome.getVisible()" name="dashboard-search">
     <form name="queryInput"
       class="fill inline-form"
       ng-submit="filterResults()"
@@ -29,66 +84,9 @@
       </div>
 
     </form>
-
-    <div class="button-group" role="toolbar">
-      <kbn-tooltip text="New Dashboard" placement="bottom" append-to-body="1">
-        <button ng-click="newDashboard()" aria-label="New Dashboard"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
-      </kbn-tooltip>
-      <kbn-tooltip text="Save Dashboard" placement="bottom" append-to-body="1">
-        <button
-          aria-label="Save Dashboard"
-          aria-haspopup="true"
-          aria-expanded="{{ configTemplate.is('save') }}"
-          ng-class="{active: configTemplate.is('save')}"
-          ng-click="configTemplate.toggle('save');">
-          <i aria-hidden="true" class="fa fa-save"></i>
-        </button>
-      </kbn-tooltip>
-      <kbn-tooltip text="Load Saved Dashboard" placement="bottom" append-to-body="1">
-        <button
-          aria-label="Load Saved Dashboard"
-          aria-haspopup="true"
-          aria-expanded="{{ configTemplate.is('load') }}"
-          ng-class="{active: configTemplate.is('load')}"
-          ng-click="configTemplate.toggle('load');">
-          <i aria-hidden="true" class="fa fa-folder-open-o"></i>
-        </button>
-      </kbn-tooltip>
-      <kbn-tooltip text="Share" placement="bottom" append-to-body="1">
-        <button
-          aria-label="Share Dashboard"
-          aria-haspopup="true"
-          aria-expanded="{{ configTemplate.is('share') }}"
-          ng-class="{active: configTemplate.is('share')}"
-          ng-click="configTemplate.toggle('share');">
-          <i aria-hidden="true" class="fa fa-external-link"></i>
-        </button>
-      </kbn-tooltip>
-      <kbn-tooltip text="Add Visualization" placement="bottom" append-to-body="1">
-        <button
-          aria-label="Add Visualization"
-          aria-haspopup="true"
-          aria-expanded="{{ configTemplate.is('pickVis') }}"
-          ng-class="{active: configTemplate.is('pickVis')}"
-          ng-click="configTemplate.toggle('pickVis');">
-          <i aria-hidden="true" class="fa fa-plus-circle"></i>
-        </button>
-      </kbn-tooltip>
-      <kbn-tooltip text="Options" placement="bottom" append-to-body="1">
-        <button
-          aria-label="Options"
-          aria-haspopup="true"
-          aria-expanded="{{ configTemplate.is('options') }}"
-          ng-class="{active: configTemplate.is('options')}"
-          ng-click="configTemplate.toggle('options');">
-          <i aria-hidden="true" class="fa fa-gear"></i>
-        </button>
-      </kbn-tooltip>
-    </div>
+    <div class="button-group"></div>
   </navbar>
 
-  <config config-template="configTemplate" config-object="opts"></config>
-
   <filter-bar state="state"></filter-bar>
 
   <div ng-show="!state.panels.length" class="text-center start-screen">

src/plugins/kibana/public/dashboard/index.js

@@ -105,7 +105,9 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         load: require('plugins/kibana/dashboard/partials/load_dashboard.html'),
         share: require('plugins/kibana/dashboard/partials/share.html'),
         pickVis: require('plugins/kibana/dashboard/partials/pick_visualization.html'),
-        options: require('plugins/kibana/dashboard/partials/options.html')
+        options: require('plugins/kibana/dashboard/partials/options.html'),
+        filter: require('ui/chrome/config/filter.html'),
+        interval: require('ui/chrome/config/interval.html')
       });
 
       $scope.refresh = _.bindKey(courier, 'fetch');
@@ -239,7 +241,8 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         ui: $state.options,
         save: $scope.save,
         addVis: $scope.addVis,
-        addSearch: $scope.addSearch
+        addSearch: $scope.addSearch,
+        timefilter: $scope.timefilter
       };
 
       init();