Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Logs UI] Add setup screen for the categorization tab #51905

Merged
merged 21 commits into from
Dec 18, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
d1b8617
Add ml module for categorization and count
weltenwort Nov 29, 2019
7c3960a
Move common setup status components to shared directory
weltenwort Nov 29, 2019
97a8027
Add categorization tab
weltenwort Nov 29, 2019
4a54e68
Rename categorization to categories
weltenwort Nov 29, 2019
0100fd4
Move setup steps to shared components directory
weltenwort Dec 11, 2019
e4bfb04
Inline log entry rate job setup steps
weltenwort Dec 11, 2019
1167867
Properly handle validation of missing indices
weltenwort Dec 12, 2019
ce5fe9d
Wire up the categorization setup screen
weltenwort Dec 12, 2019
220811b
Merge branch 'master' into logs-ui-categorization-add-setup
weltenwort Dec 12, 2019
f28dc75
Decode the deleting ml job state
weltenwort Dec 12, 2019
59e7192
Increase the model memory limit
weltenwort Dec 12, 2019
eaf313d
Fix incomplete hook dependency list
weltenwort Dec 12, 2019
39ef4c4
Fix translations
weltenwort Dec 12, 2019
6be7193
Merge branch 'master' into logs-ui-categorization-add-setup
weltenwort Dec 12, 2019
73b4c86
Include new module in data recognizer unit test
weltenwort Dec 12, 2019
394fbeb
Merge branch 'master' into logs-ui-categorization-add-setup
weltenwort Dec 16, 2019
c317853
Restore lost h3 elements
weltenwort Dec 16, 2019
f8c071a
Merge branch 'master' into logs-ui-categorization-add-setup
weltenwort Dec 17, 2019
9039223
Improve module and job descriptions as per feedback
weltenwort Dec 17, 2019
a6927e1
Improve log rate ml job description
weltenwort Dec 17, 2019
a8a6095
Merge branch 'master' into logs-ui-categorization-add-setup
elasticmachine Dec 17, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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