From 38181f13f3acbb212e30c08ad2adaefda924915a Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 03:18:11 +0000 Subject: [PATCH 01/12] [Discover] options button in canvas to toggle legacy mode Removes top nav bar link and provides a button option. Issue: n/a Signed-off-by: Kawika Avilla --- .../components/top_nav/get_top_nav_links.tsx | 54 ------------------- .../canvas/discover_canvas.scss | 7 +++ .../view_components/canvas/index.tsx | 49 ++++++++++++++++- 3 files changed, 54 insertions(+), 56 deletions(-) diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx index 1b20c444e86..be61dc53451 100644 --- a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx +++ b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx @@ -234,61 +234,7 @@ export const getTopNavLinks = ( }, }; - const newDiscoverButtonLabel = i18n.translate('discover.localMenu.discoverButton.label.new', { - defaultMessage: 'Try new Discover', - }); - const oldDiscoverButtonLabel = i18n.translate('discover.localMenu.discoverButton.label.old', { - defaultMessage: 'Use legacy Discover', - }); - const isNewDiscover = getNewDiscoverSetting(storage); - const newTable: TopNavMenuData = { - id: 'table-datagrid', - label: isNewDiscover ? oldDiscoverButtonLabel : newDiscoverButtonLabel, - description: i18n.translate('discover.localMenu.newTableDescription', { - defaultMessage: 'New Discover toggle Experience', - }), - testId: 'datagridTableButton', - run: async () => { - // Read the current state from localStorage - const newDiscoverEnabled = getNewDiscoverSetting(storage); - if (newDiscoverEnabled) { - const confirmed = await services.overlays.openConfirm( - toMountPoint( - -

- Help drive future improvements by{' '} - - providing feedback - {' '} - about your experience. -

-
- ), - { - title: i18n.translate('discover.localMenu.newTableConfirmModalTitle', { - defaultMessage: 'Share your thoughts on the latest Discover features', - }), - cancelButtonText: 'Cancel', - confirmButtonText: 'Turn off new features', - defaultFocusedButton: 'confirm', - } - ); - - if (confirmed) { - setNewDiscoverSetting(false, storage); - window.location.reload(); - } - } else { - // Save the new setting to localStorage - setNewDiscoverSetting(true, storage); - window.location.reload(); - } - }, - iconType: isNewDiscover ? 'editorUndo' : 'cheer', - }; - return [ - newTable, newSearch, ...(capabilities.discover?.save ? [saveSearch] : []), openSearch, diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss index 36408bd8836..819e39b5b71 100644 --- a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss +++ b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss @@ -9,6 +9,13 @@ &_results { margin-left: $euiSizeM; + position: relative; + } + + &_options { + position: absolute; + top: 0; + left: 0; } } diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index 1c2681995f9..bac186cf553 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -4,7 +4,7 @@ */ import React, { useEffect, useState, useRef, useCallback } from 'react'; -import { EuiPanel } from '@elastic/eui'; +import { EuiButtonIcon, EuiContextMenu, EuiPanel, EuiPopover, EuiSwitch } from '@elastic/eui'; import { TopNav } from './top_nav'; import { ViewProps } from '../../../../../data_explorer/public'; import { DiscoverTable } from './discover_table'; @@ -21,13 +21,14 @@ import { filterColumns } from '../utils/filter_columns'; import { DEFAULT_COLUMNS_SETTING, MODIFY_COLUMNS_ON_SWITCH } from '../../../../common'; import { OpenSearchSearchHit } from '../../../application/doc_views/doc_views_types'; import './discover_canvas.scss'; +import { getNewDiscoverSetting, setNewDiscoverSetting } from '../../components/utils/local_storage'; // eslint-disable-next-line import/no-default-export export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) { const panelRef = useRef(null); const { data$, refetch$, indexPattern } = useDiscoverContext(); const { - services: { uiSettings }, + services: { uiSettings, storage }, } = useOpenSearchDashboards(); const { columns } = useSelector((state) => state.discover); const filteredColumns = filterColumns( @@ -96,6 +97,49 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro } }; + const [isOptionsOpen, setOptionsOpen] = useState(false); + const [useLegacy, setUseLegacy] = useState(!getNewDiscoverSetting(storage)); + const DiscoverOptions = () => ( + setOptionsOpen(!isOptionsOpen)} /> + } + closePopover={() => setOptionsOpen(false)} + isOpen={isOptionsOpen} + panelPaddingSize="none" + className="dscCanvas_options" + > + + { + setUseLegacy(e.target.checked); + setNewDiscoverSetting(false, storage); + window.location.reload(); + }} + /> + + ), + }, + ]} + /> + + ); + return ( + )} From 5bd6056fe9cf841ba26a9939515aa179cb3abf25 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 23:00:30 +0000 Subject: [PATCH 02/12] update changelog Signed-off-by: Kawika Avilla --- CHANGELOG.md | 1 + .../application/components/top_nav/get_top_nav_links.tsx | 3 --- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6774b145aa9..0634865b287 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -53,6 +53,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - Add sidecar service ([#5920](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5920)) - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244)) - [Dynamic Configurations] Pass request headers when making application config calls ([#6164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6164)) +- [Discover] Options button to configure legacy mode and remove the top navigation option ([#6170](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6170)) ### 🐛 Bug Fixes diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx index be61dc53451..6760416ab8c 100644 --- a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx +++ b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx @@ -5,7 +5,6 @@ import { i18n } from '@osd/i18n'; import React from 'react'; -import { EuiText } from '@elastic/eui'; import { DiscoverViewServices } from '../../../build_services'; import { SavedSearch } from '../../../saved_searches'; import { Adapters } from '../../../../../inspector/public'; @@ -25,7 +24,6 @@ import { DOC_HIDE_TIME_COLUMN_SETTING, SORT_DEFAULT_ORDER_SETTING } from '../../ import { getSortForSearchSource } from '../../view_components/utils/get_sort_for_search_source'; import { getRootBreadcrumbs } from '../../helpers/breadcrumbs'; import { syncQueryStateWithUrl } from '../../../../../data/public'; -import { getNewDiscoverSetting, setNewDiscoverSetting } from '../utils/local_storage'; import { OpenSearchPanel } from './open_search_panel'; export const getTopNavLinks = ( @@ -44,7 +42,6 @@ export const getTopNavLinks = ( store, data: { query }, osdUrlStateStorage, - storage, } = services; const newSearch = { From 9432bb9f51662010e997719e5acd6b90ace8a8a8 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 03:39:27 +0000 Subject: [PATCH 03/12] Update tests Signed-off-by: Kawika Avilla --- .../application/view_components/canvas/index.tsx | 8 +++++++- test/functional/page_objects/discover_page.ts | 11 +++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index bac186cf553..432bc46bd23 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -102,7 +102,12 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro const DiscoverOptions = () => ( setOptionsOpen(!isOptionsOpen)} /> + setOptionsOpen(!isOptionsOpen)} + /> } closePopover={() => setOptionsOpen(false)} isOpen={isOptionsOpen} @@ -126,6 +131,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro { setUseLegacy(e.target.checked); setNewDiscoverSetting(false, storage); diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts index cf0b03022ab..8f03ae20ddf 100644 --- a/test/functional/page_objects/discover_page.ts +++ b/test/functional/page_objects/discover_page.ts @@ -519,12 +519,15 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider public async switchDiscoverTable(tableType: string) { await retry.try(async () => { - const switchButton = await testSubjects.find('datagridTableButton'); - const buttonText = await switchButton.getVisibleText(); + const optionsButton = await testSubjects.find('discoverOptionsButton'); + await optionsButton.click(); - if (tableType === 'new' && buttonText.includes('Try new Discover')) { + const switchButton = await testSubjects.find('discoverOptionsLegacySwitch'); + const isLegacyChecked = (await switchButton.getAttribute('aria-checked')) === 'true'; + + if (tableType === 'new' && isLegacyChecked) { await switchButton.click(); - } else if (tableType === 'legacy' && buttonText.includes('Use legacy Discover')) { + } else if (tableType === 'legacy' && !isLegacyChecked) { await switchButton.click(); } }); From 213e6eeb7f1445fe4fd3955a5ef9467aa9c7556b Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 07:22:47 +0000 Subject: [PATCH 04/12] Use only 1 layer for options and fix storage Signed-off-by: Kawika Avilla --- .../application/components/utils/local_storage.ts | 4 ++-- .../application/view_components/canvas/index.tsx | 13 ++++--------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/plugins/discover/public/application/components/utils/local_storage.ts b/src/plugins/discover/public/application/components/utils/local_storage.ts index 5e812de8e97..68bba0aafc9 100644 --- a/src/plugins/discover/public/application/components/utils/local_storage.ts +++ b/src/plugins/discover/public/application/components/utils/local_storage.ts @@ -9,9 +9,9 @@ export const NEW_DISCOVER_KEY = 'discover:newExpereince'; export const getNewDiscoverSetting = (storage: Storage): boolean => { const storedValue = storage.get(NEW_DISCOVER_KEY); - return storedValue !== null ? JSON.parse(storedValue) : false; + return storedValue !== null ? storedValue : false; }; export const setNewDiscoverSetting = (value: boolean, storage: Storage) => { - storage.set(NEW_DISCOVER_KEY, JSON.stringify(value)); + storage.set(NEW_DISCOVER_KEY, value); }; diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index 432bc46bd23..8417b258a0e 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -120,21 +120,16 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro { id: 0, title: 'Options', - items: [{ name: 'Legacy Discover', panel: 1 }], - }, - { - id: 1, - title: 'Legacy Discover', - initialFocusedItemIndex: 1, content: ( { - setUseLegacy(e.target.checked); - setNewDiscoverSetting(false, storage); + const checked = e.target.checked; + setUseLegacy(checked); + setNewDiscoverSetting(!checked, storage); window.location.reload(); }} /> From f12c40a44a66a7d940673f41ee368c4cbaa6bbf0 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 07:24:36 +0000 Subject: [PATCH 05/12] capitalization Signed-off-by: Kawika Avilla --- .../public/application/view_components/canvas/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index 8417b258a0e..ab34878750a 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -123,7 +123,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro content: ( { From 45d05a63dfd96fc3c7600dbb6c96180220ef3825 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 08:09:57 +0000 Subject: [PATCH 06/12] update snapshot Signed-off-by: Kawika Avilla --- .../dashboard_listing.test.tsx.snap | 8203 ++++++++++++++++- 1 file changed, 8198 insertions(+), 5 deletions(-) diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap index 5e6645f56d9..2deead13748 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap +++ b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap @@ -1126,11 +1126,1481 @@ exports[`dashboard listing hideWriteControls 1`] = ` data-test-subj="dashboardLandingPage" >
+ > + + +
+
+ +
+ +
+ +

+ Dashboards +

+
+
+
+
+
+ +
+ + + } + pagination={ + Object { + "initialPageIndex": 0, + "initialPageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + } + } + responsive={true} + search={ + Object { + "box": Object { + "incremental": true, + }, + "defaultQuery": "", + "onChange": [Function], + "toolsLeft": undefined, + } + } + sorting={true} + tableLayout="fixed" + > +
+ + +
+ +
+ + + +
+
+ + + + +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + } + onChange={[Function]} + pagination={ + Object { + "hidePerPageOptions": undefined, + "pageIndex": 0, + "pageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + "totalItemCount": 2, + } + } + responsive={true} + sorting={ + Object { + "allowNeutralSort": true, + "sort": undefined, + } + } + tableLayout="fixed" + > +
+
+ +
+ +
+ +
+ + +
+ +
+ + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard0 desc + +
+
+
+ Last updated +
+
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard1 desc + +
+
+
+ Last updated +
+
+
+
+
+ +
+ +
+ + + +
+ +
+ + + : + 10 + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+ +
+ +
+ +
+
+ + +
@@ -2329,11 +3799,2151 @@ exports[`dashboard listing render table listing with initial filters from URL 1` data-test-subj="dashboardLandingPage" >
+ > + + +
+
+ +
+ +
+ +

+ Dashboards +

+
+
+
+ + +
+ + + + + +
+
+
+
+
+ +
+ + + } + pagination={ + Object { + "initialPageIndex": 0, + "initialPageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + } + } + responsive={true} + search={ + Object { + "box": Object { + "incremental": true, + }, + "defaultQuery": "dashboard", + "onChange": [Function], + "toolsLeft": undefined, + } + } + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={true} + tableLayout="fixed" + > +
+ + +
+ +
+ + + +
+
+ + + + +
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + } + onChange={[Function]} + pagination={ + Object { + "hidePerPageOptions": undefined, + "pageIndex": 0, + "pageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + "totalItemCount": 2, + } + } + responsive={true} + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={ + Object { + "allowNeutralSort": true, + "sort": undefined, + } + } + tableLayout="fixed" + > +
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ + +
+ +
+ + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+
+ + +
+
+ + + + + + + + + + + + + + Actions + + + + + +
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard0 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard1 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+
+ +
+ +
+ + + +
+ +
+ + + : + 10 + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+ +
+ +
+ +
+
+ + +
@@ -3532,11 +7142,274 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] = data-test-subj="dashboardLandingPage" >
+ > + + +
+ + + + } + body={ + +

+ +

+

+ + + , + } + } + /> +

+
+ } + iconType="dashboardApp" + title={ +

+ +

+ } + > +
+ + + + +
+ + +

+ + Create your first dashboard + +

+
+ + + +
+ + +
+

+ + You can combine data views from any OpenSearch Dashboards app into one dashboard and see everything in one place. + +

+

+ + + , + } + } + > + New to OpenSearch Dashboards? + + + + to take a test drive. + +

