Fix table strings and add unit tests

ansjcy · ansjcy · commit ffb1dd0ca477 · 2025-01-13T16:40:00.000-08:00
Signed-off-by: Chenyang Ji &lt;cyji@amazon.com&gt;
diff --git a/common/constants.ts b/common/constants.ts
@@ -8,6 +8,6 @@ export const LATENCY = 'Latency';
 export const CPU_TIME = 'CPU Time';
 export const MEMORY_USAGE = 'Memory Usage';
 export const INDICES = 'Indices';
-export const SEARCH_TYPE = 'Search type';
-export const NODE_ID = 'Coordinator node ID';
-export const TOTAL_SHARDS = 'Total shards';
+export const SEARCH_TYPE = 'Search Type';
+export const NODE_ID = 'Coordinator Node ID';
+export const TOTAL_SHARDS = 'Total Shards';
diff --git a/public/components/__snapshots__/app.test.tsx.snap b/public/components/__snapshots__/app.test.tsx.snap
@@ -172,10 +172,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiFilterButton__textShift"
-                        data-text="Search type"
-                        title="Search type"
+                        data-text="Search Type"
+                        title="Search Type"
                       >
-                        Search type
+                        Search Type
                       </span>
                     </span>
                   </span>
@@ -215,10 +215,10 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiFilterButton__textShift"
-                        data-text="Coordinator node ID"
-                        title="Coordinator node ID"
+                        data-text="Coordinator Node ID"
+                        title="Coordinator Node ID"
                       >
-                        Coordinator node ID
+                        Coordinator Node ID
                       </span>
                     </span>
                   </span>
@@ -566,9 +566,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Search type"
+                        title="Search Type"
                       >
-                        Search type
+                        Search Type
                       </span>
                     </span>
                   </button>
@@ -591,9 +591,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Coordinator node ID"
+                        title="Coordinator Node ID"
                       >
-                        Coordinator node ID
+                        Coordinator Node ID
                       </span>
                     </span>
                   </button>
