From 51e5067437ab3344f911fa55525d4cbf18d999f1 Mon Sep 17 00:00:00 2001 From: SivaprasadAluri Date: Fri, 21 Oct 2022 12:16:57 +0000 Subject: [PATCH] updated the code as per review comments Signed-off-by: SivaprasadAluri --- .../__snapshots__/utils.test.tsx.snap | 4649 ++++++++++++++--- .../helpers/__tests__/utils.test.tsx | 28 +- .../custom_panels/helpers/utils.tsx | 4 +- .../test/panels_constants.tsx | 34 + 4 files changed, 4119 insertions(+), 596 deletions(-) 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 30c67184e..7257a9d88 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 @@ -1669,7 +1669,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "indexFields": Object {}, "query": Object { - "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier", + "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win') | stats avg(machine.ram) by span(timestamp,1d)", }, "rawVizData": Object { "data": Object { @@ -1721,20 +1721,32 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "userConfigs": Object { "dataConfig": Object { - "dimensions": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - }, - ], + "dimensions": Array [], "series": Array [ Object { - "aggregation": "sum", - "customLabel": "delays", - "label": "FlightDelayMin", - "name": "FlightDelayMin", + "aggregation": "avg", + "customLabel": "", + "label": "machine.ram", + "name": "machine.ram", }, ], + "span": Object { + "interval": "1", + "time_field": Array [ + Object { + "label": "timestamp", + "name": "timestamp", + "type": "timestamp", + }, + ], + "unit": Array [ + Object { + "label": "Day", + "name": "Day", + "value": "d", + }, + ], + }, }, }, }, @@ -2194,7 +2206,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "indexFields": Object {}, "query": Object { - "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier", + "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win') | stats avg(machine.ram) by span(timestamp,1d)", }, "rawVizData": Object { "data": Object { @@ -2246,20 +2258,32 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "userConfigs": Object { "dataConfig": Object { - "dimensions": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - }, - ], + "dimensions": Array [], "series": Array [ Object { - "aggregation": "sum", - "customLabel": "delays", - "label": "FlightDelayMin", - "name": "FlightDelayMin", + "aggregation": "avg", + "customLabel": "", + "label": "machine.ram", + "name": "machine.ram", }, ], + "span": Object { + "interval": "1", + "time_field": Array [ + Object { + "label": "timestamp", + "name": "timestamp", + "type": "timestamp", + }, + ], + "unit": Array [ + Object { + "label": "Day", + "name": "Day", + "value": "d", + }, + ], + }, }, }, }, @@ -2733,7 +2757,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "indexFields": Object {}, "query": Object { - "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier", + "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win') | stats avg(machine.ram) by span(timestamp,1d)", }, "rawVizData": Object { "data": Object { @@ -2785,20 +2809,32 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "userConfigs": Object { "dataConfig": Object { - "dimensions": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - }, - ], + "dimensions": Array [], "series": Array [ Object { - "aggregation": "sum", - "customLabel": "delays", - "label": "FlightDelayMin", - "name": "FlightDelayMin", + "aggregation": "avg", + "customLabel": "", + "label": "machine.ram", + "name": "machine.ram", }, ], + "span": Object { + "interval": "1", + "time_field": Array [ + Object { + "label": "timestamp", + "name": "timestamp", + "type": "timestamp", + }, + ], + "unit": Array [ + Object { + "label": "Day", + "name": "Day", + "value": "d", + }, + ], + }, }, }, }, @@ -3339,7 +3375,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "indexFields": Object {}, "query": Object { - "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier", + "rawQuery": "source = opensearch_dashboards_sample_data_logs | stats count() by tags", }, "rawVizData": Object { "data": Object { @@ -3393,23 +3429,27 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "dataConfig": Object { "dimensions": Array [ Object { - "label": "Carrier", - "name": "Carrier", + "childField": Object { + "label": "Carrier", + "name": "Carrier", + "type": "keyword", + }, + "parentFields": Array [], }, ], "series": Array [ Object { - "aggregation": "sum", - "customLabel": "delays", - "label": "FlightDelayMin", - "name": "FlightDelayMin", + "valueField": Object { + "label": "avg(FlightDelayMin)", + "name": "avg(FlightDelayMin)", + "type": "double", + }, }, ], }, }, }, "vis": Object { - "barwidth": 0.97, "category": "Visualizations", "categoryaxis": "xaxis", "component": [Function], @@ -3467,12 +3507,12 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "name": "All", }, Object { - "id": "x", - "name": "Dimension", + "id": "label", + "name": "Label", }, Object { - "id": "y", - "name": "Metrics", + "id": "value", + "name": "Value", }, ], }, @@ -3488,7 +3528,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show legend", + "name": "Show colorscale", "props": Object { "defaultSelections": Array [ Object { @@ -3508,36 +3548,80 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` ], }, }, + ], + }, + Object { + "editor": [Function], + "id": "treemap_options", + "mapTo": "treemapOptions", + "name": "Treemap", + "schemas": Array [ Object { "component": null, - "mapTo": "position", - "name": "Position", + "defaultState": Array [ + Object { + "label": "Squarify", + "name": "Squarify", + "value": "squarify", + }, + ], + "isSingleSelection": true, + "mapTo": "tilingAlgorithm", + "name": "Tiling algorithm", + "options": Array [ + Object { + "name": "Squarify", + "value": "squarify", + }, + Object { + "name": "Binary", + "value": "binary", + }, + Object { + "name": "Dice", + "value": "dice", + }, + Object { + "name": "Slice", + "value": "slice", + }, + Object { + "name": "Slice Dice", + "value": "slice-dice", + }, + Object { + "name": "Dice Slice", + "value": "dice-slice", + }, + ], + "props": Object { + "isClearable": false, + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "sort_sectors", + "name": "Sort Sectors", "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Right", + "id": undefined, + "name": "Largest to Smallest", }, ], "options": Array [ Object { - "id": "v", - "name": "Right", + "id": "largest_to_smallest", + "name": "Largest to Smallest", }, Object { - "id": "h", - "name": "Bottom", + "id": "random", + "name": "Random", }, ], }, }, - Object { - "component": [Function], - "eleType": "input", - "mapTo": "legendSize", - "name": "Legend size", - "title": "Legend size", - }, ], }, Object { @@ -3548,119 +3632,249 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "schemas": Array [ Object { "component": [Function], - "eleType": "buttons", - "mapTo": "mode", - "name": "Mode", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "group", - "name": "Group", - }, - ], - "options": Array [ - Object { - "id": "group", - "name": "Group", - }, - Object { - "id": "stack", - "name": "Stack", - }, - ], - }, - }, - Object { - "component": [Function], - "eleType": "input", - "mapTo": "labelSize", - "name": "Label size", - }, - Object { - "component": [Function], - "defaultState": 0, - "eleType": "slider", - "mapTo": "rotateBarLabels", - "name": "Rotate bar labels", - "props": Object { - "max": 90, - "min": -90, - "showTicks": true, - "ticks": Array [ - Object { - "label": "-90°", - "value": -90, - }, - Object { - "label": "-45°", - "value": -45, - }, - Object { - "label": "0°", - "value": 0, - }, - Object { - "label": "45°", - "value": 45, - }, - Object { - "label": "90°", - "value": 90, - }, - ], - }, - }, - Object { - "component": [Function], - "defaultState": 0.7, - "eleType": "slider", - "mapTo": "groupWidth", - "name": "Group width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - Object { - "component": [Function], - "defaultState": 0.97, - "eleType": "slider", - "mapTo": "barWidth", - "name": "Bar width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - 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, + "defaultState": Object { + "name": "default", }, + "eleType": "treemapColorPicker", + "isSingleSelection": true, + "mapTo": "colorTheme", + "name": "Color theme", + "options": Array [ + Object { + "title": "Default", + "type": "text", + "value": "default", + }, + Object { + "title": "Single color", + "type": "text", + "value": "singleColor", + }, + Object { + "title": "Multicolored", + "type": "text", + "value": "multicolor", + }, + Object { + "palette": Array [ + "#050aac", + "#161cb2", + "#2029ba", + "#2835c2", + "#303fca", + "#384ad3", + "#4054db", + "#495ee2", + "#5368e9", + "#5f72ed", + "#6b7df0", + "#7887f0", + "#8692f0", + "#939cee", + "#a0a6ec", + "#adb1ea", + "#b9bce7", + "#c5c6e3", + "#d1d1e0", + "#dcdcdc", + ], + "title": "Blues", + "type": "gradient", + "value": "Blues", + }, + Object { + "palette": Array [ + "#dcdcdc", + "#e8d0c1", + "#edc6ad", + "#efbb9c", + "#efb18e", + "#eea782", + "#eb9e77", + "#e9946d", + "#e68b64", + "#e2815c", + "#de7854", + "#da6e4c", + "#d56545", + "#d15b3e", + "#cc5138", + "#c74632", + "#c23b2c", + "#bd2f26", + "#b72021", + "#b20a1c", + ], + "title": "Reds", + "type": "gradient", + "value": "Reds", + }, + Object { + "palette": Array [ + "#00441b", + "#014e1f", + "#035825", + "#09622a", + "#116d31", + "#1b7738", + "#25823f", + "#308c48", + "#3c9650", + "#49a15a", + "#57ab64", + "#66b56f", + "#76bf7b", + "#86c888", + "#98d296", + "#aadba6", + "#bde4b8", + "#d0ecca", + "#e3f4df", + "#f7fcf5", + ], + "title": "Greens", + "type": "gradient", + "value": "Greens", + }, + Object { + "palette": Array [ + "#000000", + "#121212", + "#1d1d1d", + "#272727", + "#333333", + "#3e3e3e", + "#4a4a4a", + "#575757", + "#636363", + "#707070", + "#7e7e7e", + "#8b8b8b", + "#999999", + "#a7a7a7", + "#b5b5b5", + "#c3c3c3", + "#d2d2d2", + "#e1e1e1", + "#f0f0f0", + "#ffffff", + ], + "title": "Greys", + "type": "gradient", + "value": "Greys", + }, + Object { + "palette": Array [ + "#0000ff", + "#3e00f7", + "#5800ee", + "#6c00e4", + "#7c00db", + "#8a00d1", + "#9600c6", + "#a200bb", + "#ac00b0", + "#b600a4", + "#bf0098", + "#c8008b", + "#d0007e", + "#d80071", + "#df0062", + "#e60054", + "#ed0045", + "#f30034", + "#f90021", + "#ff0000", + ], + "title": "Blue-Red", + "type": "gradient", + "value": "Bluered", + }, + Object { + "palette": Array [ + "#050aac", + "#2522b6", + "#3835c0", + "#4946c8", + "#5957cf", + "#6967d4", + "#7978d7", + "#8a89d7", + "#9a9bd4", + "#acaccd", + "#df9b70", + "#dd8e62", + "#da8056", + "#d6734c", + "#d16542", + "#cb583a", + "#c54931", + "#bf3a2a", + "#b92723", + "#b20a1c", + ], + "title": "Red-Blue", + "type": "gradient", + "value": "RdBu", + }, + Object { + "palette": Array [ + "#800026", + "#910126", + "#a10526", + "#b10e26", + "#c01b26", + "#cd2926", + "#d83728", + "#e2472a", + "#ea572e", + "#f16732", + "#f67738", + "#fa8740", + "#fd9849", + "#ffa753", + "#ffb760", + "#ffc76f", + "#ffd681", + "#ffe496", + "#fff2af", + "#ffffcc", + ], + "title": "Yellow-Orange-Red", + "type": "gradient", + "value": "YlOrRd", + }, + Object { + "palette": Array [ + "#081d58", + "#11256a", + "#182f79", + "#1e3b86", + "#234791", + "#28539a", + "#2e60a2", + "#346da9", + "#3b7aaf", + "#4488b4", + "#4f95b7", + "#5ba2ba", + "#6aafbc", + "#7bbcbe", + "#8dc8bf", + "#a2d4c1", + "#b7e0c4", + "#ceebc9", + "#e6f5d0", + "#ffffd9", + ], + "title": "Yellow-Green-Blue", + "type": "gradient", + "value": "YlGnBu", + }, + ], }, ], }, - Object { - "editor": [Function], - "id": "color-theme", - "mapTo": "colorTheme", - "name": "Color theme", - "schemas": Array [], - }, ], }, Object { @@ -3670,33 +3884,20 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "mapTo": "layoutConfig", "name": "Layout", }, - Object { - "editor": [Function], - "id": "availability-panel", - "mapTo": "availabilityConfig", - "name": "Availability", - }, ], }, - "fillopacity": 40, - "fulllabel": "Horizontal bar", - "groupwidth": 0.7, + "fulllabel": "Tree map", "icon": [Function], - "icontype": "visBarHorizontalStacked", - "id": "horizontal_bar", - "label": "Horizontal bar", - "labelangle": 0, - "legendposition": "v", - "linewidth": 2, - "mode": "group", - "name": "horizontal_bar", - "orientation": "h", + "icontype": "heatmap", + "id": "tree_map", + "label": "Tree map", + "name": "tree_map", + "orientation": "v", "selection": Object { "dataLoss": "nothing", }, "seriesaxis": "yaxis", - "showlegend": "show", - "type": "bar", + "type": "tree_map", "visconfig": Object { "config": Object { "displaylogo": false, @@ -3806,7 +4007,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "indexFields": Object {}, "query": Object { - "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier", + "rawQuery": "source = opensearch_dashboards_sample_data_logs | stats count() by tags", }, "rawVizData": Object { "data": Object { @@ -3860,23 +4061,27 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "dataConfig": Object { "dimensions": Array [ Object { - "label": "Carrier", - "name": "Carrier", + "childField": Object { + "label": "Carrier", + "name": "Carrier", + "type": "keyword", + }, + "parentFields": Array [], }, ], "series": Array [ Object { - "aggregation": "sum", - "customLabel": "delays", - "label": "FlightDelayMin", - "name": "FlightDelayMin", + "valueField": Object { + "label": "avg(FlightDelayMin)", + "name": "avg(FlightDelayMin)", + "type": "double", + }, }, ], }, }, }, "vis": Object { - "barwidth": 0.97, "category": "Visualizations", "categoryaxis": "xaxis", "component": [Function], @@ -3934,12 +4139,12 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "name": "All", }, Object { - "id": "x", - "name": "Dimension", + "id": "label", + "name": "Label", }, Object { - "id": "y", - "name": "Metrics", + "id": "value", + "name": "Value", }, ], }, @@ -3955,7 +4160,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` Object { "component": null, "mapTo": "showLegend", - "name": "Show legend", + "name": "Show colorscale", "props": Object { "defaultSelections": Array [ Object { @@ -3975,36 +4180,80 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` ], }, }, + ], + }, + Object { + "editor": [Function], + "id": "treemap_options", + "mapTo": "treemapOptions", + "name": "Treemap", + "schemas": Array [ Object { "component": null, - "mapTo": "position", - "name": "Position", + "defaultState": Array [ + Object { + "label": "Squarify", + "name": "Squarify", + "value": "squarify", + }, + ], + "isSingleSelection": true, + "mapTo": "tilingAlgorithm", + "name": "Tiling algorithm", + "options": Array [ + Object { + "name": "Squarify", + "value": "squarify", + }, + Object { + "name": "Binary", + "value": "binary", + }, + Object { + "name": "Dice", + "value": "dice", + }, + Object { + "name": "Slice", + "value": "slice", + }, + Object { + "name": "Slice Dice", + "value": "slice-dice", + }, + Object { + "name": "Dice Slice", + "value": "dice-slice", + }, + ], + "props": Object { + "isClearable": false, + }, + }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "sort_sectors", + "name": "Sort Sectors", "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Right", + "id": undefined, + "name": "Largest to Smallest", }, ], "options": Array [ Object { - "id": "v", - "name": "Right", + "id": "largest_to_smallest", + "name": "Largest to Smallest", }, Object { - "id": "h", - "name": "Bottom", + "id": "random", + "name": "Random", }, ], }, }, - Object { - "component": [Function], - "eleType": "input", - "mapTo": "legendSize", - "name": "Legend size", - "title": "Legend size", - }, ], }, Object { @@ -4015,119 +4264,249 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "schemas": Array [ Object { "component": [Function], - "eleType": "buttons", - "mapTo": "mode", - "name": "Mode", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "group", - "name": "Group", - }, - ], - "options": Array [ - Object { - "id": "group", - "name": "Group", - }, - Object { - "id": "stack", - "name": "Stack", - }, - ], - }, - }, - Object { - "component": [Function], - "eleType": "input", - "mapTo": "labelSize", - "name": "Label size", - }, - Object { - "component": [Function], - "defaultState": 0, - "eleType": "slider", - "mapTo": "rotateBarLabels", - "name": "Rotate bar labels", - "props": Object { - "max": 90, - "min": -90, - "showTicks": true, - "ticks": Array [ - Object { - "label": "-90°", - "value": -90, - }, - Object { - "label": "-45°", - "value": -45, - }, - Object { - "label": "0°", - "value": 0, - }, - Object { - "label": "45°", - "value": 45, - }, - Object { - "label": "90°", - "value": 90, - }, - ], - }, - }, - Object { - "component": [Function], - "defaultState": 0.7, - "eleType": "slider", - "mapTo": "groupWidth", - "name": "Group width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - Object { - "component": [Function], - "defaultState": 0.97, - "eleType": "slider", - "mapTo": "barWidth", - "name": "Bar width", - "props": Object { - "max": 1, - "step": 0.01, - }, - }, - 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, + "defaultState": Object { + "name": "default", }, + "eleType": "treemapColorPicker", + "isSingleSelection": true, + "mapTo": "colorTheme", + "name": "Color theme", + "options": Array [ + Object { + "title": "Default", + "type": "text", + "value": "default", + }, + Object { + "title": "Single color", + "type": "text", + "value": "singleColor", + }, + Object { + "title": "Multicolored", + "type": "text", + "value": "multicolor", + }, + Object { + "palette": Array [ + "#050aac", + "#161cb2", + "#2029ba", + "#2835c2", + "#303fca", + "#384ad3", + "#4054db", + "#495ee2", + "#5368e9", + "#5f72ed", + "#6b7df0", + "#7887f0", + "#8692f0", + "#939cee", + "#a0a6ec", + "#adb1ea", + "#b9bce7", + "#c5c6e3", + "#d1d1e0", + "#dcdcdc", + ], + "title": "Blues", + "type": "gradient", + "value": "Blues", + }, + Object { + "palette": Array [ + "#dcdcdc", + "#e8d0c1", + "#edc6ad", + "#efbb9c", + "#efb18e", + "#eea782", + "#eb9e77", + "#e9946d", + "#e68b64", + "#e2815c", + "#de7854", + "#da6e4c", + "#d56545", + "#d15b3e", + "#cc5138", + "#c74632", + "#c23b2c", + "#bd2f26", + "#b72021", + "#b20a1c", + ], + "title": "Reds", + "type": "gradient", + "value": "Reds", + }, + Object { + "palette": Array [ + "#00441b", + "#014e1f", + "#035825", + "#09622a", + "#116d31", + "#1b7738", + "#25823f", + "#308c48", + "#3c9650", + "#49a15a", + "#57ab64", + "#66b56f", + "#76bf7b", + "#86c888", + "#98d296", + "#aadba6", + "#bde4b8", + "#d0ecca", + "#e3f4df", + "#f7fcf5", + ], + "title": "Greens", + "type": "gradient", + "value": "Greens", + }, + Object { + "palette": Array [ + "#000000", + "#121212", + "#1d1d1d", + "#272727", + "#333333", + "#3e3e3e", + "#4a4a4a", + "#575757", + "#636363", + "#707070", + "#7e7e7e", + "#8b8b8b", + "#999999", + "#a7a7a7", + "#b5b5b5", + "#c3c3c3", + "#d2d2d2", + "#e1e1e1", + "#f0f0f0", + "#ffffff", + ], + "title": "Greys", + "type": "gradient", + "value": "Greys", + }, + Object { + "palette": Array [ + "#0000ff", + "#3e00f7", + "#5800ee", + "#6c00e4", + "#7c00db", + "#8a00d1", + "#9600c6", + "#a200bb", + "#ac00b0", + "#b600a4", + "#bf0098", + "#c8008b", + "#d0007e", + "#d80071", + "#df0062", + "#e60054", + "#ed0045", + "#f30034", + "#f90021", + "#ff0000", + ], + "title": "Blue-Red", + "type": "gradient", + "value": "Bluered", + }, + Object { + "palette": Array [ + "#050aac", + "#2522b6", + "#3835c0", + "#4946c8", + "#5957cf", + "#6967d4", + "#7978d7", + "#8a89d7", + "#9a9bd4", + "#acaccd", + "#df9b70", + "#dd8e62", + "#da8056", + "#d6734c", + "#d16542", + "#cb583a", + "#c54931", + "#bf3a2a", + "#b92723", + "#b20a1c", + ], + "title": "Red-Blue", + "type": "gradient", + "value": "RdBu", + }, + Object { + "palette": Array [ + "#800026", + "#910126", + "#a10526", + "#b10e26", + "#c01b26", + "#cd2926", + "#d83728", + "#e2472a", + "#ea572e", + "#f16732", + "#f67738", + "#fa8740", + "#fd9849", + "#ffa753", + "#ffb760", + "#ffc76f", + "#ffd681", + "#ffe496", + "#fff2af", + "#ffffcc", + ], + "title": "Yellow-Orange-Red", + "type": "gradient", + "value": "YlOrRd", + }, + Object { + "palette": Array [ + "#081d58", + "#11256a", + "#182f79", + "#1e3b86", + "#234791", + "#28539a", + "#2e60a2", + "#346da9", + "#3b7aaf", + "#4488b4", + "#4f95b7", + "#5ba2ba", + "#6aafbc", + "#7bbcbe", + "#8dc8bf", + "#a2d4c1", + "#b7e0c4", + "#ceebc9", + "#e6f5d0", + "#ffffd9", + ], + "title": "Yellow-Green-Blue", + "type": "gradient", + "value": "YlGnBu", + }, + ], }, ], }, - Object { - "editor": [Function], - "id": "color-theme", - "mapTo": "colorTheme", - "name": "Color theme", - "schemas": Array [], - }, ], }, Object { @@ -4137,33 +4516,20 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "mapTo": "layoutConfig", "name": "Layout", }, - Object { - "editor": [Function], - "id": "availability-panel", - "mapTo": "availabilityConfig", - "name": "Availability", - }, ], }, - "fillopacity": 40, - "fulllabel": "Horizontal bar", - "groupwidth": 0.7, + "fulllabel": "Tree map", "icon": [Function], - "icontype": "visBarHorizontalStacked", - "id": "horizontal_bar", - "label": "Horizontal bar", - "labelangle": 0, - "legendposition": "v", - "linewidth": 2, - "mode": "group", - "name": "horizontal_bar", - "orientation": "h", + "icontype": "heatmap", + "id": "tree_map", + "label": "Tree map", + "name": "tree_map", + "orientation": "v", "selection": Object { "dataLoss": "nothing", }, "seriesaxis": "yaxis", - "showlegend": "show", - "type": "bar", + "type": "tree_map", "visconfig": Object { "config": Object { "displaylogo": false, @@ -4190,7 +4556,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` } } > - @@ -4746,18 +5259,32 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` data={ Array [ Object { - "marker": Object { - "color": "rgba(60,161,199,0.2)", - "line": Object { - "color": "#3CA1C7", - "width": 2, - }, + "hoverinfo": "all", + "labels": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "marker": Object {}, + "parents": Array [ + "", + "", + "", + "", + ], + "sort": true, + "textinfo": "label+value+percent parent+percent entry", + "tiling": Object { + "packing": undefined, }, - "name": "delays", - "orientation": "h", - "type": "bar", - "x": undefined, - "y": Array [], + "type": "treemap", + "values": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], }, ] } @@ -4766,24 +5293,11 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` layout={ Object { "autosize": true, - "bargap": 0.30000000000000004, - "bargroupgap": 0.030000000000000027, - "barmode": "group", - "colorway": Array [ - "#3CA1C7", - "#8C55A3", - "#DB748A", - "#F2BE4B", - "#68CCC2", - "#2A7866", - "#843769", - "#374FB8", - "#BD6F26", - "#4C636F", - ], + "barmode": "stack", "hovermode": "closest", "legend": Object { - "orientation": "v", + "orientation": "h", + "traceorder": "normal", }, "margin": Object { "b": 30, @@ -4792,20 +5306,19 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "r": 5, "t": 50, }, - "showlegend": true, + "showlegend": false, "title": "", + "treemapcolorway": Object {}, "xaxis": Object { "automargin": true, - "tickfont": Object { - "size": 12, - }, + "rangemode": "normal", + "showgrid": true, + "zeroline": false, }, "yaxis": Object { - "automargin": true, - "tickangle": 0, - "tickfont": Object { - "size": 12, - }, + "rangemode": "normal", + "showgrid": true, + "zeroline": false, }, } } @@ -4828,10 +5341,2972 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` /> - + + + + +`; + +exports[`Utils helper functions renders displayVisualization function 4`] = ` +
+ + + + + +
+ + + + + +
+`; + +exports[`Utils helper functions renders displayVisualization function 5`] = ` +
+ + + + + +
+ +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + +
`; -exports[`Utils helper functions renders displayVisualization function 4`] = `
`; +exports[`Utils helper functions renders displayVisualization function 6`] = `
`; diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx index e7ba8ff8a..96931ffd1 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -24,6 +24,10 @@ import { samplePPLEmptyResponse, samplePPLResponse, sampleSavedVisualization, + sampleSavedVisualizationForHorizontalBar, + sampleSavedVisualizationForLine, + sampleSavedVisualizationForPie, + sampleSavedVisualizationForTreeMap, } from '../../../../../test/panels_constants'; import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared'; import React from 'react'; @@ -111,26 +115,36 @@ describe('Utils helper functions', () => { expect(wrapper1).toMatchSnapshot(); const wrapper2 = mount( -
- {displayVisualization(sampleSavedVisualization.visualization, samplePPLResponse, 'line')} -
+
{displayVisualization(sampleSavedVisualizationForLine, samplePPLResponse, 'line')}
); expect(wrapper2).toMatchSnapshot(); const wrapper3 = mount( +
+ {displayVisualization(sampleSavedVisualizationForTreeMap, samplePPLResponse, 'tree_map')} +
+ ); + expect(wrapper3).toMatchSnapshot(); + + const wrapper4 = mount(
{displayVisualization( - sampleSavedVisualization.visualization, + sampleSavedVisualizationForHorizontalBar, samplePPLResponse, 'horizontal_bar' )}
); - expect(wrapper3).toMatchSnapshot(); + expect(wrapper4).toMatchSnapshot(); - const wrapper4 = mount( + const wrapper5 = mount( +
{displayVisualization(sampleSavedVisualizationForPie, samplePPLResponse, 'pie')}
+ ); + expect(wrapper5).toMatchSnapshot(); + + const wrapper6 = mount(
{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}
); - expect(wrapper4).toMatchSnapshot(); + expect(wrapper6).toMatchSnapshot(); }); }); diff --git a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx index 29b6e6e55..855dd55b8 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/utils.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/utils.tsx @@ -7,7 +7,7 @@ import dateMath from '@elastic/datemath'; import { ShortDate } from '@elastic/eui'; import { DurationRange } from '@elastic/eui/src/components/date_picker/types'; -import _ from 'lodash'; +import _, { isEmpty } from 'lodash'; import { Moment } from 'moment-timezone'; import React from 'react'; import { Layout } from 'react-grid-layout'; @@ -289,7 +289,7 @@ export const isPPLFilterValid = ( // Renders visualization in the vizualization container component export const displayVisualization = (metaData: any, data: any, type: string) => { - if (metaData === undefined || Object.keys(metaData).length === 0) { + if (metaData === undefined || isEmpty(metaData)) { return <>; } return ( diff --git a/dashboards-observability/test/panels_constants.tsx b/dashboards-observability/test/panels_constants.tsx index 1b1362bf2..b79dde38c 100644 --- a/dashboards-observability/test/panels_constants.tsx +++ b/dashboards-observability/test/panels_constants.tsx @@ -19,6 +19,40 @@ export const sampleSavedVisualization = { }, }; +export const sampleSavedVisualizationForHorizontalBar = { + id: 'zgBSfYIBi5fNIzQywlQZ', + name: 'Horizontal', + query: 'source = opensearch_dashboards_sample_data_logs | stats avg(machine.ram) by machine.os', + type: 'horizontal_bar', + timeField: 'timestamp', +}; + +export const sampleSavedVisualizationForLine = { + id: '4wANiYIBi5fNIzQySlRB', + name: '[Logs] Average ram usage per day by windows os ', + query: + "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win') | stats avg(machine.ram) by span(timestamp,1d)", + type: 'line', + timeField: 'timestamp', +}; + +export const sampleSavedVisualizationForTreeMap = { + id: '5QANiYIBi5fNIzQySlRL', + name: 'TreeMap1111', + query: 'source = opensearch_dashboards_sample_data_logs | stats count() by tags', + type: 'tree_map', + timeField: 'timestamp', +}; + +export const sampleSavedVisualizationForPie = { + id: '4gANiYIBi5fNIzQySlQ5', + name: 'PieChart', + query: + "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or machine.os='ios' | stats avg(machine.ram) by span(timestamp,1d)", + type: 'pie', + timeField: 'timestamp', +}; + export const samplePPLResponse = { data: { 'avg(FlightDelayMin)': [