Vended d refresh after refactor

changelogs/fragments/9745.yml

@@ -0,0 +1,2 @@
+feat:
+- [Integration] Vended Dashboards Synchronization #9745 ([#9745](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9745))

src/plugins/dashboard/config.ts

@@ -32,6 +32,7 @@ import { schema, TypeOf } from '@osd/config-schema';
 
 export const configSchema = schema.object({
   allowByValueEmbeddables: schema.boolean({ defaultValue: false }),
+  directQueryConnectionSync: schema.boolean({ defaultValue: false }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/dashboard/opensearch_dashboards.json

@@ -14,5 +14,5 @@
   "optionalPlugins": ["home", "share", "usageCollection"],
   "server": true,
   "ui": true,
-  "requiredBundles": ["opensearchDashboardsUtils", "opensearchDashboardsReact", "home"]
+  "requiredBundles": ["opensearchDashboardsUtils", "opensearchDashboardsReact", "home", "dataSourceManagement"]
 }

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -59,8 +59,10 @@
   OpenSearchDashboardsReactContext,
   OpenSearchDashboardsReactContextValue,
 } from '../../../../opensearch_dashboards_react/public';
+import { DirectQuerySyncProvider } from './direct_query_sync/direct_query_sync_context';
 import { PLACEHOLDER_EMBEDDABLE } from './placeholder';
 import { PanelPlacementMethod, IPanelPlacementArgs } from './panel/dashboard_panel_placement';
+import { DashboardFeatureFlagConfig } from '../../plugin';
 
 export interface DashboardContainerInput extends ContainerInput {
   viewMode: ViewMode;
@@ -104,6 +106,9 @@
   SavedObjectFinder: React.ComponentType<any>;
   ExitFullScreenButton: React.ComponentType<any>;
   uiActions: UiActionsStart;
+  savedObjectsClient: CoreStart['savedObjects']['client'];
+  http: CoreStart['http'];
+  dashboardFeatureFlagConfig: DashboardFeatureFlagConfig;
 }
 
 export type DashboardReactContextValue = OpenSearchDashboardsReactContextValue<
@@ -121,6 +126,9 @@
 
   private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
   private readonly logos: Logos;
+  private hasRendered: boolean = false;
+  private renderCount: number = 0;
+  private instanceId: string;
 
   constructor(
     initialInput: DashboardContainerInput,
@@ -136,10 +144,22 @@
       options.embeddable.getEmbeddableFactory,
       parent
     );
+    this.instanceId = uuid.v4();
+    console.log(`[DashboardContainer] Constructor called (instanceId: ${this.instanceId})`);
     this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
     this.logos = options.chrome.logos;
   }
 
+  public componentDidMount() {
+    console.log(`[DashboardContainer] componentDidMount (instanceId: ${this.instanceId})`);
+  }
+
+  public componentWillUnmount() {
+    console.log(`[DashboardContainer] Unmounting (instanceId: ${this.instanceId})`);
+    this.hasRendered = false;
+    this.renderCount = 0;
+  }
+
   protected createNewPanelState<
     TEmbeddableInput extends EmbeddableInput,
     TEmbeddable extends IEmbeddable<TEmbeddableInput, any>
