From 8ba002f439d38e8a5e5f9425279cb2dfa58f8d3c Mon Sep 17 00:00:00 2001 From: abasatwar Date: Thu, 4 Aug 2022 17:45:42 +0530 Subject: [PATCH] Sprint3 (#62) * Sprint2 (#47) * graph style section UI schema Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts * changes for style mode and interpolation Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts * lineWidth integration for line mode Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * changes for Legend and Orientation in Line Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * point size and Bar Alignment changes Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * implemented fill opacity for line chart Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * changes for line width and fill opacity in bar mode and removed mode from chartOption Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/shared.ts * updated bar mode opacity in line chart Signed-off-by: rinku-kumar-psl * refactored the config chart style code Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * snapshot updated and code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * type added to new component Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * review comments addressed Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx # Conflicts: # dashboards-observability/common/constants/shared.ts * cypress test case added and resolve button label wraping issue Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # dashboards-observability/.cypress/utils/event_constants.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js * multi matrices changes for Line Signed-off-by: rinku-kumar-psl * dimensions and metrics UI changes for time-series Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/explorer.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * made data config pannel collapsable and initial fields render Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx * snapshot updated and handled corner cases Signed-off-by: rinku-kumar-psl * code styling fixes and added TODO comment Signed-off-by: rinku-kumar-psl * sequence change for dimensions and metrics Signed-off-by: Deepak Nevde * Sprint1 (#14) * graph style section UI schema Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts * changes for style mode and interpolation Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts * lineWidth integration for line mode Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * changes for Legend and Orientation in Line Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * point size and Bar Alignment changes Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * implemented fill opacity for line chart Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * changes for line width and fill opacity in bar mode and removed mode from chartOption Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/shared.ts * updated bar mode opacity in line chart Signed-off-by: rinku-kumar-psl * refactored the config chart style code Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * snapshot updated and code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * type added to new component Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * review comments addressed Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx # Conflicts: # dashboards-observability/common/constants/shared.ts * cypress test case added and resolve button label wraping issue Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # dashboards-observability/.cypress/utils/event_constants.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js * multi matrices changes for Line Signed-off-by: rinku-kumar-psl * dimensions and metrics UI changes for time-series Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/explorer.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * made data config pannel collapsable and initial fields render Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx * snapshot updated and handled corner cases Signed-off-by: rinku-kumar-psl * code styling fixes and added TODO comment Signed-off-by: rinku-kumar-psl * data config reviewed code added Signed-off-by: Deepak Nevde * Text correction Signed-off-by: Deepak Nevde * Conflicts resolved Signed-off-by: Deepak Nevde * table view: eui table replaced with ag-grid Signed-off-by: Ramneet Chopra * drag-drop issue fixed Signed-off-by: Ramneet Chopra * test case of data_table updated Signed-off-by: Ramneet Chopra * feedback comments resolved Signed-off-by: Ramneet Chopra * grid height issue:fixed Signed-off-by: Ramneet Chopra * column height, value getter for type double Signed-off-by: Ramneet Chopra * data_table elements moved to separate Signed-off-by: Ramneet Chopra * footer components Signed-off-by: Ramneet Chopra * cypress test cases for table view Signed-off-by: Ramneet Chopra * enhancement for heatmap with new UI Signed-off-by: Shankha Das * line chart test cases Signed-off-by: Shankha Das * console logs removed Signed-off-by: Shankha Das * updated value options ui for treemap Signed-off-by: Mrunal Zambre * removed console Signed-off-by: Mrunal Zambre * Fixes of sprint1 for new ui implementation (#12) Signed-off-by: ruchika-narang Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> * Latest code added Signed-off-by: Deepak Nevde * Collapsapable button position change to top Signed-off-by: Deepak Nevde * table view: eui table replaced with ag-grid Signed-off-by: Ramneet Chopra * drag-drop issue fixed Signed-off-by: Ramneet Chopra * test case of data_table updated Signed-off-by: Ramneet Chopra * feedback comments resolved Signed-off-by: Ramneet Chopra * grid height issue:fixed Signed-off-by: Ramneet Chopra * column height, value getter for type double Signed-off-by: Ramneet Chopra * data_table elements moved to separate Signed-off-by: Ramneet Chopra * footer components Signed-off-by: Ramneet Chopra * cypress test cases for table view Signed-off-by: Ramneet Chopra * data config reviewed code added Signed-off-by: Deepak Nevde * Text correction Signed-off-by: Deepak Nevde * Conflicts resolved Signed-off-by: Deepak Nevde * enhancement for heatmap with new UI Signed-off-by: Shankha Das * line chart test cases Signed-off-by: Shankha Das * console logs removed Signed-off-by: Shankha Das * updated value options ui for treemap Signed-off-by: Mrunal Zambre * removed console Signed-off-by: Mrunal Zambre * sprint1-visualization-fixes. Signed-off-by: abasatwar * added colorscale config options for treemap Signed-off-by: Mrunal Zambre * code review comment resolved Signed-off-by: Deepak Nevde * added config option to sort treemap sectors Signed-off-by: Mrunal Zambre * changes to resctct duplicte options Signed-off-by: rinku-kumar-psl * Updated and Added test scripts for Treemap chart along with data config and worked on reassembling the event_constants.js file Signed-off-by: Pratibha Pandey * Removed unwanted code Signed-off-by: Pratibha Pandey * implementation of histogram with new UI Signed-off-by: ruchika-narang * gauge chart added Signed-off-by: Ramneet Chopra * Pie chart enhancement, multi labels change Signed-off-by: Deepak Nevde * threshold text fix Signed-off-by: Ramneet Chopra * cypress test cases added Signed-off-by: Ramneet Chopra * Code review comment resolved Signed-off-by: Deepak Nevde * reset fixed, unused imports removed, PR checks fixed Signed-off-by: Ramneet Chopra * single timestamp dimension, no data dsiplay, label rotate, label/legend size Signed-off-by: Ramneet Chopra * layout fixed for primary y axis Signed-off-by: Ramneet Chopra * change of screen size of no data found and visualization Signed-off-by: Shankha Das * changes for restriction of duplicate fields on Data Config and only numeric field selection to metrics Signed-off-by: rinku-kumar-psl * line label replaced with time series Signed-off-by: Ramneet Chopra * snapshot tests Signed-off-by: Ramneet Chopra * Removed unwanted spaces Signed-off-by: Pratibha Pandey * initialize default params for DimensonComponent and formatted the codes Signed-off-by: rinku-kumar-psl * pr review feedback Signed-off-by: Ramneet Chopra * updated preview functionality for charts Signed-off-by: Mrunal Zambre * updated snapshots Signed-off-by: Mrunal Zambre * Worked on review comments Signed-off-by: Pratibha Pandey * changed variable names Signed-off-by: Mrunal Zambre * code review changes done Signed-off-by: rinku-kumar-psl * added empty line at end. Signed-off-by: abasatwar * updated variable names Signed-off-by: Mrunal Zambre * updated snapshots Signed-off-by: Mrunal Zambre * Added pie chart test cases Signed-off-by: Pratibha Pandey * updated snapshots Signed-off-by: ruchika-narang * Removed consoles Signed-off-by: ruchika-narang * Worked on conflicts Signed-off-by: Pratibha Pandey * color selector added Signed-off-by: Ramneet Chopra * updated snapshots Signed-off-by: ruchika-narang * UI updated as recommended Signed-off-by: Shankha Das * Added legend to heatmap Signed-off-by: ruchika-narang * data_config_panel_item timeseries code removed Signed-off-by: Ramneet Chopra * bar chart with multiple dimension and metrics, timestamp Signed-off-by: abasatwar * limit no. of gauge option added Signed-off-by: Ramneet Chopra * threshold limit added, gauge default parameters moved to constants/explorer Signed-off-by: Ramneet Chopra * legend placement added Signed-off-by: Ramneet Chopra * yarn test Signed-off-by: Ramneet Chopra * snapshot updated Signed-off-by: abasatwar * snapshot updated Signed-off-by: abasatwar * Resolving issues after removal of preview functionality Signed-off-by: ruchika-narang * updated snapshots Signed-off-by: ruchika-narang * Updated snapshots Signed-off-by: ruchika-narang * changes for default timestamp data for time-series and corner cases Signed-off-by: rinku-kumar-psl * code review comment addressed Signed-off-by: rinku-kumar-psl * pr feedback Signed-off-by: Ramneet Chopra * dimensions, metrics length checks refined Signed-off-by: Ramneet Chopra * updated as per review comments Signed-off-by: abasatwar * fixing of data config corner cases Signed-off-by: rinku-kumar-psl * snapshot updated Signed-off-by: abasatwar * pr feedback Signed-off-by: Ramneet Chopra Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Co-authored-by: Pratibha Pandey Co-authored-by: ruchika-narang Co-authored-by: Shankha Das * Added update chart button for data configuration panel Signed-off-by: ruchika-narang * Implemented Scatter visualization Signed-off-by: Deepak Nevde * pr issue fixed for min limit in gauge input, tooltip added for threshold max limit Signed-off-by: Ramneet Chopra * used datagrid for logs view Signed-off-by: Shankha Das * Label changes - Second word first letter small Signed-off-by: Deepak Nevde * Review comment addressed Signed-off-by: Deepak Nevde * logs view UI updated in tabular format Signed-off-by: Shankha Das * resolved PR comments Signed-off-by: Shankha Das * removed any from explorer data Signed-off-by: Shankha Das * resolved review comments Signed-off-by: Shankha Das * Added update chart button for data configuration panel Signed-off-by: ruchika-narang * used datagrid for logs view Signed-off-by: Shankha Das * logs view UI updated in tabular format Signed-off-by: Shankha Das * Implemented Scatter visualization Signed-off-by: Deepak Nevde * pr issue fixed for min limit in gauge input, tooltip added for threshold max limit Signed-off-by: Ramneet Chopra * resolved PR comments Signed-off-by: Shankha Das * removed any from explorer data Signed-off-by: Shankha Das * Label changes - Second word first letter small Signed-off-by: Deepak Nevde * Review comment addressed Signed-off-by: Deepak Nevde * resolved review comments Signed-off-by: Shankha Das * Rebased with main and snapshots updated Signed-off-by: Deepak Nevde * fixed UI issue Signed-off-by: Shankha Das * dummy commit Signed-off-by: Shankha Das Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Co-authored-by: Pratibha Pandey Co-authored-by: ruchika-narang Co-authored-by: Shankha Das --- .../common/constants/explorer.ts | 1 + .../common/constants/shared.ts | 12 +- .../common/types/explorer.ts | 30 +- .../__snapshots__/utils.test.tsx.snap | 597 ++++++++++++++- .../custom_panels/helpers/utils.tsx | 1 + .../event_analytics/explorer/explorer.tsx | 5 + .../__snapshots__/config_panel.test.tsx.snap | 721 ++++++++++++++---- .../config_panel/config_panel.tsx | 119 +-- .../config_controls/config_chart_options.tsx | 2 +- .../config_controls/config_color_theme.tsx | 2 +- .../config_line_chart_styles.tsx | 47 +- .../config_controls/config_logs_view.tsx | 110 +++ .../config_controls/config_number_input.tsx | 1 + .../config_panel_option_gauge.tsx | 9 +- .../config_controls/config_switch.tsx | 30 + .../config_controls/config_thresholds.tsx | 14 +- .../data_config_panel_item.tsx | 32 +- .../treemap_config_panel_item.tsx | 18 +- .../explorer/visualizations/index.tsx | 14 +- .../__tests__/__snapshots__/bar.test.tsx.snap | 12 +- .../__snapshots__/heatmap.test.tsx.snap | 12 +- .../__snapshots__/histogram.test.tsx.snap | 12 +- .../__snapshots__/line.test.tsx.snap | 12 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 12 +- .../__snapshots__/text.test.tsx.snap | 12 +- .../__snapshots__/treemap.test.tsx.snap | 12 +- .../visualizations/charts/bar/bar_type.ts | 12 +- .../charts/financial/gauge/gauge_type.ts | 10 +- .../charts/helpers/viz_types.ts | 46 +- .../charts/histogram/histogram_type.ts | 6 +- .../visualizations/charts/lines/line.tsx | 24 +- .../visualizations/charts/lines/line_type.ts | 42 +- .../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 | 6 +- 42 files changed, 1710 insertions(+), 457 deletions(-) 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/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..75dbbe98c 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -82,7 +82,9 @@ export enum visChartTypes { Text = 'text', Gauge = 'gauge', Histogram = 'histogram', - TreeMap = 'tree_map' + TreeMap = 'tree_map', + Scatter = 'scatter', + LogsView = 'logs_view', } export interface ValueOptionsAxes { @@ -97,7 +99,7 @@ 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 = [ @@ -150,7 +152,7 @@ export const LIVE_OPTIONS = [ export const LIVE_END_TIME ='now'; export interface DefaultChartStylesProps { - DefaultMode: string, + DefaultModeLine: string, Interpolation: string, LineWidth: number, FillOpacity: number, @@ -159,10 +161,11 @@ export interface DefaultChartStylesProps { LegendPosition: string, LabelAngle: number, DefaultSortSectors: string, + DefaultModeScatter: string, }; export const DefaultChartStyles: DefaultChartStylesProps = { - DefaultMode: 'lines', + DefaultModeLine: 'lines', Interpolation: 'spline', LineWidth: 2, FillOpacity: 40, @@ -171,6 +174,7 @@ export const DefaultChartStyles: DefaultChartStylesProps = { LegendPosition: 'v', LabelAngle: 0, DefaultSortSectors: 'largest_to_smallest', + 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 ade2c6db3..4b21aa75f 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 527aa9965..9cfaa6638 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 [], }, ], @@ -305,12 +355,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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 [], }, ], @@ -652,12 +752,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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 [], }, ], @@ -1022,12 +1172,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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", }, ], }, @@ -2197,7 +2497,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 +2507,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 +2516,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], @@ -2460,6 +2760,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 +3020,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 +3303,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 +3648,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 +3854,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 +4083,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 1cac93734..291f64fe3 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 [], }, ], @@ -430,12 +430,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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 [], }, ], @@ -737,12 +737,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "fullLabel": "Vertical bar", "groupWidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelAngle": 0, "legendPosition": "v", "lineWidth": 1, @@ -799,7 +799,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 +846,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 +932,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 +942,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 +951,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 +1107,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 +1154,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 +1162,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 +1193,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 +1203,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 +1309,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 +1335,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 +1349,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 +1670,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 +1755,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 +1794,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", @@ -1855,7 +1855,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], @@ -1865,7 +1865,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 +2113,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 +2197,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 +2225,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 +2340,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 +2351,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 +2363,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 +2451,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 +2866,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 +2969,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 +3042,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 +3053,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 [], }, ], @@ -2687,12 +3074,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "fullLabel": "Vertical bar", "groupWidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelAngle": 0, "legendPosition": "v", "lineWidth": 1, @@ -2782,7 +3169,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 +3272,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 +3345,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 +3356,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 [], }, ], @@ -2990,12 +3377,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "fullLabel": "Vertical bar", "groupWidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", "id": "bar", - "label": "Bar", + "label": "Vertical bar", "labelAngle": 0, "legendPosition": "v", "lineWidth": 1, @@ -3036,7 +3423,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 - 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 27cf3379c..9ee5fa22e 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,14 +244,15 @@ 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; 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 cacfe2660..c88bd1973 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 96df2be20..610206b11 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 5d85c64c0..6096110f7 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 } 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,34 @@ 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') { - return schemas.filter((schema: IConfigPanelOptionSection) => - ['style', 'pointSize'].includes(schema.mapTo) - ); - } - if (vizState?.style === 'lines+markers') { - return schemas.filter( - (schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation' - ); + 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) + ); + } 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_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 7c342a027..6b55da846 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 @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback } from 'react'; +import React, { useCallback, Fragment } from 'react'; import { EuiButton, EuiAccordion, @@ -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 ea2e7d26b..6fb814957 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) => { @@ -156,7 +156,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => setConfigList(updatedList); }; - const updateChart = (updatedConfigList = configList) => { + const updateChart = () => { dispatch( renderExplorerVis({ tabId, @@ -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" /> @@ -344,9 +347,8 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => updateChart()} + onClick={updateChart} size="s" - disabled > Update chart 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..3fd4ac870 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,11 @@ 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))) + } />
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 f27d2049a..7ddc6e2d9 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 [], }, ], @@ -431,12 +431,12 @@ exports[`Bar component Renders bar component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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 debc9d64e..7198ea2ee 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 [], }, ], @@ -431,12 +431,12 @@ exports[`Heatmap component Renders heatmap component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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__/histogram.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap index 321db5d7d..98a4527c9 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Histogram component Renders histogram component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Histogram component Renders histogram component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Histogram component Renders histogram component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Histogram component Renders histogram component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -431,12 +431,12 @@ exports[`Histogram component Renders histogram component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 24cba00da..8316c7ae5 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Line component Renders line component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Line component Renders line component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Line component Renders line component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Line component Renders line component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -431,12 +431,12 @@ exports[`Line component Renders line component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap index 757f58b07..3ac048178 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Pie component Renders pie component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Pie component Renders pie component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Pie component Renders pie component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Pie component Renders pie component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -431,12 +431,12 @@ exports[`Pie component Renders pie component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap index c9f1aa121..ee6a24bbc 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap @@ -206,7 +206,7 @@ exports[`Text component Renders text component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -309,7 +309,7 @@ exports[`Text component Renders text component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -382,7 +382,7 @@ exports[`Text component Renders text component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -393,7 +393,7 @@ exports[`Text component Renders text component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -414,12 +414,12 @@ exports[`Text component Renders text component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap index 46538a490..185b4b3dc 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -223,7 +223,7 @@ exports[`Treemap component Renders treemap component 1`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show Legend", + "name": "Show legend", "props": Object { "defaultSelections": Array [ Object { @@ -326,7 +326,7 @@ exports[`Treemap component Renders treemap component 1`] = ` "component": [Function], "eleType": "input", "mapTo": "labelSize", - "name": "Label Size", + "name": "Label size", }, Object { "component": [Function], @@ -399,7 +399,7 @@ exports[`Treemap component Renders treemap component 1`] = ` "defaultState": 80, "eleType": "slider", "mapTo": "fillOpacity", - "name": "Fill Opacity", + "name": "Fill opacity", "props": Object { "max": 100, }, @@ -410,7 +410,7 @@ exports[`Treemap component Renders treemap component 1`] = ` "editor": [Function], "id": "color-theme", "mapTo": "colorTheme", - "name": "Color Theme", + "name": "Color theme", "schemas": Array [], }, ], @@ -431,12 +431,12 @@ exports[`Treemap component Renders treemap component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Bar", + "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/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts index 584568a45..462a0bdb7 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts @@ -28,8 +28,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', @@ -63,7 +63,7 @@ export const createBarTypeDefinition = (params: any) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { @@ -121,7 +121,7 @@ export const createBarTypeDefinition = (params: any) => ({ }, }, { - name: 'Label Size', + name: 'Label size', component: InputFieldItem, mapTo: 'labelSize', eleType: 'input', @@ -178,7 +178,7 @@ export const createBarTypeDefinition = (params: any) => ({ eleType: 'slider', }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: 80, @@ -191,7 +191,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 4b80cf307..e492dd053 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 dccaf45d7..6f72d1156 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts @@ -57,7 +57,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ }, }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, @@ -70,7 +70,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ }, { id: 'color-theme', - name: 'Color Theme', + name: 'Color theme', editor: ConfigColorTheme, mapTo: 'colorTheme', schemas: [], @@ -82,7 +82,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 c2429b14f..32e95b3bd 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -8,25 +8,12 @@ import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds'; -import { - DefaultChartStyles, - FILLOPACITY_DIV_FACTOR, - PLOTLY_COLOR, -} from '../../../../../common/constants/shared'; +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, - Interpolation, - LineWidth, - FillOpacity, - MarkerSize, - LegendPosition, - ShowLegend, - LabelAngle, - } = DefaultChartStyles; + const { DefaultModeLine, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend, DefaultModeScatter, LabelAngle } = DefaultChartStyles; const { data = {}, metadata: { fields }, @@ -38,15 +25,14 @@ export const Line = ({ visualizations, layout, config }: any) => { availabilityConfig = {}, } = visualizations?.data?.userConfigs; - const dataConfigTab = - visualizations.data?.rawVizData?.line?.dataConfig && - visualizations.data.rawVizData.line.dataConfig; + let visType: string = visualizations.vis.name; + const dataConfigTab = 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 = !( 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 9413b0322..50633899f 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,28 +16,19 @@ 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(); const VIS_CATEGORY = getPlotlyCategory(); -const { - DefaultMode, - Interpolation, - LineWidth, - FillOpacity, - MarkerSize, - LegendPosition, - ShowLegend, - LabelAngle -} = DefaultChartStyles; +const { DefaultModeLine, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend, DefaultModeScatter, LabelAngle } = 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 +52,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ mapTo: 'legend', schemas: [ { - name: 'Show Legend', + name: 'Show legend', mapTo: 'showLegend', component: null, props: { @@ -86,8 +76,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 +101,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 +130,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - name: 'Fill Opacity', + name: 'Fill opacity', component: SliderConfig, mapTo: 'fillOpacity', defaultState: FillOpacity, @@ -150,7 +140,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, }, { - name: 'Point Size', + name: 'Point size', component: SliderConfig, mapTo: 'pointSize', defaultState: MarkerSize, @@ -160,8 +150,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 +231,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..e04997086 --- /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 74aa9948e..498b7c2e4 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 57d14cc7b..cedd9bbf9 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 60a765cd8..7de03ba27 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 bc6b90ca9..56d3d9476 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 329e6881b..e724d515c 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 88bb34edd..4365bee32 100644 --- a/dashboards-observability/public/components/visualizations/visualization_chart.tsx +++ b/dashboards-observability/public/components/visualizations/visualization_chart.tsx @@ -4,15 +4,11 @@ */ import React, { useMemo } from 'react'; -import { take, merge, isEmpty } from 'lodash'; 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;