Move setup steps to shared components directory

weltenwort · weltenwort · commit 0100fd48c454 · 2019-12-11T18:50:17.000+01:00
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
@@ -4,5 +4,10 @@
  * 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/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_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[];
@@ -61,12 +59,10 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
     <EuiDescribedFormGroup
       idAria="indices"
       title={
-        <h3>
-          <FormattedMessage
-            id="xpack.infra.analysisSetup.indicesSelectionTitle"
-            defaultMessage="Choose indices"
-          />
-        </h3>
+        <FormattedMessage
+          id="xpack.infra.analysisSetup.indicesSelectionTitle"
+          defaultMessage="Choose indices"
+        />
       }
       description={
         <FormattedMessage
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_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',
@@ -63,12 +63,10 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
     <EuiDescribedFormGroup
       idAria="timeRange"
       title={
-        <h3>
-          <FormattedMessage
-            id="xpack.infra.analysisSetup.timeRangeTitle"
-            defaultMessage="Choose a time range"
-          />
-        </h3>
+        <FormattedMessage
+          id="xpack.infra.analysisSetup.timeRangeTitle"
+          defaultMessage="Choose a time range"
+        />
       }
       description={
         <FormattedMessage
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index.ts b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index.ts
@@ -5,3 +5,4 @@
  */
 
 export * from './initial_configuration_step';
+export * from './validation';
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/initial_configuration_step.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_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/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/validation.tsx b/x-pack/legacy/plugins/infra/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/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/create_ml_jobs_button.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/create_ml_jobs_button.tsx
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/index.ts b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/index.ts
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/process_step.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/process_step.tsx
@@ -14,11 +14,12 @@ 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';
 
@@ -31,6 +32,19 @@ interface ProcessStepProps {
   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,
   errorMessages,
@@ -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/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/process_step/recreate_ml_jobs_button.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/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/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';
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_setup_state.tsx b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_setup_state.tsx
@@ -6,8 +6,11 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { ValidationIndicesError } from '../../../../common/http_api';
 import { isExampleDataIndex } from '../../../../common/log_analysis';
+import {
+  ValidatedIndex,
+  ValidationIndicesUIError,
+} from '../../../components/logging/log_analysis_setup/initial_configuration_step';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { ModuleDescriptor, ModuleSourceConfiguration } from './log_analysis_module_types';
 
@@ -17,25 +20,6 @@ type SetupHandler = (
   endTime: number | undefined
 ) => void;
 
-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;
-
 interface AnalysisSetupStateArguments<JobType extends string> {
   cleanupAndSetupModule: SetupHandler;
   moduleDescriptor: ModuleDescriptor<JobType>;
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx
@@ -14,26 +14,14 @@ import {
   MlUnavailablePrompt,
 } from '../../../components/logging/log_analysis_setup';
 import { LogAnalysisCapabilities } from '../../../containers/logs/log_analysis';
-import { Source } from '../../../containers/source';
 import { LogEntryRateResultsContent } from './page_results_content';
 import { LogEntryRateSetupContent } from './page_setup_content';
 import { useLogEntryRateModuleContext } from './use_log_entry_rate_module';
 
 export const LogEntryRatePageContent = () => {
-  const { sourceId } = useContext(Source.Context);
   const { hasLogAnalysisCapabilites } = useContext(LogAnalysisCapabilities.Context);
 
-  const {
-    cleanUpAndSetUpModule: cleanupAndSetup,
-    fetchJobStatus,
-    fetchModuleDefinition,
-    lastSetupErrorMessages,
-    moduleDescriptor,
-    setUpModule,
-    setupStatus,
-    sourceConfiguration,
-    viewResults,
-  } = useLogEntryRateModuleContext();
+  const { fetchJobStatus, fetchModuleDefinition, setupStatus } = useLogEntryRateModuleContext();
 
   useEffect(() => {
     fetchModuleDefinition();
@@ -53,23 +41,8 @@ export const LogEntryRatePageContent = () => {
   } else if (setupStatus === 'unknown') {
     return <LogAnalysisSetupStatusUnknownPrompt retry={fetchJobStatus} />;
   } else if (isSetupStatusWithResults(setupStatus)) {
-    return (
-      <LogEntryRateResultsContent
-        sourceId={sourceId}
-        isFirstUse={setupStatus === 'hiddenAfterSuccess'}
-      />
-    );
+    return <LogEntryRateResultsContent />;
   } else {
-    return (
-      <LogEntryRateSetupContent
-        cleanupAndSetup={cleanupAndSetup}
-        errorMessages={lastSetupErrorMessages}
-        moduleDescriptor={moduleDescriptor}
-        setup={setUpModule}
-        setupStatus={setupStatus}
-        sourceConfiguration={sourceConfiguration}
-        viewResults={viewResults}
-      />
-    );
+    return <LogEntryRateSetupContent />;
   }
 };
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
@@ -38,18 +38,22 @@ import {
 
 const JOB_STATUS_POLLING_INTERVAL = 30000;
 
-export const LogEntryRateResultsContent = ({
-  sourceId,
-  isFirstUse,
-}: {
-  sourceId: string;
-  isFirstUse: boolean;
-}) => {
+export const LogEntryRateResultsContent: React.FunctionComponent = () => {
   useTrackPageview({ app: 'infra_logs', path: 'log_entry_rate_results' });
   useTrackPageview({ app: 'infra_logs', path: 'log_entry_rate_results', delay: 15000 });
 
   const [dateFormat] = useKibanaUiSetting('dateFormat', 'MMMM D, YYYY h:mm A');
 
+  const {
+    fetchJobStatus,
+    jobStatus,
+    setupStatus,
+    viewSetupForReconfiguration,
+    viewSetupForUpdate,
+    jobIds,
+    sourceConfiguration: { sourceId },
+  } = useLogEntryRateModuleContext();
+
   const {
     timeRange: selectedTimeRange,
     setTimeRange: setSelectedTimeRange,
@@ -126,14 +130,7 @@ export const LogEntryRateResultsContent = ({
     [setAutoRefresh]
   );
 
-  const {
-    fetchJobStatus,
-    jobStatus,
-    setupStatus,
-    viewSetupForReconfiguration,
-    viewSetupForUpdate,
-    jobIds,
-  } = useLogEntryRateModuleContext();
+  const isFirstUse = useMemo(() => setupStatus === 'hiddenAfterSuccess', [setupStatus]);
 
   useEffect(() => {
     getLogEntryRate();
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/setup/setup_steps.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/setup/setup_steps.tsx

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,4 @@`
`5`	`5`	`*/`
`6`	`6`
`7`	`7`	`export * from './initial_configuration_step';`
	`8`	`+export * from './validation';`