Skip to content

Commit

Permalink
[Multiple Datasource] Enhanced data source selector with default data…
Browse files Browse the repository at this point in the history
…source shows as first choice (opensearch-project#6293)

* edit datasource selector to show dafault datasource and return default to customer

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

* Update src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx

Co-authored-by: Lu Yu <[email protected]>
Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

* Apply suggestions from code review

Co-authored-by: Lu Yu <[email protected]>
Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

* fix syntax

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

---------

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>
Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>
Co-authored-by: Lu Yu <[email protected]>
  • Loading branch information
zhyuanqi and BionIT authored Apr 3, 2024
1 parent cb24346 commit 557fbcf
Show file tree
Hide file tree
Showing 12 changed files with 378 additions and 15 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
- [Multiple Datasource] Make sure customer always have a default datasource ([#6237](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6237))
- [Workspace] Add workspace list page ([#6182](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6182))
- [Workspace] Add workspaces column to saved objects page ([#6225](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6225))
- [Multiple Datasource] Enhanced data source selector with default datasource shows as first choice ([#6293](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6293))
- [Multiple Datasource] Add multi data source support to sample vega visualizations ([#6218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6218))
- [Multiple Datasource] Fetch data source title for DataSourceView when only id is provided ([#6315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6315)
- [Workspace] Add permission control logic ([#6052](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6052))
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import { SavedObjectsClientContract } from '../../../../../core/public';
import { notificationServiceMock } from '../../../../../core/public/mocks';
import React from 'react';
import { render } from '@testing-library/react';
import { coreMock } from '../../../../../core/public/mocks';

describe('create data source selector', () => {
let client: SavedObjectsClientContract;
const { uiSettings } = coreMock.createSetup();
const { toasts } = notificationServiceMock.createStartContract();

beforeEach(() => {
Expand All @@ -27,7 +29,7 @@ describe('create data source selector', () => {
hideLocalCluster: false,
fullWidth: false,
};
const TestComponent = createDataSourceSelector();
const TestComponent = createDataSourceSelector(uiSettings);
const component = render(<TestComponent {...props} />);
expect(component).toMatchSnapshot();
expect(client.find).toBeCalledWith({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
*/

import React from 'react';
import { IUiSettingsClient } from 'src/core/public';
import { DataSourceSelector, DataSourceSelectorProps } from './data_source_selector';

export function createDataSourceSelector() {
return (props: DataSourceSelectorProps) => <DataSourceSelector {...props} />;
export function createDataSourceSelector(uiSettings: IUiSettingsClient) {
return (props: DataSourceSelectorProps) => (
<DataSourceSelector {...props} uiSettings={uiSettings} />
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@ import { DataSourceSelector } from './data_source_selector';
import { SavedObjectsClientContract } from '../../../../../core/public';
import { notificationServiceMock } from '../../../../../core/public/mocks';
import React from 'react';
import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
import {
getDataSourcesWithFieldsResponse,
mockManagementPlugin,
mockResponseForSavedObjectsCalls,
} from '../../mocks';
import { AuthType } from 'src/plugins/data_source/common/data_sources';
import * as utils from '../utils';

describe('DataSourceSelector', () => {
let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
Expand Down Expand Up @@ -69,8 +74,11 @@ describe('DataSourceSelector: check dataSource options', () => {
let client: SavedObjectsClientContract;
const { toasts } = notificationServiceMock.createStartContract();
const nextTick = () => new Promise((res) => process.nextTick(res));
const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
const uiSettings = mockedContext.uiSettings;

beforeEach(async () => {
jest.clearAllMocks();
client = {
find: jest.fn().mockResolvedValue([]),
} as any;
Expand Down Expand Up @@ -168,6 +176,47 @@ describe('DataSourceSelector: check dataSource options', () => {
component.instance().componentDidMount!();
await nextTick();
expect(component).toMatchSnapshot();
expect(toasts.addWarning).toBeCalledTimes(0);
expect(toasts.addWarning).toHaveBeenCalled();
});

it('should get default datasource if uiSettings exists', async () => {
spyOn(uiSettings, 'get').and.returnValue('test1');
spyOn(utils, 'getFilteredDataSources').and.returnValue([]);
spyOn(utils, 'getDefaultDataSource').and.returnValue([]);
component = shallow(
<DataSourceSelector
savedObjectsClient={client}
notifications={toasts}
onSelectedDataSource={jest.fn()}
disabled={false}
hideLocalCluster={false}
fullWidth={false}
uiSettings={uiSettings}
/>
);

component.instance().componentDidMount!();
await nextTick();
expect(component).toMatchSnapshot();
expect(uiSettings.get).toBeCalledWith('defaultDataSource', null);
expect(utils.getFilteredDataSources).toHaveBeenCalled();
expect(utils.getDefaultDataSource).toHaveBeenCalled();
expect(toasts.addWarning).toHaveBeenCalled();
});

it('should not render options with default badge when id does not matches defaultDataSource', () => {
component = shallow(
<DataSourceSelector
savedObjectsClient={client}
notifications={toasts}
onSelectedDataSource={jest.fn()}
disabled={false}
hideLocalCluster={false}
fullWidth={false}
uiSettings={uiSettings}
/>
);
expect(component).toMatchSnapshot();
expect(component.find('EuiComboBox').exists()).toBe(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@

import React from 'react';
import { i18n } from '@osd/i18n';
import { EuiComboBox } from '@elastic/eui';
import { EuiComboBox, EuiBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { SavedObjectsClientContract, ToastsStart, SavedObject } from 'opensearch-dashboards/public';
import { getDataSourcesWithFields } from '../utils';
import { IUiSettingsClient } from 'src/core/public';
import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources } from '../utils';
import { DataSourceAttributes } from '../../types';

export const LocalCluster: DataSourceOption = {
Expand All @@ -29,11 +30,13 @@ export interface DataSourceSelectorProps {
removePrepend?: boolean;
dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
compressed?: boolean;
uiSettings?: IUiSettingsClient;
}

interface DataSourceSelectorState {
selectedOption: DataSourceOption[];
allDataSources: Array<SavedObject<DataSourceAttributes>>;
defaultDataSource: string | null;
}

export interface DataSourceOption {
Expand All @@ -53,6 +56,7 @@ export class DataSourceSelector extends React.Component<

this.state = {
allDataSources: [],
defaultDataSource: '',
selectedOption: this.props.defaultOption
? this.props.defaultOption
: this.props.hideLocalCluster
Expand All @@ -67,6 +71,13 @@ export class DataSourceSelector extends React.Component<

async componentDidMount() {
this._isMounted = true;

const currentDefaultDataSource = this.props.uiSettings?.get('defaultDataSource', null) ?? null;
this.setState({
...this.state,
defaultDataSource: currentDefaultDataSource,
});

getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
.then((fetchedDataSources) => {
if (fetchedDataSources?.length) {
Expand All @@ -76,6 +87,25 @@ export class DataSourceSelector extends React.Component<
allDataSources: fetchedDataSources,
});
}
const dataSources = getFilteredDataSources(
this.state.allDataSources,
this.props.dataSourceFilter
);
const selectedDataSource = getDefaultDataSource(
dataSources,
LocalCluster,
this.props.uiSettings,
this.props.hideLocalCluster,
this.props.defaultOption
);
if (selectedDataSource.length === 0) {
this.props.notifications.addWarning('No connected data source available.');
} else {
this.props.onSelectedDataSource(selectedDataSource);
this.setState({
selectedOption: selectedDataSource,
});
}
})
.catch(() => {
this.props.notifications.addWarning(
Expand All @@ -100,9 +130,11 @@ export class DataSourceSelector extends React.Component<
? 'Select a data source'
: this.props.placeholderText;

const dataSources = this.props.dataSourceFilter
? this.state.allDataSources.filter((ds) => this.props.dataSourceFilter!(ds))
: this.state.allDataSources;
// The filter condition can be changed, thus we filter again here to make sure each time we will get the filtered data sources before rendering
const dataSources = getFilteredDataSources(
this.state.allDataSources,
this.props.dataSourceFilter
);

const options = dataSources.map((ds) => ({ id: ds.id, label: ds.attributes?.title || '' }));
if (!this.props.hideLocalCluster) {
Expand Down Expand Up @@ -140,6 +172,16 @@ export class DataSourceSelector extends React.Component<
isDisabled={this.props.disabled}
fullWidth={this.props.fullWidth || false}
data-test-subj={'dataSourceSelectorComboBox'}
renderOption={(option) => (
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={1}>{option.label}</EuiFlexItem>
{option.id === this.state.defaultDataSource && (
<EuiFlexItem grow={false}>
<EuiBadge iconSide="left">Default</EuiBadge>
</EuiFlexItem>
)}
</EuiFlexGroup>
)}
/>
);
}
Expand Down
Loading

0 comments on commit 557fbcf

Please sign in to comment.