diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
index df930ebf4..72145479f 100644
--- a/dashboards-observability/common/types/explorer.ts
+++ b/dashboards-observability/common/types/explorer.ts
@@ -16,7 +16,7 @@ import {
SELECTED_TIMESTAMP,
SELECTED_DATE_RANGE,
} from '../constants/explorer';
-import { CoreStart, HttpStart, NotificationsStart } from '../../../../src/core/public';
+import { CoreStart, HttpSetup, HttpStart, NotificationsStart } from '../../../../src/core/public';
import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
import TimestampUtils from '../../public/services/timestamp/timestamp';
import PPLService from '../../public/services/requests/ppl';
@@ -151,6 +151,14 @@ export interface SavedVizRes {
tenant: string;
}
+export interface ExplorerData {
+ explorerData: any;
+ explorerFields?: IExplorerFields;
+ query?: any;
+ http?: HttpSetup;
+ pplService?: PPLService;
+}
+
export interface IVisualizationContainerPropsData {
appData?: { fromApp: boolean };
rawVizData?: any;
@@ -161,7 +169,7 @@ export interface IVisualizationContainerPropsData {
xaxis: IField[];
yaxis: IField[];
};
- explorer?: any;
+ explorer?: ExplorerData;
}
export interface IVisualizationContainerPropsVis {
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index c0b1979ac..51059a763 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -72,7 +72,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -470,7 +469,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -891,7 +889,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -1373,7 +1370,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -1807,7 +1803,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -2295,7 +2290,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -2815,7 +2809,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -3076,7 +3069,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -3360,7 +3352,6 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
"size": 4,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -3679,7 +3670,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"size": 0,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -3886,7 +3876,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"size": 0,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
@@ -4116,7 +4105,6 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
"size": 0,
"status": 200,
},
- "explorerFields": Object {},
},
"indexFields": Object {},
"query": Object {},
diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
index 0447dfe4d..e2635d091 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx
@@ -300,10 +300,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
query: {},
indexFields: {},
userConfigs: metaData.user_configs,
- explorer: {
- explorerData: data,
- explorerFields: {},
- },
+ explorer: { explorerData: data },
})}
/>
);
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
index 4f7de3107..89a7a02f7 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
@@ -41,52 +41,57 @@ export const ConfigLogsView = ({
...schema.props,
};
const DimensionComponent = schema.component || ButtonGroupItem;
- if (schema.eleType === 'buttons') {
- params = {
- title: schema.name,
- legend: schema.name,
- groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
- ...btn,
- label: btn.name,
- })),
- idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
- handleButtonChange: handleConfigurationChange(schema.mapTo),
- vizState,
- ...schema.props,
- };
- } else if (schema.eleType === 'switch') {
- let isDisabled = false;
- if (schema.name === 'Time') {
- const isTimeAvailable =
- rawData &&
- rawData.find(
- (data) => data.timestamp !== undefined || data.new_timestamp !== undefined
- );
- isDisabled = isTimeAvailable === undefined;
- }
- params = {
- label: schema.name,
- disabled: isDisabled,
- checked:
- vizState[schema.mapTo] !== undefined ? vizState[schema.mapTo] : schema?.defaultState,
- handleChange: handleConfigurationChange(schema.mapTo),
- vizState,
- ...schema.props,
- };
- } else {
- params = {
- title: schema.name,
- currentValue: vizState[schema.mapTo] || '',
- handleInputChange: handleConfigurationChange(schema.mapTo),
- vizState,
- ...schema.props,
- };
+ switch (schema.eleType) {
+ case 'buttons':
+ params = {
+ title: schema.name,
+ legend: schema.name,
+ groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+ ...btn,
+ label: btn.name,
+ })),
+ idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+ handleButtonChange: handleConfigurationChange(schema.mapTo),
+ vizState,
+ ...schema.props,
+ };
+ break;
+ case 'switch':
+ let isDisabled = false;
+ if (schema.name === 'Time') {
+ const isTimeAvailable =
+ rawData &&
+ rawData.find(
+ (data) => data.timestamp !== undefined || data.new_timestamp !== undefined
+ );
+ isDisabled = isTimeAvailable === undefined;
+ }
+ params = {
+ label: schema.name,
+ disabled: isDisabled,
+ checked:
+ vizState[schema.mapTo] !== undefined
+ ? vizState[schema.mapTo]
+ : schema?.defaultState,
+ handleChange: handleConfigurationChange(schema.mapTo),
+ vizState,
+ ...schema.props,
+ };
+ break;
+ default:
+ params = {
+ title: schema.name,
+ currentValue: vizState[schema.mapTo] || '',
+ handleInputChange: handleConfigurationChange(schema.mapTo),
+ vizState,
+ ...schema.props,
+ };
}
return (
- <>
+
-
+
);
}),
[schemas, vizState, handleConfigurationChange]
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
index c3b724414..77533cf46 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
@@ -4,8 +4,7 @@
*/
import React from 'react';
-import { uniqueId } from 'lodash';
-import { EuiSpacer, EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { EuiSpacer, EuiFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
interface EUISwitch {
label: string;
@@ -14,10 +13,10 @@ interface EUISwitch {
handleChange: (isChecked: boolean) => void;
}
export const ConfigSwitch: React.FC = ({ label, disabled, checked, handleChange }) => (
- <>
+
= ({ label, disabled, checked, ha
/>
-
+
);
diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
index f511bfdc1..d9a90fe14 100644
--- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
+++ b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
@@ -5,7 +5,12 @@
import { isEmpty, take } from 'lodash';
import { getVisType } from '../vis_types';
-import { IVisualizationContainerProps, IField, IQuery } from '../../../../../common/types/explorer';
+import {
+ IVisualizationContainerProps,
+ IField,
+ IQuery,
+ ExplorerData,
+} from '../../../../../common/types/explorer';
import { visChartTypes } from '../../../../../common/constants/shared';
interface IVizContainerProps {
@@ -19,20 +24,28 @@ interface IVizContainerProps {
xaxis: IField[];
yaxis: IField[];
};
- explorer?: any;
+ explorer?: ExplorerData;
}
const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => {
if (isEmpty(vizFields)) return {};
- const vizFieldsWithLabel: ({ [key: string]: string })[] = vizFields.map(vizField => ({ ...vizField, label: vizField.name }));
+ const vizFieldsWithLabel: { [key: string]: string }[] = vizFields.map((vizField) => ({
+ ...vizField,
+ label: vizField.name,
+ }));
- const mapXaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
- vizFieldsWithLabel.filter((field) => field.type === 'timestamp') :
- [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
+ const mapXaxis = (): { [key: string]: string }[] =>
+ visName === visChartTypes.Line
+ ? vizFieldsWithLabel.filter((field) => field.type === 'timestamp')
+ : [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
- const mapYaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
- vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
- : take(vizFieldsWithLabel, vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1) || [];
+ const mapYaxis = (): { [key: string]: string }[] =>
+ visName === visChartTypes.Line
+ ? vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
+ : take(
+ vizFieldsWithLabel,
+ vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1
+ ) || [];
return { xaxis: mapXaxis(), yaxis: mapYaxis() };
};
@@ -44,15 +57,17 @@ export const getVizContainerProps = ({
indexFields = {},
userConfigs = {},
appData = {},
- explorer = {},
+ explorer = { explorerData: null },
}: IVizContainerProps): IVisualizationContainerProps => {
const getVisTypeData = () => {
if (vizId === visChartTypes.Line || vizId === visChartTypes.Scatter) {
- return vizId === visChartTypes.Line ? { ...getVisType(vizId, { type: visChartTypes.Line }) } : { ...getVisType(vizId, { type: visChartTypes.Scatter }) };
+ return vizId === visChartTypes.Line
+ ? { ...getVisType(vizId, { type: visChartTypes.Line }) }
+ : { ...getVisType(vizId, { type: visChartTypes.Scatter }) };
} else {
- return { ...getVisType(vizId) }
+ return { ...getVisType(vizId) };
}
- }
+ };
return {
data: {
@@ -67,7 +82,7 @@ export const getVizContainerProps = ({
explorer: { ...explorer },
},
vis: {
- ...getVisTypeData()
+ ...getVisTypeData(),
},
};
};
diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss
index cbbca03cf..a7f3e5c6f 100644
--- a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss
+++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss
@@ -21,3 +21,7 @@ th {
tr:hover {
background-color: #ddd;
}
+
+.logs-view-container {
+ font-size: 16px;
+}
diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx
index a5bba2f1d..6974051f3 100644
--- a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx
@@ -2,19 +2,22 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
+import { IExplorerFields } from '../../../../../common/types/explorer';
import React from 'react';
import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
import { DataGrid } from '../../../../components/event_analytics/explorer/events_views/data_grid';
import './logs_view.scss';
export const LogsView = ({ visualizations }: any) => {
- const http = visualizations?.data?.explorer?.http;
- const pplService = visualizations?.data?.explorer?.pplService;
- const explorerData = visualizations?.data?.explorer?.explorerData;
- const explorerFields = visualizations?.data?.explorer?.explorerFields;
- const query = visualizations?.data?.explorer?.query;
+ const explorer = visualizations?.data?.explorer;
- const emptyExplorerFields = {
+ const http = explorer?.http;
+ const pplService = explorer?.pplService;
+ const explorerData = explorer?.explorerData;
+ const explorerFields = explorer?.explorerFields;
+ const query = explorer?.query;
+
+ const emptyExplorerFields: IExplorerFields = {
availableFields: [],
queriedFields: [],
selectedFields: [],
@@ -22,7 +25,7 @@ export const LogsView = ({ visualizations }: any) => {
};
return (
-