Skip to content

Commit

Permalink
Add data source step into IndexPattern with Mock switch (opensearch-p…
Browse files Browse the repository at this point in the history
  • Loading branch information
kristenTian committed Sep 15, 2022
1 parent 420c118 commit 03fa1c5
Show file tree
Hide file tree
Showing 14 changed files with 347 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
"server": true,
"ui": true,
"requiredPlugins": ["management", "data", "urlForwarding"],
"requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils"]
"requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils", "savedObjects"]
}

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
@@ -0,0 +1,96 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';

import { EuiTitle, EuiSpacer, EuiText, EuiFlexItem, EuiFormRow, EuiButton } from '@elastic/eui';

import { FormattedMessage } from '@osd/i18n/react';
import { i18n } from '@osd/i18n';
import {
DataSourceRef,
IndexPatternManagmentContext,
} from 'src/plugins/index_pattern_management/public/types';
import { SavedObjectFinderUi } from '../../../../../../../../../plugins/saved_objects/public';
import { useOpenSearchDashboards } from '../../../../../../../../../plugins/opensearch_dashboards_react/public';

interface HeaderProps {
onSearchSelected: (id: string, type: string) => void;
dataSourceRef: DataSourceRef;
goToNextStep: (dataSourceRef: DataSourceRef) => void;
isNextStepDisabled: boolean;
}

const DATA_SOURCE_PAGE_SIZE = 5;

export const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
const { dataSourceRef, onSearchSelected, goToNextStep, isNextStepDisabled } = props;

const { savedObjects, uiSettings } = useOpenSearchDashboards<
IndexPatternManagmentContext
>().services;

return (
<div>
<EuiTitle size="s">
<h2>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSourceHeader"
defaultMessage="Step 0 of 2: Configure data source" // todo: make dynamic: Next PR
/>
</h2>
</EuiTitle>
<EuiSpacer size="m" />
<EuiText>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepDataSourceLabel"
defaultMessage="Please pick the data source -- within which to configure index patterns."
/>
</EuiText>
<EuiFlexItem grow={false}>
<SavedObjectFinderUi
key="searchSavedObjectFinder"
onChoose={onSearchSelected}
showFilter={false}
noItemsMessage={i18n.translate(
'indexPatternManagement.createIndexPattern.searchSelection.notFoundLabel',
{
defaultMessage: 'No data sources have been configured yet.',
}
)}
savedObjectMetaData={[
{
type: 'data-source',
getIconForSavedObject: () => 'apps', // todo: #2034
name: i18n.translate(
'indexPatternManagement.createIndexPattern.searchSelection.savedObjectType.dataSource',
{
defaultMessage: 'Data Source',
}
),
},
]}
fixedPageSize={DATA_SOURCE_PAGE_SIZE}
uiSettings={uiSettings}
savedObjects={savedObjects}
/>
<EuiFormRow hasEmptyLabelSpace>
<EuiButton
fill
iconSide="right"
iconType="arrowRight"
onClick={() => goToNextStep(dataSourceRef)}
isDisabled={isNextStepDisabled}
>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.step.nextStepButton"
defaultMessage="Next step"
/>
</EuiButton>
</EuiFormRow>
</EuiFlexItem>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export { Header } from './header';
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

export { StepDataSource } from './step_data_source';
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiPageContent } from '@elastic/eui';
import React, { useState } from 'react';
import { DataSourceRef } from 'src/plugins/index_pattern_management/public/types';

import { Header } from './components/header';

interface StepDataSourceProps {
goToNextStep: (dataSourceRef: DataSourceRef) => void;
}