+
+
+ + + +
+ + + + + + +
+ +
+ + +
@@ -4735,11 +8608,2111 @@ exports[`dashboard listing renders table rows 1`] = ` data-test-subj="dashboardLandingPage" >
+ > + + +
+
+ +
+ +
+ +

+ Dashboards +

+
+
+
+ + +
+ + + + + +
+
+
+
+
+ +
+ + + } + pagination={ + Object { + "initialPageIndex": 0, + "initialPageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + } + } + responsive={true} + search={ + Object { + "box": Object { + "incremental": true, + }, + "defaultQuery": "", + "onChange": [Function], + "toolsLeft": undefined, + } + } + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={true} + tableLayout="fixed" + > +
+ + +
+ +
+ + + +
+
+ + + + +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + } + onChange={[Function]} + pagination={ + Object { + "hidePerPageOptions": undefined, + "pageIndex": 0, + "pageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + "totalItemCount": 2, + } + } + responsive={true} + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={ + Object { + "allowNeutralSort": true, + "sort": undefined, + } + } + tableLayout="fixed" + > +
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ + +
+ +
+ + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+
+ + +
+
+ + + + + + + + + + + + + + Actions + + + + + +
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard0 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard1 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+
+ +
+ +
+ + + +
+ +
+ + + : + 10 + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+ +
+ +
+ +
+
+ + +
@@ -5938,11 +11911,2231 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = ` data-test-subj="dashboardLandingPage" >
+ > + + +
+
+ +
+ +
+ +

