[ML] Add Anomaly Swimlane Embeddable to the dashboard from the Anomal…

…y Explorer page (#68784)

* [ML] WIP attach swimlane embeddable to dashboard from the explorer page

* [ML] fix deps

* [ML] getDefaultPanelTitle

* [ML] fix TS issue

* [ML] DashboardService

* [ML] unit tests

* [ML] redirect to the dashboard

* [ML] swimlane_panel

* [ML] Anomaly Timeline panel

* [ML] swimlane container

* [ML] fix ts

* [ML] Add multiple swimlanes

* [ML] fix SwimlaneType usage

* [ML] disable edit button on update

* [ML] fix i18n translation key

* [ML] use ViewMode enum

* [ML] use navigateToUrl

* [ML] TODO for edit dashboard

* [ML] check kibana dashboard capabilities

* [ML] mlApiServicesProvider

* [ML] mlResultsServiceProvider

* [ML] fix alignment

* [ML] labels and tooltips

* [ML] fix ts issue for proxyHttpStart

* [ML] canEditDashboards check

* [ML] fix TS

* [ML] update add_to_dashboard_control.tsx

* [ML] add form label, disable control on empty swimlanes selection

* [ML] resolve PR review comments

* [ML] e2e test

* [ML] increase panel padding

* [ML] position in row

* [ML] update e2e

* [ML] add data-test-subj for search box

* [ML] PR remarks

src/plugins/dashboard/public/index.ts

@@ -32,8 +32,10 @@ export {
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
 export { DashboardStart, DashboardUrlGenerator } from './plugin';
-export { DASHBOARD_APP_URL_GENERATOR } from './url_generator';
+export { DASHBOARD_APP_URL_GENERATOR, createDashboardUrlGenerator } from './url_generator';
 export { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
+export { SavedObjectDashboard } from './saved_dashboards';
+export { SavedDashboardPanel } from './types';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new DashboardPlugin(initializerContext);

src/plugins/dashboard/public/url_generator.ts

@@ -28,6 +28,7 @@ import {
 import { setStateToKbnUrl } from '../../kibana_utils/public';
 import { UrlGeneratorsDefinition, UrlGeneratorState } from '../../share/public';
 import { SavedObjectLoader } from '../../saved_objects/public';
+import { ViewMode } from '../../embeddable/public';
 
 export const STATE_STORAGE_KEY = '_a';
 export const GLOBAL_STATE_STORAGE_KEY = '_g';
@@ -73,6 +74,11 @@ export type DashboardAppLinkGeneratorState = UrlGeneratorState<{
    * true is default
    */
   preserveSavedFilters?: boolean;
+
+  /**
+   * View mode of the dashboard.
+   */
+  viewMode?: ViewMode;
 }>;
 
 export const createDashboardUrlGenerator = (
@@ -123,6 +129,7 @@ export const createDashboardUrlGenerator = (
       cleanEmptyKeys({
         query: state.query,
         filters: filters?.filter((f) => !esFilters.isFilterPinned(f)),
+        viewMode: state.viewMode,
       }),
       { useHash },
       `${appBasePath}#/${hash}`

x-pack/package.json

@@ -61,6 +61,7 @@
     "@types/d3-shape": "^1.3.1",
     "@types/d3-time": "^1.0.10",
     "@types/d3-time-format": "^2.1.1",
+    "@types/dragselect": "^1.13.1",
     "@types/elasticsearch": "^5.0.33",
     "@types/fancy-log": "^1.3.1",
     "@types/file-saver": "^2.0.0",

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

@@ -35,6 +35,8 @@ const App: FC<AppProps> = ({ coreStart, deps }) => {
   };
   const services = {
     appName: 'ML',
+    kibanaVersion: deps.kibanaVersion,
+    share: deps.share,
     data: deps.data,
     security: deps.security,
     licenseManagement: deps.licenseManagement,

x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.js → x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx

@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { EuiLoadingChart, EuiSpacer } from '@elastic/eui';
 
-export function LoadingIndicator({ height, label }) {
+export const LoadingIndicator: FC<{ height?: number; label?: string }> = ({ height, label }) => {
   height = height ? +height : 100;
   return (
     <div
@@ -21,13 +20,9 @@ export function LoadingIndicator({ height, label }) {
       {label && (
         <>
           <EuiSpacer size="s" />
-          <div ml-loading-indicator-label="true">{label}</div>
+          <div>{label}</div>
         </>
       )}
     </div>
   );
-}
-LoadingIndicator.propTypes = {
-  height: PropTypes.number,
-  label: PropTypes.string,
 };

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

@@ -12,13 +12,15 @@ import {
 } from '../../../../../../../src/plugins/kibana_react/public';
 import { SecurityPluginSetup } from '../../../../../security/public';
 import { LicenseManagementUIPluginSetup } from '../../../../../license_management/public';
+import { SharePluginStart } from '../../../../../../../src/plugins/share/public';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
   security?: SecurityPluginSetup;
   licenseManagement?: LicenseManagementUIPluginSetup;
+  share: SharePluginStart;
 }
-export type StartServices = CoreStart & StartPlugins;
+export type StartServices = CoreStart & StartPlugins & { kibanaVersion: string };
 // 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

@@ -14,6 +14,7 @@ export interface MlContextValue {
   currentSavedSearch: SavedSearchSavedObject | null;
   indexPatterns: IndexPatternsContract;
   kibanaConfig: any; // IUiSettingsClient;
+  kibanaVersion: string;
 }
 
 export type SavedSearchQuery = object;