[Feature] Acceleration Actions Implementation (#1540)

* Refactor the icon clicks and introduce vacuum to flyout inside icon Signed-off-by: Ryan Liang <[email protected]> * Add vacuum icon for acceleration table Signed-off-by: Ryan Liang <[email protected]> * Add DELETE ui flow for acceleration table only Signed-off-by: Ryan Liang <[email protected]> * Add VACUUM flow to acceleration table only Signed-off-by: Ryan Liang <[email protected]> * Handle skip index naming in overlay Signed-off-by: Ryan Liang <[email protected]> * Refactor the overlay logic a bit in acceleration table class Signed-off-by: Ryan Liang <[email protected]> * Use util function for creating displayIndexName in overlay Signed-off-by: Ryan Liang <[email protected]> * Add delete flow for acceleration table 0 Signed-off-by: Ryan Liang <[email protected]> * Bond refresh logic when delete was successful Signed-off-by: Ryan Liang <[email protected]> * Add vacuum flow for acceleration table Signed-off-by: Ryan Liang <[email protected]> * Rename the class into acceleration operations Signed-off-by: Ryan Liang <[email protected]> * Switch the acc flyout icon into broom Signed-off-by: Ryan Liang <[email protected]> * add vacuum on acc flyout 0 Signed-off-by: Ryan Liang <[email protected]> * Change to closing overlay immediately after clicking confirm Signed-off-by: Ryan Liang <[email protected]> * Add flyout reset and fix the confirm behavior Signed-off-by: Ryan Liang <[email protected]> * add vacuum on acc flyout final Signed-off-by: Ryan Liang <[email protected]> * Add close flyout after the succeed status check Signed-off-by: Ryan Liang <[email protected]> * Add teh refresh in acc flyout and trigger after delete/vacuum Signed-off-by: Ryan Liang <[email protected]> * remove comment Signed-off-by: Ryan Liang <[email protected]> * Mini refactor on load status in operation class Signed-off-by: Ryan Liang <[email protected]> * Fix the mv flow Signed-off-by: Ryan Liang <[email protected]> * Remove the sql definition tab Signed-off-by: Ryan Liang <[email protected]> * Correct the visualization of show refresh interval in flyout Signed-off-by: Ryan Liang <[email protected]> * Update the show time logic with refresh + time zone localization Signed-off-by: Ryan Liang <[email protected]> * Define the behavior of refresh icon in both table and flyout Signed-off-by: Ryan Liang <[email protected]> * Update teh acc table test to fix the build Signed-off-by: Ryan Liang <[email protected]> * Update utils to consume the sync action Signed-off-by: Ryan Liang <[email protected]> * Add sync flow to table behavior but with fail status Signed-off-by: Ryan Liang <[email protected]> * Add sync flow to detail flyout but with fail status Signed-off-by: Ryan Liang <[email protected]> * Add the restriction for only sync active acceleration Signed-off-by: Ryan Liang <[email protected]> * Fix the navigate to datasource link Signed-off-by: Ryan Liang <[email protected]> * Implement the single toast control for each status Signed-off-by: Ryan Liang <[email protected]> * Fix keep pulling after switch rendering Signed-off-by: Ryan Liang <[email protected]> * Fix types Signed-off-by: Ryan Liang <[email protected]> * Remove the sql definition class Signed-off-by: Ryan Liang <[email protected]> * Add basic tests for acceleration overlay Signed-off-by: Ryan Liang <[email protected]> * Add basic tests for acceleration operation Signed-off-by: Ryan Liang <[email protected]> * Remove console log Signed-off-by: Ryan Liang <[email protected]> * Remove refresh icon in utils Signed-off-by: Ryan Liang <[email protected]> * Remove the final status check for sync action Signed-off-by: Ryan Liang <[email protected]> * remove unnecessary check Signed-off-by: Ryan Liang <[email protected]> * remove stable datasource from dependencies array Signed-off-by: Ryan Liang <[email protected]> * Resolve conflicts Signed-off-by: Ryan Liang <[email protected]> * Fix lint Signed-off-by: Ryan Liang <[email protected]> * Fix type in types Signed-off-by: Ryan Liang <[email protected]> * Finalize the name for skipping index Signed-off-by: Ryan Liang <[email protected]> * Refactor testing constants Signed-off-by: Ryan Liang <[email protected]> * Upadate the class prop to remove unused index name Signed-off-by: Ryan Liang <[email protected]> --------- Signed-off-by: Ryan Liang <[email protected]> (cherry picked from commit 376fde4) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Mar 18, 2024 · 88d1118 · 88d1118
1 parent d960b56
commit 88d1118
Show file tree

Hide file tree

Showing 17 changed files with 626 additions and 147 deletions.
diff --git a/public/components/datasources/components/__tests__/acceleration_action_overlay.test.tsx b/public/components/datasources/components/__tests__/acceleration_action_overlay.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { EuiOverlayMask, EuiConfirmModal, EuiFieldText } from '@elastic/eui';
+import {
+  AccelerationActionOverlay,
+  AccelerationActionOverlayProps,
+} from '../manage/accelerations/acceleration_action_overlay';
+import { skippingIndexAcceleration } from '../../../../../test/datasources';
+import { act } from 'react-dom/test-utils';
+
+configure({ adapter: new Adapter() });
+
+describe('AccelerationActionOverlay Component Tests', () => {
+  let props: AccelerationActionOverlayProps;
+
+  beforeEach(() => {
+    props = {
+      isVisible: true,
+      actionType: 'delete',
+      acceleration: skippingIndexAcceleration,
+      dataSourceName: 'test-datasource',
+      onCancel: jest.fn(),
+      onConfirm: jest.fn(),
+    };
+  });
+
+  it('renders correctly', () => {
+    const wrapper = mount(<AccelerationActionOverlay {...props} />);
+    expect(wrapper.find(EuiOverlayMask).exists()).toBe(true);
+    expect(wrapper.find(EuiConfirmModal).exists()).toBe(true);
+    expect(wrapper.text()).toContain('Delete acceleration');
+  });
+
+  it('calls onConfirm when confirm button is clicked and confirm is enabled', async () => {
+    const wrapper = mount(<AccelerationActionOverlay {...props} />);
+
+    if (props.actionType === 'vacuum') {
+      await act(async () => {
+        const onChange = wrapper.find(EuiFieldText).first().prop('onChange');
+        if (typeof onChange === 'function') {
+          onChange({
+            target: { value: props.acceleration!.indexName },
+          } as any);
+        }
+      });
+      wrapper.update();
+    }
+    wrapper
+      .find('button')
+      .filterWhere((button) => button.text().includes('Delete'))
+      .simulate('click');
+    expect(props.onConfirm).toHaveBeenCalled();
+  });
+
+  it('calls onCancel when cancel button is clicked', () => {
+    const wrapper = mount(<AccelerationActionOverlay {...props} />);
+
+    wrapper
+      .find('button')
+      .filterWhere((button) => button.text() === 'Cancel')
+      .simulate('click');
+
+    expect(props.onCancel).toHaveBeenCalled();
+  });
+});
diff --git a/public/components/datasources/components/__tests__/acceleration_operation.test.tsx b/public/components/datasources/components/__tests__/acceleration_operation.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useAccelerationOperation } from '../manage/accelerations/acceleration_operation';
+import * as useDirectQueryModule from '../../../../framework/datasources/direct_query_hook';
+import * as useToastModule from '../../../common/toast';
+import { DirectQueryLoadingStatus } from '../../../../../common/types/explorer';
+import { skippingIndexAcceleration } from '../../../../../test/datasources';
+
+jest.mock('../../../../framework/datasources/direct_query_hook', () => ({
+  useDirectQuery: jest.fn(),
+}));
+
+jest.mock('../../../common/toast', () => ({
+  useToast: jest.fn(),
+}));
+
+describe('useAccelerationOperation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useDirectQueryModule.useDirectQuery as jest.Mock).mockReturnValue({
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+      loadStatus: DirectQueryLoadingStatus.INITIAL,
+    });
+
+    (useToastModule.useToast as jest.Mock).mockReturnValue({
+      setToast: jest.fn(),
+    });
+  });
+
+  it('performs acceleration operation and handles success', async () => {
+    (useDirectQueryModule.useDirectQuery as jest.Mock).mockReturnValue({
+      startLoading: jest.fn(),
+      stopLoading: jest.fn(),
+      loadStatus: DirectQueryLoadingStatus.SUCCESS,
+    });
+
+    const { result } = renderHook(() => useAccelerationOperation('test-datasource'));
+
+    act(() => {
+      result.current.performOperation(skippingIndexAcceleration, 'delete');
+    });
+
+    expect((useDirectQueryModule.useDirectQuery as jest.Mock).mock.calls.length).toBeGreaterThan(0);
+    expect((useToastModule.useToast as jest.Mock).mock.calls.length).toBeGreaterThan(0);
+  });
+});
diff --git a/public/components/datasources/components/__tests__/acceleration_table.test.tsx b/public/components/datasources/components/__tests__/acceleration_table.test.tsx
@@ -177,6 +177,10 @@ describe('AccelerationTable Component', () => {
     });
     wrapper!.update();
 
