[ML] Add ability to query text/job id from url for DFA page

qn895 · qn895 · commit 1ec4fde43833 · 2020-05-14T11:57:02.000-05:00
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, FC, useState } from 'react';
+import React, { Fragment, FC, useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -15,6 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
+  EuiSearchBar,
 } from '@elastic/eui';
 
 import { DataFrameAnalyticsId, useRefreshAnalyticsList } from '../../../../common';
@@ -46,6 +47,7 @@ import { RefreshAnalyticsListButton } from '../refresh_analytics_list_button';
 import { CreateAnalyticsButton } from '../create_analytics_button';
 import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
 import { CreateAnalyticsFlyoutWrapper } from '../create_analytics_flyout_wrapper';
+import { getSelectedJobIdFromUrl } from '../../../../../jobs/jobs_list/components/utils';
 
 function getItemIdToExpandedRowMap(
   itemIds: DataFrameAnalyticsId[],
@@ -86,6 +88,8 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const [isLoading, setIsLoading] = useState(false);
   const [filterActive, setFilterActive] = useState(false);
 
+  const [queryText, setQueryText] = useState('');
+
   const [analytics, setAnalytics] = useState<DataFrameAnalyticsListRow[]>([]);
   const [analyticsStats, setAnalyticsStats] = useState<AnalyticStatsBarStats | undefined>(
     undefined
@@ -102,6 +106,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const [sortField, setSortField] = useState<string>(DataFrameAnalyticsListColumn.id);
   const [sortDirection, setSortDirection] = useState<SortDirection>(SORT_DIRECTION.ASC);
 
+  const [urlFilterIdCleared, setUrlFilterIdCleared] = useState<boolean>(false);
   const disabled =
     !checkPermission('canCreateDataFrameAnalytics') ||
     !checkPermission('canStartStopDataFrameAnalytics');
@@ -114,6 +119,18 @@ export const DataFrameAnalyticsList: FC<Props> = ({
     blockRefresh
   );
 
+  const selectedId = getSelectedJobIdFromUrl(window.location.href);
+  useEffect(() => {
+    if (urlFilterIdCleared === false && analytics.length > 0) {
+      if (selectedId !== undefined) {
+        setUrlFilterIdCleared(true);
+        setQueryText(selectedId);
+        const selectedIdQuery: Query = EuiSearchBar.Query.parse(selectedId);
+        onQueryChange({ query: selectedIdQuery, error: undefined });
+      }
+    }
+  }, [urlFilterIdCleared, analytics]);
+
   // Subscribe to the refresh observable to trigger reloading the analytics list.
   useRefreshAnalyticsList({
     isLoading: setIsLoading,
@@ -129,6 +146,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
         clauses = query.ast.clauses;
       }
       if (clauses.length > 0) {
+        setQueryText(query.text);
         setFilterActive(true);
         filterAnalytics(clauses as Array<TermClause | FieldClause>);
       } else {
@@ -286,6 +304,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   };
 
   const search = {
+    query: queryText,
     onChange: onQueryChange,
     box: {
       incremental: true,
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx
@@ -23,7 +23,6 @@ import {
 import { getJobIdUrl } from '../../../../../jobs/jobs_list/components/utils';
 
 import { getAnalysisType, DataFrameAnalyticsId } from '../../../../common';
-import { getResultsUrl } from './common';
 import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form';
 import {
   getDataFrameAnalyticsProgress,
@@ -199,7 +198,6 @@ export const getColumns = (
       'data-test-subj': 'mlAnalyticsTableRowDetailsToggle',
     },
     {
-      // field: DataFrameAnalyticsListColumn.id,
       name: 'ID',
       sortable: (item: DataFrameAnalyticsListRow) => item.id,
       truncateText: true,
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/utils.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/utils.js
@@ -408,3 +408,15 @@ export function clearSelectedJobIdFromUrl(url) {
     }
   }
 }
+
+export function resetMlJobUrl(tabId, url) {
+  // Change current window's url to just the generic tab url without the job ID
+  if (typeof url === 'string') {
+    url = decodeURIComponent(url);
+    if (url.includes('mlManagement') && url.includes('jobId')) {
+      const urlParams = getUrlVars(url);
+      const clearedParams = `ml#/${tabId}?_g=${urlParams._g}`;
+      window.history.replaceState({}, document.title, clearedParams);
+    }
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -408,3 +408,15 @@ export function clearSelectedJobIdFromUrl(url) {`
`408`	`408`	`}`
`409`	`409`	`}`
`410`	`410`	`}`
	`411`	`+`
	`412`	`+export function resetMlJobUrl(tabId, url) {`
	`413`	`+ // Change current window's url to just the generic tab url without the job ID`
	`414`	`+ if (typeof url === 'string') {`
	`415`	`+ url = decodeURIComponent(url);`
	`416`	`+ if (url.includes('mlManagement') && url.includes('jobId')) {`
	`417`	`+ const urlParams = getUrlVars(url);`
	`418`	+ const clearedParams = `ml#/${tabId}?_g=${urlParams._g}`;
	`419`	`+ window.history.replaceState({}, document.title, clearedParams);`
	`420`	`+ }`
	`421`	`+ }`
	`422`	`+}`