@@ -190,10 +210,6 @@
     previousPanelState: DashboardPanelState<EmbeddableInput>,
     newPanelState: Partial<PanelState>
   ) {
-    // TODO: In the current infrastructure, embeddables in a container do not react properly to
-    // changes. Removing the existing embeddable, and adding a new one is a temporary workaround
-    // until the container logic is fixed.
-
     const finalPanels = { ...this.input.panels };
     delete finalPanels[previousPanelState.explicitInput.id];
     const newPanelId = newPanelState.explicitInput?.id ? newPanelState.explicitInput.id : uuid.v4();
@@ -235,20 +251,48 @@
   }
 
   public render(dom: HTMLElement) {
-    ReactDOM.render(
-      <I18nProvider>
-        <OpenSearchDashboardsContextProvider services={this.options}>
-          <DashboardViewport
-            key={this.id}
-            renderEmpty={this.renderEmpty}
-            logos={this.logos}
-            container={this}
-            PanelComponent={this.embeddablePanel}
-          />
-        </OpenSearchDashboardsContextProvider>
-      </I18nProvider>,
-      dom
+    this.renderCount++;
+    console.log(
+      `[DashboardContainer] Rendering (instanceId: ${this.instanceId}, count: ${this.renderCount}, hasRendered: ${this.hasRendered})`
     );
+
+    const DashboardContainerWrapper = () => {
+      return (
+        <I18nProvider>
+          <OpenSearchDashboardsContextProvider services={this.options}>
+            <DirectQuerySyncProvider
+              savedObjectsClient={this.options.savedObjectsClient}
+              http={this.options.http}
+              notifications={this.options.notifications}
+              isDirectQuerySyncEnabled={
+                this.options.dashboardFeatureFlagConfig.directQueryConnectionSync
+              }
+              container={this}
+            >
+              <DashboardViewport
+                key={this.id}
+                renderEmpty={this.renderEmpty}
+                logos={this.logos}
+                container={this}
+                PanelComponent={this.embeddablePanel}
+              />
+            </DirectQuerySyncProvider>
+          </OpenSearchDashboardsContextProvider>
+        </I18nProvider>
+      );
+    };
+
+    if (!this.hasRendered) {
+      console.log(
+        `[DashboardContainer] Initial render with ReactDOM.render (instanceId: ${this.instanceId})`
+      );
+      ReactDOM.render(<DashboardContainerWrapper />, dom);
+      this.hasRendered = true;
+    } else {
+      console.log(
+        `[DashboardContainer] Skipping ReactDOM.render, already rendered (instanceId: ${this.instanceId})`
+      );
+    }
   }
 
   protected getInheritedInput(id: string): InheritedChildInput {

src/plugins/dashboard/public/application/embeddable/direct_query_sync/_dashboard_direct_query_sync.scss

@@ -0,0 +1,4 @@
+.dshDashboardGrid__syncBar {
+  margin-bottom: $euiSizeS;
+  margin-left: $euiSizeS;
+}

src/plugins/dashboard/public/application/embeddable/direct_query_sync/dashboard_direct_query_sync.test.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DashboardDirectQuerySync } from './dashboard_direct_query_sync';
+
+describe('DashboardDirectQuerySync', () => {
+  const mockSynchronize = jest.fn();
+
+  it('renders sync info with refresh link when state is terminal', () => {
+    render(
+      <DashboardDirectQuerySync
+        loadStatus="success"
+        lastRefreshTime={Date.now() - 60000}
+        refreshInterval={2}
+        onSynchronize={mockSynchronize}
+      />
+    );
+
+    expect(screen.getByText(/Data scheduled to sync every/i)).toBeInTheDocument();
+    expect(screen.getByText(/Sync data/i)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText(/Sync data/i));
+    expect(mockSynchronize).toHaveBeenCalled();
+  });
+
+  it('renders loading spinner when state is not terminal', () => {
+    render(
+      <DashboardDirectQuerySync
+        loadStatus="running"
+        lastRefreshTime={undefined}
+        refreshInterval={undefined}
+        onSynchronize={mockSynchronize}
+      />
+    );
+
+    expect(screen.getByText(/Data sync is in progress/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Sync data/i)).toBeNull();
+  });
+
+  it('handles missing lastRefreshTime and refreshInterval gracefully', () => {
+    render(
+      <DashboardDirectQuerySync
+        loadStatus="success"
+        lastRefreshTime={undefined}
+        refreshInterval={undefined}
+        onSynchronize={mockSynchronize}
+      />
+    );
+
+    expect(
+      screen.getByText(
+        (content) => content.includes('Data scheduled to sync every') && content.includes('--')
+      )
+    ).toBeInTheDocument();
+
+    expect(screen.getByText(/Sync data/i)).toBeInTheDocument();
+  });
+});

src/plugins/dashboard/public/application/embeddable/direct_query_sync/dashboard_direct_query_sync.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { DirectQueryLoadingStatus } from '../../../../../data_source_management/public';
+import { EMR_STATES, intervalAsMinutes } from './direct_query_sync';
+import './_dashboard_direct_query_sync.scss';
+
+export interface DashboardDirectQuerySyncProps {
+  loadStatus?: DirectQueryLoadingStatus;
+  lastRefreshTime?: number;
+  refreshInterval?: number;
+  onSynchronize: () => void;
+  className?: string;
+}
+
+export const DashboardDirectQuerySync: React.FC<DashboardDirectQuerySyncProps> = ({
+  loadStatus,
+  lastRefreshTime,
+  refreshInterval,
+  onSynchronize,
+  className,
+}) => {
+  console.log('DashboardDirectQuerySync: Rendering with props:', {
+    loadStatus,
+    lastRefreshTime,
+    refreshInterval,
+    className,
+    onSynchronize: '[Function]', // Simplified since onSynchronize is guaranteed to be a function
+  });
+
+  // If loadStatus is undefined, default to a non-terminal state to avoid errors
+  const state = loadStatus ? EMR_STATES.get(loadStatus)! : { ord: 0, terminal: false };
+  console.log('DashboardDirectQuerySync: Computed state=', state);
+
+  return (
+    <div className={className} data-test-subj="dashboardDirectQuerySyncBar">
+      {state.terminal ? (
+        <>
+          {console.log('DashboardDirectQuerySync: Rendering terminal state UI')}
+          <EuiText size="s">
+            {i18n.translate('dashboard.directQuerySync.dataScheduledToSync', {
+              defaultMessage: 'Data scheduled to sync every {interval}. Last sync: {lastSyncTime}.',
+              values: {
+                interval: refreshInterval ? intervalAsMinutes(1000 * refreshInterval) : '--',
+                lastSyncTime: lastRefreshTime
+                  ? `${new Date(lastRefreshTime).toLocaleString()} (${intervalAsMinutes(
+                      new Date().getTime() - lastRefreshTime
+                    )} ago)`
+                  : '--',
+              },
+            })}
+
+            <EuiLink onClick={onSynchronize}>
+              {i18n.translate('dashboard.directQuerySync.syncDataLink', {
+                defaultMessage: 'Sync data',
+              })}
+            </EuiLink>
+          </EuiText>
+        </>
+      ) : (
+        <>
+          {console.log('DashboardDirectQuerySync: Rendering in-progress state UI')}
+          <EuiCallOut size="s">
+            <EuiLoadingSpinner size="s" />
+
+            {i18n.translate('dashboard.directQuerySync.dataSyncInProgress', {
+              defaultMessage:
+                'Data sync is in progress ({progress}% complete). The dashboard will reload on completion.',
+              values: {
+                progress: state.ord,
+              },
+            })}
+          </EuiCallOut>
+        </>
+      )}
+    </div>
+  );
+};