Added test and addressed comments

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
opensearch-project · Jan 11, 2024 · 4b0a56c · 4b0a56c
1 parent 5a7be6c
commit 4b0a56c
Show file tree

Hide file tree

Showing 30 changed files with 180 additions and 238 deletions.
diff --git a/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js b/.cypress/integration/metrics_analytics_test/metrics_analytics.spec.js
@@ -55,8 +55,22 @@ describe('Metrics Analytics', () => {
       suppressResizeObserverIssue();
     });
 
+    describe('Check data source picker', () => {
+      it('Index picker should be only available under Otel metric datasource', () => {
+        cy.get('[data-test-subj="metricsDataSourcePicker"]').click();
+        cy.get('[data-test-subj="prometheusOption"]').click();
+        cy.get('[data-test-subj="metricsIndexPicker"]').should('not.exist');
+
+        cy.get('[data-test-subj="metricsDataSourcePicker"]').click();
+        cy.get('[data-test-subj="openTelemetryOption"]').click();
+        cy.get('[data-test-subj="metricsIndexPicker"]').should('exist');
+      });
+    });
+
     describe('Search for metrics in search bar', () => {
       it('Search for metrics in search bar from available metrics', () => {
+        cy.get('[data-test-subj="metricsDataSourcePicker"]').click();
+        cy.get('[data-test-subj="prometheusOption"]').click();
         cy.get('[data-test-subj="metricsSearch"]').type('metric', { wait: 50 });
 
         cy.get('[data-test-subj="metricsListItems_availableMetrics"]')
@@ -76,6 +90,8 @@ describe('Metrics Analytics', () => {
 
     describe('Select and unselect metrics in sidebar', () => {
       it('Select and unselect metrics in sidebar', () => {
+        cy.get('[data-test-subj="metricsDataSourcePicker"]').click();
+        cy.get('[data-test-subj="prometheusOption"]').click();
         cy.get('[data-test-subj="metricsListItems_availableMetrics"]')
           .contains(PPL_METRICS_NAMES[0])
           .trigger('mouseover')
@@ -113,57 +129,31 @@ describe('Metrics Analytics', () => {
 
     describe('Test Metric Visualizations', () => {
       beforeEach(() => {
+        cy.get('[data-test-subj="metricsDataSourcePicker"]').click();
+        cy.get('[data-test-subj="prometheusOption"]').click();
         cy.get('[data-test-subj="metricsListItems_availableMetrics"]')
           .contains(PPL_METRICS_NAMES[0])
           .trigger('mouseover')
           .click();
       });
 
-      it.only('Resize a Metric visualization in edit mode', () => {
-        cy.get('[data-test-subj="metrics__editView"]')
-          .contains('Edit view')
-          .trigger('mouseover')
-          .click();
-        cy.wait(delay);
-        cy.get('.react-resizable-handle-se')
-          // .eq(1)
-          .trigger('mousedown', { which: 1 })
-          .trigger('mousemove', { clientX: 2000, clientY: 800 })
-          .trigger('mouseup', { force: true });
-        cy.wait(delay);
-        cy.get('[data-test-subj="metrics__saveView"]').trigger('mouseover').click();
-        cy.wait(delay * 3);
-        cy.get('div.react-grid-layout>div').invoke('height').should('match', new RegExp('790'));
-        cy.wait(delay);
-      });
-
       it('Drag and drop a Metric visualization in edit mode', () => {
         cy.get('[data-test-subj="metricsListItems_availableMetrics"]')
           .contains(PPL_METRICS_NAMES[1])
           .trigger('mouseover')
           .click();
-        cy.get('[data-test-subj="metrics__editView"]')
-          .contains('Edit view')
-          .trigger('mouseover')
-          .click();
         cy.wait(delay);
         cy.get('h5')
           .contains(PPL_METRICS_NAMES[0])
           .trigger('mousedown', { which: 1, force: true })
           .trigger('mousemove', { clientX: 415, clientY: 500 })
           .trigger('mouseup', { force: true });
+        cy.wait(delay * 3);
+        cy.get('div.react-grid-layout>div')
+          .eq(1)
+          .invoke('attr', 'style')
+          .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)'));
         cy.wait(delay);
-        cy.get('[data-test-subj="metrics__saveView"]')
-          .trigger('mouseover')
-          .click({ force: true })
-          .then(() => {
-            cy.wait(delay * 3);
-            cy.get('div.react-grid-layout>div')
-              .eq(1)
-              .invoke('attr', 'style')
-              .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)'));
-            cy.wait(delay);
-          });
       });
 
       it('Change date filter of the Metrics home page', () => {

diff --git a/.cypress/integration/panels_test/panels.spec.ts b/.cypress/integration/panels_test/panels.spec.ts
@@ -775,7 +775,6 @@ const createSavedObjectPanel = (newName = TEST_PANEL) => {
 };
 
 const addVisualizationsToPanel = (panel, additionalVisualizationIds: string[]) => {
-  console.log('addVisualizationsToPanel', additionalVisualizationIds);
   const additionalVisualizations = additionalVisualizationIds.map((id, idx) => {
     return {
       savedVisualizationId: `observability-visualization:${id}`,
@@ -791,7 +790,6 @@ const addVisualizationsToPanel = (panel, additionalVisualizationIds: string[]) =
     ...panel.attributes.visualizations,
     ...additionalVisualizations,
   ];
-  console.log(panel.attributes);
   cy.request({
     method: 'PUT',
     failOnStatusCode: false,

diff --git a/.cypress/utils/metrics_constants.js b/.cypress/utils/metrics_constants.js
@@ -21,3 +21,9 @@ export const PPL_METRICS = [
 
 export const VIS_TYPE_LINE = 'Time Series';
 export const TESTING_PANEL = 'Mock Testing Panels for Metrics';
+
+export const OTEL_METRICS_NAMES = [
+  '[Otel Metric] ss4o_metrics-otel-dp.duration',
+  '[Otel Metric] ss4o_metrics-otel-dp.http.client.duration',
+  '[Otel Metric] ss4o_metrics-otel-dp.rpc.client.duration',
+];
diff --git a/common/constants/metrics.ts b/common/constants/metrics.ts
@@ -14,6 +14,7 @@ export const PPL_DATASOURCES_REQUEST =
 // redux
 
 export const OBSERVABILITY_CUSTOM_METRIC = 'CUSTOM_METRICS';
+export const OPEN_TELEMETRY = 'OpenTelemetry';
 export const REDUX_SLICE_METRICS = 'metrics';
 
 export const resolutionOptions = [
@@ -44,6 +45,10 @@ export const DATASOURCE_OPTIONS = [
     'data-test-subj': 'openTelemetryOption',
   },
 ];
-export const DATA_PREPPER_INDEX_NAME = 'ss4o-metrics-*-*';
+export const DATA_PREPPER_INDEX_NAME = 'ss4o_metrics-*-*';
 export const METRICS_ANALYTICS_DATA_PREPPER_INDICES_ROUTE =
   '/api/observability/metrics_analytics/data_prepper_indices';
+
+// Regex pattens
+export const INDEX_DOCUMENT_NAME_PATTERN = /\[Otel Metric\]\s(\S+?-\S+?)\.(\S+)/;
+export const SPAN_RESOLUTION_REGEX = /'(\d+)([smhdwMy])'/;
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-/* eslint-disable no-unused-vars */
 
 // Client route
 export const PPL_BASE = '/api/ppl';

diff --git a/common/types/metrics.ts b/common/types/metrics.ts
@@ -4,12 +4,7 @@
  */
 
 import { VisualizationType } from './custom_panels';
-
-// export interface MetricData {
-//   metricId: string;
-//   metricType: 'savedCustomMetric' | 'prometheusMetric' | 'openTelemetryMetric';
-//   metricName: string;
-// }
+import { OTEL_METRIC_SUBTYPE } from '../constants/shared';
 
 export interface MetricType extends VisualizationType {
   id: string;
@@ -19,18 +14,15 @@ export interface MetricType extends VisualizationType {
   w: number;
   h: number;
   query: {
-    type: 'savedCustomMetric' | 'prometheusMetric' | 'openTelemetryMetric';
+    type: 'savedCustomMetric' | 'prometheusMetric' | typeof OTEL_METRIC_SUBTYPE;
     aggregation: string;
     attributesGroupBy: string[];
     catalog: string;
     availableAttributes?: string[];
   };
-  // metricType: 'savedCustomMetric' | 'prometheusMetric' | 'openTelemetryMetric';
 }
 
 export interface OptionType {
   label: string;
   'data-test-subj': string;
 }
-// selectedDataSource: React.SetStateAction<Array<{ label: string; 'data-test-subj': string }>>;
-//   setSelectedDataSource: React.Dispatch<React.SetStateAction<unknown>>;
diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
@@ -216,7 +216,7 @@ export const calculateAvailability = async (
   for (let i = 0; i < savedVisualizationsIds.length; i++) {
     const visualizationId = savedVisualizationsIds[i];
     // Fetches data for visualization
-    const visData = await fetchVisualizationById(http, visualizationId, (value: string) =>
+    const visData = await fetchVisualizationById(visualizationId, (value: string) =>
       console.error(value)
     );
 

diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
@@ -21,6 +21,7 @@ import {
   OTEL_DATE_FORMAT,
 } from '../../../../common/constants/shared';
 import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
+import { SPAN_RESOLUTION_REGEX } from '../../../../common/constants/metrics';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -62,7 +63,7 @@ export const convertDateTime = (
   datetime: string,
   isStart = true,
   formatted = true,
-  isMetrics: boolean = false,
+  isPromqlMetrics: boolean = false,
   isOtel: boolean = false
 ) => {
   let returnTime: Moment = '';
@@ -80,7 +81,7 @@ export const convertDateTime = (
     return `${formattedDate}.${formattedMilliseconds}Z`;
   }
 
-  if (isMetrics) {
+  if (isPromqlMetrics) {
     const myDate = new Date(returnTime._d); // Your timezone!
     const epochTime = myDate.getTime() / 1000.0;
     return Math.round(epochTime);
@@ -220,10 +221,8 @@ export const getIndexPatternFromRawQuery = (query: string): string => {
 function extractSpanAndResolution(query: string) {
   if (!query) return;
 
-  const regex = /'(\d+)([smhdwMy])'/;
-  const match = query.match(regex);
-  // eslint-disable-next-line radix
-  return match ? { span: parseInt(match[1]), resolution: match[2] } : null;
+  const match = query.match(SPAN_RESOLUTION_REGEX);
+  return match ? { span: parseInt(match[1], 10), resolution: match[2] } : null;
 }
 
 export const preprocessMetricQuery = ({ metaData, startTime, endTime }) => {

diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
@@ -391,7 +391,6 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       const visualizationId = panelVisualizations[i].savedVisualizationId;
       // TODO: create route to get list of visualizations in one call
       const visData: SavedVisualizationType = await fetchVisualizationById(
-        http,
         visualizationId,
         (error: VizContainerError) => setToast(error.errorMessage, 'danger')
       );

diff --git a/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/public/components/custom_panels/helpers/__tests__/utils.test.tsx
@@ -21,13 +21,21 @@ import {
 } from '../../../../../test/panels_constants';
 import {
   displayVisualization,
+  fetchAggregatedBinCount,
+  fetchSampleOTDocument,
+  // fetchSampleOTDocument,
   isDateValid,
   isNameValid,
   isPPLFilterValid,
   mergeLayoutAndVisualizations,
   onTimeChange,
+  renderOpenTelemetryVisualization,
 } from '../utils';
 import { convertDateTime } from '../../../common/query_utils';
+import { setOSDHttp } from '../../../../../common/utils';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+
+jest.setTimeout(60000);
 
 describe('Utils helper functions', () => {
   configure({ adapter: new Adapter() });