Fix bugs in UI and refactor code

Signed-off-by: Chenyang Ji <[email protected]>
opensearch-project · Sep 10, 2024 · 16a565e · 16a565e
1 parent 8a9e342
commit 16a565e
Show file tree

Hide file tree

Showing 19 changed files with 241 additions and 81 deletions.
diff --git a/common/constants.ts b/common/constants.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const TIMESTAMP = 'Timestamp';
+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';
diff --git a/common/index.ts b/common/index.ts
@@ -1,2 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 export const PLUGIN_ID = 'queryInsightsDashboards';
 export const PLUGIN_NAME = 'query-insights-dashboards';
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@testing-library/dom": "^8.11.3",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-dom": "^16.9.8",
+    "@types/object-hash": "^3.0.0",
     "@types/react-router-dom": "^5.3.2",
     "cypress": "9.5.4",
     "cypress-real-events": "1.7.6",

diff --git a/public/application.tsx b/public/application.tsx
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router } from 'react-router-dom';

diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React from 'react';
 import { Route } from 'react-router-dom';
 import TopNQueries from '../pages/TopNQueries/TopNQueries';

diff --git a/public/index.ts b/public/index.ts
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import './index.scss';
 
 import { QueryInsightsDashboardsPlugin } from './plugin';

diff --git a/public/pages/Configuration/Configuration.tsx b/public/pages/Configuration/Configuration.tsx
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import {
   EuiBottomBar,
@@ -18,7 +23,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
-import { CoreStart } from '../../../../../src/core/public';
+import { CoreStart } from 'opensearch-dashboards/public';
 import { QUERY_INSIGHTS, MetricSettings } from '../TopNQueries/TopNQueries';
 
 const Configuration = ({

diff --git a/public/pages/QueryDetails/Components/QuerySummary.tsx b/public/pages/QueryDetails/Components/QuerySummary.tsx
@@ -1,67 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
+import { SearchQueryRecord } from '../../../../types/types';
+import {
+  CPU_TIME,
+  INDICES,
+  LATENCY,
+  MEMORY_USAGE,
+  NODE_ID,
+  SEARCH_TYPE,
+  TIMESTAMP,
+  TOTAL_SHARDS,
+} from '../../../../common/constants';
+
+// Panel component for displaying query detail values
+const PanelItem = ({ label, value }: { label: string; value: string | number }) => (
+  <EuiFlexItem>
+    <EuiText size="xs">
+      <h4>{label}</h4>
+    </EuiText>
+    <EuiText size="xs">{value}</EuiText>
+  </EuiFlexItem>
+);
 
-const QuerySummary = ({ query }: { query: any }) => {
+const QuerySummary = ({ query }: { query: SearchQueryRecord }) => {
   const convertTime = (unixTime: number) => {
     const date = new Date(unixTime);
     const loc = date.toDateString().split(' ');
     return `${loc[1]} ${loc[2]}, ${loc[3]} @ ${date.toLocaleTimeString('en-US')}`;
   };
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { timestamp, measurements, indices, search_type, node_id, total_shards } = query;
   return (
     <EuiPanel>
       <EuiText size="xs">
         <h2>Summary</h2>
       </EuiText>
       <EuiHorizontalRule margin="m" />
       <EuiFlexGrid columns={4}>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Timestamp</h4>
-          </EuiText>
-          <EuiText size="xs">{convertTime(query.timestamp)}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Latency</h4>
-          </EuiText>
-          <EuiText size="xs">{`${query.latency} ms`}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>CPU Usage</h4>
-          </EuiText>
-          <EuiText size="xs">{`${query.cpu} ns`}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Memory</h4>
-          </EuiText>
-          <EuiText size="xs">{`${query.memory} B`}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Indexes</h4>
-          </EuiText>
-          <EuiText size="xs">{query.indices.toString()}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Search type</h4>
-          </EuiText>
-          <EuiText size="xs">{query.search_type.replaceAll('_', ' ')}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Coordinator node ID</h4>
-          </EuiText>
-          <EuiText size="xs">{query.node_id}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="xs">
-            <h4>Total shards</h4>
-          </EuiText>
-          <EuiText size="xs">{query.total_shards}</EuiText>
-        </EuiFlexItem>
+        <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
+        <PanelItem label={LATENCY} value={`${measurements.latency?.number ?? 'N/A'} ms`} />
+        <PanelItem
+          label={CPU_TIME}
+          value={
+            measurements.cpu?.number !== undefined
+              ? `${measurements.cpu.number / 1000000} ms`
+              : 'N/A'
+          }
+        />
+        <PanelItem label={MEMORY_USAGE} value={`${measurements.memory?.number ?? 'N/A'} B`} />
+        <PanelItem label={INDICES} value={indices.toString()} />
+        <PanelItem label={SEARCH_TYPE} value={search_type.replaceAll('_', ' ')} />
+        <PanelItem label={NODE_ID} value={node_id} />
+        <PanelItem label={TOTAL_SHARDS} value={total_shards} />
       </EuiFlexGrid>
     </EuiPanel>
   );

diff --git a/public/pages/QueryDetails/QueryDetails.tsx b/public/pages/QueryDetails/QueryDetails.tsx
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React, { useEffect } from 'react';
 import Plotly from 'plotly.js-dist';
 import {
@@ -14,7 +19,7 @@ import {
 } from '@elastic/eui';
 import hash from 'object-hash';
 import { useParams, useHistory, useLocation } from 'react-router-dom';
-import { CoreStart } from '../../../../../src/core/public';
+import { CoreStart } from 'opensearch-dashboards/public';
 import QuerySummary from './Components/QuerySummary';
 import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
 

diff --git a/public/pages/QueryInsights/QueryInsights.tsx b/public/pages/QueryInsights/QueryInsights.tsx
@@ -1,14 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import React, { useEffect, useState } from 'react';
 import { EuiBasicTableColumn, EuiInMemoryTable, EuiLink, EuiSuperDatePicker } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
 import hash from 'object-hash';
-import { CoreStart } from '../../../../../src/core/public';
+import { CoreStart } from 'opensearch-dashboards/public';
 import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
+import { SearchQueryRecord } from '../../../types/types';
+import {
+  CPU_TIME,
+  INDICES,
+  LATENCY,
+  MEMORY_USAGE,
+  NODE_ID,
+  SEARCH_TYPE,
+  TIMESTAMP,
+  TOTAL_SHARDS,
+} from '../../../common/constants';
 
 const TIMESTAMP_FIELD = 'timestamp';
-const LATENCY_FIELD = 'latency';
-const CPU_FIELD = 'cpu';
-const MEMORY_FIELD = 'memory';
+const MEASUREMENTS_FIELD = 'measurements';
 const INDICES_FIELD = 'indices';
 const SEARCH_TYPE_FIELD = 'search_type';
 const NODE_ID_FIELD = 'node_id';
@@ -24,7 +38,7 @@ const QueryInsights = ({
   currEnd,
   core,
 }: {
-  queries: any[];
+  queries: SearchQueryRecord[];
   loading: boolean;
   onTimeChange: any;
   recentlyUsedRanges: any[];
@@ -58,7 +72,7 @@ const QueryInsights = ({
   const cols: Array<EuiBasicTableColumn<any>> = [
     {
       // Make into flyout instead?
-      name: 'Timestamp',
+      name: TIMESTAMP,
       render: (query: any) => {
         return (
           <span>
@@ -72,51 +86,58 @@ const QueryInsights = ({
       truncateText: true,
     },
     {
-      field: LATENCY_FIELD,
-      name: 'Latency',
-      render: (latency: number) =>
-        typeof latency !== 'undefined' ? `${latency} ms` : `${METRIC_DEFAULT_MSG}`,
+      field: MEASUREMENTS_FIELD,
+      name: LATENCY,
+      render: (measurements: any) => {
+        const latencyValue = measurements?.latency?.number;
+        return latencyValue !== undefined ? `${latencyValue} ms` : METRIC_DEFAULT_MSG;
+      },
       sortable: true,
       truncateText: true,
     },
     {
-      field: CPU_FIELD,
-      name: 'CPU usage',
-      render: (cpu: number) => (typeof cpu !== 'undefined' ? `${cpu} ns` : `${METRIC_DEFAULT_MSG}`),
+      field: MEASUREMENTS_FIELD,
+      name: CPU_TIME,
+      render: (measurements: { cpu?: { number?: number } }) => {
+        const cpuValue = measurements?.cpu?.number;
+        return cpuValue !== undefined ? `${cpuValue / 1000000} ms` : METRIC_DEFAULT_MSG;
+      },
       sortable: true,
       truncateText: true,
     },
     {
-      field: MEMORY_FIELD,
-      name: 'Memory',
-      render: (memory: number) =>
-        typeof memory !== 'undefined' ? `${memory} B` : `${METRIC_DEFAULT_MSG}`,
+      field: MEASUREMENTS_FIELD,
+      name: MEMORY_USAGE,
+      render: (measurements: { memory?: { number?: number } }) => {
+        const memoryValue = measurements?.memory?.number;
+        return memoryValue !== undefined ? `${memoryValue} B` : METRIC_DEFAULT_MSG;
+      },
       sortable: true,
       truncateText: true,
     },
     {
       field: INDICES_FIELD,
-      name: 'Indices',
+      name: INDICES,
       render: (indices: string[]) => Array.from(new Set(indices.flat())).join(', '),
       sortable: true,
       truncateText: true,
     },
     {
       field: SEARCH_TYPE_FIELD,
-      name: 'Search type',
+      name: SEARCH_TYPE,
       render: (searchType: string) => searchType.replaceAll('_', ' '),
       sortable: true,
       truncateText: true,
     },
     {
       field: NODE_ID_FIELD,
-      name: 'Coordinator node ID',
+      name: NODE_ID,
       sortable: true,
       truncateText: true,
     },
     {
       field: TOTAL_SHARDS_FIELD,
-      name: 'Total shards',
+      name: TOTAL_SHARDS,
       sortable: true,
       truncateText: true,
     },
@@ -153,7 +174,7 @@ const QueryInsights = ({
           {
             type: 'field_value_selection',
             field: INDICES_FIELD,
-            name: 'Indices',
+            name: INDICES,
             multiSelect: true,
             options: filterDuplicates(
               queries.map((query) => {
@@ -169,7 +190,7 @@ const QueryInsights = ({
           {
             type: 'field_value_selection',
             field: SEARCH_TYPE_FIELD,
-            name: 'Search type',
+            name: SEARCH_TYPE,
             multiSelect: false,
             options: filterDuplicates(
               queries.map((query) => ({
@@ -182,7 +203,7 @@ const QueryInsights = ({
           {
             type: 'field_value_selection',
             field: NODE_ID_FIELD,
-            name: 'Coordinator node ID',
+            name: NODE_ID,
             multiSelect: true,
             options: filterDuplicates(
               queries.map((query) => ({
@@ -207,9 +228,7 @@ const QueryInsights = ({
       executeQueryOptions={{
         defaultFields: [
           TIMESTAMP_FIELD,
-          LATENCY_FIELD,
-          CPU_FIELD,
-          MEMORY_FIELD,
+          MEASUREMENTS_FIELD,
           INDICES_FIELD,
           SEARCH_TYPE_FIELD,
           NODE_ID_FIELD,