[ML] Add ProgressControls.

elastic · Jun 27, 2022 · 00ad51a · 00ad51a
1 parent f3d8da9
commit 00ad51a
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 10 deletions.
diff --git a/x-pack/packages/ml/aiops_utils/BUILD.bazel b/x-pack/packages/ml/aiops_utils/BUILD.bazel
@@ -37,8 +37,10 @@ NPM_MODULE_EXTRA_FILES = [
 #    "@npm//name-of-package"
 #    eg. "@npm//lodash"
 RUNTIME_DEPS = [
-  "//packages/kbn-logging",
-  "@npm//react"
+  "@npm//react",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n-react",
+  "//packages/kbn-logging"
 ]
 
 # In this array place dependencies necessary to build the types, which will include the
@@ -51,10 +53,12 @@ RUNTIME_DEPS = [
 #
 #  References to NPM packages work the same as RUNTIME_DEPS
 TYPES_DEPS = [
-  "//packages/kbn-logging:npm_module_types",
   "@npm//@types/node",
   "@npm//@types/jest",
-  "@npm//@types/react"
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/kbn-logging:npm_module_types"
 ]
 
 jsts_transpiler(

diff --git a/x-pack/packages/ml/aiops_utils/src/components/progress_controls.tsx b/x-pack/packages/ml/aiops_utils/src/components/progress_controls.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiProgress, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+interface ProgressControlProps {
+  progress: number;
+  progressMessage: string;
+  onRefresh: () => void;
+  onCancel: () => void;
+  isRunning: boolean;
+}
+
+export function ProgressControls({
+  progress,
+  progressMessage,
+  onRefresh,
+  onCancel,
+  isRunning,
+}: ProgressControlProps) {
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="none">
+          <EuiFlexItem data-test-subj="aiopProgressTitle">
+            <EuiText size="xs" color="subdued">
+              <FormattedMessage
+                data-test-subj="aiopsProgressTitleMessage"
+                id="aiops.progressTitle"
+                defaultMessage="Progress: {progress}% — {progressMessage}"
+                values={{ progress: Math.round(progress * 100), progressMessage }}
+              />
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiProgress
+              aria-label={i18n.translate('aiops.progressAriaLabel', {
+                defaultMessage: 'Progress',
+              })}
+              value={Math.round(progress * 100)}
+              max={100}
+              size="m"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {!isRunning && (
+          <EuiButton size="s" onClick={onRefresh}>
+            <FormattedMessage id="aiops.refreshButtonTitle" defaultMessage="Refresh" />
+          </EuiButton>
+        )}
+        {isRunning && (
+          <EuiButton size="s" onClick={onCancel}>
+            <FormattedMessage id="aiops.cancelButtonTitle" defaultMessage="Cancel" />
+          </EuiButton>
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/packages/ml/aiops_utils/src/index.ts b/x-pack/packages/ml/aiops_utils/src/index.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+export { ProgressControls } from './components/progress_controls';
 export { getWindowParameters } from './lib/get_window_parameters';
 export type { WindowParameters } from './lib/get_window_parameters';
 export { streamFactory } from './lib/stream_factory';

diff --git a/x-pack/packages/ml/aiops_utils/src/lib/get_window_parameters.ts b/x-pack/packages/ml/aiops_utils/src/lib/get_window_parameters.ts
@@ -6,7 +6,7 @@
  */
 
 /**
- * Time range defintion for baseline and deviation to be used by spike log analysis.
+ * Time range definition for baseline and deviation to be used by spike log analysis.
  */
 export interface WindowParameters {
   baselineMin: number;

diff --git a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes.tsx b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, FC } from 'react';
 import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
 
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { useFetchStream } from '@kbn/aiops-utils';
+import { useFetchStream, ProgressControls } from '@kbn/aiops-utils';
 import type { WindowParameters } from '@kbn/aiops-utils';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 
@@ -34,7 +34,10 @@ export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({
   const kibana = useKibana();
   const basePath = kibana.services.http?.basePath.get() ?? '';
 
-  const { start, data, isRunning } = useFetchStream<ApiExplainLogRateSpikes, typeof basePath>(
+  const { cancel, start, data, isRunning } = useFetchStream<
+    ApiExplainLogRateSpikes,
+    typeof basePath
+  >(
     `${basePath}/internal/aiops/explain_log_rate_spikes`,
     {
       // TODO Consider time ranges.
@@ -58,7 +61,13 @@ export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({
   return (
     <EuiText>
       <h2>{dataView.title}</h2>
-      <p>{isRunning ? 'Loading ...' : 'Done.'}</p>
+      <ProgressControls
+        progress={data.loaded}
+        progressMessage={data.loadingState ?? ''}
+        isRunning={isRunning}
+        onRefresh={start}
+        onCancel={cancel}
+      />
       <EuiSpacer size="xs" />
       <EuiCodeBlock language="json" fontSize="s" paddingSize="s">
         {JSON.stringify(data, null, 2)}

diff --git a/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts b/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts
@@ -25,9 +25,9 @@ import { fetchChangePointPValues } from './queries/fetch_change_point_p_values';
 
 // Overall progress is a float from 0 to 1.
 // const LOADED_OVERALL_HISTOGRAM = 0.05;
-const LOADED_FIELD_CANDIDATES = 0.05;
+const LOADED_FIELD_CANDIDATES = 0.2;
 // const LOADED_DONE = 1;
-const PROGRESS_STEP_P_VALUES = 0.6;
+const PROGRESS_STEP_P_VALUES = 0.8;
 // const PROGRESS_STEP_HISTOGRAMS = 0.1;
 // const PROGRESS_STEP_FREQUENT_ITEMS = 0.1;