Skip to content

Commit

Permalink
[Logs UI] Add setup screen for the categorization tab (#51905)
Browse files Browse the repository at this point in the history
This adds the setup screen for the log entry categorization.

closes #50320 
closes #50414
  • Loading branch information
weltenwort authored Dec 18, 2019
1 parent 862265a commit 8863fc2
Show file tree
Hide file tree
Showing 41 changed files with 852 additions and 324 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import * as rt from 'io-ts';

export const bucketSpan = 900000;

export const categoriesMessageField = 'message';

export const partitionField = 'event.dataset';

export const getJobIdPrefix = (spaceId: string, sourceId: string) =>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export * from './setup_page';

export * from './initial_configuration_step';
export * from './process_step';

export * from './ml_unavailable_prompt';
export * from './setup_status_unknown_prompt';
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ import { EuiCode, EuiDescribedFormGroup, EuiFormRow, EuiCheckbox, EuiToolTip } f
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useCallback, useMemo } from 'react';
import {
ValidatedIndex,
ValidationIndicesUIError,
} from '../../../../../containers/logs/log_analysis/log_analysis_setup_state';
import { LoadingOverlayWrapper } from '../../../../../components/loading_overlay_wrapper';

import { LoadingOverlayWrapper } from '../../../loading_overlay_wrapper';
import { ValidatedIndex, ValidationIndicesUIError } from './validation';

