+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Utils helper functions renders displayVisualization function 4`] = `
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No results found
-
-
-
-
-
-
{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'bar')}
+
+ {displayVisualization(sampleSavedVisualization.visualization, samplePPLResponse, 'bar')}
+
);
expect(wrapper1).toMatchSnapshot();
const wrapper2 = mount(
- {displayVisualization(sampleSavedVisualization, samplePPLResponse, 'line')}
+ {displayVisualization(sampleSavedVisualizationForLine, samplePPLResponse, 'line')}
);
expect(wrapper2).toMatchSnapshot();
const wrapper3 = mount(
- {displayVisualization(sampleSavedVisualization, samplePPLResponse, 'horizontal_bar')}
+ {displayVisualization(sampleSavedVisualizationForTreeMap, samplePPLResponse, 'tree_map')}
);
expect(wrapper3).toMatchSnapshot();
const wrapper4 = mount(
- {displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}
+
+ {displayVisualization(
+ sampleSavedVisualizationForHorizontalBar,
+ samplePPLResponse,
+ 'horizontal_bar'
+ )}
+
);
expect(wrapper4).toMatchSnapshot();
+
+ const wrapper5 = mount(
+ {displayVisualization(sampleSavedVisualizationForPie, samplePPLResponse, 'pie')}
+ );
+ expect(wrapper5).toMatchSnapshot();
+
+ const wrapper6 = mount(
+ {displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}
+ );
+ expect(wrapper6).toMatchSnapshot();
});
});
diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
index 8f4465d8e..855dd55b8 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -7,7 +7,7 @@
import dateMath from '@elastic/datemath';
import { ShortDate } from '@elastic/eui';
import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _ from 'lodash';
+import _, { isEmpty } from 'lodash';
import { Moment } from 'moment-timezone';
import React from 'react';
import { Layout } from 'react-grid-layout';
@@ -289,7 +289,7 @@ export const isPPLFilterValid = (
// Renders visualization in the vizualization container component
export const displayVisualization = (metaData: any, data: any, type: string) => {
- if (metaData === undefined || metaData === {}) {
+ if (metaData === undefined || isEmpty(metaData)) {
return <>;
}
return (
@@ -297,7 +297,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
visualizations={getVizContainerProps({
vizId: type,
rawVizData: data,
- query: {},
+ query: { rawQuery: metaData.query },
indexFields: {},
userConfigs: metaData.user_configs,
explorer: { explorerData: data, explorerFields: data.metadata.fields },
diff --git a/dashboards-observability/test/panels_constants.tsx b/dashboards-observability/test/panels_constants.tsx
index 1b1362bf2..b79dde38c 100644
--- a/dashboards-observability/test/panels_constants.tsx
+++ b/dashboards-observability/test/panels_constants.tsx
@@ -19,6 +19,40 @@ export const sampleSavedVisualization = {
},
};
+export const sampleSavedVisualizationForHorizontalBar = {
+ id: 'zgBSfYIBi5fNIzQywlQZ',
+ name: 'Horizontal',
+ query: 'source = opensearch_dashboards_sample_data_logs | stats avg(machine.ram) by machine.os',
+ type: 'horizontal_bar',
+ timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForLine = {
+ id: '4wANiYIBi5fNIzQySlRB',
+ name: '[Logs] Average ram usage per day by windows os ',
+ query:
+ "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win') | stats avg(machine.ram) by span(timestamp,1d)",
+ type: 'line',
+ timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForTreeMap = {
+ id: '5QANiYIBi5fNIzQySlRL',
+ name: 'TreeMap1111',
+ query: 'source = opensearch_dashboards_sample_data_logs | stats count() by tags',
+ type: 'tree_map',
+ timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForPie = {
+ id: '4gANiYIBi5fNIzQySlQ5',
+ name: 'PieChart',
+ query:
+ "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or machine.os='ios' | stats avg(machine.ram) by span(timestamp,1d)",
+ type: 'pie',
+ timeField: 'timestamp',
+};
+
export const samplePPLResponse = {
data: {
'avg(FlightDelayMin)': [