Skip to content

Commit

Permalink
Otel metrics working end to end
Browse files Browse the repository at this point in the history 
Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]>
  • Loading branch information
@kavithacm
kavithacm committed Dec 29, 2023
1 parent 37e6038 commit b529afb
Show file tree
Hide file tree
Showing 17 changed files with 260 additions and 152 deletions.
3 changes: 2 additions & 1 deletion common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
import CSS from 'csstype';
/* eslint-disable no-unused-vars */

// Client route
export const PPL_BASE = '/api/ppl';
Expand Down Expand Up @@ -81,6 +81,7 @@ export const OTEL_DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
export const SPAN_REGEX = /span/;

export const PROMQL_METRIC_SUBTYPE = 'promqlmetric';
export const OTEL_METRIC_SUBTYPE = 'openTelemetryMetric';
export const PPL_METRIC_SUBTYPE = 'metric';

export const PPL_SPAN_REGEX = /by\s*span/i;
Expand Down
95 changes: 55 additions & 40 deletions public/components/custom_panels/helpers/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable no-unused-vars */
/* eslint-disable no-prototype-builtins */

import { ShortDate } from '@elastic/eui';
// eslint-disable-next-line import/no-unresolved
import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
import _, { forEach, isEmpty, min } from 'lodash';
import { Moment } from 'moment-timezone';
Expand All @@ -12,6 +15,7 @@ import { Layout } from 'react-grid-layout';
import { CoreStart } from '../../../../../../src/core/public';
import {
OBSERVABILITY_BASE,
OTEL_METRIC_SUBTYPE,
PPL_DATE_FORMAT,
PPL_INDEX_REGEX,
PPL_WHERE_CLAUSE_REGEX,
Expand All @@ -33,6 +37,7 @@ import { Visualization } from '../../visualizations/visualization';
import { MetricType } from '../../../../common/types/metrics';
import { convertDateTime, updateCatalogVisualizationQuery } from '../../common/query_utils';
import { coreRefs } from '../../../framework/core_refs';
import { ConsoleAppender } from '../../../../../../src/core/server/logging/appenders/console/console_appender';

/*
* "Utils" This file contains different reused functions in operational panels
Expand Down Expand Up @@ -342,6 +347,7 @@ export const renderCatalogVisualization = async ({
queryMetaData?: MetricType;
visualization: SavedVisualizationType;
}) => {
console.log('visualization in catalog: ', visualization);
setIsLoading(true);
setIsError({} as VizContainerError);

Expand Down Expand Up @@ -394,14 +400,15 @@ const createOtelVisualizationMetaData = (
documentName: string,
visualizationType: string,
startTime: string,
endTime: string
endTime: string,
queryData: object
) => {
return {
name: documentName,
description: '',
query: '',
type: visualizationType,
metricType: 'otel',
metricType: OTEL_METRIC_SUBTYPE,
selected_date_range: {
start: startTime,
end: endTime,
Expand All @@ -415,6 +422,9 @@ const createOtelVisualizationMetaData = (
text: '',
tokens: [],
},
userConfigs: {
layout: dynamicLayoutFromQueryData(queryData),
},
};
};

Expand Down Expand Up @@ -481,34 +491,47 @@ const extractIndexAndDocumentName = (metricString: string): [string, string] | n
}
};

export const renderOpenTelemetryVisualization = async (
savedVisualizationId: string,
startTime: string,
endTime: string,
spanParam: string | undefined,
setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>,
setVisualizationType: React.Dispatch<React.SetStateAction<string>>,
setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>,
setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>,
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>,
panelVisualization: any,
spanResolution?: string
) => {
startTime = 'now-15y';
endTime = 'now';
export const renderOpenTelemetryVisualization = async ({
startTime,
endTime,
setVisualizationTitle,
setVisualizationType,
setVisualizationData,
setVisualizationMetaData,
setIsLoading,
setIsError,
visualization,
}: {
startTime: string;
endTime: string;
setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>;
setVisualizationType: React.Dispatch<React.SetStateAction<string>>;
setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>;
setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>;
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
visualization: any;
}) => {
setIsLoading(true);
setIsError({} as VizContainerError);

const { http } = coreRefs;
const visualizationType = 'bar';
let index = panelVisualization?.metric?.index;
let index = visualization?.index;
let documentName = visualization?.name;
console.log('index: ', index);

if (index === undefined) {
const indexAndDocumentName = extractIndexAndDocumentName(panelVisualization.name);
const indexAndDocumentName = extractIndexAndDocumentName(visualization.name);
index = indexAndDocumentName[0];
savedVisualizationId = indexAndDocumentName[1];
documentName = indexAndDocumentName[1];
}
const fetchSampleDocument = await fetchSampleOTDocument(index, http, savedVisualizationId)();

const fetchSampleDocument = await fetchSampleOTDocument(index, http, documentName)();
const source = fetchSampleDocument.hits[0]._source;

setVisualizationType(visualizationType);
setVisualizationTitle(source.name);

const dataBinsPromises = source.buckets.map(async (bucket: any) => {
try {
const formattedStartTime = convertDateTime(startTime, false, false, false, true);
Expand All @@ -518,19 +541,13 @@ export const renderOpenTelemetryVisualization = async (
bucket.max.toString(),
formattedStartTime,
formattedEndTime,
savedVisualizationId,
documentName,
http,
index,
setIsError,
setIsLoading
)();

function getRandomInt(min: number, max: number) {
// The maximum is exclusive and the minimum is inclusive
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
return {
xAxis: bucket.min + ' - ' + bucket.max,
'count()': fetchingAggregatedBinCount?.nested_buckets?.bucket_range?.bucket_count?.value,
Expand All @@ -545,18 +562,14 @@ export const renderOpenTelemetryVisualization = async (
return { dataBins: { jsonData } };
};
const formatedJsonData = formatDataBinsName().dataBins;

setVisualizationType(visualizationType);
setVisualizationTitle(source.name);
setVisualizationData(formatedJsonData);

const visualizationMetaData = createOtelVisualizationMetaData(
savedVisualizationId,
documentName,
visualizationType,
startTime,
endTime
endTime,
formatedJsonData
);

setVisualizationData(formatedJsonData);
setVisualizationMetaData(visualizationMetaData);
};

Expand Down Expand Up @@ -593,7 +606,7 @@ export const parseSavedVisualizations = (
subType: visualization.savedVisualization.hasOwnProperty('subType')
? visualization.savedVisualization.subType
: '',
metric_type: visualization.savedVisualization.hasOwnProperty('metric_type')
metricType: visualization.savedVisualization.hasOwnProperty('metricType')
? visualization.savedVisualization.metricType
: '',
units_of_measure: visualization.savedVisualization.hasOwnProperty('units_of_measure')
Expand Down Expand Up @@ -732,7 +745,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
finalDataConfig = { ...finalDataConfig, ...processMetricsData(data.schema, finalDataConfig) };

// add otel metric specific overriding
if (metaData?.metricType === 'otel') {
if (metaData?.metricType === OTEL_METRIC_SUBTYPE) {
finalDataConfig = { ...finalDataConfig, ...constructOtelMetricsMetaData() };
}

Expand All @@ -748,6 +761,8 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
},
};

console.log('type in displayVisualization: ', type);

return (
<Visualization
visualizations={getVizContainerProps({
Expand Down
3 changes: 2 additions & 1 deletion public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-unused-vars */

import _ from 'lodash';
import React, { useEffect, useState } from 'react';
Expand All @@ -15,7 +16,6 @@ import { VisualizationType } from '../../../../../common/types/custom_panels';
import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
import './panel_grid.scss';
import { mergeLayoutAndVisualizations } from '../../helpers/utils';
import { savedObjectDeleteTrigger } from '../../../../../../../src/plugins/saved_objects_management/public';

// HOC container to provide dynamic width for Grid layout
const ResponsiveGridLayout = WidthProvider(Responsive);
Expand Down Expand Up @@ -92,6 +92,7 @@ export const PanelGrid = (props: PanelGridProps) => {
};

const loadVizComponents = () => {
console.log('panelVisualizations[0]: ', panelVisualizations[0]);
const gridDataComps = panelVisualizations.map(
(panelVisualization: VisualizationType, index) => (
<VisualizationContainer
Expand Down
52 changes: 25 additions & 27 deletions ...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable no-unused-vars */
/* eslint-disable no-prototype-builtins */

import {
EuiButton,
Expand Down Expand Up @@ -33,7 +35,6 @@ import {
renderCatalogVisualization,
renderSavedVisualization,
renderOpenTelemetryVisualization,
fetchVisualizationById,
} from '../../helpers/utils';
import './visualization_container.scss';
import { VizContainerError } from '../../../../../common/types/custom_panels';
Expand All @@ -42,6 +43,7 @@ import { coreRefs } from '../../../../framework/core_refs';
import {
PROMQL_METRIC_SUBTYPE,
observabilityMetricsID,
OTEL_METRIC_SUBTYPE,
} from '../../../../../common/constants/shared';

/*
Expand Down Expand Up @@ -243,45 +245,37 @@ export const VisualizationContainer = ({
}

const fetchVisualization = async () => {
return savedVisualizationId
? await fetchVisualizationById(http, savedVisualizationId, setIsError)
: inputMetaData;
try {
return savedVisualizationId
? await fetchVisualizationById(http, savedVisualizationId, setIsError)
: inputMetaData;
} catch (error) {
setIsError({ error });
return null;
}
};

const loadVisaulization = async () => {
const visualization = await fetchVisualization();
setVisualizationMetaData(visualization);
console.log('visualization: ', visualization);

if (!visualization && !savedVisualizationId) return;

// console.log('panelViz: ', panelVisualization);
// if (panelVisualization.metricType === undefined) {
// const fetchedVisualization = await fetchVisualizationById(
// http,
// savedVisualizationId,
// setIsError
// );
// console.log('fetchedVisualization in if: ', fetchedVisualization);
// metricType = fetchedVisualization.metric_type;

// if (metricType === 'openTelemetryMetric') panelVisualization = fetchedVisualization;
// }
if (metricType === 'openTelemetryMetric')
await renderOpenTelemetryVisualization(
savedVisualizationId,
fromTime,
toTime,
spanParam,
if (visualization.metricType === OTEL_METRIC_SUBTYPE)
await renderOpenTelemetryVisualization({
visualization,
startTime: fromTime,
endTime: toTime,
setVisualizationTitle,
setVisualizationType,
setVisualizationData,
setVisualizationMetaData,
setIsLoading,
setIsError,
panelVisualization
);
else if (visualization.subType === PROMQL_METRIC_SUBTYPE)
renderCatalogVisualization({
});
else if (visualization.metricType === PROMQL_METRIC_SUBTYPE)
renderCatalogVisualization({
visualization,
http,
pplService,
Expand All @@ -299,7 +293,7 @@ export const VisualizationContainer = ({
setIsError,
queryMetaData,
});
else
else
await renderSavedVisualization({
visualization,
http,
Expand Down Expand Up @@ -356,6 +350,10 @@ export const VisualizationContainer = ({
loadVisaulization();
}, [onRefresh, inputMetaData, span, resolution, fromTime, toTime]);

useEffect(() => {
console.log('visualizationType: ' + visualizationType);
}, [visualizationType]);

const metricVisCssClassName = catalogVisualization ? 'metricVis' : '';

return (
Expand Down
Loading

0 comments on commit b529afb

Please sign in to comment.