Integrate Kibana UI Framework CSS.

- Migrate to new localNav component and subcomponent styles. - Add support for multi-slot transclusion to kbnTopNav. - Update Dashboard, Discover, Management, Visualize, Dev Tools, Timelion to use kbnTopNav consistently. - Update these apps to also display localNavDropdowns consistently, including Timepicker (this mostly meant adding titles). - Add checkLicenses npm script. - Add .fullWidth utility class and use it to make search forms 100% width.
marcelhallmann · Oct 27, 2016 · b5444c4 · b5444c4
1 parent 612912f
commit b5444c4
Show file tree

Hide file tree

Showing 53 changed files with 820 additions and 863 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "test:server": "grunt test:server",
     "test:coverage": "grunt test:coverage",
     "test:visualRegression": "grunt test:visualRegression",
+    "checkLicenses": "grunt licenses",
     "build": "grunt build",
     "release": "grunt release",
     "start": "sh ./bin/kibana --dev",
@@ -71,6 +72,7 @@
     "@bigfunger/decompress-zip": "0.2.0-stripfix3",
     "@bigfunger/jsondiffpatch": "0.1.38-webpack",
     "@elastic/datemath": "2.3.0",
+    "@elastic/kibana-ui-framework": "0.0.9",
     "@spalger/filesaver": "1.1.2",
     "@spalger/leaflet-draw": "0.2.3",
     "@spalger/leaflet-heat": "0.1.3",

diff --git a/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js b/src/core_plugins/console/public/src/controllers/sense_top_nav_controller.js
@@ -8,22 +8,26 @@ export function SenseTopNavController(Private) {
     {
       key: 'welcome',
       hideButton: true,
-      template: `<sense-welcome></sense-welcome>`
+      template: `<sense-welcome></sense-welcome>`,
+      testId: 'consoleWelcomeButton',
     },
     {
       key: 'history',
       description: 'History',
-      template: `<sense-history></sense-history>`
+      template: `<sense-history></sense-history>`,
+      testId: 'consoleHistoryButton',
     },
     {
       key: 'settings',
       description: 'Settings',
-      template: `<sense-settings></sense-settings>`
+      template: `<sense-settings></sense-settings>`,
+      testId: 'consoleSettingsButton',
     },
     {
       key: 'help',
       description: 'Help',
-      template: `<sense-help></sense-help>`
+      template: `<sense-help></sense-help>`,
+      testId: 'consoleHelpButton',
     },
   ]);
 

diff --git a/src/core_plugins/console/public/src/directives/help.html b/src/core_plugins/console/public/src/directives/help.html
@@ -1,36 +1,40 @@
-<h3>Help</h3>
+<div class="localDropdownTitle">Help</div>
 
 <tabset>
   <tab heading="Request format">
-    You can type one or more requests in the white editor. Console understands requests in a compact format:
-    <sense-help-example></sense-help-example>
+    <div class="list-group-item list-group-item--noBorder">
+      You can type one or more requests in the white editor. Console understands requests in a compact format:
+      <sense-help-example></sense-help-example>
+    </div>
   </tab>
   <tab heading="Keyboard tips">
