From e43170fdc29b914850ff934024be8d81d2afa027 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Sun, 2 Jul 2023 07:34:36 -0700 Subject: [PATCH] [Dashboard De-Angular] Enable URL title param for initial filter on dashboard listing (#4480) * Fix dashboard listing functional test Can filter dashboards using URL title param Signed-off-by: abbyhu2000 * Fix the functional tests Signed-off-by: abbyhu2000 --------- Signed-off-by: abbyhu2000 --- .../components/dashboard_listing.tsx | 50 +++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing.tsx b/src/plugins/dashboard/public/application/components/dashboard_listing.tsx index 81cc8624ab4b..53593c61a52c 100644 --- a/src/plugins/dashboard/public/application/components/dashboard_listing.tsx +++ b/src/plugins/dashboard/public/application/components/dashboard_listing.tsx @@ -3,15 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { i18n } from '@osd/i18n'; import { useMount } from 'react-use'; +import { useLocation } from 'react-router-dom'; import { useOpenSearchDashboards, TableListView, } from '../../../../opensearch_dashboards_react/public'; import { CreateButton } from '../listing/create_button'; -import { DashboardConstants } from '../../dashboard_constants'; +import { DashboardConstants, createDashboardEditUrl } from '../../dashboard_constants'; import { DashboardServices } from '../../types'; import { getTableColumns } from '../utils/get_table_columns'; import { getNoItemsMessage } from '../utils/get_no_items_message'; @@ -34,6 +35,49 @@ export const DashboardListing = () => { }, } = useOpenSearchDashboards(); + const location = useLocation(); + const queryParameters = new URLSearchParams(location.search); + const initialFiltersFromURL = queryParameters.get('filter'); + const [initialFilter, setInitialFilter] = useState(initialFiltersFromURL); + + useEffect(() => { + const getDashboardsBasedOnUrl = async () => { + const title = queryParameters.get('title'); + + try { + if (title) { + const results = await savedObjectsClient.find({ + search: `"${title}"`, + searchFields: ['title'], + type: 'dashboard', + }); + + const matchingDashboards = results.savedObjects.filter( + (dashboard) => dashboard.attributes.title.toLowerCase() === title.toLowerCase() + ); + + if (matchingDashboards.length === 1) { + history.replace(createDashboardEditUrl(matchingDashboards[0].id)); + } else { + history.replace(`${DashboardConstants.LANDING_PAGE_PATH}?filter="${title}"`); + setInitialFilter(title); + // Reload here is needed since we are using a URL param to render the table + // Previously, they called $route.reload() on angular routing + history.go(0); + } + return new Promise(() => {}); + } + } catch (e) { + notifications.toasts.addWarning( + i18n.translate('dashboard.listing. savedObjectWarning', { + defaultMessage: 'Unable to filter by title', + }) + ); + } + }; + getDashboardsBasedOnUrl(); + }, [savedObjectsClient, history, notifications.toasts, queryParameters]); + const hideWriteControls = dashboardConfig.getHideWriteControls(); const tableColumns = useMemo(() => getTableColumns(application, history, uiSettings), [ @@ -143,7 +187,7 @@ export const DashboardListing = () => { editItem={hideWriteControls ? undefined : editItem} tableColumns={tableColumns} listingLimit={listingLimit} - initialFilter={''} + initialFilter={initialFilter ?? ''} initialPageSize={initialPageSize} noItemsFragment={noItemsFragment} entityName={i18n.translate('dashboard.listing.table.entityName', {