[Feature] Acceleration components' data implementation (opensearch-pr…

…oject#1521) (opensearch-project#1536)

* 1st commit of acc details connection

* Update the snapshot

* Fix the interface naming

* Fix the status

* Add the index health

* Add change the field name into action

* Wired up schema tab

* Cache is working 0 with max depth exceeding issue

* update snapshots

* Fix the infinite loop and apply the status check correctly

* Implement the refresh button

* Rebase after apply new interface 1

* Rebase after apply new interface 2 + finalize the design of refreshing button

* refactor some comments

* Fix table type column

* Fix empty item with replacement of unredered -

* Fix the destination index column

* Fix status

* Fix the skip index name

* Fix the destination index column behavior when it is skip index

* Correct the render behavior for skip index flyout

* Fix the table loading infinite loop

* Modify the behavior of getting this refreh interval and type for skipping

* Fix the data source at the flyout details tab

* Swtich the data connection tabs back to default order and update snapshots

* Add refresh time for refreshing

* Add loading panel 0

* Fix loading state for table

* Add the refresh type column to acceleration table

* Add acceleration table test

* Add acceleration table test 2

* Add refresh field to flyout

* Fix some comments

* Fix some comments 2

* Add null/undefined check for flintIndexName

* remove console logs

* Add eslint-dsiable for export in dsl

---------

(cherry picked from commit 71dccc3)

Signed-off-by: Ryan Liang <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
(cherry picked from commit 0a03c16)

auto_sync_commit_metadata.json

@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "2d18a4f3598112891505e82811f95254c8df40f1",
-    "last_gitfarm_commit": "ce47a968ccdb418f32046abe5d3955aa453169b8"
+    "last_github_commit": "0a03c162eaa0a57cda2c263ce9adf41f98e49021",
+    "last_gitfarm_commit": "fbfad7ff0475d2d1ccbdf5f6493b145ba7296c38"
 }

common/constants/shared.ts

@@ -11,6 +11,7 @@ export const DSL_BASE = '/api/dsl';
 export const DSL_SEARCH = '/search';
 export const DSL_CAT = '/cat.indices';
 export const DSL_MAPPING = '/indices.getFieldMapping';
+export const DSL_SETTINGS = '/indices.getFieldSettings';
 export const OBSERVABILITY_BASE = '/api/observability';
 export const INTEGRATIONS_BASE = '/api/integrations';
 export const JOBS_BASE = '/query/jobs';

public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap

@@ -1287,6 +1287,7 @@ exports[`Panels View Component renders panel view container with visualizations
         "fetch": [Function],
         "fetchFields": [Function],
         "fetchIndices": [Function],
+        "fetchSettings": [Function],
         "http": [MockFunction],
       }
     }
@@ -1754,6 +1755,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 "fetch": [Function],
                                 "fetchFields": [Function],
                                 "fetchIndices": [Function],
+                                "fetchSettings": [Function],
                                 "http": [MockFunction],
                               }
                             }
@@ -3520,6 +3522,7 @@ exports[`Panels View Component renders panel view container without visualizatio
         "fetch": [Function],
         "fetchFields": [Function],
         "fetchIndices": [Function],
+        "fetchSettings": [Function],
         "http": [MockFunction],
       }
     }
@@ -3985,6 +3988,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 "fetch": [Function],
                                 "fetchFields": [Function],
                                 "fetchIndices": [Function],
+                                "fetchSettings": [Function],
                                 "http": [MockFunction],
                               }
                             }

