Skip to content

Commit

Permalink
Added support for OSD dashboards
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 31, 2023
1 parent b529afb commit 203b6e9
Show file tree
Hide file tree
Showing 16 changed files with 193 additions and 174 deletions.
6 changes: 3 additions & 3 deletions common/types/explorer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { History } from 'history';
import Plotly from 'plotly.js-dist';
import { QueryManager } from 'common/query_manager';
import { VIS_CHART_TYPES } from '../../common/constants/shared';
import { OTEL_METRIC_SUBTYPE, VIS_CHART_TYPES } from '../../common/constants/shared';
import {
AGGREGATIONS,
AVAILABLE_FIELDS,
Expand Down Expand Up @@ -174,13 +174,13 @@ export interface SavedVisualization extends SavedObjectAttributes {
selected_fields: { text: string; tokens: [] };
selected_timestamp: IField;
type: string;
subType?: 'metric' | 'visualization' | typeof PROMQL_METRIC_SUBTYPE; // exists if sub type is metric
subType?: 'metric' | 'visualization'; // exists if sub type is metric
user_configs?: string;
units_of_measure?: string;
application_id?: string;
dataSources: string; // list of type SelectedDataSources that is stringified
queryLang: string;
metricType?: string; // exists if sub type is metric
metricType?: typeof PROMQL_METRIC_SUBTYPE | typeof OTEL_METRIC_SUBTYPE; // exists if sub type is metric
}

export interface ExplorerDataType {
Expand Down
15 changes: 12 additions & 3 deletions public/components/common/query_utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,19 +217,28 @@ export const getIndexPatternFromRawQuery = (query: string): string => {
return getPromQLIndex(query) || getPPLIndex(query);
};

function extractSpanAndResolution(query: string) {
const regex = /'(\d+)([smhdwMy])'/;
const match = query.match(regex);
// eslint-disable-next-line radix
return match ? { span: parseInt(match[1]), resolution: match[2] } : null;
}

export const preprocessMetricQuery = ({ metaData, startTime, endTime }) => {
// convert to moment
const start = convertDateTime(startTime, true);
const end = convertDateTime(endTime, false);

const resolution = findMinInterval(start, end);
// const resolution = findMinInterval(start, end);
const spanResolution = extractSpanAndResolution(metaData.query);
console.log('blah: ', spanResolution);

const visualizationQuery = updateCatalogVisualizationQuery({
...metaData.queryMetaData,
start,
end,
span: '1',
resolution,
span: spanResolution.span,
resolution: spanResolution.resolution,
});

return visualizationQuery;
Expand Down
36 changes: 15 additions & 21 deletions public/components/custom_panels/helpers/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@
* 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 @@ -16,8 +13,8 @@ import { CoreStart } from '../../../../../../src/core/public';
import {
OBSERVABILITY_BASE,
OTEL_METRIC_SUBTYPE,
PPL_DATE_FORMAT,
PPL_INDEX_REGEX,
PPL_METRIC_SUBTYPE,
PPL_WHERE_CLAUSE_REGEX,
} from '../../../../common/constants/shared';
import { QueryManager } from '../../../../common/query_manager';
Expand All @@ -37,7 +34,6 @@ 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 @@ -275,13 +271,15 @@ const createCatalogVisualizationMetaData = ({
query,
type,
subType,
metricType,
timeField,
queryData,
}: {
catalogSource: string;
query: string;
type: string;
subType: string;
metricType: string;
timeField: string;
queryData: object;
}) => {
Expand All @@ -291,6 +289,7 @@ const createCatalogVisualizationMetaData = ({
query,
type,
subType,
metricType,
selected_date_range: {
start: 'now/y',
end: 'now',
Expand All @@ -312,7 +311,6 @@ const createCatalogVisualizationMetaData = ({

// Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
export const renderCatalogVisualization = async ({
http,
pplService,
catalogSource,
startTime,
Expand All @@ -326,10 +324,8 @@ export const renderCatalogVisualization = async ({
setVisualizationMetaData,
setIsLoading,
setIsError,
spanResolution,
visualization,
}: {
http: CoreStart['http'];
pplService: PPLService;
catalogSource: string;
startTime: string;
Expand All @@ -343,7 +339,6 @@ export const renderCatalogVisualization = async ({
setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>;
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>;
spanResolution?: string;
queryMetaData?: MetricType;
visualization: SavedVisualizationType;
}) => {
Expand All @@ -353,7 +348,6 @@ export const renderCatalogVisualization = async ({

const visualizationType = 'line';
const visualizationTimeField = '@timestamp';
const visualizationSubType = visualization.subType;

const visualizationQuery = updateCatalogVisualizationQuery({
...visualization.queryMetaData,
Expand Down Expand Up @@ -384,6 +378,7 @@ export const renderCatalogVisualization = async ({
query: visualizationQuery,
type: visualizationType,
subType: visualization.subType,
metricType: visualization.metricType,
timeField: visualizationTimeField,
queryData,
});
Expand All @@ -408,6 +403,7 @@ const createOtelVisualizationMetaData = (
description: '',
query: '',
type: visualizationType,
subType: PPL_METRIC_SUBTYPE,
metricType: OTEL_METRIC_SUBTYPE,
selected_date_range: {
start: startTime,
Expand All @@ -428,7 +424,7 @@ const createOtelVisualizationMetaData = (
};
};

const fetchAggregatedBinCount = (
export const fetchAggregatedBinCount = (
minimumBound: string,
maximumBound: string,
startTime: string,
Expand Down Expand Up @@ -463,7 +459,7 @@ const fetchAggregatedBinCount = (
});
};

const fetchSampleOTDocument = (
export const fetchSampleOTDocument = (
selectedOtelIndex: string,
http: CoreStart['http'],
documentName: string
Expand All @@ -478,7 +474,7 @@ const fetchSampleOTDocument = (
.catch((error) => console.error(error));
};

const extractIndexAndDocumentName = (metricString: string): [string, string] | null => {
export const extractIndexAndDocumentName = (metricString: string): [string, string] | null => {
const pattern = /\[Otel Metric\]\s(\S+?-\S+?)\.(\S+)/;
const match = metricString.match(pattern);

Expand Down Expand Up @@ -519,7 +515,6 @@ export const renderOpenTelemetryVisualization = async ({
const visualizationType = 'bar';
let index = visualization?.index;
let documentName = visualization?.name;
console.log('index: ', index);

if (index === undefined) {
const indexAndDocumentName = extractIndexAndDocumentName(visualization.name);
Expand Down Expand Up @@ -668,18 +663,18 @@ export const isPPLFilterValid = (
return true;
};

export const processMetricsData = (schema: any, dataConfig: any) => {
export const processMetricsData = (schema: any) => {
if (isEmpty(schema)) return {};
if (
schema.length === 3 &&
schema.every((schemaField) => ['@labels', '@value', '@timestamp'].includes(schemaField.name))
) {
return prepareMetricsData(schema, dataConfig);
return prepareMetricsData(schema);
}
return {};
};

export const prepareMetricsData = (schema: any, dataConfig: any) => {
export const prepareMetricsData = (schema: any) => {
const metricBreakdown: any[] = [];
const metricSeries: any[] = [];
const metricDimension: any[] = [];
Expand Down Expand Up @@ -742,7 +737,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
};

// add metric specific overriding
finalDataConfig = { ...finalDataConfig, ...processMetricsData(data.schema, finalDataConfig) };
finalDataConfig = { ...finalDataConfig, ...processMetricsData(data.schema) };

// add otel metric specific overriding
if (metaData?.metricType === OTEL_METRIC_SUBTYPE) {
Expand All @@ -760,9 +755,8 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
...(metaData.userConfigs?.layout || {}),
},
};

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

console.log('data: ', data);
console.log('mixedUserConfigs: ', mixedUserConfigs);
return (
<Visualization
visualizations={getVizContainerProps({
Expand Down
17 changes: 5 additions & 12 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,8 +2,6 @@
* 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 @@ -110,9 +108,9 @@ export const VisualizationContainer = ({
catalogVisualization,
inlineEditor,
actionMenuType,
metricType,
panelVisualization,
}: Props) => {
}: // metricType,
// panelVisualization,
Props) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [visualizationTitle, setVisualizationTitle] = useState('');
const [visualizationType, setVisualizationType] = useState('');
Expand Down Expand Up @@ -189,7 +187,7 @@ export const VisualizationContainer = ({
disabled={editMode}
onClick={() => {
closeActionsMenu();
if (visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE) {
if (visualizationMetaData?.metricType === PROMQL_METRIC_SUBTYPE) {
window.location.assign(`${observabilityMetricsID}#/${savedVisualizationId}`);
} else {
onEditClick(savedVisualizationId);
Expand Down Expand Up @@ -236,7 +234,7 @@ export const VisualizationContainer = ({
];

if (
visualizationMetaData?.subType === PROMQL_METRIC_SUBTYPE &&
visualizationMetaData?.metricType === PROMQL_METRIC_SUBTYPE &&
actionMenuType === 'metricsGrid'
) {
popoverPanel = [showPPLQueryPanel];
Expand Down Expand Up @@ -277,7 +275,6 @@ export const VisualizationContainer = ({
else if (visualization.metricType === PROMQL_METRIC_SUBTYPE)
renderCatalogVisualization({
visualization,
http,
pplService,
catalogSource: visualizationId,
startTime: fromTime,
Expand Down Expand Up @@ -350,10 +347,6 @@ export const VisualizationContainer = ({
loadVisaulization();
}, [onRefresh, inputMetaData, span, resolution, fromTime, toTime]);

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

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

return (
Expand Down
3 changes: 2 additions & 1 deletion public/components/event_analytics/explorer/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable @typescript-eslint/no-unused-vars */

import dateMath from '@elastic/datemath';
import {
Expand Down Expand Up @@ -609,7 +610,7 @@ export const Explorer = ({
indexFields: explorerFields,
userConfigs: {
...visualizationSettings,
...processMetricsData(explorerData.schema, visualizationSettings),
...processMetricsData(explorerData.schema),
},
appData: { fromApp: appLogEvents },
explorer: { explorerData, explorerFields, query, http, pplService },
Expand Down
3 changes: 2 additions & 1 deletion public/components/event_analytics/home/saved_objects_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function SavedQueryTable({
sortable: true,
truncateText: true,
render: (item: any) => {
return item.subType === PROMQL_METRIC_SUBTYPE ? (
return item.metricType === PROMQL_METRIC_SUBTYPE ? (
<EuiLink
href={`${METRIC_EXPLORER_BASE_PATH}${item.objectId}`}
data-test-subj="eventHome__savedQueryTableName"
Expand Down Expand Up @@ -108,6 +108,7 @@ export function SavedQueryTable({
timestamp: savedObject.selected_timestamp?.name,
fields: savedObject.selected_fields?.tokens || [],
subType: savedObject.subType,
metricType: savedObject?.metricType || 'customMetric',
};
return {
id: h.objectId,
Expand Down
Loading

0 comments on commit 203b6e9

Please sign in to comment.