export const AnalysisSetupIndicesForm: React.FunctionComponent<{
indices: ValidatedIndex[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
import moment, { Moment } from 'moment';
import React, { useMemo } from 'react';

import { euiStyled } from '../../../../../../../../common/eui_styled_components';
import { euiStyled } from '../../../../../../../common/eui_styled_components';

const startTimeLabel = i18n.translate('xpack.infra.analysisSetup.startTimeLabel', {
defaultMessage: 'Start time',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
*/

export * from './initial_configuration_step';
export * from './validation';
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@
*/

import { EuiSpacer, EuiForm, EuiCallOut } from '@elastic/eui';
import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import { AnalysisSetupIndicesForm } from './analysis_setup_indices_form';
import { AnalysisSetupTimerangeForm } from './analysis_setup_timerange_form';
import {
ValidatedIndex,
ValidationIndicesUIError,
} from '../../../../../containers/logs/log_analysis/log_analysis_setup_state';
import { ValidatedIndex, ValidationIndicesUIError } from './validation';

interface InitialConfigurationStepProps {
setStartTime: (startTime: number | undefined) => void;
Expand All @@ -27,6 +25,13 @@ interface InitialConfigurationStepProps {
validationErrors?: ValidationIndicesUIError[];
}

export const createInitialConfigurationStep = (
props: InitialConfigurationStepProps
): EuiContainedStepProps => ({
title: initialConfigurationStepTitle,
children: <InitialConfigurationStep {...props} />,
});

export const InitialConfigurationStep: React.FunctionComponent<InitialConfigurationStepProps> = ({
setStartTime,
setEndTime,
Expand Down Expand Up @@ -67,6 +72,13 @@ const errorCalloutTitle = i18n.translate(
}
);

const initialConfigurationStepTitle = i18n.translate(
'xpack.infra.analysisSetup.configurationStepTitle',
{
defaultMessage: 'Configuration',
}
);

const ValidationErrors: React.FC<{ errors: ValidationIndicesUIError[] }> = ({ errors }) => {
if (errors.length === 0) {
return null;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { ValidationIndicesError } from '../../../../../common/http_api';

export type ValidationIndicesUIError =
| ValidationIndicesError
| { error: 'NETWORK_ERROR' }
| { error: 'TOO_FEW_SELECTED_INDICES' };

interface ValidIndex {
validity: 'valid';
name: string;
isSelected: boolean;
}

interface InvalidIndex {
validity: 'invalid';
name: string;
errors: ValidationIndicesError[];
}

export type ValidatedIndex = ValidIndex | InvalidIndex;
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,27 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiEmptyPrompt, EuiLink, EuiButton } from '@elastic/eui';
import React from 'react';

import euiStyled from '../../../../../../common/eui_styled_components';

export const LogEntryRateUnavailableContent: React.FunctionComponent<{}> = () => (
export const MlUnavailablePrompt: React.FunctionComponent<{}> = () => (
<EmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.infra.logs.analysisPage.unavailable.mLDisabledTitle"
defaultMessage="The Analysis feature requires Machine Learning"
id="xpack.infra.logs.analysis.mlUnavailableTitle"
defaultMessage="This feature requires Machine Learning"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.infra.logs.analysisPage.unavailable.mlDisabledBody"
id="xpack.infra.logs.analysis.mlUnavailableBody"
defaultMessage="Check the {machineLearningAppLink} for more information."
values={{
machineLearningAppLink: (
Expand All @@ -40,7 +41,7 @@ export const LogEntryRateUnavailableContent: React.FunctionComponent<{}> = () =>
}
actions={
<EuiButton target="_blank" href="ml" color="primary" fill>
{i18n.translate('xpack.infra.logs.analysisPage.unavailable.mlAppButton', {
{i18n.translate('xpack.infra.logs.analysis.mlAppButton', {
defaultMessage: 'Open Machine Learning',
})}
</EuiButton>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,42 @@ import {
EuiCallOut,
EuiCode,
} from '@elastic/eui';
import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import { SetupStatus } from '../../../../../../common/log_analysis';
import { SetupStatus } from '../../../../../common/log_analysis';
import { CreateMLJobsButton } from './create_ml_jobs_button';
import { RecreateMLJobsButton } from './recreate_ml_jobs_button';

interface ProcessStepProps {
cleanupAndSetup: () => void;
cleanUpAndSetUp: () => void;
errorMessages: string[];
isConfigurationValid: boolean;
setup: () => void;
setUp: () => void;
setupStatus: SetupStatus;
viewResults: () => void;
}

export const createProcessStep = (props: ProcessStepProps): EuiContainedStepProps => ({
title: processStepTitle,
children: <ProcessStep {...props} />,
status:
props.setupStatus === 'pending'
? 'incomplete'
: props.setupStatus === 'failed'
? 'danger'
: props.setupStatus === 'succeeded'
? 'complete'
: undefined,
});

export const ProcessStep: React.FunctionComponent<ProcessStepProps> = ({
cleanupAndSetup,
cleanUpAndSetUp,
errorMessages,
isConfigurationValid,
setup,
setUp,
setupStatus,
viewResults,
}) => {
Expand Down Expand Up @@ -66,7 +80,7 @@ export const ProcessStep: React.FunctionComponent<ProcessStepProps> = ({
</EuiCallOut>
))}
<EuiSpacer />
<EuiButton fill onClick={cleanupAndSetup}>
<EuiButton fill onClick={cleanUpAndSetUp}>
<FormattedMessage
id="xpack.infra.analysisSetup.steps.setupProcess.tryAgainButton"
defaultMessage="Try again"
Expand All @@ -88,9 +102,9 @@ export const ProcessStep: React.FunctionComponent<ProcessStepProps> = ({
</EuiButton>
</>
) : setupStatus === 'requiredForUpdate' || setupStatus === 'requiredForReconfiguration' ? (
<RecreateMLJobsButton isDisabled={!isConfigurationValid} onClick={cleanupAndSetup} />
<RecreateMLJobsButton isDisabled={!isConfigurationValid} onClick={cleanUpAndSetUp} />
) : (
<CreateMLJobsButton isDisabled={!isConfigurationValid} onClick={setup} />
<CreateMLJobsButton isDisabled={!isConfigurationValid} onClick={setUp} />
)}
</EuiText>
);
Expand All @@ -102,3 +116,7 @@ const errorCalloutTitle = i18n.translate(
defaultMessage: 'An error occurred',
}
);

const processStepTitle = i18n.translate('xpack.infra.analysisSetup.actionStepTitle', {
defaultMessage: 'Create ML job',
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import {
CommonProps,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentBody,
EuiPageContentHeader,
EuiPageContentHeaderSection,
EuiTitle,
} from '@elastic/eui';
import React from 'react';

import euiStyled from '../../../../../../common/eui_styled_components';

export const LogAnalysisSetupPage: React.FunctionComponent<CommonProps> = ({
children,
...rest
}) => {
return (
<LogEntryRateSetupPage>
<EuiPageBody>
<LogEntryRateSetupPageContent
verticalPosition="center"
horizontalPosition="center"
{...rest}
>
{children}
</LogEntryRateSetupPageContent>
</EuiPageBody>
</LogEntryRateSetupPage>
);
};

export const LogAnalysisSetupPageHeader: React.FunctionComponent = ({ children }) => (
<EuiPageContentHeader>
<EuiPageContentHeaderSection>
<EuiTitle size="m">
<h3>{children}</h3>
</EuiTitle>
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
);

export const LogAnalysisSetupPageContent = EuiPageContentBody;

// !important due to https://github.com/elastic/eui/issues/2232
const LogEntryRateSetupPageContent = euiStyled(EuiPageContent)`
max-width: 768px !important;
`;

const LogEntryRateSetupPage = euiStyled(EuiPage)`
height: 100%;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ interface Props {
retry: () => void;
}

export const LogEntryRateSetupStatusUnknownContent: React.FunctionComponent<Props> = ({
export const LogAnalysisSetupStatusUnknownPrompt: React.FunctionComponent<Props> = ({
retry,
}: Props) => (
<EmptyPrompt
title={
<h2>
<FormattedMessage
id="xpack.infra.logs.analysisPage.setupStatusUnknown.title"
id="xpack.infra.logs.analysis.setupStatusUnknownTitle"
defaultMessage="We couldn't determine the status of your ML jobs."
/>
</h2>
}
actions={
<EuiButton onClick={() => retry()} color="primary" fill>
{i18n.translate('xpack.infra.logs.analysisPage.setupStatusUnknown.tryAgainButton', {
{i18n.translate('xpack.infra.logs.analysis.setupStatusTryAgainButton', {
defaultMessage: 'Try again',
})}
</EuiButton>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const datafeedStateRT = rt.keyof({
const jobStateRT = rt.keyof({
closed: null,
closing: null,
deleting: null,
failed: null,
opened: null,
opening: null,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export * from './log_analysis_cleanup';
export * from './log_analysis_module';
export * from './log_analysis_module_status';
export * from './log_analysis_module_types';
export * from './log_analysis_setup_state';
Loading

0 comments on commit 8863fc2

Please sign in to comment.