@@ -84,17 +92,6 @@
- -
- - - - - - {{(hits || 0) | number:0}} - -
-
@@ -153,7 +150,6 @@

Examples:

Searching

-
{{fetchStatus.complete}}/{{fetchStatus.total}}
diff --git a/src/plugins/kibana/public/discover/styles/main.less b/src/plugins/kibana/public/discover/styles/main.less index 13b53fc815b18..f9c6a466e61b6 100644 --- a/src/plugins/kibana/public/discover/styles/main.less +++ b/src/plugins/kibana/public/discover/styles/main.less @@ -29,6 +29,10 @@ height: 200px; max-height: 600px; + .loading { + opacity: 1 !important; + } + &.only-spy { height: auto; @@ -71,12 +75,10 @@ } &-info { - background-color: @discover-info-bg; - float: right; - padding: 5px 10px; + line-height: 30px; + padding: 0px 10px; border-bottom-left-radius: @border-radius-base; - text-align: right; &-title { font-weight: bold; @@ -245,6 +247,10 @@ disc-field-chooser { } } + .sidebar-item.active .sidebar-item-title { + background-color: @sidebar-active-bg; + color: @sidebar-active-color; + } .sidebar-item-title { position: relative; } diff --git a/src/plugins/kibana/public/kibana.js b/src/plugins/kibana/public/kibana.js index d3704cba58be1..12540a8a943ad 100644 --- a/src/plugins/kibana/public/kibana.js +++ b/src/plugins/kibana/public/kibana.js @@ -28,36 +28,14 @@ routes chrome .setBrand({ - 'logo': 'url(' + kibanaLogoUrl + ') left no-repeat', - 'smallLogo': 'url(' + kibanaLogoUrl + ') left no-repeat' + 'logo': 'url(' + kibanaLogoUrl + ') 6px 10px / 140px 50px no-repeat #e8488b', + 'smallLogo': 'url(' + kibanaLogoUrl + ') 6px 10px / 140px 50px no-repeat #e8488b' }) -.setNavBackground('#222222') .setTabDefaults({ resetWhenActive: true, - lastUrlStore: window.sessionStore, + lastUrlStore: window.sessionStorage, activeIndicatorColor: '#656a76' }) -.setTabs([ - { - id: 'discover', - title: 'Discover' - }, - { - id: 'visualize', - title: 'Visualize', - activeIndicatorColor: function () { - return (String(this.lastUrl).indexOf('/visualize/step/') === 0) ? 'white' : '#656a76'; - } - }, - { - id: 'dashboard', - title: 'Dashboard' - }, - { - id: 'settings', - title: 'Settings' - } -]) .setRootController('kibana', function ($scope, $rootScope, courier, config) { function setDefaultTimezone() { moment.tz.setDefault(config.get('dateFormat:tz')); diff --git a/src/plugins/kibana/public/settings/app.html b/src/plugins/kibana/public/settings/app.html index 6bb1ecd5a167c..f78a64d809790 100644 --- a/src/plugins/kibana/public/settings/app.html +++ b/src/plugins/kibana/public/settings/app.html @@ -1,6 +1,7 @@
diff --git a/src/plugins/kibana/public/visualize/wizard/wizard.js b/src/plugins/kibana/public/visualize/wizard/wizard.js index 77f13971597ce..e59a1bef78484 100644 --- a/src/plugins/kibana/public/visualize/wizard/wizard.js +++ b/src/plugins/kibana/public/visualize/wizard/wizard.js @@ -8,7 +8,7 @@ import uiModules from 'ui/modules'; const templateStep = function (num, txt) { - return '
' + txt + '
'; + return '
' + txt + '
'; }; 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}`; + }; }); diff --git a/src/plugins/metric_vis/public/metric_vis.less b/src/plugins/metric_vis/public/metric_vis.less index bc0b7244a5e34..88abea610948d 100644 --- a/src/plugins/metric_vis/public/metric_vis.less +++ b/src/plugins/metric_vis/public/metric_vis.less @@ -16,6 +16,5 @@ .metric-container { text-align: center; - padding: 1em; } } diff --git a/src/plugins/status_page/public/status_page.js b/src/plugins/status_page/public/status_page.js index 8938e33e62bf7..52e39042bb874 100644 --- a/src/plugins/status_page/public/status_page.js +++ b/src/plugins/status_page/public/status_page.js @@ -7,13 +7,6 @@ import 'plugins/status_page/status_page.less'; const chrome = require('ui/chrome') -.setTabs([ - { - id: '', - title: 'Server Status', - activeIndicatorColor: '#EFF0F2' - } -]) .setRootTemplate(require('plugins/status_page/status_page.html')) .setRootController('ui', function ($http, $scope) { const ui = this; @@ -54,3 +47,8 @@ const chrome = require('ui/chrome') ui.refresh(); }); + +require('ui/modules').get('kibana') +.config(function (appSwitcherEnsureNavigationProvider) { + appSwitcherEnsureNavigationProvider.forceNavigation(true); +}); diff --git a/src/ui/index.js b/src/ui/index.js index b6a8350f54323..1231704ac5316 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -62,7 +62,7 @@ module.exports = async (kbnServer, server, config) => { server.decorate('reply', 'renderApp', function (app) { const payload = { app: app, - nav: uiExports.apps, + nav: uiExports.navLinks.inOrder, version: kbnServer.version, buildNum: config.get('pkg.buildNum'), buildSha: config.get('pkg.buildSha'), diff --git a/src/ui/public/agg_response/geo_json/_tooltip.html b/src/ui/public/agg_response/geo_json/_tooltip.html index 31540085da0b3..b0d07cb80e4b3 100644 --- a/src/ui/public/agg_response/geo_json/_tooltip.html +++ b/src/ui/public/agg_response/geo_json/_tooltip.html @@ -1,8 +1,8 @@ - - + +
{{detail.label}}{{detail.value}}{{detail.label}}{{detail.value}}
diff --git a/src/ui/public/agg_response/hierarchical/_tooltip.html b/src/ui/public/agg_response/hierarchical/_tooltip.html index 44527343e728b..e714441492663 100644 --- a/src/ui/public/agg_response/hierarchical/_tooltip.html +++ b/src/ui/public/agg_response/hierarchical/_tooltip.html @@ -1,16 +1,16 @@ - + - + -
field value {{metricCol.label}}
{{row.field}} {{row.bucket}} {{row.metric}}
\ No newline at end of file + diff --git a/src/ui/public/agg_response/point_series/_tooltip.html b/src/ui/public/agg_response/point_series/_tooltip.html index 9e1a52df59fb8..322d5a0bc3798 100644 --- a/src/ui/public/agg_response/point_series/_tooltip.html +++ b/src/ui/public/agg_response/point_series/_tooltip.html @@ -1,11 +1,11 @@ - - + -
{{detail.label}} + {{detail.label}} {{detail.value}} ({{detail.percent}})
\ No newline at end of file + diff --git a/src/ui/public/chrome/__tests__/_tab_fake_store.js b/src/ui/public/chrome/__tests__/_tab_fake_store.js index 1b8ab81602259..a678440d14b78 100644 --- a/src/ui/public/chrome/__tests__/_tab_fake_store.js +++ b/src/ui/public/chrome/__tests__/_tab_fake_store.js @@ -4,6 +4,7 @@ export default class TabFakeStore { constructor() { this[store] = new Map(); } getItem(k) { return this[store].get(k); } setItem(k, v) { return this[store].set(k, v); } + removeItem(k) { return this[store].delete(k); } getKeys() { return [ ...this[store].keys() ]; } getValues() { return [ ...this[store].values() ]; } } diff --git a/src/ui/public/chrome/__tests__/tab.js b/src/ui/public/chrome/__tests__/tab.js index dcba69a356f94..add635bf7e2c1 100644 --- a/src/ui/public/chrome/__tests__/tab.js +++ b/src/ui/public/chrome/__tests__/tab.js @@ -1,3 +1,4 @@ +import sinon from 'auto-release-sinon'; import Tab from '../tab'; import expect from 'expect.js'; import TabFakeStore from './_tab_fake_store'; @@ -89,13 +90,24 @@ describe('Chrome Tab', function () { it('discovers the lastUrl', function () { const lastUrlStore = new TabFakeStore(); const tab = new Tab({ id: 'foo', lastUrlStore }); - expect(tab.lastUrl).to.not.equal('bar'); + expect(tab.lastUrl).to.not.equal('/foo/bar'); - tab.setLastUrl('bar'); - expect(tab.lastUrl).to.equal('bar'); + tab.setLastUrl('/foo/bar'); + expect(tab.lastUrl).to.equal('/foo/bar'); const tab2 = new Tab({ id: 'foo', lastUrlStore }); - expect(tab2.lastUrl).to.equal('bar'); + expect(tab2.lastUrl).to.equal('/foo/bar'); + }); + + it('logs a warning about last urls that do not match the rootUrl', function () { + const lastUrlStore = new TabFakeStore(); + const tab = new Tab({ id: 'foo', baseUrl: '/bar', lastUrlStore }); + tab.setLastUrl('/bar/foo/1'); + + const stub = sinon.stub(console, 'log'); + const tab2 = new Tab({ id: 'foo', baseUrl: '/baz', lastUrlStore }); + sinon.assert.calledOnce(stub); + expect(tab2.lastUrl).to.equal(null); }); }); @@ -167,14 +179,14 @@ describe('Chrome Tab', function () { expect(tab.getLastPath()).to.equal('/index'); }); - it('throws an error if the lastUrl does not extend the root url', function () { - expect(function () { - const baseUrl = 'http://local:5601/app/visualize#'; - const tab = new Tab({ baseUrl }); + it('logs a warning if the lastUrl does not extend the root url', function () { + const baseUrl = 'http://local:5601/app/visualize#'; + const tab = new Tab({ baseUrl }); + sinon.stub(console, 'log'); - tab.setLastUrl('http://local:5601/'); - tab.getLastPath(); - }).to.throwError(/invalid.*root/); + tab.setLastUrl('http://local:5601/'); + tab.getLastPath(); + sinon.assert.calledOnce(console.log);// eslint-disable-line no-console }); }); diff --git a/src/ui/public/chrome/api/__tests__/angular.js b/src/ui/public/chrome/api/__tests__/angular.js new file mode 100644 index 0000000000000..51b77b57df0a6 --- /dev/null +++ b/src/ui/public/chrome/api/__tests__/angular.js @@ -0,0 +1,19 @@ +import expect from 'expect.js'; + +import kbnAngular from '../angular'; +import TabFakeStore from '../../__tests__/_tab_fake_store'; +import { noop } from 'lodash'; + +describe('Chrome API :: Angular', () => { + describe('location helper methods', () => { + it('should return the sub app based on the url', () => { + const chrome = { + getInjected: noop, + addBasePath: noop + }; + kbnAngular(chrome, {}); + }); + it('should return breadcrumbs based on the url', () => { + }); + }); +}); diff --git a/src/ui/public/chrome/api/__tests__/apps.js b/src/ui/public/chrome/api/__tests__/apps.js index f0269e79c46d4..e50fe59e57ef1 100644 --- a/src/ui/public/chrome/api/__tests__/apps.js +++ b/src/ui/public/chrome/api/__tests__/apps.js @@ -86,11 +86,11 @@ describe('Chrome API :: apps', function () { describe('#getAppUrl()', function () { it('returns the resolved url of the current app', function () { const chrome = {}; - const app = { url: '/foo' }; + const app = { navLink: { url: '/foo' } }; setup(chrome, { app }); const a = document.createElement('a'); - a.setAttribute('href', app.url); + a.setAttribute('href', app.navLink.url); expect(chrome.getAppUrl()).to.equal(a.href); }); diff --git a/src/ui/public/chrome/api/angular.js b/src/ui/public/chrome/api/angular.js index 77d8ea77ec3fb..e9b12626d36ab 100644 --- a/src/ui/public/chrome/api/angular.js +++ b/src/ui/public/chrome/api/angular.js @@ -3,6 +3,9 @@ import modules from 'ui/modules'; module.exports = function (chrome, internals) { + chrome.getFirstPathSegment = _.noop; + chrome.getBreadcrumbs = _.noop; + chrome.setupAngular = function () { var kibana = modules.get('kibana'); @@ -15,12 +18,22 @@ module.exports = function (chrome, internals) { .value('buildNum', internals.buildNum) .value('buildSha', internals.buildSha) .value('sessionId', Date.now()) + .value('chrome', chrome) .value('esUrl', (function () { var a = document.createElement('a'); a.href = chrome.addBasePath('/elasticsearch'); return a.href; }())) - .config(chrome.$setupXsrfRequestInterceptor); + .config(chrome.$setupXsrfRequestInterceptor) + .run(($location) => { + chrome.getFirstPathSegment = () => { + return $location.path().split('/')[1]; + }; + + chrome.getBreadcrumbs = () => { + return $location.path().split('/').slice(1); + }; + }); require('../directives')(chrome, internals); diff --git a/src/ui/public/chrome/api/apps.js b/src/ui/public/chrome/api/apps.js index ee6b7b1b86aff..c94dd537c28c7 100644 --- a/src/ui/public/chrome/api/apps.js +++ b/src/ui/public/chrome/api/apps.js @@ -3,8 +3,8 @@ import { resolve } from 'url'; module.exports = function (chrome, internals) { - if (internals.app) { - internals.app.url = resolve(window.location.href, internals.app.url); + if (get(internals, 'app.navLink.url')) { + internals.app.navLink.url = resolve(window.location.href, internals.app.navLink.url); } internals.appUrlStore = internals.appUrlStore || window.sessionStorage; @@ -35,7 +35,7 @@ module.exports = function (chrome, internals) { }; chrome.getAppUrl = function () { - return get(internals, ['app', 'url']); + return get(internals, ['app', 'navLink', 'url']); }; chrome.getInjected = function (name, def) { diff --git a/src/ui/public/chrome/api/nav.js b/src/ui/public/chrome/api/nav.js index 0b630a2eccd14..d993baa216ef9 100644 --- a/src/ui/public/chrome/api/nav.js +++ b/src/ui/public/chrome/api/nav.js @@ -1,15 +1,11 @@ import { parse, format } from 'url'; -import { startsWith, isString } from 'lodash'; +import { startsWith, isString, find } from 'lodash'; export default function (chrome, internals) { chrome.getNavLinks = function () { return internals.nav; }; - chrome.getLastSubUrlFor = function (url) { - return internals.appUrlStore.getItem(`lastSubUrl:${url}`); - }; - chrome.getBasePath = function () { return internals.basePath || ''; }; @@ -34,26 +30,46 @@ export default function (chrome, internals) { }); }; + function lastSubUrlKey(link) { + return `lastSubUrl:${link.url}`; + } + + function setLastUrl(link, url) { + link.lastSubUrl = url; + internals.appUrlStore.setItem(lastSubUrlKey(link), url); + } + + function refreshLastUrl(link) { + link.lastSubUrl = internals.appUrlStore.getItem(lastSubUrlKey(link)); + } + internals.trackPossibleSubUrl = function (url) { for (const link of internals.nav) { - if (startsWith(url, link.url)) { - link.lastSubUrl = url; - internals.appUrlStore.setItem(`lastSubUrl:${link.url}`, url); + link.active = startsWith(url, link.url); + + if (link.active) { + setLastUrl(link, url); + continue; } + + const matchingTab = find(internals.tabs, { rootUrl: link.url }); + if (matchingTab) { + setLastUrl(link, matchingTab.getLastUrl()); + continue; + } + + refreshLastUrl(link); } }; internals.nav.forEach(link => { // convert all link urls to absolute urls - var a = document.createElement('a'); a.setAttribute('href', link.url); link.url = a.href; - link.lastSubUrl = chrome.getLastSubUrlFor(link.url); - - if (link.url === chrome.getAppUrl()) { - link.active = true; - } }); + // simulate a possible change in url to initialize the + // link.active and link.lastUrl properties + internals.trackPossibleSubUrl(document.location.href); }; diff --git a/src/ui/public/chrome/api/tabs.js b/src/ui/public/chrome/api/tabs.js index 97205ed597484..c7ac25e14ce24 100644 --- a/src/ui/public/chrome/api/tabs.js +++ b/src/ui/public/chrome/api/tabs.js @@ -76,12 +76,6 @@ module.exports = function (chrome, internals) { return internals.tabs.getActive(); }; - /** - * @param {any} def - the default value if there isn't any active tab - * @return {any} - */ - chrome.getActiveTabId = activeGetter('id'); - /** * @param {any} def - the default value if there isn't any active tab * @return {any} diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index 6e5cccbfdd497..465b9525c5fdd 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -1,74 +1,86 @@ -
- +
- - - - - - - - - - -
+
diff --git a/src/ui/public/chrome/chrome.js b/src/ui/public/chrome/chrome.js index bb51cd12c1fa0..cb0e2bd6c3e4a 100644 --- a/src/ui/public/chrome/chrome.js +++ b/src/ui/public/chrome/chrome.js @@ -9,6 +9,7 @@ import $ from 'jquery'; import 'ui/timefilter'; import 'ui/private'; import 'ui/promises'; +import 'ui/directives/kbn_src'; var chrome = {}; var internals = _.defaults( diff --git a/src/ui/public/chrome/config/filter.html b/src/ui/public/chrome/config/filter.html index 71a3dd32645ef..1930ee75d01ab 100644 --- a/src/ui/public/chrome/config/filter.html +++ b/src/ui/public/chrome/config/filter.html @@ -1,7 +1,7 @@ + interval="opts.timefilter.refreshInterval"> diff --git a/src/ui/public/chrome/config/interval.html b/src/ui/public/chrome/config/interval.html index d41a601709709..44d86b4140925 100644 --- a/src/ui/public/chrome/config/interval.html +++ b/src/ui/public/chrome/config/interval.html @@ -1,7 +1,7 @@ + interval="opts.timefilter.refreshInterval"> diff --git a/src/ui/public/chrome/context.js b/src/ui/public/chrome/context.js index 092ea422dcdff..4328d85243ce6 100644 --- a/src/ui/public/chrome/context.js +++ b/src/ui/public/chrome/context.js @@ -21,11 +21,6 @@ uiModules // chrome is responsible for timepicker ui and state transfer... $scope.timefilter = timefilter; - $scope.pickerTemplate = new ConfigTemplate({ - filter: require('ui/chrome/config/filter.html'), - interval: require('ui/chrome/config/interval.html') - }); - $scope.toggleRefresh = function () { timefilter.refreshInterval.pause = !timefilter.refreshInterval.pause; }; diff --git a/src/ui/public/chrome/directives/active_http_spinner.html b/src/ui/public/chrome/directives/active_http_spinner.html index d7c9b64fbe3c6..eac432ce1ee6a 100644 --- a/src/ui/public/chrome/directives/active_http_spinner.html +++ b/src/ui/public/chrome/directives/active_http_spinner.html @@ -1,5 +1 @@ -
    - -
+ diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 7613cb03142b4..1e0a0d0e665da 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -1,7 +1,7 @@
-
-
{{ link.title[0] }}
+
+
{{ link.title[0] }}
{{ link.title }}
 diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/app_switcher/app_switcher.js index 7853012e4dcd1..5043b4c67f87e 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.js @@ -1,4 +1,3 @@ - import DomLocationProvider from 'ui/dom_location'; import { parse } from 'url'; import { bindKey } from 'lodash'; @@ -8,14 +7,45 @@ import appSwitcherTemplate from './app_switcher.html'; uiModules .get('kibana') +.provider('appSwitcherEnsureNavigation', function () { + let forceNavigation = false; + + this.forceNavigation = function (val) { + forceNavigation = !!val; + }; + + this.$get = ['Private', function (Private) { + const domLocation = Private(DomLocationProvider); + + return function (event) { + if (!forceNavigation || event.isDefaultPrevented() || event.altKey || event.metaKey || event.ctrlKey) { + return; + } + + const toParsed = parse(event.delegateTarget.href); + const fromParsed = parse(domLocation.href); + const sameProto = toParsed.protocol === fromParsed.protocol; + const sameHost = toParsed.host === fromParsed.host; + const samePath = toParsed.path === fromParsed.path; + + if (sameProto && sameHost && samePath) { + toParsed.hash && domLocation.reload(); + + // event.preventDefault() keeps the browser from seeing the new url as an update + // and even setting window.location does not mimic that behavior, so instead + // we use stopPropagation() to prevent angular from seeing the click and + // starting a digest cycle/attempting to handle it in the router. + event.stopPropagation(); + } + }; + }]; +}) .directive('appSwitcher', function () { return { restrict: 'E', template: appSwitcherTemplate, controllerAs: 'switcher', - controller: function ($scope, Private) { - var domLocation = Private(DomLocationProvider); - + controller($scope, appSwitcherEnsureNavigation) { // since we render this in an isolate scope we can't "require: ^chrome", but // rather than remove all helpfull checks we can just check here. if (!$scope.chrome || !$scope.chrome.getNavLinks) { @@ -26,28 +56,7 @@ uiModules // links don't cause full-navigation events in certain scenarios // so we force them when needed - this.ensureNavigation = function (event, app) { - if (event.isDefaultPrevented() || event.altKey || event.metaKey || event.ctrlKey) { - return; - } - - var toParsed = parse(event.delegateTarget.href); - var fromParsed = parse(domLocation.href); - var sameProto = toParsed.protocol === fromParsed.protocol; - var sameHost = toParsed.host === fromParsed.host; - var samePath = toParsed.path === fromParsed.path; - - if (sameProto && sameHost && samePath) { - toParsed.hash && domLocation.reload(); - - // event.preventDefault() keeps the browser from seeing the new url as an update - // and even setting window.location does not mimic that behavior, so instead - // we use stopPropagation() to prevent angular from seeing the click and - // starting a digest cycle/attempting to handle it in the router. - event.stopPropagation(); - } - }; - + this.ensureNavigation = appSwitcherEnsureNavigation; } }; }); diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index 95ac50baa310c..d085c25e0e6eb 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -1,55 +1,155 @@ +@import (reference) "~ui/styles/mixins"; @import (reference) "~ui/styles/variables"; -@app-icon-size: 48px; -@app-icon-padding: 10px; +body { overflow-x: hidden; } +.app-links-wrapper { + width: @as-open-width; + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 0; + background-color: @app-links-wrapper-background; + overflow: hidden; + transition: width @transition-time; + transition-delay: @transition-delay; + + &:hover { + .app-title { + display: inline-block; + } + + .app-wrapper { + transform: translateX(@as-open-width - @as-closed-width); + } + } + + .logo { + height: 70px; + width: @as-open-width; + list-style-type: none; + &.kibana { + background-image: url("~ui/images/kibana.svg"); + background-position: 6px 10px; + background-size: 140px 50px; + background-repeat: no-repeat; + background-color: #e8488b; + } + } + .bottom-apps { + position: absolute; + bottom: 0; + } +} +.app-wrapper { + .real-flex-parent(); + position: absolute; + transition: transform @transition-time; + transition-delay: @transition-delay; + left: @as-closed-width; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + margin: 0 auto; + background-color: #fff; + + &-panel { + .flex-parent(@shrink: 0); + box-shadow: -4px 0px 3px rgba(0,0,0,0.2); + } + + .navbar-right { + margin-right: 0; + } +} .app-links { text-align: justify; .app-link { - display: inline-block; - vertical-align: top; - text-align: left; - width: @app-icon-size + (@app-icon-padding * 2); - margin: 0px 10px; - padding: @app-icon-padding; - border-radius: @border-radius-base; + width: @as-open-width; + height: @app-icon-height; + line-height: @app-line-height; - .app-icon { + + > a { display: block; - height: @app-icon-size; - width: @app-icon-size; + height: 100%; + color: @white; + } + + &:hover { + background-color: @app-links-active-background; + } + + .app-icon { + float: left; + filter: invert(100%); + font-weight: bold; + text-align: center; + font-size: 1.7em; + display: inline-block; + height: @app-icon-height; + width: @as-closed-width; + + > img { + height: 18px; + margin-top: 8px; + } + } + + .app-icon-missing { + float: left; + text-align: center; + font-size: 1.7em; + display: inline-block; + height: @app-icon-height; + line-height: @app-icon-height; + width: @as-closed-width; background-position: center; background-size: contain; - border-radius: @border-radius-base; - background-color: @gray-light; - width: 100%; - - &-missing { - text-align: center; - font-size: 2.7em; - font-weight: bold; - font-family: @font-family-sans-serif; - color: #fff; - } + background-repeat: no-repeat; } .app-title { - color: @text-color; + width: calc(@as-open-width - @as-closed-width); + display: inline-block; + float: right; font-size: 0.9em; - width: 100%; - text-align: center; - margin-top: 3px; + text-align: left; + padding-left: 3px; + line-height: @app-icon-height; } - &:hover .app-title { - text-decoration: underline; + &.active { + background-color: @app-links-active-background; + > a { + color: #333; + text-decoration: none; + } + img { + filter: invert(100%); + } } - &.active { - background: @gray-lighter; - .app-title { - text-decoration: underline; + &:nth-child(1) { + background-color: @firstLinkColor; + &:hover { + background-color: lighten(@firstLinkColor, 5%); + } + } + + &:nth-child(2) { + background-color: @secondLinkColor; + &:hover { + background-color: lighten(@secondLinkColor, 5%); + } + } + + &:nth-child(3) { + background-color: @thirdLinkColor; + &:hover { + background-color: lighten(@thirdLinkColor, 5%); } } diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index 6b0f5789582c5..e40c57059f477 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -35,8 +35,8 @@ export default function (chrome, internals) { const onRouteChange = function () { let { href } = window.location; let persist = chrome.getVisible(); - internals.trackPossibleSubUrl(href); internals.tabs.consumeRouteUpdate(href, persist); + internals.trackPossibleSubUrl(href); }; $rootScope.$on('$routeChangeSuccess', onRouteChange); diff --git a/src/ui/public/chrome/tab.js b/src/ui/public/chrome/tab.js index 1a6884047f5ae..7cc9a108ab9ae 100644 --- a/src/ui/public/chrome/tab.js +++ b/src/ui/public/chrome/tab.js @@ -1,3 +1,4 @@ +import notify from 'ui/notify'; import _ from 'lodash'; import { escapeRegExp as reEsc } from 'lodash'; import { parse, format } from 'url'; @@ -28,7 +29,16 @@ export default class Tab { this.lastUrlStoreKey = `lastUrl:${this.id}`; this.lastUrlStore = spec.lastUrlStore; - this.lastUrl = this.lastUrlStore ? this.lastUrlStore.getItem(this.lastUrlStoreKey) : null; + + this.lastUrl = null; + if (this.lastUrlStore) { + this.lastUrl = this.lastUrlStore.getItem(this.lastUrlStoreKey); + if (this.lastUrl && !this.lastUrl.startsWith(this.rootUrl)) { + notify.log(`Found invalid lastUrl for tab with root url ${this.rootUrl}: "${this.lastUrl}"`); + this.lastUrl = null; + this.lastUrlStore.removeItem(this.lastUrlStoreKey); + } + } } href() { @@ -54,7 +64,8 @@ export default class Tab { let lastUrl = this.getLastUrl(); if (!lastUrl.startsWith(rootUrl)) { - throw new Error(`Tab "${id}" has invalid root "${rootUrl}" for last url "${lastUrl}"`); + notify.log(`Tab "${id}" has invalid root "${rootUrl}" for last url "${lastUrl}"`); + lastUrl = rootUrl; } return lastUrl.slice(rootUrl.length); diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less index 9c3a46f92e528..ccabd5c720f56 100644 --- a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less +++ b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less @@ -5,8 +5,6 @@ z-index: 1; .sidebar-collapser { - background-color: @collapser-bg; - height: 100%; position: absolute; top: 0; right: -(@collapser-width); @@ -14,21 +12,15 @@ cursor: pointer; z-index: -1; - &:hover { - background-color: @collapser-hover-bg; - border-color: @collapser-hover-bg; - color: @collapser-hover-color; - } - .chevron-cont{ position: absolute; - left: 2px; - top: 8px; - font-size: 10px; + left: 5px; + top: 5px; + color: @kibanaGray4; &:before { font-family: FontAwesome; - content: "\F053"; + content: "\F137"; } } } @@ -45,7 +37,7 @@ .sidebar-collapser { visibility: visible; .chevron-cont:before { - content: "\F054"; + content: "\F138"; } } } diff --git a/src/ui/public/config/defaults.js b/src/ui/public/config/defaults.js index fb8db40d6f322..21c6d6d450e53 100644 --- a/src/ui/public/config/defaults.js +++ b/src/ui/public/config/defaults.js @@ -2,7 +2,7 @@ import moment from 'moment-timezone'; import _ from 'lodash'; export default function configDefaultsProvider() { - // wraped in provider so that a new instance is given to each app/test + // wrapped in provider so that a new instance is given to each app/test return { 'buildNum': { @@ -112,7 +112,7 @@ export default function configDefaultsProvider() { 'visualization:colorMapping': { type: 'json', value: JSON.stringify({ - 'Count': '#57c17b' + 'Count': '#6eadc1' }), description: 'Maps values to specified colors within visualizations' }, diff --git a/src/ui/public/directives/__tests__/spinner.js b/src/ui/public/directives/__tests__/spinner.js deleted file mode 100644 index 291faa3ef2d1a..0000000000000 --- a/src/ui/public/directives/__tests__/spinner.js +++ /dev/null @@ -1,52 +0,0 @@ -import angular from 'angular'; -import expect from 'expect.js'; -import ngMock from 'ng_mock'; -import $ from 'jquery'; -import 'plugins/kibana/discover/index'; - - -var $parentScope; - -var $scope; - -var $elem; - -var init = function () { - // Load the application - ngMock.module('kibana'); - - // Create the scope - ngMock.inject(function ($rootScope, $compile) { - - // Give us a scope - $parentScope = $rootScope; - - // Create the element - $elem = angular.element( - '' - ); - - // And compile it - $compile($elem)($parentScope); - - // Fire a digest cycle - $elem.scope().$digest(); - - // Grab the isolate scope so we can test it - $scope = $elem.isolateScope(); - }); -}; - - -describe('spinner directive', function () { - - beforeEach(function () { - init(); - }); - - it('should contain 3 divs', function (done) { - expect($elem.children('div').length).to.be(3); - done(); - }); - -}); diff --git a/src/ui/public/directives/bread_crumbs.js b/src/ui/public/directives/bread_crumbs.js new file mode 100644 index 0000000000000..f78739f098a5b --- /dev/null +++ b/src/ui/public/directives/bread_crumbs.js @@ -0,0 +1,21 @@ +import _ from 'lodash'; +import chrome from 'ui/chrome/chrome'; +import breadCrumbsTemplate from 'ui/partials/bread_crumbs.html'; +import uiModules from 'ui/modules'; +var module = uiModules.get('kibana'); + +module.directive('breadCrumbs', function () { + return { + restrict: 'E', + scope: true, + template: breadCrumbsTemplate, + controller: function ($scope) { + $scope.crumbs = chrome.getBreadcrumbs(); + + if (_.last($scope.crumbs) === '') { + // Remove the empty string from the end of the array + $scope.crumbs.pop(); + } + } + }; +}); diff --git a/src/ui/public/directives/config.js b/src/ui/public/directives/config.js index 7c0fda3aa197f..8a9690fbe181d 100644 --- a/src/ui/public/directives/config.js +++ b/src/ui/public/directives/config.js @@ -57,8 +57,8 @@ module.directive('config', function ($compile) { html = $compile('' + '
' + wrapTmpl(tmpl) + - '
' + - ' ' + + '
' + + ' ' + '
' + '
' + '' diff --git a/src/ui/public/directives/kbn_href.js b/src/ui/public/directives/kbn_href.js index 26b0b4252df7b..20b4bd11a44e6 100644 --- a/src/ui/public/directives/kbn_href.js +++ b/src/ui/public/directives/kbn_href.js @@ -1,5 +1,4 @@ import UiModules from 'ui/modules'; -import chrome from 'ui/chrome'; import { words, camelCase, kebabCase } from 'lodash'; export function kbnUrlDirective(name) { @@ -8,7 +7,7 @@ export function kbnUrlDirective(name) { UiModules .get('kibana') - .directive(name, function (Private) { + .directive(name, function (Private, chrome) { return { restrict: 'A', link: function ($scope, $el, $attr) { diff --git a/src/ui/public/directives/saved_object_finder.js b/src/ui/public/directives/saved_object_finder.js index 6cb56f3fa48d4..4b1a02e1624bf 100644 --- a/src/ui/public/directives/saved_object_finder.js +++ b/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 diff --git a/src/ui/public/directives/spinner.js b/src/ui/public/directives/spinner.js deleted file mode 100644 index c839b299e4c13..0000000000000 --- a/src/ui/public/directives/spinner.js +++ /dev/null @@ -1,11 +0,0 @@ -import uiModules from 'ui/modules'; -var html = '
'; -var module = uiModules.get('kibana'); - -module.directive('spinner', function () { - return { - restrict: 'C', - template: html - }; -}); - diff --git a/src/ui/public/filter_bar/filter_bar.less b/src/ui/public/filter_bar/filter_bar.less index e68afae45e958..2bcc465c1dafe 100644 --- a/src/ui/public/filter_bar/filter_bar.less +++ b/src/ui/public/filter_bar/filter_bar.less @@ -47,13 +47,12 @@ filter-bar .confirm { } filter-bar .bar { - padding: 6px 6px 4px 6px; + padding: 5px 6px 3px 6px; background: @filter-bar-bar-bg; - border-bottom: 1px solid; - border-bottom-color: @filter-bar-bar-border; + border-bottom: 0; &-condensed { - padding: 2px 6px 0px 6px !important; + padding: 6px 6px 2px 6px !important; font-size: 0.9em; background: @filter-bar-bar-condensed-bg; } diff --git a/src/ui/public/images/kibana.svg b/src/ui/public/images/kibana.svg index 888b9aafa2ef3..435adefaf46fc 100644 --- a/src/ui/public/images/kibana.svg +++ b/src/ui/public/images/kibana.svg @@ -1,6 +1,4 @@ - - image/svg+xml + + + + image/svg+xml + + Kibana-Full-Logo + + + + \ No newline at end of file + inkscape:current-layer="Layer_1" /> + + + + Kibana-Full-Logo + + + + + + + + + + + + + diff --git a/src/ui/public/paginated_table/paginated_table.html b/src/ui/public/paginated_table/paginated_table.html index 5a722e7d30701..d40155c0d1578 100644 --- a/src/ui/public/paginated_table/paginated_table.html +++ b/src/ui/public/paginated_table/paginated_table.html @@ -33,5 +33,4 @@
- diff --git a/src/ui/public/partials/bread_crumbs.html b/src/ui/public/partials/bread_crumbs.html new file mode 100644 index 0000000000000..b13b30b272b36 --- /dev/null +++ b/src/ui/public/partials/bread_crumbs.html @@ -0,0 +1,6 @@ +
    +
  • + {{crumb}} + / +
    • +
diff --git a/src/ui/public/partials/nav_config.html b/src/ui/public/partials/nav_config.html index f57b0dcb7ef19..e8a89062a45b1 100644 --- a/src/ui/public/partials/nav_config.html +++ b/src/ui/public/partials/nav_config.html @@ -2,7 +2,7 @@
-
- +
+
diff --git a/src/ui/public/partials/saved_object_finder.html b/src/ui/public/partials/saved_object_finder.html index 35c68c424c03d..e5eda0c18cdf8 100644 --- a/src/ui/public/partials/saved_object_finder.html +++ b/src/ui/public/partials/saved_object_finder.html @@ -1,26 +1,42 @@ -
-
-
- manage {{finder.properties.nouns}} + +
+
+
+ + + + +
+
+ {{finder.hitCount}} of {{finder.hitCount}} +
+
+ Manage {{finder.properties.nouns}} +
-
- - - {{finder.hitCount}} {{finder.hitCountNoun()}}
- -
    + + diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 6dcb58bf4b151..62899e437691e 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -7,7 +7,7 @@ html, body { .flex-parent(); height: 100%; - margin: 0px; + margin: 0; } label > small { @@ -76,16 +76,16 @@ ul.navbar-inline li { } .content { - .flex-parent(); - position: relative; - z-index: 0; + .real-flex-parent(@flow: row nowrap); + width: 100%; + height: 100%; + overflow: hidden; > nav { - position: relative; z-index: 1; .navbar-right { - margin-right: 0; + margin-right: 0 !important; } } } @@ -94,6 +94,7 @@ ul.navbar-inline li { .flex-parent(@shrink: 0); position: relative; z-index: 0; + background-color: @white; } .top-fixed { @@ -139,9 +140,31 @@ a { z-index: 0; } + .kibana-nav-options { + padding-bottom: 0; + padding-right: 0px; + + .kibana-nav-actions { + margin-left: auto; + + .button-group > :last-child { + border-radius: 0; + } + } + .kibana-nav-info { + line-height: 30px; + padding: 0 10px; + &-title { + font-weight: bold; + margin-right: 10px; + } + } + } + > config { z-index: 1; } + > navbar { padding-bottom: 4px; } > nav, > navbar { @@ -161,6 +184,7 @@ a { &:not(.pull-right):first-child { // This is how .navbar-brand accomplishes it's solid placement margin-left: -15px; + margin-top: 4px; } } } @@ -197,6 +221,11 @@ a { font-size: 16px; vertical-align: middle; } + + button { + background-color: transparent; + border-radius: 0; + } } kbn-info i { @@ -264,30 +293,136 @@ table { } } +//== breadCrumbsTemplate +bread-crumbs { + ul { + margin: 0; + padding: 8px 10px; + list-style-type: none; + text-transform: capitalize; + + >li { + display: inline; + >span { + color: @kibanaGray2; + } + >span:hover { + color: @kibanaGray1; + } + } + + >li:last-child { + >span { + color: @kibanaGray1; + } + } + } +} + //== SavedObjectFinder saved-object-finder { + .row { + background-color: @kibanaGray6; + padding: 10px; + display: flex; + flex-direction: row; + } + .form-group { margin-bottom: 0; + float: left; + flex: 8; + input { - .border-bottom-radius(0); + border: none; + padding: 5px 0px; + border-radius: @border-radius-base; + text-transform: capitalize; } - } - .list-group-item { - a { + span { + padding: 5px 0px; + background-color: @white; + border: none; + i { - color: @saved-object-finder-icon-color !important; + color: @kibanaGray3; + width: 15px; } + } - color: @saved-object-finder-link-color !important; + .finder-hit-count, .finder-manage-object { + min-width: 80px; + padding: 5px; } - &:first-child { - .border-top-radius(0) !important; + .finder-hit-count { + flex: 1; + text-align: center; + + span { + color: @kibanaGray3; + } } - &.list-group-no-results p { - margin-bottom: 0 !important; + .finder-manage-object { + flex: 3; + text-align: left; + text-transform: capitalize; + } + } + + .list-group-item-menu:hover { + background-color: transparent; + } + + ul.li-striped { + li { + border: none; + } + + li:nth-child(odd) { + background-color: @kibanaGray6; + } + + li:nth-child(even) { + background-color: @white; + } + + .paginate-heading { + font-weight: normal; + color: @kibanaGray1; + } + + .list-group-item { + padding: 8px 15px; + + ul { + padding: 0; + display: flex; + flex-direction: row; + + .finder-type { + margin-right: 10px; + } + } + + a { + i { + color: @saved-object-finder-icon-color !important; + margin-right: 10px; + } + + color: @saved-object-finder-link-color !important; + } + + &:first-child { + .border-top-radius(0) !important; + } + + &.list-group-no-results p { + margin-bottom: 0 !important; + } } } @@ -301,13 +436,6 @@ saved-object-finder { } } - span.finder-hit-count { - position: absolute; - right: 10px; - top: 25px; - font-size: 0.85em; - } - .finder-options { max-height: 300px; overflow: auto; diff --git a/src/ui/public/styles/config.less b/src/ui/public/styles/config.less index fa8f8708e1ebb..f31e0ad655193 100644 --- a/src/ui/public/styles/config.less +++ b/src/ui/public/styles/config.less @@ -11,13 +11,13 @@ width: 100%; background-color: @config-close-bg; border-radius: 0; - @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); - .box-shadow(@shadow); - text-align: center; + text-align: right; + padding: 10px; + line-height: 1em; } .container-fluid { - padding: 10px 10px; background-color: @config-bg; + padding: 10px; } } diff --git a/src/ui/public/styles/control_group.less b/src/ui/public/styles/control_group.less index 23cd303a065ce..ddfc55cde6b85 100644 --- a/src/ui/public/styles/control_group.less +++ b/src/ui/public/styles/control_group.less @@ -23,37 +23,6 @@ } } - button { - padding: @padding-base-vertical @padding-base-horizontal; - font-size: @font-size-base; - color: @control-group-link-color; - background-color: @control-group-bg; - - &:hover { - color: @control-group-link-hover-color; - background-color: @control-group-link-hover-bg; - } - - .active, &:active, &:focus { - color: @control-group-link-active-color; - background-color: @control-group-link-active-bg; - } - - &[disabled] { - color: @control-group-link-disabled-color; - background-color: @control-group-link-disabled-bg; - } - - &:focus { - // because some buttons are all side-to-side, the browser's outline - // is cut off by the next button. This causes the outline to be - // drawn inside the button. Appplied to all buttons so that it's - // uniform within this widget - outline-offset: -4px; - } - } - - // horizontal group of buttons/form elements .button-group, .inline-form .input-group { diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less index 91d13a8127898..0f8fab676d0c6 100644 --- a/src/ui/public/styles/dark-theme.less +++ b/src/ui/public/styles/dark-theme.less @@ -581,4 +581,3 @@ } } } - diff --git a/src/ui/public/styles/list-group-menu.less b/src/ui/public/styles/list-group-menu.less index d5af4934b85ec..e355126a94cf2 100644 --- a/src/ui/public/styles/list-group-menu.less +++ b/src/ui/public/styles/list-group-menu.less @@ -1,7 +1,7 @@ @import (reference) "~ui/styles/theme"; .list-group-menu { - &.select-mode a{ + &.select-mode a { outline: none; color: @list-group-menu-item-select-color; } diff --git a/src/ui/public/styles/mixins.less b/src/ui/public/styles/mixins.less index 568f9dd03dada..983ddc1ecfd30 100644 --- a/src/ui/public/styles/mixins.less +++ b/src/ui/public/styles/mixins.less @@ -1,15 +1,20 @@ @import "~ui/styles/variables"; @import (reference) "~bootstrap/less/mixins"; -.flex-parent(@grow: 1, @shrink: 1, @basis: auto) { +.flex-parent(@grow: 1, @shrink: 1, @basis: auto, @direction: column) { flex: @grow @shrink @basis; display: flex; - flex-direction: column; + flex-direction: @direction; > * { flex-shrink: 0; } } +.real-flex-parent(@flow: column nowrap) { + display: flex; + flex-flow: @flow; +} + .ellipsis() { white-space: nowrap; diff --git a/src/ui/public/styles/navbar.less b/src/ui/public/styles/navbar.less index cf1c84ff5a8f4..bd79fb0bad8cf 100644 --- a/src/ui/public/styles/navbar.less +++ b/src/ui/public/styles/navbar.less @@ -1,17 +1,17 @@ @import "./control_group"; +@navbar-margin: @padding-small-vertical; + navbar { .control-group(); max-height: @navbar-collapse-max-height; margin-bottom: @navbar-margin-bottom; // top and bottom padding are normally calcuated and stored in @navbar-padding-vertical, but flexbox - padding: @padding-base-vertical @navbar-padding-horizontal; + padding: 0 @navbar-padding-horizontal 6px @navbar-padding-horizontal; color: @navbar-default-color; background-color: @navbar-default-bg; - border-style: solid; - border-color: @navbar-default-border; - border-width: 0 0 1px; + border: none; z-index: @zindex-navbar; /*** @@ -22,6 +22,11 @@ navbar { padding-right: @navbar-padding-horizontal; } + .navbar-text { + margin-top: @navbar-margin; + margin-bottom: @navbar-margin; + } + // the "brand" that is displayed, usually on the left of the navbar > .name { align-self: center; @@ -47,6 +52,10 @@ navbar { &:active, &.active { color: @navbar-default-link-active-color; background-color: @navbar-default-link-active-bg; + box-shadow: none; + &:focus { + outline: none; + } } &[disabled] { @@ -59,9 +68,7 @@ navbar { button { color: @navbar-button-color; background-color: @navbar-button-bg; - border: 2px solid; - border-left: 0; - border-color: @navbar-button-border; + border: none; } } diff --git a/src/ui/public/styles/pagination.less b/src/ui/public/styles/pagination.less index c669e95eaca21..c372713a982b5 100644 --- a/src/ui/public/styles/pagination.less +++ b/src/ui/public/styles/pagination.less @@ -29,6 +29,9 @@ paginate { a { text-decoration: none; + background-color: @white; + margin-left: 2px; + padding: 8px 11px; } a:hover { diff --git a/src/ui/public/styles/sidebar.less b/src/ui/public/styles/sidebar.less index 1b25e5f66dda5..f6671b25ace87 100644 --- a/src/ui/public/styles/sidebar.less +++ b/src/ui/public/styles/sidebar.less @@ -11,8 +11,26 @@ .sidebar-well { background-color: @sidebar-well-bg; } + .vis-editor-agg-header-controls { + .btn-primary { + &.disabled, + &[disabled] { + background-color: @kibanaGray4; + } + } + } .sidebar-list { + .navbar-nav.navbar-right { + border-radius: 4px; + overflow:hidden; + margin-right: -13px; + margin-top: 2px; + .navbar-btn-link { + padding-left: 10px; + padding-right: 10px; + } + } ul { list-style: none; margin-bottom: 0px; @@ -58,12 +76,6 @@ &.full-title { white-space: normal; } - - &:hover, - &:hover .text-muted { - color: @sidebar-hover-color; - background-color: @sidebar-hover-bg; - } } &-text { @@ -81,7 +93,7 @@ &.primary { background-color: @btn-primary-bg; - color: @btn-primary-color + color: @btn-primary-color; } &.info { @@ -123,19 +135,27 @@ } .index-pattern { - background-color: @sidebar-active-bg; font-weight: bold; padding: 5px 10px; - color: @sidebar-active-color; display: flex; justify-content: space-between; + background-color: @kibanaGray4; + line-height: 28px; > * { flex: 0 1 auto; } + &.active { + background-color: @sidebar-active-bg; + color: @sidebar-active-color; + } } .index-pattern-selection .sidebar-item-title { background-color: @sidebar-index-pattern-selection-bg; + &:hover { + background-color: @sidebar-index-pattern-selection-bg-hover; + } } + } diff --git a/src/ui/public/styles/spinner.less b/src/ui/public/styles/spinner.less index 9178688a5387b..514a2c5e2496c 100644 --- a/src/ui/public/styles/spinner.less +++ b/src/ui/public/styles/spinner.less @@ -1,55 +1,40 @@ @import "~ui/styles/variables"; -.spinner { - margin: 0px auto 0; - white-space: nowrap; - text-align: center; - display: inline; -} - -.spinner > div { - width: 10px; - height: 10px; - background-color: @spinner-bg; - border-radius: 100%; - display: inline-block; - -webkit-animation: bouncedelay 1s infinite ease-in-out; - animation: bouncedelay 1s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.navbar .spinner > div { - background-color: @navbar-default-link-color; -} - -.spinner.large > div { - width: 24px; - height: 24px; -} - -.spinner .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; -} +@size: 400px; +@color1: @kibanaPink1; +@color2: @kibanaPink2; -.spinner .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; +.spinner.ng-hide { + visibility: hidden; + display: block !important; + opacity: 0; + transition-delay: 0.25s; } -@-webkit-keyframes bouncedelay { - 0%, 80%, 100% { -webkit-transform: scale(0.0) } - 40% { -webkit-transform: scale(1.0) } -} - -@keyframes bouncedelay { - 0%, 80%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 40% { - transform: scale(1.0); - -webkit-transform: scale(1.0); +.spinner { + top: 0; + left: 0; + right: 0; + height: 2px; + position: absolute; + visibility: visible; + display: block; + animation: move 2s linear infinite; + background-color: @kibanaPink2; + background-image: linear-gradient(to right, + @color1 0%, + @color1 50%, + @color2 50%, + @color2 100% + ); + background-size: @size @size; +} + +@keyframes move { + 0% { + background-position: 0 0; + } + 100% { + background-position: @size @size; } } diff --git a/src/ui/public/styles/theme.less b/src/ui/public/styles/theme.less index 3b2ff365f1c37..d87b0def55858 100644 --- a/src/ui/public/styles/theme.less +++ b/src/ui/public/styles/theme.less @@ -16,12 +16,39 @@ .navbar { border-width: 0; - box-shadow: inset 0 -10px 10px -12px #333; - -moz-box-shadow: inset 0 -10px 10px -12px #333; - -webkit-box-shadow: inset 0 -10px 10px -12px #333; + &-static-top { + background-color: @kibanaGray5; + color: @kibanaGray2; + .navbar-brand:hover, + .navbar-brand { + float: none; + color: @kibanaGray2; + font-size: 1em; + background-color: transparent; + padding-top: 8px; + height: 35px; + } + .navbar-nav { + > li > a { + color: @kibanaGray2; + font-size: 1.5em; + padding: 5px 0 6px 0; + margin: 0 10px; + } + // Active, hover state for the getTabs + > .active > a, + > .active > a:hover, + > .active > a:active, + > li > a:active, + > li > a:hover { + color: @kibanaGray1; + background-color: transparent; + border-bottom: 2px solid @kibanaGray1; + } + } + } &-btn-link { - height: @navbar-height; margin: 0; border-radius: 0; @@ -58,34 +85,13 @@ } .navbar-nav > .active > a { - border-bottom-color: @navbar-nav-active-link-border; - - // navbar active arrow base styles - &:before { - content: ""; - display: inline-block; - position: absolute; - border: @navbar-arrow-size solid transparent; - border-bottom-color: inherit; - top: (@navbar-height - @navbar-arrow-size*2); - left: 0; - right: 0; - margin: 0 auto; - width: 0; - height: 0; - } - - @media (max-width: @screen-sm-min) { - &:before { - display: none !important; - } - } + border-bottom-color: @kibanaGray2; + background-color: transparent; } &-brand { cursor: default; font-size: 1.8em; - background-color: @navbar-inverse-brand-bg; user-select: none; } diff --git a/src/ui/public/styles/variables/bootstrap-mods.less b/src/ui/public/styles/variables/bootstrap-mods.less index ef47a359d4f47..f341e7825ca37 100644 --- a/src/ui/public/styles/variables/bootstrap-mods.less +++ b/src/ui/public/styles/variables/bootstrap-mods.less @@ -6,12 +6,12 @@ //** Background color for ``. @body-bg: @white; //** Global text color on ``. -@text-color: @brand-primary; +@text-color: @kibanaGray1; //** Global textual link color. -@link-color: @brand-info; -@link-hover-color: lighten(@link-color, 10%); +@link-color: @kibanaBlue2; +@link-hover-color: @kibanaBlue1; @link-hover-decoration: none; //** Disabled cursor for form controls and buttons. @@ -26,7 +26,7 @@ @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; -@font-size-base: 13px; +@font-size-base: 14px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @@ -120,13 +120,13 @@ @btn-default-bg: @gray; @btn-default-border: @btn-default-bg; -@btn-primary-color: @btn-default-color; -@btn-primary-bg: @brand-primary; -@btn-primary-border: @btn-primary-bg; +@btn-primary-color: @kibanaGray6; +@btn-primary-bg: @kibanaBlue3; +@btn-primary-border: transparent; @btn-success-color: @btn-default-color; -@btn-success-bg: @brand-success; -@btn-success-border: @btn-success-bg; +@btn-success-bg: @kibanaBlue3; +@btn-success-border: @kibanaBlue3; @btn-info-color: @btn-default-color; @btn-info-bg: @brand-info; @@ -332,22 +332,22 @@ @navbar-height: 45px; @navbar-margin-bottom: 0px; @navbar-border-radius: @border-radius-base; -@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); +@navbar-padding-horizontal: 10px; @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-collapse-max-height: 340px; @navbar-arrow-size: 7px; // Default theme -@navbar-default-bg: #656A76; -@navbar-default-color: @white; -@navbar-default-border: darken(@navbar-default-bg, 10%); -@navbar-default-link-color: @gray-lighter; -@navbar-default-link-hover-color: @white; +@navbar-default-bg: @kibanaGray5; +@navbar-default-color: @kibanaGray2; +@navbar-default-border: transparent; +@navbar-default-link-color: @kibanaGray2; +@navbar-default-link-hover-color: @kibanaGray2; @navbar-default-link-hover-bg: transparent; -@navbar-default-link-active-color: @white; -@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%); -@navbar-default-link-disabled-color: @gray12; +@navbar-default-link-active-color: @kibanaGray1; +@navbar-default-link-active-bg: @kibanaGray6; +@navbar-default-link-disabled-color: @kibanaGray3; @navbar-default-link-disabled-bg: transparent; // Navbar brand label @@ -411,8 +411,8 @@ //== Pills -@nav-pills-active-link-hover-bg: @component-active-bg; -@nav-pills-active-link-hover-color: @component-active-color; +@nav-pills-active-link-hover-bg: @kibanaYellow1; +@nav-pills-active-link-hover-color: @kibanaGray1; @nav-pills-border-radius: @border-radius-base; //== Pagination @@ -486,8 +486,8 @@ //** Tooltip text color @tooltip-color: @white; //** Tooltip background color -@tooltip-bg: rgba(0,0,0,.9); -@tooltip-opacity: .9; +@tooltip-bg: rgba(0,0,0,.8); +@tooltip-opacity: .8; //** Tooltip arrow color @tooltip-arrow-color: @tooltip-bg; @@ -607,11 +607,11 @@ @progress-border-radius: @border-radius-base; //** Background color of the whole progress component -@progress-bg: @gray-lighter; +@progress-bg: @kibanaGray4; //** Progress bar text color @progress-bar-color: @white; //** Default progress bar color -@progress-bar-bg: @brand-primary; +@progress-bar-bg: @kibanaPink1; //** Success progress bar color @progress-bar-success-bg: @brand-success; //** Warning progress bar color @@ -708,7 +708,7 @@ // //## -@well-bg: @gray-lighter; +@well-bg: @kibanaGray6; @well-border: transparent; @@ -791,7 +791,7 @@ //** Abbreviations and acronyms border color @abbr-border-color: @gray-light; //** Headings small color -@headings-small-color: @gray-light; +@headings-small-color: @kibanaGray1; //** Blockquote small color @blockquote-small-color: @gray-light; //** Blockquote border color diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less index 7e9f97dc75173..ece20608f74d5 100644 --- a/src/ui/public/styles/variables/colors.less +++ b/src/ui/public/styles/variables/colors.less @@ -34,3 +34,31 @@ @brand-info: #1F6B7A; @brand-warning: #F39C12; @brand-danger: #E74C3C; + +@kibanaGray1: #2D2D2D; +@kibanaGray2: #5A5A5A; +@kibanaGray3: #9C9C9C; +@kibanaGray4: #BEBEBE; +@kibanaGray5: #E4E4E4; +@kibanaGray6: #F6F6F6; +@kibanaGray7: #FFFFFF; + +@kibanaBlue1: #105A73; +@kibanaBlue2: #328CAA; +@kibanaBlue3: #6EADC1; +@kibanaBlue4: #9DD0E0; + +@kibanaGreen1: #80C383; +@kibanaGreen2: #AEE8B0; + +@kibanaYellow1: #FBCE47; +@kibanaYellow2: #F5DD94; + +@kibanaRed1: #D76051; +@kibanaRed2: #FF9183; + +@kibanaPurple1: #9980B2; +@kibanaPurple2: #CDB5E4; + +@kibanaPink1: #E8488B; +@kibanaPink2: #FF95C1; diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index e3eb53f5c0bce..6aab3d69c557b 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -26,17 +26,16 @@ @sidebar-hover-color: @sidebar-color; @sidebar-hover-bg: darken(@sidebar-bg, 10%); -@sidebar-active-color: @component-active-color; -@sidebar-active-bg: @component-active-bg; -@sidebar-active-hover-bg: @component-active-bg; -@sidebar-active-hover-color: @component-active-color; +@sidebar-active-color: @kibanaGray1; +@sidebar-active-bg: @kibanaGray4; +@sidebar-active-hover-bg: @kibanaGray4; +@sidebar-active-hover-color: @kibanaGray1; -@sidebar-index-pattern-selection-bg: @white; +@sidebar-index-pattern-selection-bg: @kibanaGray5; +@sidebar-index-pattern-selection-bg-hover: @kibanaGray4; // Discover ==================================================================== -@discover-info-bg: @well-bg; - @discover-link-color: @link-color; @discover-link-btn-color: @text-color; @@ -48,9 +47,9 @@ @discover-shard-failures-border: @brand-danger; @discover-field-toggle-color: @btn-success-color; -@discover-field-details-border: @well-border; -@discover-field-details-color: @text-color; -@discover-field-details-bg: @body-bg; +@discover-field-details-border: @kibanaGray4; +@discover-field-details-color: @kibanaGray2; +@discover-field-details-bg: @kibanaGray5; @discover-field-details-close-border: @well-border; @discover-field-details-close-bg: @well-bg; @discover-field-details-close-hover-bg: @sidebar-hover-bg; @@ -59,25 +58,25 @@ // Field name ================================================================== -@field-name-color: @text-muted; -@field-name-no-results-color: @text-muted; +@field-name-color: @kibanaGray3; +@field-name-no-results-color: @kibanaGray3; // Collapser =================================================================== -@collapser-bg: @gray-lighter; -@collapser-border: @collapser-bg; -@collapser-color: @gray3; +@collapser-bg: @kibanaGray7; +@collapser-border: @kibanaGray7; +@collapser-color: @kibanaGray2; -@collapser-hover-bg: @gray-light; +@collapser-hover-bg: @kibanaGray5; @collapser-hover-border: @collapser-hover-bg; -@collapser-hover-color: @white; +@collapser-hover-color: @kibanaGray7; @collapser-width: 12px; // Dashboard =================================================================== -@dashboard-bg: @gray-lighter; -@dashboard-panel-bg: @panel-bg; +@dashboard-bg: #fff; +@dashboard-panel-bg: #fff; @dashboard-panel-color: @text-color; @dashboard-panel-heading-link-color: @text-color; @dashboard-panel-heading-link-hover-color: @link-hover-color; @@ -101,8 +100,8 @@ // NavBar ====================================================================== @navbar-button-border: @input-border; -@navbar-button-color: @brand-primary; -@navbar-button-bg: @input-group-addon-bg; +@navbar-button-color: @kibanaGray7; +@navbar-button-bg: @kibanaGray3; // AppSwitcher ================================================================= @@ -141,8 +140,8 @@ @vis-editor-navbar-error-state-color: @btn-danger-color; @vis-editor-navbar-modal-bg: @navbar-default-bg; -@vis-editor-navbar-modal-color: @white; -@vis-editor-navbar-modal-link-color: @white; +@vis-editor-navbar-modal-color: @kibanaGray1; +@vis-editor-navbar-modal-link-color: @kibanaGray1; @vis-editor-sidebar-bg: @body-bg; @vis-editor-sidebar-border: @sidebar-bg; @@ -200,7 +199,7 @@ // Config ====================================================================== @config-border: darken(@body-bg, 10%); -@config-bg: @body-bg; +@config-bg: @kibanaGray6; @config-close-bg: @well-bg; @@ -218,7 +217,7 @@ // Paginate ==================================================================== -@paginate-page-link-active-color: @text-color; +@paginate-page-link-active-color: @kibanaGray2; // Spinner ===================================================================== @@ -303,6 +302,8 @@ @tooltip-color: @gray-lighter; @tooltip-table-border: @gray; +@tooltip-bold: 600; + // Svg ========================================================================= @@ -318,3 +319,17 @@ // Saved Object Finder ========================================================= @saved-object-finder-link-color: @link-color; @saved-object-finder-icon-color: darken(@saved-object-finder-link-color, 10%); + +// 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; diff --git a/src/ui/public/timepicker/toggle.html b/src/ui/public/timepicker/toggle.html index 6c4b59b6f6ece..2e781d36e5c4f 100644 --- a/src/ui/public/timepicker/toggle.html +++ b/src/ui/public/timepicker/toggle.html @@ -1,33 +1,12 @@ - +
    + + +
    diff --git a/src/ui/public/vislib/components/color/seed_colors.js b/src/ui/public/vislib/components/color/seed_colors.js index 5de209c794638..aae433fece914 100644 --- a/src/ui/public/vislib/components/color/seed_colors.js +++ b/src/ui/public/vislib/components/color/seed_colors.js @@ -8,8 +8,8 @@ define(function () { return function SeedColorUtilService() { return [ + '#6eadc1', '#57c17b', - '#006e8a', '#6f87d8', '#663db8', '#bc52bc', diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less index 0be44579421d8..ddd2ae39d7785 100644 --- a/src/ui/public/vislib/styles/_legend.less +++ b/src/ui/public/vislib/styles/_legend.less @@ -6,12 +6,19 @@ visualize-legend { flex-direction: row; } +.legend-icon { + color: #BEBEBE; + font-size: 1.2em; + margin: 1px; +} + .legend-col-wrapper { .flex-parent(0, 0, auto); - flex-direction: row; z-index: 10; min-height: 0; overflow: hidden; + flex-direction: row; + padding-top: 5px; .header { cursor: pointer; @@ -21,14 +28,10 @@ visualize-legend { .legend-toggle { &:hover { color: @sidebar-hover-color; - background-color: @sidebar-hover-bg; } - background-color: @sidebar-bg; - font-size: 10px; - height: 30px; - padding: 8px 3px; - border-bottom-left-radius: @border-radius-small; + padding-right: 5px; + font-size: 14px; } .column-labels { @@ -36,7 +39,6 @@ visualize-legend { } .legend-ul { - border-left: 1px solid @sidebar-bg; width: 150px; flex: 1 1 auto; overflow-x: hidden; @@ -116,5 +118,3 @@ visualize-legend { .legend-value:hover { cursor: pointer; } - - diff --git a/src/ui/public/vislib/styles/_tilemap.less b/src/ui/public/vislib/styles/_tilemap.less index 2fd7d98e709a9..71887e14685aa 100644 --- a/src/ui/public/vislib/styles/_tilemap.less +++ b/src/ui/public/vislib/styles/_tilemap.less @@ -92,8 +92,8 @@ .leaflet-popup-content { margin: 0 !important; - line-height: 1.1 !important; - font-size: 12px; + line-height: 24px !important; + font-size: @font-size-base; font-weight: normal; word-wrap: break-word; overflow: hidden; @@ -115,22 +115,6 @@ word-break: break-all; } } - - // if there is a header, give it a border that matches - // those in the body - thead tr { - border-bottom: 1px solid; - border-bottom-color: @tilemap-leaflet-popup-border; - } - - // only apply to tr in the body, not the header - tbody tr { - border-top: 1px solid; - border-top-color: @tilemap-leaflet-popup-border; - &:first-child { - border-top: none; - } - } } } diff --git a/src/ui/public/vislib/styles/_tooltip.less b/src/ui/public/vislib/styles/_tooltip.less index c85df653b436d..bf6dd074d90ea 100644 --- a/src/ui/public/vislib/styles/_tooltip.less +++ b/src/ui/public/vislib/styles/_tooltip.less @@ -4,7 +4,7 @@ .vis-tooltip-sizing-clone { visibility: hidden; line-height: 1.1; - font-size: 12px; + font-size: @font-size-base; font-weight: normal; background: @tooltip-bg; color: @tooltip-color; @@ -24,6 +24,18 @@ margin: @tooltip-space @tooltip-space 0; } + .tooltip-label { + font-family: @font-family-sans-serif; + + th { + font-weight: @tooltip-bold; + } + } + + .tooltip-value { + font-family: @font-family-sans-serif; + } + table { td,th { padding: @tooltip-space-tight; @@ -32,22 +44,6 @@ word-break: break-all; } } - - // if there is a header, give it a border that matches - // those in the body - thead tr { - border-bottom: 1px solid; - border-bottom-color: @tooltip-table-border; - } - - // only apply to tr in the body, not the header - tbody tr { - border-top: 1px solid; - border-top-color: @tooltip-table-border; - &:first-child { - border-top: none; - } - } } } diff --git a/src/ui/public/visualize/spy.html b/src/ui/public/visualize/spy.html index b43429de52da3..6231df6045955 100644 --- a/src/ui/public/visualize/spy.html +++ b/src/ui/public/visualize/spy.html @@ -1,6 +1,6 @@
    - +
    @@ -21,4 +21,4 @@
    -
\ No newline at end of file +
diff --git a/src/ui/public/visualize/visualize.less b/src/ui/public/visualize/visualize.less index 6879cf173d088..e1e7805e3d08c 100644 --- a/src/ui/public/visualize/visualize.less +++ b/src/ui/public/visualize/visualize.less @@ -13,11 +13,10 @@ visualize { } .vis-container { - height: 1px; display: flex; flex-direction: row; - flex: 1 1 auto; + flex: 1 0; overflow: auto; -webkit-transition: opacity 0.01s; transition: opacity 0.01s; @@ -59,6 +58,7 @@ ul.visualizations .media-body { visualize-spy { // this element should flex flex: 0 1 auto; + padding: 0px 0px 0px 15px; // it's children should also flex vertically flex-direction: column; @@ -77,34 +77,12 @@ visualize-spy { .visualize-show-spy { flex: 0 0 auto; - - border-top: 1px solid; - border-top-color: @visualize-show-spy-border; - margin-bottom: 3px; - &-tab { - margin: 0px auto; - margin-top: -1px; - border: 1px solid; - border-color: @visualize-show-spy-border; - border-top: 0px; - border-width: 0px 1px 1px 1px; - border-bottom-left-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; - width: 50px; - background: @visualize-show-spy-bg; - text-align: center; - color: @visualize-show-spy-color; - - &:hover { - background-color: @visualize-show-spy-hover-bg; - color: @visualize-show-spy-hover-color; - } - } - - - i { - padding: 0 10px; + color: @kibanaGray4; + position: absolute; + z-index: 100; + left: 5px; + bottom: 0px; } } @@ -181,4 +159,3 @@ visualize-spy { white-space: pre-wrap; } } - diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html index 3f8e2b4a09b39..b5d49b49664b5 100644 --- a/src/ui/public/visualize/visualize_legend.html +++ b/src/ui/public/visualize/visualize_legend.html @@ -1,6 +1,6 @@
- +
    diff --git a/src/ui/ui_app.js b/src/ui/ui_app.js index a14d01e5d9846..57b9c6421a2dd 100644 --- a/src/ui/ui_app.js +++ b/src/ui/ui_app.js @@ -1,5 +1,5 @@ +import { chain, get, noop, once, pick } from 'lodash'; import _ from 'lodash'; -import { join } from 'path'; class UiApp { constructor(uiExports, spec) { @@ -15,9 +15,24 @@ class UiApp { this.title = this.spec.title; this.description = this.spec.description; this.icon = this.spec.icon; - this.hidden = this.spec.hidden; + this.hidden = !!this.spec.hidden; + this.listed = this.spec.listed == null ? !this.hidden : this.spec.listed; this.templateName = this.spec.templateName || 'ui_app'; - this.url = `${spec.urlBasePath || ''}${this.spec.url || `/app/${this.id}`}`; + + if (!this.hidden) { + // any non-hidden app has a url, so it gets a "navLink" + this.navLink = this.uiExports.navLinks.new({ + title: this.title, + description: this.description, + icon: this.icon, + url: this.spec.url || `/app/${this.id}` + }); + + if (!this.listed) { + // unlisted apps remove their navLinks from the uiExports collection though + this.uiExports.navLinks.delete(this.navLink); + } + } if (this.spec.autoload) { console.warn( @@ -27,15 +42,15 @@ class UiApp { } // once this resolves, no reason to run it again - this.getModules = _.once(this.getModules); + this.getModules = once(this.getModules); // variables that are injected into the browser, must serialize to JSON - this.getInjectedVars = this.spec.injectVars || _.noop; + this.getInjectedVars = this.spec.injectVars || noop; } getModules() { - return _.chain([ - this.uiExports.find(_.get(this, 'spec.uses', [])), + return chain([ + this.uiExports.find(get(this, 'spec.uses', [])), this.uiExports.find(['chromeNavControls', 'hacks']), ]) .flatten() @@ -45,7 +60,7 @@ class UiApp { } toJSON() { - return _.pick(this, ['id', 'title', 'description', 'icon', 'main', 'url']); + return pick(this, ['id', 'title', 'description', 'icon', 'main', 'navLink']); } } diff --git a/src/ui/ui_exports.js b/src/ui/ui_exports.js index 5048d576e989a..e76dcd1a69e69 100644 --- a/src/ui/ui_exports.js +++ b/src/ui/ui_exports.js @@ -2,9 +2,11 @@ import _ from 'lodash'; import minimatch from 'minimatch'; import UiAppCollection from './ui_app_collection'; +import UiNavLinkCollection from './ui_nav_link_collection'; class UiExports { constructor({ urlBasePath }) { + this.navLinks = new UiNavLinkCollection(this); this.apps = new UiAppCollection(this); this.aliases = {}; this.urlBasePath = urlBasePath; @@ -49,7 +51,9 @@ class UiExports { case 'app': case 'apps': return (plugin, specs) => { + const id = plugin.id; for (let spec of [].concat(specs || [])) { + let app = this.apps.new(_.defaults({}, spec, { id: plugin.id, urlBasePath: this.urlBasePath @@ -64,6 +68,14 @@ class UiExports { } }; + case 'link': + case 'links': + return (plugin, spec) => { + for (const spec of [].concat(spec || [])) { + this.navLinks.new(spec); + } + }; + case 'visTypes': case 'fieldFormats': case 'spyModes': diff --git a/src/ui/ui_nav_link.js b/src/ui/ui_nav_link.js new file mode 100644 index 0000000000000..503a31073834b --- /dev/null +++ b/src/ui/ui_nav_link.js @@ -0,0 +1,16 @@ +import { pick } from 'lodash'; +import { join } from 'path'; + +export default class UiNavLink { + constructor(uiExports, spec) { + this.title = spec.title; + this.order = spec.order || 0; + this.url = `${uiExports.urlBasePath || ''}${spec.url}`; + this.description = spec.description; + this.icon = spec.icon; + } + + toJSON() { + return pick(this, ['title', 'url', 'order', 'description', 'icon']); + } +} diff --git a/src/ui/ui_nav_link_collection.js b/src/ui/ui_nav_link_collection.js new file mode 100644 index 0000000000000..bba26e0e0e6a0 --- /dev/null +++ b/src/ui/ui_nav_link_collection.js @@ -0,0 +1,29 @@ +import { sortBy } from 'lodash'; +import UiNavLink from './ui_nav_link'; +import Collection from '../utils/collection'; + +const inOrderCache = Symbol('inOrder'); + +export default class UiNavLinkCollection extends Collection { + + constructor(uiExports, parent) { + super(); + this.uiExports = uiExports; + } + + new(spec) { + const link = new UiNavLink(this.uiExports, spec); + this[inOrderCache] = null; + this.add(link); + return link; + } + + get inOrder() { + if (!this[inOrderCache]) { + this[inOrderCache] = sortBy([...this], 'order'); + } + + return this[inOrderCache]; + } + +}; diff --git a/tasks/utils/files_to_commit.js b/tasks/utils/files_to_commit.js index 61f55fcc02a19..a149c377aa611 100644 --- a/tasks/utils/files_to_commit.js +++ b/tasks/utils/files_to_commit.js @@ -5,6 +5,7 @@ import { includes } from 'lodash'; export default function filesToCommit(path) { const simpleGit = new SimpleGit(path); const gitDiff = promisify(simpleGit.diff, simpleGit); + const pathsToIgnore = ['webpackShims']; return gitDiff(['--name-status', '--cached']) .then(output => { @@ -12,6 +13,9 @@ export default function filesToCommit(path) { .split('\n') .map(line => line.trim().split('\t')) .filter(parts => parts.length === 2) + .filter(parts => { + return pathsToIgnore.reduce((prev, curr) => {(prev === false) ? prev : parts[1].indexOf(curr) === -1;}, true); + }) .map(parts => { const status = parts.shift(); const name = parts.join('\t').trim(); diff --git a/test/functional/apps/discover/_collapse_expand.js b/test/functional/apps/discover/_collapse_expand.js index 5e271d29724bc..d4ade8faeb4e5 100644 --- a/test/functional/apps/discover/_collapse_expand.js +++ b/test/functional/apps/discover/_collapse_expand.js @@ -49,76 +49,41 @@ define(function (require) { .catch(common.handleError(this)); }); - - bdd.describe('legend', function () { - - bdd.it('should initially be collapsed', function () { - return discoverPage.getLegendWidth() - .then(function (actualwidth) { - common.debug('collapsed legend width = ' + actualwidth); - expect(actualwidth < 20).to.be(true); - }) - .catch(common.handleError(this)); - }); - - bdd.it('should expand when clicked', function () { - return discoverPage.clickLegendExpand() - .then(function () { - return discoverPage.getLegendWidth(); - }) - .then(function (actualwidth) { - common.debug('expanded legend width = ' + actualwidth); - expect(actualwidth > 140).to.be(true); - }) - .catch(common.handleError(this)); - }); - - bdd.it('should collapse when clicked', function () { - return discoverPage.clickLegendCollapse() - .then(function () { - return discoverPage.getLegendWidth(); - }) - .then(function (actualwidth) { - expect(actualwidth < 20).to.be(true); - }) - .catch(common.handleError(this)); - }); - - }); - bdd.describe('field data', function () { bdd.it('should initially be expanded', function () { return discoverPage.getSidebarWidth() - .then(function (actualwidth) { - common.debug('expanded sidebar width = ' + actualwidth); - expect(actualwidth > 180).to.be(true); - }) - .catch(common.handleError(this)); + .then(function (width) { + common.debug('expanded sidebar width = ' + width); + expect(width > 180).to.be(true); + }) + .catch(common.handleError(this)); }); bdd.it('should collapse when clicked', function () { - return discoverPage.clickSidebarCollapse() - .then(function () { - return discoverPage.getSidebarWidth(); - }) - .then(function (actualwidth) { - common.debug('collapsed sidebar width = ' + actualwidth); - expect(actualwidth < 20).to.be(true); - }) - .catch(common.handleError(this)); + return discoverPage.toggleSidebarCollapse() + .then(function () { + common.debug('discoverPage.getSidebarWidth()'); + return discoverPage.getSidebarWidth(); + }) + .then(function (width) { + common.debug('collapsed sidebar width = ' + width); + expect(width < 20).to.be(true); + }) + .catch(common.handleError(this)); }); bdd.it('should expand when clicked', function () { - return discoverPage.clickSidebarExpand() - .then(function () { - return discoverPage.getSidebarWidth(); - }) - .then(function (actualwidth) { - common.debug('expanded sidebar width = ' + actualwidth); - expect(actualwidth > 180).to.be(true); - }) - .catch(common.handleError(this)); + return discoverPage.toggleSidebarCollapse() + .then(function () { + common.debug('discoverPage.getSidebarWidth()'); + return discoverPage.getSidebarWidth(); + }) + .then(function (width) { + common.debug('expanded sidebar width = ' + width); + expect(width > 180).to.be(true); + }) + .catch(common.handleError(this)); }); }); diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js index 44525ad24d45c..86271155f8cc9 100644 --- a/test/functional/apps/discover/_discover.js +++ b/test/functional/apps/discover/_discover.js @@ -84,6 +84,9 @@ define(function (require) { bdd.it('load query should show query name', function () { return discoverPage.loadSavedSearch(queryName1) + .then(function () { + return common.sleep(3000); + }) .then(function () { return discoverPage.getCurrentQueryName(); }) @@ -104,18 +107,13 @@ define(function (require) { .catch(common.handleError(this)); }); - - bdd.it('should show the correct bar chart', function () { - var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', - '2.7056249999999977', '14.771249999999995', '54.112500000000004', - '105.080625', '100.25437500000001', '54.916875', '13.747499999999988', - '2.266874999999999', '3.0712500000000063', '14.771249999999995', - '49.944374999999994', '99.523125', '103.471875', '51.699375', - '12.943124999999995', '1.9743749999999949', '2.3400000000000034', - '12.796875', '51.699375', '102.96000000000001', '99.08437500000001', - '53.08875', '14.698125000000005', '2.1206249999999898', '0', '0', - '0', '0', '0', '0', '0' + var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', '3.237', + '17.674', '64.75', '125.737', '119.962', '65.712', '16.449', + '2.712', '3.675', '17.674', '59.762', '119.087', '123.812', + '61.862', '15.487', '2.362', '2.800', '15.312', '61.862', '123.2', + '118.562', '63.524', '17.587', '2.537', '0', '0', '0', '0', '0', + '0', '0' ]; return common.sleep(4000) .then(function () { @@ -144,26 +142,19 @@ define(function (require) { bdd.it('should show correct data for chart interval Hourly', function () { var chartInterval = 'Hourly'; - var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', - '0', '0', '0', '0', '0', '0', '0', '0', '1.2763636363636266', '1.914545454545447', - '4.680000000000007', '6.594545454545454', '11.061818181818168', '25.314545454545453', - '38.50363636363636', '46.374545454545455', '72.53999999999999', '93.60000000000001', - '102.10909090909091', '109.97999999999999', '111.04363636363637', '94.87636363636364', - '85.72909090909091', '68.28545454545454', '54.88363636363636', '36.58909090909091', - '20.209090909090904', '11.700000000000003', '8.083636363636359', '5.105454545454549', - '0.6381818181818204', '0.8509090909090986', '2.3400000000000034', '2.978181818181824', - '3.61636363636363', '8.083636363636359', '10.423636363636362', '24.46363636363637', - '32.33454545454545', '45.94909090909091', '67.00909090909092', '85.51636363636365', - '94.87636363636364', '109.1290909090909', '110.61818181818181', '100.83272727272727', - '89.55818181818182', '65.30727272727273', '48.92727272727274', '36.16363636363636', - '21.059999999999988', '10.210909090909098', '6.38181818181819', '3.190909090909088', - '2.127272727272725', '0.4254545454545422', '1.701818181818183', '1.4890909090909048', - '3.61636363636363', '7.232727272727274', '7.870909090909095', '22.123636363636365', - '32.54727272727273', '51.267272727272726', '66.58363636363637', '85.94181818181818', - '104.66181818181818', '108.91636363636364', '107.00181818181818', '100.62', - '80.62363636363636', '62.32909090909091', '58.92545454545455', '33.18545454545455', - '21.059999999999988', '11.274545454545446', '10.423636363636362', '3.403636363636366', - '1.914545454545447', '0.8509090909090986', '0', '0', '0', '0', '0', '0', + var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', '0', '0', + '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '1.527', '2.290', + '5.599', '7.890', '13.236', '30.290', '46.072', '55.490', '86.8', + '112', '122.181', '131.6', '132.872', '113.527', '102.581', + '81.709', '65.672', '43.781', '24.181', '14', '9.672', '6.109', + '0.763', '1.018', '2.800', '3.563', '4.327', '9.672', '12.472', + '29.272', '38.690', '54.981', '80.181', '102.327', '113.527', + '130.581', '132.363', '120.654', '107.163', '78.145', '58.545', + '43.272', '25.199', '12.218', '7.636', '3.818', '2.545', '0.509', + '2.036', '1.781', '4.327', '8.654', '9.418', '26.472', '38.945', + '61.345', '79.672', '102.836', '125.236', '130.327', '128.036', + '120.4', '96.472', '74.581', '70.509', '39.709', '25.199', '13.490', + '12.472', '4.072', '2.290', '1.018', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0' ]; return discoverPage.setChartInterval(chartInterval) @@ -178,7 +169,9 @@ define(function (require) { bdd.it('should show correct data for chart interval Daily', function () { var chartInterval = 'Daily'; - var expectedBarChartData = [ '0', '111.3138', '107.96759999999999', '108.4122', '0']; + var expectedBarChartData = [ + '0', '133.196', '129.192', '129.724', '0' + ]; return discoverPage.setChartInterval(chartInterval) .then(function () { return common.sleep(8000); @@ -191,7 +184,7 @@ define(function (require) { bdd.it('should show correct data for chart interval Weekly', function () { var chartInterval = 'Weekly'; - var expectedBarChartData = [ '55.6569', '108.1899']; + var expectedBarChartData = [ '66.598', '129.458']; return discoverPage.setChartInterval(chartInterval) .then(function () { return common.sleep(2000); @@ -204,7 +197,7 @@ define(function (require) { bdd.it('should show correct data for chart interval Monthly', function () { var chartInterval = 'Monthly'; - var expectedBarChartData = [ '102.404']; + var expectedBarChartData = [ '122.535']; return discoverPage.setChartInterval(chartInterval) .then(function () { return common.sleep(2000); @@ -217,7 +210,7 @@ define(function (require) { bdd.it('should show correct data for chart interval Yearly', function () { var chartInterval = 'Yearly'; - var expectedBarChartData = [ '102.404']; + var expectedBarChartData = [ '122.535']; return discoverPage.setChartInterval(chartInterval) .then(function () { return common.sleep(2000); @@ -228,19 +221,14 @@ define(function (require) { .catch(common.handleError(this)); }); - - bdd.it('should show correct data for chart interval Auto', function () { var chartInterval = 'Auto'; - var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', - '2.7056249999999977', '14.771249999999995', '54.112500000000004', - '105.080625', '100.25437500000001', '54.916875', '13.747499999999988', - '2.266874999999999', '3.0712500000000063', '14.771249999999995', - '49.944374999999994', '99.523125', '103.471875', '51.699375', - '12.943124999999995', '1.9743749999999949', '2.3400000000000034', - '12.796875', '51.699375', '102.96000000000001', '99.08437500000001', - '53.08875', '14.698125000000005', '2.1206249999999898', '0', '0', - '0', '0', '0', '0', '0' + var expectedBarChartData = [ '0', '0', '0', '0', '0', '0', '3.237', + '17.674', '64.75', '125.737', '119.962', '65.712', '16.449', + '2.712', '3.675', '17.674', '59.762', '119.087', '123.812', + '61.862', '15.487', '2.362', '2.800', '15.312', '61.862', '123.2', + '118.562', '63.524', '17.587', '2.537', '0', '0', '0', '0', '0', + '0', '0' ]; return discoverPage.setChartInterval(chartInterval) .then(function () { diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js index e3ee8b851967d..7e90ec9b2e795 100644 --- a/test/functional/apps/discover/_field_data.js +++ b/test/functional/apps/discover/_field_data.js @@ -51,7 +51,6 @@ define(function (require) { var fromTimeString = 'September 19th 2015, 06:31:44.000'; var toTimeString = 'September 23rd 2015, 18:31:44.000'; - bdd.it('search php should show the correct hit count', function () { var expectedHitCount = '445'; return discoverPage.query('php') diff --git a/test/functional/apps/discover/_shared_links.js b/test/functional/apps/discover/_shared_links.js index f590cc2dd44c6..feae21ea21fb6 100644 --- a/test/functional/apps/discover/_shared_links.js +++ b/test/functional/apps/discover/_shared_links.js @@ -51,6 +51,11 @@ define(function (require) { common.debug('setAbsoluteRange'); return headerPage.setAbsoluteRange(fromTime, toTime); }) + .then(function () { + //After hiding the time picker, we need to wait for + //the refresh button to hide before clicking the share button + return common.sleep(1000); + }) .catch(common.handleError(this)); }); @@ -74,10 +79,10 @@ define(function (require) { var expectedUrl = baseUrl + '/app/kibana?_t=1453775307251#' + '/discover?_g=(refreshInterval:(display:Off,pause:!f,value:0),time' - + ':(from:%272015-09-19T06:31:44.000Z%27,mode:absolute,to:%272015-09' - + '-23T18:31:44.000Z%27))&_a=(columns:!(_source),index:%27logstash-' - + '*%27,interval:auto,query:(query_string:(analyze_wildcard:!t,query' - + ':%27*%27)),sort:!(%27@timestamp%27,desc))'; + + ':(from:\'2015-09-19T06:31:44.000Z\',mode:absolute,to:\'2015-09' + + '-23T18:31:44.000Z\'))&_a=(columns:!(_source),index:\'logstash-' + + '*\',interval:auto,query:(query_string:(analyze_wildcard:!t,query' + + ':\'*\')),sort:!(\'@timestamp\',desc))'; return discoverPage.getSharedUrl() .then(function (actualUrl) { // strip the timestamp out of each URL diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js index 728784784507b..26137a7a29dac 100644 --- a/test/functional/apps/visualize/_metric_chart.js +++ b/test/functional/apps/visualize/_metric_chart.js @@ -199,8 +199,10 @@ define(function (require) { }); bdd.it('should show Standard Deviation', function pageHeader() { - var standardDeviationBytes = [ '-1,435.138', 'Lower Standard Deviation of bytes', - '5,727.314', 'Average of bytes', '12,889.766', 'Upper Standard Deviation of bytes' + var standardDeviationBytes = [ + '-1,435.138', 'Lower Standard Deviation of bytes', + '5,727.314', 'Average of bytes', + '12,889.766', 'Upper Standard Deviation of bytes' ]; common.debug('Aggregation = Standard Deviation'); return visualizePage.selectAggregation('Standard Deviation') @@ -252,18 +254,16 @@ define(function (require) { }); bdd.it('should show Percentiles', function pageHeader() { - // This SHOULD be the expected result but the top item is cut off. - // See https://github.com/elastic/kibana/issues/5721 - // var percentileMachineRam = ['2,147,483,648', '1st percentile of machine.ram', '3,221,225,472', - // '5th percentile of machine.ram', '7,516,192,768', '25th percentile of machine.ram', '12,884,901,888', - // '50th percentile of machine.ram', '18,253,611,008', '75th percentile of machine.ram', - // '32,212,254,720', '95th percentile of machine.ram', '32,212,254,720', '99th percentile of machine.ram' - // ]; - var percentileMachineRam = ['3,221,225,472', - '5th percentile of machine.ram', '7,516,192,768', '25th percentile of machine.ram', '12,884,901,888', - '50th percentile of machine.ram', '18,253,611,008', '75th percentile of machine.ram', - '32,212,254,720', '95th percentile of machine.ram', '32,212,254,720', '99th percentile of machine.ram' + var percentileMachineRam = [ + '2,147,483,648', '1st percentile of machine.ram', + '3,221,225,472', '5th percentile of machine.ram', + '7,516,192,768', '25th percentile of machine.ram', + '12,884,901,888', '50th percentile of machine.ram', + '18,253,611,008', '75th percentile of machine.ram', + '32,212,254,720', '95th percentile of machine.ram', + '32,212,254,720', '99th percentile of machine.ram' ]; + common.debug('Aggregation = Percentiles'); return visualizePage.selectAggregation('Percentiles') .then(function selectField() { diff --git a/test/support/pages/common.js b/test/support/pages/common.js index 4438bf770076e..c5f2ce37aa312 100644 --- a/test/support/pages/common.js +++ b/test/support/pages/common.js @@ -91,6 +91,7 @@ define(function (require) { return self.remote.getCurrentUrl(); }) .then(function (currentUrl) { + var currentUrl = currentUrl.replace(/\/\/\w+:\w+@/, '//'); var navSuccessful = new RegExp(appUrl).test(currentUrl); if (!navSuccessful) { var msg = 'App failed to load: ' + appName + @@ -154,11 +155,11 @@ define(function (require) { var self = this; return self.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('.content > .application') + .findByCssSelector('.app-wrapper .application') .then(function () { return self.runScript(function () { var $ = window.$; - var $scope = $('.content > .application').scope(); + var $scope = $('.app-wrapper .application').scope(); return $scope ? $scope.chrome.getApp() : {}; }); }); @@ -254,8 +255,10 @@ define(function (require) { }, findTestSubject: function findTestSubject(selector) { - this.debug('in findTestSubject: ' + selector); - return this.remote.findByCssSelector(testSubjSelector(selector)); + this.debug('in findTestSubject: ' + testSubjSelector(selector)); + return this.remote + .setFindTimeout(defaultTimeout) + .findDisplayedByCssSelector(testSubjSelector(selector)); } }; diff --git a/test/support/pages/discover_page.js b/test/support/pages/discover_page.js index 2a180cdb4bc90..b5638a18882b6 100644 --- a/test/support/pages/discover_page.js +++ b/test/support/pages/discover_page.js @@ -28,7 +28,7 @@ define(function (require) { getTimespanText: function getTimespanText() { return thisTime - .findByCssSelector('a.navbar-timepicker-time-desc pretty-duration.ng-isolate-scope') + .findByCssSelector('.kibana-nav-actions .navbar-timepicker-time-desc pretty-duration') .getVisibleText(); }, @@ -41,20 +41,18 @@ define(function (require) { saveSearch: function saveSearch(searchName) { var self = this; return self.clickSaveSearchButton() - .then(function () { - common.sleep(1000); - }) .then(function () { common.debug('--saveSearch button clicked'); - return thisTime.findById('SaveSearch') - .type(searchName); + return thisTime.findDisplayedById('SaveSearch') + .pressKeys(searchName); }) .then(function clickSave() { common.debug('--find save button'); return thisTime - .findByCssSelector('button[ng-disabled="!opts.savedSearch.title"]') + .findDisplayedByCssSelector('button[ng-disabled="!opts.savedSearch.title"]') .click(); - }); + }) + .catch(common.handleError(this)); }, loadSavedSearch: function loadSavedSearch(searchName) { @@ -76,18 +74,16 @@ define(function (require) { .click(); }, - clickLoadSavedSearchButton: function clickSaveSearchButton() { + clickLoadSavedSearchButton: function clickLoadSavedSearchButton() { return thisTime .findByCssSelector('button[aria-label="Load Saved Search"]') .click(); }, getCurrentQueryName: function getCurrentQueryName() { - return common.tryForTime(defaultTimeout, function () { - return thisTime - .findByCssSelector('span.discover-info-title') + return thisTime + .findByCssSelector('span.kibana-nav-info-title') .getVisibleText(); - }); }, getBarChartData: function getBarChartData() { @@ -110,13 +106,13 @@ define(function (require) { getChartInterval: function getChartInterval() { return thisTime - .findByCssSelector('span.results-interval:nth-child(2) > a:nth-child(1)') + .findByCssSelector('a[ng-click="toggleInterval()"]') .getVisibleText(); }, setChartInterval: function setChartInterval(interval) { - return thisTime - .findByCssSelector('span.results-interval:nth-child(2) > a:nth-child(1)') + return this.remote.setFindTimeout(5000) + .findByCssSelector('a[ng-click="toggleInterval()"]') .click() .catch(function () { // in some cases we have the link above, but after we've made a @@ -191,20 +187,20 @@ define(function (require) { clickCopyToClipboard: function clickCopyToClipboard() { return thisTime - .findByCssSelector('button.clipboard-button') + .findDisplayedByCssSelector('button.clipboard-button') .click(); }, getShareCaption: function getShareCaption() { return thisTime - .findByCssSelector('div.form-group > label') + .findByCssSelector('.vis-share label') .getVisibleText(); }, getSharedUrl: function getSharedUrl() { return thisTime .findByCssSelector('.url') - .getProperty('baseURI'); + .getProperty('value'); }, getShortenedUrl: function getShortenedUrl() { @@ -213,40 +209,15 @@ define(function (require) { .getProperty('value'); }, - clickLegendExpand: function clickLegendExpand() { - return thisTime - .findByCssSelector('.fa-chevron-left') - .click(); - }, - - clickLegendCollapse: function clickLegendCollapse() { - return thisTime - .findByCssSelector('div.legend-toggle > i.fa-chevron-right') - .click(); - }, - - getLegendWidth: function getLegendWidth() { - return thisTime - .findByCssSelector('.legend-col-wrapper') - .getProperty('clientWidth'); - }, - - clickSidebarExpand: function clickSidebarExpand() { - return thisTime - .findByCssSelector('.chevron-cont') - .click(); - }, - - clickSidebarCollapse: function clickSidebarCollapse() { - return thisTime - .findByCssSelector('.chevron-cont') - .click(); + toggleSidebarCollapse: function toggleSidebarCollapse() { + return thisTime.findDisplayedByCssSelector('.sidebar-collapser .chevron-cont') + .click(); }, getSidebarWidth: function getSidebarWidth() { return thisTime - .findByCssSelector('.sidebar-list') - .getProperty('clientWidth'); + .findByClassName('sidebar-list') + .getProperty('clientWidth'); } }; diff --git a/test/support/pages/header_page.js b/test/support/pages/header_page.js index 9f92f652644d1..b87c29095bc21 100644 --- a/test/support/pages/header_page.js +++ b/test/support/pages/header_page.js @@ -51,7 +51,7 @@ define(function (require) { clickTimepicker: function clickTimepicker() { return this.remote.setFindTimeout(defaultTimeout) - .findByClassName('navbar-timepicker-time-desc').click(); + .findDisplayedByClassName('navbar-timepicker-time-desc').click(); }, clickAbsoluteButton: function clickAbsoluteButton() { @@ -100,41 +100,27 @@ define(function (require) { return self.clickGoButton(); }) .then(function () { - self.collapseTimepicker(); + return self.collapseTimepicker(); }); }, collapseTimepicker: function collapseTimepicker() { return this.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('.fa.fa-chevron-up') + .findByCssSelector('.fa.fa-chevron-circle-up') .click(); }, getToastMessage: function getToastMessage() { return this.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('kbn-truncated.toast-message.ng-isolate-scope') + .findDisplayedByCssSelector('kbn-truncated.toast-message.ng-isolate-scope') .getVisibleText(); }, waitForToastMessageGone: function waitForToastMessageGone() { var self = this; - return common.tryForTime(defaultTimeout, function () { - return self.remote.setFindTimeout(500) - .findAllByCssSelector('kbn-truncated.toast-message') - .then(function toastMessage(messages) { - if (messages.length > 0) { - common.debug('toast message found, waiting...'); - throw new Error('waiting for toast message to clear'); - } else { - common.debug('toast message clear'); - return messages; - } - }) - .catch(function () { - common.debug('toast message not found'); - return; - }); - }); + + return self.remote.setFindTimeout(defaultTimeout) + .waitForDeletedByCssSelector('kbn-truncated.toast-message'); }, clickToastOK: function clickToastOK() { @@ -148,7 +134,7 @@ define(function (require) { var self = this; return this.remote .setFindTimeout(defaultTimeout * 10) - .findByCssSelector('span.spinner.ng-hide'); + .findByCssSelector('.spinner.ng-hide'); } }; diff --git a/test/support/pages/settings_page.js b/test/support/pages/settings_page.js index 871d7081a9d35..ca0168129b3ac 100644 --- a/test/support/pages/settings_page.js +++ b/test/support/pages/settings_page.js @@ -25,8 +25,9 @@ define(function (require) { return common.findTestSubject('advancedSetting&' + propertyName + ' editButton') .click() .then(function setAdvancedSettingsClickPropertyValue(selectList) { - return self.remote.findByCssSelector('option[label="' + propertyValue + '"]') - .click(); + return self.remote + .findDisplayedByCssSelector('option[label="' + propertyValue + '"]') + .click(); }) .then(function setAdvancedSettingsClickSaveButton() { return common.findTestSubject('advancedSetting&' + propertyName + ' saveButton') @@ -95,7 +96,7 @@ define(function (require) { getTimeFieldNameField: function () { return this.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('select[ng-model="index.timeField"]'); + .findDisplayedByCssSelector('select[ng-model="index.timeField"]'); }, selectTimeFieldOption: function (selection) { @@ -122,12 +123,12 @@ define(function (require) { getTimeFieldOption: function (selection) { return this.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('option[label="' + selection + '"]').click(); + .findDisplayedByCssSelector('option[label="' + selection + '"]').click(); }, getCreateButton: function () { return this.remote.setFindTimeout(defaultTimeout) - .findByCssSelector('.btn'); + .findDisplayedByCssSelector('.btn'); }, clickCreateButton: function () { diff --git a/test/support/pages/visualize_page.js b/test/support/pages/visualize_page.js index 0732b6796499f..b19d938d4d188 100644 --- a/test/support/pages/visualize_page.js +++ b/test/support/pages/visualize_page.js @@ -82,7 +82,7 @@ define(function (require) { var types = []; return this.remote .setFindTimeout(defaultTimeout) - .findAllByCssSelector('a.wizard-vis-type.ng-scope h4') + .findAllByCssSelector('.wizard-type-heading h4') .then(function (chartTypes) { function getChartType(chart) { return chart.getVisibleText(); @@ -134,8 +134,7 @@ define(function (require) { getMetric: function getMetric() { return this.remote - .setFindTimeout(defaultTimeout) - // .findByCssSelector('div[ng-repeat="metric in metrics"') + .setFindTimeout(2000) .findByCssSelector('div[ng-controller="KbnMetricVisController"]') .getVisibleText(); }, @@ -150,7 +149,7 @@ define(function (require) { clickNewSearch: function clickNewSearch() { return this.remote .setFindTimeout(defaultTimeout) - .findByCssSelector('li[ng-click="stepTwoMode=\'new\'"]') + .findByCssSelector('.list-group-item a') .click(); }, @@ -274,7 +273,7 @@ define(function (require) { setNumericInterval: function setNumericInterval(newValue) { return this.remote .setFindTimeout(defaultTimeout) - .findByCssSelector('input.form-control:nth-child(2)') + .findByCssSelector('input[name="interval"]') .type(newValue); }, @@ -289,7 +288,7 @@ define(function (require) { clickNewVisualization: function clickNewVisualization() { return this.remote .setFindTimeout(defaultTimeout) - .findByCssSelector('button.ng-scope[aria-label="New Visualization"]') + .findByCssSelector('button[aria-label="New Visualization"]') .click(); }, @@ -298,7 +297,7 @@ define(function (require) { var self = this; return this.remote .setFindTimeout(defaultTimeout) - .findByCssSelector('button.ng-scope[aria-label="Save Visualization"]') + .findByCssSelector('button[aria-label="Save Visualization"]') .click() .then(function () { return common.sleep(1000); @@ -314,7 +313,7 @@ define(function (require) { .then(function () { return self.remote .setFindTimeout(defaultTimeout) - .findByCssSelector('.btn-primary') + .findByCssSelector('.config button[type="submit"]') .click(); }) // verify that green message at the top of the page. @@ -327,31 +326,31 @@ define(function (require) { }); }, - clickLoadSavedVisButton: function clickLoadSavedVisButton() { return this.remote - .setFindTimeout(defaultTimeout) - .findByCssSelector('button.ng-scope[aria-label="Load Saved Visualization"]') - .click(); + .setFindTimeout(defaultTimeout) + .findDisplayedByCssSelector('button[aria-label="Load Saved Visualization"]') + .click(); }, filterVisByName: function filterVisByName(vizName) { return this.remote - .findByCssSelector('input[name="filter"]') - .click() - // can't uses dashes in saved visualizations when filtering - // or extended character sets - // https://github.com/elastic/kibana/issues/6300 - .type(vizName.replace('-',' ')); + .findByCssSelector('input[name="filter"]') + .click() + // can't uses dashes in saved visualizations when filtering + // or extended character sets + // https://github.com/elastic/kibana/issues/6300 + .type(vizName.replace('-',' ')); }, clickVisualizationByLinkText: function clickVisualizationByLinkText(vizName) { var self = this; common.debug('clickVisualizationByLinkText(' + vizName + ')'); + return this.remote - .setFindTimeout(defaultTimeout) - .findByLinkText(vizName) - .click(); + .setFindTimeout(defaultTimeout) + .findByLinkText(vizName) + .click(); }, // this starts by clicking the Load Saved Viz button, not from the @@ -514,7 +513,7 @@ define(function (require) { // 5). for each chart element, find the green circle, then the cy position function getChartType(chart) { return chart - .findByCssSelector('circle[' + cssPart + ']') + .findByCssSelector('circle[fill="#6eadc1"]') .then(function (circleObject) { // common.debug('circleObject = ' + circleObject + ' yAxisHeight= ' + yAxisHeight + ' yAxisLabel= ' + yAxisLabel); return circleObject @@ -585,7 +584,7 @@ define(function (require) { .getAttribute('fill') .then(function (fillColor) { // we're only getting the Green Bars - if (fillColor === '#57c17b') { + if (fillColor === '#6eadc1') { return chart .getAttribute('height') .then(function (barHeight) {