-    <dl class="dl-horizontal">
-      <dt></dt>
-      <dd><strong>General editing</strong></dd>
-      <dt>Ctrl/Cmd + I</dt>
-      <dd>Auto indent current request</dd>
-      <dt>Ctrl + Space</dt>
-      <dd>Open Auto complete (even if not typing)</dd>
-      <dt>Ctrl/Cmd + Enter</dt>
-      <dd>Submit request</dd>
-      <dt>Ctrl/Cmd + Up/Down</dt>
-      <dd>Jump to the previous/next request start or end.</dd>
-      <dt>Ctrl/Cmd + Alt + L</dt>
-      <dd>Collapse/expand current scope.</dd>
-      <dt>Ctrl/Cmd + Option + 0</dt>
-      <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
-    </dl>
-    <dl class="dl-horizontal">
-      <dt></dt>
-      <dd><strong>When auto-complete is visible</strong></dd>
-      <dt>Down arrow</dt>
-      <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
-      <dt>Enter/Tab</dt>
-      <dd>Select the currently selected or the top most term in auto-complete menu</dd>
-      <dt>Esc</dt>
-      <dd>Close auto-complete menu</dd>
-    </dl>
+    <div class="list-group-item list-group-item--noBorder">
+      <dl class="dl-horizontal">
+        <dt></dt>
+        <dd><strong>General editing</strong></dd>
+        <dt>Ctrl/Cmd + I</dt>
+        <dd>Auto indent current request</dd>
+        <dt>Ctrl + Space</dt>
+        <dd>Open Auto complete (even if not typing)</dd>
+        <dt>Ctrl/Cmd + Enter</dt>
+        <dd>Submit request</dd>
+        <dt>Ctrl/Cmd + Up/Down</dt>
+        <dd>Jump to the previous/next request start or end.</dd>
+        <dt>Ctrl/Cmd + Alt + L</dt>
+        <dd>Collapse/expand current scope.</dd>
+        <dt>Ctrl/Cmd + Option + 0</dt>
+        <dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
+      </dl>
+      <dl class="dl-horizontal">
+        <dt></dt>
+        <dd><strong>When auto-complete is visible</strong></dd>
+        <dt>Down arrow</dt>
+        <dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
+        <dt>Enter/Tab</dt>
+        <dd>Select the currently selected or the top most term in auto-complete menu</dd>
+        <dt>Esc</dt>
+        <dd>Close auto-complete menu</dd>
+      </dl>
+    </div>
   </tab>
 </tabset>
diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
@@ -1,4 +1,4 @@
-<h3>History</h3>
+<div class="localDropdownTitle">History</div>
 
 <div class="history-body">
   <ul class="list-group history-reqs">
@@ -11,8 +11,7 @@ <h3>History</h3>
       ng-dblclick="history.restore(req)"
       title="{{ req.description }}"
       class="list-group-item history-req"
-      >
-
+    >
       {{ history.describeReq(req) }}
       <span class="history-req-icon"><i class="fa fa-chevron-right"></i></span>
     </li>

diff --git a/src/core_plugins/console/public/src/directives/settings.html b/src/core_plugins/console/public/src/directives/settings.html
@@ -1,22 +1,21 @@
-<h3>Settings</h3>
+<div class="localDropdownTitle">Settings</div>
 
 <form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
   <div class="form-group">
-    <h4>Editor &amp; Output pane settings</h4>
+    <div class="localDropdownHeader">
+      <div class="localDropdownHeader__label">Font Size</div>
+    </div>
 
-    <div class="form-group">
-      <label>Font Size</label>
-      <div>
-        <input
-          input-focus
-          ng-model="settings.vals.fontSize"
-          name="fontSize"
-          type="number"
-          required
-          class="form-control"
-          data-test-subj="setting-font-size-input"
-          >
-      </div>
+    <div>
+      <input
+        input-focus
+        ng-model="settings.vals.fontSize"
+        name="fontSize"
+        type="number"
+        required
+        class="form-control"
+        data-test-subj="setting-font-size-input"
+      >
     </div>
 
     <div class="checkbox">
@@ -28,7 +27,9 @@ <h4>Editor &amp; Output pane settings</h4>
   </div>
 
   <div class="form-group">
-    <h4>Autocomplete</h4>
+    <div class="localDropdownHeader">
+      <div class="localDropdownHeader__label">Autocomplete</div>
+    </div>
 
     <div class="checkbox">
       <label>

diff --git a/src/core_plugins/console/public/src/directives/welcome.html b/src/core_plugins/console/public/src/directives/welcome.html
@@ -1,6 +1,6 @@
-<h3>Welcome to Console</h3>
+<div class="localDropdownTitle">Welcome to Console</div>
 