@@ -616,9 +616,9 @@ exports[`<QueryInsightsDashboardsApp /> spec renders the component 1`] = `
                     >
                       <span
                         class="euiTableCellContent__text"
-                        title="Total shards"
+                        title="Total Shards"
                       >
-                        Total shards
+                        Total Shards
                       </span>
                     </span>
                   </button>
diff --git a/public/pages/Configuration/Configuration.test.tsx b/public/pages/Configuration/Configuration.test.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+import Configuration from './Configuration';
+
+const mockConfigInfo = jest.fn();
+const mockCoreStart = {
+  chrome: {
+    setBreadcrumbs: jest.fn(),
+  },
+};
+
+const defaultLatencySettings = {
+  isEnabled: true,
+  currTopN: '5',
+  currWindowSize: '10',
+  currTimeUnit: 'MINUTES',
+};
+const defaultCpuSettings = {
+  isEnabled: false,
+  currTopN: '10',
+  currWindowSize: '1',
+  currTimeUnit: 'HOURS',
+};
+const defaultMemorySettings = {
+  isEnabled: false,
+  currTopN: '15',
+  currWindowSize: '2',
+  currTimeUnit: 'HOURS',
+};
+
+const renderConfiguration = (overrides = {}) => {
+  render(
+    <MemoryRouter>
+      <Configuration
+        latencySettings={{ ...defaultLatencySettings, ...overrides }}
+        cpuSettings={defaultCpuSettings}
+        memorySettings={defaultMemorySettings}
+        configInfo={mockConfigInfo}
+        // @ts-ignore
+        core={mockCoreStart}
+      />
+    </MemoryRouter>
+  );
+};
+
+const getWindowSizeConfigurations = () => screen.getAllByRole('combobox');
+const getTopNSizeConfiguration = () => screen.getByRole('spinbutton');
+const getEnableToggle = () => screen.getByRole('switch');
+
+describe('Configuration Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with default settings', () => {
+    renderConfiguration();
+    // main header
+    expect(
+      screen.getByRole('heading', { name: /Top n queries monitoring configuration settings/i })
+    ).toBeInTheDocument();
+    // section headers
+    expect(screen.getByRole('heading', { name: /Metric Type/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Enabled/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Value of N/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Window size/i })).toBeInTheDocument();
+    // Check values for window size configurations
+    const selectBoxes = getWindowSizeConfigurations();
+    expect(selectBoxes[0]).toHaveValue('latency');
+    expect(selectBoxes[1]).toHaveValue('10');
+    expect(selectBoxes[2]).toHaveValue('MINUTES');
+    // Check the value for top n size configurations
+    expect(getTopNSizeConfiguration()).toHaveValue(5);
+    // Check the value for enabled switch
+    const enableBox = getEnableToggle();
+    expect(enableBox).toBeInTheDocument();
+    expect(enableBox).toBeChecked();
+  });
+
+  it('updates state when toggling metrics and enables Save button when changes are made', () => {
+    renderConfiguration();
+    // before toggling the metric
+    expect(getWindowSizeConfigurations()[0]).toHaveValue('latency');
+    expect(getEnableToggle()).toBeChecked();
+    // toggle the metric
+    fireEvent.change(getWindowSizeConfigurations()[0], { target: { value: 'cpu' } });
+    // after toggling the metric
+    expect(getWindowSizeConfigurations()[0]).toHaveValue('cpu');
+    // the enabled box should be disabled by default based on our configuration
+    const cpuEnableBox = getEnableToggle();
+    expect(cpuEnableBox).toBeInTheDocument();
+    expect(cpuEnableBox).not.toBeChecked();
+
+    fireEvent.click(getEnableToggle());
+    expect(getEnableToggle()).toBeChecked();
+    expect(screen.getByText('Save')).toBeEnabled();
+  });
+
+  it('validates topNSize and windowSize inputs and disables Save button for invalid input', () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '101' } });
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+    fireEvent.change(getWindowSizeConfigurations()[1], { target: { value: '999' } });
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+  });
+
+  it('calls configInfo and navigates on Save button click', async () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
+    fireEvent.click(screen.getByText('Save'));
+    await waitFor(() => {
+      expect(mockConfigInfo).toHaveBeenCalledWith(false, true, 'latency', '7', '10', 'MINUTES');
+    });
+  });
+
+  it('resets state on Cancel button click', async () => {
+    renderConfiguration();
+    fireEvent.change(getTopNSizeConfiguration(), { target: { value: '7' } });
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(getTopNSizeConfiguration()).toHaveValue(5); // Resets to initial value
+  });
+});
diff --git a/public/pages/QueryInsights/QueryInsights.test.tsx b/public/pages/QueryInsights/QueryInsights.test.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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/extend-expect';
+import QueryInsights from './QueryInsights';
+import { MemoryRouter } from 'react-router-dom';
+import { MockQueries } from '../../../test/testUtils';
+
+// Mock functions and data
+const mockOnTimeChange = jest.fn();
+const mockCore = {
+  chrome: {
+    setBreadcrumbs: jest.fn(),
+  },
+};
+
+// TODO: change to use MockQueries once https://github.com/opensearch-project/query-insights-dashboards/pull/21/files is merged
+const sampleQueries = MockQueries();
+
+const renderQueryInsights = () => {
+  render(
+    <MemoryRouter>
+      <QueryInsights
+        queries={sampleQueries}
+        loading={false}
+        onTimeChange={mockOnTimeChange}
+        recentlyUsedRanges={[]}
+        currStart="now-15m"
+        currEnd="now"
+        // @ts-ignore
+        core={mockCore}
+      />
+    </MemoryRouter>
+  );
+};
+
+describe('QueryInsights Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the table with the correct columns and data', () => {
+    renderQueryInsights();
+
+    // Check that the table and columns render correctly
+    expect(document.querySelector('span[title="Timestamp"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Latency"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="CPU Time"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Memory Usage"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Indices"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Search Type"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Coordinator Node ID"]')).toBeInTheDocument();
+    expect(document.querySelector('span[title="Total Shards"]')).toBeInTheDocument();
+    // TODO add tests for the values
+  });
+
+  it('calls setBreadcrumbs on mount', () => {
+    renderQueryInsights();
+    expect(mockCore.chrome.setBreadcrumbs).toHaveBeenCalledWith([
+      {
+        text: 'Query insights',
+        href: '/queryInsights',
+        onClick: expect.any(Function),
+      },
+    ]);
+  });
+
+  it('triggers onTimeChange when the date picker changes', () => {
+    renderQueryInsights();
+
+    // Find the date picker update button
+    const updateButton = screen.getByRole('button', { name: /Refresh/i });
+    fireEvent.click(updateButton);
+
+    // Verify the onTimeChange callback is triggered
+    expect(mockOnTimeChange).toHaveBeenCalled();
+  });
+});
diff --git a/test/testUtils.ts b/test/testUtils.ts
@@ -0,0 +1,99 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SearchQueryRecord } from '../types/types';
+
+export const MockQueries = (): SearchQueryRecord[] => {
+  return [
+    {
+      timestamp: 1726178995210,
+      task_resource_usages: [
+        {
+          action: 'indices:data/read/search[phase/query]',
+          taskId: 18809,
+          parentTaskId: 18808,
+          nodeId: 'Q36D2z_NRGKim6EZZMgi6A',
+          taskResourceUsage: {
+            cpu_time_in_nanos: 3612000,
+            memory_in_bytes: 123944,
+          },
+        },
+        {
+          action: 'indices:data/read/search',
+          taskId: 18808,
+          parentTaskId: -1,
+          nodeId: 'Q36D2z_NRGKim6EZZMgi6A',
+          taskResourceUsage: {
+            cpu_time_in_nanos: 1898000,
+            memory_in_bytes: 24176,
+          },
+        },
+      ],
+      source: {
+        query: {
+          bool: {
+            must: [
+              {
+                range: {
+                  timestamp: {
+                    from: 1726092595177,
+                    to: 1726178995177,
+                    include_lower: true,
+                    include_upper: true,
+                    boost: 1.0,
+                  },
+                },
+              },
+            ],
+            must_not: [
+              {
+                match: {
+                  indices: {
+                    query: 'top_queries*',
+                    operator: 'OR',
+                    prefix_length: 0,
+                    max_expansions: 50,
+                    fuzzy_transpositions: true,
+                    lenient: false,
+                    zero_terms_query: 'NONE',
+                    auto_generate_synonyms_phrase_query: true,
+                    boost: 1.0,
+                  },
+                },
+              },
+            ],
+            adjust_pure_negative: true,
+            boost: 1.0,
+          },
+        },
+      },
+      query_hashcode: '80a17984b847133b8bf5e7d5dfbfa96c',
+      phase_latency_map: {
+        expand: 0,
+        query: 5,
+        fetch: 0,
+      },
+      labels: {
+        'X-Opaque-Id': 'ae6c1170-5f98-47f4-b7fc-09ebcf574b81',
+      },
+      total_shards: 1,
+      search_type: 'query_then_fetch',
+      node_id: 'Q36D2z_NRGKim6EZZMgi6A',
+      indices: ['top_queries-2024.09.12'],
+      measurements: {
+        latency: {
+          number: 8,
+          count: 1,
+          aggregationType: 'NONE',
+        },
+        cpu: {
+          number: 5510000,
+          count: 1,
+          aggregationType: 'NONE',
+        },
+      },
+    },
+  ];
+};
diff --git a/types/types.ts b/types/types.ts