+ Dashboards +

+
+
+
+ + +
+ + + + + +
+
+
+
+
+ +
+ + + } + > +
+
+ + + + Listing limit exceeded + + +
+ +
+ +
+

+ + + , + "entityNamePlural": "dashboards", + "listingLimitText": + listingLimit + , + "listingLimitValue": 1, + "totalItems": 2, + } + } + > + You have 2 dashboards, but your + + listingLimit + + setting prevents the table below from displaying more than 1. You can change this setting under + + + + Advanced Settings + + + + . + +

+
+
+
+
+
+
+ +
+ + + } + pagination={ + Object { + "initialPageIndex": 0, + "initialPageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + } + } + responsive={true} + search={ + Object { + "box": Object { + "incremental": true, + }, + "defaultQuery": "", + "onChange": [Function], + "toolsLeft": undefined, + } + } + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={true} + tableLayout="fixed" + > +
+ + +
+ +
+ + + +
+
+ + + + +
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + } + onChange={[Function]} + pagination={ + Object { + "hidePerPageOptions": undefined, + "pageIndex": 0, + "pageSize": 10, + "pageSizeOptions": Array [ + 10, + 20, + 50, + ], + "totalItemCount": 2, + } + } + responsive={true} + selection={ + Object { + "onSelectionChange": [Function], + } + } + sorting={ + Object { + "allowNeutralSort": true, + "sort": undefined, + } + } + tableLayout="fixed" + > +
+
+ +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ + +
+ +
+ + + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+
+ + +
+
+ + + + + + + + + + + + + + Actions + + + + + +
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard0 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+ + +
+ +
+
+ + +
+
+
+ Title +
+
+ + + +
+
+
+ Type +
+
+ + dashboardSavedObjects + +
+
+
+ Description +
+
+ + dashboard1 desc + +
+
+
+ Last updated +
+
+
+
+ + + + + + + + + + Edit + + + + + + +
+
+
+
+ +
+ +
+ + + +
+ +
+ + + : + 10 + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ + + +
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+ +
+ +
+ +
+
+ + +
From 68633c7ec1c60d5ad4e64f496ad625a929ae51c1 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Sat, 16 Mar 2024 17:26:29 +0000 Subject: [PATCH 07/12] update snapshot without plugins Signed-off-by: Kawika Avilla --- .../dashboard_listing.test.tsx.snap | 8203 +---------------- 1 file changed, 5 insertions(+), 8198 deletions(-) diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap index 2deead13748..5e6645f56d9 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap +++ b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap @@ -1126,1481 +1126,11 @@ exports[`dashboard listing hideWriteControls 1`] = ` data-test-subj="dashboardLandingPage" >
- - -
-
- -
- -
- -

- Dashboards -

-
-
-
-
-
- -
- - - } - pagination={ - Object { - "initialPageIndex": 0, - "initialPageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - } - } - responsive={true} - search={ - Object { - "box": Object { - "incremental": true, - }, - "defaultQuery": "", - "onChange": [Function], - "toolsLeft": undefined, - } - } - sorting={true} - tableLayout="fixed" - > -
- - -
- -
- - - -
-
- - - - -
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
- - - } - onChange={[Function]} - pagination={ - Object { - "hidePerPageOptions": undefined, - "pageIndex": 0, - "pageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - "totalItemCount": 2, - } - } - responsive={true} - sorting={ - Object { - "allowNeutralSort": true, - "sort": undefined, - } - } - tableLayout="fixed" - > -
-
- -
- -
- -
- - -
- -
- - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - -
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard0 desc - -
-
-
- Last updated -
-
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard1 desc - -
-
-
- Last updated -
-
-
-
-
- -
- -
- - - -
- -
- - - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
- -
- - - -
-
-
-
-
-
- -
- -
- -
-
- - -
+ />
@@ -3799,2151 +2329,11 @@ exports[`dashboard listing render table listing with initial filters from URL 1` data-test-subj="dashboardLandingPage" >
- - -
-
- -
- -
- -

- Dashboards -

-
-
-
- - -
- - - - - -
-
-
-
-
- -
- - - } - pagination={ - Object { - "initialPageIndex": 0, - "initialPageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - } - } - responsive={true} - search={ - Object { - "box": Object { - "incremental": true, - }, - "defaultQuery": "dashboard", - "onChange": [Function], - "toolsLeft": undefined, - } - } - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={true} - tableLayout="fixed" - > -
- - -
- -
- - - -
-
- - - - -
- - - - - -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
- - - } - onChange={[Function]} - pagination={ - Object { - "hidePerPageOptions": undefined, - "pageIndex": 0, - "pageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - "totalItemCount": 2, - } - } - responsive={true} - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={ - Object { - "allowNeutralSort": true, - "sort": undefined, - } - } - tableLayout="fixed" - > -
-
- -
- -
- -
- - -
- -
- -
- - -
- - -
- -
- - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
-
- - -
-
- - - - - - - - - - - - - - Actions - - - - - -
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard0 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard1 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
-
- -
- -
- - - -
- -
- - - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
- -
- - - -
-
-
-
-
-
- -
- -
- -
-
- - -
+ />
@@ -7142,274 +3532,11 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] = data-test-subj="dashboardLandingPage" >
- - -
- - - - } - body={ - -

- -

-

- - - , - } - } - /> -

-
- } - iconType="dashboardApp" - title={ -

- -

- } - > -
- - - - -
- - -

- - Create your first dashboard - -

-
- - - -
- - -
-

- - You can combine data views from any OpenSearch Dashboards app into one dashboard and see everything in one place. - -

-

- - - , - } - } - > - New to OpenSearch Dashboards? - - - - to take a test drive. - -

-
-
- - - -
- - - - - - -
- -
- - -
+ />
@@ -8608,2111 +4735,11 @@ exports[`dashboard listing renders table rows 1`] = ` data-test-subj="dashboardLandingPage" >
- - -
-
- -
- -
- -

- Dashboards -

-
-
-
- - -
- - - - - -
-
-
-
-
- -
- - - } - pagination={ - Object { - "initialPageIndex": 0, - "initialPageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - } - } - responsive={true} - search={ - Object { - "box": Object { - "incremental": true, - }, - "defaultQuery": "", - "onChange": [Function], - "toolsLeft": undefined, - } - } - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={true} - tableLayout="fixed" - > -
- - -
- -
- - - -
-
- - - - -
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
- - - } - onChange={[Function]} - pagination={ - Object { - "hidePerPageOptions": undefined, - "pageIndex": 0, - "pageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - "totalItemCount": 2, - } - } - responsive={true} - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={ - Object { - "allowNeutralSort": true, - "sort": undefined, - } - } - tableLayout="fixed" - > -
-
- -
- -
- -
- - -
- -
- -
- - -
- - -
- -
- - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
-
- - -
-
- - - - - - - - - - - - - - Actions - - - - - -
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard0 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard1 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
-
- -
- -
- - - -
- -
- - - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
- -
- - - -
-
-
-
-
-
- -
- -
- -
-
- - -
+ />
@@ -11911,2231 +5938,11 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = ` data-test-subj="dashboardLandingPage" >
- - -
-
- -
- -
- -

- Dashboards -

-
-
-
- - -
- - - - - -
-
-
-
-
- -
- - - } - > -
-
- - - - Listing limit exceeded - - -
- -
- -
-

- - - , - "entityNamePlural": "dashboards", - "listingLimitText": - listingLimit - , - "listingLimitValue": 1, - "totalItems": 2, - } - } - > - You have 2 dashboards, but your - - listingLimit - - setting prevents the table below from displaying more than 1. You can change this setting under - - - - Advanced Settings - - - - . - -

-
-
-
-
-
-
- -
- - - } - pagination={ - Object { - "initialPageIndex": 0, - "initialPageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - } - } - responsive={true} - search={ - Object { - "box": Object { - "incremental": true, - }, - "defaultQuery": "", - "onChange": [Function], - "toolsLeft": undefined, - } - } - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={true} - tableLayout="fixed" - > -
- - -
- -
- - - -
-
- - - - -
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
- - - } - onChange={[Function]} - pagination={ - Object { - "hidePerPageOptions": undefined, - "pageIndex": 0, - "pageSize": 10, - "pageSizeOptions": Array [ - 10, - 20, - 50, - ], - "totalItemCount": 2, - } - } - responsive={true} - selection={ - Object { - "onSelectionChange": [Function], - } - } - sorting={ - Object { - "allowNeutralSort": true, - "sort": undefined, - } - } - tableLayout="fixed" - > -
-
- -
- -
- -
- - -
- -
- -
- - -
- - -
- -
- - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
- -
-
- - -
-
- - - - - - - - - - - - - - Actions - - - - - -
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard0 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
- - -
- -
-
- - -
-
-
- Title -
-
- - - -
-
-
- Type -
-
- - dashboardSavedObjects - -
-
-
- Description -
-
- - dashboard1 desc - -
-
-
- Last updated -
-
-
-
- - - - - - - - - - Edit - - - - - - -
-
-
-
- -
- -
- - - -
- -
- - - : - 10 - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
-
-
-
- -
- - - -
-
-
-
-
-
- -
- -
- -
-
- - -
+ />
From dfad75febad87599668ced57ef3a36a53d77dd26 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 13:40:41 +0000 Subject: [PATCH 08/12] fix test for time range to show options Signed-off-by: Kawika Avilla --- test/plugin_functional/test_suites/doc_views/doc_views.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/plugin_functional/test_suites/doc_views/doc_views.ts b/test/plugin_functional/test_suites/doc_views/doc_views.ts index b745d6e8a41..d215017132a 100644 --- a/test/plugin_functional/test_suites/doc_views/doc_views.ts +++ b/test/plugin_functional/test_suites/doc_views/doc_views.ts @@ -39,10 +39,10 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide describe('custom doc views with datagrid table', function () { before(async () => { await PageObjects.common.navigateToApp('discover'); - await PageObjects.discover.switchDiscoverTable('new'); // TODO: change back to setDefaultRange() once we resolve // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5241 await PageObjects.timePicker.setDefaultRangeForDiscover(); + await PageObjects.discover.switchDiscoverTable('new'); }); it('should show custom doc views', async () => { From 6fd48aac1bce81f17a5acdc41a4814db42b90b31 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 15:01:23 +0000 Subject: [PATCH 09/12] update test Signed-off-by: Kawika Avilla --- test/functional/apps/dashboard/dashboard_state.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index 11196a1b69b..78f0cdb1618 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/test/functional/apps/dashboard/dashboard_state.js @@ -57,6 +57,7 @@ export default function ({ getService, getPageObjects }) { describe('dashboard state', function describeIndexTests() { before(async function () { await PageObjects.common.navigateToApp('discover'); + await PageObjects.timePicker.setHistoricalDataRange(); await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.common.navigateToApp('dashboard'); await PageObjects.dashboard.initTests(); From 500a83f3090c2a2d09135f0f8649466b28063061 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 16:08:20 +0000 Subject: [PATCH 10/12] fix test for filter Signed-off-by: Kawika Avilla --- test/functional/apps/dashboard/dashboard_filter_bar.js | 1 + test/functional/apps/dashboard/dashboard_filtering.js | 1 + 2 files changed, 2 insertions(+) diff --git a/test/functional/apps/dashboard/dashboard_filter_bar.js b/test/functional/apps/dashboard/dashboard_filter_bar.js index dde86c697e3..17e29fa5cf6 100644 --- a/test/functional/apps/dashboard/dashboard_filter_bar.js +++ b/test/functional/apps/dashboard/dashboard_filter_bar.js @@ -193,6 +193,7 @@ export default function ({ getService, getPageObjects }) { before(async () => { await filterBar.ensureFieldEditorModalIsClosed(); await PageObjects.common.navigateToApp('discover'); + await PageObjects.timePicker.setDefaultDataRange(); await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.common.navigateToApp('dashboard'); await PageObjects.dashboard.gotoDashboardLandingPage(); diff --git a/test/functional/apps/dashboard/dashboard_filtering.js b/test/functional/apps/dashboard/dashboard_filtering.js index 1040b87f616..6be4b4837da 100644 --- a/test/functional/apps/dashboard/dashboard_filtering.js +++ b/test/functional/apps/dashboard/dashboard_filtering.js @@ -80,6 +80,7 @@ export default function ({ getService, getPageObjects }) { describe('adding a filter that excludes all data', () => { before(async () => { await PageObjects.common.navigateToApp('discover'); + await PageObjects.timePicker.setDefaultDataRange(); await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.common.navigateToApp('dashboard'); await PageObjects.dashboard.gotoDashboardLandingPage(); From 5915f05ef2cd67740ab98b4ccdb02d6e892e072a Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 18:05:49 +0000 Subject: [PATCH 11/12] update scripted fields Signed-off-by: Kawika Avilla --- test/functional/apps/management/_scripted_fields.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/functional/apps/management/_scripted_fields.js b/test/functional/apps/management/_scripted_fields.js index 8a4659630ee..f3d89138eb7 100644 --- a/test/functional/apps/management/_scripted_fields.js +++ b/test/functional/apps/management/_scripted_fields.js @@ -161,9 +161,9 @@ export default function ({ getService, getPageObjects }) { const fromTime = 'Sep 17, 2015 @ 06:31:44.000'; const toTime = 'Sep 18, 2015 @ 18:31:44.000'; await PageObjects.common.navigateToApp('discover'); - await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.selectIndexPattern('logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); + await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.clickFieldListItem(scriptedPainlessFieldName); await retry.try(async function () { @@ -280,9 +280,9 @@ export default function ({ getService, getPageObjects }) { const fromTime = 'Sep 17, 2015 @ 06:31:44.000'; const toTime = 'Sep 18, 2015 @ 18:31:44.000'; await PageObjects.common.navigateToApp('discover'); - await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.selectIndexPattern('logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); + await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.clickFieldListItem(scriptedPainlessFieldName2); await retry.try(async function () { @@ -377,9 +377,9 @@ export default function ({ getService, getPageObjects }) { const fromTime = 'Sep 17, 2015 @ 06:31:44.000'; const toTime = 'Sep 18, 2015 @ 18:31:44.000'; await PageObjects.common.navigateToApp('discover'); - await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.selectIndexPattern('logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); + await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.clickFieldListItem(scriptedPainlessFieldName2); await retry.try(async function () { @@ -477,9 +477,9 @@ export default function ({ getService, getPageObjects }) { const fromTime = 'Sep 17, 2015 @ 19:22:00.000'; const toTime = 'Sep 18, 2015 @ 07:00:00.000'; await PageObjects.common.navigateToApp('discover'); - await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.selectIndexPattern('logstash-*'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); + await PageObjects.discover.switchDiscoverTable('new'); await PageObjects.discover.clickFieldListItem(scriptedPainlessFieldName2); await retry.try(async function () { From ee4381b7229ed181095a3dfc87cbd7201594b5a6 Mon Sep 17 00:00:00 2001 From: Kawika Avilla Date: Mon, 18 Mar 2024 19:58:41 +0000 Subject: [PATCH 12/12] move to top right Signed-off-by: Kawika Avilla --- .../application/view_components/canvas/discover_canvas.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss index 819e39b5b71..2c2c8dfe8eb 100644 --- a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss +++ b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss @@ -15,7 +15,7 @@ &_options { position: absolute; top: 0; - left: 0; + right: 0; } }