-<h4>Quick intro to the UI</h4>
+<p><strong>Quick intro to the UI</strong></p>
 
 <p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
   Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
@@ -14,8 +14,7 @@ <h4>Quick intro to the UI</h4>
   These suggestions are made based on the request structure <i>as well as</i> your indices and types.
 </p>
 
-
-<h4>A few quick tips, while I have your attention</h4>
+<p><strong>A few quick tips, while I have your attention</strong></p>
 <ul>
   <li>Submit requests to ES using the green triangle button.</li>
   <li>Use the wrench menu for other useful things.</li>

diff --git a/src/core_plugins/kibana/public/dashboard/index.html b/src/core_plugins/kibana/public/dashboard/index.html
@@ -1,43 +1,57 @@
 <dashboard-app class="app-container dashboard-container">
+  <!-- Local nav. -->
   <kbn-top-nav name="dashboard" config="topNavMenu">
-    <div class="kibana-nav-info">
-      <span ng-show="dash.id" class="kibana-nav-info-title">
-        <span ng-bind="::dash.title"></span>
-      </span>
-    </div>
-  </kbn-top-nav>
-
-  <navbar ng-show="chrome.getVisible()" name="dashboard-search">
-    <form name="queryInput"
-      class="fill inline-form"
-      ng-submit="filterResults()"
-      role="form">
-
-      <div class="typeahead" kbn-typeahead="dashboard">
-        <div class="input-group"
-          ng-class="queryInput.$invalid ? 'has-error' : ''">
-
-          <input
-            type="text"
-            placeholder="Filter..."
-            aria-label="Filter input"
-            class="form-control"
-            ng-model="state.query"
-            input-focus
-            kbn-typeahead-input
-            parse-query>
-          <button type="submit" class="btn btn-default" ng-disabled="queryInput.$invalid" aria-label="Filter dashboards">
-            <span aria-hidden="true" class="fa fa-search"></span>
-          </button>
-        </div>
-
-        <kbn-typeahead-items></kbn-typeahead-items>
+    <!-- Transcluded elements. -->
+    <div data-transclude-slots>
+      <!-- Title. -->
+      <div
+        data-transclude-slot="topLeftCorner"
+        class="localTitle"
+      >
+        <span
+          ng-show="dash.id"
+          ng-bind="::dash.title"
+        ></span>
       </div>
 
-    </form>
-    <div class="button-group"></div>
-  </navbar>
+      <!-- Search. -->
+      <form
+        data-transclude-slot="bottomRow"
+        class="fullWidth"
+        ng-show="chrome.getVisible()"
+        role="form"
+        name="queryInput"
+        ng-submit="filterResults()"
+      >
+        <div class="typeahead" kbn-typeahead="dashboard">
+          <div class="localSearch">
+            <input
+              parse-query
+              input-focus
+              kbn-typeahead-input
+              ng-model="state.query"
+              placeholder="Filter..."
+              aria-label="Filter input"
+              type="text"
+              class="localSearchInput"
+              ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
+            >
+            <button
+              type="submit"
+              aria-label="Filter Dashboards"
+              class="localSearchButton"
+              ng-disabled="queryInput.$invalid"
+            >
+              <span class="fa fa-search" aria-hidden="true"></span>
+            </button>
+          </div>
+          <kbn-typeahead-items></kbn-typeahead-items>
+        </div>
+      </form>
+    </div>
+  </kbn-top-nav>
 
+  <!-- Filters. -->
   <filter-bar state="state"></filter-bar>
 
   <div ng-show="!state.panels.length" class="text-center start-screen">

