[Feature] Acceleration components' data implementation (#1521)

* 1st commit of acc details connection Signed-off-by: Ryan Liang <[email protected]> * Update the snapshot Signed-off-by: Ryan Liang <[email protected]> * Fix the interface naming Signed-off-by: Ryan Liang <[email protected]> * Fix the status Signed-off-by: Ryan Liang <[email protected]> * Add the index health Signed-off-by: Ryan Liang <[email protected]> * Add change the field name into action Signed-off-by: Ryan Liang <[email protected]> * Wired up schema tab Signed-off-by: Ryan Liang <[email protected]> * Cache is working 0 with max depth exceeding issue Signed-off-by: Ryan Liang <[email protected]> * update snapshots Signed-off-by: Ryan Liang <[email protected]> * Fix the infinite loop and apply the status check correctly Signed-off-by: Ryan Liang <[email protected]> * Implement the refresh button Signed-off-by: Ryan Liang <[email protected]> * Rebase after apply new interface 1 Signed-off-by: Ryan Liang <[email protected]> * Rebase after apply new interface 2 + finalize the design of refreshing button Signed-off-by: Ryan Liang <[email protected]> * refactor some comments Signed-off-by: Ryan Liang <[email protected]> * Fix table type column Signed-off-by: Ryan Liang <[email protected]> * Fix empty item with replacement of unredered - Signed-off-by: Ryan Liang <[email protected]> * Fix the destination index column Signed-off-by: Ryan Liang <[email protected]> * Fix status Signed-off-by: Ryan Liang <[email protected]> * Fix the skip index name Signed-off-by: Ryan Liang <[email protected]> * Fix the destination index column behavior when it is skip index Signed-off-by: Ryan Liang <[email protected]> * Correct the render behavior for skip index flyout Signed-off-by: Ryan Liang <[email protected]> * Fix the table loading infinite loop Signed-off-by: Ryan Liang <[email protected]> * Modify the behavior of getting this refreh interval and type for skipping Signed-off-by: Ryan Liang <[email protected]> * Fix the data source at the flyout details tab Signed-off-by: Ryan Liang <[email protected]> * Swtich the data connection tabs back to default order and update snapshots Signed-off-by: Ryan Liang <[email protected]> * Add refresh time for refreshing Signed-off-by: Ryan Liang <[email protected]> * Add loading panel 0 Signed-off-by: Ryan Liang <[email protected]> * Fix loading state for table Signed-off-by: Ryan Liang <[email protected]> * Add the refresh type column to acceleration table Signed-off-by: Ryan Liang <[email protected]> * Add acceleration table test Signed-off-by: Ryan Liang <[email protected]> * Add acceleration table test 2 Signed-off-by: Ryan Liang <[email protected]> * Add refresh field to flyout Signed-off-by: Ryan Liang <[email protected]> * Fix some comments Signed-off-by: Ryan Liang <[email protected]> * Fix some comments 2 Signed-off-by: Ryan Liang <[email protected]> * Add null/undefined check for flintIndexName Signed-off-by: Ryan Liang <[email protected]> * remove console logs Signed-off-by: Ryan Liang <[email protected]> * Add eslint-dsiable for export in dsl Signed-off-by: Ryan Liang <[email protected]> --------- Signed-off-by: Ryan Liang <[email protected]>
opensearch-project · Mar 14, 2024 · 71dccc3 · 71dccc3
1 parent f21939d
commit 71dccc3
Show file tree

Hide file tree

Showing 16 changed files with 784 additions and 183 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -10,6 +10,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';

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/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],
                               }
                             }

diff --git a/public/components/datasources/components/__tests__/acceleration_details_flyout.test.tsx b/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
+  });
+});
diff --git a/public/components/datasources/components/__tests__/acceleration_table.test.tsx b/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);
+  });
+});