-    expect(wrapper!.text()).toContain(accelerationCache.lastUpdated);
+    const expectedLocalizedTime = accelerationCache.lastUpdated
+      ? new Date(accelerationCache.lastUpdated).toLocaleString()
+      : '';
+
+    expect(wrapper!.text()).toContain(expectedLocalizedTime);
   });
 });
diff --git a/public/components/datasources/components/__tests__/associated_objects_flyout.test.tsx b/public/components/datasources/components/__tests__/associated_objects_flyout.test.tsx
@@ -82,7 +82,7 @@ describe('AssociatedObjectsDetailsFlyout Integration Tests', () => {
       wrapper.update();
     });
 
-    const accName = getAccelerationName(mockTableDetail.accelerations[0], 'flint_s3');
+    const accName = getAccelerationName(mockTableDetail.accelerations[0]);
     const accLink = wrapper
       .find('EuiLink')
       .findWhere((node) => node.text() === accName)

diff --git a/...ic/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx b/...ic/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { EuiOverlayMask, EuiConfirmModal, EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { CachedAcceleration } from '../../../../../../common/types/data_connections';
+import {
+  ACC_DELETE_MSG,
+  ACC_VACUUM_MSG,
+  ACC_SYNC_MSG,
+  AccelerationActionType,
+  getAccelerationName,
+  getAccelerationFullPath,
+} from './utils/acceleration_utils';
+
+export interface AccelerationActionOverlayProps {
+  isVisible: boolean;
+  actionType: AccelerationActionType;
+  acceleration: CachedAcceleration | null;
+  dataSourceName: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const AccelerationActionOverlay: React.FC<AccelerationActionOverlayProps> = ({
+  isVisible,
+  actionType,
+  acceleration,
+  dataSourceName,
+  onCancel,
+  onConfirm,
+}) => {
+  const [confirmationInput, setConfirmationInput] = useState('');
+
+  if (!isVisible || !acceleration) {
+    return null;
+  }
+
+  const displayIndexName = getAccelerationName(acceleration);
+  const displayFullPath = getAccelerationFullPath(acceleration, dataSourceName);
+
+  let title = '';
+  let description = '';
+  let confirmButtonText = 'Confirm';
+  let confirmEnabled = true;
+
+  switch (actionType) {
+    case 'vacuum':
+      title = `Vacuum acceleration ${displayIndexName} on ${displayFullPath}?`;
+      description = ACC_VACUUM_MSG;
+      confirmButtonText = 'Vacuum';
+      confirmEnabled = confirmationInput === displayIndexName;
+      break;
+    case 'delete':
+      title = `Delete acceleration ${displayIndexName} on ${displayFullPath}?`;
+      description = ACC_DELETE_MSG;
+      confirmButtonText = 'Delete';
+      break;
+    case 'sync':
+      title = 'Manual sync data?';
+      description = ACC_SYNC_MSG;
+      confirmButtonText = 'Sync';
+      break;
+  }
+
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={onCancel}
+        onConfirm={() => onConfirm()}
+        cancelButtonText="Cancel"
+        confirmButtonText={confirmButtonText}
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+        confirmButtonDisabled={!confirmEnabled}
+      >
+        <p>{description}</p>
+        {actionType === 'vacuum' && (
+          <EuiFormRow label={`To confirm, type ${displayIndexName}`}>
+            <EuiFieldText
+              name="confirmationInput"
+              value={confirmationInput}
+              onChange={(e) => setConfirmationInput(e.target.value)}
+            />
+          </EuiFormRow>
+        )}
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};