diff --git a/src/core_plugins/kibana/public/dashboard/index.js b/src/core_plugins/kibana/public/dashboard/index.js
@@ -119,7 +119,7 @@ app.directive('dashboardApp', function (Notifier, courier, AppState, timefilter,
         template: require('plugins/kibana/dashboard/partials/save_dashboard.html')
       }, {
         key: 'open',
-        description: 'Load Saved Dashboard',
+        description: 'Open Saved Dashboard',
         template: require('plugins/kibana/dashboard/partials/load_dashboard.html')
       }, {
         key: 'share',

diff --git a/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
@@ -1 +1,2 @@
-<saved-object-finder type="dashboards"></saved-object-finder>
+<div class="localDropdownTitle">Open Dashboard</div>
+<saved-object-finder type="dashboards"></saved-object-finder>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/options.html b/src/core_plugins/kibana/public/dashboard/partials/options.html
@@ -1,10 +1,9 @@
-<form role="form" class="options">
-  <p>
-    <div class="input-group">
-      <label>
-        <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
-        Use dark theme
-      </label>
-    </div>
-  </p>
+<form role="form">
+  <div class="localDropdownTitle">Options</div>
+  <div class="input-group">
+    <label>
+      <input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">
+      Use dark theme
+    </label>
+  </div>
 </form>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html b/src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
@@ -1,14 +1,27 @@
-<div ng-switch on="mode" ng-init="mode = 'visualization'" class="dashboard-panel-picker">
+<div
+  ng-switch="mode"
+  ng-init="mode = 'visualization'"
+>
+  <div class="localDropdownTitle">Add Panels</div>
+
   <ul class="nav nav-tabs">
-    <li ng-class="{active: mode == 'visualization'}"><a ng-click="mode='visualization'" title="Visualizations">Visualizations</a></li>
-    <li ng-class="{active: mode == 'search'}"><a ng-click="mode='search'" title="Searches">Searches</a></li>
+    <li ng-class="{active: mode == 'visualization'}">
+      <a ng-click="mode='visualization'" title="Visualizations">
+        Visualization
+      </a>
+    </li>
+    <li ng-class="{active: mode == 'search'}">
+      <a ng-click="mode='search'" title="Searches">
+        Saved Search
+      </a>
+    </li>
   </ul>
 
-  <div class="list-group-item" ng-switch-when="visualization">
+  <div class="list-group-item list-group-item--noBorder" ng-switch-when="visualization">
     <saved-object-finder title="Choose a visualization" type="visualizations" on-choose="opts.addVis"></saved-object-finder>
   </div>
 
-  <div class="list-group-item" ng-switch-when="search">
+  <div class="list-group-item list-group-item--noBorder" ng-switch-when="search">
     <saved-object-finder title="Choose a search" type="searches" on-choose="opts.addSearch"></saved-object-finder>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html b/src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
@@ -1,8 +1,16 @@
-<form ng-submit="opts.save()" role="form">
-  <div class="form-group">
-    <label for="dashboardTitle">Save As</label>
-    <input id="dashboardTitle" type="text" ng-model="opts.dashboard.title" class="form-control" placeholder="Dashboard title" input-focus="select">
-  </div>
+<form
+  role="form"
+  ng-submit="opts.save()"
+>
+  <div class="localDropdownTitle">Save Dashboard</div>
+  <input
+    class="localDropdownInput"
+    id="dashboardTitle"
+    type="text"
+    ng-model="opts.dashboard.title"
+    placeholder="Dashboard title"
+    input-focus="select"
+  >
   <div class="form-group">
     <label>
       <input type="checkbox" ng-model="opts.dashboard.timeRestore" ng-checked="opts.dashboard.timeRestore">

diff --git a/src/core_plugins/kibana/public/dashboard/styles/main.less b/src/core_plugins/kibana/public/dashboard/styles/main.less
@@ -152,7 +152,3 @@ dashboard-grid {
     }
   }
 }
-
-.dashboard-panel-picker > .list-group-item {
-  border-top: 0;
-}
-Original file line number
+Diff line change
@@ Expand Up / @@ -152,7 +152,3 @@ dashboard-grid { @@
         }
       }
     }
-    .dashboard-panel-picker > .list-group-item {
-      border-top: 0;
-    }