public/components/datasources/components/__tests__/acceleration_details_flyout.test.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { AccelerationDetailsFlyout } from '../manage/accelerations/acceleration_details_flyout';
+import * as coreRefsModule from '../../../../framework/core_refs';
+
+jest.mock('../../../../framework/core_refs', () => {
+  const actualModule = jest.requireActual('../../../../framework/core_refs');
+  return {
+    coreRefs: {
+      ...actualModule.coreRefs,
+      dslService: {
+        fetchFields: jest.fn().mockResolvedValue({ data: 'mockFieldData' }),
+        fetchSettings: jest.fn().mockResolvedValue({ data: 'mockSettingsData' }),
+        fetchIndices: jest.fn().mockResolvedValue({ data: 'mockIndexData' }),
+      },
+    },
+  };
+});
+
+jest.mock('../../../../framework/core_refs', () => {
+  return {
+    coreRefs: {
+      dslService: {
+        fetchFields: jest.fn().mockResolvedValue({ data: 'mockFieldData' }),
+        fetchSettings: jest.fn().mockResolvedValue({ data: 'mockSettingsData' }),
+        fetchIndices: jest.fn().mockResolvedValue({
+          status: 'fulfilled',
+          action: 'getIndexInfo',
+          data: [
+            {
+              health: 'yellow',
+              status: 'open',
+              index: 'flint_mys3_default_http_count_view',
+              uuid: 'VImREbK4SMqJ-i6hSB84eQ',
+              pri: '1',
+              rep: '1',
+              'docs.count': '0',
+              'docs.deleted': '0',
+              'store.size': '208b',
+              'pri.store.size': '208b',
+            },
+          ],
+        }),
+      },
+    },
+  };
+});
+
+const mockAcceleration = {
+  index: 'mockIndex',
+  dataSourceName: 'mockDataSource',
+  acceleration: {
+    flintIndexName: 'testIndex',
+  },
+};
+
+configure({ adapter: new Adapter() });
+
+describe('AccelerationDetailsFlyout Component Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('fetches acceleration details on mount', async () => {
+    mount(<AccelerationDetailsFlyout acceleration={mockAcceleration} />);
+
+    expect(coreRefsModule.coreRefs.dslService!.fetchFields).toHaveBeenCalledWith('testIndex');
+    expect(coreRefsModule.coreRefs.dslService!.fetchSettings).toHaveBeenCalledWith('testIndex');
+    expect(coreRefsModule.coreRefs.dslService!.fetchIndices).toHaveBeenCalledWith('testIndex');
+  });
+
+  it('switches tabs correctly', async () => {
+    const wrapper = mount(<AccelerationDetailsFlyout acceleration={mockAcceleration} />);
+    await new Promise(setImmediate);
+    wrapper.update();
+
+    const schemaTabExists = wrapper.find('EuiTab').someWhere((node) => node.text() === 'Schema');
+    expect(schemaTabExists).toBeTruthy();
+
+    const schemaTab = wrapper.find('EuiTab').filterWhere((node) => node.text() === 'Schema');
+    schemaTab.simulate('click');
+    await new Promise(setImmediate);
+    wrapper.update();
+
+    expect(wrapper.find('AccelerationSchemaTab').exists()).toBe(true);
+
+    // TODO: SQL DEFINATION TAB CHECK
+  });
+});

public/components/datasources/components/__tests__/acceleration_table.test.tsx

