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

This adds the setup screen for the log entry categorization. closes #50320 closes #50414
elastic · Dec 18, 2019 · 8863fc2 · 8863fc2
1 parent 862265a
commit 8863fc2
Show file tree

Hide file tree

Showing 41 changed files with 852 additions and 324 deletions.
diff --git a/x-pack/legacy/plugins/infra/common/log_analysis/job_parameters.ts b/x-pack/legacy/plugins/infra/common/log_analysis/job_parameters.ts
@@ -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) =>

diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/index.ts b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/index.ts
@@ -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';
diff --git a/...tion_step/analysis_setup_indices_form.tsx → ...tion_step/analysis_setup_indices_form.tsx b/...tion_step/analysis_setup_indices_form.tsx → ...tion_step/analysis_setup_indices_form.tsx
@@ -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[];

diff --git a/...on_step/analysis_setup_timerange_form.tsx → ...on_step/analysis_setup_timerange_form.tsx b/...on_step/analysis_setup_timerange_form.tsx → ...on_step/analysis_setup_timerange_form.tsx
@@ -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',

diff --git a/...setup/initial_configuration_step/index.ts → ...setup/initial_configuration_step/index.ts b/...setup/initial_configuration_step/index.ts → ...setup/initial_configuration_step/index.ts
@@ -5,3 +5,4 @@
  */
 
 export * from './initial_configuration_step';
+export * from './validation';
diff --git a/...ation_step/initial_configuration_step.tsx → ...ation_step/initial_configuration_step.tsx b/...ation_step/initial_configuration_step.tsx → ...ation_step/initial_configuration_step.tsx
@@ -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;
@@ -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,
@@ -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;

diff --git a/...ra/public/components/logging/log_analysis_setup/initial_configuration_step/validation.tsx b/...ra/public/components/logging/log_analysis_setup/initial_configuration_step/validation.tsx
@@ -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;
diff --git a/...g_entry_rate/page_unavailable_content.tsx → ..._analysis_setup/ml_unavailable_prompt.tsx b/...g_entry_rate/page_unavailable_content.tsx → ..._analysis_setup/ml_unavailable_prompt.tsx
@@ -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: (
@@ -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>

diff --git a/...up/process_step/create_ml_jobs_button.tsx → ...up/process_step/create_ml_jobs_button.tsx b/...up/process_step/create_ml_jobs_button.tsx → ...up/process_step/create_ml_jobs_button.tsx
diff --git a/...og_entry_rate/setup/process_step/index.ts → .../log_analysis_setup/process_step/index.ts b/...og_entry_rate/setup/process_step/index.ts → .../log_analysis_setup/process_step/index.ts
diff --git a/..._rate/setup/process_step/process_step.tsx → ...lysis_setup/process_step/process_step.tsx b/..._rate/setup/process_step/process_step.tsx → ...lysis_setup/process_step/process_step.tsx
@@ -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,
 }) => {
@@ -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"
@@ -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>
   );
@@ -102,3 +116,7 @@ const errorCalloutTitle = i18n.translate(
     defaultMessage: 'An error occurred',
   }
 );
+
+const processStepTitle = i18n.translate('xpack.infra.analysisSetup.actionStepTitle', {
+  defaultMessage: 'Create ML job',
+});
diff --git a/.../process_step/recreate_ml_jobs_button.tsx → .../process_step/recreate_ml_jobs_button.tsx b/.../process_step/recreate_ml_jobs_button.tsx → .../process_step/recreate_ml_jobs_button.tsx
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx
@@ -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%;
+`;
diff --git a/..._entry_rate/page_setup_status_unknown.tsx → ...sis_setup/setup_status_unknown_prompt.tsx b/..._entry_rate/page_setup_status_unknown.tsx → ...sis_setup/setup_status_unknown_prompt.tsx
@@ -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>

diff --git a/...k/legacy/plugins/infra/public/containers/logs/log_analysis/api/ml_get_jobs_summary_api.ts b/...k/legacy/plugins/infra/public/containers/logs/log_analysis/api/ml_get_jobs_summary_api.ts
@@ -49,6 +49,7 @@ const datafeedStateRT = rt.keyof({
 const jobStateRT = rt.keyof({
   closed: null,
   closing: null,
+  deleting: null,
   failed: null,
   opened: null,
   opening: null,

diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/index.ts b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/index.ts
@@ -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';