+
+
+
+
+
+
+
+
+
+
+ {{ ::'plugin_2.message-id' | i18n: { defaultMessage: 'Message text' } }}
diff --git a/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_2/test_file.jsx b/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_2/test_file.jsx deleted file mode 100644 index b3f0c8d2b9c1..000000000000 --- a/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_2/test_file.jsx +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -i18n('plugin_2.message-id', { defaultMessage: 'Message text' }); diff --git a/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_4/test_file_4.jsx b/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_4/test_file_4.jsx deleted file mode 100644 index 5ce7b916bcd4..000000000000 --- a/src/dev/i18n/__fixtures__/extract_default_translations/test_plugin_4/test_file_4.jsx +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/* eslint-disable */ -class Component extends PureComponent { - render() { - return ( -= (item: T[P]) => boolean; * - fieldType filters a list of fields by their type property * - aggFilter filters a list of aggs by their name property * - * @returns the filter function + * @returns the filter function which can be registered with angular */ export function propFilter
(prop: P) {
/**
diff --git a/src/plugins/data/common/search/aggs/utils/to_angular_json.ts b/src/plugins/data/common/search/aggs/utils/to_angular_json.ts
index 3eac6a1fcfe4..0efafa7884a1 100644
--- a/src/plugins/data/common/search/aggs/utils/to_angular_json.ts
+++ b/src/plugins/data/common/search/aggs/utils/to_angular_json.ts
@@ -33,7 +33,6 @@
* https://github.com/angular/angular.js/blob/master/src/Angular.js#L1312
*
* @internal
- * @deprecated This function will be removed in the next major version.
*/
export function toAngularJSON(obj: any, pretty?: any): string {
if (obj === undefined) return '';
diff --git a/src/plugins/data_explorer/public/components/sidebar/index.tsx b/src/plugins/data_explorer/public/components/sidebar/index.tsx
index 42abed642e36..921e3894983b 100644
--- a/src/plugins/data_explorer/public/components/sidebar/index.tsx
+++ b/src/plugins/data_explorer/public/components/sidebar/index.tsx
@@ -76,7 +76,6 @@ export const Sidebar: FC = ({ children }) => {
+ To provide feedback,{' '}
+
+ The search bar at the top uses OpenSearch’s support for Lucene
+
+ Query String syntax
+
+
+ (opens in a new tab or window)
+
+
+ . Here are some examples of how you can search for web server logs that have been parsed into a few fields.
+
+ One or more of the indices you’re looking at contains a date field. Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. You can try changing the time range to one which contains data.
+ {formattedValue}
+
+
+
+
+ To provide feedback,{' '}
+
+ <>
+
);
};
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
index 315d5ca9c006..8cfeaf9795af 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
@@ -13,15 +13,14 @@ import {
EuiFlexItem,
EuiTitle,
} from '@elastic/eui';
-import { FormattedMessage } from '@osd/i18n/react';
import { DocViewer } from '../doc_viewer/doc_viewer';
import { IndexPattern } from '../../../opensearch_dashboards_services';
-import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { DocViewFilterFn } from '../../doc_views/doc_views_types';
import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links';
interface Props {
columns: string[];
- hit: OpenSearchSearchHit;
+ hit: any;
indexPattern: IndexPattern;
onAddColumn: (column: string) => void;
onClose: () => void;
@@ -41,12 +40,10 @@ export function DataGridFlyout({
// TODO: replace EuiLink with doc_view_links registry
// TODO: Also move the flyout higher in the react tree to prevent redrawing the table component and slowing down page performance
return (
-
-
+ Document Details
+
+
+
+
+
+
+
+
+
+
+
+ ,
+]
+`;
+
+exports[`DiscoverNoResults props timeFieldName renders time range feedback 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+ No results match your search criteria
+
+
+
+
+
+
+ Refine your query
+
+
+
+
+
+
+ Find requests that contain the number 200, in any field
+
+
+
+ 200
+
+
+
+
+ Find 200 in the status field
+
+
+
+ status:200
+
+
+
+
+ Find all status codes between 400-499
+
+
+
+ status:[400 TO 499]
+
+
+
+
+ Find status codes 400-499 with the extension php
+
+
+
+ status:[400 TO 499] AND extension:PHP
+
+
+
+
+ Find status codes 400-499 with the extension php or html
+
+
+
+ status:[400 TO 499] AND (extension:php OR extension:html)
+
+
+
+ ,
+]
+`;
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss b/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss
new file mode 100644
index 000000000000..1e625fa064e2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/_histogram.scss
@@ -0,0 +1,11 @@
+.dscHistogram__header--partial {
+ font-weight: $euiFontWeightRegular;
+ min-width: $euiSize * 12;
+}
+
+// Temporary override to inlined styles provided by ElasticCharts theming
+// Will be unnecessary when we migrate the histogram to a different rendering library:
+// https: //github.com/opensearch-project/OpenSearch-Dashboards/issues/4643
+.dscHistogram .echChartBackground {
+ background-color: inherit !important;
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/_index.scss b/src/plugins/discover_legacy/public/application/angular/directives/_index.scss
new file mode 100644
index 000000000000..01f5bbb6fd57
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/_index.scss
@@ -0,0 +1,2 @@
+@import "no_results";
+@import "histogram";
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/_no_results.scss b/src/plugins/discover_legacy/public/application/angular/directives/_no_results.scss
new file mode 100644
index 000000000000..7ea945e820bf
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/_no_results.scss
@@ -0,0 +1,3 @@
+.dscNoResults {
+ max-width: 1000px;
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.js b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.js
new file mode 100644
index 000000000000..da0f4893b909
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.js
@@ -0,0 +1,79 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+// Debounce service, angularized version of lodash debounce
+// borrowed heavily from https://github.com/shahata/angular-debounce
+
+export function createDebounceProviderTimeout($timeout) {
+ return function (func, wait, options) {
+ let timeout;
+ let args;
+ let self;
+ let result;
+ options = _.defaults(options || {}, {
+ leading: false,
+ trailing: true,
+ invokeApply: true,
+ });
+
+ function debounce() {
+ self = this;
+ args = arguments;
+
+ const later = function () {
+ timeout = null;
+ if (!options.leading || options.trailing) {
+ result = func.apply(self, args);
+ }
+ };
+
+ const callNow = options.leading && !timeout;
+
+ if (timeout) {
+ $timeout.cancel(timeout);
+ }
+ timeout = $timeout(later, wait, options.invokeApply);
+
+ if (callNow) {
+ result = func.apply(self, args);
+ }
+
+ return result;
+ }
+
+ debounce.cancel = function () {
+ $timeout.cancel(timeout);
+ timeout = null;
+ };
+
+ return debounce;
+ };
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.test.ts b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.test.ts
new file mode 100644
index 000000000000..635ed560df40
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/debounce/debounce.test.ts
@@ -0,0 +1,148 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 sinon, { SinonSpy } from 'sinon';
+import angular, { auto, ITimeoutService } from 'angular';
+import 'angular-mocks';
+import 'angular-sanitize';
+import 'angular-route';
+
+// @ts-ignore
+import { createDebounceProviderTimeout } from './debounce';
+import { coreMock } from '../../../../../../../core/public/mocks';
+import { initializeInnerAngularModule } from '../../../../get_inner_angular';
+import { navigationPluginMock } from '../../../../../../navigation/public/mocks';
+import { dataPluginMock } from '../../../../../../data/public/mocks';
+import { initAngularBootstrap } from '../../../../../../opensearch_dashboards_legacy/public';
+
+describe('debounce service', function () {
+ let debounce: (fn: () => void, timeout: number, options?: any) => any;
+ let $timeout: ITimeoutService;
+ let spy: SinonSpy;
+
+ beforeEach(() => {
+ spy = sinon.spy();
+
+ initAngularBootstrap();
+
+ initializeInnerAngularModule(
+ 'app/discover',
+ coreMock.createStart(),
+ navigationPluginMock.createStartContract(),
+ dataPluginMock.createStartContract()
+ );
+
+ angular.mock.module('app/discover');
+
+ angular.mock.inject(($injector: auto.IInjectorService, _$timeout_: ITimeoutService) => {
+ $timeout = _$timeout_;
+
+ debounce = createDebounceProviderTimeout($timeout);
+ });
+ });
+
+ it('should have a cancel method', function () {
+ const bouncer = debounce(() => {}, 100);
+
+ expect(bouncer).toHaveProperty('cancel');
+ });
+
+ describe('delayed execution', function () {
+ const sandbox = sinon.createSandbox();
+
+ beforeEach(() => sandbox.useFakeTimers());
+ afterEach(() => sandbox.restore());
+
+ it('should delay execution', function () {
+ const bouncer = debounce(spy, 100);
+
+ bouncer();
+ sinon.assert.notCalled(spy);
+ $timeout.flush();
+ sinon.assert.calledOnce(spy);
+
+ spy.resetHistory();
+ });
+
+ it('should fire on leading edge', function () {
+ const bouncer = debounce(spy, 100, { leading: true });
+
+ bouncer();
+ sinon.assert.calledOnce(spy);
+ $timeout.flush();
+ sinon.assert.calledTwice(spy);
+
+ spy.resetHistory();
+ });
+
+ it('should only fire on leading edge', function () {
+ const bouncer = debounce(spy, 100, { leading: true, trailing: false });
+
+ bouncer();
+ sinon.assert.calledOnce(spy);
+ $timeout.flush();
+ sinon.assert.calledOnce(spy);
+
+ spy.resetHistory();
+ });
+
+ it('should reset delayed execution', function () {
+ const cancelSpy = sinon.spy($timeout, 'cancel');
+ const bouncer = debounce(spy, 100);
+
+ bouncer();
+ sandbox.clock.tick(1);
+
+ bouncer();
+ sinon.assert.notCalled(spy);
+ $timeout.flush();
+ sinon.assert.calledOnce(spy);
+ sinon.assert.calledOnce(cancelSpy);
+
+ spy.resetHistory();
+ cancelSpy.resetHistory();
+ });
+ });
+
+ describe('cancel', function () {
+ it('should cancel the $timeout', function () {
+ const cancelSpy = sinon.spy($timeout, 'cancel');
+ const bouncer = debounce(spy, 100);
+
+ bouncer();
+ bouncer.cancel();
+ sinon.assert.calledOnce(cancelSpy);
+ // throws if pending timeouts
+ $timeout.verifyNoPendingTasks();
+
+ cancelSpy.resetHistory();
+ });
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/debounce/index.js b/src/plugins/discover_legacy/public/application/angular/directives/debounce/index.js
new file mode 100644
index 000000000000..6acd0d680d4d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/debounce/index.js
@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { createDebounceProviderTimeout } from './debounce';
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.js b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.js
new file mode 100644
index 000000000000..6b80caaa1f71
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.js
@@ -0,0 +1,166 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 $ from 'jquery';
+import _ from 'lodash';
+import { createDebounceProviderTimeout } from './debounce';
+
+const SCROLLER_HEIGHT = 20;
+
+/**
+ * This directive adds a fixed horizontal scrollbar to the bottom of the window that proxies its scroll events
+ * to the target element's real scrollbar. This is useful when the target element's horizontal scrollbar
+ * might be waaaay down the page, like the doc table on Discover.
+ */
+export function FixedScrollProvider($timeout) {
+ return {
+ restrict: 'A',
+ link: function ($scope, $el) {
+ return createFixedScroll($scope, $timeout)($el);
+ },
+ };
+}
+
+export function createFixedScroll($scope, $timeout) {
+ const debounce = createDebounceProviderTimeout($timeout);
+ return function (el) {
+ const $el = typeof el.css === 'function' ? el : $(el);
+ let $window = $(window);
+ let $scroller = $('
+
+
+
+
+
+
+
+ No results match your search criteria
+
+
+
+
+
+ Expand your time range
+
+ ').height(SCROLLER_HEIGHT);
+
+ /**
+ * Remove the listeners bound in listen()
+ * @type {function}
+ */
+ let unlisten = _.noop;
+
+ /**
+ * Listen for scroll events on the $scroller and the $el, sets unlisten()
+ *
+ * unlisten must be called before calling or listen() will throw an Error
+ *
+ * Since the browser emits "scroll" events after setting scrollLeft
+ * the listeners also prevent tug-of-war
+ *
+ * @throws {Error} If unlisten was not called first
+ * @return {undefined}
+ */
+ function listen() {
+ if (unlisten !== _.noop) {
+ throw new Error('fixedScroll listeners were not cleaned up properly before re-listening!');
+ }
+
+ let blockTo;
+ function bind($from, $to) {
+ function handler() {
+ if (blockTo === $to) return (blockTo = null);
+ $to.scrollLeft((blockTo = $from).scrollLeft());
+ }
+
+ $from.on('scroll', handler);
+ return function () {
+ $from.off('scroll', handler);
+ };
+ }
+
+ unlisten = _.flow(bind($el, $scroller), bind($scroller, $el), function () {
+ unlisten = _.noop;
+ });
+ }
+
+ /**
+ * Revert DOM changes and event listeners
+ * @return {undefined}
+ */
+ function cleanUp() {
+ unlisten();
+ $scroller.detach();
+ $el.css('padding-bottom', 0);
+ }
+
+ /**
+ * Modify the DOM and attach event listeners based on need.
+ * Is called many times to re-setup, must be idempotent
+ * @return {undefined}
+ */
+ function setup() {
+ cleanUp();
+
+ const containerWidth = $el.width();
+ const contentWidth = $el.prop('scrollWidth');
+ const containerHorizOverflow = contentWidth - containerWidth;
+
+ const elTop = $el.offset().top - $window.scrollTop();
+ const elBottom = elTop + $el.height();
+ const windowVertOverflow = elBottom - $window.height();
+
+ const requireScroller = containerHorizOverflow > 0 && windowVertOverflow > 0;
+ if (!requireScroller) return;
+
+ // push the content away from the scroller
+ $el.css('padding-bottom', SCROLLER_HEIGHT);
+
+ // fill the scroller with a dummy element that mimics the content
+ $scroller
+ .width(containerWidth)
+ .html($('').css({ width: contentWidth, height: SCROLLER_HEIGHT }))
+ .insertAfter($el);
+
+ // listen for scroll events
+ listen();
+ }
+
+ let width;
+ let scrollWidth;
+ function checkWidth() {
+ const newScrollWidth = $el.prop('scrollWidth');
+ const newWidth = $el.width();
+
+ if (scrollWidth !== newScrollWidth || width !== newWidth) {
+ $scope.$apply(setup);
+
+ scrollWidth = newScrollWidth;
+ width = newWidth;
+ }
+ }
+
+ const debouncedCheckWidth = debounce(checkWidth, 100, {
+ invokeApply: false,
+ });
+ $scope.$watch(debouncedCheckWidth);
+
+ function destroy() {
+ cleanUp();
+ debouncedCheckWidth.cancel();
+ $scroller = $window = null;
+ }
+ return destroy;
+ };
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.test.js b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.test.js
new file mode 100644
index 000000000000..cf0e6d9f331c
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/fixed_scroll.test.js
@@ -0,0 +1,274 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 'angular-mocks';
+import $ from 'jquery';
+
+import sinon from 'sinon';
+
+import { initAngularBootstrap } from '../../../../../opensearch_dashboards_legacy/public';
+import { FixedScrollProvider } from './fixed_scroll';
+
+const testModuleName = 'fixedScroll';
+
+angular.module(testModuleName, []).directive('fixedScroll', FixedScrollProvider);
+
+describe('FixedScroll directive', function () {
+ const sandbox = sinon.createSandbox();
+ let mockWidth;
+ let mockHeight;
+ let currentWidth = 120;
+ let currentHeight = 120;
+ let currentJqLiteWidth = 120;
+ let spyScrollWidth;
+
+ let compile;
+ let flushPendingTasks;
+ const trash = [];
+
+ beforeAll(() => {
+ mockWidth = jest.spyOn($.prototype, 'width').mockImplementation(function (width) {
+ if (width === undefined) {
+ return currentWidth;
+ } else {
+ currentWidth = width;
+ return this;
+ }
+ });
+ mockHeight = jest.spyOn($.prototype, 'height').mockImplementation(function (height) {
+ if (height === undefined) {
+ return currentHeight;
+ } else {
+ currentHeight = height;
+ return this;
+ }
+ });
+ angular.element.prototype.width = jest.fn(function (width) {
+ if (width === undefined) {
+ return currentJqLiteWidth;
+ } else {
+ currentJqLiteWidth = width;
+ return this;
+ }
+ });
+ angular.element.prototype.offset = jest.fn(() => ({ top: 0 }));
+ });
+
+ beforeEach(() => {
+ currentJqLiteWidth = 120;
+ initAngularBootstrap();
+
+ angular.mock.module(testModuleName);
+ angular.mock.inject(($compile, $rootScope, $timeout) => {
+ flushPendingTasks = function flushPendingTasks() {
+ $rootScope.$digest();
+ $timeout.flush();
+ };
+
+ compile = function (ratioY, ratioX) {
+ if (ratioX == null) ratioX = ratioY;
+
+ // since the directive works at the sibling level we create a
+ // parent for everything to happen in
+ const $parent = $('').css({
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ });
+
+ $parent.appendTo(document.body);
+ trash.push($parent);
+
+ const $el = $('')
+ .css({
+ 'overflow-x': 'auto',
+ width: $parent.width(),
+ })
+ .appendTo($parent);
+
+ spyScrollWidth = jest.spyOn(window.HTMLElement.prototype, 'scrollWidth', 'get');
+ spyScrollWidth.mockReturnValue($parent.width() * ratioX);
+ angular.element.prototype.height = jest.fn(() => $parent.height() * ratioY);
+
+ const $content = $('')
+ .css({
+ width: $parent.width() * ratioX,
+ height: $parent.height() * ratioY,
+ })
+ .appendTo($el);
+
+ $compile($parent)($rootScope);
+ flushPendingTasks();
+
+ return {
+ $container: $el,
+ $content: $content,
+ $scroller: $parent.find('.dscTableFixedScroll__scroller'),
+ };
+ };
+ });
+ });
+
+ afterEach(function () {
+ trash.splice(0).forEach(function ($el) {
+ $el.remove();
+ });
+
+ sandbox.restore();
+ spyScrollWidth.mockRestore();
+ });
+
+ afterAll(() => {
+ mockWidth.mockRestore();
+ mockHeight.mockRestore();
+ delete angular.element.prototype.width;
+ delete angular.element.prototype.height;
+ delete angular.element.prototype.offset;
+ });
+
+ test('does nothing when not needed', function () {
+ let els = compile(0.5, 1.5);
+ expect(els.$scroller).toHaveLength(0);
+
+ els = compile(1.5, 0.5);
+ expect(els.$scroller).toHaveLength(0);
+ });
+
+ test('attaches a scroller below the element when the content is larger then the container', function () {
+ const els = compile(1.5);
+ expect(els.$scroller.length).toBe(1);
+ });
+
+ test('copies the width of the container', function () {
+ const els = compile(1.5);
+ expect(els.$scroller.width()).toBe(els.$container.width());
+ });
+
+ test('mimics the scrollWidth of the element', function () {
+ const els = compile(1.5);
+ expect(els.$scroller.prop('scrollWidth')).toBe(els.$container.prop('scrollWidth'));
+ });
+
+ describe('scroll event handling / tug of war prevention', function () {
+ test('listens when needed, unlistens when not needed', function (done) {
+ const on = sandbox.spy($.fn, 'on');
+ const off = sandbox.spy($.fn, 'off');
+ const jqLiteOn = sandbox.spy(angular.element.prototype, 'on');
+ const jqLiteOff = sandbox.spy(angular.element.prototype, 'off');
+
+ const els = compile(1.5);
+ expect(on.callCount).toBe(1);
+ expect(jqLiteOn.callCount).toBe(1);
+ checkThisVals('$.fn.on', on, jqLiteOn);
+
+ expect(off.callCount).toBe(0);
+ expect(jqLiteOff.callCount).toBe(0);
+ currentJqLiteWidth = els.$container.prop('scrollWidth');
+ flushPendingTasks();
+ expect(off.callCount).toBe(1);
+ expect(jqLiteOff.callCount).toBe(1);
+ checkThisVals('$.fn.off', off, jqLiteOff);
+ done();
+
+ function checkThisVals(namejQueryFn, spyjQueryFn, spyjqLiteFn) {
+ // the this values should be different
+ expect(spyjQueryFn.thisValues[0].is(spyjqLiteFn.thisValues[0])).toBeFalsy();
+ // but they should be either $scroller or $container
+ const el = spyjQueryFn.thisValues[0];
+
+ if (el.is(els.$scroller) || el.is(els.$container)) return;
+
+ done.fail('expected ' + namejQueryFn + ' to be called with $scroller or $container');
+ }
+ });
+
+ // Turn off this row because tests failed.
+ // Scroll event is not catched in fixed_scroll.
+ // As container is jquery element in test but inside fixed_scroll it's a jqLite element.
+ // it would need jquery in jest to make this work.
+ [
+ //{ from: '$container', to: '$scroller' },
+ { from: '$scroller', to: '$container' },
+ ].forEach(function (names) {
+ describe('scroll events ' + JSON.stringify(names), function () {
+ let spyJQueryScrollLeft;
+ let spyJQLiteScrollLeft;
+ let els;
+ let $from;
+ let $to;
+
+ beforeEach(function () {
+ spyJQueryScrollLeft = sandbox.spy($.fn, 'scrollLeft');
+ spyJQLiteScrollLeft = sandbox.stub();
+ angular.element.prototype.scrollLeft = spyJQLiteScrollLeft;
+ els = compile(1.5);
+ $from = els[names.from];
+ $to = els[names.to];
+ });
+
+ test('transfers the scrollLeft', function () {
+ expect(spyJQueryScrollLeft.callCount).toBe(0);
+ expect(spyJQLiteScrollLeft.callCount).toBe(0);
+ $from.scroll();
+ expect(spyJQueryScrollLeft.callCount).toBe(1);
+ expect(spyJQLiteScrollLeft.callCount).toBe(1);
+
+ // first call should read the scrollLeft from the $container
+ const firstCall = spyJQueryScrollLeft.getCall(0);
+ expect(firstCall.args).toEqual([]);
+
+ // second call should be setting the scrollLeft on the $scroller
+ const secondCall = spyJQLiteScrollLeft.getCall(0);
+ expect(secondCall.args).toEqual([firstCall.returnValue]);
+ });
+
+ /**
+ * In practice, calling $el.scrollLeft() causes the "scroll" event to trigger,
+ * but the browser seems to be very careful about triggering the event too much
+ * and I can't reliably recreate the browsers behavior in a test. So... faking it!
+ */
+ test('prevents tug of war by ignoring echo scroll events', function () {
+ $from.scroll();
+ expect(spyJQueryScrollLeft.callCount).toBe(1);
+ expect(spyJQLiteScrollLeft.callCount).toBe(1);
+
+ spyJQueryScrollLeft.resetHistory();
+ spyJQLiteScrollLeft.resetHistory();
+ $to.scroll();
+ expect(spyJQueryScrollLeft.callCount).toBe(0);
+ expect(spyJQLiteScrollLeft.callCount).toBe(0);
+ });
+ });
+ });
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/directives/histogram.tsx b/src/plugins/discover_legacy/public/application/angular/directives/histogram.tsx
new file mode 100644
index 000000000000..4c1263192322
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/directives/histogram.tsx
@@ -0,0 +1,362 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import moment from 'moment-timezone';
+import { unitOfTime } from 'moment';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { euiThemeVars } from '@osd/ui-shared-deps/theme';
+
+import {
+ AnnotationDomainType,
+ Axis,
+ Chart,
+ HistogramBarSeries,
+ LineAnnotation,
+ Position,
+ ScaleType,
+ Settings,
+ RectAnnotation,
+ TooltipValue,
+ TooltipType,
+ ElementClickListener,
+ XYChartElementEvent,
+ BrushEndListener,
+ Theme,
+} from '@elastic/charts';
+
+import { i18n } from '@osd/i18n';
+import { IUiSettingsClient } from 'opensearch-dashboards/public';
+import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
+import { Subscription, combineLatest } from 'rxjs';
+import { getServices } from '../../../opensearch_dashboards_services';
+import { Chart as IChart } from '../helpers/point_series';
+
+export interface DiscoverHistogramProps {
+ chartData: IChart;
+ timefilterUpdateHandler: (ranges: { from: number; to: number }) => void;
+}
+
+interface DiscoverHistogramState {
+ chartsTheme: EuiChartThemeType['theme'];
+ chartsBaseTheme: Theme;
+}
+
+function findIntervalFromDuration(
+ dateValue: number,
+ opensearchValue: number,
+ opensearchUnit: unitOfTime.Base,
+ timeZone: string
+) {
+ const date = moment.tz(dateValue, timeZone);
+ const startOfDate = moment.tz(date, timeZone).startOf(opensearchUnit);
+ const endOfDate = moment
+ .tz(date, timeZone)
+ .startOf(opensearchUnit)
+ .add(opensearchValue, opensearchUnit);
+ return endOfDate.valueOf() - startOfDate.valueOf();
+}
+
+function getIntervalInMs(
+ value: number,
+ opensearchValue: number,
+ opensearchUnit: unitOfTime.Base,
+ timeZone: string
+): number {
+ switch (opensearchUnit) {
+ case 's':
+ return 1000 * opensearchValue;
+ case 'ms':
+ return 1 * opensearchValue;
+ default:
+ return findIntervalFromDuration(value, opensearchValue, opensearchUnit, timeZone);
+ }
+}
+
+function getTimezone(uiSettings: IUiSettingsClient) {
+ if (uiSettings.isDefault('dateFormat:tz')) {
+ const detectedTimezone = moment.tz.guess();
+ if (detectedTimezone) return detectedTimezone;
+ else return moment().format('Z');
+ } else {
+ return uiSettings.get('dateFormat:tz', 'Browser');
+ }
+}
+
+export function findMinInterval(
+ xValues: number[],
+ opensearchValue: number,
+ opensearchUnit: string,
+ timeZone: string
+): number {
+ return xValues.reduce((minInterval, currentXvalue, index) => {
+ let currentDiff = minInterval;
+ if (index > 0) {
+ currentDiff = Math.abs(xValues[index - 1] - currentXvalue);
+ }
+ const singleUnitInterval = getIntervalInMs(
+ currentXvalue,
+ opensearchValue,
+ opensearchUnit as unitOfTime.Base,
+ timeZone
+ );
+ return Math.min(minInterval, singleUnitInterval, currentDiff);
+ }, Number.MAX_SAFE_INTEGER);
+}
+
+export class DiscoverHistogram extends Component
+
+
+
+
+
+
+
diff --git a/src/plugins/discover_legacy/public/application/angular/doc.ts b/src/plugins/discover_legacy/public/application/angular/doc.ts
new file mode 100644
index 000000000000..584815be9342
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc.ts
@@ -0,0 +1,81 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { getAngularModule, getServices } from '../../opensearch_dashboards_services';
+// @ts-ignore
+import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
+import html from './doc.html';
+import { Doc } from '../components/doc/doc';
+
+interface LazyScope extends ng.IScope {
+ [key: string]: any;
+}
+
+const { timefilter } = getServices();
+const app = getAngularModule();
+app.directive('discoverDoc', function (reactDirective: any) {
+ return reactDirective(
+ Doc,
+ [
+ ['id', { watchDepth: 'value' }],
+ ['index', { watchDepth: 'value' }],
+ ['indexPatternId', { watchDepth: 'reference' }],
+ ['indexPatternService', { watchDepth: 'reference' }],
+ ],
+ { restrict: 'E' }
+ );
+});
+
+app.config(($routeProvider: any) => {
+ $routeProvider
+ .when('/doc/:indexPattern/:index/:type', {
+ redirectTo: '/doc/:indexPattern/:index',
+ })
+ // the new route, opensearch 7 deprecated types, opensearch 8 removed them
+ .when('/doc/:indexPattern/:index', {
+ // have to be written as function expression, because it's not compiled in dev mode
+ // eslint-disable-next-line object-shorthand
+ controller: function ($scope: LazyScope, $route: any) {
+ timefilter.disableAutoRefreshSelector();
+ timefilter.disableTimeRangeSelector();
+ $scope.id = $route.current.params.id;
+ $scope.index = $route.current.params.index;
+ $scope.indexPatternId = $route.current.params.indexPattern;
+ $scope.indexPatternService = getServices().indexPatterns;
+ },
+ template: html,
+ k7Breadcrumbs: ($route: any) => [
+ ...getRootBreadcrumbs(),
+ {
+ text: `${$route.current.params.index}#${$route.current.params.id}`,
+ },
+ ],
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/_doc_table.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/_doc_table.scss
new file mode 100644
index 000000000000..bc75d4171004
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/_doc_table.scss
@@ -0,0 +1,158 @@
+/**
+ * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height.
+ */
+doc-table {
+ @include euiScrollBar;
+
+ overflow: auto;
+ flex: 1 1 100%;
+ flex-direction: column; /* 1 */
+
+ th {
+ text-align: left;
+ font-weight: bold;
+ }
+
+ .spinner {
+ position: absolute;
+ top: 40%;
+ left: 0;
+ right: 0;
+ z-index: $euiZLevel1;
+ opacity: 0.5;
+ }
+}
+
+.osdDocTable__container.loading {
+ opacity: 0.5;
+}
+
+.osdDocTable {
+ font-size: $euiFontSizeXS;
+
+ th {
+ white-space: nowrap;
+ padding-right: $euiSizeS;
+
+ .fa {
+ font-size: 1.1em;
+ }
+ }
+}
+
+.osd-table,
+.osdDocTable {
+ /**
+ * Style OpenSearch document _source in table view
+
+
+
+`;
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap
new file mode 100644
index 000000000000..fe168c013cb1
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/__snapshots__/tool_bar_pager_text.test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders ToolBarPagerText without crashing 1`] = `
+
+ 1–2 of 3
+
+`;
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/index.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/index.ts
new file mode 100644
index 000000000000..a0f5278d7881
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/index.ts
@@ -0,0 +1,40 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { ToolBarPagerText } from './tool_bar_pager_text';
+import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
+
+export function createToolBarPagerTextDirective(reactDirective: any) {
+ return reactDirective(ToolBarPagerText);
+}
+
+export function createToolBarPagerButtonsDirective(reactDirective: any) {
+ return reactDirective(ToolBarPagerButtons);
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
new file mode 100644
index 000000000000..2ac06b2b6ebf
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx
@@ -0,0 +1,73 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
+import { findTestSubject } from 'test_utils/helpers';
+
+test('it renders ToolBarPagerButtons', () => {
+ const props = {
+ hasPreviousPage: true,
+ hasNextPage: true,
+ onPageNext: jest.fn(),
+ onPagePrevious: jest.fn(),
+ };
+ const wrapper = shallowWithIntl(
+
+
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx
new file mode 100644
index 000000000000..4b13de634f04
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/pager/tool_bar_pager_text.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { renderWithIntl } from 'test_utils/enzyme_helpers';
+import { ToolBarPagerText } from './tool_bar_pager_text';
+
+test('it renders ToolBarPagerText without crashing', () => {
+ const props = {
+ startItem: 1,
+ endItem: 2,
+ totalItems: 3,
+ };
+ const wrapper = renderWithIntl(
+
+ '
+ );
+ let row;
+
+ beforeEach(() => {
+ row = getFakeRow(0, mapping);
+
+ init($elem, {
+ row,
+ columns: [],
+ sorting: [],
+ filter: sinon.spy(),
+ maxLength: 50,
+ });
+ });
+ afterEach(() => {
+ destroy();
+ });
+
+ describe('adding and removing columns', () => {
+ columnTests('[data-test-subj~="docTableField"]', $elem);
+ });
+
+ describe('details row', () => {
+ test('should be an empty tr by default', () => {
+ expect($elem.next().is('tr')).toBe(true);
+ expect($elem.next().text()).toBe('');
+ });
+
+ test('should expand the detail row when the toggle arrow is clicked', () => {
+ $elem.children(':first-child').click();
+ expect($elem.next().text()).not.toBe('');
+ });
+
+ describe('expanded', () => {
+ let $details;
+ beforeEach(() => {
+ // Open the row
+ $scope.toggleRow();
+ timeout.flush();
+ $details = $elem.next();
+ });
+ afterEach(() => {
+ // Close the row
+ $scope.toggleRow();
+ });
+
+ test('should be a tr with something in it', () => {
+ expect($details.is('tr')).toBe(true);
+ expect($details.text()).toBeTruthy();
+ });
+ });
+ });
+ });
+
+ describe('osdTableRow meta', () => {
+ const $elem = angular.element(
+ ' '
+ );
+ let row;
+
+ beforeEach(() => {
+ row = getFakeRow(0, mapping);
+
+ init($elem, {
+ row: row,
+ columns: [],
+ sorting: [],
+ filtering: sinon.spy(),
+ maxLength: 50,
+ });
+
+ // Open the row
+ $scope.toggleRow();
+ $scope.$digest();
+ timeout.flush();
+ $elem.next();
+ });
+
+ afterEach(() => {
+ destroy();
+ });
+
+ /** this no longer works with the new plugin approach
+ test('should render even when the row source contains a field with the same name as a meta field', () => {
+ setTimeout(() => {
+ //this should be overridden by later changes
+ }, 100);
+ expect($details.find('tr').length).toBe(_.keys($parentScope.indexPattern.flattenHit($scope.row)).length);
+ }); */
+ });
+
+ describe('row diffing', () => {
+ let $row;
+ let $scope;
+ let $root;
+ let $before;
+
+ beforeEach(
+ angular.mock.inject(function ($rootScope, $compile, Private) {
+ $root = $rootScope;
+ $root.row = getFakeRow(0, mapping);
+ $root.columns = ['_source'];
+ $root.sorting = [];
+ $root.filtering = sinon.spy();
+ $root.maxLength = 50;
+ $root.mapping = mapping;
+ $root.indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider);
+
+ $row = $(' ').attr({
+ 'osd-table-row': 'row',
+ columns: 'columns',
+ sorting: 'sorting',
+ filtering: 'filtering',
+ 'index-pattern': 'indexPattern',
+ });
+
+ $scope = $root.$new();
+ $compile($row)($scope);
+ $root.$apply();
+
+ $before = $row.find('td');
+ expect($before).toHaveLength(3);
+ expect($before.eq(0).text().trim()).toBe('');
+ expect($before.eq(1).text().trim()).toMatch(/^time_formatted/);
+ })
+ );
+
+ afterEach(() => {
+ $row.remove();
+ });
+
+ test('handles a new column', () => {
+ $root.columns.push('bytes');
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(4);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after[2].outerHTML).toBe($before[2].outerHTML);
+ expect($after.eq(3).text().trim()).toMatch(/^bytes_formatted/);
+ });
+
+ test('handles two new columns at once', () => {
+ $root.columns.push('bytes');
+ $root.columns.push('request_body');
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(5);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after[2].outerHTML).toBe($before[2].outerHTML);
+ expect($after.eq(3).text().trim()).toMatch(/^bytes_formatted/);
+ expect($after.eq(4).text().trim()).toMatch(/^request_body_formatted/);
+ });
+
+ test('handles three new columns in odd places', () => {
+ $root.columns = ['@timestamp', 'bytes', '_source', 'request_body'];
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(6);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after.eq(2).text().trim()).toMatch(/^@timestamp_formatted/);
+ expect($after.eq(3).text().trim()).toMatch(/^bytes_formatted/);
+ expect($after[4].outerHTML).toBe($before[2].outerHTML);
+ expect($after.eq(5).text().trim()).toMatch(/^request_body_formatted/);
+ });
+
+ test('handles a removed column', () => {
+ _.pull($root.columns, '_source');
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(2);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ });
+
+ test('handles two removed columns', () => {
+ // first add a column
+ $root.columns.push('@timestamp');
+ $root.$apply();
+
+ const $mid = $row.find('td');
+ expect($mid).toHaveLength(4);
+
+ $root.columns.pop();
+ $root.columns.pop();
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(2);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ });
+
+ test('handles three removed random columns', () => {
+ // first add two column
+ $root.columns.push('@timestamp', 'bytes');
+ $root.$apply();
+
+ const $mid = $row.find('td');
+ expect($mid).toHaveLength(5);
+
+ $root.columns[0] = false; // _source
+ $root.columns[2] = false; // bytes
+ $root.columns = $root.columns.filter(Boolean);
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(3);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after.eq(2).text().trim()).toMatch(/^@timestamp_formatted/);
+ });
+
+ test('handles two columns with the same content', () => {
+ const tempVal = fakeRowVals.request_body;
+ fakeRowVals.request_body = 'bytes_formatted';
+
+ $root.columns.length = 0;
+ $root.columns.push('bytes');
+ $root.columns.push('request_body');
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(4);
+ expect($after.eq(2).text().trim()).toMatch(/^bytes_formatted/);
+ expect($after.eq(3).text().trim()).toMatch(/^bytes_formatted/);
+ fakeRowVals.request_body = tempVal;
+ });
+
+ test('handles two columns swapping position', () => {
+ $root.columns.push('bytes');
+ $root.$apply();
+
+ const $mid = $row.find('td');
+ expect($mid).toHaveLength(4);
+
+ $root.columns.reverse();
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(4);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after[2].outerHTML).toBe($mid[3].outerHTML);
+ expect($after[3].outerHTML).toBe($mid[2].outerHTML);
+ });
+
+ test('handles four columns all reversing position', () => {
+ $root.columns.push('bytes', 'response', '@timestamp');
+ $root.$apply();
+
+ const $mid = $row.find('td');
+ expect($mid).toHaveLength(6);
+
+ $root.columns.reverse();
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(6);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after[2].outerHTML).toBe($mid[5].outerHTML);
+ expect($after[3].outerHTML).toBe($mid[4].outerHTML);
+ expect($after[4].outerHTML).toBe($mid[3].outerHTML);
+ expect($after[5].outerHTML).toBe($mid[2].outerHTML);
+ });
+
+ test('handles multiple columns with the same name', () => {
+ $root.columns.push('bytes', 'bytes', 'bytes');
+ $root.$apply();
+
+ const $after = $row.find('td');
+ expect($after).toHaveLength(6);
+ expect($after[0].outerHTML).toBe($before[0].outerHTML);
+ expect($after[1].outerHTML).toBe($before[1].outerHTML);
+ expect($after[2].outerHTML).toBe($before[2].outerHTML);
+ expect($after.eq(3).text().trim()).toMatch(/^bytes_formatted/);
+ expect($after.eq(4).text().trim()).toMatch(/^bytes_formatted/);
+ expect($after.eq(5).text().trim()).toMatch(/^bytes_formatted/);
+ });
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header.ts
new file mode 100644
index 000000000000..1c60685d279e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { TableHeader } from './table_header/table_header';
+import { getServices } from '../../../../opensearch_dashboards_services';
+import { SORT_DEFAULT_ORDER_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../../common';
+import { UI_SETTINGS } from '../../../../../../data/public';
+
+export function createTableHeaderDirective(reactDirective: any) {
+ const { uiSettings: config } = getServices();
+
+ return reactDirective(
+ TableHeader,
+ [
+ ['columns', { watchDepth: 'collection' }],
+ ['hideTimeColumn', { watchDepth: 'value' }],
+ ['indexPattern', { watchDepth: 'reference' }],
+ ['isShortDots', { watchDepth: 'value' }],
+ ['onChangeSortOrder', { watchDepth: 'reference' }],
+ ['onMoveColumn', { watchDepth: 'reference' }],
+ ['onRemoveColumn', { watchDepth: 'reference' }],
+ ['sortOrder', { watchDepth: 'collection' }],
+ ],
+ { restrict: 'A' },
+ {
+ hideTimeColumn: config.get(DOC_HIDE_TIME_COLUMN_SETTING, false),
+ isShortDots: config.get(UI_SETTINGS.SHORT_DOTS_ENABLE),
+ defaultSortOrder: config.get(SORT_DEFAULT_ORDER_SETTING, 'desc'),
+ }
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
new file mode 100644
index 000000000000..2aeb8951a60a
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap
@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableHeader with time column renders correctly 1`] = `
+
+
+`;
+
+exports[`TableHeader without time column renders correctly 1`] = `
+
+
+
+ Time
+
+
+
+
+
+
+
+ first
+
+
+
+
+
+
+
+
+
+
+ middle
+
+
+
+
+
+
+
+
+
+
+
+
+
+ last
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/helpers.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/helpers.tsx
new file mode 100644
index 000000000000..477b72f5b199
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/helpers.tsx
@@ -0,0 +1,92 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { IndexPattern } from '../../../../../opensearch_dashboards_services';
+import { shortenDottedString } from '../../../../helpers';
+
+export type SortOrder = [string, string];
+export interface ColumnProps {
+ name: string;
+ displayName: string;
+ isSortable: boolean;
+ isRemoveable: boolean;
+ colLeftIdx: number;
+ colRightIdx: number;
+}
+
+/**
+ * Returns properties necessary to display the time column
+ * If it's an IndexPattern with timefield, the time column is
+ * prepended, not moveable and removeable
+ * @param timeFieldName
+ */
+export function getTimeColumn(timeFieldName: string): ColumnProps {
+ return {
+ name: timeFieldName,
+ displayName: 'Time',
+ isSortable: true,
+ isRemoveable: false,
+ colLeftIdx: -1,
+ colRightIdx: -1,
+ };
+}
+/**
+ * A given array of column names returns an array of properties
+ * necessary to display the columns. If the given indexPattern
+ * has a timefield, a time column is prepended
+ * @param columns
+ * @param indexPattern
+ * @param hideTimeField
+ * @param isShortDots
+ */
+export function getDisplayedColumns(
+ columns: string[],
+ indexPattern: IndexPattern,
+ hideTimeField: boolean,
+ isShortDots: boolean
+) {
+ if (!Array.isArray(columns) || typeof indexPattern !== 'object' || !indexPattern.getFieldByName) {
+ return [];
+ }
+ const columnProps = columns.map((column, idx) => {
+ const field = indexPattern.getFieldByName(column);
+ return {
+ name: column,
+ displayName: isShortDots ? shortenDottedString(column) : column,
+ isSortable: field && field.sortable ? true : false,
+ isRemoveable: column !== '_source' || columns.length > 1,
+ colLeftIdx: idx - 1 < 0 ? -1 : idx - 1,
+ colRightIdx: idx + 1 >= columns.length ? -1 : idx + 1,
+ };
+ });
+ return !hideTimeField && indexPattern.timeFieldName
+ ? [getTimeColumn(indexPattern.timeFieldName), ...columnProps]
+ : columnProps;
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.test.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.test.tsx
new file mode 100644
index 000000000000..0e8efc18efd5
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.test.tsx
@@ -0,0 +1,214 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { TableHeader } from './table_header';
+import { findTestSubject } from 'test_utils/helpers';
+import { SortOrder } from './helpers';
+import { IndexPattern, IFieldType } from '../../../../../opensearch_dashboards_services';
+
+function getMockIndexPattern() {
+ return ({
+ id: 'test',
+ title: 'Test',
+ timeFieldName: 'time',
+ fields: [],
+ isTimeNanosBased: () => false,
+ getFieldByName: (name: string) => {
+ if (name === 'test1') {
+ return {
+ name,
+ type: 'string',
+ aggregatable: false,
+ searchable: true,
+ sortable: true,
+ } as IFieldType;
+ } else {
+ return {
+ name,
+ type: 'string',
+ aggregatable: false,
+ searchable: true,
+ sortable: false,
+ } as IFieldType;
+ }
+ },
+ } as unknown) as IndexPattern;
+}
+
+function getMockProps(props = {}) {
+ const defaultProps = {
+ indexPattern: getMockIndexPattern(),
+ hideTimeColumn: false,
+ columns: ['first', 'middle', 'last'],
+ defaultSortOrder: 'desc',
+ sortOrder: [['time', 'asc']] as SortOrder[],
+ isShortDots: true,
+ onRemoveColumn: jest.fn(),
+ onChangeSortOrder: jest.fn(),
+ onMoveColumn: jest.fn(),
+ onPageNext: jest.fn(),
+ onPagePrevious: jest.fn(),
+ };
+
+ return Object.assign({}, defaultProps, props);
+}
+
+describe('TableHeader with time column', () => {
+ const props = getMockProps();
+
+ const wrapper = mountWithIntl(
+
+
+
+ first
+
+
+
+
+
+
+
+
+
+
+ middle
+
+
+
+
+
+
+
+
+
+
+
+
+
+ last
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ test('renders correctly', () => {
+ const docTableHeader = findTestSubject(wrapper, 'docTableHeader');
+ expect(docTableHeader.getDOMNode()).toMatchSnapshot();
+ });
+
+ test('time column is sortable with button, cycling sort direction', () => {
+ findTestSubject(wrapper, 'docTableHeaderFieldSort_time').simulate('click');
+ expect(props.onChangeSortOrder).toHaveBeenCalledWith([['time', 'desc']]);
+ });
+
+ test('time column is not removeable, no button displayed', () => {
+ const removeButton = findTestSubject(wrapper, 'docTableRemoveHeader-time');
+ expect(removeButton.length).toBe(0);
+ });
+
+ test('time column is not moveable, no button displayed', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-time');
+ expect(moveButtonLeft.length).toBe(0);
+ const moveButtonRight = findTestSubject(wrapper, 'docTableMoveRightHeader-time');
+ expect(moveButtonRight.length).toBe(0);
+ });
+
+ test('first column is removeable', () => {
+ const removeButton = findTestSubject(wrapper, 'docTableRemoveHeader-first');
+ expect(removeButton.length).toBe(1);
+ removeButton.simulate('click');
+ expect(props.onRemoveColumn).toHaveBeenCalledWith('first');
+ });
+
+ test('first column is not moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-first');
+ expect(moveButtonLeft.length).toBe(0);
+ });
+
+ test('first column is moveable to the right', () => {
+ const moveButtonRight = findTestSubject(wrapper, 'docTableMoveRightHeader-first');
+ expect(moveButtonRight.length).toBe(1);
+ moveButtonRight.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('first', 1);
+ });
+
+ test('middle column is moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-middle');
+ expect(moveButtonLeft.length).toBe(1);
+ moveButtonLeft.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('middle', 0);
+ });
+
+ test('middle column is moveable to the right', () => {
+ const moveButtonRight = findTestSubject(wrapper, 'docTableMoveRightHeader-middle');
+ expect(moveButtonRight.length).toBe(1);
+ moveButtonRight.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('middle', 2);
+ });
+
+ test('last column moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-last');
+ expect(moveButtonLeft.length).toBe(1);
+ moveButtonLeft.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('last', 1);
+ });
+});
+
+describe('TableHeader without time column', () => {
+ const props = getMockProps({ hideTimeColumn: true });
+
+ const wrapper = mountWithIntl(
+
+
+
+ );
+
+ test('renders correctly', () => {
+ const docTableHeader = findTestSubject(wrapper, 'docTableHeader');
+ expect(docTableHeader.getDOMNode()).toMatchSnapshot();
+ });
+
+ test('first column is removeable', () => {
+ const removeButton = findTestSubject(wrapper, 'docTableRemoveHeader-first');
+ expect(removeButton.length).toBe(1);
+ removeButton.simulate('click');
+ expect(props.onRemoveColumn).toHaveBeenCalledWith('first');
+ });
+
+ test('first column is not moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-first');
+ expect(moveButtonLeft.length).toBe(0);
+ });
+
+ test('first column is moveable to the right', () => {
+ const moveButtonRight = findTestSubject(wrapper, 'docTableMoveRightHeader-first');
+ expect(moveButtonRight.length).toBe(1);
+ moveButtonRight.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('first', 1);
+ });
+
+ test('middle column is moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-middle');
+ expect(moveButtonLeft.length).toBe(1);
+ moveButtonLeft.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('middle', 0);
+ });
+
+ test('middle column is moveable to the right', () => {
+ const moveButtonRight = findTestSubject(wrapper, 'docTableMoveRightHeader-middle');
+ expect(moveButtonRight.length).toBe(1);
+ moveButtonRight.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('middle', 2);
+ });
+
+ test('last column moveable to the left', () => {
+ const moveButtonLeft = findTestSubject(wrapper, 'docTableMoveLeftHeader-last');
+ expect(moveButtonLeft.length).toBe(1);
+ moveButtonLeft.simulate('click');
+ expect(props.onMoveColumn).toHaveBeenCalledWith('last', 1);
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.tsx
new file mode 100644
index 000000000000..6a9efdac5273
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header.tsx
@@ -0,0 +1,82 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { IndexPattern } from '../../../../../opensearch_dashboards_services';
+// @ts-ignore
+import { TableHeaderColumn } from './table_header_column';
+import { SortOrder, getDisplayedColumns } from './helpers';
+import { getDefaultSort } from '../../lib/get_default_sort';
+
+interface Props {
+ columns: string[];
+ defaultSortOrder: string;
+ hideTimeColumn: boolean;
+ indexPattern: IndexPattern;
+ isShortDots: boolean;
+ onChangeSortOrder?: (sortOrder: SortOrder[]) => void;
+ onMoveColumn?: (name: string, index: number) => void;
+ onRemoveColumn?: (name: string) => void;
+ sortOrder: SortOrder[];
+}
+
+export function TableHeader({
+ columns,
+ defaultSortOrder,
+ hideTimeColumn,
+ indexPattern,
+ isShortDots,
+ onChangeSortOrder,
+ onMoveColumn,
+ onRemoveColumn,
+ sortOrder,
+}: Props) {
+ const displayedColumns = getDisplayedColumns(columns, indexPattern, hideTimeColumn, isShortDots);
+
+ return (
+
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header_column.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header_column.tsx
new file mode 100644
index 000000000000..81dad59c6d34
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_header/table_header_column.tsx
@@ -0,0 +1,205 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip } from '@elastic/eui';
+import { SortOrder } from './helpers';
+
+interface Props {
+ colLeftIdx: number; // idx of the column to the left, -1 if moving is not possible
+ colRightIdx: number; // idx of the column to the right, -1 if moving is not possible
+ displayName: string;
+ isRemoveable: boolean;
+ isSortable: boolean;
+ name: string;
+ onChangeSortOrder?: (sortOrder: SortOrder[]) => void;
+ onMoveColumn?: (name: string, idx: number) => void;
+ onRemoveColumn?: (name: string) => void;
+ sortOrder: SortOrder[];
+}
+
+const sortDirectionToIcon: Record
+ {displayedColumns.map((col) => {
+ return (
+
+
+ {displayName}
+ {buttons
+ .filter((button) => button.active)
+ .map((button, idx) => (
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row.ts b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row.ts
new file mode 100644
index 000000000000..4131798f5df3
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row.ts
@@ -0,0 +1,238 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { find, template } from 'lodash';
+import { stringify } from 'query-string';
+import $ from 'jquery';
+import rison from 'rison-node';
+import '../../doc_viewer';
+
+import openRowHtml from './table_row/open.html';
+import detailsHtml from './table_row/details.html';
+
+import { dispatchRenderComplete, url } from '../../../../../../opensearch_dashboards_utils/public';
+import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../../common';
+import cellTemplateHtml from '../components/table_row/cell.html';
+import truncateByHeightTemplateHtml from '../components/table_row/truncate_by_height.html';
+import { opensearchFilters } from '../../../../../../data/public';
+import { getServices } from '../../../../opensearch_dashboards_services';
+
+const TAGS_WITH_WS = />\s+<');
+}
+
+// guesstimate at the minimum number of chars wide cells in the table should be
+const MIN_LINE_LENGTH = 20;
+
+interface LazyScope extends ng.IScope {
+ [key: string]: any;
+}
+
+export function createTableRowDirective($compile: ng.ICompileService) {
+ const cellTemplate = template(noWhiteSpace(cellTemplateHtml));
+ const truncateByHeightTemplate = template(noWhiteSpace(truncateByHeightTemplateHtml));
+
+ return {
+ restrict: 'A',
+ scope: {
+ columns: '=',
+ filter: '=',
+ indexPattern: '=',
+ row: '=osdTableRow',
+ onAddColumn: '=?',
+ onRemoveColumn: '=?',
+ },
+ link: ($scope: LazyScope, $el: JQuery) => {
+ $el.after('');
+ $el.empty();
+
+ // when we compile the details, we use this $scope
+ let $detailsScope: LazyScope;
+
+ // when we compile the toggle button in the summary, we use this $scope
+ let $toggleScope;
+
+ // toggle display of the rows details, a full list of the fields from each row
+ $scope.toggleRow = () => {
+ const $detailsTr = $el.next();
+
+ $scope.open = !$scope.open;
+
+ ///
+ // add/remove $details children
+ ///
+
+ $detailsTr.toggle($scope.open);
+
+ if (!$scope.open) {
+ // close the child scope if it exists
+ $detailsScope.$destroy();
+ // no need to go any further
+ return;
+ } else {
+ $detailsScope = $scope.$new();
+ }
+
+ // empty the details and rebuild it
+ $detailsTr.html(detailsHtml);
+ $detailsScope.row = $scope.row;
+ $detailsScope.hit = $scope.row;
+ $detailsScope.uriEncodedId = encodeURIComponent($detailsScope.hit._id);
+
+ $compile($detailsTr)($detailsScope);
+ };
+
+ $scope.$watchMulti(['indexPattern.timeFieldName', 'row.highlight', '[]columns'], () => {
+ createSummaryRow($scope.row);
+ });
+
+ $scope.inlineFilter = function inlineFilter($event: any, type: string) {
+ const column = $($event.currentTarget).data().column;
+ const field = $scope.indexPattern.fields.getByName(column);
+ $scope.filter(field, $scope.flattenedRow[column], type);
+ };
+
+ $scope.getContextAppHref = () => {
+ const globalFilters: any = getServices().filterManager.getGlobalFilters();
+ const appFilters: any = getServices().filterManager.getAppFilters();
+
+ const hash = stringify(
+ url.encodeQuery({
+ _g: rison.encode({
+ filters: globalFilters || [],
+ }),
+ _a: rison.encode({
+ columns: $scope.columns,
+ filters: (appFilters || []).map(opensearchFilters.disableFilter),
+ }),
+ }),
+ { encode: false, sort: false }
+ );
+
+ return `#/context/${encodeURIComponent($scope.indexPattern.id)}/${encodeURIComponent(
+ $scope.row._id
+ )}?${hash}`;
+ };
+
+ // create a tr element that lists the value for each *column*
+ function createSummaryRow(row: any) {
+ const indexPattern = $scope.indexPattern;
+ $scope.flattenedRow = indexPattern.flattenHit(row);
+
+ // We just create a string here because its faster.
+ const newHtmls = [openRowHtml];
+
+ const mapping = indexPattern.fields.getByName;
+ const hideTimeColumn = getServices().uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false);
+ if (indexPattern.timeFieldName && !hideTimeColumn) {
+ newHtmls.push(
+ cellTemplate({
+ timefield: true,
+ formatted: _displayField(row, indexPattern.timeFieldName),
+ filterable: mapping(indexPattern.timeFieldName).filterable && $scope.filter,
+ column: indexPattern.timeFieldName,
+ })
+ );
+ }
+
+ $scope.columns.forEach(function (column: any) {
+ const isFilterable = mapping(column) && mapping(column).filterable && $scope.filter;
+
+ newHtmls.push(
+ cellTemplate({
+ timefield: false,
+ sourcefield: column === '_source',
+ formatted: _displayField(row, column, true),
+ filterable: isFilterable,
+ column,
+ })
+ );
+ });
+
+ let $cells = $el.children();
+ newHtmls.forEach(function (html, i) {
+ const $cell = $cells.eq(i);
+ if ($cell.data('discover:html') === html) return;
+
+ const reuse = find($cells.slice(i + 1), function (cell: any) {
+ return $.data(cell, 'discover:html') === html;
+ });
+
+ const $target = reuse ? $(reuse).detach() : $(html);
+ $target.data('discover:html', html);
+ const $before = $cells.eq(i - 1);
+ if ($before.length) {
+ $before.after($target);
+ } else {
+ $el.append($target);
+ }
+
+ // rebuild cells since we modified the children
+ $cells = $el.children();
+
+ if (!reuse) {
+ $toggleScope = $scope.$new();
+ $compile($target)($toggleScope);
+ }
+ });
+
+ if ($scope.open) {
+ $detailsScope.row = row;
+ }
+
+ // trim off cells that were not used rest of the cells
+ $cells.filter(':gt(' + (newHtmls.length - 1) + ')').remove();
+ dispatchRenderComplete($el[0]);
+ }
+
+ /**
+ * Fill an element with the value of a field
+ */
+ function _displayField(row: any, fieldName: string, truncate = false) {
+ const indexPattern = $scope.indexPattern;
+ const text = indexPattern.formatField(row, fieldName);
+
+ if (truncate && text.length > MIN_LINE_LENGTH) {
+ return truncateByHeightTemplate({
+ body: text,
+ });
+ }
+
+ return text;
+ }
+ },
+ };
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_cell.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_cell.scss
new file mode 100644
index 000000000000..5285e09c241d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_cell.scss
@@ -0,0 +1,34 @@
+.osdDocTableCell__dataField {
+ white-space: pre-wrap;
+}
+
+.osdDocTableCell__toggleDetails {
+ padding: 4px 0 0 !important;
+}
+
+.osdDocTableCell__filter {
+ position: absolute;
+ white-space: nowrap;
+ right: 0;
+}
+
+/**
+ * 1. Align icon with text in cell.
+ * 2. Use opacity to make this element accessible to screen readers and keyboard.
+ * 3. Show on focus to enable keyboard accessibility.
+ */
+
+.osdDocTableRowFilterButton {
+ appearance: none;
+ background-color: $euiColorEmptyShade;
+ border: none;
+ padding: 0 $euiSizeXS;
+ font-size: $euiFontSizeS;
+ line-height: 1; /* 1 */
+ display: inline-block;
+ opacity: 0; /* 2 */
+
+ &:focus {
+ opacity: 1; /* 3 */
+ }
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_details.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_details.scss
new file mode 100644
index 000000000000..4014cdab62d4
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_details.scss
@@ -0,0 +1,23 @@
+/**
+ * 1. Visually align the actions with the tabs. We can improve this by using flexbox instead, at a later point.
+ */
+.osdDocTableDetails__actions {
+ float: right;
+ padding-top: $euiSizeS; /* 1 */
+}
+
+// Overwrite the border on the bootstrap table
+.osdDocTableDetails__row {
+ > td {
+ // Offsets negative margins from an inner flex group
+ padding: $euiSizeL !important;
+
+ tr:hover td {
+ background: tintOrShade($euiColorLightestShade, 50%, 20%);
+ }
+ }
+
+ td {
+ border-top: none !important;
+ }
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_index.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_index.scss
new file mode 100644
index 000000000000..56530bf93330
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_index.scss
@@ -0,0 +1,3 @@
+@import "cell";
+@import "details";
+@import "open";
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss
new file mode 100644
index 000000000000..0bdcee3538b0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/_open.scss
@@ -0,0 +1,40 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/**
+ * 1. When switching between open and closed, the toggle changes size
+ * slightly which is a problem because it forces the entire table to
+ * re-render which is SLOW.
+ */
+
+.osdDocTableOpen__button {
+ appearance: none;
+ background-color: transparent;
+ padding: 0;
+ border: none;
+ width: 14px; /* 1 */
+ height: 14px;
+}
+
+.euiButtonIcon.euiButtonIcon--open {
+ box-shadow: none;
+ min-height: 24px;
+ min-width: 24px;
+ line-height: 0;
+ transition: all 250ms ease-in-out 0s;
+ border: none;
+ background-color: transparent;
+
+ &:hover,
+ &:focus {
+ box-shadow: none;
+ }
+}
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/cell.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/cell.html
new file mode 100644
index 000000000000..dd54c7f63205
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/cell.html
@@ -0,0 +1,24 @@
+<% var attributes='' ; if (timefield) { attributes='class="eui-textNoWrap" width="1%"' ; } else if (sourcefield) {
+ attributes='class="eui-textBreakAll eui-textBreakWord"' ; } else {
+ attributes='class="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"' ; } %>
+ data-test-subj="docTableField">
+ <%= formatted %>
+
+ <% if (filterable) { %>
+
+
+ <% } %>
+
+
\ No newline at end of file
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/details.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/details.html
new file mode 100644
index 000000000000..a28f1b9906cb
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/details.html
@@ -0,0 +1,37 @@
+
+
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/open.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/open.html
new file mode 100644
index 000000000000..d9e15c37f02c
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/open.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/truncate_by_height.html b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/truncate_by_height.html
new file mode 100644
index 000000000000..cf13f10e7006
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/components/table_row/truncate_by_height.html
@@ -0,0 +1,3 @@
+
+ <%= body %>
+
\ No newline at end of file
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/create_doc_table_react.tsx b/src/plugins/discover_legacy/public/application/angular/doc_table/create_doc_table_react.tsx
new file mode 100644
index 000000000000..8997179781d0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/create_doc_table_react.tsx
@@ -0,0 +1,143 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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, { auto, ICompileService, IScope } from 'angular';
+import { render } from 'react-dom';
+import React, { useRef, useEffect } from 'react';
+import { getServices, IIndexPattern } from '../../../opensearch_dashboards_services';
+import { IndexPatternField } from '../../../../../data/common/index_patterns';
+export type AngularScope = IScope;
+
+export interface AngularDirective {
+ template: string;
+}
+
+/**
+ * Compiles and injects the give angular template into the given dom node
+ * returns a function to cleanup the injected angular element
+ */
+export async function injectAngularElement(
+ domNode: Element,
+ template: string,
+ scopeProps: any,
+ getInjector: () => Promiseerror, domNode);
+ });
+
+ return () => {
+ if (!rejected) {
+ // for cleanup
+ // http://roubenmeschian.com/rubo/?p=51
+ cleanupFnPromise.then((cleanup) => cleanup());
+ }
+ };
+ };
+}
+
+export interface DocTableLegacyProps {
+ columns: string[];
+ searchDescription?: string;
+ searchTitle?: string;
+ onFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+ rows: Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.test.js b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.test.js
new file mode 100644
index 000000000000..bd087ac3547f
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/angular/doc_table/doc_table.test.js
@@ -0,0 +1,158 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 'angular-mocks';
+import 'angular-sanitize';
+import 'angular-route';
+import { createBrowserHistory } from 'history';
+import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
+import hits from 'fixtures/real_hits';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { dataPluginMock } from '../../../../../data/public/mocks';
+import { navigationPluginMock } from '../../../../../navigation/public/mocks';
+import { setScopedHistory, setServices } from '../../../opensearch_dashboards_services';
+import { getInnerAngularModule } from '../../../get_inner_angular';
+
+let $parentScope;
+
+let $scope;
+
+let $timeout;
+
+let indexPattern;
+
+const init = function ($elem, props) {
+ angular.mock.inject(function ($rootScope, $compile, _$timeout_) {
+ $timeout = _$timeout_;
+ $parentScope = $rootScope;
+ _.assign($parentScope, props);
+
+ $compile($elem)($parentScope);
+
+ // I think the prereq requires this?
+ $timeout(() => {
+ $elem.scope().$digest();
+ }, 0);
+
+ $scope = $elem.isolateScope();
+ });
+};
+
+const destroy = () => {
+ $scope.$destroy();
+ $parentScope.$destroy();
+};
+
+describe('docTable', () => {
+ const core = coreMock.createStart();
+ let $elem;
+
+ beforeAll(() => setScopedHistory(createBrowserHistory()));
+ beforeEach(() => {
+ angular.element.prototype.slice = jest.fn(() => {
+ return null;
+ });
+ angular.element.prototype.filter = jest.fn(() => {
+ return {
+ remove: jest.fn(),
+ };
+ });
+ setServices({
+ uiSettings: core.uiSettings,
+ });
+ getInnerAngularModule(
+ 'app/discover',
+ core,
+ {
+ data: dataPluginMock.createStartContract(),
+ navigation: navigationPluginMock.createStartContract(),
+ },
+ coreMock.createPluginInitializerContext()
+ );
+ angular.mock.module('app/discover');
+ });
+ beforeEach(() => {
+ $elem = angular.element(`
+
+
+
+
+ );
+ }
+
+ useEffect(() => (fixedScrollEl ? opts.fixedScroll(fixedScrollEl) : undefined), [
+ fixedScrollEl,
+ opts,
+ ]);
+ const fixedScrollRef = useCallback(
+ (node: HTMLElement) => {
+ if (node !== null) {
+ setFixedScrollEl(node);
+ }
+ },
+ [setFixedScrollEl]
+ );
+ const sidebarClassName = classNames({
+ closed: isSidebarClosed,
+ });
+
+ const mainSectionClassName = classNames({
+ 'col-md-10': !isSidebarClosed,
+ 'col-md-12': isSidebarClosed,
+ });
+
+ return (
+
+
+ {savedSearch.title}
+
+
+
+
+
+
+ {callOut}
+ {resultState === 'none' && (
+
+
+
+
+ {resultState === 'ready' && (
+
+
+ )}
+
+
+ )}
+
+
+
+
+ {rows && rows.length && (
+
+ )}
+
+
+ )}
+
+
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap
new file mode 100644
index 000000000000..31509659ce41
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/__snapshots__/doc_viewer_render_tab.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mounting and unmounting DocViewerRenderTab 1`] = `
+[MockFunction] {
+ "calls": Array [
+ Array [
+ ,
+ Object {
+ "hit": Object {},
+ },
+ ],
+ ],
+ "results": Array [
+ Object {
+ "type": "return",
+ "value": [MockFunction],
+ },
+ ],
+}
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss
new file mode 100644
index 000000000000..91b66fc84297
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss
@@ -0,0 +1,72 @@
+.osdDocViewerTable {
+ margin-top: $euiSizeS;
+}
+
+.osdDocViewer {
+ pre,
+ .osdDocViewer__value {
+ display: inline-block;
+ word-break: break-all;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ color: $euiColorFullShade;
+ vertical-align: top;
+ padding-top: 2px;
+ }
+
+ .osdDocViewer__field {
+ padding-top: 8px;
+ }
+
+ .dscFieldName {
+ color: $euiColorDarkShade;
+ }
+
+ td,
+ pre {
+ font-family: $euiCodeFontFamily;
+ }
+
+ tr:first-child td {
+ border-top-color: transparent;
+ }
+
+ tr:hover {
+ .osdDocViewer__actionButton {
+ opacity: 1;
+ }
+ }
+}
+
+.osdDocViewer__buttons,
+.osdDocViewer__field {
+ white-space: nowrap;
+}
+
+.osdDocViewer__buttons {
+ width: 60px;
+
+ // Show all icons if one is focused,
+ // IE doesn't support, but the fallback is just the focused button becomes visible
+ &:focus-within {
+ .osdDocViewer__actionButton {
+ opacity: 1;
+ }
+ }
+}
+
+.osdDocViewer__field {
+ width: 160px;
+}
+
+.osdDocViewer__actionButton {
+ opacity: 0;
+
+ &:focus {
+ opacity: 1;
+ }
+}
+
+.osdDocViewer__warning {
+ margin-right: $euiSizeS;
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx
new file mode 100644
index 000000000000..ccab0be41ed2
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { mount, shallow } from 'enzyme';
+import { DocViewer } from './doc_viewer';
+import { findTestSubject } from 'test_utils/helpers';
+import { getDocViewsRegistry } from '../../../opensearch_dashboards_services';
+import { DocViewRenderProps } from '../../doc_views/doc_views_types';
+
+jest.mock('../../../opensearch_dashboards_services', () => {
+ let registry: any[] = [];
+ return {
+ getDocViewsRegistry: () => ({
+ addDocView(view: any) {
+ registry.push(view);
+ },
+ getDocViewsSorted() {
+ return registry;
+ },
+ resetRegistry: () => {
+ registry = [];
+ },
+ }),
+ };
+});
+
+beforeEach(() => {
+ (getDocViewsRegistry() as any).resetRegistry();
+ jest.clearAllMocks();
+});
+
+test('Render test });
+ registry.addDocView({ order: 30, title: 'Invalid doc view' });
+
+ const renderProps = { hit: {} } as DocViewRenderProps;
+
+ const wrapper = shallow(
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx
new file mode 100644
index 000000000000..1cb14d191a57
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer_render_error.tsx
@@ -0,0 +1,48 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
+import { formatMsg, formatStack } from '../../../../../opensearch_dashboards_legacy/public';
+
+interface Props {
+ error: Error | string;
+}
+
+export function DocViewerError({ error }: Props) {
+ const errMsg = formatMsg(error);
+ const errStack = typeof error === 'object' ? formatStack(error) : '';
+
+ return (
+
+
+`;
+
+exports[`FieldName renders a number field by providing a field record, useShortDots is set to false 1`] = `
+
+
+
+
+
+
+
+
+ t.t.test
+
+
+
+
+
+`;
+
+exports[`FieldName renders a string field by providing fieldType and fieldName 1`] = `
+
+
+
+
+
+
+
+
+ test.test.test
+
+
+
+
+
+`;
diff --git a/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx b/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx
new file mode 100644
index 000000000000..54dc902837d0
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/field_name/field_name.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { render } from 'enzyme';
+import { FieldName } from './field_name';
+
+// Note that it currently provides just 2 basic tests, there should be more, but
+// the components involved will soon change
+test('FieldName renders a string field by providing fieldType and fieldName', () => {
+ const component = render(
+
+
+
+
+
+
+
+ test
+
+
+
+
+
+
+
+
+
+
+ {details.error && (
+
+ {!details.error && (
+
+ {details.buckets.map((bucket: Bucket, idx: number) => (
+
+ )}
+
+ {showVisualizeLink && visualizeLink && (
+
+
+ )}
+
+
+ );
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern_title.tsx b/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern_title.tsx
new file mode 100644
index 000000000000..30b50a9006c8
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/sidebar/discover_index_pattern_title.tsx
@@ -0,0 +1,95 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { EuiToolTip, EuiFlexItem, EuiFlexGroup, EuiTitle, EuiButtonEmpty } from '@elastic/eui';
+
+import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+export interface DiscoverIndexPatternTitleProps {
+ /**
+ * determines whether the change link is displayed
+ */
+ isChangeable: boolean;
+ /**
+ * function triggered when the change link is clicked
+ */
+ onChange: () => void;
+ /**
+ * title of the current index pattern
+ */
+ title: string;
+}
+
+/**
+ * Component displaying the title of the current selected index pattern
+ * and if changeable is true, a link is provided to change the index pattern
+ */
+export function DiscoverIndexPatternTitle({
+ isChangeable,
+ onChange,
+ title,
+}: DiscoverIndexPatternTitleProps) {
+ return (
+ {title}
+
+
+
+
+ {fields.length > 0 && (
+ <>
+
+
+
+
+ {selectedFields.map((field: IndexPatternField) => {
+ return (
+
+
+
+
+ )}
+ {popularFields.length > 0 && (
+
+
+
+
+
+
+ )}
+
+
+
+
+ {popularFields.map((field: IndexPatternField) => {
+ return (
+
+
+ {unpopularFields.map((field: IndexPatternField) => {
+ return (
+
+
+
+ {Object.keys(flattened)
+ .sort()
+ .map((field) => {
+ const valueRaw = flattened[field];
+ const value = trimAngularSpan(String(formatted[field]));
+
+ const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
+ const isCollapsed = isCollapsible && !fieldRowOpen[field];
+ const toggleColumn =
+ onRemoveColumn && onAddColumn && Array.isArray(columns)
+ ? () => {
+ if (columns.includes(field)) {
+ onRemoveColumn(field);
+ } else {
+ onAddColumn(field);
+ }
+ }
+ : undefined;
+ const isArrayOfObjects =
+ Array.isArray(flattened[field]) && arrayContainsObjects(flattened[field]);
+ const displayUnderscoreWarning = !mapping(field) && field.indexOf('_') === 0;
+ const displayNoMappingWarning =
+ !mapping(field) && !displayUnderscoreWarning && !isArrayOfObjects;
+
+ // Discover doesn't flatten arrays of objects, so for documents with an `object` or `nested` field that
+ // contains an array, Discover will only detect the top level root field. We want to detect when those
+ // root fields are `nested` so that we can display the proper icon and label. However, those root
+ // `nested` fields are not a part of the index pattern. Their children are though, and contain nested path
+ // info. So to detect nested fields we look through the index pattern for nested children
+ // whose path begins with the current field. There are edge cases where
+ // this could incorrectly identify a plain `object` field as `nested`. Say we had the following document
+ // where `foo` is a plain object field and `bar` is a nested field.
+ // {
+ // "foo": [
+ // {
+ // "bar": [
+ // {
+ // "baz": "qux"
+ // }
+ // ]
+ // },
+ // {
+ // "bar": [
+ // {
+ // "baz": "qux"
+ // }
+ // ]
+ // }
+ // ]
+ // }
+ //
+ // The following code will search for `foo`, find it at the beginning of the path to the nested child field
+ // `foo.bar.baz` and incorrectly mark `foo` as nested. Any time we're searching for the name of a plain object
+ // field that happens to match a segment of a nested path, we'll get a false positive.
+ // We're aware of this issue and we'll have to live with
+ // it in the short term. The long term fix will be to add info about the `nested` and `object` root fields
+ // to the index pattern, but that has its own complications which you can read more about in the following
+ // issue: https://github.com/elastic/kibana/issues/54957
+ const isNestedField =
+ !indexPattern.fields.getByName(field) &&
+ !!indexPattern.fields.getAll().find((patternField) => {
+ // We only want to match a full path segment
+ const nestedRootRegex = new RegExp(escapeRegExp(field) + '(\\.|$)');
+ return nestedRootRegex.test(patternField.subType?.nested?.path ?? '');
+ });
+ const fieldType = isNestedField ? 'nested' : indexPattern.fields.getByName(field)?.type;
+
+ return (
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts b/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts
new file mode 100644
index 000000000000..20c1092ef86d
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_helper.test.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { arrayContainsObjects } from './table_helper';
+
+describe('arrayContainsObjects', () => {
+ it(`returns false for an array of primitives`, () => {
+ const actual = arrayContainsObjects(['test', 'test']);
+ expect(actual).toBeFalsy();
+ });
+
+ it(`returns true for an array of objects`, () => {
+ const actual = arrayContainsObjects([{}, {}]);
+ expect(actual).toBeTruthy();
+ });
+
+ it(`returns true for an array of objects and primitves`, () => {
+ const actual = arrayContainsObjects([{}, 'sdf']);
+ expect(actual).toBeTruthy();
+ });
+
+ it(`returns false for an array of null values`, () => {
+ const actual = arrayContainsObjects([null, null]);
+ expect(actual).toBeFalsy();
+ });
+
+ it(`returns false if no array is given`, () => {
+ const actual = arrayContainsObjects([null, null]);
+ expect(actual).toBeFalsy();
+ });
+});
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx b/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx
new file mode 100644
index 000000000000..2e63b43b8310
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_helper.tsx
@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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.
+ */
+
+/**
+ * Returns true if the given array contains at least 1 object
+ */
+export function arrayContainsObjects(value: unknown[]): boolean {
+ return Array.isArray(value) && value.some((v) => typeof v === 'object' && v !== null);
+}
+
+/**
+ * Removes markup added by OpenSearch Dashboards fields html formatter
+ */
+export function trimAngularSpan(text: string): string {
+ return text.replace(/^/, '').replace(/<\/span>$/, '');
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row.tsx
new file mode 100644
index 000000000000..95ba38106e3e
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row.tsx
@@ -0,0 +1,129 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { FieldMapping, DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
+import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
+import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column';
+import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse';
+import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
+import { DocViewTableRowIconNoMapping } from './table_row_icon_no_mapping';
+import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore';
+import { FieldName } from '../field_name/field_name';
+
+export interface Props {
+ field: string;
+ fieldMapping?: FieldMapping;
+ fieldType: string;
+ displayNoMappingWarning: boolean;
+ displayUnderscoreWarning: boolean;
+ isCollapsible: boolean;
+ isColumnActive: boolean;
+ isCollapsed: boolean;
+ onToggleCollapse: () => void;
+ onFilter?: DocViewFilterFn;
+ onToggleColumn?: () => void;
+ value: string | ReactNode;
+ valueRaw: unknown;
+}
+
+export function DocViewTableRow({
+ field,
+ fieldMapping,
+ fieldType,
+ displayNoMappingWarning,
+ displayUnderscoreWarning,
+ isCollapsible,
+ isCollapsed,
+ isColumnActive,
+ onFilter,
+ onToggleCollapse,
+ onToggleColumn,
+ value,
+ valueRaw,
+}: Props) {
+ const valueClassName = classNames({
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ osdDocViewer__value: true,
+ 'truncate-by-height': isCollapsible && isCollapsed,
+ });
+
+ return (
+
+ {typeof onFilter === 'function' && (
+
+ );
+}
diff --git a/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx
new file mode 100644
index 000000000000..de25c73e9c95
--- /dev/null
+++ b/src/plugins/discover_legacy/public/application/components/table/table_row_btn_collapse.tsx
@@ -0,0 +1,56 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+
+export interface Props {
+ onClick: () => void;
+ isCollapsed: boolean;
+}
+
+export function DocViewTableRowBtnCollapse({ onClick, isCollapsed }: Props) {
+ const label = i18n.translate('discover.docViews.table.toggleFieldDetails', {
+ defaultMessage: 'Toggle field details',
+ });
+ return (
+
+
+ )}
+
+
+
+ {isCollapsible && (
+
+
+
+
+
+ ' +
+ '';
+
+ return {
+ restrict: 'EA',
+ compile: function(tElem, tAttrs) {
+ const tooltipLinker = $compile(template);
+
+ return function link(scope, element, attrs) {
+ let tooltip;
+ let tooltipLinkedScope;
+ let transitionTimeout;
+ let popupTimeout;
+ let appendToBody = angular.isDefined(options.appendToBody)
+ ? options.appendToBody
+ : false;
+ let triggers = getTriggers(undefined);
+ const hasEnableExp = angular.isDefined(attrs[prefix + 'Enable']);
+ let ttScope = scope.$new(true);
+
+ const positionTooltip = function() {
+ const ttPosition = $position.positionElements(
+ element,
+ tooltip,
+ ttScope.placement,
+ appendToBody
+ );
+ ttPosition.top += 'px';
+ ttPosition.left += 'px';
+
+ // Now set the calculated positioning.
+ tooltip.css(ttPosition);
+ };
+
+ // By default, the tooltip is not open.
+ // TODO add ability to start tooltip opened
+ ttScope.isOpen = false;
+
+ function toggleTooltipBind() {
+ if (!ttScope.isOpen) {
+ showTooltipBind();
+ } else {
+ hideTooltipBind();
+ }
+ }
+
+ // Show the tooltip with delay if specified, otherwise show it immediately
+ function showTooltipBind() {
+ if (hasEnableExp && !scope.$eval(attrs[prefix + 'Enable'])) {
+ return;
+ }
+
+ prepareTooltip();
+
+ if (ttScope.popupDelay) {
+ // Do nothing if the tooltip was already scheduled to pop-up.
+ // This happens if show is triggered multiple times before any hide is triggered.
+ if (!popupTimeout) {
+ popupTimeout = $timeout(show, ttScope.popupDelay, false);
+ popupTimeout
+ .then(reposition => reposition())
+ .catch(error => {
+ // if the timeout is canceled then the string `canceled` is thrown. To prevent
+ // this from triggering an 'unhandled promise rejection' in angular 1.5+ the
+ // $timeout service explicitly tells $q that the promise it generated is "handled"
+ // but that does not include down chain promises like the one created by calling
+ // `popupTimeout.then()`. Because of this we need to ignore the "canceled" string
+ // and only propagate real errors
+ if (error !== 'canceled') {
+ throw error;
+ }
+ });
+ }
+ } else {
+ show()();
+ }
+ }
+
+ function hideTooltipBind() {
+ scope.$evalAsync(function() {
+ hide();
+ });
+ }
+
+ // Show the tooltip popup element.
+ function show() {
+ popupTimeout = null;
+
+ // If there is a pending remove transition, we must cancel it, lest the
+ // tooltip be mysteriously removed.
+ if (transitionTimeout) {
+ $timeout.cancel(transitionTimeout);
+ transitionTimeout = null;
+ }
+
+ // Don't show empty tooltips.
+ if (!ttScope.content) {
+ return angular.noop;
+ }
+
+ createTooltip();
+
+ // Set the initial positioning.
+ tooltip.css({ top: 0, left: 0, display: 'block' });
+ ttScope.$digest();
+
+ positionTooltip();
+
+ // And show the tooltip.
+ ttScope.isOpen = true;
+ ttScope.$digest(); // digest required as $apply is not called
+
+ // Return positioning function as promise callback for correct
+ // positioning after draw.
+ return positionTooltip;
+ }
+
+ // Hide the tooltip popup element.
+ function hide() {
+ // First things first: we don't show it anymore.
+ ttScope.isOpen = false;
+
+ //if tooltip is going to be shown after delay, we must cancel this
+ $timeout.cancel(popupTimeout);
+ popupTimeout = null;
+
+ // And now we remove it from the DOM. However, if we have animation, we
+ // need to wait for it to expire beforehand.
+ // FIXME: this is a placeholder for a port of the transitions library.
+ if (ttScope.animation) {
+ if (!transitionTimeout) {
+ transitionTimeout = $timeout(removeTooltip, 500);
+ }
+ } else {
+ removeTooltip();
+ }
+ }
+
+ function createTooltip() {
+ // There can only be one tooltip element per directive shown at once.
+ if (tooltip) {
+ removeTooltip();
+ }
+ tooltipLinkedScope = ttScope.$new();
+ tooltip = tooltipLinker(tooltipLinkedScope, function(tooltip) {
+ if (appendToBody) {
+ $document.find('body').append(tooltip);
+ } else {
+ element.after(tooltip);
+ }
+ });
+ }
+
+ function removeTooltip() {
+ transitionTimeout = null;
+ if (tooltip) {
+ tooltip.remove();
+ tooltip = null;
+ }
+ if (tooltipLinkedScope) {
+ tooltipLinkedScope.$destroy();
+ tooltipLinkedScope = null;
+ }
+ }
+
+ function prepareTooltip() {
+ prepPlacement();
+ prepPopupDelay();
+ }
+
+ /**
+ * Observe the relevant attributes.
+ */
+ attrs.$observe(type, function(val) {
+ ttScope.content = val;
+
+ if (!val && ttScope.isOpen) {
+ hide();
+ }
+ });
+
+ attrs.$observe(prefix + 'Title', function(val) {
+ ttScope.title = val;
+ });
+
+ function prepPlacement() {
+ const val = attrs[prefix + 'Placement'];
+ ttScope.placement = angular.isDefined(val) ? val : options.placement;
+ }
+
+ function prepPopupDelay() {
+ const val = attrs[prefix + 'PopupDelay'];
+ const delay = parseInt(val, 10);
+ ttScope.popupDelay = !isNaN(delay) ? delay : options.popupDelay;
+ }
+
+ const unregisterTriggers = function() {
+ element.unbind(triggers.show, showTooltipBind);
+ element.unbind(triggers.hide, hideTooltipBind);
+ };
+
+ function prepTriggers() {
+ const val = attrs[prefix + 'Trigger'];
+ unregisterTriggers();
+
+ triggers = getTriggers(val);
+
+ if (triggers.show === triggers.hide) {
+ element.bind(triggers.show, toggleTooltipBind);
+ } else {
+ element.bind(triggers.show, showTooltipBind);
+ element.bind(triggers.hide, hideTooltipBind);
+ }
+ }
+
+ prepTriggers();
+
+ const animation = scope.$eval(attrs[prefix + 'Animation']);
+ ttScope.animation = angular.isDefined(animation)
+ ? !!animation
+ : options.animation;
+
+ const appendToBodyVal = scope.$eval(attrs[prefix + 'AppendToBody']);
+ appendToBody = angular.isDefined(appendToBodyVal)
+ ? appendToBodyVal
+ : appendToBody;
+
+ // if a tooltip is attached to we need to remove it on
+ // location change as its parent scope will probably not be destroyed
+ // by the change.
+ if (appendToBody) {
+ scope.$on(
+ '$locationChangeSuccess',
+ function closeTooltipOnLocationChangeSuccess() {
+ if (ttScope.isOpen) {
+ hide();
+ }
+ }
+ );
+ }
+
+ // Make sure tooltip is destroyed and removed.
+ scope.$on('$destroy', function onDestroyTooltip() {
+ $timeout.cancel(transitionTimeout);
+ $timeout.cancel(popupTimeout);
+ unregisterTriggers();
+ removeTooltip();
+ ttScope = null;
+ });
+ };
+ },
+ };
+ };
+ },
+ ];
+ })
+
+ .directive('tooltip', [
+ '$tooltip',
+ function($tooltip) {
+ return $tooltip('tooltip', 'tooltip', 'mouseenter');
+ },
+ ])
+
+ .directive('tooltipPopup', function() {
+ return {
+ restrict: 'EA',
+ replace: true,
+ scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
+ templateUrl: 'template/tooltip/tooltip-popup.html',
+ };
+ })
+
+ .directive('tooltipHtmlUnsafe', [
+ '$tooltip',
+ function($tooltip) {
+ return $tooltip('tooltipHtmlUnsafe', 'tooltip', 'mouseenter');
+ },
+ ])
+
+ .directive('tooltipHtmlUnsafePopup', function() {
+ return {
+ restrict: 'EA',
+ replace: true,
+ scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
+ templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html',
+ };
+ });
+}
diff --git a/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_html_unsafe_popup.html b/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_html_unsafe_popup.html
new file mode 100644
index 000000000000..b48bf7049890
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_html_unsafe_popup.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_popup.html b/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_popup.html
new file mode 100644
index 000000000000..eed4ca7d9301
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/angular_bootstrap/tooltip/tooltip_popup.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/plugins/opensearch_dashboards_legacy/public/index.ts b/src/plugins/opensearch_dashboards_legacy/public/index.ts
index cdbdb7eee6a9..67cd6def9f0f 100644
--- a/src/plugins/opensearch_dashboards_legacy/public/index.ts
+++ b/src/plugins/opensearch_dashboards_legacy/public/index.ts
@@ -36,4 +36,8 @@ export const plugin = (initializerContext: PluginInitializerContext) =>
export * from './plugin';
+export { initAngularBootstrap } from './angular_bootstrap';
+export { PaginateDirectiveProvider, PaginateControlsDirectiveProvider } from './paginate/paginate';
+export * from './angular';
export * from './notify';
+export * from './utils';
diff --git a/src/plugins/opensearch_dashboards_legacy/public/notify/lib/add_fatal_error.ts b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/add_fatal_error.ts
index e04ce9928ed3..beb6f81e3ec7 100644
--- a/src/plugins/opensearch_dashboards_legacy/public/notify/lib/add_fatal_error.ts
+++ b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/add_fatal_error.ts
@@ -29,15 +29,21 @@
*/
import { FatalErrorsSetup } from '../../../../../core/public';
+import {
+ AngularHttpError,
+ formatAngularHttpError,
+ isAngularHttpError,
+} from './format_angular_http_error';
-/**
- * Adds an error to the list of fatal errors.
- * @deprecated Use `core.fatalErrors.add` instead
- */
export function addFatalError(
fatalErrors: FatalErrorsSetup,
- error: Error | string,
+ error: AngularHttpError | Error | string,
location?: string
) {
+ // add support for angular http errors to newPlatformFatalErrors
+ if (isAngularHttpError(error)) {
+ error = formatAngularHttpError(error);
+ }
+
fatalErrors.add(error, location);
}
diff --git a/src/plugins/opensearch_dashboards_legacy/public/notify/lib/format_angular_http_error.ts b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/format_angular_http_error.ts
new file mode 100644
index 000000000000..68b3701814b1
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/format_angular_http_error.ts
@@ -0,0 +1,69 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { i18n } from '@osd/i18n';
+import { IHttpResponse } from 'angular';
+
+export type AngularHttpError = IHttpResponse<{ message: string }>;
+
+export function isAngularHttpError(error: any): error is AngularHttpError {
+ return (
+ error &&
+ typeof error.status === 'number' &&
+ typeof error.statusText === 'string' &&
+ error.data &&
+ typeof error.data.message === 'string'
+ );
+}
+
+export function formatAngularHttpError(error: AngularHttpError) {
+ // is an Angular $http "error object"
+ if (error.status === -1) {
+ // status = -1 indicates that the request was failed to reach the server
+ return i18n.translate(
+ 'opensearch_dashboards_legacy.notify.fatalError.unavailableServerErrorMessage',
+ {
+ defaultMessage:
+ 'An HTTP request has failed to connect. ' +
+ 'Please check if the OpenSearch Dashboards server is running and that your browser has a working connection, ' +
+ 'or contact your system administrator.',
+ }
+ );
+ }
+
+ return i18n.translate('opensearch_dashboards_legacy.notify.fatalError.errorStatusMessage', {
+ defaultMessage: 'Error {errStatus} {errStatusText}: {errMessage}',
+ values: {
+ errStatus: error.status,
+ errStatusText: error.statusText,
+ errMessage: error.data.message,
+ },
+ });
+}
diff --git a/src/plugins/opensearch_dashboards_legacy/public/notify/lib/index.ts b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/index.ts
index 28bdec0d1884..22a8631dfee3 100644
--- a/src/plugins/opensearch_dashboards_legacy/public/notify/lib/index.ts
+++ b/src/plugins/opensearch_dashboards_legacy/public/notify/lib/index.ts
@@ -31,4 +31,9 @@
export { formatOpenSearchMsg } from './format_opensearch_msg';
export { formatMsg } from './format_msg';
export { formatStack } from './format_stack';
+export {
+ isAngularHttpError,
+ formatAngularHttpError,
+ AngularHttpError,
+} from './format_angular_http_error';
export { addFatalError } from './add_fatal_error';
diff --git a/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss b/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss
new file mode 100644
index 000000000000..ec346aa843c1
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/paginate/_paginate.scss
@@ -0,0 +1,58 @@
+/* stylelint-disable-next-line selector-type-no-unknown */
+paginate {
+ display: block;
+
+ /* stylelint-disable-next-line selector-type-no-unknown */
+ paginate-controls {
+ display: flex;
+ align-items: center;
+ padding: $euiSizeXS $euiSizeXS $euiSizeS;
+ text-align: center;
+
+ .pagination-other-pages {
+ flex: 1 0 auto;
+ display: flex;
+ justify-content: center;
+ }
+
+ .pagination-other-pages-list {
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: center;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ > li {
+ flex: 0 0 auto;
+ user-select: none;
+
+ a {
+ text-decoration: none;
+ background-color: $euiColorLightestShade;
+ margin-left: $euiSizeXS / 2;
+ padding: $euiSizeS $euiSizeM;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ &.active a {
+ text-decoration: none !important;
+ font-weight: $euiFontWeightBold;
+ color: $euiColorDarkShade;
+ cursor: default;
+ }
+ }
+ }
+
+ .pagination-size {
+ flex: 0 0 auto;
+
+ input[type="number"] {
+ width: 3em;
+ }
+ }
+ }
+}
diff --git a/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.d.ts b/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.d.ts
new file mode 100644
index 000000000000..60f462aa5ffe
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.d.ts
@@ -0,0 +1,32 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 PaginateDirectiveProvider($parse: any, $compile: any): any;
+export function PaginateControlsDirectiveProvider(): any;
diff --git a/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.js b/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.js
new file mode 100644
index 000000000000..1f78a7f715d9
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/paginate/paginate.js
@@ -0,0 +1,242 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 _ from 'lodash';
+import { i18n } from '@osd/i18n';
+import './_paginate.scss';
+import paginateControlsTemplate from './paginate_controls.html';
+
+export function PaginateDirectiveProvider($parse, $compile) {
+ return {
+ restrict: 'E',
+ scope: true,
+ link: {
+ pre: function ($scope, $el, attrs) {
+ if (_.isUndefined(attrs.bottomControls)) attrs.bottomControls = true;
+ if ($el.find('paginate-controls.paginate-bottom').length === 0 && attrs.bottomControls) {
+ $el.append($compile('
+
+
+
diff --git a/src/plugins/opensearch_dashboards_legacy/public/plugin.ts b/src/plugins/opensearch_dashboards_legacy/public/plugin.ts
index 5f6a3e2a4961..473c10b47079 100644
--- a/src/plugins/opensearch_dashboards_legacy/public/plugin.ts
+++ b/src/plugins/opensearch_dashboards_legacy/public/plugin.ts
@@ -47,7 +47,7 @@ export class OpenSearchDashboardsLegacyPlugin {
* Used to power dashboard mode. Should be removed when dashboard mode is removed eventually.
* @deprecated
*/
- dashboardConfig: getDashboardConfig(!application.capabilities?.dashboard?.showWriteControls),
+ dashboardConfig: getDashboardConfig(!application.capabilities.dashboard.showWriteControls),
/**
* Loads the font-awesome icon font. Should be removed once the last consumer has migrated to EUI
* @deprecated
diff --git a/src/plugins/opensearch_dashboards_legacy/public/utils/index.ts b/src/plugins/opensearch_dashboards_legacy/public/utils/index.ts
new file mode 100644
index 000000000000..6313548a1be1
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/utils/index.ts
@@ -0,0 +1,37 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 * from './system_api';
+// @ts-ignore
+export { OsdAccessibleClickProvider } from './osd_accessible_click';
+// @ts-ignore
+export { PrivateProvider, IPrivate } from './private';
+// @ts-ignore
+export { registerListenEventListener } from './register_listen_event_listener';
diff --git a/src/plugins/opensearch_dashboards_legacy/public/utils/osd_accessible_click.js b/src/plugins/opensearch_dashboards_legacy/public/utils/osd_accessible_click.js
new file mode 100644
index 000000000000..6c49ff8de4bb
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/utils/osd_accessible_click.js
@@ -0,0 +1,82 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 { accessibleClickKeys, keys } from '@elastic/eui';
+
+export function OsdAccessibleClickProvider() {
+ return {
+ restrict: 'A',
+ controller: ($element) => {
+ $element.on('keydown', (e) => {
+ // Prevent a scroll from occurring if the user has hit space.
+ if (e.key === keys.SPACE) {
+ e.preventDefault();
+ }
+ });
+ },
+ link: (scope, element, attrs) => {
+ // The whole point of this directive is to hack in functionality that native buttons provide
+ // by default.
+ const elementType = element.prop('tagName');
+
+ if (elementType === 'BUTTON') {
+ throw new Error(`osdAccessibleClick doesn't need to be used on a button.`);
+ }
+
+ if (elementType === 'A' && attrs.href !== undefined) {
+ throw new Error(
+ `osdAccessibleClick doesn't need to be used on a link if it has a href attribute.`
+ );
+ }
+
+ // We're emulating a click action, so we should already have a regular click handler defined.
+ if (!attrs.ngClick) {
+ throw new Error('osdAccessibleClick requires ng-click to be defined on its element.');
+ }
+
+ // If the developer hasn't already specified attributes required for accessibility, add them.
+ if (attrs.tabindex === undefined) {
+ element.attr('tabindex', '0');
+ }
+
+ if (attrs.role === undefined) {
+ element.attr('role', 'button');
+ }
+
+ element.on('keyup', (e) => {
+ // Support keyboard accessibility by emulating mouse click on ENTER or SPACE keypress.
+ if (accessibleClickKeys[e.key]) {
+ // Delegate to the click handler on the element (assumed to be ng-click).
+ element.click();
+ }
+ });
+ },
+ };
+}
diff --git a/src/plugins/opensearch_dashboards_legacy/public/utils/private.d.ts b/src/plugins/opensearch_dashboards_legacy/public/utils/private.d.ts
new file mode 100644
index 000000000000..fe264fc193fc
--- /dev/null
+++ b/src/plugins/opensearch_dashboards_legacy/public/utils/private.d.ts
@@ -0,0 +1,31 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * 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 type IPrivate =
+
+