From fcb61a3b1f3d6d656f921123159aad67d9f975d6 Mon Sep 17 00:00:00 2001 From: abasatwar Date: Wed, 10 Aug 2022 13:15:54 +0530 Subject: [PATCH] Sprint3 alpha (#64) --- .../common/constants/data_table.ts | 16 + .../common/constants/explorer.ts | 1 + .../common/constants/shared.ts | 74 +- .../common/types/explorer.ts | 30 +- .../__snapshots__/utils.test.tsx.snap | 848 +++++++++++++++++- .../custom_panels/helpers/utils.tsx | 1 + .../event_analytics/explorer/explorer.tsx | 5 + .../__snapshots__/config_panel.test.tsx.snap | 809 +++++++++++++---- .../config_panel/config_panel.tsx | 127 +-- .../config_controls/config_chart_options.tsx | 2 +- .../config_controls/config_color_theme.tsx | 2 +- .../config_line_chart_styles.tsx | 39 +- .../config_controls/config_logs_view.tsx | 110 +++ .../config_controls/config_number_input.tsx | 1 + .../config_controls/config_panel_item.tsx | 2 +- .../config_panel_option_gauge.tsx | 9 +- .../config_controls/config_switch.tsx | 30 + .../config_controls/config_thresholds.tsx | 12 +- .../data_config_panel_item.tsx | 27 +- .../treemap_config_panel_item.tsx | 18 +- .../explorer/visualizations/index.tsx | 15 +- .../__tests__/__snapshots__/bar.test.tsx.snap | 14 +- .../__snapshots__/heatmap.test.tsx.snap | 16 +- .../__snapshots__/histogram.test.tsx.snap | 14 +- .../__snapshots__/line.test.tsx.snap | 14 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 14 +- .../__snapshots__/text.test.tsx.snap | 14 +- .../__snapshots__/treemap.test.tsx.snap | 16 +- .../visualizations/charts/bar/bar.tsx | 2 +- .../visualizations/charts/bar/bar_type.ts | 14 +- .../charts/financial/gauge/gauge_type.ts | 10 +- .../charts/helpers/viz_types.ts | 46 +- .../charts/histogram/histogram_type.ts | 6 +- .../visualizations/charts/lines/line.tsx | 33 +- .../visualizations/charts/lines/line_type.ts | 31 +- .../charts/logs_view/logs_view.scss | 25 + .../charts/logs_view/logs_view.tsx | 40 + .../charts/logs_view/logs_view_type.ts | 69 ++ .../charts/maps/heatmap_type.ts | 6 +- .../charts/maps/treemap_type.ts | 12 +- .../visualizations/charts/pie/pie_type.ts | 10 +- .../visualizations/charts/text/text_type.ts | 4 +- .../visualizations/charts/vis_types.ts | 3 + .../visualizations/visualization.tsx | 3 +- .../visualizations/visualization_chart.tsx | 5 +- 45 files changed, 2102 insertions(+), 497 deletions(-) create mode 100644 dashboards-observability/common/constants/data_table.ts create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx create mode 100644 dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss create mode 100644 dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx create mode 100644 dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts diff --git a/dashboards-observability/common/constants/data_table.ts b/dashboards-observability/common/constants/data_table.ts new file mode 100644 index 000000000..bbca653a7 --- /dev/null +++ b/dashboards-observability/common/constants/data_table.ts @@ -0,0 +1,16 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px'; +export const GRID_PAGE_RANGE_DISPLAY = 5; +export const COLUMN_DEFAULT_MIN_WIDTH = 100; +export const GRID_PAGE_SIZES = [10, 50, 100]; +export const ROW_DENSITIES = [ + { icon: 'tableDensityExpanded', height: 55, selected: false }, + { icon: 'tableDensityNormal', height: 45, selected: false }, + { icon: 'tableDensityCompact', height: 35, selected: true }, +]; + +export const HEADER_HEIGHT = 35; diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index 9199fc8cd..9d52923fe 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/dashboards-observability/common/constants/explorer.ts @@ -85,6 +85,7 @@ export const VIZ_CONTAIN_XY_AXIS = [ visChartTypes.Histogram, visChartTypes.Line, visChartTypes.Pie, + visChartTypes.Scatter, ]; // default ppl aggregation method options diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index d4021c350..e61909789 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -72,7 +72,6 @@ export const pageStyles: CSS.Properties = { maxWidth: '1130px', }; - export enum visChartTypes { Bar = 'bar', HorizontalBar = 'horizontal_bar', @@ -82,13 +81,15 @@ export enum visChartTypes { Text = 'text', Gauge = 'gauge', Histogram = 'histogram', - TreeMap = 'tree_map' + TreeMap = 'tree_map', + Scatter = 'scatter', + LogsView = 'logs_view', } export interface ValueOptionsAxes { - xaxis ?: IField[]; - yaxis ?: IField[]; - zaxis ?: IField[]; + xaxis?: IField[]; + yaxis?: IField[]; + zaxis?: IField[]; childField?: IField[]; valueField?: IField[]; series?: IField[]; @@ -97,72 +98,85 @@ export interface ValueOptionsAxes { export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double']; -export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Gauge, visChartTypes.Histogram]; +export const ENABLED_VIS_TYPES = [ + visChartTypes.Bar, + visChartTypes.HorizontalBar, + visChartTypes.Line, + visChartTypes.Pie, + visChartTypes.HeatMap, + visChartTypes.Text, + visChartTypes.TreeMap, + visChartTypes.Gauge, + visChartTypes.Histogram, + visChartTypes.Scatter, + visChartTypes.LogsView, +]; //Live tail constants export const LIVE_OPTIONS = [ { - label:'5s', + label: '5s', startTime: 'now-5s', delayTime: 5000, }, { - label:'10s', + label: '10s', startTime: 'now-10s', delayTime: 10000, }, { - label:'30s', + label: '30s', startTime: 'now-30s', delayTime: 30000, }, { - label:'1m', + label: '1m', startTime: 'now-1m', delayTime: 60000, }, { - label:'5m', + label: '5m', startTime: 'now-5m', delayTime: 60000 * 5, }, { - label:'15m', + label: '15m', startTime: 'now-15m', delayTime: 60000 * 15, }, { - label:'30m', + label: '30m', startTime: 'now-30m', delayTime: 60000 * 30, }, { - label:'1h', + label: '1h', startTime: 'now-1h', delayTime: 60000 * 60, }, { - label:'2h', + label: '2h', startTime: 'now-2h', delayTime: 60000 * 120, }, ]; -export const LIVE_END_TIME ='now'; +export const LIVE_END_TIME = 'now'; export interface DefaultChartStylesProps { - DefaultMode: string, - Interpolation: string, - LineWidth: number, - FillOpacity: number, - MarkerSize: number, - ShowLegend: string, - LegendPosition: string, - LabelAngle: number, - DefaultSortSectors: string, -}; + DefaultModeLine: string; + Interpolation: string; + LineWidth: number; + FillOpacity: number; + MarkerSize: number; + ShowLegend: string; + LegendPosition: string; + LabelAngle: number; + DefaultSortSectors: string; + DefaultModeScatter: string; +} export const DefaultChartStyles: DefaultChartStylesProps = { - DefaultMode: 'lines', + DefaultModeLine: 'lines', Interpolation: 'spline', LineWidth: 2, FillOpacity: 40, @@ -171,7 +185,7 @@ export const DefaultChartStyles: DefaultChartStylesProps = { LegendPosition: 'v', LabelAngle: 0, DefaultSortSectors: 'largest_to_smallest', -} - -export const FILLOPACITY_DIV_FACTOR = 200; + DefaultModeScatter: 'markers', +}; +export const FILLOPACITY_DIV_FACTOR = 200; diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 9e4063093..9d3cb5072 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,31 @@ export interface SavedVizRes { tenant: string; } +export interface ExplorerDataType { + jsonData: object[]; + jsonDataAll: object[]; +} + +export interface Query { + finalQuery: string; + index: string; + isLoaded: boolean; + objectType: string; + rawQuery: string; + savedObjectId: string; + selectedDateRange: string[]; + selectedTimestamp: string; + tabCreatedType: string; +} + +export interface ExplorerData { + explorerData?: ExplorerDataType; + explorerFields?: IExplorerFields; + query?: Query; + http?: HttpSetup; + pplService?: PPLService; +} + export interface IVisualizationContainerPropsData { appData?: { fromApp: boolean }; rawVizData?: any; @@ -161,6 +186,7 @@ export interface IVisualizationContainerPropsData { xaxis: IField[]; yaxis: IField[]; }; + explorer?: ExplorerData; } export interface IVisualizationContainerPropsVis { @@ -190,7 +216,7 @@ export interface IConfigPanelOptionSection { mapTo: string; props?: any; isSingleSelection?: boolean; - defaultState?: number; + defaultState?: boolean | string; eleType?: string; } 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 8353e48cd..ad5343037 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 @@ -23,6 +23,56 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -97,7 +147,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -200,7 +250,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -273,7 +323,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -284,7 +334,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -304,13 +354,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -370,6 +420,56 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -444,7 +544,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -547,7 +647,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -620,7 +720,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -631,7 +731,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -651,13 +751,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -740,6 +840,56 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -814,7 +964,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -917,7 +1067,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -990,7 +1140,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -1001,7 +1151,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -1021,13 +1171,13 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -1171,6 +1321,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -1244,7 +1444,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -1291,8 +1491,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "legendSize", - "name": "Legend Size", - "title": "Legend Size", + "name": "Legend size", + "title": "Legend size", }, ], }, @@ -1377,7 +1577,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -1387,7 +1587,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "name": "Point Size", + "name": "Point size", "props": Object { "max": 40, }, @@ -1396,8 +1596,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", - "title": "Label Size", + "name": "Label size", + "title": "Label size", }, Object { "component": [Function], @@ -1554,6 +1754,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -1627,7 +1877,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -1674,8 +1924,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "legendSize", - "name": "Legend Size", - "title": "Legend Size", + "name": "Legend size", + "title": "Legend size", }, ], }, @@ -1760,7 +2010,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -1770,7 +2020,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "name": "Point Size", + "name": "Point size", "props": Object { "max": 40, }, @@ -1779,8 +2029,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", - "title": "Label Size", + "name": "Label size", + "title": "Label size", }, Object { "component": [Function], @@ -1991,6 +2241,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -2064,7 +2364,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -2111,8 +2411,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "legendSize", - "name": "Legend Size", - "title": "Legend Size", + "name": "Legend size", + "title": "Legend size", }, ], }, @@ -2133,12 +2433,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "id": "lines", "name": "Lines", }, - ], - "options": Array [ - Object { - "id": "lines", - "name": "Lines", - }, Object { "id": "markers", "name": "Marker", @@ -2197,7 +2491,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -2207,7 +2501,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "name": "Point Size", + "name": "Point size", "props": Object { "max": 40, }, @@ -2216,8 +2510,8 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", - "title": "Label Size", + "name": "Label size", + "title": "Label size", }, Object { "component": [Function], @@ -2225,7 +2519,237 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "eleType": "slider", "mapTo": "rotateLabels", "name": "Rotate labels", - "props": Object { +======= + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend Size", + "title": "Legend Size", + }, + ], + "options": Array [ + Object { + "id": "lines", + "name": "Lines", + }, + ], + "options": Array [ + Object { + "id": "markers", + "name": "Marker", + }, + Object { + "id": "lines+markers", + "name": "Lines + Markers", +>>>>>>> 5a182978b1731b84de6af34643f38b4114cf2a45 + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "id": "linear", + "name": "Linear", + }, + Object { + "id": "spline", + "name": "Smooth", + }, + Object { + "id": "hv", + "name": "Step before", + }, + Object { + "id": "vh", + "name": "Step after", + }, + ], + }, + }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "name": "Line width", + "props": Object { + "max": 10, + }, + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "name": "Fill Opacity", + "props": Object { + "max": 100, + }, + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "name": "Point Size", + "props": Object { + "max": 40, + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + "title": "Label Size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "id": "linear", + "name": "Linear", + }, + Object { + "id": "spline", + "name": "Smooth", + }, + Object { + "id": "hv", + "name": "Step before", + }, + Object { + "id": "vh", + "name": "Step after", + }, + ], + }, + }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "name": "Line width", + "props": Object { + "max": 10, + }, + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "name": "Fill opacity", + "props": Object { + "max": 100, + }, + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "name": "Point size", + "props": Object { + "max": 40, + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label size", + "title": "Label size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { "max": 90, "min": -90, "showTicks": true, @@ -2262,6 +2786,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "name": "Color theme", "schemas": Array [], }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, Object { "defaultState": Array [], "editor": [Function], @@ -2460,6 +2991,56 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -2670,6 +3251,56 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -2903,6 +3534,56 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "Carrier": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "avg(FlightDelayMin)": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + "jsonData": Array [ + Object { + "Carrier": "BeatsWest", + "avg(FlightDelayMin)": 53.65384615384615, + }, + Object { + "Carrier": "Logstash Airways", + "avg(FlightDelayMin)": 45.36144578313253, + }, + Object { + "Carrier": "OpenSearch Dashboards Airlines", + "avg(FlightDelayMin)": 63.1578947368421, + }, + Object { + "Carrier": "OpenSearch-Air", + "avg(FlightDelayMin)": 46.81318681318681, + }, + ], + "metadata": Object { + "fields": Array [ + Object { + "name": "avg(FlightDelayMin)", + "type": "double", + }, + Object { + "name": "Carrier", + "type": "keyword", + }, + ], + }, + "size": 4, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -3198,6 +3879,29 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "count('ip')": Array [], + "span(timestamp,1h)": Array [], + }, + "jsonData": Array [], + "metadata": Object { + "fields": Array [ + Object { + "name": "count('ip')", + "type": "integer", + }, + Object { + "name": "span(timestamp,1h)", + "type": "timestamp", + }, + ], + }, + "size": 0, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -3381,6 +4085,29 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "count('ip')": Array [], + "span(timestamp,1h)": Array [], + }, + "jsonData": Array [], + "metadata": Object { + "fields": Array [ + Object { + "name": "count('ip')", + "type": "integer", + }, + Object { + "name": "span(timestamp,1h)", + "type": "timestamp", + }, + ], + }, + "size": 0, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { @@ -3587,6 +4314,29 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, + "explorer": Object { + "explorerData": Object { + "data": Object { + "count('ip')": Array [], + "span(timestamp,1h)": Array [], + }, + "jsonData": Array [], + "metadata": Object { + "fields": Array [ + Object { + "name": "count('ip')", + "type": "integer", + }, + Object { + "name": "span(timestamp,1h)", + "type": "timestamp", + }, + ], + }, + "size": 0, + "status": 200, + }, + }, "indexFields": Object {}, "query": Object {}, "rawVizData": Object { diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx index 3121ddeee..e2635d091 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx @@ -300,6 +300,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) => query: {}, indexFields: {}, userConfigs: metaData.user_configs, + explorer: { explorerData: data }, })} /> ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 015bf48f5..cbf03e884 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -718,6 +718,7 @@ export const Explorer = ({ indexFields: explorerFields, userConfigs: userVizConfigs[curVisId] || {}, appData: { fromApp: appLogEvents }, + explorer: { explorerData, explorerFields, query, http, pplService }, }); }, [curVisId, explorerVisualizations, explorerFields, query, userVizConfigs]); @@ -1136,6 +1137,10 @@ export const Explorer = ({ explorerVisualizations, setToast, pplService, + explorerFields, + explorerData, + http, + query }} >
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index ac571be05..26317c44e 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -222,7 +222,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -325,7 +325,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -398,7 +398,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -409,7 +409,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -429,13 +429,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -529,7 +529,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -632,7 +632,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -705,7 +705,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -716,7 +716,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -736,13 +736,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], + "iconType": "visBarVerticalStacked", "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -799,7 +800,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -846,8 +847,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "legendSize", - "name": "Legend Size", - "title": "Legend Size", + "name": "Legend size", + "title": "Legend size", }, ], }, @@ -932,7 +933,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -942,7 +943,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 5, "eleType": "slider", "mapTo": "pointSize", - "name": "Point Size", + "name": "Point size", "props": Object { "max": 40, }, @@ -951,8 +952,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", - "title": "Label Size", + "name": "Label size", + "title": "Label size", }, Object { "component": [Function], @@ -1107,7 +1108,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -1154,7 +1155,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "size", - "name": "Legend Size", + "name": "Legend size", }, ], }, @@ -1162,7 +1163,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "chart_styles", "mapTo": "chartStyles", - "name": "Chart Styles", + "name": "Chart styles", "schemas": Array [ Object { "component": null, @@ -1193,7 +1194,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -1203,7 +1204,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "eleType": "colorpicker", "isSingleSelection": true, "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "options": Array [ Object { "title": "Default", @@ -1309,7 +1310,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Colorscale", + "name": "Show colorscale", "props": Object { "defaultSelections": Array [ Object { @@ -1335,7 +1336,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "chart_styles", "mapTo": "chartStyles", - "name": "Chart Styles", + "name": "Chart styles", "schemas": Array [ Object { "component": [Function], @@ -1349,7 +1350,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "eleType": "list", "isSingleSelection": true, "mapTo": "colorMode", - "name": "Color Mode", + "name": "Color mode", "options": Array [ Object { "label": "spectrum", @@ -1670,11 +1671,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fulllabel": "Text", + "fulllabel": "Markdown", "icon": [Function], "icontype": "visText", "id": "text", - "label": "Text", + "label": "Markdown", "name": "text", "selection": Object { "dataLoss": "nothing", @@ -1755,7 +1756,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Colorscale", + "name": "Show colorscale", "props": Object { "defaultSelections": Array [ Object { @@ -1794,7 +1795,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], "isSingleSelection": true, "mapTo": "tilingAlgorithm", - "name": "Tiling Algorithm", + "name": "Tiling algorithm", "options": Array [ Object { "name": "Squarify", @@ -1849,13 +1850,37 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "sort_sectors", + "name": "Sort Sectors", + "props": Object { + "defaultSelections": Array [ + Object { + "id": undefined, + "name": "Largest to Smallest", + }, + ], + "options": Array [ + Object { + "id": "largest_to_smallest", + "name": "Largest to Smallest", + }, + Object { + "id": "random", + "name": "Random", + }, + ], + }, + }, ], }, Object { "editor": [Function], "id": "chart_styles", "mapTo": "chartStyles", - "name": "Chart Styles", + "name": "Chart styles", "schemas": Array [ Object { "component": [Function], @@ -1865,7 +1890,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "eleType": "treemapColorPicker", "isSingleSelection": true, "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "options": Array [ Object { "title": "Default", @@ -2113,11 +2138,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fulllabel": "Tree Map", + "fulllabel": "Tree map", "icon": [Function], "icontype": "heatmap", "id": "tree_map", - "label": "Tree Map", + "label": "Tree map", "name": "tree_map", "orientation": "v", "selection": Object { @@ -2197,7 +2222,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "buttons", "mapTo": "legendPlacement", - "name": "Legend Placement", + "name": "Legend placement", "props": Object { "defaultSelections": Array [ Object { @@ -2225,15 +2250,15 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "titleSize", - "name": "Title Size", - "title": "Title Size", + "name": "Title size", + "title": "Title size", }, Object { "component": [Function], "eleType": "input", "mapTo": "valueSize", - "name": "Value Size", - "title": "Value Size", + "name": "Value size", + "title": "Value size", }, Object { "component": [Function], @@ -2340,7 +2365,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -2351,7 +2376,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, Object { @@ -2363,7 +2388,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -2451,6 +2476,393 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, }, }, + Object { + "category": "Visualizations", + "categoryaxis": "xaxis", + "component": [Function], + "editorconfig": Object { + "panelTabs": Array [ + Object { + "editor": [Function], + "id": "data-panel", + "mapTo": "dataConfig", + "name": "Data", + "sections": Array [ + Object { + "editor": [Function], + "id": "legend", + "mapTo": "legend", + "name": "Legend", + "schemas": Array [ + Object { + "component": null, + "mapTo": "showLegend", + "name": "Show legend", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend size", + "title": "Legend size", + }, + ], + }, + Object { + "editor": [Function], + "id": "chart_styles", + "mapTo": "chartStyles", + "name": "Chart styles", + "schemas": Array [ + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "style", + "name": "Mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "markers", + "name": "Marker", + }, + ], + "options": Array [ + Object { + "id": "lines", + "name": "Lines", + }, + Object { + "id": "markers", + "name": "Marker", + }, + Object { + "id": "lines+markers", + "name": "Lines + Markers", + }, + ], + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "interpolation", + "name": "Interpolation", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "spline", + "name": "Smooth", + }, + ], + "options": Array [ + Object { + "id": "linear", + "name": "Linear", + }, + Object { + "id": "spline", + "name": "Smooth", + }, + Object { + "id": "hv", + "name": "Step before", + }, + Object { + "id": "vh", + "name": "Step after", + }, + ], + }, + }, + Object { + "component": [Function], + "defaultState": 2, + "eleType": "slider", + "mapTo": "lineWidth", + "name": "Line width", + "props": Object { + "max": 10, + }, + }, + Object { + "component": [Function], + "defaultState": 40, + "eleType": "slider", + "mapTo": "fillOpacity", + "name": "Fill opacity", + "props": Object { + "max": 100, + }, + }, + Object { + "component": [Function], + "defaultState": 5, + "eleType": "slider", + "mapTo": "pointSize", + "name": "Point size", + "props": Object { + "max": 40, + }, + }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label size", + "title": "Label size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, + Object { + "defaultState": Array [], + "editor": [Function], + "id": "thresholds", + "mapTo": "thresholds", + "name": "Thresholds", + "schemas": Array [], + }, + ], + }, + Object { + "content": Array [], + "editor": [Function], + "id": "style-panel", + "mapTo": "layoutConfig", + "name": "Layout", + }, + Object { + "editor": [Function], + "id": "availability-panel", + "mapTo": "availabilityConfig", + "name": "Availability", + }, + ], + }, + "fulllabel": "Scatter", + "icon": [Function], + "icontype": "visLine", + "id": "scatter", + "label": "Scatter", + "name": "scatter", + "selection": Object { + "dataLoss": "nothing", + }, + "seriesaxis": "yaxis", + "type": "scatter", + "visconfig": Object { + "config": Object { + "barmode": "scatter", + "displaylogo": false, + "responsive": true, + "xaxis": Object { + "automargin": true, + }, + "yaxis": Object { + "automargin": true, + }, + }, + "layout": Object { + "colorway": Array [ + "#3CA1C7", + "#8C55A3", + "#DB748A", + "#F2BE4B", + "#68CCC2", + "#2A7866", + "#843769", + "#374FB8", + "#BD6F26", + "#4C636F", + ], + "height": 1180, + "legend": Object { + "orientation": "v", + "traceorder": "normal", + }, + "margin": Object { + "b": 30, + "l": 60, + "pad": 0, + "r": 30, + "t": 50, + }, + "paper_bgcolor": "rgba(0, 0, 0, 0)", + "plot_bgcolor": "rgba(0, 0, 0, 0)", + "showlegend": true, + "xaxis": Object { + "fixedrange": true, + "showgrid": false, + "visible": true, + }, + "yaxis": Object { + "fixedrange": true, + "showgrid": false, + "visible": true, + }, + }, + }, + }, + Object { + "category": "Visualizations", + "categoryaxis": "xaxis", + "component": [Function], + "editorconfig": Object { + "panelTabs": Array [ + Object { + "editor": [Function], + "id": "data-panel", + "mapTo": "dataConfig", + "name": "Style", + "sections": Array [], + }, + ], + }, + "fulllabel": "Logs View", + "icon": [Function], + "icontype": "visTable", + "id": "logs_view", + "label": "Logs View", + "name": "logs_view", + "selection": Object { + "dataLoss": "nothing", + }, + "seriesaxis": "yaxis", + "type": "logs_view", + "visconfig": Object { + "config": Object { + "barmode": "line", + "displaylogo": false, + "responsive": true, + "xaxis": Object { + "automargin": true, + }, + "yaxis": Object { + "automargin": true, + }, + }, + "layout": Object { + "colorway": Array [ + "#3CA1C7", + "#8C55A3", + "#DB748A", + "#F2BE4B", + "#68CCC2", + "#2A7866", + "#843769", + "#374FB8", + "#BD6F26", + "#4C636F", + ], + "height": 1180, + "legend": Object { + "orientation": "v", + "traceorder": "normal", + }, + "margin": Object { + "b": 30, + "l": 60, + "pad": 0, + "r": 30, + "t": 50, + }, + "paper_bgcolor": "rgba(0, 0, 0, 0)", + "plot_bgcolor": "rgba(0, 0, 0, 0)", + "showlegend": true, + "xaxis": Object { + "fixedrange": true, + "showgrid": false, + "visible": true, + }, + "yaxis": Object { + "fixedrange": true, + "showgrid": false, + "visible": true, + }, + }, + }, + }, ] } placeholder="Select a chart" @@ -2479,7 +2891,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -2582,7 +2994,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -2655,7 +3067,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -2666,7 +3078,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -2686,13 +3098,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], + "iconType": "visBarVerticalStacked", "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -2782,7 +3195,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -2885,7 +3298,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -2958,7 +3371,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -2969,7 +3382,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -2989,13 +3402,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], + "iconType": "visBarVerticalStacked", "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -3036,7 +3450,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] singleSelection={true} toggleButtonRef={[Function]} updatePosition={[Function]} - value="Bar" + value="Vertical bar" > - Bar + Vertical bar + + + + + @@ -4359,7 +4802,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -4462,7 +4905,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -4535,7 +4978,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -4546,7 +4989,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -4756,7 +5199,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -4859,7 +5302,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -4932,7 +5375,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -4943,7 +5386,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -4963,13 +5406,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -5039,7 +5482,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -5142,7 +5585,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -5215,7 +5658,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -5226,7 +5669,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -5436,7 +5879,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -5539,7 +5982,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -5612,7 +6055,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -5623,7 +6066,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -5643,13 +6086,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -5930,7 +6373,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -6033,7 +6476,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -6106,7 +6549,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -6117,7 +6560,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -6137,13 +6580,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -6297,7 +6740,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -6400,7 +6843,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -6473,7 +6916,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -6484,7 +6927,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -6694,7 +7137,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -6797,7 +7240,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -6870,7 +7313,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -6881,7 +7324,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -6901,13 +7344,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -7184,7 +7627,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -7287,7 +7730,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -7360,7 +7803,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -7371,7 +7814,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -7391,13 +7834,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -7702,7 +8145,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -7953,7 +8396,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -8056,7 +8499,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -8129,7 +8572,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -8140,7 +8583,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -8160,13 +8603,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -8304,7 +8747,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] } handleButtonChange={[Function]} idSelected="show" - legend="Show Legend" + legend="Show legend" options={ Array [ Object { @@ -8317,7 +8760,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ] } - title="Show Legend" + title="Show legend" vizState={Object {}} > - Show Legend + Show legend - Show Legend + Show legend
- Label Size + Label size - Fill Opacity + Fill opacity
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx index 856fe71a5..6d3199cc0 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx @@ -25,7 +25,11 @@ import { getDefaultSpec } from '../visualization_specs/default_spec'; import { TabContext } from '../../../hooks'; import { DefaultEditorControls } from './config_panel_footer'; import { getVisType } from '../../../../visualizations/charts/vis_types'; -import { ENABLED_VIS_TYPES, ValueOptionsAxes, visChartTypes } from '../../../../../../common/constants/shared'; +import { + ENABLED_VIS_TYPES, + ValueOptionsAxes, + visChartTypes, +} from '../../../../../../common/constants/shared'; import { VIZ_CONTAIN_XY_AXIS } from '../../../../../../common/constants/explorer'; const CONFIG_LAYOUT_TEMPLATE = ` @@ -61,7 +65,12 @@ interface PanelTabType { content?: any; } -export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsValidConfigOptionState }: any) => { +export const ConfigPanel = ({ + visualizations, + setCurVisId, + callback, + changeIsValidConfigOptionState, +}: any) => { const { tabId, curVisId, dispatch, changeVisualizationConfig, setToast } = useContext( TabContext ); @@ -72,17 +81,17 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal let chartBasedAxes: ValueOptionsAxes = {}; const [valueField] = data.defaultAxes?.yaxis ?? []; if (curVisId === visChartTypes.TreeMap) { - chartBasedAxes["childField"] = data.defaultAxes.xaxis ?? []; - chartBasedAxes["valueField"] = valueField && [valueField]; - } else if(curVisId === visChartTypes.HeatMap){ - chartBasedAxes["zaxis"] = valueField && [valueField]; + chartBasedAxes['childField'] = data.defaultAxes.xaxis ?? []; + chartBasedAxes['valueField'] = valueField && [valueField]; + } else if (curVisId === visChartTypes.HeatMap) { + chartBasedAxes['zaxis'] = valueField && [valueField]; } else { chartBasedAxes = { ...data.defaultAxes }; } return { - valueOptions: { ...(chartBasedAxes && chartBasedAxes) } - } - } + valueOptions: { ...(chartBasedAxes && chartBasedAxes) }, + }; + }; const [vizConfigs, setVizConfigs] = useState({ dataConfig: {}, layoutConfig: userConfigs?.layoutConfig @@ -94,7 +103,9 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal useEffect(() => { setVizConfigs({ ...userConfigs, - dataConfig: { ...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()) }, + dataConfig: { + ...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()), + }, layoutConfig: userConfigs?.layoutConfig ? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS) : getDefaultSpec(), @@ -112,49 +123,62 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal [] ); - // To check, If user empty any of the value options - const isValidValueOptionConfigSelected = useMemo(() => { + // To check, If user empty any of the value options + const isValidValueOptionConfigSelected = useMemo(() => { const valueOptions = vizConfigs.dataConfig?.valueOptions; const { TreeMap, Gauge, HeatMap } = visChartTypes; - const isValidValueOptionsXYAxes = VIZ_CONTAIN_XY_AXIS.includes(curVisId) && - valueOptions?.xaxis?.length !== 0 && valueOptions?.yaxis?.length !== 0; + const isValidValueOptionsXYAxes = + VIZ_CONTAIN_XY_AXIS.includes(curVisId) && + valueOptions?.xaxis?.length !== 0 && + valueOptions?.yaxis?.length !== 0; const isValid_valueOptions: { [key: string]: boolean } = { - tree_map: curVisId === TreeMap && valueOptions?.childField?.length !== 0 && + tree_map: + curVisId === TreeMap && + valueOptions?.childField?.length !== 0 && valueOptions?.valueField?.length !== 0, gauge: true, - heatmap: Boolean(curVisId === HeatMap && valueOptions?.zaxis && valueOptions.zaxis?.length !== 0), + heatmap: Boolean( + curVisId === HeatMap && valueOptions?.zaxis && valueOptions.zaxis?.length !== 0 + ), bar: isValidValueOptionsXYAxes, line: isValidValueOptionsXYAxes, histogram: isValidValueOptionsXYAxes, - pie: isValidValueOptionsXYAxes - } + pie: isValidValueOptionsXYAxes, + scatter: isValidValueOptionsXYAxes, + logs_view: true, + }; return isValid_valueOptions[curVisId]; }, [vizConfigs.dataConfig]); - useEffect(() => changeIsValidConfigOptionState(Boolean(isValidValueOptionConfigSelected)), [isValidValueOptionConfigSelected]); + useEffect(() => changeIsValidConfigOptionState(Boolean(isValidValueOptionConfigSelected)), [ + isValidValueOptionConfigSelected, + ]); - const handleConfigUpdate = useCallback((updatedConfigs) => { - try { - if (!isValidValueOptionConfigSelected) { - setToast(`Invalid value options configuration selected.`, 'danger'); - } - dispatch( - changeVisualizationConfig({ - tabId, - vizId: curVisId, - data: { - ...{ - ...updatedConfigs, - layoutConfig: hjson.parse(updatedConfigs.layoutConfig), + const handleConfigUpdate = useCallback( + (updatedConfigs) => { + try { + if (!isValidValueOptionConfigSelected) { + setToast(`Invalid value options configuration selected.`, 'danger'); + } + dispatch( + changeVisualizationConfig({ + tabId, + vizId: curVisId, + data: { + ...{ + ...updatedConfigs, + layoutConfig: hjson.parse(updatedConfigs.layoutConfig), + }, }, - }, - }) - ); - } catch (e: any) { - setToast(`Invalid visualization configurations. error: ${e.message}`, 'danger'); - } - }, [tabId, changeVisualizationConfig, dispatch, setToast, curVisId]); + }) + ); + } catch (e: any) { + setToast(`Invalid visualization configurations. error: ${e.message}`, 'danger'); + } + }, + [tabId, changeVisualizationConfig, dispatch, setToast, curVisId] + ); const handleConfigChange = (configSchema: string) => { return (configChanges: any) => { @@ -220,21 +244,22 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal ); }; - const memorizedVisualizationTypes = useMemo(() => { - return ENABLED_VIS_TYPES.map((vs: string) => { - const visDefinition = getVisType(vs); - return { - ...visDefinition, - }; - }); - }, []); + const memorizedVisualizationTypes = useMemo( + () => + ENABLED_VIS_TYPES.map((vs: string) => + vs === visChartTypes.Line || vs === visChartTypes.Scatter + ? getVisType(vs, { type: vs }) + : getVisType(vs) + ), + [] + ); const vizSelectableItemRenderer = (option: EuiComboBoxOptionOption) => { - const { iconType = 'empty', label = '' } = option; + const { icontype = 'empty', label = '' } = option; return (
- +    {label}
@@ -243,9 +268,11 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal const getSelectedVisDById = useCallback( (visId) => { - return find(memorizedVisualizationTypes, (v) => { + const selectedOption = find(memorizedVisualizationTypes, (v) => { return v.id === visId; }); + selectedOption['iconType'] = selectedOption.icontype; + return selectedOption; }, [memorizedVisualizationTypes] ); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx index 69ee16004..19a5f03b8 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx @@ -142,7 +142,7 @@ export const ConfigChartOptions = ({ {dimensions} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx index b76867fef..e386d31cc 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx @@ -25,7 +25,7 @@ export const ConfigColorTheme = ({ schemas, vizState = [], handleConfigChange, - sectionName = 'Color Theme', + sectionName = 'Color theme', }: any) => { const { data } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index ee66b399f..bd36ea856 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -7,6 +7,7 @@ import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; +import { visChartTypes } from '../../../../../../../../common/constants/shared'; export const ConfigLineChartStyles = ({ visualizations, @@ -33,24 +34,32 @@ export const ConfigLineChartStyles = ({ /* To update the schema options based on current style mode selection */ const currentSchemas = useMemo(() => { - if (!vizState?.style || vizState?.style === 'lines') { - return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize'); - } - if (vizState?.style === 'bar') { - return schemas.filter( - (schema: IConfigPanelOptionSection) => - !['interpolation', 'pointSize'].includes(schema.mapTo) - ); - } - if (vizState?.style === 'markers') { + if (vizState?.style) { + switch (vizState.style) { + case 'lines': + return schemas.filter( + (schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize' + ); + case 'bar': + return schemas.filter( + (schema: IConfigPanelOptionSection) => + !['interpolation', 'pointSize'].includes(schema.mapTo) + ); + case 'markers': + return schemas.filter((schema: IConfigPanelOptionSection) => + ['style', 'pointSize'].includes(schema.mapTo) + ); + case 'lines+markers': + return schemas.filter( + (schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation' + ); + } + } else if (visualizations?.vis?.name === visChartTypes.Scatter) { return schemas.filter((schema: IConfigPanelOptionSection) => ['style', 'pointSize'].includes(schema.mapTo) ); - } - if (vizState?.style === 'lines+markers') { - return schemas.filter( - (schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation' - ); + } else { + return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize'); } }, [vizState]); 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 new file mode 100644 index 000000000..0f049cb51 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx @@ -0,0 +1,110 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useCallback, useContext, useMemo, Fragment } from 'react'; +import { EuiAccordion, EuiSpacer } from '@elastic/eui'; +import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; +import { ButtonGroupItem } from './config_button_group'; +import { TabContext } from '../../../../../../event_analytics/hooks'; + +export const ConfigLogsView = ({ + visualizations, + schemas, + vizState, + handleConfigChange, + sectionName, + sectionId = 'chartStyles', +}) => { + const { explorerData } = useContext(TabContext); + const rawData = explorerData.jsonData; + + const handleConfigurationChange = useCallback( + (stateFiledName) => { + return (changes) => { + handleConfigChange({ + ...vizState, + [stateFiledName]: changes, + }); + }; + }, + [handleConfigChange, vizState] + ); + + const dimensions = useMemo( + () => + schemas.map((schema: IConfigPanelOptionSection, index: string) => { + let params = { + title: schema.name, + vizState, + ...schema.props, + }; + const DimensionComponent = schema.component || ButtonGroupItem; + 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] + ); + + return ( + + {dimensions} + + ); +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx index ffca76f7b..79cb59a31 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx @@ -30,6 +30,7 @@ export const InputFieldItem: React.FC = ({ fullWidth placeholder="auto" value={fieldValue} + min={1} onChange={(e) => setFieldValue(e.target.value)} onBlur={() => handleInputChange(fieldValue)} data-test-subj="valueFieldNumber" diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx index 0ab6fc7f2..a6be223f7 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx @@ -33,7 +33,7 @@ export const PanelItem = ({ id={uniqueId('axis-select-')} placeholder="Select a field" options={options} - selectedOptions={selectedAxis} + selectedOptions={Array.isArray(selectedAxis) ? selectedAxis : []} isInvalid={isInvalid ?? isEmpty(selectedAxis)} isClearable={isClearable} singleSelection={isSingleSelection} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx index e57b1870b..ef527a673 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx @@ -16,9 +16,9 @@ export const ConfigPanelOptionGauge = ({ handleConfigChange, }: any) => { const { Gauge = {} } = visualizations?.data?.rawVizData; - const isReadOnly = !( - Gauge?.dataConfig?.dimensions?.length && Gauge?.dataConfig?.dimensions[0]?.name != '' - ); + const dimensions = Gauge?.dataConfig?.dimensions + ? Gauge.dataConfig.dimensions.filter((i) => i.name !== '') + : []; const [numberOfGauges, setNumberOfGauges] = useState( DefaultGaugeChartParameters.DisplayDefaultGauges ); @@ -37,6 +37,7 @@ export const ConfigPanelOptionGauge = ({ setNumberOfGauges(Number(e.target.value)); }} value={numberOfGauges} + min={DefaultGaugeChartParameters.DisplayDefaultGauges} onBlur={() => { const newPanelOptions = { ...panelOptionsValues, @@ -45,7 +46,7 @@ export const ConfigPanelOptionGauge = ({ handleConfigChange(newPanelOptions); }} placeholder={'Number of gauges'} - readOnly={isReadOnly} + readOnly={dimensions.length === 0} /> ); 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 new file mode 100644 index 000000000..ba2ca23e8 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx @@ -0,0 +1,30 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { Fragment } from 'react'; +import { EuiSpacer, EuiFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui'; + +interface EUISwitch { + label: string; + disabled: boolean; + checked: boolean; + handleChange: (isChecked: boolean) => void; +} +export const ConfigSwitch: React.FC = ({ label, disabled, checked, handleChange }) => ( + + + handleChange(e.target.checked)} + compressed + /> + + + +); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx index f294b6870..3aa60c02b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx @@ -16,6 +16,7 @@ import { EuiFlexItem, EuiFieldText, htmlIdGenerator, + EuiToolTip, } from '@elastic/eui'; import { isEmpty } from 'lodash'; @@ -35,6 +36,15 @@ export const ConfigThresholds = ({ props, }: any) => { const addButtonText = '+ Add threshold'; + const AddButtonTextWrapper = () => + props?.maxLimit && !isEmpty(vizState) && vizState.length === props.maxLimit ? ( + + {addButtonText} + + ) : ( + {addButtonText} + ); + const getThresholdUnit = () => { return { thid: htmlIdGenerator('thr')(), @@ -92,7 +102,7 @@ export const ConfigThresholds = ({ isDisabled: !isEmpty(vizState) && vizState.length === props.maxLimit, })} > - {addButtonText} + {!isEmpty(vizState) && diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 2e18ede04..838df9287 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -90,7 +90,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => const { xaxis, yaxis } = data.defaultAxes; setConfigList({ dimensions: [...(xaxis && xaxis)], - metrics: [...(yaxis && yaxis.map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' })))], + metrics: [ + ...(yaxis && yaxis.map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' }))), + ], }); } else if (visualizations.vis.name === visChartTypes.HeatMap) { setConfigList({ @@ -128,7 +130,6 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => ], }; setConfigList(updatedList); - updateChart(updatedList); }; const updateHistogramConfig = (configName: string, fieldName: string, value: string) => { @@ -148,7 +149,6 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => arr.splice(index, 1); const updatedList = { ...list, [name]: arr }; setConfigList(updatedList); - updateChart(updatedList); }; const handleServiceAdd = (name: string) => { @@ -164,8 +164,8 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => ...explorerVisualizations, [visualizations.vis.name]: { dataConfig: { - metrics: updatedConfigList.metrics, - dimensions: updatedConfigList.dimensions, + metrics: configList.metrics, + dimensions: configList.dimensions, }, }, }, @@ -174,7 +174,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => }; const isPositionButtonVisible = (sectionName: string) => - sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line; + sectionName === 'metrics' && + (visualizations.vis.name === visChartTypes.Line || + visualizations.vis.name === visChartTypes.Scatter); const getOptionsAvailable = (sectionName: string) => { let selectedFields = {}; @@ -185,8 +187,8 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => return sectionName === 'metrics' ? unselectedFields : visualizations.vis.name === visChartTypes.Line - ? unselectedFields.filter((i) => i.type === 'timestamp') - : unselectedFields; + ? unselectedFields.filter((i) => i.type === 'timestamp') + : unselectedFields; }; const getCommonUI = (lists, sectionName: string) => @@ -273,7 +275,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => iconType="plusInCircleFilled" color="primary" onClick={() => handleServiceAdd(sectionName)} - disabled={sectionName === "dimensions" && visualizations.vis.name === visChartTypes.Line} + disabled={ + sectionName === 'dimensions' && visualizations.vis.name === visChartTypes.Line + } > Add @@ -294,13 +298,12 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => placeholder="auto" value={ configList?.dimensions && - configList?.dimensions.length > 0 && - configList.dimensions[0][type] + configList?.dimensions.length > 0 && + configList.dimensions[0][type] ? configList.dimensions[0][type] : '' } onChange={(e) => updateHistogramConfig('dimensions', type, e.target.value)} - onBlur={() => updateChart()} data-test-subj="valueFieldNumber" /> diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx index 7cf292d08..c26865165 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx @@ -21,7 +21,6 @@ import { import { ConfigTreemapParentFields } from './config_treemap_parents'; import { numericalTypes } from '../../../../../../../../common/constants/explorer'; - export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => { const dispatch = useDispatch(); const explorerVisualizations = useSelector(selectExplorerVisualization)[tabID]; @@ -50,20 +49,6 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }], metrics: [{ valueField: { ...yaxis[0] } }], }); - dispatch( - renderExplorerVis({ - tabId: tabID, - data: { - ...explorerVisualizations, - [visualizations.vis.name]: { - dataConfig: { - metrics: [{ valueField: { ...yaxis[0] } }], - dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }], - }, - }, - }, - }) - ); } }, [ data.defaultAxes, @@ -86,10 +71,9 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID [configName]: [listItem], }; setConfigList(newList); - updateChart(newList); }; - const updateChart = (configList) => { + const updateChart = () => { dispatch( renderExplorerVis({ tabId: tabID, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx index 6722aeff2..d1ce0398f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx @@ -5,18 +5,18 @@ import './app.scss'; -import _ from 'lodash'; +import { isEmpty } from 'lodash'; import React, { useContext } from 'react'; import { EuiPanel, EuiResizableContainer, EuiSpacer } from '@elastic/eui'; -import { SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer'; +import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer'; import { IField, IQuery, IVisualizationContainerProps } from '../../../../../common/types/explorer'; import { WorkspacePanel } from './workspace_panel'; import { ConfigPanel } from './config_panel'; import { Sidebar } from '../sidebar'; import { DataConfigPanelItem } from './config_panel/config_panes/config_controls/data_config_panel_item'; import { TabContext } from '../../hooks'; -import { visChartTypes } from '../../../../../common/constants/shared'; +import { PPL_STATS_REGEX, visChartTypes } from '../../../../../common/constants/shared'; import { TreemapConfigPanelItem } from './config_panel/config_panes/config_controls/treemap_config_panel_item'; interface IExplorerVisualizationsProps { query: IQuery; @@ -48,7 +48,7 @@ export const ExplorerVisualizations = ({ changeIsValidConfigOptionState, }: IExplorerVisualizationsProps) => { const { tabId } = useContext(TabContext); - const { data } = visualizations; + const { data, vis } = visualizations; const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; const fieldOptionList = fields.map((field) => { @@ -73,7 +73,12 @@ export const ExplorerVisualizations = ({ handleOverrideTimestamp={handleOverrideTimestamp} handleAddField={(field: IField) => handleAddField(field)} handleRemoveField={(field: IField) => handleRemoveField(field)} - isFieldToggleButtonDisabled={true} + isFieldToggleButtonDisabled={ + vis.name === visChartTypes.LogsView + ? isEmpty(explorerData.jsonData) || + !isEmpty(query[RAW_QUERY].match(PPL_STATS_REGEX)) + : true + } />
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap index a0032623c..aed72dada 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Bar component Renders bar component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Bar component Renders bar component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Bar component Renders bar component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Bar component Renders bar component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -430,13 +430,13 @@ exports[`Bar component Renders bar component 1`] = ` }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap index 360a09c43..bacc09c3f 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Heatmap component Renders heatmap component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Heatmap component Renders heatmap component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Heatmap component Renders heatmap component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Heatmap component Renders heatmap component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -430,13 +430,13 @@ exports[`Heatmap component Renders heatmap component 1`] = ` }, ], }, - "fillopacity": 80, - "fulllabel": "Bar", + "fillOpacity": 80, + "fulllabel": "Vertical bar", "groupwidth": 0.7, "icon": [Function], "icontype": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelangle": 0, "legendposition": "v", "linewidth": 1, @@ -504,7 +504,7 @@ exports[`Heatmap component Renders heatmap component 1`] = ` > { const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR - : vis.fillopacity / FILLOPACITY_DIV_FACTOR; + : vis.fillOpacity / FILLOPACITY_DIV_FACTOR; const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || vis.barwidth); const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || vis.groupwidth); const showLegend = !( diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts index e3f0f038d..da9f92e83 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts @@ -27,8 +27,8 @@ export const createBarTypeDefinition = (params: any) => ({ name: 'bar', type: 'bar', id: 'bar', - label: 'Bar', - fulllabel: 'Bar', + label: 'Vertical bar', + fulllabel: 'Vertical bar', icontype: 'visBarVerticalStacked', selection: { dataLoss: 'nothing', @@ -41,7 +41,7 @@ export const createBarTypeDefinition = (params: any) => ({ mode: 'group', labelangle: 0, linewidth: 1, - fillopacity: 80, + fillOpacity: 80, groupwidth: 0.7, barwidth: 0.97, showlegend: ShowLegend, @@ -62,7 +62,7 @@ export const createBarTypeDefinition = (params: any) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { @@ -120,7 +120,7 @@ export const createBarTypeDefinition = (params: any) => ({ }, }, { - name: 'Label Size', + name: 'Label size', component: InputFieldItem, mapTo: 'labelSize', eleType: 'input', @@ -177,7 +177,7 @@ export const createBarTypeDefinition = (params: any) => ({ eleType: 'slider', }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: 80, @@ -190,7 +190,7 @@ export const createBarTypeDefinition = (params: any) => ({ }, { id: 'color-theme', - name: 'Color Theme', + name: 'Color theme', editor: ConfigColorTheme, mapTo: 'colorTheme', schemas: [], diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts index fe4ef3b01..feec396d5 100644 --- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts @@ -63,7 +63,7 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({ }, }, { - name: 'Legend Placement', + name: 'Legend placement', component: ButtonGroupItem, mapTo: 'legendPlacement', eleType: 'buttons', @@ -77,15 +77,15 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({ }, }, { - title: 'Title Size', - name: 'Title Size', + title: 'Title size', + name: 'Title size', component: InputFieldItem, mapTo: 'titleSize', eleType: 'input', }, { - title: 'Value Size', - name: 'Value Size', + title: 'Value size', + name: 'Value size', component: InputFieldItem, mapTo: 'valueSize', eleType: 'input', 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 075082cc0..541fb84fa 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,19 +24,28 @@ interface IVizContainerProps { xaxis: IField[]; yaxis: IField[]; }; + 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() }; }; @@ -43,10 +57,13 @@ export const getVizContainerProps = ({ indexFields = {}, userConfigs = {}, appData = {}, + explorer = { explorerData: { jsonData: [], jsonDataAll: [] } }, }: IVizContainerProps): IVisualizationContainerProps => { - const visType = { - ...getVisType(vizId), - } + const getVisTypeData = () => + vizId === visChartTypes.Line || vizId === visChartTypes.Scatter + ? { ...getVisType(vizId, { type: vizId }) } + : { ...getVisType(vizId) }; + return { data: { appData: { ...appData }, @@ -55,9 +72,12 @@ export const getVizContainerProps = ({ indexFields: { ...indexFields }, userConfigs: { ...userConfigs }, defaultAxes: { - ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, visType.name), + ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, getVisTypeData().name), }, + explorer: { ...explorer }, + }, + vis: { + ...getVisTypeData(), }, - vis: visType, }; }; diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts index 794be2a94..c26c72d4e 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts @@ -56,7 +56,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ }, }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, @@ -69,7 +69,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ }, { id: 'color-theme', - name: 'Color Theme', + name: 'Color theme', editor: ConfigColorTheme, mapTo: 'colorTheme', schemas: [], @@ -81,7 +81,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index fe6880b8f..c85dc545e 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -12,19 +12,21 @@ import { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR, + visChartTypes, } from '../../../../../common/constants/shared'; import { hexToRgb } from '../../../../components/event_analytics/utils/utils'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; export const Line = ({ visualizations, layout, config }: any) => { const { - DefaultMode, + DefaultModeLine, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend, + DefaultModeScatter, LabelAngle, } = DefaultChartStyles; const { @@ -38,15 +40,20 @@ export const Line = ({ visualizations, layout, config }: any) => { availabilityConfig = {}, } = visualizations?.data?.userConfigs; + let visType: string = visualizations.vis.name; const dataConfigTab = - visualizations.data?.rawVizData?.line?.dataConfig && - visualizations.data.rawVizData.line.dataConfig; - const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions.filter((item) => item.label) : []; + visualizations.data?.rawVizData?.[visType]?.dataConfig && + visualizations.data.rawVizData[visType].dataConfig; + const xaxis = dataConfigTab?.dimensions + ? dataConfigTab?.dimensions.filter((item) => item.label) + : []; const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics.filter((item) => item.label) : []; const lastIndex = fields.length - 1; - const mode = dataConfig?.chartStyles?.style || DefaultMode; + const mode = + dataConfig?.chartStyles?.style || + (visType === visChartTypes.Line ? DefaultModeLine : DefaultModeScatter); const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation; const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth; const showLegend = !( @@ -75,8 +82,9 @@ export const Line = ({ visualizations, layout, config }: any) => { if (!isEmpty(xaxis) && !isEmpty(yaxis)) { valueSeries = [...yaxis]; } else { - valueSeries = (defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1)) - .map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' })); + valueSeries = ( + defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1) + ).map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' })); } const isDimensionTimestamp = isEmpty(xaxis) @@ -211,10 +219,13 @@ export const Line = ({ visualizations, layout, config }: any) => { return [mergedLayout, calculatedLineValues]; }, [data, fields, lastIndex, layout, layoutConfig, xaxis, yaxis, mode, valueSeries]); - const mergedConfigs = useMemo(() => ({ - ...config, - ...(layoutConfig.config && layoutConfig.config), - }), [config, layoutConfig.config]); + const mergedConfigs = useMemo( + () => ({ + ...config, + ...(layoutConfig.config && layoutConfig.config), + }), + [config, layoutConfig.config] + ); return isDimensionTimestamp ? ( diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 04d6b3cdb..ec612c2c1 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -6,7 +6,6 @@ import { Line } from './line'; import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs'; import { LensIconChartLine } from '../../assets/chart_line'; -import { PLOTLY_COLOR } from '../../../../../common/constants/shared'; import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor'; import { @@ -17,7 +16,7 @@ import { ConfigColorTheme } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; -import { DefaultChartStyles } from '../../../../../common/constants/shared'; +import { DefaultChartStyles, visChartTypes, PLOTLY_COLOR } from '../../../../../common/constants/shared'; import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group'; import { SliderConfig } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider'; const sharedConfigs = getPlotlySharedConfigs(); @@ -34,11 +33,11 @@ const { } = DefaultChartStyles; export const createLineTypeDefinition = (params: any = {}) => ({ - name: 'line', - type: 'line', - id: 'line', - label: 'Time series', - fulllabel: 'Time series', + name: params.type, + type: params.type, + id: params.type, + label: params.type === visChartTypes.Line ? 'Time series' : 'Scatter', + fulllabel: params.type === visChartTypes.Line ? 'Time series' : 'Scatter', icontype: 'visLine', category: VIS_CATEGORY.BASICS, selection: { @@ -62,7 +61,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { @@ -86,8 +85,8 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - title: 'Legend Size', - name: 'Legend Size', + title: 'Legend size', + name: 'Legend size', component: InputFieldItem, mapTo: 'legendSize', eleType: 'input', @@ -111,7 +110,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ { name: 'Marker', id: 'markers' }, { name: 'Lines + Markers', id: 'lines+markers' }, ], - defaultSelections: [{ name: 'Lines', id: DefaultMode }], + defaultSelections: [params.type === visChartTypes.Line ? { name: 'Lines', id: DefaultModeLine } : { name: 'Marker', id: DefaultModeScatter }], }, }, { @@ -140,7 +139,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, @@ -150,7 +149,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - name: 'Point Size', + name: 'Point size', component: SliderConfig, mapTo: 'pointSize', defaultState: MarkerSize, @@ -160,8 +159,8 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - title: 'Label Size', - name: 'Label Size', + title: 'Label size', + name: 'Label size', component: InputFieldItem, mapTo: 'labelSize', eleType: 'input', @@ -241,7 +240,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ config: { ...sharedConfigs.config, ...{ - barmode: 'line', + barmode: params.type, xaxis: { automargin: true, }, 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 new file mode 100644 index 000000000..ae3ebebfb --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.scss @@ -0,0 +1,25 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +table { + border-collapse: collapse; + width: 100%; +} + +th, +td { + text-align: left; +} + +th { + width: 30%; +} + +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 new file mode 100644 index 000000000..6974051f3 --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view.tsx @@ -0,0 +1,40 @@ +/* + * 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 explorer = visualizations?.data?.explorer; + + 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: [], + unselectedFields: [], + }; + + return ( +
+ +
+ ); +}; diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts new file mode 100644 index 000000000..8a09d6782 --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts @@ -0,0 +1,69 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { LogsView } from './logs_view'; +import { getPlotlyCategory, getPlotlySharedConfigs } from '../shared/shared_configs'; +import { LensIconChartDatatable } from '../../assets/chart_datatable'; +import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; +import { PLOTLY_COLOR } from '../../../../../common/constants/shared'; + +const sharedConfigs = getPlotlySharedConfigs(); +const VIS_CATEGORY = getPlotlyCategory(); + +export const createLogsViewTypeDefinition = (params: any = {}) => ({ + name: 'logs_view', + type: 'logs_view', + id: 'logs_view', + label: 'Logs View', + fulllabel: 'Logs View', + icontype: 'visTable', + category: VIS_CATEGORY.BASICS, + selection: { + dataLoss: 'nothing', + }, + icon: LensIconChartDatatable, + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', + editorconfig: { + panelTabs: [ + { + id: 'data-panel', + name: 'Style', + mapTo: 'dataConfig', + editor: VizDataPanel, + sections: [], + }, + ], + }, + visconfig: { + layout: { + ...sharedConfigs.layout, + colorway: PLOTLY_COLOR, + plot_bgcolor: 'rgba(0, 0, 0, 0)', + paper_bgcolor: 'rgba(0, 0, 0, 0)', + xaxis: { + fixedrange: true, + showgrid: false, + visible: true, + }, + yaxis: { + fixedrange: true, + showgrid: false, + visible: true, + }, + }, + config: { + ...sharedConfigs.config, + barmode: 'line', + xaxis: { + automargin: true, + }, + yaxis: { + automargin: true, + }, + }, + }, + component: LogsView, +}); diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts index 9c568fe97..05e16fc23 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts @@ -52,7 +52,7 @@ export const createMapsVisDefinition = () => ({ mapTo: 'legend', schemas: [ { - name: 'Show Colorscale', + name: 'Show colorscale', mapTo: 'showLegend', component: null, props: { @@ -67,12 +67,12 @@ export const createMapsVisDefinition = () => ({ }, { id: 'chart_styles', - name: 'Chart Styles', + name: 'Chart styles', editor: ConfigChartOptions, mapTo: 'chartStyles', schemas: [ { - name: 'Color Mode', + name: 'Color mode', component: PanelItem, mapTo: 'colorMode', eleType: 'list', diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index 55b495a9c..9ef04dd38 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -29,8 +29,8 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ name: 'tree_map', type: 'tree_map', id: 'tree_map', - label: 'Tree Map', - fulllabel: 'Tree Map', + label: 'Tree map', + fulllabel: 'Tree map', selection: { dataLoss: 'nothing', }, @@ -56,7 +56,7 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Colorscale', + name: 'Show colorscale', mapTo: 'showLegend', component: null, props: { @@ -76,7 +76,7 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'treemapOptions', schemas: [ { - name: 'Tiling Algorithm', + name: 'Tiling algorithm', isSingleSelection: true, component: null, mapTo: 'tilingAlgorithm', @@ -110,12 +110,12 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ }, { id: 'chart_styles', - name: 'Chart Styles', + name: 'Chart styles', editor: ConfigChartOptions, mapTo: 'chartStyles', schemas: [ { - name: 'Color Theme', + name: 'Color theme', isSingleSelection: true, component: ColorPalettePicker, mapTo: 'colorTheme', diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts index 7720bbc60..431b5dd20 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts @@ -52,7 +52,7 @@ export const createPieTypeDefinition = (params: any) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { @@ -76,7 +76,7 @@ export const createPieTypeDefinition = (params: any) => ({ }, }, { - name: 'Legend Size', + name: 'Legend size', component: InputFieldItem, mapTo: 'size', eleType: 'input', @@ -85,7 +85,7 @@ export const createPieTypeDefinition = (params: any) => ({ }, { id: 'chart_styles', - name: 'Chart Styles', + name: 'Chart styles', editor: ConfigChartOptions, mapTo: 'chartStyles', schemas: [ @@ -103,13 +103,13 @@ export const createPieTypeDefinition = (params: any) => ({ defaultState: [{ name: 'Pie', modeId: 'pie', label: 'Pie' }], }, { - name: 'Label Size', + name: 'Label size', component: InputFieldItem, mapTo: 'labelSize', eleType: 'input', }, { - name: 'Color Theme', + name: 'Color theme', isSingleSelection: true, component: ColorPalettePicker, mapTo: 'colorTheme', diff --git a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts index 788896cfd..e310ca9dc 100644 --- a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts @@ -17,8 +17,8 @@ export const createTextTypeDefinition = (params: any = {}) => ({ name: 'text', type: 'text', id: 'text', - label: 'Text', - fulllabel: 'Text', + label: 'Markdown', + fulllabel: 'Markdown', icontype: 'visText', category: VIS_CATEGORY.BASICS, selection: { diff --git a/dashboards-observability/public/components/visualizations/charts/vis_types.ts b/dashboards-observability/public/components/visualizations/charts/vis_types.ts index 0d3998547..9f37f2fbb 100644 --- a/dashboards-observability/public/components/visualizations/charts/vis_types.ts +++ b/dashboards-observability/public/components/visualizations/charts/vis_types.ts @@ -14,6 +14,7 @@ import { createDatatableTypeDefinition } from './data_table/data_table_type'; import { createGaugeTypeDefinition } from './financial/gauge/gauge_type'; import { createTreeMapDefinition } from './maps/treemap_type'; import { createTextTypeDefinition } from './text/text_type'; +import { createLogsViewTypeDefinition } from './logs_view/logs_view_type'; export const VIS_TYPES = { bar: createBarTypeDefinition, @@ -27,6 +28,8 @@ export const VIS_TYPES = { heatmap: createMapsVisDefinition, tree_map: createTreeMapDefinition, text: createTextTypeDefinition, + scatter: createLineTypeDefinition, + logs_view: createLogsViewTypeDefinition, }; export const getVisType = (visType: string, params: any = {}) => { diff --git a/dashboards-observability/public/components/visualizations/visualization.tsx b/dashboards-observability/public/components/visualizations/visualization.tsx index 1c8c58f70..c3c13c4b9 100644 --- a/dashboards-observability/public/components/visualizations/visualization.tsx +++ b/dashboards-observability/public/components/visualizations/visualization.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { isArray } from 'lodash'; import { VisualizationChart } from './visualization_chart'; import { EmptyPlaceholder } from '../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; +import { visChartTypes } from '../../../common/constants/shared'; interface IVisualizationProps {} @@ -23,7 +24,7 @@ export const Visualization = ({ visualizations }: IVisualizationProps) => { return ( <> - {isVizDataValid && isVizFieldValid ? ( + {vis?.type === visChartTypes.LogsView || (isVizDataValid && isVizFieldValid) ? ( ) : ( diff --git a/dashboards-observability/public/components/visualizations/visualization_chart.tsx b/dashboards-observability/public/components/visualizations/visualization_chart.tsx index b284ee95d..2b1b5bf6f 100644 --- a/dashboards-observability/public/components/visualizations/visualization_chart.tsx +++ b/dashboards-observability/public/components/visualizations/visualization_chart.tsx @@ -8,10 +8,7 @@ import React, { useMemo } from 'react'; interface IVisualizationChart {} export const VisualizationChart = ({ visualizations }: IVisualizationChart) => { - const { data, vis } = visualizations; - const { - metadata: { fields }, - } = visualizations?.data?.rawVizData; + const { vis } = visualizations; const { layout = {}, config = {} } = visualizations?.data?.userConfigs; const Visualization = visualizations?.vis?.component;