-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Dataset Quality] Replication of dataset flyout as an independent com…
…ponent (#189532) ## Summary Relates to - #184572 Figma Design - https://www.figma.com/design/8WVWLeVn8mvoUm0VGgbSbB/Data-set-quality-V2?node-id=3564-73485&t=KADTdNFiiOBJ7rOS-0 **NOTE: This PR is part of a multi series PRs. Hence expect it to not do everything.** ### What are we going to do? 1. The content of the flyout, henceforth will be known as Dataset Quality Details is being copied to a component with the same name. 2. This component can be initialised as page, like in Management app or used as an individual component in a flyout in Unified Doc Viewer for example. As scope of this PR, a page in Management app has been created which will load this detailed component. A new route will be created with breadcrumb. 3. This page will co-live with the Flyout for now, accessible only via direct URL. In subsequent PR, when we remove the Flyout completely, we will change the action in Dataset Quality to instead of opening a Flyout to navigating to this new page. ### What's in this PR ? 1. As part of this change, i have created a complete new State Machine, Controller for Dataset Quality Details component which is responsible for replicating the Flyout. 2. A dedicated route registered under `/details` where this component will live at the moment. Sample URL will look like this `http://localhost:5601/pfd/app/management/data/data_quality/details?pageState=(dataStream:logs-synth.1-default,v:1)` 3. The individual components which currently load inside the flyout may be duplicated for time being. 4. Validation when no data stream provided. 5. Breadcrumb for the Management page ### What's not in this PR 1. Tests needs to be migrated, they will be done as part of the Next PR 2. Telemetry for Flyout has been removed. It will be added as part of next PR. 3. Existing Flyout code has not be removed. That needs to be removed and the old state machine needs to be meticulously cleaned. 6. Swapping the Click to Open Flyout to Page needs to be done when the above 3 are ready. ## Screenshot ### Good scenario <img width="1482" alt="image" src="https://github.com/user-attachments/assets/4409eb57-89d5-477c-a946-1b7a45df074c"> ### When datastream does not exist <img width="1527" alt="image" src="https://github.com/user-attachments/assets/66d735aa-8f0f-4fb8-b57c-4d22cecad2c7"> ### When invalid state is provided by the page, it redirects to parent Dataset Quality Page  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
c026279
commit 2a33601
Showing
110 changed files
with
3,960 additions
and
477 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
x-pack/plugins/data_quality/common/url_schema/dataset_quality_detils_url_schema_v1.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import * as rt from 'io-ts'; | ||
| import { dataStreamRT, degradedFieldRT, timeRangeRT } from './common'; | ||
|
|
||
| export const urlSchemaRT = rt.exact( | ||
| rt.intersection([ | ||
| rt.type({ | ||
| dataStream: dataStreamRT, | ||
| }), | ||
| rt.partial({ | ||
| v: rt.literal(1), | ||
| timeRange: timeRangeRT, | ||
| breakdownField: rt.string, | ||
| degradedFields: degradedFieldRT, | ||
| }), | ||
| ]) | ||
| ); | ||
|
|
||
| export type UrlSchema = rt.TypeOf<typeof urlSchemaRT>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
x-pack/plugins/data_quality/public/routes/dataset_quality_details/context.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { IToasts } from '@kbn/core-notifications-browser'; | ||
| import { DatasetQualityPluginStart } from '@kbn/dataset-quality-plugin/public'; | ||
| import { DatasetQualityDetailsController } from '@kbn/dataset-quality-plugin/public/controller/dataset_quality_details'; | ||
| import { IKbnUrlStateStorage } from '@kbn/kibana-utils-plugin/public'; | ||
| import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser'; | ||
| import { useKibanaContextForPlugin } from '../../utils/use_kibana'; | ||
| import { getBreadcrumbValue, useBreadcrumbs } from '../../utils/use_breadcrumbs'; | ||
| import { | ||
| getDatasetQualityDetailsStateFromUrl, | ||
| updateUrlFromDatasetQualityDetailsState, | ||
| } from './url_state_storage_service'; | ||
| import { PLUGIN_ID, PLUGIN_NAME } from '../../../common'; | ||
|
|
||
| const DatasetQualityDetailsContext = createContext<{ | ||
| controller?: DatasetQualityDetailsController; | ||
| }>({}); | ||
|
|
||
| interface ContextProps { | ||
| children: JSX.Element; | ||
| urlStateStorageContainer: IKbnUrlStateStorage; | ||
| toastsService: IToasts; | ||
| datasetQuality: DatasetQualityPluginStart; | ||
| } | ||
|
|
||
| export function DatasetQualityDetailsContextProvider({ | ||
| children, | ||
| urlStateStorageContainer, | ||
| toastsService, | ||
| datasetQuality, | ||
| }: ContextProps) { | ||
| const [controller, setController] = useState<DatasetQualityDetailsController>(); | ||
| const history = useHistory(); | ||
| const { | ||
| services: { | ||
| chrome, | ||
| appParams, | ||
| application: { navigateToApp }, | ||
| }, | ||
| } = useKibanaContextForPlugin(); | ||
| const rootBreadCrumb = useMemo( | ||
| () => ({ | ||
| text: PLUGIN_NAME, | ||
| onClick: () => navigateToApp('management', { path: `/data/${PLUGIN_ID}` }), | ||
| }), | ||
| [navigateToApp] | ||
| ); | ||
| const [breadcrumbs, setBreadcrumbs] = useState<ChromeBreadcrumb[]>([rootBreadCrumb]); | ||
|
|
||
| useEffect(() => { | ||
| async function getDatasetQualityDetailsController() { | ||
| const initialState = getDatasetQualityDetailsStateFromUrl({ | ||
| urlStateStorageContainer, | ||
| toastsService, | ||
| }); | ||
|
|
||
| // state initialization is under progress | ||
| if (initialState === undefined) { | ||
| return; | ||
| } | ||
|
|
||
| // state initialized but empty | ||
| if (initialState === null) { | ||
| history.push('/'); | ||
| return; | ||
| } | ||
|
|
||
| const datasetQualityDetailsController = | ||
| await datasetQuality.createDatasetQualityDetailsController({ | ||
| initialState, | ||
| }); | ||
| datasetQualityDetailsController.service.start(); | ||
|
|
||
| setController(datasetQualityDetailsController); | ||
|
|
||
| const datasetQualityStateSubscription = datasetQualityDetailsController.state$.subscribe( | ||
| (state) => { | ||
| updateUrlFromDatasetQualityDetailsState({ | ||
| urlStateStorageContainer, | ||
| datasetQualityDetailsState: state, | ||
| }); | ||
| const breadcrumbValue = getBreadcrumbValue(state.dataStream, state.integration); | ||
| setBreadcrumbs([rootBreadCrumb, { text: breadcrumbValue }]); | ||
| } | ||
| ); | ||
|
|
||
| return () => { | ||
| datasetQualityDetailsController.service.stop(); | ||
| datasetQualityStateSubscription.unsubscribe(); | ||
| }; | ||
| } | ||
|
|
||
| getDatasetQualityDetailsController(); | ||
| }, [datasetQuality, history, rootBreadCrumb, toastsService, urlStateStorageContainer]); | ||
|
|
||
| useBreadcrumbs(breadcrumbs, appParams, chrome); | ||
|
|
||
| return ( | ||
| <DatasetQualityDetailsContext.Provider value={{ controller }}> | ||
| {children} | ||
| </DatasetQualityDetailsContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| export const useDatasetQualityDetailsContext = () => { | ||
| const context = useContext(DatasetQualityDetailsContext); | ||
| if (context === undefined) { | ||
| throw new Error( | ||
| 'useDatasetQualityDetailContext must be used within a <DatasetQualityDetailsContextProvider />' | ||
| ); | ||
| } | ||
| return context; | ||
| }; |
65 changes: 65 additions & 0 deletions
65
x-pack/plugins/data_quality/public/routes/dataset_quality_details/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui'; | ||
| import type { DatasetQualityDetailsController } from '@kbn/dataset-quality-plugin/public/controller/dataset_quality_details'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
| import { useKbnUrlStateStorageFromRouterContext } from '../../utils/kbn_url_state_context'; | ||
| import { useKibanaContextForPlugin } from '../../utils/use_kibana'; | ||
| import { DatasetQualityDetailsContextProvider, useDatasetQualityDetailsContext } from './context'; | ||
|
|
||
| export const DatasetQualityDetailsRoute = () => { | ||
| const urlStateStorageContainer = useKbnUrlStateStorageFromRouterContext(); | ||
| const { | ||
| services: { datasetQuality, notifications }, | ||
| } = useKibanaContextForPlugin(); | ||
|
|
||
| return ( | ||
| <DatasetQualityDetailsContextProvider | ||
| datasetQuality={datasetQuality} | ||
| urlStateStorageContainer={urlStateStorageContainer} | ||
| toastsService={notifications.toasts} | ||
| > | ||
| <ConnectedContent /> | ||
| </DatasetQualityDetailsContextProvider> | ||
| ); | ||
| }; | ||
|
|
||
| const ConnectedContent = React.memo(() => { | ||
| const { controller } = useDatasetQualityDetailsContext(); | ||
|
|
||
| return controller ? ( | ||
| <InitializedContent datasetQualityDetailsController={controller} /> | ||
| ) : ( | ||
| <> | ||
| <EuiEmptyPrompt | ||
| icon={<EuiLoadingLogo logo="logoKibana" size="xl" />} | ||
| title={ | ||
| <FormattedMessage | ||
| id="xpack.dataQuality.details.Initializing" | ||
| defaultMessage="Initializing Data set quality details page" | ||
| /> | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
| }); | ||
|
|
||
| const InitializedContent = React.memo( | ||
| ({ | ||
| datasetQualityDetailsController, | ||
| }: { | ||
| datasetQualityDetailsController: DatasetQualityDetailsController; | ||
| }) => { | ||
| const { | ||
| services: { datasetQuality }, | ||
| } = useKibanaContextForPlugin(); | ||
|
|
||
| return <datasetQuality.DatasetQualityDetails controller={datasetQualityDetailsController} />; | ||
| } | ||
| ); |
Oops, something went wrong.