[Logs UI] Add "Analyze in ML" buttons

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_jobs.tsx

@@ -8,7 +8,7 @@ import createContainer from 'constate-latest';
 import { useMemo, useCallback, useEffect } from 'react';
 
 import { callGetMlModuleAPI } from './api/ml_get_module';
-import { bucketSpan } from '../../../../common/log_analysis';
+import { bucketSpan, getJobId } from '../../../../common/log_analysis';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { callJobsSummaryAPI } from './api/ml_get_jobs_summary_api';
 import { callSetupMlModuleAPI, SetupMlModuleResponsePayload } from './api/ml_setup_module_api';
@@ -138,6 +138,12 @@ export const useLogAnalysisJobs = ({
     fetchModuleDefinition();
   }, [fetchModuleDefinition]);
 
+  const jobIds = useMemo(() => {
+    return {
+      'log-entry-rate': getJobId(spaceId, sourceId, 'log-entry-rate'),
+    };
+  }, [sourceId, spaceId]);
+
   return {
     fetchJobStatus,
     isLoadingSetupStatus,
@@ -149,6 +155,7 @@ export const useLogAnalysisJobs = ({
     viewSetupForReconfiguration,
     viewSetupForUpdate,
     viewResults,
+    jobIds,
   };
 };
 

x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_content.tsx

@@ -20,7 +20,7 @@ export const AnalysisPageContent = () => {
   const { sourceId, source } = useContext(Source.Context);
   const { hasLogAnalysisCapabilites } = useContext(LogAnalysisCapabilities.Context);
 
-  const { setup, cleanupAndSetup, setupStatus, viewResults, fetchJobStatus } = useContext(
+  const { setup, cleanupAndSetup, setupStatus, viewResults, fetchJobStatus, jobIds } = useContext(
     LogAnalysisJobs.Context
   );
 
@@ -45,6 +45,7 @@ export const AnalysisPageContent = () => {
       <AnalysisResultsContent
         sourceId={sourceId}
         isFirstUse={setupStatus === 'hiddenAfterSuccess'}
+        jobId={jobIds['log-entry-rate']}
       />
     );
   } else {

x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx

@@ -19,9 +19,10 @@ import numeral from '@elastic/numeral';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
+import chrome from 'ui/chrome';
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { TimeRange } from '../../../../common/http_api/shared/time_range';
 import { bucketSpan } from '../../../../common/log_analysis';
-import euiStyled from '../../../../../../common/eui_styled_components';
 import { LoadingPage } from '../../../components/loading_page';
 import {
   LogAnalysisJobs,
@@ -35,20 +36,24 @@ import { useKibanaUiSetting } from '../../../utils/use_kibana_ui_setting';
 import { FirstUseCallout } from './first_use';
 import { AnomaliesResults } from './sections/anomalies';
 import { LogRateResults } from './sections/log_rate';
+import { getMlLinkFormatter } from './sections/helpers/ml_links';
 
 const JOB_STATUS_POLLING_INTERVAL = 30000;
 
 export const AnalysisResultsContent = ({
   sourceId,
   isFirstUse,
+  jobId,
 }: {
   sourceId: string;
   isFirstUse: boolean;
+  jobId: string;
 }) => {
   useTrackPageview({ app: 'infra_logs', path: 'analysis_results' });
   useTrackPageview({ app: 'infra_logs', path: 'analysis_results', delay: 15000 });
 
   const [dateFormat] = useKibanaUiSetting('dateFormat', 'MMMM D, YYYY h:mm A');
+  const basePath = chrome.getBasePath();
 
   const {
     timeRange: selectedTimeRange,
@@ -60,7 +65,12 @@ export const AnalysisResultsContent = ({
   const [queryTimeRange, setQueryTimeRange] = useState<TimeRange>(
     stringToNumericTimeRange(selectedTimeRange)
   );
-
+  const getMlLink = getMlLinkFormatter({
+    basePath,
+    jobId,
+    startTime: queryTimeRange.startTime,
+    endTime: queryTimeRange.endTime,
+  });
   const bucketDuration = useMemo(() => {
     // This function takes the current time range in ms,
     // works out the bucket interval we'd need to always
@@ -214,6 +224,7 @@ export const AnalysisResultsContent = ({
                     setTimeRange={handleChartTimeRangeChange}
                     setupStatus={setupStatus}
                     timeRange={queryTimeRange}
+                    getMlLink={getMlLink}
                   />
                 </EuiPanel>
               </EuiFlexItem>

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/analyze_in_ml_button.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 React from 'react';
+import { EuiButton, ButtonColor } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export const AnalyzeInMlButton: React.FunctionComponent<{
+  color?: ButtonColor;
+  fill?: boolean;
+  href: string;
+}> = ({ color = 'primary', fill = true, href }) => {
+  return (
+    <EuiButton color={color} fill={fill} href={href}>
+      <FormattedMessage
+        id="xpack.infra.logs.analysis.analyzeInMlButtonLabel"
+        defaultMessage="Analyze in ML"
+      />
+    </EuiButton>
+  );
+};

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/anomalies/expanded_row.tsx

@@ -7,7 +7,7 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import numeral from '@elastic/numeral';
-import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiSpacer } from '@elastic/eui';
 import { AnomaliesChart } from './chart';
 import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
@@ -17,14 +17,17 @@ import {
   formatAnomalyScore,
   getTotalNumberOfLogEntriesForPartition,
 } from '../helpers/data_formatters';
+import { GetMlLink } from '../helpers/ml_links';
+import { AnalyzeInMlButton } from '../analyze_in_ml_button';
 
 export const AnomaliesTableExpandedRow: React.FunctionComponent<{
   partitionId: string;
   topAnomalyScore: number;
   results: GetLogEntryRateSuccessResponsePayload['data'];
   setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
-}> = ({ results, timeRange, setTimeRange, topAnomalyScore, partitionId }) => {
+  getMlLink: GetMlLink;
+}> = ({ results, timeRange, setTimeRange, topAnomalyScore, partitionId, getMlLink }) => {
   const logEntryRateSeries = useMemo(
     () =>
       results && results.histogramBuckets
@@ -83,6 +86,12 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
           )}
           reverse
         />
+        <EuiSpacer size="s" />
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <AnalyzeInMlButton fill={false} href={getMlLink(partitionId)} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/anomalies/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import {
-  EuiButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,7 +15,6 @@ import {
 } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useMemo } from 'react';
 
 import euiStyled from '../../../../../../../../common/eui_styled_components';
@@ -29,9 +27,11 @@ import {
   getLogEntryRateCombinedSeries,
   getTopAnomalyScoreAcrossAllPartitions,
 } from '../helpers/data_formatters';
+import { GetMlLink } from '../helpers/ml_links';
 import { AnomaliesChart } from './chart';
 import { AnomaliesTable } from './table';
 import { LogAnalysisJobProblemIndicator } from '../../../../../components/logging/log_analysis_job_status';
+import { AnalyzeInMlButton } from '../analyze_in_ml_button';
 
 export const AnomaliesResults: React.FunctionComponent<{
   isLoading: boolean;
@@ -42,6 +42,7 @@ export const AnomaliesResults: React.FunctionComponent<{
   timeRange: TimeRange;
   viewSetupForReconfiguration: () => void;
   viewSetupForUpdate: () => void;
+  getMlLink: GetMlLink;
 }> = ({
   isLoading,
   jobStatus,
@@ -51,6 +52,7 @@ export const AnomaliesResults: React.FunctionComponent<{
   timeRange,
   viewSetupForReconfiguration,
   viewSetupForUpdate,
+  getMlLink,
 }) => {
   const title = i18n.translate('xpack.infra.logs.analysis.anomaliesSectionTitle', {
     defaultMessage: 'Anomalies',
@@ -105,12 +107,7 @@ export const AnomaliesResults: React.FunctionComponent<{
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill>
-            <FormattedMessage
-              id="xpack.infra.logs.analysis.analyzeInMlButtonLabel"
-              defaultMessage="Analyze in ML"
-            />
-          </EuiButton>
+          <AnalyzeInMlButton href={getMlLink()} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
@@ -193,7 +190,12 @@ export const AnomaliesResults: React.FunctionComponent<{
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer size="l" />
-          <AnomaliesTable results={results} setTimeRange={setTimeRange} timeRange={timeRange} />
+          <AnomaliesTable
+            results={results}
+            setTimeRange={setTimeRange}
+            timeRange={timeRange}
+            getMlLink={getMlLink}
+          />
         </>
       )}
     </>

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/anomalies/table.tsx

@@ -12,6 +12,7 @@ import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
 import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
 import { AnomaliesTableExpandedRow } from './expanded_row';
 import { getTopAnomalyScoresByPartition, formatAnomalyScore } from '../helpers/data_formatters';
+import { GetMlLink } from '../helpers/ml_links';
 
 interface TableItem {
   id: string;
@@ -52,7 +53,8 @@ export const AnomaliesTable: React.FunctionComponent<{
   results: GetLogEntryRateSuccessResponsePayload['data'];
   setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
-}> = ({ results, timeRange, setTimeRange }) => {
+  getMlLink: GetMlLink;
+}> = ({ results, timeRange, setTimeRange, getMlLink }) => {
   const tableItems: TableItem[] = useMemo(() => {
     return Object.entries(getTopAnomalyScoresByPartition(results)).map(([key, value]) => {
       return {
@@ -112,6 +114,7 @@ export const AnomaliesTable: React.FunctionComponent<{
               topAnomalyScore={item.topAnomalyScore}
               setTimeRange={setTimeRange}
               timeRange={timeRange}
+              getMlLink={getMlLink}
             />
           ),
         };

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/helpers/ml_links.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { encode } from 'rison-node';
+
+export type GetMlLink = (partitionId?: string | undefined) => string;
+
+export const getMlLinkFormatter = ({
+  basePath,
+  startTime,
+  endTime,
+  jobId,
+}: {
+  basePath: string;
+  startTime: number;
+  endTime: number;
+  jobId: string;
+}) => (partitionId?: string) => {
+  const startTimeParam = new Date(startTime).toISOString();
+  const endTimeParam = new Date(endTime).toISOString();
+
+  const _g = encode({
+    ml: {
+      jobIds: [jobId],
+    },
+    time: {
+      from: startTimeParam,
+      to: endTimeParam,
+      mode: 'absolute',
+    },
+  });
+
+  const baseLink = `${basePath}/app/ml#/timeseriesexplorer?_g=${_g}`;
+
+  if (partitionId) {
+    const _a = encode({
+      mlTimeSeriesExplorer: {
+        entities: { 'event.dataset': partitionId },
+      },
+    });
+    return `${baseLink}&_a=${encodeURIComponent(_a)}`;
+  } else {
+    return baseLink;
+  }
+};

x-pack/legacy/plugins/infra/public/utils/use_kibana_injected_var.ts

@@ -14,6 +14,5 @@ import { npSetup } from 'ui/new_platform';
  */
 export const useKibanaInjectedVar = (name: string, defaultValue?: unknown) => {
   const injectedMetadata = npSetup.core.injectedMetadata;
-
   return injectedMetadata.getInjectedVar(name, defaultValue);
 };