Skip to content

Commit

Permalink
Add data source step into IndexPattern with Mock switch (#2064)
Browse files Browse the repository at this point in the history
Signed-off-by: Kristen Tian <[email protected]>
  • Loading branch information
kristenTian committed Aug 8, 2022
1 parent fec5e3d commit 6192e23
Show file tree
Hide file tree
Showing 12 changed files with 339 additions and 25 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"]
}
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 @@ -47,14 +47,25 @@ import { LoadingState } from './components/loading_state';

import { context as contextType } from '../../../../opensearch_dashboards_react/public';
import { getCreateBreadcrumbs } from '../breadcrumbs';
import { ensureMinimumTime, getIndices } from './lib';
import {
DATA_SOURCE_STEP,
ensureMinimumTime,
getIndices,
getInitialStepName,
getNextStep,
getPrevStep,
INDEX_PATTERN_STEP,
StepType,
TIME_FIELD_STEP,
} from './lib';
import { IndexPatternCreationConfig } from '../..';
import { IndexPatternManagmentContextValue } from '../../types';
import { DataSourceRef, IndexPatternManagmentContextValue } from '../../types';
import { MatchedItem } from './types';
import { DuplicateIndexPatternError, IndexPattern } from '../../../../data/public';
import { StepDataSource } from './components/step_data_source';

interface CreateIndexPatternWizardState {
step: number;
step: StepType;
indexPattern: string;
allIndices: MatchedItem[];
remoteClustersExist: boolean;
Expand All @@ -63,6 +74,7 @@ interface CreateIndexPatternWizardState {
indexPatternCreationType: IndexPatternCreationConfig;
selectedTimeField?: string;
docLinks: DocLinksStart;
dataSourceRef?: DataSourceRef;
}

export class CreateIndexPatternWizard extends Component<
Expand All @@ -73,15 +85,19 @@ export class CreateIndexPatternWizard extends Component<

public readonly context!: IndexPatternManagmentContextValue;

dataSourceEnabled: boolean;

constructor(props: RouteComponentProps, context: IndexPatternManagmentContextValue) {
super(props, context);

context.services.setBreadcrumbs(getCreateBreadcrumbs());

const type = new URLSearchParams(props.location.search).get('type') || undefined;

this.dataSourceEnabled = context.services.dataSourceEnabled;

this.state = {
step: 1,
step: getInitialStepName(this.dataSourceEnabled),
indexPattern: '',
allIndices: [],
remoteClustersExist: false,
Expand Down Expand Up @@ -209,12 +225,26 @@ export class CreateIndexPatternWizard extends Component<
history.push(`/patterns/${emptyPattern.id}`);
};

goToTimeFieldStep = (indexPattern: string, selectedTimeField?: string) => {
this.setState({ step: 2, indexPattern, selectedTimeField });
goToNextFromIndexPattern = (indexPattern: string, selectedTimeField?: string) => {
this.setState({ indexPattern, selectedTimeField });
this.goToNextStep();
};

goToNextFromDataSource = (dataSourceRef: DataSourceRef) => {
this.setState({ dataSourceRef });
this.goToNextStep();
};

goToIndexPatternStep = () => {
this.setState({ step: 1 });
goToNextStep = () => {
this.setState((prevState) => ({
step: getNextStep(prevState.step, this.dataSourceEnabled)!,
}));
};

goToPreviousStep = () => {
this.setState((prevState) => ({
step: getPrevStep(prevState.step, this.dataSourceEnabled)!,
}));
};

renderHeader() {
Expand All @@ -238,7 +268,17 @@ export class CreateIndexPatternWizard extends Component<

const header = this.renderHeader();

if (step === 1) {
if (step === DATA_SOURCE_STEP) {
return (
<EuiPageContent>
{header}
<EuiHorizontalRule />
<StepDataSource goToNextStep={this.goToNextFromDataSource} />
</EuiPageContent>
);
}

if (step === INDEX_PATTERN_STEP) {
const { location } = this.props;
const initialQuery = new URLSearchParams(location.search).get('id') || undefined;

Expand All @@ -250,23 +290,25 @@ export class CreateIndexPatternWizard extends Component<
allIndices={allIndices}
initialQuery={indexPattern || initialQuery}
indexPatternCreationType={this.state.indexPatternCreationType}
goToNextStep={this.goToTimeFieldStep}
goToPreviousStep={this.goToPreviousStep}
goToNextStep={this.goToNextFromIndexPattern}
showSystemIndices={
this.state.indexPatternCreationType.getShowSystemIndices() && this.state.step === 1
this.state.indexPatternCreationType.getShowSystemIndices() &&
this.state.step === INDEX_PATTERN_STEP
}
/>
</EuiPageContent>
);
}

if (step === 2) {
if (step === TIME_FIELD_STEP) {
return (
<EuiPageContent>
{header}
<EuiHorizontalRule />
<StepTimeField
indexPattern={indexPattern}
goToPreviousStep={this.goToIndexPatternStep}
goToPreviousStep={this.goToPreviousStep}
createIndexPattern={this.createIndexPattern}
indexPatternCreationType={this.state.indexPatternCreationType}
selectedTimeField={this.state.selectedTimeField}
Expand Down
Loading

0 comments on commit 6192e23

Please sign in to comment.