From ed98e4ab820ebe7fd436548a4e0793757a4cbb30 Mon Sep 17 00:00:00 2001 From: Ramakrishna Chilaka <49393831+RamakrishnaChilaka@users.noreply.github.com> Date: Fri, 12 Apr 2024 13:43:48 +0530 Subject: [PATCH] Interface change for MDS and deprecating dataSourceLabel from the URL (#1031) Signed-off-by: Ramakrishna Chilaka --- .../MDSEnabledComponent.tsx | 12 +- public/pages/Aliases/utils/constants.tsx | 1 - .../ComposableTemplates/utils/constants.tsx | 1 - public/pages/DataStreams/utils/constants.tsx | 1 - .../containers/Indices/Indices.test.tsx | 3 - .../Indices/containers/Indices/Indices.tsx | 1 - public/pages/Main/Main.tsx | 981 +++++++++--------- .../ManagedIndices/ManagedIndices.tsx | 5 +- .../Policies/containers/Policies/Policies.tsx | 2 +- .../Rollups/containers/Rollups/Rollups.tsx | 4 +- public/pages/Templates/utils/constants.tsx | 1 - .../containers/Transforms/Transforms.tsx | 5 +- public/services/DataSourceMenuContext.ts | 2 - 13 files changed, 498 insertions(+), 521 deletions(-) diff --git a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx index 340fe1120..701753729 100644 --- a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx +++ b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx @@ -11,7 +11,6 @@ export default class MDSEnabledComponent< super(props); this.state = { dataSourceId: props.dataSourceId, - dataSourceLabel: props.dataSourceLabel, multiDataSourceEnabled: props.multiDataSourceEnabled, } as State; } @@ -21,13 +20,9 @@ export default class MDSEnabledComponent< prevState: State ) { // static members cannot reference class type parameters - if ( - nextProps.multiDataSourceEnabled && - (nextProps.dataSourceId !== prevState.dataSourceId || nextProps.dataSourceLabel !== prevState.dataSourceLabel) - ) { + if (nextProps.multiDataSourceEnabled && nextProps.dataSourceId !== prevState.dataSourceId) { return { dataSourceId: nextProps.dataSourceId, - dataSourceLabel: nextProps.dataSourceLabel, }; } return null; @@ -36,7 +31,7 @@ export default class MDSEnabledComponent< export function useUpdateUrlWithDataSourceProperties() { const dataSourceMenuProps = useContext(DataSourceMenuContext); - const { dataSourceId, dataSourceLabel, multiDataSourceEnabled } = dataSourceMenuProps; + const { dataSourceId, multiDataSourceEnabled } = dataSourceMenuProps; const history = useHistory(); const currentSearch = history.location.search; const currentQuery = queryString.parse(currentSearch); @@ -46,9 +41,8 @@ export function useUpdateUrlWithDataSourceProperties() { search: queryString.stringify({ ...currentQuery, dataSourceId, - dataSourceLabel, }), }); } - }, [dataSourceId, dataSourceLabel, multiDataSourceEnabled]); + }, [dataSourceId, multiDataSourceEnabled]); } diff --git a/public/pages/Aliases/utils/constants.tsx b/public/pages/Aliases/utils/constants.tsx index 643e1074e..ebed1fb94 100644 --- a/public/pages/Aliases/utils/constants.tsx +++ b/public/pages/Aliases/utils/constants.tsx @@ -15,5 +15,4 @@ export const DEFAULT_QUERY_PARAMS = { sortDirection: SortDirection.DESC, status: "", dataSourceId: "", - dataSourceLabel: "", }; diff --git a/public/pages/ComposableTemplates/utils/constants.tsx b/public/pages/ComposableTemplates/utils/constants.tsx index 00adea8a5..6203656e5 100644 --- a/public/pages/ComposableTemplates/utils/constants.tsx +++ b/public/pages/ComposableTemplates/utils/constants.tsx @@ -14,5 +14,4 @@ export const DEFAULT_QUERY_PARAMS = { sortField: "name" as keyof ICatComposableTemplate, sortDirection: SortDirection.DESC, dataSourceId: "", - dataSourceLabel: "", }; diff --git a/public/pages/DataStreams/utils/constants.tsx b/public/pages/DataStreams/utils/constants.tsx index bd4c3cfb5..79e195db5 100644 --- a/public/pages/DataStreams/utils/constants.tsx +++ b/public/pages/DataStreams/utils/constants.tsx @@ -14,7 +14,6 @@ export const DEFAULT_QUERY_PARAMS = { sortField: "name" as keyof DataStream, sortDirection: SortDirection.DESC, dataSourceId: "", - dataSourceLabel: "", }; export const HEALTH_TO_COLOR: { diff --git a/public/pages/Indices/containers/Indices/Indices.test.tsx b/public/pages/Indices/containers/Indices/Indices.test.tsx index 4224efc51..6610525c9 100644 --- a/public/pages/Indices/containers/Indices/Indices.test.tsx +++ b/public/pages/Indices/containers/Indices/Indices.test.tsx @@ -23,7 +23,6 @@ function renderWithRouter( Component: React.ComponentType, data: DataSourceMenuProperties = { dataSourceId: "", - dataSourceLabel: "", multiDataSourceEnabled: false, }, renderFn = render @@ -264,7 +263,6 @@ describe("re-render on data-source-id prop change", () => { const { getByText, queryByText, rerender } = renderWithRouter(Indices, { dataSourceId: "test_data_source_id", - dataSourceLabel: "test_data_source_label", multiDataSourceEnabled: true, }); @@ -276,7 +274,6 @@ describe("re-render on data-source-id prop change", () => { Indices, { dataSourceId: "test_data_source_id_2", - dataSourceLabel: "test_data_source_label_2", multiDataSourceEnabled: true, }, rerender diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx index c8dc06fab..235bbddb2 100644 --- a/public/pages/Indices/containers/Indices/Indices.tsx +++ b/public/pages/Indices/containers/Indices/Indices.tsx @@ -133,7 +133,6 @@ export class Indices extends MDSEnabledComponent { const queryObject = this.getQueryObjectFromState(this.state); const queryParamsString = queryString.stringify({ ...queryObject, - ...(this.state.multiDataSourceEnabled ? { dataSourceLabel: this.state.dataSourceLabel } : {}), }); history.replace({ ...this.props.location, search: queryParamsString }); diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx index 1edf71040..0405d03fc 100644 --- a/public/pages/Main/Main.tsx +++ b/public/pages/Main/Main.tsx @@ -60,7 +60,13 @@ import ComposableTemplates from "../ComposableTemplates"; import CreateComposableTemplate from "../CreateComposableTemplate"; import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext"; import queryString from "query-string"; -import { DataSourceManagementPluginSetup } from "../../../../../src/plugins/data_source_management/public"; +import { + DataSourceManagementPluginSetup, + DataSourceSelectableConfig, + DataSourceViewConfig, +} from "../../../../../src/plugins/data_source_management/public"; +import { DataSourceOption } from "../../../../../src/plugins/data_source_management/public/components/data_source_menu/types"; +import { ImageType } from "../../../../../src/core/common"; enum Navigation { IndexManagement = "Index Management", @@ -131,8 +137,10 @@ interface MainProps extends RouteComponentProps { dataSourceManagement: DataSourceManagementPluginSetup; } -interface MainState extends Pick { +interface MainState extends Pick { + dataSourceLabel: string; dataSourceReadOnly: boolean; + dataSourceLoading: boolean; } const dataSourceEnabledPaths: string[] = [ @@ -188,6 +196,7 @@ export default class Main extends Component { dataSourceId: dataSourceId, dataSourceLabel: dataSourceLabel, dataSourceReadOnly: false, + dataSourceLoading: props.multiDataSourceEnabled, }; } @@ -234,6 +243,21 @@ export default class Main extends Component { return services; } + onSelectedDataSources = (dataSources: DataSourceOption[]) => { + const { id = "", label = "" } = dataSources[0] || {}; + if (this.state.dataSourceId != id || this.state.dataSourceLabel != label) { + this.setState({ + dataSourceId: id, + dataSourceLabel: label, + }); + } + if (this.state.dataSourceLoading) { + this.setState({ + dataSourceLoading: false, + }); + } + }; + render() { const { location: { pathname }, @@ -338,7 +362,9 @@ export default class Main extends Component { const { landingPage } = this.props; const ROUTE_STYLE = { padding: "25px 25px" }; - const DataSourceMenu = this.props.dataSourceManagement?.ui?.DataSourceMenu; + + const DataSourceMenu = this.props.dataSourceManagement?.ui?.getDataSourceMenu(); + const DataSourceViewer = this.props.dataSourceManagement?.ui?.getDataSourceMenu(); return ( @@ -352,11 +378,10 @@ export default class Main extends Component { - {this.props.multiDataSourceEnabled && ( + {this.props.multiDataSourceEnabled && DataSourceMenu && DataSourceViewer && ( { ROUTES.TRANSFORM_DETAILS, ROUTES.EDIT_TRANSFORM, ]} - render={(props) => ( - ( + { - if (this.state.dataSourceId && this.state.dataSourceId !== "") { - return [ - { - id: this.state.dataSourceId, - label: this.state.dataSourceLabel, - }, - ]; - } - return undefined; - })()} - fullWidth={false} - hideLocalCluster={false} + componentType={"DataSourceView"} + componentConfig={{ + activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }], + fullWidth: false, + }} /> )} /> @@ -416,485 +431,469 @@ export default class Main extends Component { ]} render={() => ( { - this.setState({ dataSourceId, dataSourceLabel }); + componentType={"DataSourceSelectable"} + componentConfig={{ + savedObjects: core?.savedObjects.client, + notifications: core?.notifications, + fullWidth: false, + activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }], + onSelectedDataSources: this.onSelectedDataSources, }} - disableDataSourceSelectable={false} - notifications={services.notificationService} - savedObjects={core.savedObjects.client} - selectedOption={(() => { - if (this.state.dataSourceId && this.state.dataSourceId !== "") { - return [ - { - id: this.state.dataSourceId, - label: this.state.dataSourceLabel, - }, - ]; - } - return undefined; - })()} - fullWidth={false} - hideLocalCluster={false} /> )} /> ( - { - this.setState({ dataSourceId, dataSourceLabel }); - } - } - notifications={this.state.dataSourceReadOnly ? undefined : services.notificationService} - savedObjects={this.state.dataSourceReadOnly ? undefined : core.savedObjects.client} - selectedOption={(() => { - if (this.state.dataSourceId && this.state.dataSourceId !== "") { - return [ - { - id: this.state.dataSourceId, - label: this.state.dataSourceLabel, - }, - ]; - } - return undefined; - })()} - fullWidth={false} - hideLocalCluster={false} - /> - )} + render={() => + this.state.dataSourceReadOnly ? ( + + ) : ( + + ) + } /> )} - - - {/* Hide side navigation bar when creating or editing rollup job*/} - {!HIDDEN_NAV_ROUTES.includes(pathname) && - !HIDDEN_NAV_STARTS_WITH_ROUTE.some((item) => pathname.startsWith(item)) ? ( - - - - ) : null} - - - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - - queryString.parse(this.props.location.search).type == "visual" ? ( - - ) : ( - - ) - } - /> - - queryString.parse(this.props.location.search).type == "visual" ? ( - - ) : ( - - ) - } - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - ( -
- -
- )} - /> - - - - + {!this.state.dataSourceLoading && ( + <> + + + {/* Hide side navigation bar when creating or editing rollup job*/} + {!HIDDEN_NAV_ROUTES.includes(pathname) && + !HIDDEN_NAV_STARTS_WITH_ROUTE.some((item) => pathname.startsWith(item)) ? ( + + + + ) : null} + + + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + + queryString.parse(this.props.location.search).type == "visual" ? ( + + ) : ( + + ) + } + /> + + queryString.parse(this.props.location.search).type == "visual" ? ( + + ) : ( + + ) + } + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + ( +
+ +
+ )} + /> + + + + + + )} ) diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx index 233d19b7e..c56eb059f 100644 --- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx +++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx @@ -247,10 +247,7 @@ export class ManagedIndices extends MDSEnabledComponent try { const { policyService, history } = this.props; const queryObject = Policies.getQueryObjectFromState(this.state); - const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel }); + const queryParamsString = queryString.stringify(queryObject); history.replace({ ...this.props.location, search: queryParamsString }); const getPoliciesResponse = await policyService.getPolicies(queryObject); if (getPoliciesResponse.ok) { diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx index 4c06703e7..b3a4c39a8 100644 --- a/public/pages/Rollups/containers/Rollups/Rollups.tsx +++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx @@ -122,9 +122,9 @@ export class Rollups extends MDSEnabledComponent { try { const { rollupService, history } = this.props; const queryObject = Rollups.getQueryObjectFromState(this.state); - const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel }); + const queryParamsString = queryString.stringify(queryObject); history.replace({ ...this.props.location, search: queryParamsString }); - const rollupJobsResponse = await rollupService.getRollups(queryObject); // Add type assertion + const rollupJobsResponse = await rollupService.getRollups(queryObject); if (rollupJobsResponse.ok) { const { rollups, totalRollups, metadata } = rollupJobsResponse.response; this.setState({ rollups, totalRollups, rollupExplain: metadata }); diff --git a/public/pages/Templates/utils/constants.tsx b/public/pages/Templates/utils/constants.tsx index 21230015d..3ff2466eb 100644 --- a/public/pages/Templates/utils/constants.tsx +++ b/public/pages/Templates/utils/constants.tsx @@ -14,5 +14,4 @@ export const DEFAULT_QUERY_PARAMS = { sortField: "name" as keyof ITemplate, sortDirection: SortDirection.DESC, dataSourceId: "", - dataSourceLabel: "", }; diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx index 0ec8986af..4e52c4ae4 100644 --- a/public/pages/Transforms/containers/Transforms/Transforms.tsx +++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx @@ -342,10 +342,7 @@ export class Transforms extends MDSEnabledComponent({ dataSourceId: "", - dataSourceLabel: "", multiDataSourceEnabled: false, });