Tweak hierarchy of button and link to "Anomaly explorer" view for ove…

…rall link

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, jobIds } = useContext(
+  const { setup, cleanupAndSetup, setupStatus, viewResults, fetchJobStatus } = useContext(
     LogAnalysisJobs.Context
   );
 
@@ -45,7 +45,6 @@ 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,7 +19,6 @@ 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';
@@ -36,24 +35,20 @@ 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,
@@ -65,12 +60,7 @@ 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
@@ -144,6 +134,7 @@ export const AnalysisResultsContent = ({
     setupStatus,
     viewSetupForReconfiguration,
     viewSetupForUpdate,
+    jobIds,
   } = useContext(LogAnalysisJobs.Context);
 
   useInterval(() => {
@@ -224,7 +215,7 @@ export const AnalysisResultsContent = ({
                     setTimeRange={handleChartTimeRangeChange}
                     setupStatus={setupStatus}
                     timeRange={queryTimeRange}
-                    getMlLink={getMlLink}
+                    jobId={jobIds['log-entry-rate']}
                   />
                 </EuiPanel>
               </EuiFlexItem>

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

@@ -5,20 +5,96 @@
  */
 
 import React from 'react';
-import { EuiButton, ButtonColor } from '@elastic/eui';
+import url from 'url';
+import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import chrome from 'ui/chrome';
+import { encode } from 'rison-node';
+import { TimeRange } from '../../../../../common/http_api/shared/time_range';
 
 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"
-      />
+  jobId: string;
+  partition?: string;
+  timeRange: TimeRange;
+}> = ({ jobId, partition, timeRange }) => {
+  const pathname = chrome.addBasePath('/app/ml');
+  const buttonLabel = (
+    <FormattedMessage
+      id="xpack.infra.logs.analysis.analyzeInMlButtonLabel"
+      defaultMessage="Analyze in ML"
+    />
+  );
+  return partition ? (
+    <EuiButton
+      fill={false}
+      href={getPartitionSpecificSingleMetricViewerLink(pathname, jobId, partition, timeRange)}
+    >
+      {buttonLabel}
+    </EuiButton>
+  ) : (
+    <EuiButton fill={true} href={getOverallAnomalyExplorerLink(pathname, jobId, timeRange)}>
+      {buttonLabel}
     </EuiButton>
   );
 };
+
+const getOverallAnomalyExplorerLink = (pathname: string, jobId: string, timeRange: TimeRange) => {
+  const { from, to } = convertTimeRangeToParams(timeRange);
+
+  const _g = encode({
+    ml: {
+      jobIds: [jobId],
+    },
+    time: {
+      from,
+      to,
+    },
+  });
+
+  const hash = `/explorer?_g=${_g}`;
+
+  return url.format({
+    pathname,
+    hash,
+  });
+};
+
+const getPartitionSpecificSingleMetricViewerLink = (
+  pathname: string,
+  jobId: string,
+  partition: string,
+  timeRange: TimeRange
+) => {
+  const { from, to } = convertTimeRangeToParams(timeRange);
+
+  const _g = encode({
+    ml: {
+      jobIds: [jobId],
+    },
+    time: {
+      from,
+      to,
+      mode: 'absolute',
+    },
+  });
+
+  const _a = encode({
+    mlTimeSeriesExplorer: {
+      entities: { 'event.dataset': partition },
+    },
+  });
+
+  const hash = `/timeseriesexplorer?_g=${_g}&_a=${encodeURIComponent(_a)}`;
+
+  return url.format({
+    pathname,
+    hash,
+  });
+};
+
+const convertTimeRangeToParams = (timeRange: TimeRange): { from: string; to: string } => {
+  return {
+    from: new Date(timeRange.startTime).toISOString(),
+    to: new Date(timeRange.endTime).toISOString(),
+  };
+};

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

@@ -17,7 +17,6 @@ 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<{
@@ -26,8 +25,8 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
   results: GetLogEntryRateSuccessResponsePayload['data'];
   setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
-  getMlLink: GetMlLink;
-}> = ({ results, timeRange, setTimeRange, topAnomalyScore, partitionId, getMlLink }) => {
+  jobId: string;
+}> = ({ results, timeRange, setTimeRange, topAnomalyScore, partitionId, jobId }) => {
   const logEntryRateSeries = useMemo(
     () =>
       results && results.histogramBuckets
@@ -89,7 +88,7 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
         <EuiSpacer size="s" />
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
-            <AnalyzeInMlButton fill={false} href={getMlLink(partitionId)} />
+            <AnalyzeInMlButton jobId={jobId} timeRange={timeRange} partition={partitionId} />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>

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

@@ -27,7 +27,6 @@ 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';
@@ -42,7 +41,7 @@ export const AnomaliesResults: React.FunctionComponent<{
   timeRange: TimeRange;
   viewSetupForReconfiguration: () => void;
   viewSetupForUpdate: () => void;
-  getMlLink: GetMlLink;
+  jobId: string;
 }> = ({
   isLoading,
   jobStatus,
@@ -52,7 +51,7 @@ export const AnomaliesResults: React.FunctionComponent<{
   timeRange,
   viewSetupForReconfiguration,
   viewSetupForUpdate,
-  getMlLink,
+  jobId,
 }) => {
   const title = i18n.translate('xpack.infra.logs.analysis.anomaliesSectionTitle', {
     defaultMessage: 'Anomalies',
@@ -107,7 +106,7 @@ export const AnomaliesResults: React.FunctionComponent<{
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <AnalyzeInMlButton href={getMlLink()} />
+          <AnalyzeInMlButton jobId={jobId} timeRange={timeRange} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
@@ -194,7 +193,7 @@ export const AnomaliesResults: React.FunctionComponent<{
             results={results}
             setTimeRange={setTimeRange}
             timeRange={timeRange}
-            getMlLink={getMlLink}
+            jobId={jobId}
           />
         </>
       )}

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

@@ -12,7 +12,6 @@ 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;
@@ -53,8 +52,8 @@ export const AnomaliesTable: React.FunctionComponent<{
   results: GetLogEntryRateSuccessResponsePayload['data'];
   setTimeRange: (timeRange: TimeRange) => void;
   timeRange: TimeRange;
-  getMlLink: GetMlLink;
-}> = ({ results, timeRange, setTimeRange, getMlLink }) => {
+  jobId: string;
+}> = ({ results, timeRange, setTimeRange, jobId }) => {
   const tableItems: TableItem[] = useMemo(() => {
     return Object.entries(getTopAnomalyScoresByPartition(results)).map(([key, value]) => {
       return {
@@ -114,7 +113,7 @@ export const AnomaliesTable: React.FunctionComponent<{
               topAnomalyScore={item.topAnomalyScore}
               setTimeRange={setTimeRange}
               timeRange={timeRange}
-              getMlLink={getMlLink}
+              jobId={jobId}
             />
           ),
         };