From 886979bca59a492b82157832dc1eeb1ba3cac6cb Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 31 Mar 2020 19:13:26 +0200 Subject: [PATCH] [Discover] Deangularize and euificate sidebar (#47559) (#61987) * Split angular templates into React components * Add tooltip for field label * Adapt SCSS * Cleanup angular directives * Extract helper functions * Improve tests + docs * Move css to _sidebar.scss * Exclude _id field from displaying the Visualize button to prevent an ES error * A11y improvements --- .../__tests__/directives/css_truncate.js | 81 ----- .../__tests__/directives/discover_field.js | 97 ------ .../__tests__/directives/field_chooser.js | 257 -------------- .../discover/__tests__/doc_table/doc_table.js | 1 + .../public/discover/get_inner_angular.ts | 22 +- .../kibana/public/discover/kibana_services.ts | 2 - .../public/discover/np_ready/_discover.scss | 121 ------- .../angular/directives/css_truncate.ts | 61 ---- .../discover/np_ready/angular/discover.html | 13 +- .../np_ready/angular/discover_state.ts | 2 +- .../discover/np_ready/components/_index.scss | 2 +- .../field_chooser/_field_chooser.scss | 36 -- .../components/field_chooser/_index.scss | 1 - .../field_chooser/discover_field.html | 26 -- .../field_chooser/discover_field.js | 139 -------- .../field_chooser/field_chooser.html | 99 ------ .../components/field_chooser/field_chooser.js | 296 ---------------- .../lib/detail_views/string.html | 106 ------ .../field_chooser/lib/visualize_url_utils.ts | 110 ------ .../discover_index_pattern.test.tsx.snap | 0 .../np_ready/components/sidebar/_index.scss | 1 + .../np_ready/components/sidebar/_sidebar.scss | 155 +++++++++ .../change_indexpattern.tsx | 0 .../sidebar/discover_field.test.tsx | 111 ++++++ .../components/sidebar/discover_field.tsx | 186 ++++++++++ .../sidebar/discover_field_bucket.tsx | 99 ++++++ .../sidebar/discover_field_details.tsx | 98 ++++++ .../discover_field_search.test.tsx | 3 +- .../discover_field_search.tsx | 2 +- .../discover_index_pattern.test.tsx | 0 .../discover_index_pattern.tsx | 6 +- .../discover_index_pattern_title.tsx | 0 .../sidebar/discover_sidebar.test.tsx | 131 +++++++ .../components/sidebar/discover_sidebar.tsx | 326 ++++++++++++++++++ .../discover_sidebar_directive.ts} | 25 +- .../index.ts} | 11 +- .../lib/field_calculator.js | 0 .../sidebar/lib/field_calculator.test.ts} | 126 +++---- .../sidebar/lib/field_filter.test.ts | 96 ++++++ .../components/sidebar/lib/field_filter.ts | 78 +++++ .../components/sidebar/lib/get_details.ts | 52 +++ .../sidebar/lib/get_field_type_name.ts | 73 ++++ .../lib/get_index_pattern_field_list.ts | 44 +++ .../sidebar/lib/get_warnings.ts} | 38 +- .../sidebar/lib/group_fields.test.ts | 114 ++++++ .../components/sidebar/lib/group_fields.tsx | 78 +++++ .../sidebar/lib/visualize_url_utils.ts | 188 ++++++++++ .../string_progress_bar.tsx | 11 +- .../{field_chooser => sidebar}/types.ts | 15 + .../np_ready/embeddable/search_embeddable.ts | 4 +- .../styles/_legacy/components/_index.scss | 1 - .../styles/_legacy/components/_sidebar.scss | 127 ------- .../__snapshots__/field_name.test.tsx.snap | 6 +- .../components/field_name/field_name.test.tsx | 18 +- .../components/field_name/field_name.tsx | 43 +-- .../public/components/table/table.tsx | 2 +- .../public/components/table/table_row.tsx | 4 +- test/accessibility/apps/discover.ts | 4 +- .../apps/management/_scripted_fields.js | 2 +- test/functional/page_objects/discover_page.ts | 13 +- .../common/layouts/preserve_layout.css | 2 +- .../export_types/common/layouts/print.css | 2 +- .../translations/translations/ja-JP.json | 7 - .../translations/translations/zh-CN.json | 7 - 64 files changed, 2006 insertions(+), 1775 deletions(-) delete mode 100644 src/legacy/core_plugins/kibana/public/discover/__tests__/directives/css_truncate.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/__tests__/directives/discover_field.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/css_truncate.ts delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/_field_chooser.scss delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/_index.scss delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.html delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/discover_field.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/field_chooser.html delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/field_chooser.js delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/lib/detail_views/string.html delete mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/field_chooser/lib/visualize_url_utils.ts rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/__snapshots__/discover_index_pattern.test.tsx.snap (100%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/_index.scss create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/_sidebar.scss rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/change_indexpattern.tsx (100%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.test.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_bucket.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_field_details.tsx rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/discover_field_search.test.tsx (98%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/discover_field_search.tsx (99%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/discover_index_pattern.test.tsx (100%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/discover_index_pattern.tsx (94%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/discover_index_pattern_title.tsx (100%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.test.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/discover_sidebar.tsx rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser/discover_index_pattern_directive.tsx => sidebar/discover_sidebar_directive.ts} (61%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser/discover_field_search_directive.ts => sidebar/index.ts} (67%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/lib/field_calculator.js (100%) rename src/legacy/core_plugins/kibana/public/discover/{__tests__/directives/field_calculator.js => np_ready/components/sidebar/lib/field_calculator.test.ts} (64%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/field_filter.test.ts create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/field_filter.ts create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/get_details.ts create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/get_field_type_name.ts create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/get_index_pattern_field_list.ts rename src/legacy/core_plugins/kibana/public/discover/np_ready/{angular/directives/field_name.js => components/sidebar/lib/get_warnings.ts} (55%) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/group_fields.test.ts create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/group_fields.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/sidebar/lib/visualize_url_utils.ts rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/string_progress_bar.tsx (80%) rename src/legacy/core_plugins/kibana/public/discover/np_ready/components/{field_chooser => sidebar}/types.ts (78%) delete mode 100644 src/legacy/ui/public/styles/_legacy/components/_sidebar.scss diff --git a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/css_truncate.js b/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/css_truncate.js deleted file mode 100644 index 8dea9c61475d..000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/css_truncate.js +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import angular from 'angular'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import { pluginInstance } from 'plugins/kibana/discover/legacy'; - -let $parentScope; - -let $scope; - -let $elem; - -const init = function(expandable) { - // Load the application - pluginInstance.initializeServices(); - pluginInstance.initializeInnerAngular(); - ngMock.module('app/discover'); - - // Create the scope - ngMock.inject(function($rootScope, $compile) { - // Give us a scope - $parentScope = $rootScope; - - // Create the element - $elem = angular.element( - 'this isnt important' - ); - - // 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('cssTruncate directive', function() { - describe('expandable', function() { - beforeEach(function() { - init(true); - }); - - it('should set text-overflow to ellipsis and whitespace to nowrap', function(done) { - expect($elem.css('text-overflow')).to.be('ellipsis'); - expect($elem.css('white-space')).to.be('nowrap'); - done(); - }); - - it('should set white-space to normal when clicked, and back to nowrap when clicked again', function(done) { - $scope.toggle(); - expect($elem.css('white-space')).to.be('normal'); - - $scope.toggle(); - expect($elem.css('white-space')).to.be('nowrap'); - done(); - }); - }); -}); diff --git a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/discover_field.js b/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/discover_field.js deleted file mode 100644 index 6ffda87ac2be..000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/discover_field.js +++ /dev/null @@ -1,97 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import angular from 'angular'; -import _ from 'lodash'; -import sinon from 'sinon'; -import ngMock from 'ng_mock'; -import expect from '@kbn/expect'; -import { pluginInstance } from 'plugins/kibana/discover/legacy'; -import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern'; - -// Load the kibana app dependencies. - -describe('discoverField', function() { - let $scope; - let indexPattern; - let $elem; - beforeEach(() => pluginInstance.initializeServices()); - beforeEach(() => pluginInstance.initializeInnerAngular()); - beforeEach(ngMock.module('app/discover')); - beforeEach( - ngMock.inject(function(Private, $rootScope, $compile) { - $elem = angular.element(` - - `); - indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider); - - _.assign($rootScope, { - field: indexPattern.fields.getByName('extension'), - addField: sinon.spy(() => ($rootScope.field.display = true)), - removeField: sinon.spy(() => ($rootScope.field.display = false)), - showDetails: sinon.spy(() => ($rootScope.field.details = { exists: true })), - }); - - $compile($elem)($rootScope); - - $scope = $elem.isolateScope(); - $scope.$digest(); - sinon.spy($scope, 'toggleDetails'); - }) - ); - - afterEach(function() { - $scope.toggleDetails.restore(); - $scope.$destroy(); - }); - - describe('toggleDisplay', function() { - it('should exist', function() { - expect($scope.toggleDisplay).to.be.a(Function); - }); - - it('should call onAddField or onRemoveField depending on the display state', function() { - $scope.toggleDisplay($scope.field); - expect($scope.onAddField.callCount).to.be(1); - expect($scope.onAddField.firstCall.args).to.eql([$scope.field.name]); - - $scope.toggleDisplay($scope.field); - expect($scope.onRemoveField.callCount).to.be(1); - expect($scope.onRemoveField.firstCall.args).to.eql([$scope.field.name]); - }); - - it('should call toggleDetails when currently showing the details', function() { - $scope.toggleDetails($scope.field); - $scope.toggleDisplay($scope.field); - expect($scope.toggleDetails.callCount).to.be(2); - }); - }); - - describe('toggleDetails', function() { - it('should notify the parent when showing the details', function() { - $scope.toggleDetails($scope.field); - expect($scope.onShowDetails.callCount).to.be(1); - }); - }); -}); diff --git a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js b/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js deleted file mode 100644 index 47392c541890..000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/__tests__/directives/field_chooser.js +++ /dev/null @@ -1,257 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import angular from 'angular'; -import ngMock from 'ng_mock'; -import _ from 'lodash'; -import sinon from 'sinon'; -import expect from '@kbn/expect'; -import $ from 'jquery'; -import { pluginInstance } from 'plugins/kibana/discover/legacy'; -import FixturesHitsProvider from 'fixtures/hits'; -import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern'; -import { SimpleSavedObject } from '../../../../../../../core/public'; - -// Load the kibana app dependencies. - -let $parentScope; -let $scope; -let hits; -let indexPattern; -let indexPatternList; - -// Sets up the directive, take an element, and a list of properties to attach to the parent scope. -const init = function($elem, props) { - ngMock.inject(function($rootScope, $compile, $timeout) { - $parentScope = $rootScope; - _.assign($parentScope, props); - $compile($elem)($parentScope); - - // Required for test to run solo. Sigh - $timeout(() => $elem.scope().$digest(), 0); - - $scope = $elem.isolateScope(); - }); -}; - -const destroy = function() { - $scope.$destroy(); - $parentScope.$destroy(); -}; - -describe('discover field chooser directives', function() { - const $elem = angular.element(` - - `); - beforeEach(() => pluginInstance.initializeServices()); - beforeEach(() => pluginInstance.initializeInnerAngular()); - - beforeEach(ngMock.module('app/discover')); - - beforeEach( - ngMock.inject(function(Private) { - hits = Private(FixturesHitsProvider); - indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider); - indexPatternList = [ - new SimpleSavedObject(undefined, { id: '0', attributes: { title: 'b' } }), - new SimpleSavedObject(undefined, { id: '1', attributes: { title: 'a' } }), - new SimpleSavedObject(undefined, { id: '2', attributes: { title: 'c' } }), - ]; - - const fieldCounts = _.transform( - hits, - function(counts, hit) { - _.keys(indexPattern.flattenHit(hit)).forEach(function(key) { - counts[key] = (counts[key] || 0) + 1; - }); - }, - {} - ); - - init($elem, { - columns: [], - toggle: sinon.spy(), - hits: hits, - fieldCounts: fieldCounts, - addField: sinon.spy(), - addFilter: sinon.spy(), - indexPattern: indexPattern, - indexPatternList: indexPatternList, - removeField: sinon.spy(), - }); - - $scope.$digest(); - }) - ); - - afterEach(() => destroy()); - - const getSections = function(ctx) { - return { - selected: $('.dscFieldList--selected', ctx), - popular: $('.dscFieldList--popular', ctx), - unpopular: $('.dscFieldList--unpopular', ctx), - }; - }; - - describe('Field listing', function() { - it('should have Selected Fields, Fields and Popular Fields sections', function() { - const headers = $elem.find('.sidebar-list-header'); - expect(headers.length).to.be(3); - }); - - it('should have 2 popular fields, 1 unpopular field and no selected fields', function() { - const section = getSections($elem); - const popular = find('popular'); - const unpopular = find('unpopular'); - - expect(section.selected.find('li').length).to.be(0); - - expect(popular).to.contain('ssl'); - expect(popular).to.contain('@timestamp'); - expect(popular).to.not.contain('ip\n'); - - expect(unpopular).to.contain('extension'); - expect(unpopular).to.contain('machine.os'); - expect(unpopular).to.not.contain('ssl'); - - function find(popularity) { - return section[popularity] - .find('.dscFieldName') - .map((i, el) => $(el).text()) - .toArray(); - } - }); - - it('should show the popular fields header if there are popular fields', function() { - const section = getSections($elem); - expect(section.popular.hasClass('ng-hide')).to.be(false); - expect(section.popular.find('li:not(.sidebar-list-header)').length).to.be.above(0); - }); - - it('should not show the popular fields if there are not any', function() { - // Re-init - destroy(); - - _.each(indexPattern.fields, function(field) { - field.$$spec.count = 0; - }); // Reset the popular fields - init($elem, { - columns: [], - toggle: sinon.spy(), - hits: require('fixtures/hits'), - filter: sinon.spy(), - indexPattern: indexPattern, - }); - - const section = getSections($elem); - - $scope.$digest(); - expect(section.popular.hasClass('ng-hide')).to.be(true); - expect(section.popular.find('li:not(.sidebar-list-header)').length).to.be(0); - }); - - it('should move the field into selected when it is added to the columns array', function() { - const section = getSections($elem); - $scope.columns.push('bytes'); - $scope.$digest(); - - expect(section.selected.text()).to.contain('bytes'); - expect(section.popular.text()).to.not.contain('bytes'); - - $scope.columns.push('ip'); - $scope.$digest(); - expect(section.selected.text()).to.contain('ip\n'); - expect(section.unpopular.text()).to.not.contain('ip\n'); - - expect(section.popular.text()).to.contain('ssl'); - }); - }); - - describe('details processing', function() { - let field; - function getField() { - return _.find($scope.fields, { name: 'bytes' }); - } - - beforeEach(function() { - field = getField(); - }); - - it('should have a computeDetails function', function() { - expect($scope.computeDetails).to.be.a(Function); - }); - - it('should increase the field popularity when called', function() { - indexPattern.popularizeField = sinon.spy(); - $scope.computeDetails(field); - expect(indexPattern.popularizeField.called).to.be(true); - }); - - it('should append a details object to the field', function() { - $scope.computeDetails(field); - expect(field.details).to.not.be(undefined); - }); - - it('should delete the field details if they already exist', function() { - $scope.computeDetails(field); - expect(field.details).to.not.be(undefined); - $scope.computeDetails(field); - expect(field.details).to.be(undefined); - }); - - it('... unless recompute is true', function() { - $scope.computeDetails(field); - expect(field.details).to.not.be(undefined); - $scope.computeDetails(field, true); - expect(field.details).to.not.be(undefined); - }); - - it('should create buckets with formatted and raw values', function() { - $scope.computeDetails(field); - expect(field.details.buckets).to.not.be(undefined); - expect(field.details.buckets[0].value).to.be(40.141592); - }); - - it('should recalculate the details on open fields if the hits change', function() { - $scope.hits = [{ _source: { bytes: 1024 } }]; - $scope.$apply(); - - field = getField(); - $scope.computeDetails(field); - expect(getField().details.total).to.be(1); - - $scope.hits = [{ _source: { notbytes: 1024 } }]; - $scope.$apply(); - field = getField(); - expect(field.details).to.not.have.property('total'); - }); - }); -}); diff --git a/src/legacy/core_plugins/kibana/public/discover/__tests__/doc_table/doc_table.js b/src/legacy/core_plugins/kibana/public/discover/__tests__/doc_table/doc_table.js index 6b97da79fc58..9e74df08233d 100644 --- a/src/legacy/core_plugins/kibana/public/discover/__tests__/doc_table/doc_table.js +++ b/src/legacy/core_plugins/kibana/public/discover/__tests__/doc_table/doc_table.js @@ -61,6 +61,7 @@ const destroy = function() { describe('docTable', function() { let $elem; beforeEach(() => pluginInstance.initializeInnerAngular()); + beforeEach(() => pluginInstance.initializeServices()); beforeEach(ngMock.module('app/discover')); beforeEach(function() { $elem = angular.element(` diff --git a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts index 031e10e99289..607d79b81618 100644 --- a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts +++ b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts @@ -27,7 +27,7 @@ import { CoreStart, LegacyCoreStart } from 'kibana/public'; import { DataPublicPluginStart } from '../../../../../plugins/data/public'; import { Storage } from '../../../../../plugins/kibana_utils/public'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public'; -import { createDocTableDirective } from './np_ready/angular/doc_table/doc_table'; +import { createDocTableDirective } from './np_ready/angular/doc_table'; import { createTableHeaderDirective } from './np_ready/angular/doc_table/components/table_header'; import { createToolBarPagerButtonsDirective, @@ -37,18 +37,8 @@ import { createTableRowDirective } from './np_ready/angular/doc_table/components import { createPagerFactory } from './np_ready/angular/doc_table/lib/pager/pager_factory'; import { createInfiniteScrollDirective } from './np_ready/angular/doc_table/infinite_scroll'; import { createDocViewerDirective } from './np_ready/angular/doc_viewer'; -import { createFieldSearchDirective } from './np_ready/components/field_chooser/discover_field_search_directive'; -import { createIndexPatternSelectDirective } from './np_ready/components/field_chooser/discover_index_pattern_directive'; -import { createStringFieldProgressBarDirective } from './np_ready/components/field_chooser/string_progress_bar'; -// @ts-ignore -import { FieldNameDirectiveProvider } from './np_ready/angular/directives/field_name'; -// @ts-ignore -import { createFieldChooserDirective } from './np_ready/components/field_chooser/field_chooser'; -// @ts-ignore -import { createDiscoverFieldDirective } from './np_ready/components/field_chooser/discover_field'; import { CollapsibleSidebarProvider } from './np_ready/angular/directives/collapsible_sidebar/collapsible_sidebar'; import { DiscoverStartPlugins } from './plugin'; -import { createCssTruncateDirective } from './np_ready/angular/directives/css_truncate'; // @ts-ignore import { FixedScrollProvider } from './np_ready/angular/directives/fixed_scroll'; // @ts-ignore @@ -65,6 +55,7 @@ import { createTopNavDirective, createTopNavHelper, } from '../../../../../plugins/kibana_legacy/public'; +import { createDiscoverSidebarDirective } from './np_ready/components/sidebar'; /** * returns the main inner angular module, it contains all the parts of Angular Discover @@ -125,7 +116,6 @@ export function initializeInnerAngularModule( ]) .config(watchMultiDecorator) .directive('icon', reactDirective => reactDirective(EuiIcon)) - .directive('fieldName', FieldNameDirectiveProvider) .directive('renderComplete', createRenderCompleteDirective) .service('debounce', ['$timeout', DebounceProviderTimeout]); } @@ -149,16 +139,10 @@ export function initializeInnerAngularModule( .run(registerListenEventListener) .directive('icon', reactDirective => reactDirective(EuiIcon)) .directive('kbnAccessibleClick', KbnAccessibleClickProvider) - .directive('fieldName', FieldNameDirectiveProvider) .directive('collapsibleSidebar', CollapsibleSidebarProvider) - .directive('cssTruncate', createCssTruncateDirective) .directive('fixedScroll', FixedScrollProvider) .directive('renderComplete', createRenderCompleteDirective) - .directive('discoverFieldSearch', createFieldSearchDirective) - .directive('discoverIndexPatternSelect', createIndexPatternSelectDirective) - .directive('stringFieldProgressBar', createStringFieldProgressBarDirective) - .directive('discoverField', createDiscoverFieldDirective) - .directive('discFieldChooser', createFieldChooserDirective) + .directive('discoverSidebar', createDiscoverSidebarDirective) .service('debounce', ['$timeout', DebounceProviderTimeout]); } diff --git a/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts b/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts index 2ceb06f325a9..55f369eaecd2 100644 --- a/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts +++ b/src/legacy/core_plugins/kibana/public/discover/kibana_services.ts @@ -16,7 +16,6 @@ * specific language governing permissions and limitations * under the License. */ -import angular from 'angular'; // just used in embeddables and discover controller import { DiscoverServices } from './build_services'; let angularModule: any = null; @@ -52,7 +51,6 @@ export const [getUrlTracker, setUrlTracker] = createGetterSetter<{ }>('urlTracker'); // EXPORT legacy static dependencies, should be migrated when available in a new version; -export { angular }; export { wrapInI18nContext } from 'ui/i18n'; import { search } from '../../../../../plugins/data/public'; import { createGetterSetter } from '../../../../../plugins/kibana_utils/common'; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 62e7a96ed80c..8eaa66cf5862 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -1,9 +1,5 @@ discover-app { flex-grow: 1; - - .sidebar-container { - background-color: transparent; - } } .dscHistogram { @@ -12,22 +8,6 @@ discover-app { padding: $euiSizeS; } -// SASSTODO: replace the margin-top value with a variable -.dscSidebar__listHeader { - margin-top: 5px; -} - -.dscFieldList--popular { - padding-top: $euiSizeS; -} - -.dscFieldList--selected, -.dscFieldList--unpopular, -.dscFieldList--popular { - padding-left: $euiSizeS; - padding-right: $euiSizeS; -} - // SASSTODO: replace the z-index value with a variable .dscWrapper { padding-right: $euiSizeS; @@ -109,107 +89,6 @@ discover-app { text-align: center; } -/** - * 1. Override sidebar-item-title styles. - */ -.dscSidebarItem { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 0 !important; /* 1 */ - padding-bottom: 0 !important; /* 1 */ - height: $euiSizeXL; - - &:hover, - &:focus { - .dscSidebarItem__action { - opacity: 1; - } - } -} - -.dscSidebarItem--active { - background: shade($euiColorLightestShade, 5%); - color: $euiColorFullShade; - font-weight: bold; -} - -/** - * 1. Truncate long text so it doesn't push the actions outside of the container. - */ -.dscSidebarItem__label { - overflow: hidden; /* 1 */ - text-overflow: ellipsis; /* 1 */ -} - -/** - * 1. Only visually hide the action, so that it's still accessible to screen readers. - * 2. When tabbed to, this element needs to be visible for keyboard accessibility. - */ -.dscSidebarItem__action { - opacity: 0; /* 1 */ - - &:focus { - opacity: 1; /* 2 */ - } -} - -.dscFieldSearch { - padding: $euiSizeS; -} - -.dscFieldFilter { - margin-top: $euiSizeS; -} - -.dscFieldDetails { - padding: $euiSizeS; - background-color: $euiColorLightestShade; - color: $euiTextColor; -} - -// SASSTODO: replace the padding and margin values with variables -.dscFieldDetails__progress { - background-color: $euiColorEmptyShade; - color: $euiColorDarkShade; - padding: $euiSizeXS; -} - -// SASSTODO: replace the margin-top value with a variable -.dscFieldDetailsItem { - margin-top: 5px; -} - -.dscFieldDetails__filter { - cursor: pointer; -} - -.dscFieldDetailsItem__title { - line-height: 1.5; - display: flex; - align-items: center; - justify-content: space-between; -} - -/** - * 1. If the field name is very long, don't let it squash the buttons. - */ -.dscFieldDetailsItem__buttonGroup { - flex: 0 0 auto; /* 1 */ -} - -.dscFieldDetailsItem__button { - appearance: none; - border: none; - padding: 0; - background-color: transparent; -} - -.dscFieldName--noResults { - color: $euiColorDarkShade; -} - .dscResults { h3 { margin: -20px 0 10px 0; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/css_truncate.ts b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/css_truncate.ts deleted file mode 100644 index 6aa645ea9368..000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/css_truncate.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ -export function createCssTruncateDirective() { - return { - restrict: 'A', - scope: {}, - link: ($scope: any, $elem: any, attrs: any) => { - $elem.css({ - overflow: 'hidden', - 'white-space': 'nowrap', - 'text-overflow': 'ellipsis', - 'word-break': 'break-all', - }); - - if (attrs.cssTruncateExpandable != null) { - $scope.$watch( - function() { - return $elem.html(); - }, - function() { - if ($elem[0].offsetWidth < $elem[0].scrollWidth) { - $elem.css({ cursor: 'pointer' }); - $elem.bind('click', function() { - $scope.toggle(); - }); - } - } - ); - } - - $scope.toggle = function() { - if ($elem.css('white-space') !== 'normal') { - $elem.css({ 'white-space': 'normal' }); - } else { - $elem.css({ 'white-space': 'nowrap' }); - } - }; - - $scope.$on('$destroy', function() { - $elem.unbind('click'); - $elem.unbind('mouseenter'); - }); - }, - }; -} diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html index e9338b8bd57c..fb38f3e7d4c4 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html @@ -20,20 +20,21 @@

{{screenTitle}}

-