export const StepDataSource = (props: StepDataSourceProps) => {
const { goToNextStep } = props;

const [selectedDataSource, setSelectedDataSource] = useState<DataSourceRef>();
const [isNextStepDisabled, setIsNextStepDisabled] = useState(true);

const onSearchSelected = (id: string, selectedType: string) => {
const selected = { id, type: selectedType };

setSelectedDataSource(selected);
setIsNextStepDisabled(false);
};

const renderContent = () => {
return (
<EuiPageContent>
<Header
onSearchSelected={onSearchSelected}
dataSourceRef={selectedDataSource!}
goToNextStep={() => goToNextStep(selectedDataSource!)}
isNextStepDisabled={isNextStepDisabled}
/>
</EuiPageContent>
);
};

return <>{renderContent()}</>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,14 @@
*/

import React, { Component } from 'react';
import { EuiSpacer, EuiCallOut, EuiSwitchEvent } from '@elastic/eui';
import {
EuiSpacer,
EuiCallOut,
EuiSwitchEvent,
EuiFlexGroup,
EuiFlexItem,
EuiButtonEmpty,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import { FormattedMessage } from '@osd/i18n/react';
import { indexPatterns, IndexPatternAttributes, UI_SETTINGS } from '../../../../../../data/public';
Expand All @@ -52,6 +59,7 @@ import { IndexPatternManagmentContextValue } from '../../../../types';
interface StepIndexPatternProps {
allIndices: MatchedItem[];
indexPatternCreationType: IndexPatternCreationConfig;
goToPreviousStep: () => void;
goToNextStep: (query: string, timestampField?: string) => void;
initialQuery?: string;
showSystemIndices: boolean;
Expand Down Expand Up @@ -116,13 +124,16 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex

ILLEGAL_CHARACTERS = [...indexPatterns.ILLEGAL_CHARACTERS];

dataSrouceEnabled: boolean;

constructor(props: StepIndexPatternProps, context: IndexPatternManagmentContextValue) {
super(props, context);
const { indexPatternCreationType, initialQuery } = this.props;

this.state.query =
initialQuery || context.services.uiSettings.get(UI_SETTINGS.INDEXPATTERN_PLACEHOLDER);
this.state.indexPatternName = indexPatternCreationType.getIndexPatternName();
this.dataSrouceEnabled = context.services.dataSourceEnabled;
}

lastQuery = '';
Expand Down Expand Up @@ -232,6 +243,23 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
);
}

renderGoToPrevious() {
const { goToPreviousStep } = this.props;

return (
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="arrowLeft" onClick={goToPreviousStep}>
<FormattedMessage
id="indexPatternManagement.createIndexPattern.stepIndexPattern.backButton"
defaultMessage="Back"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
);
}

renderStatusMessage(matchedIndices: {
allIndices: MatchedItem[];
exactMatchedIndices: MatchedItem[];
Expand Down Expand Up @@ -383,6 +411,7 @@ export class StepIndexPattern extends Component<StepIndexPatternProps, StepIndex
{this.renderStatusMessage(matchedIndices)}
<EuiSpacer />
{this.renderList(matchedIndices)}
{this.dataSrouceEnabled && this.renderGoToPrevious()}
</>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { IndexPattern } from '../../../../../plugins/data/public';
import { mockManagementPlugin } from '../../mocks';
import { IndexPatternCreationConfig } from '../../';
import { createComponentWithContext } from '../test_utils';
import { TIME_FIELD_STEP } from './lib';

jest.mock('./components/step_index_pattern', () => ({ StepIndexPattern: 'StepIndexPattern' }));
jest.mock('./components/step_time_field', () => ({ StepTimeField: 'StepTimeField' }));
Expand Down Expand Up @@ -136,7 +137,7 @@ describe('CreateIndexPatternWizard', () => {
expect(component).toMatchSnapshot();
});

test('renders time field step when step is set to 2', async () => {
test('renders time field step when step is set to TIME_FIELD_STEP', async () => {
const component = createComponentWithContext(
CreateIndexPatternWizard,
{ ...routeComponentPropsMock },
Expand All @@ -146,7 +147,7 @@ describe('CreateIndexPatternWizard', () => {
component.setState({
isInitiallyLoadingIndices: false,
allIndices: [{ name: 'myIndexPattern' }],
step: 2,
step: TIME_FIELD_STEP,
});

await component.update();
Expand Down
Loading

0 comments on commit 03fa1c5

Please sign in to comment.