x

src/plugins/discover/public/application/view_components/canvas/discover_actions.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, forwardRef, ReactNode, useImperativeHandle } from 'react';
+
+interface DiscoverActionsProps {
+  initialActions?: ReactNode[];
+}
+
+interface RegisteredAction {
+  id: string;
+  action: ReactNode;
+}
+
+// Use forwardRef to allow the parent to pass a ref
+const DiscoverActions = forwardRef<
+  { registerAction: (action: ReactNode) => string },
+  DiscoverActionsProps
+>(({ initialActions = [] }, ref) => {
+  const [registeredActions, setRegisteredActions] = useState<RegisteredAction[]>(
+    initialActions.map((action, index) => ({ id: `action-${index}`, action }))
+  );
+
+  const registerAction = (action: ReactNode): string => {
+    const id = `action-${registeredActions.length}`;
+    setRegisteredActions([...registeredActions, { id, action }]);
+    return id;
+  };
+
+  // Expose the registerAction function to the parent component
+  useImperativeHandle(ref, () => ({
+    registerAction,
+  }));
+
+  return (
+    <>
+      {registeredActions.map(({ id, action }) => (
+        <div key={id}>{React.cloneElement(action as React.ReactElement, { key: id })}</div>
+      ))}
+    </>
+  );
+});
+
+export { DiscoverActions };

src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss

@@ -12,6 +12,12 @@
     position: relative;
   }
 
+  &_actions {
+    position: absolute;
+    top: 0;
+    right: 30px;
+  }
+
   &_options {
     position: absolute;
     top: 0;

src/plugins/discover/public/application/view_components/canvas/index.tsx

@@ -5,7 +5,14 @@
 
 import { i18n } from '@osd/i18n';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { EuiButtonIcon, EuiContextMenu, EuiPanel, EuiPopover, EuiSwitch } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiPanel,
+  EuiPopover,
+  EuiSwitch,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { TopNav } from './top_nav';
 import { ViewProps } from '../../../../../data_explorer/public';
 import { DiscoverTable } from './discover_table';
@@ -23,6 +30,7 @@ import { DEFAULT_COLUMNS_SETTING, MODIFY_COLUMNS_ON_SWITCH } from '../../../../c
 import { OpenSearchSearchHit } from '../../../application/doc_views/doc_views_types';
 import './discover_canvas.scss';
 import { getNewDiscoverSetting, setNewDiscoverSetting } from '../../components/utils/local_storage';
+import { DiscoverActions } from './discover_actions';
 
 // eslint-disable-next-line import/no-default-export
 export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewProps) {
@@ -145,6 +153,20 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
     </EuiPopover>
   );
 
+  const discoverActionsRef = useRef<{ registerAction: (action: React.ReactNode) => string } | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (discoverActionsRef.current) {
+      discoverActionsRef.current.registerAction(
+        <EuiButtonEmpty className="dscCanvas_actions" size="s" iconType="lensApp">
+          Generate anomaly detector
+        </EuiButtonEmpty>
+      );
+    }
+  }, [data$, fetchState]);
+
   return (
     <EuiPanel
       panelRef={panelRef}
@@ -171,6 +193,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
         <EuiPanel hasShadow={false} paddingSize="none" className="dscCanvas_results">
           <MemoizedDiscoverChartContainer {...fetchState} />
           <MemoizedDiscoverTable rows={rows} scrollToTop={scrollToTop} />
+          <DiscoverActions ref={discoverActionsRef} />
           <DiscoverOptions />
         </EuiPanel>
       )}