move embeddable content into smv in ml to remove duplication

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

@@ -28,6 +28,8 @@ import type { PageDependencies } from './routing/router';
 import { EnabledFeaturesContextProvider, MlServerInfoContextProvider } from './contexts/ml';
 import type { StartServices } from './contexts/kibana';
 import { getMlGlobalServices } from './util/get_services';
+import type { MlResultsService } from './services/results_service';
+import type { TimeSeriesExplorerService } from './util/time_series_explorer_service';
 
 export type MlDependencies = Omit<
   MlSetupDependencies,
@@ -51,7 +53,10 @@ export interface MlServicesContext {
   mlServices: MlGlobalServices;
 }
 
-export type MlGlobalServices = ReturnType<typeof getMlGlobalServices>;
+export type MlGlobalServices = ReturnType<typeof getMlGlobalServices> & {
+  mlResultsService?: MlResultsService;
+  mlTimeSeriesExplorerService?: TimeSeriesExplorerService;
+};
 
 const App: FC<AppProps> = ({
   coreStart,

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js

@@ -287,6 +287,6 @@ AnomaliesTableInternal.propTypes = {
   influencerFilter: PropTypes.func,
   tableState: PropTypes.object.isRequired,
   updateTableState: PropTypes.func.isRequired,
-  sourceIndicesWithGeoFields: PropTypes.object.isRequired,
+  sourceIndicesWithGeoFields: PropTypes.object,
   selectedJobs: PropTypes.array.isRequired,
 };

x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx

@@ -13,11 +13,11 @@ import { FormattedMessage } from '@kbn/i18n-react';
 interface Props {
   isDisabled: boolean;
   onClick: () => void;
-  mode: 'full' | 'empty';
+  emptyMode: boolean;
 }
 
-export const ForecastButton: FC<Props> = ({ isDisabled, onClick, mode = 'full' }) => {
-  const Button = mode === 'full' ? EuiButton : EuiButtonEmpty;
+export const ForecastButton: FC<Props> = ({ isDisabled, onClick, emptyMode }) => {
+  const Button = emptyMode ? EuiButtonEmpty : EuiButton;
   return (
     <Button
       onClick={onClick}

x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js

@@ -60,7 +60,7 @@ function getDefaultState() {
 
 export class ForecastingModal extends Component {
   static propTypes = {
-    buttonMode: PropTypes.string,
+    emptyMode: PropTypes.bool,
     isDisabled: PropTypes.bool,
     job: PropTypes.object,
     jobState: PropTypes.string,
@@ -70,6 +70,7 @@ export class ForecastingModal extends Component {
     entities: PropTypes.array,
     setForecastId: PropTypes.func,
     selectedForecastId: PropTypes.string,
+    onForecastComplete: PropTypes.func,
   };
 
   constructor(props) {
@@ -534,7 +535,7 @@ export class ForecastingModal extends Component {
       <ForecastButton
         onClick={this.openModal}
         isDisabled={isForecastingDisabled}
-        mode={this.props.buttonMode}
+        emptyMode={this.props.emptyMode}
       />
     );
 

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -153,7 +153,7 @@ class TimeseriesChartIntl extends Component {
     zoomToFocusLoaded: PropTypes.object,
     tooltipService: PropTypes.object.isRequired,
     tableData: PropTypes.object,
-    sourceIndicesWithGeoFields: PropTypes.object.isRequired,
+    sourceIndicesWithGeoFields: PropTypes.object,
   };
 
   static contextType = context;

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_annotations_table.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { FC } from 'react';
+import React from 'react';
+import { EuiAccordion, EuiBadge, EuiCallOut, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { AnnotationsTable } from '../../components/annotations/annotations_table';
+
+interface Props {
+  chartDetails: any;
+  detectors: any;
+  focusAnnotationData: any;
+  focusAnnotationError: any;
+  selectedDetectorIndex: number;
+  selectedJobId: string;
+}
+
+export const TimeSeriesExplorerAnnotationsTable: FC<Props> = ({
+  chartDetails,
+  detectors,
+  focusAnnotationData,
+  focusAnnotationError,
+  selectedDetectorIndex,
+  selectedJobId,
+}) => {
+  return (
+    <>
+      {focusAnnotationError !== undefined && (
+        <>
+          <EuiTitle data-test-subj="mlAnomalyExplorerAnnotations error" size={'xs'}>
+            <h2>
+              <FormattedMessage
+                id="xpack.ml.timeSeriesExplorer.annotationsErrorTitle"
+                defaultMessage="Annotations"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiPanel>
+            <EuiCallOut
+              title={i18n.translate('xpack.ml.timeSeriesExplorer.annotationsErrorCallOutTitle', {
+                defaultMessage: 'An error occurred loading annotations:',
+              })}
+              color="danger"
+              iconType="warning"
+            >
+              <p>{focusAnnotationError}</p>
+            </EuiCallOut>
+          </EuiPanel>
+          <EuiSpacer size="m" />
+        </>
+      )}
+      {focusAnnotationData && focusAnnotationData.length > 0 && (
+        <>
+          <EuiAccordion
+            id={'mlAnnotationsAccordion'}
+            buttonContent={
+              <EuiTitle size={'xs'}>
+                <h2>
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.annotationsTitle"
+                    defaultMessage="Annotations {badge}"
+                    values={{
+                      badge: (
+                        <EuiBadge color={'hollow'}>
+                          <FormattedMessage
+                            id="xpack.ml.explorer.annotationsTitleTotalCount"
+                            defaultMessage="Total: {count}"
+                            values={{ count: focusAnnotationData.length }}
+                          />
+                        </EuiBadge>
+                      ),
+                    }}
+                  />
+                </h2>
+              </EuiTitle>
+            }
+            data-test-subj="mlAnomalyExplorerAnnotations loaded"
+          >
+            <AnnotationsTable
+              chartDetails={chartDetails}
+              detectorIndex={selectedDetectorIndex}
+              detectors={detectors}
+              jobIds={[selectedJobId]}
+              annotations={focusAnnotationData}
+              isSingleMetricViewerLinkVisible={false}
+              isNumberBadgeVisible={true}
+            />
+          </EuiAccordion>
+          <EuiSpacer size="m" />
+        </>
+      )}
+    </>
+  );
+};