@@ -0,0 +1,163 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { mount, configure } from 'enzyme';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import { AccelerationTable } from '../manage/accelerations/acceleration_table';
+import { act } from 'react-dom/test-utils';
+import Adapter from 'enzyme-adapter-react-16';
+import { ACC_LOADING_MSG } from '../manage/accelerations/utils/acceleration_utils';
+import { ReactWrapper } from 'enzyme';
+
+const accelerationCache = {
+  accelerations: [
+    {
+      flintIndexName: 'flint_mys3_default_http_count_view',
+      type: 'materialized',
+      database: 'default',
+      table: null,
+      indexName: 'http_count_view',
+      autoRefresh: true,
+      status: 'refreshing',
+    },
+    {
+      flintIndexName: 'flint_mys3_default_http_count_view_alt',
+      type: 'materialized',
+      database: 'default',
+      table: null,
+      indexName: 'http_count_view_alt',
+      autoRefresh: true,
+      status: 'refreshing',
+    },
+    {
+      flintIndexName: 'flint_mys3_default_http_logs',
+      type: 'materialized',
+      database: 'default',
+      table: null,
+      indexName: 'http_logs',
+      autoRefresh: true,
+      status: 'deleted',
+    },
+    {
+      flintIndexName: 'flint_mys3_default_http_logs_skipping_index',
+      type: 'skipping',
+      database: 'default',
+      table: 'http_logs',
+      indexName: null,
+      autoRefresh: false,
+      status: 'active',
+    },
+    {
+      flintIndexName: 'flint_mys3_other_http_count_view',
+      type: 'materialized',
+      database: 'other',
+      table: null,
+      indexName: 'http_count_view',
+      autoRefresh: true,
+      status: 'refreshing',
+    },
+  ],
+  lastUpdated: 'Thu, 14 Mar 2024 04:05:53 GMT',
+  status: 'Updated',
+};
+
+jest.mock('../../../../framework/catalog_cache/cache_manager', () => ({
+  CatalogCacheManager: {
+    getOrCreateAccelerationsByDataSource: jest.fn().mockReturnValue(accelerationCache),
+  },
+}));
+
+jest.mock('../../../../framework/catalog_cache/cache_loader', () => ({
+  useLoadAccelerationsToCache: jest.fn(() => ({
+    loadStatus: 'success',
+    startLoading: jest.fn(),
+  })),
+}));
+
+jest.mock('../../../../plugin', () => ({
+  getRenderAccelerationDetailsFlyout: jest.fn(() => jest.fn()),
+}));
+
+describe('AccelerationTable Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders without crashing', () => {
+    const wrapper = mount(<AccelerationTable dataSourceName="testDataSource" />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('shows loading spinner when refreshing accelerations', async () => {
+    jest.mock('../../../../framework/catalog_cache/cache_loader', () => ({
+      useLoadAccelerationsToCache: jest.fn(() => ({
+        loadStatus: 'loading',
+        startLoading: jest.fn(),
+      })),
+    }));
+
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(<AccelerationTable dataSourceName="testDataSource" />);
+    });
+
+    wrapper!.update();
+
+    await act(async () => {
+      wrapper!.find('[data-test-subj="refreshButton"]').simulate('click');
+    });
+    wrapper!.update();
+
+    expect(wrapper!.find(EuiLoadingSpinner).exists()).toBe(true);
+    expect(wrapper!.text()).toContain(ACC_LOADING_MSG);
+
+    jest.restoreAllMocks();
+  });
+
+  it('correctly displays accelerations in the table', async () => {
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(<AccelerationTable dataSourceName="testDataSource" />);
+    });
+    wrapper!.update();
+
+    const tableRows = wrapper!.find('EuiTableRow');
+    expect(tableRows.length).toBe(accelerationCache.accelerations.length);
+  });
+
+  it('filters rows based on active status correctly', async () => {
+    jest.mock('../../../../framework/catalog_cache/cache_loader', () => ({
+      useLoadAccelerationsToCache: jest.fn(() => ({
+        loadStatus: 'loading',
+        startLoading: jest.fn(),
+      })),
+    }));
+
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(<AccelerationTable dataSourceName="testDataSource" />);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      wrapper!.update();
+    });
+
+    const activeStatusRows = wrapper!.find('tr.euiTableRow').filterWhere((node) => {
+      return node.find('.euiFlexItem').someWhere((subNode) => subNode.text() === 'active');
+    });
+
+    expect(activeStatusRows.length).toBe(
+      accelerationCache.accelerations.filter((acc) => acc.status === 'active').length
+    );
+    jest.restoreAllMocks();
+  });
+
+  it('displays updated time correctly', async () => {
+    let wrapper: ReactWrapper;
+    await act(async () => {
+      wrapper = mount(<AccelerationTable dataSourceName="testDataSource" />);
+    });
+    wrapper!.update();
+
+    expect(wrapper!.text()).toContain(accelerationCache.lastUpdated);
+  });
+});