[ML] Anomaly Explorer swim lane pagination (#70063) (#70605)

* [ML] use explorer service

* [ML] WIP pagination

* [ML] add to dashboard without the limit

* [ML] WIP

* [ML] loading states

* [ML] viewBySwimlaneDataLoading on field change

* [ML] fix dashboard control

* [ML] universal swim lane container, embeddable pagination

* [ML] fix css issue

* [ML] rename anomalyTimelineService

* [ML] rename callback

* [ML] rename container component

* [ML] empty state, increase pagination margin

* [ML] check for loading

* [ML] fix i18n

* [ML] fix unit test

* [ML] improve selected cells

* [ML] fix overall selection with changing job selection

* [ML] required props for pagination component

* [ML] move RESIZE_IGNORED_DIFF_PX

* [ML] jest tests

* [ML] add test subject

* [ML] SWIM_LANE_DEFAULT_PAGE_SIZE

* [ML] change empty state styling

* [ML] fix agg size for influencer filters

* [ML] remove debounce

* [ML] SCSS variables, rename swim lane class

* [ML] job selector using context

* [ML] set padding for embeddable panel

* [ML] adjust pagination styles

* [ML] replace custom time range subject with timefilter

* [ML] change loading indicator to mono

* [ML] use swim lane type constant

* [ML] change context naming

* [ML] update jest snapshot

* [ML] fix tests

x-pack/plugins/ml/public/application/app.tsx

@@ -7,7 +7,7 @@
 import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
 
-import { AppMountParameters, CoreStart } from 'kibana/public';
+import { AppMountParameters, CoreStart, HttpStart } from 'kibana/public';
 
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
@@ -17,6 +17,8 @@ import { setLicenseCache } from './license';
 import { MlSetupDependencies, MlStartDependencies } from '../plugin';
 
 import { MlRouter } from './routing';
+import { mlApiServicesProvider } from './services/ml_api_service';
+import { HttpService } from './services/http_service';
 
 type MlDependencies = MlSetupDependencies & MlStartDependencies;
 
@@ -27,6 +29,23 @@ interface AppProps {
 
 const localStorage = new Storage(window.localStorage);
 
+/**
+ * Provides global services available across the entire ML app.
+ */
+export function getMlGlobalServices(httpStart: HttpStart) {
+  const httpService = new HttpService(httpStart);
+  return {
+    httpService,
+    mlApiServices: mlApiServicesProvider(httpService),
+  };
+}
+
+export interface MlServicesContext {
+  mlServices: MlGlobalServices;
+}
+
+export type MlGlobalServices = ReturnType<typeof getMlGlobalServices>;
+
 const App: FC<AppProps> = ({ coreStart, deps }) => {
   const pageDeps = {
     indexPatterns: deps.data.indexPatterns,
@@ -47,7 +66,9 @@ const App: FC<AppProps> = ({ coreStart, deps }) => {
   const I18nContext = coreStart.i18n.Context;
   return (
     <I18nContext>
-      <KibanaContextProvider services={services}>
+      <KibanaContextProvider
+        services={{ ...services, mlServices: getMlGlobalServices(coreStart.http) }}
+      >
         <MlRouter pageDeps={pageDeps} />
       </KibanaContextProvider>
     </I18nContext>

x-pack/plugins/ml/public/application/components/job_selector/job_selector_flyout.tsx

@@ -27,7 +27,6 @@ import {
   normalizeTimes,
 } from './job_select_service_utils';
 import { MlJobWithTimeRange } from '../../../../common/types/anomaly_detection_jobs';
-import { ml } from '../../services/ml_api_service';
 import { useMlKibana } from '../../contexts/kibana';
 import { JobSelectionMaps } from './job_selector';
 
@@ -66,7 +65,10 @@ export const JobSelectorFlyout: FC<JobSelectorFlyoutProps> = ({
   withTimeRangeSelector = true,
 }) => {
   const {
-    services: { notifications },
+    services: {
+      notifications,
+      mlServices: { mlApiServices },
+    },
   } = useMlKibana();
 
   const [newSelection, setNewSelection] = useState(selectedIds);
@@ -151,7 +153,7 @@ export const JobSelectorFlyout: FC<JobSelectorFlyoutProps> = ({
 
   async function fetchJobs() {
     try {
-      const resp = await ml.jobs.jobsWithTimerange(dateFormatTz);
+      const resp = await mlApiServices.jobs.jobsWithTimerange(dateFormatTz);
       const normalizedJobs = normalizeTimes(resp.jobs, dateFormatTz, DEFAULT_GANTT_BAR_WIDTH);
       const { groups: groupsWithTimerange, groupsMap } = getGroupsFromJobs(normalizedJobs);
       setJobs(normalizedJobs);

x-pack/plugins/ml/public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.tsx

@@ -9,10 +9,7 @@ import { Subscription } from 'rxjs';
 import { EuiSuperDatePicker, OnRefreshProps } from '@elastic/eui';
 import { TimeRange, TimeHistoryContract } from 'src/plugins/data/public';
 
-import {
-  mlTimefilterRefresh$,
-  mlTimefilterTimeChange$,
-} from '../../../services/timefilter_refresh_service';
+import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
 import { useUrlState } from '../../../util/url_state';
 import { useMlKibana } from '../../../contexts/kibana';
 
@@ -108,7 +105,6 @@ export const DatePickerWrapper: FC = () => {
     timefilter.setTime(newTime);
     setTime(newTime);
     setRecentlyUsedRanges(getRecentlyUsedRanges());
-    mlTimefilterTimeChange$.next({ lastRefresh: Date.now(), timeRange: { start, end } });
   }
 
   function updateInterval({

x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts

@@ -13,14 +13,16 @@ import {
 import { SecurityPluginSetup } from '../../../../../security/public';
 import { LicenseManagementUIPluginSetup } from '../../../../../license_management/public';
 import { SharePluginStart } from '../../../../../../../src/plugins/share/public';
+import { MlServicesContext } from '../../app';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
   security?: SecurityPluginSetup;
   licenseManagement?: LicenseManagementUIPluginSetup;
   share: SharePluginStart;
 }
-export type StartServices = CoreStart & StartPlugins & { kibanaVersion: string };
+export type StartServices = CoreStart &
+  StartPlugins & { kibanaVersion: string } & MlServicesContext;
 // eslint-disable-next-line react-hooks/rules-of-hooks
 export const useMlKibana = () => useKibana<StartServices>();
 export type MlKibanaReactContextValue = KibanaReactContextValue<StartServices>;

x-pack/plugins/ml/public/application/contexts/ml/ml_context.ts

@@ -7,6 +7,7 @@
 import React from 'react';
 import { IndexPattern, IndexPatternsContract } from '../../../../../../../src/plugins/data/public';
 import { SavedSearchSavedObject } from '../../../../common/types/kibana';
+import { MlServicesContext } from '../../app';
 
 export interface MlContextValue {
   combinedQuery: any;
@@ -34,4 +35,4 @@ export type SavedSearchQuery = object;
 // Multiple custom hooks can be created to access subsets of
 // the overall context value if necessary too,
 // see useCurrentIndexPattern() for example.
-export const MlContext = React.createContext<Partial<MlContextValue>>({});
+export const MlContext = React.createContext<Partial<MlContextValue & MlServicesContext>>({});

x-pack/plugins/ml/public/application/explorer/_explorer.scss

@@ -1,3 +1,5 @@
+$borderRadius: $euiBorderRadius / 2;
+
 .ml-swimlane-selector {
   visibility: hidden;
 }
@@ -104,10 +106,9 @@
 
   // SASSTODO: This entire selector needs to be rewritten.
   // It looks extremely brittle with very specific sizing units
-  .ml-explorer-swimlane {
+  .mlExplorerSwimlane {
     user-select: none;
     padding: 0;
-    margin-bottom: $euiSizeS;
 
     line.gridLine {
       stroke: $euiBorderColor;
@@ -218,17 +219,20 @@
   div.lane {
     height: 30px;
     border-bottom: 0px;
-    border-radius: 2px;
-    margin-top: -1px;
+    border-radius: $borderRadius;
     white-space: nowrap;
 
+    &:not(:first-child) {
+      margin-top: -1px;
+    }
+
     div.lane-label {
       display: inline-block;
-      font-size: 13px;
+      font-size: $euiFontSizeXS;
       height: 30px;
       text-align: right;
       vertical-align: middle;
-      border-radius: 2px;
+      border-radius: $borderRadius;
       padding-right: 5px;
       margin-right: 5px;
       border: 1px solid transparent;
@@ -261,7 +265,7 @@
         .sl-cell-inner-dragselect {
           height: 26px;
           margin: 1px;
-          border-radius: 2px;
+          border-radius: $borderRadius;
           text-align: center;
         }
 
@@ -293,7 +297,7 @@
         .sl-cell-inner,
         .sl-cell-inner-dragselect {
           border: 2px solid $euiColorDarkShade;
-          border-radius: 2px;
+          border-radius: $borderRadius;
           opacity: 1;
         }
       }