From f3c8367a68b4abffa1dff9f3b9b7c456ecc1552a Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Thu, 14 May 2020 14:40:31 -0500 Subject: [PATCH] [ML] Refactor get_job_id_url util function & clean up --- .../analytics_list/analytics_list.tsx | 10 ++++--- .../components/analytics_list/columns.tsx | 9 +++---- .../components/jobs_list/jobs_list.js | 2 +- .../jobs/jobs_list/components/utils.js | 26 +------------------ .../public/application/util/get_job_id_url.ts | 20 ++++++++++++++ 5 files changed, 32 insertions(+), 35 deletions(-) create mode 100644 x-pack/plugins/ml/public/application/util/get_job_id_url.ts 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 index 0213a32d57722..68e728c019873 100644 --- 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 @@ -111,7 +111,7 @@ export const DataFrameAnalyticsList: FC = ({ const [sortField, setSortField] = useState(DataFrameAnalyticsListColumn.id); const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.ASC); - const [urlFilterIdCleared, setUrlFilterIdCleared] = useState(false); + const [jobIdSelected, setJobIdSelected] = useState(false); const disabled = !checkPermission('canCreateDataFrameAnalytics') || !checkPermission('canStartStopDataFrameAnalytics'); @@ -124,17 +124,19 @@ export const DataFrameAnalyticsList: FC = ({ blockRefresh ); + // Query text/job_id based on url but only after getAnalytics is done first + // jobIdSelected makes sure the query is only run once since analytics is being refreshed constantly const selectedId = getSelectedJobIdFromUrl(window.location.href); useEffect(() => { - if (urlFilterIdCleared === false && analytics.length > 0) { + if (jobIdSelected === false && analytics.length > 0) { if (selectedId !== undefined) { - setUrlFilterIdCleared(true); + setJobIdSelected(true); setQueryText(selectedId); const selectedIdQuery: Query = EuiSearchBar.Query.parse(selectedId); onQueryChange({ query: selectedIdQuery, error: undefined }); } } - }, [urlFilterIdCleared, analytics]); + }, [jobIdSelected, analytics]); // Subscribe to the refresh observable to trigger reloading the analytics list. useRefreshAnalyticsList({ 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 index f0ea373d7fb12..236a8083a95e6 100644 --- 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 @@ -19,8 +19,7 @@ import { EuiLink, RIGHT_ALIGNMENT, } from '@elastic/eui'; -// @ts-ignore -import { getJobIdUrl } from '../../../../../jobs/jobs_list/components/utils'; +import { getJobIdUrl } from '../../../../../util/get_job_id_url'; import { getAnalysisType, DataFrameAnalyticsId } from '../../../../common'; import { CreateAnalyticsFormProps } from '../../hooks/use_create_analytics_form'; @@ -138,9 +137,9 @@ export const progressColumn = { 'data-test-subj': 'mlAnalyticsTableColumnProgress', }; -export const getDFAnalyticsJobIdLink = (item: DataFrameAnalyticsListRow) => { - return {item.id}; -}; +export const getDFAnalyticsJobIdLink = (item: DataFrameAnalyticsListRow) => ( + {item.id} +); export const getColumns = ( expandedRowItemIds: DataFrameAnalyticsId[], diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js index 9ec7be58d7589..9874ac56577d3 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js @@ -14,7 +14,7 @@ import { toLocaleString } from '../../../../util/string_utils'; import { ResultLinks, actionsMenuContent } from '../job_actions'; import { JobDescription } from './job_description'; import { JobIcon } from '../../../../components/job_message_icon'; -import { getJobIdUrl } from '../utils'; +import { getJobIdUrl } from '../../../../util/get_job_id_url'; import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; 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 index 64aa02c8baf18..4f77004b91f99 100644 --- 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 @@ -10,7 +10,7 @@ import rison from 'rison-node'; import { mlJobService } from '../../../services/job_service'; import { ml } from '../../../services/ml_api_service'; -import { getToastNotifications, getBasePath } from '../../../util/dependency_cache'; +import { getToastNotifications } from '../../../util/dependency_cache'; import { JOB_STATE, DATAFEED_STATE } from '../../../../../common/constants/states'; import { parseInterval } from '../../../../../common/util/parse_interval'; import { i18n } from '@kbn/i18n'; @@ -367,18 +367,6 @@ function jobProperty(job, prop) { return job[propMap[prop]]; } -export function getJobIdUrl(tabId, jobId) { - // Create url for filtering by job id for kibana management table - const settings = { - jobId, - }; - const encoded = rison.encode(settings); - const url = `?mlManagement=${encoded}`; - const basePath = getBasePath(); - - return `${basePath.get()}/app/ml#/${tabId}${url}`; -} - function getUrlVars(url) { const vars = {}; url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(_, key, value) { @@ -408,15 +396,3 @@ 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); - } - } -} diff --git a/x-pack/plugins/ml/public/application/util/get_job_id_url.ts b/x-pack/plugins/ml/public/application/util/get_job_id_url.ts new file mode 100644 index 0000000000000..a6ca575f21b50 --- /dev/null +++ b/x-pack/plugins/ml/public/application/util/get_job_id_url.ts @@ -0,0 +1,20 @@ +/* + * 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 rison from 'rison-node'; + +import { getBasePath } from './dependency_cache'; + +export function getJobIdUrl(tabId: string, jobId: string): string { + // Create url for filtering by job id for kibana management table + const settings = { + jobId, + }; + const encoded = rison.encode(settings); + const url = `?mlManagement=${encoded}`; + const basePath = getBasePath(); + + return `${basePath.get()}/app/ml#/${tabId}${url}`; +}