From b4f6f72d31f5781275358c5927a7699c72f0351d Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 6 Sep 2023 11:43:43 -0400 Subject: [PATCH] Revert "Rebase flint (#963)" This reverts commit 5fc3cc2f168e9ce4eebf31106fa95dee8d52aa01. --- .../integration/1_event_analytics.spec.js | 15 +- .cypress/integration/3_panels.spec.ts | 1082 ++-- .../4_trace_analytics_dashboard.spec.js | 41 +- .../5_trace_analytics_services.spec.js | 24 +- .../6_trace_analytics_traces.spec.js | 4 +- .cypress/integration/7_app_analytics.spec.js | 104 +- .../integration/8_metrics_analytics.spec.js | 492 +- .cypress/integration/9_integrations.spec.js | 134 - .../10_horizontalBar_chart.spec.js | 214 - .../10_scatter_chart.spec.js | 228 + .../11_horizontalBar_chart.spec.js | 244 + .../11_timeSeries_chart.spec.js | 196 - .../12_boxPlot_chart.spec.js | 248 + .../VisualizationCharts/12_pie_chart.spec.js | 153 - .../13_heatMap_chart.spec.js | 139 - .../VisualizationCharts/13_logsView.spec.js | 241 + .../13_stats_chart.spec.js | 211 + .../VisualizationCharts/7_pie_chart.spec.js | 202 + .../9_coordinateMap_chart.spec.js | 195 + .../9_verticalBar_chart.spec.js | 215 - .cypress/utils/app_constants.js | 21 +- .cypress/utils/constants.js | 3 - .cypress/utils/event_analytics/constants.js | 205 +- .cypress/utils/event_analytics/helpers.js | 72 +- .cypress/utils/panel_constants.js | 10 +- .env | 3 - .eslintrc.js | 11 - .github/ISSUE_TEMPLATE/integration_request.md | 38 - .github/workflows/backport.yml | 6 +- ...-observability-test-and-build-workflow.yml | 19 +- .../workflows/integration-tests-workflow.yml | 163 - DEVELOPER_GUIDE.md | 24 +- Dockerfile | 21 - README.md | 47 +- Using-Docker.md | 47 - common/constants/custom_panels.ts | 3 +- common/constants/integrations.ts | 7 - common/constants/metrics.ts | 10 - common/constants/notebooks.ts | 5 +- common/constants/shared.ts | 4 +- docker-compose.yml | 69 - package.json | 15 +- public/components/app.tsx | 2 - .../__snapshots__/create.test.tsx.snap | 474 +- .../__snapshots__/log_config.test.tsx.snap | 132 +- .../service_config.test.tsx.snap | 246 +- .../__snapshots__/trace_config.test.tsx.snap | 136 +- .../components/application.tsx | 24 + .../live_tail_button.test.tsx.snap | 4 +- .../custom_panel_table.test.tsx.snap | 4 +- .../custom_panel_view.test.tsx.snap | 274 +- .../__snapshots__/utils.test.tsx.snap | 9 + .../custom_panels/helpers/utils.tsx | 185 +- .../__snapshots__/empty_panel.test.tsx.snap | 2 +- .../__snapshots__/panel_grid.test.tsx.snap | 65 +- .../visualization_container.tsx | 22 +- .../visualization_flyout.test.tsx.snap | 12 +- .../visualization_flyout_so.tsx | 15 +- .../event_analytics/explorer/explorer.tsx | 7 +- .../explorer/log_patterns/log_patterns.tsx | 26 +- .../__snapshots__/save_panel.test.tsx.snap | 1 + .../__snapshots__/field.test.tsx.snap | 10 +- .../__snapshots__/sidebar.test.tsx.snap | 353 +- .../explorer/sidebar/field.tsx | 8 +- .../explorer/sidebar/sidebar.scss | 4 - .../explorer/sidebar/sidebar.tsx | 17 +- .../__snapshots__/config_panel.test.tsx.snap | 21 + .../config_panel/config_panel.tsx | 29 +- .../config_panel/config_panel_footer.tsx | 15 +- .../shared_components.test.tsx.snap | 207 + .../__tests__/shared_components.test.tsx | 43 + .../shared_components/empty_placeholder.scss | 2 +- .../shared_components/empty_placeholder.tsx | 2 +- .../visualizations/shared_components/index.ts | 3 +- .../plotly_viz_editor/index.tsx | 1 - .../shared_components/toolbar_button.scss | 65 + .../shared_components/toolbar_button.tsx | 72 + .../vis_canvass_placeholder.tsx | 8 +- .../visualization_specs/default_spec.ts | 2 + .../workspace_panel/workspace_panel.scss | 6 +- .../workspace_panel/workspace_panel.tsx | 8 +- public/components/event_analytics/index.scss | 1 + .../added_integration.test.tsx.snap | 1099 ---- .../added_integration_flyout.test.tsx.snap | 2029 ------- .../added_integration_table.test.tsx.snap | 1474 ----- ...ilable_integration_card_view.test.tsx.snap | 438 -- ...lable_integration_table_view.test.tsx.snap | 1490 ----- .../integration_details.test.tsx.snap | 215 - .../integration_fields.test.tsx.snap | 492 -- .../integration_header.test.tsx.snap | 165 - .../__tests__/added_integration.test.tsx | 43 - .../added_integration_flyout.test.tsx | 24 - .../added_integration_table.test.tsx | 23 - .../available_integration_card_view.test.tsx | 23 - .../available_integration_table_view.test.tsx | 23 - .../__tests__/integration_details.test.tsx | 22 - .../__tests__/integration_fields.test.tsx | 22 - .../__tests__/integration_header.test.tsx | 22 - .../__tests__/mapping_validation.test.ts | 176 - .../components/__tests__/testing_constants.ts | 261 - .../components/add_integration_flyout.tsx | 302 - .../components/added_integration.tsx | 299 - .../added_integration_overview_page.tsx | 65 - .../components/added_integration_table.tsx | 186 - .../available_integration_card_view.tsx | 119 - .../available_integration_overview_page.tsx | 211 - .../available_integration_table.tsx | 137 - .../integrations/components/integration.tsx | 317 -- .../components/integration_assets_panel.tsx | 96 - .../integration_category_badge_group.tsx | 34 - .../components/integration_details_panel.tsx | 77 - .../components/integration_fields_panel.tsx | 113 - .../components/integration_header.tsx | 76 - .../components/integration_overview_panel.tsx | 71 - .../integration_screenshots_panel.tsx | 42 - .../components/integration_types.ts | 33 - public/components/integrations/home.tsx | 69 - public/components/metrics/index.tsx | 123 +- .../metrics/redux/slices/metrics_slice.ts | 164 +- .../__snapshots__/searchbar.test.tsx.snap | 4 +- .../__snapshots__/sidebar.test.tsx.snap | 246 +- .../sidebar/__tests__/sidebar.test.tsx | 19 +- .../metrics/sidebar/metric_name.tsx | 40 +- .../metrics/sidebar/metrics_accordion.tsx | 7 +- .../components/metrics/sidebar/search_bar.tsx | 27 +- .../components/metrics/sidebar/sidebar.scss | 107 +- public/components/metrics/sidebar/sidebar.tsx | 30 +- .../metrics_export_panel.test.tsx.snap | 1 + .../__snapshots__/top_menu.test.tsx.snap | 456 +- .../__tests__/metrics_export_panel.test.tsx | 21 +- .../metrics/top_menu/metrics_export_panel.tsx | 23 +- .../components/metrics/top_menu/top_menu.tsx | 33 +- .../__snapshots__/metrics_grid.test.tsx.snap | 93 +- .../view/__tests__/metrics_grid.test.tsx | 38 +- .../components/metrics/view/metrics_grid.tsx | 7 + .../__snapshots__/note_table.test.tsx.snap | 8 +- .../__snapshots__/notebook.test.tsx.snap | 8 +- .../components/__tests__/notebook.test.tsx | 7 - .../paragraph_components/paragraphs.tsx | 4 +- .../__snapshots__/search_bar.test.tsx.snap | 4 +- .../filter_edit_popover.test.tsx.snap | 2 + .../components/common/helper_functions.tsx | 24 +- .../__snapshots__/service_map.test.tsx.snap | 6 +- .../service_map_scale.test.tsx.snap | 4 +- .../components/common/plots/service_map.tsx | 17 +- .../common/plots/service_map_scale.tsx | 10 +- .../__snapshots__/dashboard.test.tsx.snap | 4028 ++++++++++++-- .../dashboard_table.test.tsx.snap | 48 +- .../top_error_rates_table.test.tsx.snap | 16 +- .../top_latency_table.test.tsx.snap | 34 +- .../dashboard/dashboard_content.tsx | 44 +- .../components/dashboard/dashboard_table.tsx | 6 +- .../dashboard/top_error_rates_table.tsx | 2 +- .../components/dashboard/top_groups_page.tsx | 4 +- .../dashboard/top_latency_table.tsx | 4 +- .../__snapshots__/service_view.test.tsx.snap | 4 +- .../__snapshots__/services.test.tsx.snap | 888 +-- .../services_table.test.tsx.snap | 74 +- .../components/services/service_view.tsx | 6 +- .../components/services/services.tsx | 7 +- .../components/services/services_content.tsx | 32 +- .../components/services/services_table.tsx | 4 +- .../__snapshots__/traces.test.tsx.snap | 456 +- .../__snapshots__/traces_table.test.tsx.snap | 30 +- .../components/traces/traces.tsx | 5 +- .../components/traces/traces_table.tsx | 2 +- public/components/trace_analytics/home.tsx | 29 +- .../requests/dashboard_request_handler.ts | 13 +- .../requests/request_handler.ts | 20 +- .../trace_analytics/trace_side_nav.tsx | 20 +- .../__snapshots__/assets.test.tsx.snap | 64 + .../assets/__tests__/assets.test.tsx | 56 + .../visualizations/assets/chart_bar.tsx | 29 + .../assets/chart_bar_horizontal.tsx | 33 + .../visualizations/assets/chart_datatable.tsx | 35 + .../visualizations/assets/chart_line.tsx | 29 + .../visualizations/assets/chart_pie.tsx | 31 + .../__tests__/__snapshots__/bar.test.tsx.snap | 1 + .../__snapshots__/gauge.test.tsx.snap | 5 +- .../__snapshots__/heatmap.test.tsx.snap | 1 + .../__snapshots__/histogram.test.tsx.snap | 1 + .../horizontal_bar.test.tsx.snap | 1 + .../__snapshots__/line.test.tsx.snap | 1 + .../__snapshots__/metrics.test.tsx.snap | 5 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 1 + .../__snapshots__/text.test.tsx.snap | 1 + .../__snapshots__/treemap.test.tsx.snap | 1 + .../visualizations/charts/bar/bar_type.ts | 2 + .../charts/bubble/bubble_type.ts | 2 + .../charts/data_table/data_table_type.ts | 4 + .../charts/financial/gauge/gauge_type.ts | 2 + .../visualizations/charts/lines/line.tsx | 85 +- .../visualizations/charts/lines/line_type.ts | 4 + .../visualizations/charts/maps/heatmap.tsx | 3 +- .../charts/maps/heatmap_type.ts | 4 + .../charts/maps/treemap_type.ts | 6 +- .../charts/metrics/metrics_type.ts | 3 + .../visualizations/charts/pie/pie_type.ts | 5 + .../visualizations/charts/shared/common.ts | 1 + .../visualizations/charts/text/text_type.ts | 2 + .../visualizations/visualization.tsx | 4 +- public/framework/core_refs.ts | 8 +- public/plugin.ts | 12 - .../data_fetchers/ppl/ppl_data_fetcher.ts | 17 +- ...rds-observability.release-notes-2.9.0.0.md | 18 - .../custom_panels/custom_panel_adaptor.ts | 19 +- .../repository/apache/apache-1.0.0.json | 46 - .../apache/assets/apache-1.0.0.ndjson | 11 - .../repository/apache/data/sample.json | 206 - .../repository/apache/info/INGESTION.md | 156 - .../__data__/repository/apache/info/README.md | 17 - .../schemas/communication-1.0.0.mapping.json | 135 - .../apache/schemas/http-1.0.0.mapping.json | 166 - .../schemas/logs_apache-1.0.0.mapping.json | 238 - .../repository/apache/static/dashboard1.png | Bin 217383 -> 0 bytes .../repository/apache/static/logo.png | Bin 32093 -> 0 bytes .../assets/aws_cloudfront-1.0.0.ndjson | 31 - .../aws_cloudfront/aws_cloudfront-1.0.0.json | 50 - .../aws_cloudfront/data/sample.json | 761 --- .../repository/aws_cloudfront/info/README.md | 19 - .../schemas/aws_cloudfront-1.0.0.mapping.json | 194 - .../schemas/aws_s3-1.0.0.mapping.json | 170 - .../schemas/cloud-1.0.0.mapping.json | 83 - .../logs-aws_cloudfront-1.0.0.mapping.json | 226 - .../aws_cloudfront/static/dashboard.png | Bin 192457 -> 0 bytes .../repository/aws_cloudfront/static/logo.png | Bin 88962 -> 0 bytes .../assets/aws_cloudtrail-1.0.0.ndjson | 21 - .../aws_cloudtrail/aws_cloudtrail-1.0.0.json | 50 - .../aws_cloudtrail/data/samples.json | 3772 ------------- .../repository/aws_cloudtrail/info/README.md | 30 - .../schemas/aws_cloudtrail-1.0.0.mapping.json | 87 - .../schemas/aws_s3-1.0.0.mapping.json | 170 - .../schemas/cloud-1.0.0.mapping.json | 83 - .../logs-aws_cloudtrail-1.0.0.mapping.json | 226 - .../aws_cloudtrail/static/dashboard.png | Bin 502333 -> 0 bytes .../repository/aws_cloudtrail/static/logo.png | Bin 3982 -> 0 bytes .../aws_elb/assets/aws_elb-1.0.0.ndjson | 22 - .../repository/aws_elb/aws_elb-1.0.0.json | 58 - .../repository/aws_elb/data/sample.json | 4370 --------------- .../repository/aws_elb/info/INGESTION.md | 163 - .../repository/aws_elb/info/README.md | 31 - .../schemas/aws_elb-1.0.0.mapping.json | 99 - .../aws_elb/schemas/cloud-1.0.0.mapping.json | 83 - .../schemas/communication-1.0.0.mapping.json | 135 - .../aws_elb/schemas/http-1.0.0.mapping.json | 166 - .../schemas/logs_elb-1.0.0.mapping.json | 225 - .../aws_elb/schemas/url-1.0.0.mapping.json | 61 - .../repository/aws_elb/static/dashboard1.png | Bin 312637 -> 0 bytes .../repository/aws_elb/static/logo.svg | 10 - .../repository/aws_rds/assets/README.md | 38 - .../aws_rds/assets/aws_rds-1.0.0.ndjson | 22 - .../repository/aws_rds/aws_rds-1.0.0.json | 50 - .../repository/aws_rds/data/sample.json | 272 - .../repository/aws_rds/info/README.md | 29 - .../schemas/aws_rds-1.0.0.mapping.json | 299 - .../aws_rds/schemas/aws_s3-1.0.0.mapping.json | 170 - .../aws_rds/schemas/cloud-1.0.0.mapping.json | 83 - .../schemas/logs_rds-1.0.0.mapping.json | 230 - .../aws_rds/static/aws-rds-icon.png | Bin 9164 -> 0 bytes .../repository/aws_rds/static/dashboard.png | Bin 310559 -> 0 bytes .../aws_s3/assets/aws_s3-1.0.0.ndjson | 17 - .../repository/aws_s3/aws_s3-1.0.0.json | 46 - .../repository/aws_s3/data/sample.json | 262 - .../__data__/repository/aws_s3/info/README.md | 19 - .../aws_s3/schemas/aws_s3-1.0.0.mapping.json | 170 - .../aws_s3/schemas/cloud-1.0.0.mapping.json | 83 - .../aws_s3/schemas/logs_s3-1.0.0.mapping.json | 226 - .../repository/aws_s3/static/dashboard.png | Bin 207142 -> 0 bytes .../repository/aws_s3/static/logo.png | Bin 52426 -> 0 bytes .../repository/aws_vpc_flow/assets/README.md | 33 - .../assets/aws_vpc_flow-1.0.0.ndjson | 22 - .../aws_vpc_flow/aws_vpc_flow-1.0.0.json | 54 - .../repository/aws_vpc_flow/data/sample.json | 1467 ----- .../repository/aws_vpc_flow/info/README.md | 29 - .../schemas/aws_s3-1.0.0.mapping.json | 170 - .../schemas/aws_vpc_flow-1.0.0.mapping.json | 115 - .../schemas/cloud-1.0.0.mapping.json | 83 - .../schemas/communication-1.0.0.mapping.json | 135 - .../schemas/logs_vpc-1.0.0.mapping.json | 226 - .../aws_vpc_flow/static/dashboard1.png | Bin 573381 -> 0 bytes .../repository/aws_vpc_flow/static/logo.svg | 7 - .../aws_waf/assets/aws_waf-1.0.0.ndjson | 24 - .../repository/aws_waf/aws_waf-1.0.0.json | 50 - .../repository/aws_waf/data/samples.json | 4594 ---------------- .../repository/aws_waf/info/README.md | 28 - .../aws_waf/schemas/aws_s3-1.0.0.mapping.json | 170 - .../schemas/aws_waf-1.0.0.mapping.json | 144 - .../aws_waf/schemas/cloud-1.0.0.mapping.json | 83 - .../schemas/logs_waf-1.0.0.mapping.json | 226 - .../repository/aws_waf/static/dashboard.png | Bin 271570 -> 0 bytes .../repository/aws_waf/static/logo.jpg | Bin 14441 -> 0 bytes .../__data__/repository/k8s/assets/README.md | 55 - .../repository/k8s/assets/k8s-1.0.0.ndjson | 16 - .../k8s/data/sample-container-cpu-usage.json | 1156 ---- .../data/sample-container-memory-usage.json | 1120 ---- .../k8s/data/sample-deployment-name.json | 562 -- .../k8s/data/sample-node-cpu-usage.json | 2002 ------- .../__data__/repository/k8s/data/sample.json | 4835 ----------------- .../__data__/repository/k8s/info/README.md | 90 - .../repository/k8s/ingestion/README.md | 42 - .../repository/k8s/ingestion/fluent-bit.yaml | 174 - .../__data__/repository/k8s/k8s-1.0.0.json | 50 - .../k8s/schemas/cloud-1.0.0.mapping.json | 83 - .../k8s/schemas/container-1.0.0.mapping.json | 68 - .../k8s/schemas/k8s-1.0.0.mapping.json | 2286 -------- .../k8s/schemas/logs-k8s-1.0.0.mapping.json | 245 - .../repository/k8s/static/dashboard.png | Bin 418400 -> 0 bytes .../__data__/repository/k8s/static/logo.png | Bin 24528 -> 0 bytes .../nginx/assets/nginx-1.0.0.ndjson | 9 - .../repository/nginx/data/sample.json | 1 - .../__data__/repository/nginx/info/README.md | 17 - .../repository/nginx/nginx-1.0.0.json | 46 - .../schemas/communication-1.0.0.mapping.json | 135 - .../nginx/schemas/http-1.0.0.mapping.json | 166 - .../nginx/schemas/logs-1.0.0.mapping.json | 223 - .../repository/nginx/static/dashboard1.png | Bin 225182 -> 0 bytes .../__data__/repository/nginx/static/logo.svg | 12 - .../integrations/__test__/builder.test.ts | 326 -- .../__test__/kibana_backend.test.ts | 384 -- .../__test__/local_repository.test.ts | 34 - .../integrations/__test__/validators.test.ts | 84 - .../integrations/integrations_adaptor.ts | 2 - .../integrations/integrations_builder.ts | 102 - .../integrations_kibana_backend.ts | 204 - .../repository/__test__/integration.test.ts | 11 +- .../integrations/repository/integration.ts | 72 +- server/adaptors/integrations/types.ts | 7 +- server/adaptors/integrations/validators.ts | 66 +- server/adaptors/notebooks/default_backend.ts | 16 +- server/adaptors/notebooks/index.ts | 6 +- server/adaptors/ppl_datasource.ts | 37 +- .../notebooks/default_notebook_schema.ts | 20 +- .../common/helpers/notebooks/query_helpers.ts | 25 +- .../helpers/notebooks/sample_notebooks.ts | 27 +- .../helpers/notebooks/wreck_requests.ts | 2 +- server/common/metrics/constants.ts | 1 - server/common/metrics/metrics_helper.ts | 6 +- server/common/metrics/types.ts | 4 +- server/common/types/index.ts | 18 +- server/plugin.ts | 27 - .../app_analytics_router.ts | 1 + server/routes/custom_panels/panels_router.ts | 2 + server/routes/dsl.ts | 170 +- server/routes/index.ts | 6 +- .../__tests__/integrations_router.test.ts | 22 +- .../integrations/integrations_router.ts | 25 +- server/routes/metrics/metrics_rounter.ts | 2 +- server/routes/notebooks/noteRouter.ts | 2 +- server/routes/notebooks/paraRouter.ts | 4 +- server/routes/notebooks/sqlRouter.ts | 2 +- server/routes/ppl.ts | 72 +- server/services/facets/dsl_facet.ts | 27 +- server/services/facets/ppl_facet.ts | 31 +- server/services/queryService.ts | 12 +- test/__mocks__/coreMocks.ts | 2 - test/constants.ts | 123 +- test/setup.jest.ts | 13 + yarn.lock | 1655 +++--- 358 files changed, 10030 insertions(+), 54857 deletions(-) delete mode 100644 .cypress/integration/9_integrations.spec.js delete mode 100644 .cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/10_scatter_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js delete mode 100644 .cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js delete mode 100644 .cypress/integration/VisualizationCharts/12_pie_chart.spec.js delete mode 100644 .cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/13_logsView.spec.js create mode 100644 .cypress/integration/VisualizationCharts/13_stats_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/7_pie_chart.spec.js create mode 100644 .cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js delete mode 100644 .cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js delete mode 100644 .env delete mode 100644 .github/ISSUE_TEMPLATE/integration_request.md delete mode 100644 .github/workflows/integration-tests-workflow.yml delete mode 100644 Dockerfile delete mode 100644 Using-Docker.md delete mode 100644 common/constants/integrations.ts delete mode 100644 docker-compose.yml create mode 100644 public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap create mode 100644 public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx create mode 100644 public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss create mode 100644 public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/added_integration_flyout.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/integration_fields.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/__snapshots__/integration_header.test.tsx.snap delete mode 100644 public/components/integrations/components/__tests__/added_integration.test.tsx delete mode 100644 public/components/integrations/components/__tests__/added_integration_flyout.test.tsx delete mode 100644 public/components/integrations/components/__tests__/added_integration_table.test.tsx delete mode 100644 public/components/integrations/components/__tests__/available_integration_card_view.test.tsx delete mode 100644 public/components/integrations/components/__tests__/available_integration_table_view.test.tsx delete mode 100644 public/components/integrations/components/__tests__/integration_details.test.tsx delete mode 100644 public/components/integrations/components/__tests__/integration_fields.test.tsx delete mode 100644 public/components/integrations/components/__tests__/integration_header.test.tsx delete mode 100644 public/components/integrations/components/__tests__/mapping_validation.test.ts delete mode 100644 public/components/integrations/components/__tests__/testing_constants.ts delete mode 100644 public/components/integrations/components/add_integration_flyout.tsx delete mode 100644 public/components/integrations/components/added_integration.tsx delete mode 100644 public/components/integrations/components/added_integration_overview_page.tsx delete mode 100644 public/components/integrations/components/added_integration_table.tsx delete mode 100644 public/components/integrations/components/available_integration_card_view.tsx delete mode 100644 public/components/integrations/components/available_integration_overview_page.tsx delete mode 100644 public/components/integrations/components/available_integration_table.tsx delete mode 100644 public/components/integrations/components/integration.tsx delete mode 100644 public/components/integrations/components/integration_assets_panel.tsx delete mode 100644 public/components/integrations/components/integration_category_badge_group.tsx delete mode 100644 public/components/integrations/components/integration_details_panel.tsx delete mode 100644 public/components/integrations/components/integration_fields_panel.tsx delete mode 100644 public/components/integrations/components/integration_header.tsx delete mode 100644 public/components/integrations/components/integration_overview_panel.tsx delete mode 100644 public/components/integrations/components/integration_screenshots_panel.tsx delete mode 100644 public/components/integrations/components/integration_types.ts delete mode 100644 public/components/integrations/home.tsx create mode 100644 public/components/visualizations/assets/__tests__/__snapshots__/assets.test.tsx.snap create mode 100644 public/components/visualizations/assets/__tests__/assets.test.tsx create mode 100644 public/components/visualizations/assets/chart_bar.tsx create mode 100644 public/components/visualizations/assets/chart_bar_horizontal.tsx create mode 100644 public/components/visualizations/assets/chart_datatable.tsx create mode 100644 public/components/visualizations/assets/chart_line.tsx create mode 100644 public/components/visualizations/assets/chart_pie.tsx delete mode 100644 release-notes/dashboards-observability.release-notes-2.9.0.0.md delete mode 100644 server/adaptors/integrations/__data__/repository/apache/apache-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/apache/assets/apache-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/apache/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/apache/info/INGESTION.md delete mode 100644 server/adaptors/integrations/__data__/repository/apache/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/apache/schemas/communication-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/apache/schemas/http-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/apache/schemas/logs_apache-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/apache/static/dashboard1.png delete mode 100644 server/adaptors/integrations/__data__/repository/apache/static/logo.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/assets/aws_cloudfront-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/aws_cloudfront-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/schemas/aws_cloudfront-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/schemas/logs-aws_cloudfront-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudfront/static/logo.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/assets/aws_cloudtrail-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/aws_cloudtrail-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/data/samples.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/schemas/aws_cloudtrail-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/schemas/logs-aws_cloudtrail-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_cloudtrail/static/logo.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/assets/aws_elb-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/aws_elb-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/info/INGESTION.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/aws_elb-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/communication-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/http-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/logs_elb-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/schemas/url-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/static/dashboard1.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_elb/static/logo.svg delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/assets/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/assets/aws_rds-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/aws_rds-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/schemas/aws_rds-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/schemas/logs_rds-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/static/aws-rds-icon.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_rds/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/assets/aws_s3-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/aws_s3-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/schemas/logs_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_s3/static/logo.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/assets/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/assets/aws_vpc_flow-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/aws_vpc_flow-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/schemas/aws_vpc_flow-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/schemas/communication-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/schemas/logs_vpc-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/static/dashboard1.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_vpc_flow/static/logo.svg delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/assets/aws_waf-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/aws_waf-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/data/samples.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/schemas/aws_s3-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/schemas/aws_waf-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/schemas/logs_waf-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/aws_waf/static/logo.jpg delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/assets/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/assets/k8s-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/data/sample-container-cpu-usage.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/data/sample-container-memory-usage.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/data/sample-deployment-name.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/data/sample-node-cpu-usage.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/ingestion/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/ingestion/fluent-bit.yaml delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/k8s-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/schemas/cloud-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/schemas/container-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/schemas/k8s-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/schemas/logs-k8s-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/static/dashboard.png delete mode 100644 server/adaptors/integrations/__data__/repository/k8s/static/logo.png delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/assets/nginx-1.0.0.ndjson delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/data/sample.json delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/info/README.md delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/nginx-1.0.0.json delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/schemas/communication-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/schemas/http-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/schemas/logs-1.0.0.mapping.json delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/static/dashboard1.png delete mode 100644 server/adaptors/integrations/__data__/repository/nginx/static/logo.svg delete mode 100644 server/adaptors/integrations/__test__/builder.test.ts delete mode 100644 server/adaptors/integrations/__test__/kibana_backend.test.ts delete mode 100644 server/adaptors/integrations/__test__/local_repository.test.ts delete mode 100644 server/adaptors/integrations/__test__/validators.test.ts delete mode 100644 server/adaptors/integrations/integrations_builder.ts delete mode 100644 server/adaptors/integrations/integrations_kibana_backend.ts diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js index cbbeeae47..a12f866af 100644 --- a/.cypress/integration/1_event_analytics.spec.js +++ b/.cypress/integration/1_event_analytics.spec.js @@ -12,7 +12,12 @@ import { SAVE_QUERY2, SAVE_QUERY3, SAVE_QUERY4, + querySearch, YEAR_TO_DATE_DOM_ID, + landOnEventHome, + landOnEventExplorer, + landOnEventVisualizations, + landOnPanels, HOST_TEXT_1, HOST_TEXT_2, HOST_TEXT_3, @@ -26,15 +31,7 @@ import { FIELD_AGENT } from '../utils/event_analytics/constants'; import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants'; - -import { - querySearch, - landOnEventHome, - landOnEventExplorer, - landOnEventVisualizations, - landOnPanels, - clearQuerySearchBoxText, -} from '../utils/event_analytics/helpers'; +import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; describe('Adding sample data and visualization', () => { it('Adds sample flights data for event analytics', () => { diff --git a/.cypress/integration/3_panels.spec.ts b/.cypress/integration/3_panels.spec.ts index 7096f5aa8..87a4ed902 100644 --- a/.cypress/integration/3_panels.spec.ts +++ b/.cypress/integration/3_panels.spec.ts @@ -10,621 +10,583 @@ import { delay, NEW_VISUALIZATION_NAME, PPL_FILTER, - PPL_VISUALIZATION_CONFIGS, PPL_VISUALIZATIONS, PPL_VISUALIZATIONS_NAMES, TEST_PANEL, } from '../utils/panel_constants'; -describe('Panels testing with Sample Data', () => { - suppressResizeObserverIssue();//needs to be in file once - - before(() => { +describe('Adding sample data and visualization', () => { + it('Adds sample flights data for visualization paragraph', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); cy.get('div[data-test-subj="sampleDataSetCardflights"]') .contains(/(Add|View) data/) .trigger('mouseover') .click(); + cy.wait(delay * 3); }); +}); +describe('Creating visualizations', () => { beforeEach(() => { - eraseTestPanels(); - eraseSavedVisualizations(); - }) - - after(() => { - eraseTestPanels(); - eraseSavedVisualizations(); + moveToEventsHome(); }); - describe('Creating visualizations', () => { - beforeEach(() => { - moveToEventsHome(); + it('Create first visualization in event analytics', () => { + cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0], { + delay: 50, }); - - it('Create first visualization in event analytics', () => { - cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0], { + cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); + cy.wait(delay); + suppressResizeObserverIssue(); + cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click(); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .focus() + .type(PPL_VISUALIZATIONS_NAMES[0], { delay: 50, }); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); - cy.wait(delay); //occationaly refresh wont work without this - cy.get('button[id="main-content-vis"]') - .contains('Visualizations') - .trigger('mouseover', { force: true }) - .click({ force: true }); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') - .trigger('mouseover') - .click({force: true}); - cy.wait(delay*5); //Wont save as correct name without wait - cy.get('[data-test-subj="eventExplorer__querySaveName"]') - .focus() - .type(PPL_VISUALIZATIONS_NAMES[0]); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); + cy.wait(delay); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + }); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + it('Create second visualization in event analytics', () => { + cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[1], { + delay: 50, }); + cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); + cy.wait(delay); + suppressResizeObserverIssue(); + cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); + cy.wait(delay); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click(); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .focus() + .type(PPL_VISUALIZATIONS_NAMES[1], { + delay: 50, + }); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); + cy.wait(delay); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + }); +}); - it('Create second visualization in event analytics', () => { - cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[1]); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); - cy.get('button[id="main-content-vis"]') - .contains('Visualizations') - .trigger('mouseover') - .click({ force: true }); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') - .trigger('mouseover') - .click(); - cy.wait(delay * 5); //Wont save as correct name without wait - cy.get('[data-test-subj="eventExplorer__querySaveName"]') - .focus() - .type(PPL_VISUALIZATIONS_NAMES[1]); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - }); +describe('Testing panels table', () => { + beforeEach(() => { + eraseTestPanels(); + moveToPanelHome(); }); - describe('Testing panels table', () => { - describe('Without Any Panels', () => { - beforeEach(() => { - moveToPanelHome(); - }); + describe('Without Any Panels', () => { + beforeEach(() => { + moveToPanelHome(); + }); - it('Displays error toast for invalid panel name', () => { - clickCreatePanelButton(); - confirmModal(); - expectToastWith('Invalid Dashboard name'); - }); + it.skip('Displays error toast for invalid panel name', () => { + clickCreatePanelButton(); + confirmModal(); + expectToastWith('Invalid Dashboard name'); + }); - it('Creates a panel and redirects to the panel', () => { - clickCreatePanelButton(); - cy.get('input.euiFieldText').focus().type(TEST_PANEL); - cy.get('button[data-test-subj="runModalButton"]').click(); - cy.contains(TEST_PANEL).should('exist'); + it('Creates a panel and redirects to the panel', () => { + clickCreatePanelButton(); + cy.get('input.euiFieldText').focus().type(TEST_PANEL, { + delay: 50, }); + cy.get('button[data-test-subj="runModalButton"]').click(); + cy.contains(TEST_PANEL).should('exist'); }); + }); - describe('with a Legacy Panel', () => { - beforeEach(() => { - createLegacyPanel(); - moveToPanelHome(); - }); + describe('with a Legacy Panel', () => { + beforeEach(() => { + createLegacyPanel(); + moveToPanelHome(); + }); - it('Duplicates a legacy panel', () => { - cy.get('[data-test-subj="breadcrumb last"]').click({ force: true }); //reload page - cy.get('.euiTableRow').should('have.length', 1); - selectThePanel(); - openActionsDropdown(); - cy.get('button[data-test-subj="duplicateContextMenuItem"]').click(); - cy.get('button[data-test-subj="runModalButton"]').click(); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); //Duplicate opens the panel, need to return - cy.get('.euiTableRow').should('have.length', 2); - const duplicateName = TEST_PANEL + ' (copy)'; - cy.contains(duplicateName).should('exist'); - const duplicate = cy.get('.euiLink').contains(duplicateName); - expectUuid(duplicate); - }); + it('Duplicates a legacy panel', () => { + cy.get('.euiTableRow').should('have.length', 1); + selectThePanel(); + openActionsDropdown(); + cy.get('button[data-test-subj="duplicateContextMenuItem"]').click(); + cy.get('button[data-test-subj="runModalButton"]').click(); + cy.get('.euiTableRow').should('have.length', 2); + const duplicateName = TEST_PANEL + ' (copy)'; + cy.contains(duplicateName).should('exist'); + const duplicate = cy.get('.euiLink').contains(duplicateName); + expectUuid(duplicate); + }); - it('Renames the panel', () => { - cy.reload(); - const cell = cy.get('.euiTableCellContent'); - expectLegacyId(cell); - cy.get('.euiCheckbox__input[title="Select this row"]').first().click(); - openActionsDropdown(); - cy.get('button[data-test-subj="renameContextMenuItem"]').click(); - cy.get('input.euiFieldText').focus().type(' (rename)'); - cy.get('button[data-test-subj="runModalButton"]').click(); - const renamed = testPanelTableCell(); - expectLegacyId(renamed); - }); + it('Renames the panel', () => { + createLegacyPanel(); + cy.reload(); + const cell = cy.get('.euiTableCellContent'); + expectLegacyId(cell); + selectThePanel(); + openActionsDropdown(); + cy.get('button[data-test-subj="renameContextMenuItem"]').click(); + cy.get('input.euiFieldText').focus().type(' (rename)'); + cy.get('button[data-test-subj="runModalButton"]').click(); + const renamed = testPanelTableCell(); + expectUuid(renamed); + }); - it('Deletes the panel', () => { - cy.get('input[data-test-subj="checkboxSelectAll"]').click(); - openActionsDropdown(); - cy.get('button[data-test-subj="deleteContextMenuItem"]').click(); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); - cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete'); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); - cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist'); - }); + it('Deletes the panel', () => { + cy.get('input[data-test-subj="checkboxSelectAll"]').click(); + openActionsDropdown(); + cy.get('button[data-test-subj="deleteContextMenuItem"]').click(); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); - it('Searches panels', () => { - createLegacyPanel('Legacy Named'); - createSavedObjectPanel('Saved Object'); - cy.wait(delay);//Needed so the panel appears on the dashboard page - cy.reload(); - cy.get('input[data-test-subj="operationalPanelSearchBar"]') - .focus() - .type('this panel should not exist', { - delay: 50, - }); - cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - // Search for orignal Legacy Panel - cy.get('[aria-label="Clear input"]').click(); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(TEST_PANEL); - cy.get('a.euiLink').contains(TEST_PANEL).should('exist'); - cy.get('.euiTableRow').should('have.length', 1); - // Search for the Saved Object panel - cy.get('[aria-label="Clear input"]').click(); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type('Saved Object'); - cy.get('a.euiLink').contains('Saved Object').should('exist'); - cy.get('.euiTableRow').should('have.length', 1); + cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { + delay: 50, }); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); + cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist'); }); - describe('with a SavedObjects Panel', () => { - beforeEach(() => { - createSavedObjectPanel(); - moveToPanelHome(); - cy.get('[data-test-subj="breadcrumb last"]').click({ force: true }); //reload page - cy.get('.euiTableRow').should('have.length', 1); - }); - - it('Duplicates the panel', () => { - selectThePanel(); - openActionsDropdown(); - cy.get('button[data-test-subj="duplicateContextMenuItem"]').click(); - cy.get('button[data-test-subj="runModalButton"]').click(); - const duplicateName = TEST_PANEL + ' (copy)'; - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); //reload page - cy.get('.euiTableRow').should('have.length', 2); - cy.contains(duplicateName).should('exist'); - const duplicate = cy.get('.euiLink').contains(duplicateName); - expectUuid(duplicate); - }); + it('Searches panels', () => { + createLegacyPanel('Legacy Named'); + createSavedObjectPanel('Saved Object'); + cy.reload(); + cy.get('input[data-test-subj="operationalPanelSearchBar"]') + .focus() + .type('this panel should not exist', { + delay: 50, + }); - it('Renames a saved-objects panel', () => { - selectThePanel(); - openActionsDropdown(); - cy.get('button[data-test-subj="renameContextMenuItem"]').click(); - cy.get('input.euiFieldText').focus().type(' (rename)'); - cy.get('button[data-test-subj="runModalButton"]').click(); - }); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); - it('Deletes the panel', () => { - createSavedObjectPanel(); - cy.get('a[data-test-subj="breadcrumb last"]').click();//refresh so panel appears - cy.get('input[data-test-subj="checkboxSelectAll"]').click(); - openActionsDropdown(); - cy.get('button[data-test-subj="deleteContextMenuItem"]').click({ force: true }); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); - cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete'); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').click({ force: true }); - cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist'); + // Search for oriignal Legacy Panel + cy.get('[aria-label="Clear input"]').click(); + cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(TEST_PANEL, { + delay: 50, }); - it('Redirects to observability dashboard from OSD dashboards', () => { - moveToOsdDashboards(); - cy.location('pathname').should('eq', '/app/dashboards'); - cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]').click(); - cy.location('pathname').should('eq', '/app/observability-dashboards'); - }); + cy.get('a.euiLink').contains(TEST_PANEL).should('exist'); + cy.get('.euiTableRow').should('have.length', 1); - it('Redirects to observability dashboard from OSD dashboards with edit', () => { - moveToOsdDashboards(); - cy.location('pathname').should('eq', '/app/dashboards'); - cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]') - .closest('tr') - .get('span.euiToolTipAnchor > button.euiButtonIcon') - .eq(0) - .click(); - cy.location('pathname').should('eq', '/app/observability-dashboards'); - cy.location('hash').should('include', '/edit'); + // Search for teh Saved Object panel + cy.get('[aria-label="Clear input"]').click(); + cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type('Saved Object', { + delay: 50, }); - it('Redirects to observability dashboard from OSD dashboards with create', () => { - moveToOsdDashboards(); - cy.location('pathname') - .should('eq', '/app/dashboards') - .then(() => { - cy.get('div#createMenuPopover').click(); - }); - cy.get('[data-test-subj="contextMenuItem-observability-panel"]').click(); - cy.location('pathname').should('eq', '/app/observability-dashboards'); - cy.location('hash').should('include', '/create'); - }); + cy.get('a.euiLink').contains('Saved Object').should('exist'); + cy.get('.euiTableRow').should('have.length', 1); }); }); - describe('Testing a panel', () => { + describe('with a SavedObjects Panel', () => { beforeEach(() => { - const test_name = `test_${new Date().getTime()}`; - createSavedObjectPanel(test_name).as('thePanel'); - cy.then(function (){ - moveToThePanel(this.thePanel.id); - }); + createSavedObjectPanel(); + moveToPanelHome(); + cy.get('.euiTableRow').should('have.length', 1); }); - it('Opens visualization flyout from empty panel', () => { - cy.get('button[data-test-subj="addVisualizationButton"]').eq(1).click(); - cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); - cy.get('button[data-test-subj="closeFlyoutButton"]').click(); - }); - - it('Redirects to correct page on breadcrumb click', () => { - cy.get('a[data-test-subj="breadcrumb last"]').click(); - cy.then(function (){ - cy.get('h1[data-test-subj="panelNameHeader"]').contains(this.thePanel.attributes.title).should('exist'); - }); + it('Duplicates the panel', () => { + selectThePanel(); + openActionsDropdown(); + cy.get('button[data-test-subj="duplicateContextMenuItem"]').click(); + cy.get('button[data-test-subj="runModalButton"]').click(); + const duplicateName = TEST_PANEL + ' (copy)'; + cy.get('.euiTableRow').should('have.length', 2); + cy.contains(duplicateName).should('exist'); + const duplicate = cy.get('.euiLink').contains(duplicateName); + expectUuid(duplicate); }); - it('Duplicate the open panel', () => { - cy.get('button[data-test-subj="panelActionContextMenu"]').click(); - cy.get('button[data-test-subj="duplicatePanelContextMenuItem"]').click(); - cy.then(function (){ - cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title} (copy)"]`).should('exist'); + it('Renames a saved-objects panel', () => { + selectThePanel(); + openActionsDropdown(); + cy.get('button[data-test-subj="renameContextMenuItem"]').click(); + cy.get('input.euiFieldText').focus().type(' (rename)', { + delay: 50, }); cy.get('button[data-test-subj="runModalButton"]').click(); - cy.then(function (){ - cy.get('h1[data-test-subj="panelNameHeader"]') - .contains(this.thePanel.attributes.title + ' (copy)') - .should('exist'); - }); }); - it('Rename the open panel', () => { - cy.then(function (){ - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - cy.get('button[data-test-subj="panelActionContextMenu"]').click(); - cy.get('button[data-test-subj="renamePanelContextMenuItem"]').click(); - cy.get(`input.euiFieldText[value="${this.thePanel.attributes.title}"]`) - .focus() - .clear({ force: true }) - .focus() - .type('Renamed Panel'); - }); - cy.get('button[data-test-subj="runModalButton"]').click(); - cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist'); + it('Deletes the panel', () => { + createSavedObjectPanel(); + cy.get('input[data-test-subj="checkboxSelectAll"]').click(); + openActionsDropdown(); + cy.get('button[data-test-subj="deleteContextMenuItem"]').click(); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); + + cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { + delay: 50, + }); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); + cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist'); }); - it('Change date filter of the panel', () => { - cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true}); - cy.wait(delay);//flyout won't open sometimes without - cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click({force: true}); - cy.get('button[data-test-subj="superDatePickerShowDatesButton"]') - .contains('This year') - .should('exist'); + it('Redirects to observability dashboard from OSD dashboards', () => { + moveToOsdDashboards(); + cy.location('pathname').should('eq', '/app/dashboards'); + cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]').click(); + cy.location('pathname').should('eq', '/app/observability-dashboards'); }); - it('Add existing visualization #1', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[0], - PPL_VISUALIZATIONS[0], - PPL_VISUALIZATION_CONFIGS[0] - ).as('vis1'); - cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); - cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); - cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]); - cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); - cy.get('.plot-container').should('exist'); - cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true}); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + it('Redirects to observability dashboard from OSD dashboards with edit', () => { + moveToOsdDashboards(); + cy.location('pathname').should('eq', '/app/dashboards'); + cy.get('[data-test-subj="dashboardListingTitleLink-Test-Panel"]') + .closest('tr') + .get('span.euiToolTipAnchor > button.euiButtonIcon') + .eq(0) + .click(); + cy.location('pathname').should('eq', '/app/observability-dashboards'); + cy.location('hash').should('include', '/edit'); }); - it('Add existing visualization #2', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[1], - PPL_VISUALIZATIONS[1], - PPL_VISUALIZATION_CONFIGS[1] - ).as('vis1'); - cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); - cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); - cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]); - cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); - cy.get('.plot-container').should('exist'); - cy.get('button[data-test-subj="addFlyoutButton"]').click({force: true}); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + it('Redirects to observability dashboard from OSD dashboards with create', () => { + moveToOsdDashboards(); + cy.location('pathname').should('eq', '/app/dashboards'); + cy.get('div#createMenuPopover').click(); + cy.get('[data-test-subj="contextMenuItem-observability-panel"]').click(); + cy.location('pathname').should('eq', '/app/observability-dashboards'); + cy.location('hash').should('include', '/create'); }); + }); +}); - it('Add ppl filter to panel', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[0], - PPL_VISUALIZATIONS[0], - PPL_VISUALIZATION_CONFIGS[0] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - }); +describe('Testing a panel', () => { + it('Move to test panel', () => { + moveToTestPanel(); + }); - cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({force: true,}); - cy.get('[data-test-subj="superDatePickerQuickMenu"') - .first() - .within(() => { - cy.get('input[aria-label="Time value"]').type('2', { force: true }); - cy.get('select[aria-label="Time unit"]').select('years'); - cy.get('button').contains('Apply').click(); - }); + it('Opens visualization flyout from empty panel', () => { + cy.get('button[data-test-subj="addVisualizationButton"]').eq(1).click(); + cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); + cy.get('button[data-test-subj="closeFlyoutButton"]').click(); + }); - cy.get('[data-test-subj="searchAutocompleteTextArea"]') - .trigger('mouseover') - .click({force: true}) - .wait(delay*5) - .focus() - .type(PPL_FILTER); - cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({force: true}); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); - cy.get('.xtick').should('contain', 'Munich Airport'); - cy.get('.xtick').contains('Zurich Airport').should('not.exist'); - cy.get('.xtick').contains('BeatsWest').should('not.exist'); - cy.get('.xtick').contains('Logstash Airways').should('not.exist'); - cy.get('.xtick').contains('OpenSearch Dashboards Airlines').should('not.exist'); - }); + it('Redirects to correct page on breadcrumb click', () => { + moveToTestPanel(); + cy.get('a[data-test-subj="breadcrumb last"]').click(); - it('Drag and drop a visualization', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[1], - PPL_VISUALIZATIONS[1], - PPL_VISUALIZATION_CONFIGS[1] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - }); + cy.get('h1[data-test-subj="panelNameHeader"]').contains(TEST_PANEL).should('exist'); + cy.get('a[data-test-subj="breadcrumb"]').contains('Operational panels').click(); - cy.get('button[data-test-subj="editPanelButton"]').click(); + cy.get('a[data-test-subj="breadcrumb last"]').contains('Operational panels').should('exist'); + cy.get('a[data-test-subj="breadcrumb first"]').contains('Observability').click(); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[1]) - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: 1100, clientY: 0 }) - .trigger('mouseup', { force: true }); + cy.get('a[data-test-subj="breadcrumb"]').contains('Event analytics').should('exist'); + }); - cy.get('button[data-test-subj="savePanelButton"]').click(); - cy.get('div.react-grid-layout>div') - .eq(0) - .invoke('attr', 'style') - .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)')); - }); + it('Duplicate the open panel', () => { + moveToTestPanel(); + cy.get('button[data-test-subj="panelActionContextMenu"]').click(); - it('Resize a visualization', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[1], - PPL_VISUALIZATIONS[1], - PPL_VISUALIZATION_CONFIGS[1] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - }); + cy.get('button[data-test-subj="duplicatePanelContextMenuItem"]').click(); - cy.get('button[data-test-subj="editPanelButton"]').click(); + cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`).should('exist'); + cy.get('button[data-test-subj="runModalButton"]').click(); + cy.get('h1[data-test-subj="panelNameHeader"]') + .contains(TEST_PANEL + ' (copy)') + .should('exist'); + }); - cy.get('.react-resizable-handle') - .eq(0) - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: 2000, clientY: 800 }) - .trigger('mouseup', { force: true }); + it('Rename the open panel', () => { + cy.get('button[data-test-subj="panelActionContextMenu"]').click(); - cy.get('button[data-test-subj="savePanelButton"]').click(); - cy.get('div.react-grid-layout>div').eq(0).invoke('height').should('match', new RegExp('470')); - }); + cy.get('button[data-test-subj="renamePanelContextMenuItem"]').click(); - it('Delete a visualization', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[1], - PPL_VISUALIZATIONS[1], - PPL_VISUALIZATION_CONFIGS[1] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); + cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`) + .focus() + .clear({ force: true }) + .focus() + .type('Renamed Panel', { + delay: 200, }); + cy.get('button[data-test-subj="runModalButton"]').click(); + cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist'); + }); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[1]) - .should('exist'); - cy.get('button[data-test-subj="editPanelButton"]').click(); - cy.get('.visualization-action-button > .euiIcon').eq(0).trigger('mouseover').click(); - cy.get('button[data-test-subj="savePanelButton"]').click(); - cy.get('[data-test-subj="addFirstVisualizationText"]').should('exist'); + it('Change date filter of the panel', () => { + moveToTestPanel(); + cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({ + force: true, }); + cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click(); + cy.get('button[data-test-subj="superDatePickerShowDatesButton"]') + .contains('This year') + .should('exist'); + }); - it('Duplicate a visualization', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[0], - PPL_VISUALIZATIONS[0], - PPL_VISUALIZATION_CONFIGS[0] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - }); + it('Add existing visualization #1', () => { + cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[0]) - .should('exist'); - cy.get('button[aria-label="actionMenuButton"]').trigger('mouseover').click(); - cy.get('button[data-test-subj="duplicateVizContextMenuItem"]').click(); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); - cy.get('h5[data-test-subj="visualizationHeader"]') - .eq(0) - .contains(PPL_VISUALIZATIONS_NAMES[0]) - .should('exist'); - cy.get('h5[data-test-subj="visualizationHeader"]') - .eq(1) - .contains(PPL_VISUALIZATIONS_NAMES[0]) - .should('exist'); - }); + cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]); + cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('.plot-container').should('exist'); + cy.get('button[data-test-subj="addFlyoutButton"]').click(); - it('Replace a visualization', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[1], - PPL_VISUALIZATIONS[1], - PPL_VISUALIZATION_CONFIGS[1] - ).as('vis1'); - - createVisualization( - PPL_VISUALIZATIONS_NAMES[2], - PPL_VISUALIZATIONS[2], - PPL_VISUALIZATION_CONFIGS[2] - ).as('vis2'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click({ force: true }); - }); - - cy.get('button[aria-label="actionMenuButton"]').eq(0).click(); - cy.get('button[data-test-subj="replaceVizContextMenuItem"]').click(); - cy.get('select').select(PPL_VISUALIZATIONS_NAMES[2]); - cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); - cy.get('.plot-container').should('exist'); - cy.get('button[data-test-subj="addFlyoutButton"]').click({ force: true }); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[2]) - .should('exist'); - }); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + }); - it('Add new visualization to panel', () => { - cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); - cy.get('button[data-test-subj="createNewVizContextMenuItem"]').click(); + it('Add existing visualization #2', () => { + cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); - cy.url().should('match', new RegExp('(.*)#/explorer')); - cy.get('a[data-test-subj="eventExplorer__addNewTab"]').click({ force: true }); - cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0]); - cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click({ force: true }); + cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click(); - cy.get('button[id="main-content-vis"]') - .contains('Visualizations') - .trigger('mouseover') - .click(); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') - .trigger('mouseover') - .click(); - - cy.then(function () { - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(this.thePanel.attributes.title); - cy.get(`input[value="${this.thePanel.attributes.title}"]`).trigger('mouseover').click(); - }); + cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]); + cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('.plot-container').should('exist'); + cy.get('button[data-test-subj="addFlyoutButton"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveName"]') - .focus() - .type(PPL_VISUALIZATIONS_NAMES[2]); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - - cy.then(function () { - moveToThePanel(this.thePanel.id); - }); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + }); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[2]) - .should('exist'); - }); + it('Add ppl filter to panel', () => { + cy.get('[data-test-subj="searchAutocompleteTextArea"]') + .trigger('mouseover') + .click() + .wait(3000) + .focus() + .type(PPL_FILTER, { + delay: 500, + }); + + cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click(); + cy.wait(delay * 3); + cy.get('.xtick').should('contain', 'OpenSearch-Air'); + cy.get('.xtick').should('contain', 'Munich Airport'); + cy.get('.xtick').contains('Zurich Airport').should('not.exist'); + cy.get('.xtick').contains('BeatsWest').should('not.exist'); + cy.get('.xtick').contains('Logstash Airways').should('not.exist'); + cy.get('.xtick').contains('OpenSearch Dashboards Airlines').should('not.exist'); + }); - it('Check visualization edit button', () => { - createVisualization( - PPL_VISUALIZATIONS_NAMES[0], - PPL_VISUALIZATIONS[0], - PPL_VISUALIZATION_CONFIGS[0] - ).as('vis1'); - - cy.then(function () { - addVisualizationsToPanel(this.thePanel, [this.vis1.id]); - moveToThePanel(this.thePanel.id); - cy.get('[data-test-subj="breadcrumb"]').click({ force: true }); - cy.get('input[data-test-subj="operationalPanelSearchBar"]').focus().type(this.thePanel.attributes.title); - cy.get('a.euiLink').contains(this.thePanel.attributes.title).click(); - }); + it('Drag and drop a visualization', () => { + cy.get('button[data-test-subj="editPanelButton"]').click(); + + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .trigger('mousedown', { which: 1 }) + .trigger('mousemove', { clientX: 1100, clientY: 0 }) + .trigger('mouseup', { force: true }); + + cy.get('button[data-test-subj="savePanelButton"]').click(); + cy.wait(delay * 3); + cy.get('div.react-grid-layout>div') + .eq(1) + .invoke('attr', 'style') + .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)')); + }); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(PPL_VISUALIZATIONS_NAMES[0]) - .should('exist'); - cy.get('button[aria-label="actionMenuButton"]').eq(0).trigger('mouseover').click(); - cy.get('button[data-test-subj="editVizContextMenuItem"]').click(); - cy.url().should('match', new RegExp('(.*)#/explorer')); + it('Resize a visualization', () => { + cy.get('button[data-test-subj="editPanelButton"]').click(); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]') - .trigger('mouseover') - .click(); - cy.get('[data-test-subj="eventExplorer__querySaveName"]') - .clear({ force: true }) - .type(NEW_VISUALIZATION_NAME, { force: true }); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - - cy.then(function () { - moveToThePanel(this.thePanel.id); + cy.get('.react-resizable-handle') + .eq(1) + .trigger('mousedown', { which: 1 }) + .trigger('mousemove', { clientX: 2000, clientY: 800 }) + .trigger('mouseup', { force: true }); + + cy.get('button[data-test-subj="savePanelButton"]').click(); + cy.wait(delay * 3); + cy.get('div.react-grid-layout>div').eq(1).invoke('height').should('match', new RegExp('470')); + }); + + it('Delete a visualization', () => { + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .should('exist'); + cy.get('button[data-test-subj="editPanelButton"]').click(); + + cy.get('.visualization-action-button > .euiIcon').eq(1).trigger('mouseover').click(); + + cy.get('button[data-test-subj="savePanelButton"]').click(); + cy.wait(delay * 3); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .should('not.exist'); + }); + + it('Duplicate a visualization', () => { + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + cy.get('button[aria-label="actionMenuButton"]').trigger('mouseover').click(); + cy.get('button[data-test-subj="duplicateVizContextMenuItem"]').click(); + cy.wait(delay * 2); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + + cy.get('h5[data-test-subj="visualizationHeader"]') + .eq(0) + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .eq(1) + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + }); + + it('Replace a visualization', () => { + cy.get('button[aria-label="actionMenuButton"]').eq(1).click(); + cy.get('button[data-test-subj="replaceVizContextMenuItem"]').click(); + cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]); + cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click(); + cy.wait(delay * 3); + cy.get('.plot-container').should('exist'); + cy.get('button[data-test-subj="addFlyoutButton"]').click(); + + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + cy.wait(delay); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .should('exist'); + }); + + it('add new visualization to panel', () => { + cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click(); + cy.get('button[data-test-subj="createNewVizContextMenuItem"]').click(); + cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer')); + cy.get('a[data-test-subj="eventExplorer__addNewTab"]').click(); + cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[2], { + delay: 50, + }); + cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click(); + + suppressResizeObserverIssue(); + cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click(); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TEST_PANEL, { + delay: 50, + }); + cy.wait(1000); + cy.get(`input[value="${TEST_PANEL}"]`).trigger('mouseover').click(); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .focus() + .type(PPL_VISUALIZATIONS_NAMES[2], { + delay: 50, }); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); + + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + moveToTestPanel(); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[2]) + .should('exist'); + }); - cy.get('h5[data-test-subj="visualizationHeader"]') - .contains(NEW_VISUALIZATION_NAME) - .should('exist'); + it('Check visualization edit button', () => { + moveToTestPanel(); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[0]) + .should('exist'); + cy.get('button[aria-label="actionMenuButton"]').eq(0).trigger('mouseover').click(); + suppressResizeObserverIssue(); + cy.get('button[data-test-subj="editVizContextMenuItem"]').click(); + cy.wait(delay * 3); + cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer')); + cy.wait(delay); + + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click(); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .clear({ force: true }) + .type(NEW_VISUALIZATION_NAME, { + delay: 200, + }); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click(); + + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + moveToTestPanel(); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(NEW_VISUALIZATION_NAME) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[1]) + .should('exist'); + cy.get('h5[data-test-subj="visualizationHeader"]') + .contains(PPL_VISUALIZATIONS_NAMES[2]) + .should('exist'); + }); +}); + +describe('Clean up all test data', () => { + it('Delete visualizations from event analytics', () => { + moveToEventsHome(); + cy.get('[data-test-subj="tablePaginationPopoverButton"]').trigger('mouseover').click(); + cy.get('button[data-test-subj="tablePagination-50-rows"]').click(); + cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click(); + cy.get('button[data-test-subj="eventHomeAction"]').click(); + + cy.get('button[data-test-subj="eventHomeAction__delete"]').click(); + cy.get('button.euiButton--danger').should('be.disabled'); + cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { + delay: 50, }); + cy.get('button.euiButton--danger').should('not.be.disabled'); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); + cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist'); + }); + + it('Deletes test panel', () => { + moveToPanelHome(); + cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click(); + openActionsDropdown(); + clickDeleteAction(); + cy.get('button.euiButton--danger').should('be.disabled'); + cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { + delay: 50, + }); + cy.get('button.euiButton--danger').should('not.be.disabled'); + cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); + + cy.get('.euiTextAlign').contains('No Operational Panels').should('exist'); }); }); const moveToOsdDashboards = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/dashboards#/`); + cy.wait(delay * 3); }; const moveToEventsHome = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`); + cy.wait(6000); }; const moveToPanelHome = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/`, { timeout: 3000, }); + cy.wait(delay * 3); }; const testPanelTableCell = (name = TEST_PANEL) => cy.get('.euiTableCellContent').contains(name); -const moveToThePanel = (panelId) => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/${panelId}`, { - timeout: 3000, - }); +const moveToTestPanel = () => { + moveToPanelHome(); + testPanelTableCell().trigger('mouseover').click(); + cy.wait(delay * 3); + cy.get('h1').contains(TEST_PANEL).should('exist'); }; +const TEST_PANEL_RX = new RegExp(TEST_PANEL + '.*'); + const eraseLegacyPanels = () => { cy.request({ method: 'GET', @@ -652,7 +614,7 @@ const eraseLegacyPanels = () => { }); }; -const eraseSavedObjectPanels = () => { +const eraseSavedObjectPaenls = () => { return cy .request({ method: 'get', @@ -678,44 +640,17 @@ const eraseSavedObjectPanels = () => { }); }; -const eraseSavedVisualizations = () => { - return cy - .request({ - method: 'get', - failOnStatusCode: false, - url: 'api/saved_objects/_find?type=observability-visualization', - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - }) - .then((response) => { - response.body.saved_objects.map((visualizations) => { - cy.request({ - method: 'DELETE', - failOnStatusCode: false, - url: `api/saved_objects/observability-visualization/${visualizations.id}`, - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - }); - }); - }); -}; - const eraseTestPanels = () => { eraseLegacyPanels(); - eraseSavedObjectPanels(); + eraseSavedObjectPaenls(); }; - const uuidRx = /[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/; const clickCreatePanelButton = () => cy.get('a[data-test-subj="customPanels__createNewPanels"]').click(); const createSavedObjectPanel = (newName = TEST_PANEL) => { - return cy + const result = cy .request({ method: 'POST', failOnStatusCode: false, @@ -743,82 +678,7 @@ const createSavedObjectPanel = (newName = TEST_PANEL) => { }, }, }) - .then((response) => response.body); -}; - -const addVisualizationsToPanel = (panel, additionalVisualizationIds: string[]) => { - console.log('addVisualizationsToPanel', additionalVisualizationIds); - const additionalVisualizations = additionalVisualizationIds.map((id, idx) => { - return { - savedVisualizationId: `observability-visualization:${id}`, - w: 6, - x: 0, - h: 4, - y: idx, - id: `panel_viz_${id}`, - }; - }); - - panel.attributes.visualizations = [ - ...panel.attributes.visualizations, - ...additionalVisualizations, - ]; - console.log(panel.attributes); - cy.request({ - method: 'PUT', - failOnStatusCode: false, - url: `api/saved_objects/observability-panel/${panel.id}`, - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - body: { - attributes: panel.attributes, - }, - }); -}; - -const createVisualization = (newName, query, vizConfig) => { - return cy - .request({ - method: 'POST', - failOnStatusCode: false, - url: 'api/saved_objects/observability-visualization', - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - body: { - attributes: { - title: newName, - description: '', - version: 1, - createdTimeMs: new Date().getTime(), - savedVisualization: { - query: query, - selected_date_range: { - start: 'now-2y', - end: 'now', - text: '', - }, - selected_timestamp: { - name: 'timestamp', - type: 'timestamp', - }, - selected_fields: { - tokens: [], - text: '', - }, - name: newName, - description: '', - type: 'bar', - user_configs: vizConfig, - sub_type: 'visualization', - }, - }, - }, - }) - .then((response) => response.body); + .then((response) => console.log(response)); }; const createLegacyPanel = (newName = TEST_PANEL) => { @@ -842,6 +702,10 @@ const expectLegacyId = (anchorElem) => { anchorElem.invoke('attr', 'href').should('not.match', uuidRx); }; +const clickDeleteAction = () => { + cy.get('button[data-test-subj="deleteContextMenuItem"]').click(); +}; + const openActionsDropdown = () => { cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click(); }; diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js index be31f2183..656ac7e98 100644 --- a/.cypress/integration/4_trace_analytics_dashboard.spec.js +++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js @@ -6,9 +6,6 @@ /// import { testDataSet, delay, setTimeFilter, jaegerTestDataSet } from '../utils/constants'; -import { suppressResizeObserverIssue } from '../utils/constants'; - -suppressResizeObserverIssue();//needs to be in file once describe('Dump test data', () => { it('Indexes test data', () => { @@ -91,7 +88,6 @@ describe('Testing dashboard table', () => { }, }); setTimeFilter(); - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); }); it('Renders the dashboard table', () => { @@ -101,6 +97,15 @@ describe('Testing dashboard table', () => { cy.contains('7.14%').should('exist'); }); + it('Has working breadcrumbs', () => { + cy.get('.euiBreadcrumb').contains('Dashboard').click(); + cy.get('.euiTitle').contains('Dashboard').should('exist'); + cy.get('.euiBreadcrumb').contains('Trace analytics').click(); + cy.get('.euiTitle').contains('Dashboard').should('exist'); + cy.get('.euiBreadcrumb').contains('Observability').click(); + cy.get('.euiTitle').contains('Logs').should('exist'); + }); + it('Adds the percentile filters', () => { cy.contains(' >= 95 percentile').click({ force: true }); cy.contains(' >= 95 percentile').click({ force: true }); @@ -126,6 +131,7 @@ describe('Testing dashboard table', () => { it('Redirects to traces table with filter', () => { cy.get('.euiLink').contains('13').click(); + cy.get('h2.euiTitle').contains('Traces').should('exist'); cy.contains(' (13)').should('exist'); cy.contains('client_create_order').should('exist'); @@ -143,20 +149,20 @@ describe('Testing plots', () => { }, }); setTimeFilter(); - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); }); it('Renders service map', () => { // plotly scale texts are in attribute "data-unformatted" - cy.get('text.ytitle[data-unformatted="Average duration (ms)"]').should('exist'); + cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist'); cy.get('text[data-unformatted="200"]').should('exist'); cy.get('.vis-network').should('exist'); - cy.get('.euiButton__text[title="Errors"]').click(); - cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist'); + cy.get('.euiButton__text[title="Error rate"]').click(); + cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist'); + cy.get('text[data-unformatted="10%"]').should('exist'); - cy.get('.euiButton__text[title="Request Rate"]').click(); - cy.get('text.ytitle[data-unformatted="Request rate (spans)"]').should('exist'); + cy.get('.euiButton__text[title="Throughput"]').click(); + cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist'); cy.get('text[data-unformatted="50"]').should('exist'); cy.get('input[type="search"]').eq(1).focus().type('payment{enter}'); @@ -178,7 +184,6 @@ describe('Latency by trace group table', () =>{ }, }); setTimeFilter(); - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); }); it('Verify columns in Latency by trace group table along with pagination functionality', () => { @@ -189,9 +194,9 @@ describe('Latency by trace group table', () =>{ cy.get('[data-test-subj="tableHeaderCell_24_hour_latency_trend_3"]').should('exist'); cy.get('[data-test-subj="tableHeaderCell_dashboard_error_rate_4"]').should('exist'); cy.get('[data-test-subj="tableHeaderCell_dashboard_traces_5"]').should('exist'); - cy.get('[data-test-subj="tablePaginationPopoverButton"]').eq(1).click(); + cy.get('[data-test-subj="tablePaginationPopoverButton"]').click(); cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click(); - cy.get('[data-test-subj="pagination-button-next"]').eq(1).should('exist').click(); + cy.get('[data-test-subj="pagination-button-next"]').should('exist').click(); cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').contains('mysql').should('exist'); }); @@ -220,7 +225,7 @@ describe('Latency by trace group table', () =>{ cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); cy.wait(delay);//Fails without cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist'); - cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).click(); + cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').click(); cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click(); cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click(); cy.get('.euiContextMenuPanelTitle').contains('Edit filter').should('exist'); @@ -345,7 +350,6 @@ describe('Testing switch mode to jaeger', () => { setTimeFilter(); cy.get("[data-test-subj='indexPattern-switch-link']").click(); cy.get("[data-test-subj='jaeger-mode']").click(); - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); }); it('Verifies errors mode columns and data', () => { @@ -354,14 +358,15 @@ describe('Testing switch mode to jaeger', () => { cy.contains('100%').should('exist'); cy.contains('7').should('exist'); cy.contains('Service and Operation Name').should('exist'); - cy.contains('Average duration (ms)').should('exist'); + cy.contains('Average latency (ms)').should('exist'); cy.contains('Error rate').should('exist'); cy.contains('Traces').should('exist'); }); it('Verifies traces links to traces page', () => { - cy.get('[data-test-subj="dashboard-table-traces-button"]').contains('7').click(); + cy.get('.euiLink').contains('7').click(); + cy.get('h2.euiTitle').contains('Traces').should('exist'); cy.contains(' (7)').should('exist'); cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: redis') cy.get("[data-test-subj='filterBadge']").eq(1).contains('operationName: GetDriver'); @@ -374,7 +379,7 @@ describe('Testing switch mode to jaeger', () => { cy.contains('0%').should('exist'); cy.contains('8').should('exist'); cy.contains('Service and Operation Name').should('exist'); - cy.contains('Average duration (ms)').should('exist'); + cy.contains('Average latency (ms)').should('exist'); cy.contains('Error rate').should('exist'); cy.contains('Traces').should('exist'); }); diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js index f09b92426..7e0296661 100644 --- a/.cypress/integration/5_trace_analytics_services.spec.js +++ b/.cypress/integration/5_trace_analytics_services.spec.js @@ -5,10 +5,7 @@ /// -import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row, AUTH_SERVICE_SPAN_ID } from '../utils/constants'; -import { suppressResizeObserverIssue } from '../utils/constants'; - -suppressResizeObserverIssue();//needs to be in file once +import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants'; describe('Testing services table empty state', () => { beforeEach(() => { @@ -52,9 +49,9 @@ describe('Testing services table', () => { it('Verify columns in Services table', () => { cy.get('.euiFlexItem.euiFlexItem--flexGrow10 .panel-title').contains('Services').should('exist'); cy.get('.euiTableCellContent__text[title="Name"]').should('exist'); - cy.get('.euiTableCellContent__text[title="Average duration (ms)"]').should('exist'); + cy.get('.euiTableCellContent__text[title="Average latency (ms)"]').should('exist'); cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist'); - cy.get('.euiTableCellContent__text[title="Request rate"]').should('exist'); + cy.get('.euiTableCellContent__text[title="Throughput"]').should('exist'); cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist'); cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist'); cy.get('.euiTableCellContent__text[title="Traces"]').should('exist'); @@ -113,7 +110,9 @@ describe('Testing service view', () => { cy.get('.euiBreadcrumb').contains(SERVICE_NAME).click(); cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist'); cy.get('.euiBreadcrumb').contains('Services').click(); + cy.get('.euiTitle').contains('Services').should('exist'); cy.get('.euiBreadcrumb').contains('Trace analytics').click(); + cy.get('.euiTitle').contains('Dashboard').should('exist'); cy.get('.euiBreadcrumb').contains('Observability').click(); cy.get('.euiTitle').contains('Logs').should('exist'); }); @@ -144,10 +143,10 @@ describe('Testing Service map', () => { it('Render Service map', () => { cy.get('.euiText.euiText--medium .panel-title').contains('Service map'); cy.get('[data-test-subj="latency"]').should('exist'); - cy.get('.ytitle').contains('Average duration (ms)'); - cy.get('[data-text = "Errors"]').click(); + cy.get('.ytitle').contains('Latency (ms)'); + cy.get('[data-text = "Error rate"]').click(); cy.contains('60%'); - cy.get('[data-text = "Duration"]').click(); + cy.get('[data-text = "Throughput"]').click(); cy.contains('100'); cy.get('.euiText.euiText--medium').contains('Focus on').should('exist'); cy.get('[placeholder="Service name"]').focus().type('database{enter}'); @@ -239,7 +238,7 @@ describe('Testing traces Spans table and verify columns functionality', () => { it('Renders the spans table and click on first span to verify details', () => { cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click(); verify_traces_spans_data_grid_cols_exists(); - cy.contains(AUTH_SERVICE_SPAN_ID).click(); + cy.get('.euiLink--primary').eq(4).click(); cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist'); cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist'); cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist'); @@ -285,15 +284,16 @@ describe('Testing switch mode to jaeger', () => { cy.contains('310.29').should('exist'); cy.contains('0%').should('exist'); cy.contains('Name').should('exist'); - cy.contains('Average duration (ms)').should('exist'); + cy.contains('Average latency (ms)').should('exist'); cy.contains('Error rate').should('exist'); - cy.contains('Request rate').should('exist'); + cy.contains('Throughput').should('exist'); cy.contains('Traces').should('exist'); }); it('Verifies traces links to traces page with filter applied', () => { cy.get('.euiTableRow').should('have.length.lessThan', 7);//Replaces Wait cy.get('.euiLink').contains('7').click(); + cy.get('h2.euiTitle').contains('Traces').should('exist'); cy.contains(' (7)').should('exist'); cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer') }) diff --git a/.cypress/integration/6_trace_analytics_traces.spec.js b/.cypress/integration/6_trace_analytics_traces.spec.js index 336f5b6ff..c3ca6f339 100644 --- a/.cypress/integration/6_trace_analytics_traces.spec.js +++ b/.cypress/integration/6_trace_analytics_traces.spec.js @@ -87,7 +87,9 @@ describe('Testing trace view', () => { cy.get(`.euiBreadcrumb[href="#/traces/${TRACE_ID}"]`).click(); cy.get('h2.euiTitle').contains(TRACE_ID).should('exist'); cy.get('.euiBreadcrumb[href="#/traces"]').click(); + cy.get('.euiTitle').contains('Traces').should('exist'); cy.get('.euiBreadcrumb[href="#/"]').click(); + cy.get('.euiTitle').contains('Dashboard').should('exist'); cy.get('.euiBreadcrumb[href="observability-logs#/"]').click(); cy.get('.euiTitle').contains('Logs').should('exist'); }); @@ -123,7 +125,7 @@ describe('Testing traces table', () => { it('Renders the traces table and verify Table Column, Pagination and Rows Data ', () => { cy.get('.euiTableCellContent__text').contains('Trace ID').should('exist'); cy.get('.euiTableCellContent__text').contains('Trace group').should('exist'); - cy.get('.euiTableCellContent__text').contains('Duration (ms)').should('exist'); + cy.get('.euiTableCellContent__text').contains('Latency (ms)').should('exist'); cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist'); cy.get('.euiTableCellContent__text').contains('Errors').should('exist'); cy.get('.euiTableCellContent__text').contains('Last updated').should('exist'); diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js index 1e50d76aa..e3a41a49b 100644 --- a/.cypress/integration/7_app_analytics.spec.js +++ b/.cypress/integration/7_app_analytics.spec.js @@ -4,7 +4,6 @@ */ /// -import { suppressResizeObserverIssue } from '../utils/constants'; import { delay, @@ -34,14 +33,13 @@ import { TYPING_DELAY, timeoutDelay } from '../utils/app_constants'; - -suppressResizeObserverIssue();//needs to be in file once +import { suppressResizeObserverIssue } from '../utils/constants'; describe('Creating application', () => { beforeEach(() => { moveToCreatePage(); }); - + it('Suggests correct autocompletion', () => { cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); @@ -87,7 +85,7 @@ describe('Creating application', () => { cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); cy.get('[data-test-subj="createAndSetButton"]').should('be.disabled'); expectMessageOnHover('createAndSetButton', 'Log source is required to set availability.'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(' ' + baseQuery); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http'); cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click'); @@ -95,7 +93,7 @@ describe('Creating application', () => { cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); cy.get('[data-test-subj="createButton"]').click(); - cy.get('.euiTableRow').should('have.length.lessThan', 2);//Replaces Wait + cy.wait(delay * 3); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[data-test-subj="addFirstVisualizationText"]').should('exist'); @@ -114,12 +112,10 @@ describe('Creating application', () => { cy .get('[data-test-subj="searchAutocompleteTextArea"]') .focus() - .type(' ' + baseQuery); + .type(baseQuery, {delay: TYPING_DELAY}); cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').scrollIntoView(); - cy.wait(delay*3); cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click(); - cy.wait(delay*3);//Dropdown menu needs to work properly cy.get('.euiFilterSelectItem').contains(service_one).click({ force: true }); cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1'); cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click(); @@ -128,6 +124,7 @@ describe('Creating application', () => { cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click'); cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2'); cy.reload(); + cy.wait(delay); cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', nameOne); cy.get('[data-test-subj="descriptionFormRow"]').find('.euiFieldText').should('contain.value', description); cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); @@ -139,7 +136,7 @@ describe('Creating application', () => { it('Shows clear modals before clearing', () => { cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="clearLogSourceButton"]').should('be.disabled'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(' ' + baseQuery); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('[data-test-subj="clearLogSourceButton"]').click(); cy.get('.euiButton--danger').contains('Clear').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', ''); @@ -162,31 +159,25 @@ describe('Creating application', () => { }); it('Saves time range for each application', () => { - cy.wait(delay);//Fail to load without cy.get('[data-test-subj="nameFormRow"]').type(nameTwo); cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(' ' +baseQuery); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY}); cy.get('[data-test-subj="createButton"]').should('not.be.disabled'); cy.get('[data-test-subj="createButton"]').click(); - cy.get('.euiTableRow').should('have.length.lessThan', 1); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); changeTimeTo24('weeks'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); - cy.get('.euiBreadcrumb[href="#/"]').click(); - cy.get('.euiTableRow').should('have.length.greaterThan', 1); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); + cy.wait(delay); cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click(); - cy.wait(delay*3); - cy.get('.euiTableRow').should('have.length.lessThan', 1); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); changeTimeTo24('months'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); - cy.get('.euiBreadcrumb[href="#/"]').click(); - cy.get('.euiTableRow').should('have.length.greaterThan', 1); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get(`[data-test-subj="${nameTwo}ApplicationLink"]`).click(); - cy.get('.euiTableRow').should('have.length.lessThan', 1); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-applications#/`); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click(); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); @@ -199,20 +190,18 @@ describe('Setting availability', () => { cy.get('[data-test-subj="nameFormRow"]').type(nameThree); cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus(); - cy.focused().type(' source = ',); + cy.focused().type('source = ', { delay: TYPING_DELAY }); cy.focused().type('{enter}'); - cy.wait(delay);//needed for page to create correctly - cy.get('[data-test-subj="createAndSetButton"]').click({ force: true }); - cy.get('.euiTableRow').should('have.length.lessThan', 1); + cy.get('[data-test-subj="createAndSetButton"]').click(); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree); - cy.get('.euiBreadcrumb[href="#/"]').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get('[data-test-subj="setAvailabilityHomePageLink"]').first().click(); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree); cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay }); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', availability_default); cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('.euiTab-isSelected[id="availability-panel"]').should('exist'); - cy.get('.euiBreadcrumb[href="#/"]').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get(`[data-test-subj="${nameThree}ApplicationLink"]`).click(); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree); cy.get('[data-test-subj="app-analytics-configTab"]').click(); @@ -230,13 +219,12 @@ describe('Viewing application', () => { }); it('Has working breadcrumbs', () => { - cy.wait(delay);//List not loading without cy.get('.euiBreadcrumb').contains(nameOne).click(); cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne); - cy.get('.euiBreadcrumb[href="#/"]').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications'); - cy.get('.euiBreadcrumb[href="observability-logs#/"]').click(); - cy.get('[data-test-subj="eventHomePageTitle"]').should('contain', 'Logs'); + cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click(); + cy.get('[data-test-subj="eventHomePageTitle"]').should('contain', 'Event analytics'); }); it('Shares time range among tabs', () => { @@ -245,6 +233,7 @@ describe('Viewing application', () => { cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('[data-test-subj="app-analytics-traceTab"]').click(); + suppressResizeObserverIssue(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('[data-test-subj="app-analytics-logTab"]').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); @@ -253,61 +242,66 @@ describe('Viewing application', () => { }); it('Shows latency variance in dashboards table', () => { - changeTimeTo24('years'); - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); + changeTimeTo24('months'); cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => { cy.get('.plot-container').should('have.length.at.least', 1); }) }); it('Adds filter when Trace group name is clicked', () => { - cy.wait(delay);//List not loading without - cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click(); + cy.get('[data-test-subj="app-analytics-overviewTab"]').click(); cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click(); + cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay }); cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist'); - cy.get('[data-test-subj="filterBadge"]').eq(1).click(); + cy.get('[data-test-subj="filterBadge"]').click(); cy.get('[data-test-subj="deleteFilterIcon"]').click(); cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist'); }); it('Opens service detail flyout when Service Name is clicked', () => { cy.get('[data-test-subj="app-analytics-serviceTab"]').click(); + cy.wait(delay); cy.get('.euiLink').contains('authentication').click(); + suppressResizeObserverIssue(); cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible'); cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => { cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3'); - cy.get('[data-text="Errors"]').click(); + cy.get('[data-text="Error rate"]').click(); cy.get('.ytitle').contains('Error rate').should('exist'); }); cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click(); cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible'); cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('[data-test-subj="serviceDetailFlyout"]').should('not.exist'); - cy.get('[data-test-subj="spanDetailFlyout"]').should('not.exist'); + cy.get('[data-test-subj="serviceDetailFlyout"]').should('not.be.visible'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens trace detail flyout when Trace ID is clicked', () => { cy.get('[data-test-subj="app-analytics-traceTab"]').click(); + suppressResizeObserverIssue(); + cy.wait(delay); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible'); cy.get('[data-test-subj="traceDetailFlyout"]').within(($flyout) => { cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '224.99'); }); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('[data-test-subj="traceDetailFlyout"]').should('not.exist'); + cy.wait(delay); + cy.get('[data-test-subj="traceDetailFlyout"]').should('not.be.visible'); cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click(); cy.get('[data-text="Span list"]').click(); + cy.wait(delay); cy.get('[data-test-subj="dataGridRowCell"] button').contains('d67c5bb617ba9203').click(); cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); cy.get('[data-test-subj="euiFlyoutCloseButton"]').click(); - cy.get('[data-test-subj="spanDetailFlyout"]').should('not.exist'); + cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible'); }); it('Opens span detail flyout when Span ID is clicked', () => { cy.get('[data-test-subj="app-analytics-traceTab"]').click(); + suppressResizeObserverIssue(); cy.wait(delay); - cy.get('input[type="search"]').focus().type(`5ff3516909562c60`); cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click(); cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible'); cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => { @@ -332,14 +326,18 @@ describe('Viewing application', () => { it('Saves visualization #1 to panel', () => { cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[data-test-subj="addVisualizationButton"]').first().click(); + cy.wait(delay); cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').click(); cy.get('.aa-List').find('.aa-Item').should('have.length', 11); cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_one, {delay: TYPING_DELAY}); changeTimeTo24('months'); + cy.wait(delay * 2); cy.get('[data-test-subj="main-content-visTab"]').click(); + suppressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName); + cy.wait(delay); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay); cy.get('[data-test-subj="app-analytics-panelTab"]').click(); @@ -353,14 +351,12 @@ describe('Viewing application', () => { cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[aria-label="actionMenuButton"]').click(); cy.get('[data-test-subj="editVizContextMenuItem"]').click(); + suppressResizeObserverIssue(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('.euiTab[id="availability-panel"]').click(); - - cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true }); + cy.get('[title="Bar"]').click(); + cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); - cy.get('[data-test-subj="addAvailabilityButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #54B399 as the color"]').click(); @@ -380,7 +376,7 @@ describe('Viewing application', () => { cy.get('[id="explorerPlotComponent"]').should('exist'); cy.get('[class="lines"]').should('exist'); cy.get('.textpoint').contains('Available').should('exist'); - cy.get('.euiBreadcrumb[href="#/"]').click(); + cy.get('.euiBreadcrumb[href="#/application_analytics"]').click(); cy.get('[data-test-subj="AvailableAvailabilityBadge"]').should('contain', 'Available'); cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); }); @@ -393,10 +389,12 @@ describe('Viewing application', () => { cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); cy.wait(delay); cy.get('[data-test-subj="main-content-visTab"]').click(); + suppressResizeObserverIssue(); cy.get('.euiTab[id="availability-panel"]').click(); + cy.get('[title="Bar"]').click(); + cy.focused().type('{downArrow}'); + cy.focused().type('{enter}'); cy.wait(delay); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true }); cy.get('[data-test-subj="addAvailabilityButton"]').click(); cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); cy.get('[aria-label="Select #9170B8 as the color"]').click(); @@ -485,7 +483,7 @@ describe('Separate from other plugins', () => { it('Hides application visualizations in Operational Panels', () => { cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); cy.get('[data-test-subj="operationalPanelsActionsButton"]', { timeout: timeoutDelay }).click(); cy.get('[data-test-subj="addSampleContextMenuItem"]', { timeout: timeoutDelay }).click(); @@ -501,7 +499,7 @@ describe('Separate from other plugins', () => { it('Hides application panels in Operational Panels', () => { cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` ); cy.get('[data-test-subj="operationalPanelSearchBar"]', { timeout: timeoutDelay }).type(`${nameOne}'s Panel`, {delay: TYPING_DELAY}); cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); @@ -544,7 +542,6 @@ describe('Editing application', () => { }); }); - describe('Application Analytics home page', () => { beforeEach(() => { moveToHomePage(); @@ -592,6 +589,7 @@ describe('Application Analytics home page', () => { cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click(); cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete'); cy.get('[data-test-subj="popoverModal__deleteButton"').click(); + cy.wait(delay); cy.get('.euiToast').contains(`Applications successfully deleted!`); cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist'); }); diff --git a/.cypress/integration/8_metrics_analytics.spec.js b/.cypress/integration/8_metrics_analytics.spec.js index 255a35434..511d65a66 100644 --- a/.cypress/integration/8_metrics_analytics.spec.js +++ b/.cypress/integration/8_metrics_analytics.spec.js @@ -13,304 +13,248 @@ import { TESTING_PANEL, } from '../utils/metrics_constants'; import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants'; -import { landOnPanels, clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; +import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers'; +import { landOnPanels } from '../utils/event_analytics/constants'; -describe('Metrics Analytics', () => { +const moveToMetricsHome = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-metrics#/`); + cy.wait(delay * 3); +}; + +const moveToEventsExplorer = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer`); + cy.wait(delay * 3); +}; + +const moveToEventsHome = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`); + cy.wait(delay * 3); +}; + +describe('Creating custom metrics', () => { beforeEach(() => { - eraseSavedObjectMetrics(); + moveToEventsExplorer(); + clearQuerySearchBoxText('searchAutocompleteTextArea'); + suppressResizeObserverIssue(); }); - describe('Creating custom metrics', () => { - beforeEach(() => { - moveToEventsExplorer(); - clearQuerySearchBoxText('searchAutocompleteTextArea'); - suppressResizeObserverIssue(); + it('Create custom metric in event analytics and check it in events home', () => { + cy.get('[id^=autocomplete-textarea]').focus().type(PPL_METRICS[0], { + delay: 50, }); + cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); + cy.wait(delay); + suppressResizeObserverIssue(); + cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('[data-test-subj="comboBoxToggleListButton"]').click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').focus().type(VIS_TYPE_LINE, { force: true }); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click({ force: true }); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .focus() + .type(PPL_METRICS_NAMES[0], { force: true }); + cy.get('[data-test-subj="eventExplorer__metricSaveName"]').click({ force: true }); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]', { + timeout: COMMAND_TIMEOUT_LONG, + }).click(); + cy.wait(delay); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + moveToEventsHome(); + cy.get('[data-test-subj="eventHome__savedQueryTableName"]') + .first() + .contains(PPL_METRICS_NAMES[0]); + }); - it('Create custom metric in event analytics and check it in events home', () => { - createCustomMetric({ testMetricIndex: 0 }); - moveToEventsHome(); - cy.get('[data-test-subj="eventHome__savedQueryTableName"]') - .first() - .contains(PPL_METRICS_NAMES[metricIndex]); + it('Check for new metrics under recently created netrics', () => { + cy.get('[id^=autocomplete-textarea]').focus().type(PPL_METRICS[1], { + delay: 50, }); - }); + cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); + cy.wait(delay); + suppressResizeObserverIssue(); + cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('[data-test-subj="comboBoxInput"]').click(); + cy.get('.euiComboBoxOption__content').contains('Time series').click({ force: true }); - describe('Listing custom metrics', () => { - it('Check for new metrics under available metrics', () => { - createSavedObjectMetric({ testMetricIndex: 1 }); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click({ force: true }); + cy.get('[data-test-subj="eventExplorer__querySaveName"]') + .focus() + .type(PPL_METRICS_NAMES[1], { force: true }); + cy.get('[data-test-subj="eventExplorer__metricSaveName"]').click({ force: true }); + cy.wait(1000); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]', { + timeout: COMMAND_TIMEOUT_LONG, + }).click(); + cy.wait(delay); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); + moveToMetricsHome(); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[1]) + .should('exist'); + }); +}); - moveToMetricsHome(); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .should('exist'); - }); +describe('Search for metrics in search bar', () => { + beforeEach(() => { + moveToMetricsHome(); + suppressResizeObserverIssue(); }); - describe('Sidebar Actions', () => { - beforeEach(() => { - moveToMetricsHome(); - createSavedObjectMetric({ testMetricIndex: 0 }); - createSavedObjectMetric({ testMetricIndex: 1 }); - suppressResizeObserverIssue(); + it('Search for metrics in search bar from available metrics', () => { + cy.get('[data-test-subj="metricsSearch"]').type('metric', { + delay: 50, }); + cy.wait(delay); - describe('Search for metrics in search bar', () => { - it('Search for metrics in search bar from available metrics', () => { - cy.get('[data-test-subj="metricsSearch"]').type('metric', { wait: 50 }); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[0]) + .should('exist'); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[1]) + .should('exist'); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains('go_memstats_alloc_bytes') + .should('not.exist'); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains('go_threads') + .should('not.exist'); + }); +}); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .should('exist'); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .should('exist'); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains('go_memstats_alloc_bytes') - .should('not.exist'); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains('go_threads') - .should('not.exist'); - }); - }); +describe('Select and unselect metrics in sidebar', () => { + it('Select and unselect metrics in sidebar', () => { + moveToMetricsHome(); + suppressResizeObserverIssue(); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[0]) + .trigger('mouseover') + .click(); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[1]) + .trigger('mouseover') + .click(); + cy.wait(50); + cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') + .contains(PPL_METRICS_NAMES[0]) + .should('exist'); + cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') + .contains(PPL_METRICS_NAMES[1]) + .should('exist'); + cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') + .contains(PPL_METRICS_NAMES[0]) + .trigger('mouseover') + .click(); + cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') + .contains(PPL_METRICS_NAMES[1]) + .trigger('mouseover') + .click(); + cy.wait(50); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[0]) + .trigger('mouseover') + .should('exist'); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[1]) + .trigger('mouseover') + .should('exist'); + }); +}); - describe('Select and unselect metrics in sidebar', () => { - it('Select and unselect metrics in sidebar', () => { - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .trigger('mouseover') - .click(); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .trigger('mouseover') - .click(); - cy.wait(50); - cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .should('exist'); - cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .should('exist'); - cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .trigger('mouseover') - .click(); - cy.get('[data-test-subj="metricsListItems_selectedMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .trigger('mouseover') - .click(); - cy.wait(50); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .trigger('mouseover') - .should('exist'); - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .trigger('mouseover') - .should('exist'); - }); - }); +describe('Test Metric Visualizations', () => { + beforeEach(() => { + moveToMetricsHome(); + suppressResizeObserverIssue(); + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[0]) + .trigger('mouseover') + .click(); + }); - describe('Test Metric Visualizations', () => { - beforeEach(() => { - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[0]) - .trigger('mouseover') - .click(); - }); + it('Resize a Metric visualization in edit mode', () => { + cy.get('[data-test-subj="metrics__editView"]') + .contains('Edit view') + .trigger('mouseover') + .click(); + cy.wait(delay); + cy.get('.react-resizable-handle-se') + // .eq(1) + .trigger('mousedown', { which: 1 }) + .trigger('mousemove', { clientX: 2000, clientY: 800 }) + .trigger('mouseup', { force: true }); + cy.wait(delay); + cy.get('[data-test-subj="metrics__saveView"]').trigger('mouseover').click(); + cy.wait(delay * 3); + cy.get('div.react-grid-layout>div').invoke('height').should('match', new RegExp('630')); + cy.wait(delay); + }); - it.only('Resize a Metric visualization in edit mode', () => { - cy.get('[data-test-subj="metrics__editView"]') - .contains('Edit view') - .trigger('mouseover') - .click(); - cy.wait(delay); - cy.get('.react-resizable-handle-se') - // .eq(1) - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: 2000, clientY: 800 }) - .trigger('mouseup', { force: true }); - cy.wait(delay); - cy.get('[data-test-subj="metrics__saveView"]').trigger('mouseover').click(); + it('Drag and drop a Metric visualization in edit mode', () => { + cy.get('[data-test-subj="metricsListItems_recentlyCreated"]') + .contains(PPL_METRICS_NAMES[1]) + .trigger('mouseover') + .click(); + cy.get('[data-test-subj="metrics__editView"]') + .contains('Edit view') + .trigger('mouseover') + .click(); + cy.wait(delay); + cy.get('h5') + .contains(PPL_METRICS_NAMES[0]) + .trigger('mousedown', { which: 1, force: true }) + .trigger('mousemove', { clientX: 415, clientY: 500 }) + .trigger('mouseup', { force: true }); + cy.wait(delay); + cy.get('[data-test-subj="metrics__saveView"]') + .trigger('mouseover') + .click({ force: true }) + .then(() => { cy.wait(delay * 3); - cy.get('div.react-grid-layout>div').invoke('height').should('match', new RegExp('790')); - cy.wait(delay); - }); - - it('Drag and drop a Metric visualization in edit mode', () => { - cy.get('[data-test-subj="metricsListItems_availableMetrics"]') - .contains(PPL_METRICS_NAMES[1]) - .trigger('mouseover') - .click(); - cy.get('[data-test-subj="metrics__editView"]') - .contains('Edit view') - .trigger('mouseover') - .click(); - cy.wait(delay); - cy.get('h5') - .contains(PPL_METRICS_NAMES[0]) - .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', { clientX: 415, clientY: 500 }) - .trigger('mouseup', { force: true }); - cy.wait(delay); - cy.get('[data-test-subj="metrics__saveView"]') - .trigger('mouseover') - .click({ force: true }) - .then(() => { - cy.wait(delay * 3); - cy.get('div.react-grid-layout>div') - .eq(1) - .invoke('attr', 'style') - .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)')); - cy.wait(delay); - }); - }); - - it('Change date filter of the Metrics home page', () => { - cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({ - force: true, - }); - cy.get('.euiLink').contains('This year').trigger('mouseover').click(); - cy.wait(delay * 2); - cy.get('.euiSuperDatePicker__prettyFormat[data-test-subj="superDatePickerShowDatesButton"]') - .contains('This year') - .should('exist'); + cy.get('div.react-grid-layout>div') + .eq(1) + .invoke('attr', 'style') + .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)')); cy.wait(delay); }); + }); - it('Saves metrics to an existing panel', () => { - landOnPanels(); - cy.get('[data-test-subj="customPanels__createNewPanels"]').click(); - cy.get('input.euiFieldText').type(TESTING_PANEL); - cy.get('.euiButton__text', { timeout: COMMAND_TIMEOUT_LONG }) - .contains(/^Create$/) - .click(); - cy.wait(delay * 3); - moveToMetricsHome(); - cy.get('[data-test-subj="metrics__saveManagementPopover"]').trigger('mouseover').click(); - cy.get('[data-test-subj="comboBoxSearchInput"]') - .focus() - .type(TESTING_PANEL, { force: true }); - cy.get('[data-test-subj="metrics__SaveConfirm"]').click({ force: true }); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); - }); + it('Change date filter of the Metrics home page', () => { + cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({ + force: true, }); + cy.get('.euiLink').contains('This year').trigger('mouseover').click(); + cy.wait(delay * 2); + cy.get('.euiSuperDatePicker__prettyFormat[data-test-subj="superDatePickerShowDatesButton"]') + .contains('This year') + .should('exist'); + cy.wait(delay); + }); - describe('Has working breadcrumbs', () => { - it('Redirect to correct page on breadcrumb click', () => { - cy.get('[data-test-subj="metricsSearch"]').should('exist'); - cy.get('.euiTitle').contains('Metrics').should('exist'); - cy.get('.euiBreadcrumb[href="observability-logs#/"]').click(), - { timeout: COMMAND_TIMEOUT_LONG }; - cy.get('.euiTitle').contains('Logs').should('exist'); - }); - }); + it('Saves metrics to an existing panel', () => { + landOnPanels(); + cy.get('[data-test-subj="customPanels__createNewPanels"]').click(); + cy.get('input.euiFieldText').type(TESTING_PANEL); + cy.get('.euiButton__text', { timeout: COMMAND_TIMEOUT_LONG }) + .contains(/^Create$/) + .click(); + cy.wait(delay * 3); + moveToMetricsHome(); + cy.get('[data-test-subj="metrics__saveManagementPopover"]').trigger('mouseover').click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').focus().type(TESTING_PANEL, { force: true }); + cy.get('[data-test-subj="metrics__SaveConfirm"]').click({ force: true }); + cy.get('.euiToastHeader__title').contains('successfully').should('exist'); }); }); -const moveToMetricsHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-metrics#/`); - cy.wait(delay * 3); -}; - -const moveToEventsExplorer = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer`); - cy.wait(delay * 3); -}; - -const moveToEventsHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs#/`); - cy.wait(delay * 3); -}; - -const createCustomMetric = ({ testMetricIndex }) => { - cy.get('[id^=autocomplete-textarea]').focus().type(PPL_METRICS[metricIndex], { - delay: 50, +describe('Has working breadcrumbs', () => { + it('Redirect to correct page on breadcrumb click', () => { + moveToMetricsHome(); + suppressResizeObserverIssue(); + cy.get('[data-test-subj="metricsSearch"]').should('exist'); + cy.get('.euiTitle').contains('Metrics').should('exist'); + cy.get('.euiBreadcrumb[href="observability-logs#/"]').click(), + { timeout: COMMAND_TIMEOUT_LONG }; + cy.get('.euiTitle').contains('Logs').should('exist'); }); - cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click(); - cy.wait(delay); - suppressResizeObserverIssue(); - cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click(); - cy.wait(delay * 2); - cy.get('[data-test-subj="comboBoxToggleListButton"]').click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').focus().type(VIS_TYPE_LINE, { force: true }); - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click({ force: true }); - cy.get('[data-test-subj="eventExplorer__querySaveName"]') - .focus() - .type(PPL_METRICS_NAMES[metricIndex], { force: true }); - cy.get('[data-test-subj="eventExplorer__metricSaveName"]').click({ force: true }); - cy.wait(1000); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]', { - timeout: COMMAND_TIMEOUT_LONG, - }).click(); - cy.wait(delay); - cy.get('.euiToastHeader__title').contains('successfully').should('exist'); -}; - -const createSavedObjectMetric = ({ testMetricIndex }) => { - return cy - .request({ - method: 'POST', - failOnStatusCode: false, - url: 'api/saved_objects/observability-visualization', - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - body: { - attributes: { - title: PPL_METRICS_NAMES[testMetricIndex], - description: '', - version: 1, - createdTimeMs: new Date().getTime(), - savedVisualization: { - query: PPL_METRICS[testMetricIndex], - selected_date_range: { - start: 'now-15m', - end: 'now', - text: '', - }, - selected_timestamp: { - name: 'timestamp', - type: 'timestamp', - }, - selected_fields: { - tokens: [], - text: '', - }, - name: PPL_METRICS_NAMES[testMetricIndex], - description: '', - type: 'line', - sub_type: 'metric', - }, - }, - }, - }) - .then((response) => response.body); -}; - -const eraseSavedObjectMetrics = () => { - return cy - .request({ - method: 'get', - failOnStatusCode: false, - url: 'api/saved_objects/_find?type=observability-visualization', - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - }) - .then((response) => { - response.body.saved_objects.map((soMetric) => { - cy.request({ - method: 'DELETE', - failOnStatusCode: false, - url: `api/saved_objects/observability-visualization/${soMetric.id}`, - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'osd-xsrf': true, - }, - }); - }); - }); -}; +}); diff --git a/.cypress/integration/9_integrations.spec.js b/.cypress/integration/9_integrations.spec.js deleted file mode 100644 index 18a4c15ad..000000000 --- a/.cypress/integration/9_integrations.spec.js +++ /dev/null @@ -1,134 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// - -import { - TEST_INTEGRATION_INSTANCE, TEST_SAMPLE_INSTANCE, -} from '../utils/constants'; - -let testInstanceSuffix = (Math.random() + 1).toString(36).substring(7); -let testInstance = `${TEST_INTEGRATION_INSTANCE}_${testInstanceSuffix}`; - -const moveToIntegrationsHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/available`); -}; - -const moveToAvailableNginxIntegration = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/available/nginx`); -}; - -const moveToAddedIntegrations = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/integrations#/installed`); -}; - -const createSamples = () => { - moveToAvailableNginxIntegration(); - cy.get('[data-test-subj="try-it-button"]').click(); - cy.get('.euiToastHeader__title').should('contain', 'successfully'); -} - - -describe('Basic sanity test for integrations plugin', () => { - it('Navigates to integrations plugin and expects the correct header', () => { - moveToIntegrationsHome(); - cy.get('[data-test-subj="integrations-header"]').should('exist'); - }); - - it('Navigates to integrations plugin and tests that clicking the nginx cards navigates to the nginx page', () => { - moveToIntegrationsHome(); - cy.get('[data-test-subj="integration_card_nginx"]').click(); - cy.url().should('include', '/available/nginx') - }) - - it('Navigates to nginx page and asserts the page to be as expected', () => { - moveToAvailableNginxIntegration(); - cy.get('[data-test-subj="nginx-overview"]').should('exist') - cy.get('[data-test-subj="nginx-details"]').should('exist') - cy.get('[data-test-subj="nginx-screenshots"]').should('exist') - cy.get('[data-test-subj="nginx-assets"]').should('exist') - cy.get('[data-test-subj="fields"]').click(); - cy.get('[data-test-subj="nginx-fields"]').should('exist') - }) - - it('Uses the search of assets and fields tables', () => { - moveToAvailableNginxIntegration(); - cy.get('input[type="search"]').eq(0).focus().type('ss4o{enter}'); - cy.get('.euiTableRow').should('have.length', 1);//Filters correctly to the index pattern - cy.get('[data-test-subj="fields"]').click(); - cy.get('input[type="search"]').eq(0).focus().clear().type('severity.observe') - cy.get('.euiTableRow').should('have.length', 2);//Filters correctly to the field name - }) - - it('Uses the filter of assets table', () => { - moveToAvailableNginxIntegration(); - cy.get('.euiFilterGroup').trigger('mouseover').click(); - cy.get('.euiFilterSelectItem').contains('visualization').click(); - cy.get('.euiTableRow').should('have.length', 4);//Filters correctly to visualization types - }) -}); - -describe('Tests the add nginx integration instance flow', () => { - it('Navigates to nginx page and triggers the adds the instance flow', () => { - createSamples(); - moveToAvailableNginxIntegration(); - cy.get('[data-test-subj="add-integration-button"]').click(); - cy.get('[data-test-subj="new-instance-name"]').should('have.value', 'nginx'); - cy.get('[data-test-subj="createInstanceButton"]').should('be.disabled') - cy.get('[data-test-subj="addIntegrationFlyoutTitle"]').should('exist') - // Modifies the name of the integration - cy.get('[data-test-subj="new-instance-name"]').type(testInstance.substring(5)); - // validates the created sample index - cy.get('[data-test-subj="data-source-name"]').type('ss4o_logs-nginx-sample-sample'); - cy.get('[data-test-subj="validateIndex"]').click(); - cy.get('.euiToastHeader__title').should('contain', 'valid'); - cy.get('[data-test-subj="createInstanceButton"]').click(); - cy.get('.euiToastHeader__title').should('contain', 'successfully'); - }) - - it('Navigates to installed integrations page and verifies that nginx-test exists', () => { - moveToAddedIntegrations(); - cy.contains(testInstance).should('exist'); - cy.get('input[type="search"]').eq(0).focus().type(`${testInstance}{enter}`); - cy.get('.euiTableRow').should('have.length', 1);//Filters correctly to the test integration instance - cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click(); - }) - - it('Navigates to added integrations page and verifies that nginx-test exists and linked asset works as expected', () => { - moveToAddedIntegrations(); - cy.contains(TEST_INTEGRATION_INSTANCE).should('exist'); - cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click(); - cy.get(`[data-test-subj="IntegrationAssetLink"]`).click(); - cy.url().should('include', '/dashboards#/') - }) - - it('Navigates to installed nginx-test instance page and deletes it', () => { - moveToAddedIntegrations(); - cy.contains(testInstance).should('exist'); - cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click(); - cy.get('[data-test-subj="deleteInstanceButton"]').click(); - - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); - - cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { - delay: 50, - }); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); - cy.get('button[data-test-subj="popoverModal__deleteButton"]').click(); - cy.get('.euiToastHeader__title').should('contain', 'successfully'); - }) -}); - -describe('Tests the add nginx integration instance flow', () => { - it('Navigates to nginx page and triggers the try it flow', () => { - moveToAvailableNginxIntegration(); - cy.get('[data-test-subj="try-it-button"]').click(); - cy.get('.euiToastHeader__title').should('contain', 'successfully'); - moveToAddedIntegrations(); - cy.contains(TEST_SAMPLE_INSTANCE).should('exist'); - }) -}); - - diff --git a/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js deleted file mode 100644 index 36e58fdf6..000000000 --- a/.cypress/integration/VisualizationCharts/10_horizontalBar_chart.spec.js +++ /dev/null @@ -1,214 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, -} from '../../utils/event_analytics/constants'; - -import { - querySearch, - landOnEventVisualizations, -} from '../../utils/event_analytics/helpers'; - -const numberOfWindow = 6; -const labelSize = 20; -const rotateLevel = 45; -const groupWidth = 10; -const groupWidthUpdated = 0.8; -const barWidth = 10; -const barWidthUpdated = .87; -const lineWidth = 7; -const lineWidthUpdated = 7; -const fillOpacity = 10; -const fillOpacityUpdated = 90; -const numberOfColor = 24; - -const renderHorizontalBarChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Horizontal bar').click({ force: true }); -}; - -describe('Adding sample data for visualizations', () => { - it('Adds sample flights data for visualizations to use', () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); - cy.get('div[data-test-subj="sampleDataSetCardlogs"]') - .contains(/(Add|View) data/) - .click(); - }); -}); - -describe('Render horizontal bar chart and verify default behaviour ', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render horizontal bar chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); - }); - - it('Render horizontal bar chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); - }); -}); - -describe('Render horizontal bar chart for data configuration panel', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify data config panel', () => { - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); - }); - - it('Render horizontal bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('host'); - }); - - it('Render horizontal bar chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { - cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('count'); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - }); - - it('Render horizontal bar chart and verify data config panel no result found if metric is missing', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); - cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); - cy.get('.euiButton__text').contains('Update chart').click().then(() => { - cy.wait(delay);//not updating correctly without - cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); - }); - }); -}); - -describe('Render horizontal bar chart for panel options', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('horizontal bar chart'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('horizontal bar chart').should('exist'); - }); -}); - -describe('Render horizontal bar chart for legend', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and verify legends for Show and Hidden', () => { - cy.get('#configPanel__legend').contains('Legend'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); - cy.get('[data-text="Show"]').eq(0).contains('Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render horizontal bar chart and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Render horizontal bar chart for chart style options', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and increase Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); - }); - - it('Render horizontal bar chart and "Rotate bar labels"', () => { - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); - }); - - it('Render horizontal bar chart and change "Group Width"', () => { - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(groupWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); - }); - - it('Render horizontal bar chart and change "Bar Width"', () => { - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(barWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(2).should('have.value', barWidthUpdated); - }); - - it('Render horizontal bar chart and change "Line Width"', () => { - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepUp(lineWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); - }); - - it('Render horizontal bar chart and change "Fill Opacity"', () => { - cy.get('input[type="range"]') - .eq(4) - .then(($el) => $el[0].stepDown(fillOpacity)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); - }); -}); - -describe('Render horizontal bar chart for color theme', () => { - beforeEach(() => { - renderHorizontalBarChart(); - }); - - it('Render horizontal bar chart and "Add color theme"', () => { - cy.get('.euiButton__text').contains('+ Add color theme').click({ force: true }); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click({ force: true }); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js b/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js new file mode 100644 index 000000000..0c093812e --- /dev/null +++ b/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js @@ -0,0 +1,228 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations + } from '../../utils/event_analytics/constants'; + + const numberOfWindow = 4; + const legendSize = 20; + const pointSize = 30; + const pointSizeUpdated = 35; + const lineWidth = 7; + const lineWidthUpdated = 9; + const fillOpacity = 10; + const fillOpacityUpdated = 50; + const rotateLevel = 45; + const thresholdValue = 50; + + const renderScatterChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[6].query, TEST_QUERIES[6].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('scatter').type('{enter}'); + }; + + describe('Render scatter chart and verify default behaviour ', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render scatter chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); + cy.get('.euiIEFlexWrapFix').contains('Thresholds').click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + + it('Render scatter chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + }); + + describe('Render scatter chart for data configuration panel', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and verify data config panel', () => { + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'span(timestamp,1d)'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); + }); + + it('Render scatter chart and verify data config panel no result found if metric is missing', () => { + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + cy.get('.euiComboBoxOption__content').contains('count()').click(); + cy.get('.main-svg').contains('No results found').should('not.exist'); + }); + }); + + describe('Render scatter chart for panel options', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type("scatter Chart"); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('scatter Chart').should('exist'); + }); + }); + + describe('Render scatter chart for legend', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and verify legends for Show and Hidden', () => { + cy.get('[data-text="Show"]').should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render scatter chart and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); + + it('Render scatter chart and increase Legend Size', () => { + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.legendtext').should('have.css', 'font-size', '20px'); + }); + }); + + describe('Render scatter chart for Chart Styles ', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render ltime serires and verify chart style of Marker Mode', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points'); + cy.get('[data-text="Marker"]').should('have.text', 'Marker').click(); + cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked'); + + }); + + it('Render scatter chart and verify chart style of Marker Mode with larger Point size', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points'); + cy.get('[data-text="Marker"]').should('have.text', 'Marker').click(); + cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked'); + cy.get('input[type="range"]') + .then($el => $el[0].stepUp(pointSize)) + .trigger('change') + cy.get('.euiRangeSlider').should('have.value', pointSizeUpdated) + + }); + + it('Render scatter chart and verify chart style of Lines+Marker Mode', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker'); + cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click(); + cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); + + }); + + it('Render scatter chart and verify chart style of Lines+Marker Mode with Line Width, Fill Opacity and Point Size', () => { + cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker'); + cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click(); + cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked'); + cy.get('input[type="range"]').eq(0) + .then($el => $el[0].stepUp(lineWidth)) + .trigger('change') + cy.get('.euiRangeSlider').eq(0).should('have.value', lineWidthUpdated) + cy.get('input[type="range"]').eq(1) + .then($el => $el[0].stepUp(fillOpacity)) + .trigger('change') + cy.get('.euiRangeSlider').eq(1).should('have.value', fillOpacityUpdated) + cy.get('input[type="range"]').eq(2) + .then($el => $el[0].stepUp(pointSize)) + .trigger('change') + cy.get('.euiRangeSlider').eq(2).should('have.value', pointSizeUpdated) + cy.get('input[type="range"]').eq(3) + .then($el => $el[0].stepUp(rotateLevel)) + .trigger('change') + cy.get('.euiRangeSlider').eq(3).should('have.value', rotateLevel) + }); + }); + + describe('Render scatter chart for color theme', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and "Add Color theme"', () => { + cy.get('.euiButton__text').contains('+ Add color theme').click(); + cy.wait(delay); + cy.get('[data-test-subj="comboBoxInput"]').eq(5).click(); + cy.get('.euiComboBoxOption__content').contains('count()').click(); + cy.get('path[style*="rgb(252, 5, 5)"]').should('exist'); + + }); + }); + + describe('Render scatter chart and work with Thresholds', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart and add threshold', () => { + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue); + cy.get('[data-unformatted="scatter chart Threshold"]').should('be.visible'); + cy.get('path[style*="rgb(252, 5, 5)"]').should('exist'); + }); + }); + + describe('Render scatter chart and verify if reset works properly', () => { + beforeEach(() => { + renderScatterChart(); + }); + + it('Render scatter chart with all feild data then click on reset and verify reset works properly', () => { + cy.get('input[placeholder="Title"]').type('scatter chart'); + cy.get('textarea[placeholder="Description"]').type('Description For scatter chart'); + cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize); + cy.get('.euiButton__text').contains('+ Add color theme').click(); + cy.wait(delay); + cy.get('[data-test-subj="comboBoxInput"]').eq(5).click(); + cy.get('.euiComboBoxOption__content').contains('count()').click(); + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue); + cy.get('.euiButtonEmpty__text').contains('Reset').click(); + cy.get('input[placeholder="Title"]').should('not.have.value', 'scatter chart'); + cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For scatter chart') + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', ''); + }); + }); + \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js new file mode 100644 index 000000000..d8eba981e --- /dev/null +++ b/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js @@ -0,0 +1,244 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations, + } from '../../utils/event_analytics/constants'; + + const numberOfWindow = 4; + const labelSize = 20; + const rotateLevel = 45; + const groupWidth = 10; + const groupWidthUpdated = 0.8; + const barWidth = 10; + const barWidthUpdated = 80; + const lineWidth = 7; + const lineWidthUpdated = 8; + const fillOpacity = 10; + const fillOpacityUpdated = 90; + const numberOfColor = 24; + + const renderHorizontalBarChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Horizontal Bar') + .type('{enter}'); + }; + + describe('Render horizontal bar chart and verify default behaviour ', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render horizontal bar chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + + it('Render horizontal bar chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + }); + + describe('Render horizontal bar chart for data configuration panel', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify data config panel', () => { + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); + }); + + it('Render horizontal bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').should('have.length', 1); + cy.get('.euiComboBoxOption__content').contains('tags'); + }); + + it('Render horizontal bar chart and verify data config panel Restrict user to select a duplicate field on Metrics field', () => { + cy.get('.euiText.euiText--extraSmall').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + cy.get('.euiComboBoxOption__content').should('have.length', 2); + }); + + it('Render horizontal bar chart and verify data config panel no result found if metric is missing', () => { + cy.get('.euiText.euiText--extraSmall').eq(0).click(); + cy.get('.euiText.euiText--extraSmall').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.main-svg').contains('No results found').should('not.exist'); + }); + }); + + describe('Render horizontal bar chart for panel options', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('horizontal bar chart'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('horizontal bar chart').should('exist'); + }); + }); + + describe('Render horizontal bar chart for legend', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and verify legends for Show and Hidden', () => { + cy.get('[data-text="Show"]').should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render horizontal bar chart and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); + }); + + describe('Render horizontal bar chart for chart style options', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and increase Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="login"]').should('have.css', 'font-size', '20px'); + }); + + it('Render horizontal bar chart and "Rotate bar labels"', () => { + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); + }); + + it('Render horizontal bar chart and change "Group Width"', () => { + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(groupWidth)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); + }); + + it('Render horizontal bar chart and change "Bar Width"', () => { + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(barWidth)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(4).should('have.value', barWidthUpdated); + }); + + it('Render horizontal bar chart and change "Line Width"', () => { + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepUp(lineWidth)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); + }); + + it('Render horizontal bar chart and change "Fill Opacity"', () => { + cy.get('input[type="range"]') + .eq(4) + .then(($el) => $el[0].stepUp(fillOpacity)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); + }); + }); + + describe('Render horizontal bar chart for color theme', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart and "Add color theme"', () => { + cy.get('.euiButton__text').contains('+ Add color theme').click(); + cy.wait(delay); + cy.get('[data-test-subj="comboBoxInput"]').eq(9).click(); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); + cy.get('.point').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor); + }); + }); + + describe('Render horizontal bar chart and verify if reset works properly', () => { + beforeEach(() => { + renderHorizontalBarChart(); + }); + + it('Render horizontal bar chart with all feild data then click on reset and verify reset works properly', () => { + cy.get('input[placeholder="Title"]').type('horizontal bar chart'); + cy.get('textarea[placeholder="Description"]').type('Description For horizontal bar chart'); + cy.get('.euiButton__text').contains('Hidden').click(); + cy.get('.euiButton__text').contains('Stack').click(); + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(groupWidth)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(barWidth)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepUp(lineWidth)) + .trigger('change'); + cy.get('.euiButtonEmpty__text').contains('Reset').click(); + cy.get('input[placeholder="Title"]').should('not.have.value', 'horizontal bar chart'); + cy.get('textarea[placeholder="Description"]').should( + 'not.have.value', + 'Description For horizontal bar chart' + ); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Group"] [data-test-subj="group"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); + }); + }); diff --git a/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js b/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js deleted file mode 100644 index 432f9d462..000000000 --- a/.cypress/integration/VisualizationCharts/11_timeSeries_chart.spec.js +++ /dev/null @@ -1,196 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, -} from '../../utils/event_analytics/constants'; - -import { - querySearch, - landOnEventVisualizations, -} from '../../utils/event_analytics/helpers'; - -const numberOfWindow = 6; -const timeInterval = 1; -const labelSize = 20; -const rotateLevel = 45; -const lineWidth = 7; -const lineWidthUpdated = 7; -const fillOpacity = 10; -const fillOpacityUpdated = 90; -const numberOfColor = 24; - -const renderTimeSeriesChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true }); -}; - -describe('Adding sample data for visualizations', () => { - it('Adds sample flights data for visualizations to use', () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); - cy.get('div[data-test-subj="sampleDataSetCardlogs"]') - .contains(/(Add|View) data/) - .click(); - }); -}); - -describe('Render Time series chart and verify default behaviour ', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render Time series chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - }); - - it('Render Time series chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); - }); -}); - -describe('Render Time series chart for data configuration panel', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and verify data config panel', () => { - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); - }); - - it('Render Time series chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('host'); - }); - - it('Render Time series chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { - cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('count'); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - }); - - it('Render Time series chart and verify data config panel no result found if metric is missing', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxOptionsList "]').contains('timestamp').click(); - cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(timeInterval); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(1).click(); - cy.get('[data-test-subj="comboBoxOptionsList "]').contains('Hour').click(); - cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); - cy.get('.euiButton__text').contains('Update chart').click().then(() => { - cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); - }); - }); -}); - -describe('Render Time series chart for panel options', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('horizontal bar chart'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('horizontal bar chart').should('exist'); - }); -}); - -describe('Render Time series chart for legend', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and verify legends for Show and Hidden', () => { - cy.get('#configPanel__legend').contains('Legend'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); - cy.get('[data-text="Show"]').eq(0).contains('Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render Time series chart and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Render Time series chart for chart style options', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and increase Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); - }); - - it('Render Time series chart and "Rotate bar labels"', () => { - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(2).should('have.value', rotateLevel); - }); - - it('Render Time series chart and change "Line Width"', () => { - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(lineWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(0).should('have.value', lineWidthUpdated); - }); - - it('Render Time series chart and change "Fill Opacity"', () => { - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepDown(fillOpacity)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(1).should('have.value', fillOpacityUpdated); - }); -}); - -describe('Render Time series chart threshold', () => { - beforeEach(() => { - renderTimeSeriesChart(); - }); - - it('Render Time series chart and "Add color theme"', () => { - cy.get('.euiButton__text').contains('+ Add threshold').click({ force: true }); - cy.get('[data-test-subj="nameFieldText"]').type('ThresholdTestLine',{ force: true }) - cy.get('[data-unformatted="ThresholdTestLine"]').should('exist'); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js b/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js new file mode 100644 index 000000000..be143450b --- /dev/null +++ b/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js @@ -0,0 +1,248 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations, +} from '../../utils/event_analytics/constants'; + +const numberOfWindow = 4; +const labelSize = 20; +const rotateLevel = 45; +const boxSize = 7; +const boxSizeUpdated = 1; +const markerSize = 5; +const markerSizeUpdated = 1; +const jitter = 2; +const jitterUpdated = .1; +const fillOpacity = 10; +const fillOpacityUpdated = 50; +const numberOfColor = 24; + +const renderBoxPlot = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Box plot') + .type('{enter}'); +}; + +describe('Render box plot and verify default behaviour ', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render box plot and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Legend').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Color Theme').click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + + it('Render box plot and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); +}); + +describe('Render box plot for data configuration panel', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and verify data config panel', () => { + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); + }); + + it('Render box plot and verify data config panel restrict user to select a duplicate field on dimension field', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').should('have.length', 1); + cy.get('.euiComboBoxOption__content').contains('tags'); + }); + + it('Render box plot and verify data config panel Restrict user to select a duplicate field on Metrics field', () => { + cy.get('.euiText.euiText--extraSmall').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); + cy.get('.euiComboBoxOption__content').should('have.length', 2); + }); + + it('Render box plot and verify data config panel no result found if metric is missing', () => { + cy.get('.euiText.euiText--extraSmall').eq(0).click(); + cy.get('.euiText.euiText--extraSmall').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.main-svg').contains('No results found').should('not.exist'); + }); +}); + +describe('Render box plot for panel options', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type('box plot'); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('box plot').should('exist'); + }); +}); + +describe('Render box plot for legend', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and verify legends for Show and Hidden', () => { + cy.get('[data-text="Show"]').should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); + }); + + it('Render box plot and verify legends for position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Render box plot for chart style options', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and increase Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="count()"]').should('have.css', 'font-size', '20px'); + }); + + it('Render box plot and "Rotate box labels"', () => { + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); + }); + + it('Render box plot and change "Box gap"', () => { + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(boxSize)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(1).should('have.value', boxSizeUpdated); + }); + + it('Render box plot and change "Marker size"', () => { + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(markerSize)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(2).should('have.value', markerSizeUpdated); + }); + + it('Render box plot and change "Jitter"', () => { + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepDown(jitter)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(3).should('have.value', jitterUpdated); + }); + + it('Render box plot and change "Fill opacity"', () => { + cy.get('input[type="range"]') + .eq(4) + .then(($el) => $el[0].stepUp(fillOpacity)) + .trigger('change'); + cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); + }); +}); + +describe('Render box plot for color theme', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot and "Add color theme"', () => { + cy.get('.euiButton__text').contains('+ Add color theme').click(); + cy.wait(delay); + cy.get('[data-test-subj="comboBoxInput"]').eq(9).click(); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); + cy.get('.points').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor); + }); +}); + +describe('Render box plot and verify if reset works properly', () => { + beforeEach(() => { + renderBoxPlot(); + }); + + it('Render box plot with all feild data then click on reset and verify reset works properly', () => { + cy.get('input[placeholder="Title"]').type('box plot'); + cy.get('textarea[placeholder="Description"]').type('Description For box plot'); + cy.get('.euiButton__text').contains('Hidden').click(); + cy.get('.euiButton__text').contains('Horizontal').click(); + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('input[type="range"]') + .eq(0) + .then(($el) => $el[0].stepUp(rotateLevel)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(1) + .then(($el) => $el[0].stepUp(boxSize)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(2) + .then(($el) => $el[0].stepDown(markerSize)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(3) + .then(($el) => $el[0].stepUp(jitter)) + .trigger('change'); + cy.get('input[type="range"]') + .eq(4) + .then(($el) => $el[0].stepUp(fillOpacity)) + .trigger('change'); + cy.get('.euiButtonEmpty__text').contains('Reset').click(); + cy.get('input[placeholder="Title"]').should('not.have.value', 'box plot'); + cy.get('textarea[placeholder="Description"]').should( + 'not.have.value', + 'Description For box plot' + ); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Overlay"] [data-test-subj="overlay"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js b/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js deleted file mode 100644 index 29d039b99..000000000 --- a/.cypress/integration/VisualizationCharts/12_pie_chart.spec.js +++ /dev/null @@ -1,153 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - TEST_QUERIES, - aggregationValues, -} from '../../utils/event_analytics/constants'; - -import { - querySearch, - landOnEventVisualizations, - saveVisualizationAndVerify, - deleteVisualization, -} from '../../utils/event_analytics/helpers'; - -const renderPieChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click({ force: true }); -}; - -describe('Adding sample data and visualization', () => { - it('Adds sample flights data for visualizations to use', () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); - cy.get('div[data-test-subj="sampleDataSetCardflights"]') - .contains(/(Add|View) data/) - .click(); - }); -}); - -describe('Render Pie chart and verify default behavior', () => { - beforeEach(() => { - renderPieChart(); - }); - - it('Render Pie chart and verify the default data', () => { - cy.get('.plot-container.plotly').should('exist'); - }); - - it('Render Pie chart and verify Data Configuration panel default behavior', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxxsmall').contains('Query fields').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - }); - - it('Render Pie chart and verify Style section for Pie chart', () => { - cy.get('#data-panel').contains('Style').should('exist'); - cy.get('[aria-controls="configPanel__panelOptions"]').contains('Panel options').should('exist'); - cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); - cy.get('.euiForm.visEditorSidebar__form .euiIEFlexWrapFix') - .contains('Tooltip options') - .should('exist'); - cy.get('[aria-controls="configPanel__chartStyles"]').should('exist'); - }); - - it('Options under Legend section', () => { - cy.get('#configPanel__legend').contains('Legend'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); - cy.get('[data-text="Show"]').eq(0).contains('Show'); - cy.get('[data-text="Hidden"]').eq(0).contains('Hidden'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Position'); - cy.get('[data-text="Right"]').contains('Right'); - cy.get('[data-text="Bottom"]').contains('Bottom'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Legend size').should('exist'); - }); - - it('Options under Tooltip options section', () => { - cy.get('.euiIEFlexWrapFix').contains('Tooltip options').should('exist'); - cy.get('[data-text="Show"]').eq(1).contains('Show'); - cy.get('[data-text="Hidden"]').eq(1).contains('Hidden'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Tooltip text'); - cy.get('[data-text="All"]').contains('All'); - cy.get('[data-text="Label"]').contains('Label'); - cy.get('[data-text="Value"]').contains('Value'); - cy.get('[data-text="Percent"]').contains('Percent'); - }); - - it('Options under Chart Styles section', () => { - cy.get('.euiIEFlexWrapFix').contains('Chart styles').should('exist'); - cy.get('#configPanel__chartStyles').contains('Mode'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(9).contains('Label size'); - }); - - it('Table view should be enabled for Pie chart', () => { - cy.get('.euiSwitch__label').contains('Table view').should('exist'); - cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); - cy.get('.ag-header.ag-pivot-off').should('exist'); - }); - - it('Render Pie chart and verify legends for Position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); - }); - - it('Render Pie chart and verify legends for Show and Hidden', () => { - cy.get('[data-text="Show"]').eq(0).should('have.text', 'Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(0).should('have.text', 'Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); - }); - - it('Render Pie chart and verify Chart Style works', () => { - cy.get('[data-test-subj="pie"]').should('exist'); - cy.get('[data-test-subj="pie"]').should('have.attr', 'checked'); - cy.get('[data-test-subj="donut"]').should('exist').click({ force: true }); - cy.get('[data-test-subj="donut"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Save and Delete Visualization', () => { - beforeEach(() => { - renderPieChart(); - }); - - it('Render Pie chart, Save and Delete Visualization', () => { - saveVisualizationAndVerify(); - deleteVisualization(); - }); -}); - -describe('Renders Pie chart and Configurations section for Pie chart', () => { - beforeEach(() => { - landOnEventVisualizations(); - renderPieChart(); - }); - - it('Verify drop down values for Series Aggregation', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('series').should('exist'); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - aggregationValues.forEach(function (value) { - cy.get('.euiComboBoxOption__content').contains(value); - }); - cy.get('[data-test-subj="panelCloseBtn"]').eq(0).click(); - }); - - it('Render Pie chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(0).should('exist'); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js b/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js deleted file mode 100644 index a0151e6c2..000000000 --- a/.cypress/integration/VisualizationCharts/13_heatMap_chart.spec.js +++ /dev/null @@ -1,139 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, -} from '../../utils/event_analytics/constants'; - -import { - querySearch, - landOnEventVisualizations, -} from '../../utils/event_analytics/helpers'; - -const numberOfWindow = 6; - -const renderHeatMapChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click({ force: true }); -}; - -describe('Adding sample data for visualizations', () => { - it('Adds sample flights data for visualizations to use', () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); - cy.get('div[data-test-subj="sampleDataSetCardlogs"]') - .contains(/(Add|View) data/) - .click(); - }); -}); - -describe('Render Heatmap chart and verify default behaviour ', () => { - beforeEach(() => { - renderHeatMapChart(); - }); - - it('Render Heatmap chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render Heatmap chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - }); - - it('Render Heatmap chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); - }); -}); - -describe('Render Heatmap chart for data configuration panel', () => { - beforeEach(() => { - renderHeatMapChart(); - }); - - it('Render Heatmap chart and verify data config panel', () => { - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); - }); - - it('Render Heatmap chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('host'); - }); - - it('Render Heatmap chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { - cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('count'); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - }); - - it('Render Heatmap chart and verify data config panel no result found if metric is missing', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(2).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); - cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); - cy.get('.euiButton__text').contains('Update chart').click().then(() => { - cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); - }); - }); -}); - -describe('Render Heatmap chart for panel options', () => { - beforeEach(() => { - renderHeatMapChart(); - }); - - it('Render Heatmap chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('horizontal bar chart'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('horizontal bar chart').should('exist'); - }); -}); - -describe('Render Heatmap chart for legend', () => { - beforeEach(() => { - renderHeatMapChart(); - }); - - it('Render Heatmap chart and verify legends for Show and Hidden', () => { - cy.get('.euiTitle.euiTitle--xxsmall').contains('Show colorscale'); - cy.get('[data-text="Show"]').eq(1).contains('Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(1).contains('Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - - }); -}); - -describe('Render Heatmap chart for color theme', () => { - beforeEach(() => { - renderHeatMapChart(); - }); - - it('Render Heatmap chart and change color theme', () => { - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); - cy.get('.euiComboBoxOption__content').contains('opacity').click({ force: true }); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).contains('opacity').should('exist'); - }); -}); diff --git a/.cypress/integration/VisualizationCharts/13_logsView.spec.js b/.cypress/integration/VisualizationCharts/13_logsView.spec.js new file mode 100644 index 000000000..8f8b163da --- /dev/null +++ b/.cypress/integration/VisualizationCharts/13_logsView.spec.js @@ -0,0 +1,241 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations, + saveVisualizationAndVerify, + deleteVisualization, +} from '../../utils/event_analytics/constants'; + +const renderLogsView = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[8].query, TEST_QUERIES[8].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Logs view') + .type('{enter}'); +}; + +const renderLogsViewChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[2].query, TEST_QUERIES[2].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Logs view') + .type('{enter}'); +}; + +const fieldName = 'host'; + +describe('Render Logs view and verify default behavior', () => { + beforeEach(() => { + renderLogsView(); + }); + + it('Render Logs view and verify the default data', () => { + cy.get('.logs-view-container').should('exist'); + }); + + it('Render Logs view and verify Data Configuration panel default behavior', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns'); + cy.get('.euiFormLabel.euiFormRow__label').contains('Field'); + cy.get('.euiButton.euiButton--primary.euiButton--fullWidth.euiButton-isDisabled').should( + 'be.disabled' + ); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').should('be.disabled'); + }); + + it('Render Logs view and verify Style section for Logs view', () => { + cy.get('.vis-config-tabs .euiTab__content').contains('Style').should('exist'); + cy.get('.euiAccordion__triggerWrapper').contains('Panel options').should('exist'); + cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper') + .contains('Title') + .should('exist'); + cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper') + .contains('Description') + .should('exist'); + }); + + it('Table view should be enabled for Logs view', () => { + cy.get('.euiSwitch__label').contains('Table view').should('exist'); + cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); + cy.get('.ag-header.ag-pivot-off').should('exist'); + }); + + it('Verify Style section for Logs view', () => { + cy.get('#data-panel').contains('Style').should('exist'); + cy.get('.euiAccordion__button').contains('Panel options').should('exist'); + cy.get('#configPanel__panelOptions').contains('Title').should('exist'); + cy.get('.euiFormHelpText.euiFormRow__text').contains('Name your visualization').should('exist'); + cy.get('#configPanel__panelOptions').contains('Description').should('exist'); + }); + + it('Add and Remove toggle buttons for fields section', () => { + cy.get('#available_fields').contains('Available Fields').should('exist'); + cy.get('[aria-label="Add agent to table"]').should('be.disabled'); + cy.get('#selected_fields').contains('Query fields').should('exist'); + cy.get('[aria-label="Remove clientip from table"]').should('be.disabled'); + }); +}); + +describe('Save and Delete Visualization', () => { + beforeEach(() => { + renderLogsView(); + }); + + it('Render Logs view, Save and Delete Visualization', () => { + saveVisualizationAndVerify(); + deleteVisualization(); + }); +}); + +describe('Render Logs view with no stats section in the query', () => { + beforeEach(() => { + renderLogsViewChart(); + }); + + it('Disabled Table view toogle button', () => { + cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').should('be.disabled'); + }); + + it('Save toast message', () => { + const vis_name_sub_string = Math.floor(Math.random() * 100); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); + cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); + cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); + cy.get( + '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' + ) + .eq(0) + .click(); + cy.get('.euiPopover__panel input') + .eq(1) + .type(`Test visualization` + vis_name_sub_string); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + cy.get('[data-test-subj="euiToastHeader"]') + .contains('There is no query or(and) visualization to save') + .should('exist'); + }); + + it('Verify Logs view details when PPL query does not have stats section ', () => { + cy.get('[data-test-subj="docTable"]').should('exist'); + cy.get('.osdDocTableHeader').contains('Time').should('exist'); + cy.get('.osdDocTableHeader').contains('_source').should('exist'); + }); + + it('Add and Remove toggle buttons for fields section should be enabled', () => { + //Add field + cy.get('[data-test-subj="fieldToggle-agent"]').click(); + cy.get('[data-test-subj="field-agent"]').should('exist'); + //Remove field + cy.get('[data-test-subj="fieldToggle-agent"]').click(); + cy.get('[aria-labelledby="selected_fields"] [data-test-subj="field-agent-showDetails"]').should( + 'not.exist' + ); + }); + + it('Search engine for fields under Visualizations', () => { + cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').should('exist').type(fieldName); + cy.get('[data-test-subj="fieldToggle-host"]').click(); + cy.get('[data-test-subj="fieldList-selected"]').should('exist'); + }); + + it('View surrounding events button enabled', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('.euiButton__text').eq(4).should('not.be.disabled'); + }); +}); + +describe('Event Details overlay', () => { + beforeEach(() => { + renderLogsView(); + }); + + it('Verify Event Details overaly should get opened after clicking on details toggle button', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + }); + + it('Options in Event Details overlay', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('.euiTabs .euiTab__content').contains('Table'); + cy.get('.table.table-condensed.osdDocViewerTable').should('exist'); + cy.get('.euiTabs .euiTab__content').contains('JSON').click(); + cy.get('.euiCodeBlock__code.json').should('exist'); + cy.get('.euiTabs .euiTab__content').contains('Traces').click(); + cy.get('.euiCallOutHeader__title').contains('No Trace Id found in the event.').should('exist'); + cy.get('.euiLink.euiLink--primary').contains('Trace Analytics').click(); + cy.get('#trace-analytics').contains('Trace Analytics').should('exist'); + cy.get('.euiLink.euiLink--primary').contains('Log Correlation').click(); + cy.get('#log-correlation').contains('Log Correlation').should('exist'); + }); + + it('View surrounding events button disabled', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('.euiButton.euiButton--primary.euiButton-isDisabled.header-button') + .contains('View surrounding events') + .should('be.disabled'); + }); + + it('Event Details overlay resizable and "X" buttons', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('[title="Resize"]').click(); + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('[data-test-subj="euiFlyoutCloseButton"]').should('exist').click(); + }); + + it('Table details on Event Details overlay', () => { + cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon') + .eq(2) + .click({ force: true }); + cy.get('#eventsDocFyout').contains('Event Details').should('exist'); + cy.get('[data-test-subj="docTable"]').should('exist'); + }); +}); + +describe('Data Configuration panel when no stats in the query', () => { + beforeEach(() => { + renderLogsViewChart(); + }); + + it('Data Configuration panel default behavior', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist'); + cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled'); + cy.get('.euiButton__text').eq(3).contains('Update Chart').should('not.be.disabled'); + }); + + it('Add button in Data Configuration panel', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist'); + cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled').click(); + cy.get('.euiFormLabel.euiFormRow__label').contains('Field'); + cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').should('exist'); + cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click(); + cy.get('.euiFlexItem.euiFilterSelectItem__content').eq(1).click(); + cy.get('.euiButton__text').contains('Update Chart').should('not.be.disabled').click(); + cy.get('[data-test-subj="docTable"]').should('exist'); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js b/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js new file mode 100644 index 000000000..f3c6c561a --- /dev/null +++ b/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js @@ -0,0 +1,211 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations +} from '../../utils/event_analytics/constants'; + +const numberOfWindow = 4; +const metricsPrecisionUpdated = 2; +const metricUnit = 'cm' ; +const titleSize = '25.5px'; +const titleSizeUpdated = '40px'; +const valueSize = '60.8px'; +const valueSizeUpdated = '73.0px'; + +const renderStatsChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Stats').type('{enter}'); +}; + +describe('Render stats chart and verify default behaviour ', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify by default the data gets render', () => { + cy.get('.xy').should('exist'); + }); + + it('Render scatter chart and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('.euiIEFlexWrapFix').contains('Thresholds').click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + + it('Render stats chart and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); +}); + +describe('Render stats chart for data configuration panel', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify data config panel', () => { + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)'); + cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host'); + }); + + it('Render stats chart and verify no result found message if the dimension is removed' , () => { + cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click(); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').click(); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.get('.main-svg').contains('No results found').should('not.exist'); + }); + + it('Render stats chart and verify data config panel no result found if metric is missing', () => { + cy.get('.euiText.euiText--extraSmall').eq(0).click(); + cy.get('.euiText.euiText--extraSmall').eq(1).click(); + cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(0).click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.main-svg').contains('No results found').should('not.exist'); + }); +}); + +describe('Render stats chart for panel options', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type("stats chart"); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('stats chart').should('exist'); + }); +}); + +describe('Render stats chart verfiy functionality for Tooltip mode', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verfiy the Show and Hidden Tooltip modes', () => { + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(0).should('have.text', 'Show'); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(1).should('have.text', 'Hidden') + .click(); + }); +}); + +describe('Render stats chart verfiy functionality for Tooltip text', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verfiy the Tootltip text -> All , Dimension , Metric', () => { + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(2).should('have.text', 'All'); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(3).should('have.text', 'Dimension') + .click(); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(4).should('have.text', 'Series') + .click(); + }); +}); + +describe('Render stats chart for Chart Styles ', () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify the various chart type selected', () => { + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(5).should('have.text', 'Auto'); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(6).should('have.text', 'Horizontal').click(); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(7).should('have.text', 'Text mode').click(); + }); + + it('Render stats chart and verify the various chart orientation selected', () => { + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(8).should('have.text', 'Auto'); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(9).should('have.text', 'Horizontal').click(); + cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(10).should('have.text', 'Vertical').click(); + }); + + it('Render stats chart and verify Metric unit and Metric Precision on chart ', () => { + cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + }); + + it('Render stats chart and verify behaviour for Title size and Value size on chart ', () => { + cy.get('.annotation-text').eq(0).should('have.css', 'font-size', titleSize); + cy.get('.annotation-text').eq(2).should('have.css', 'font-size', titleSize); + cy.get('.annotation-text').eq(4).should('have.css', 'font-size', titleSize); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('.annotation-text').eq(1).should('have.css', 'font-size', valueSize); + cy.get('.annotation-text').eq(3).should('have.css', 'font-size', valueSize); + cy.get('.annotation-text').eq(5).should('have.css', 'font-size', valueSize); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + }); +}); + +describe('Render stats chart and verify the Text Mode options' , () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify text modes ', () => { + cy.get('[data-text="Names"]').should('have.text', 'Names').click(); + cy.get('[data-text="Values"]').should('have.text', 'Values').click(); + cy.get('[data-text="Values + Names"]').should('have.text', 'Values + Names').click(); + cy.wait(delay); + }); +}); + +describe('Render stats chart and verify the +add threshold button option' , () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and verify the +Add Threshold button for color picker' , () => { + cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); + cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click(); + cy.wait(delay); + }); +}); + +describe('Render stats chart and verify the reset button' , () => { + beforeEach(() => { + renderStatsChart(); + }); + + it('Render stats chart and test the Reset button functionality' , () => { + cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated); + cy.get('.euiSpacer.euiSpacer--s').eq(12).click(); + cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); + cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click(); + cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); + }); +}); \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js b/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js new file mode 100644 index 000000000..0167f6059 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js @@ -0,0 +1,202 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + delay, + TEST_QUERIES, + querySearch, + landOnEventVisualizations, + renderDataConfig, + saveVisualizationAndVerify, + deleteVisualization, + } from '../../utils/event_analytics/constants'; + + const renderPieChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click(); + }; + + const aggregationValues = [ + 'COUNT', + 'SUM', + 'AVERAGE', + 'MAX', + 'MIN', + 'VAR_SAMP', + 'VAR_POP', + 'STDDEV_SAMP', + 'STDDEV_POP', + ]; + + describe.only('Render Pie chart and verify default behavior', () => { + beforeEach(() => { + renderPieChart(); + }); + + it('Render Pie chart and verify the default data', () => { + cy.get('.plot-container.plotly').should('exist'); + }); + + it('Render Pie chart and verify Data Configuration panel default behavior', () => { + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.first-division .euiFormRow__labelWrapper').contains('Aggregation').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Field').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label') + .contains('Custom label') + .should('exist'); + cy.get('.first-division .euiButton__text').contains('Add').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiButton__text').contains('Update chart').should('exist'); + }); + + it('Render Pie chart and verify Style section for Pie chart', () => { + cy.get('#data-panel').contains('Style').should('exist'); + cy.get('[aria-controls="configPanel__panelOptions"]').contains('Panel options').should('exist'); + cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); + cy.get('.euiForm.visEditorSidebar__form .euiIEFlexWrapFix') + .contains('Tooltip options') + .should('exist'); + cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart styles').should('exist'); + }); + + it('Options under Legend section', () => { + cy.get('#configPanel__legend').contains('Legend'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(3).contains('Show legend'); + cy.get('[data-text="Show"]').eq(0).contains('Show'); + cy.get('[data-text="Hidden"]').eq(0).contains('Hidden'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Position'); + cy.get('[data-text="Right"]').contains('Right'); + cy.get('[data-text="Bottom"]').contains('Bottom'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Legend size').should('exist'); + }); + + it('Options under Tooltip options section', () => { + cy.get('.euiIEFlexWrapFix').contains('Tooltip options').should('exist'); + cy.get('[data-text="Show"]').eq(1).contains('Show'); + cy.get('[data-text="Hidden"]').eq(1).contains('Hidden'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Tooltip text'); + cy.get('[data-text="All"]').contains('All'); + cy.get('[data-text="Label"]').contains('Label'); + cy.get('[data-text="Value"]').contains('Value'); + cy.get('[data-text="Percent"]').contains('Percent'); + }); + + it('Options under Chart Styles section', () => { + cy.get('.euiIEFlexWrapFix').contains('Chart styles').should('exist'); + cy.get('#configPanel__chartStyles').contains('Mode'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(9).contains('Label size'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Color theme'); + }); + + it('Table view should be enabled for Pie chart', () => { + cy.get('.euiSwitch__label').contains('Table view').should('exist'); + cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click(); + cy.get('.ag-header.ag-pivot-off').should('exist'); + }); + + it('Render Pie chart and verify legends for Position Right and Bottom', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right'); + cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); + }); + + it('Render Pie chart and verify legends for Show and Hidden', () => { + cy.get('[data-text="Show"]').eq(0).should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Hidden"]').eq(0).should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true }); + }); + }); + + describe('Save and Delete Visualization', () => { + beforeEach(() => { + renderPieChart(); + }); + + it('Render Pie chart, Save and Delete Visualization', () => { + saveVisualizationAndVerify(); + deleteVisualization(); + }); + }); + + describe('Color Theme section', () => { + beforeEach(() => { + renderPieChart(); + }); + + it('Default option in Color Theme', () => { + cy.get('.euiTitle.euiTitle--xxsmall') + .contains('Color Theme') + .scrollIntoView() + .should('be.visible'); + cy.get('.euiSuperSelectControl').contains('Default').should('exist'); + }); + + it('Render pie chart with single color option', () => { + cy.get('.euiTitle.euiTitle--xxsmall') + .contains('Color Theme') + .scrollIntoView() + .should('be.visible'); + cy.get('.euiSuperSelectControl').contains('Default').click(); + cy.get('.euiColorPalettePicker__item').contains('Single Color').click(); + cy.get('[data-test-subj="euiColorPickerAnchor"]').click(); + cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(2).click(); + cy.get('.pielayer').should('exist'); + }); + }); + + describe('Renders Pie chart and Data Configurations section for Pie chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + renderPieChart(); + }); + + it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => { + renderDataConfig(); + }); + + it('Validate "Add" and "X" buttons', () => { + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiText.euiText--extraSmall').eq(0).click(); + cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field'); + cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); + cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist'); + }); + + it('Verify drop down values for Aggregation', () => { + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); + cy.get('.euiText.euiText--extraSmall').eq(0).click(); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + aggregationValues.forEach(function (value) { + cy.get('.euiComboBoxOption__content').contains(value); + }); + }); + + it('Collapsible mode for Data Configuration panel', () => { + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click(); + cy.get('[data-test-subj="panel-1-toggle"]').click(); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); + cy.get('.euiResizablePanel.euiResizablePanel--middle') + .contains('Data Configurations') + .should('not.be.focused'); + }); + }); + \ No newline at end of file diff --git a/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js b/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js new file mode 100644 index 000000000..10569fe03 --- /dev/null +++ b/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js @@ -0,0 +1,195 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +/// +import { + TEST_QUERIES, + querySearch, + landOnEventVisualizations +} from '../../utils/event_analytics/constants'; + +const numberOfWindow = 4; +const labelSize = 20; +const latitudeRangeMin = 40; +const latitudeRangeMax = 70; +const longitudeRangeMin = -130; +const longitudeRangeMax = -55; + +const renderCoordinateMap = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Coordinate Map').type('{enter}'); +}; + +const renderDataForCoordinateMap = () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').contains('DestLocation').click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').click(); + cy.get('[data-test-subj="comboBoxInput"]').eq(4).click(); + cy.get('.euiComboBoxOption__content').contains('Dest').click(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.layer.land').should('exist'); + cy.get('stop[stop-color="rgb(5, 10, 172)"]').should('exist'); +} + +describe('Render coordinate map and verify default behaviour ', () => { + beforeEach(() => { + renderCoordinateMap(); + }); + + it('Render coordinate map and verify by default the data dont gets render', () => { + cy.get('.layer.land').should('not.exist'); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); + }); + + it('Render coordinate map and verify you see data configuration panel and chart panel', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist'); + cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); + cy.get('.euiIEFlexWrapFix').contains('Text').click(); + cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); + + it('Render coordinate map and verify the data configuration panel and chart panel are collapsable', () => { + cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); + cy.get('[aria-label="Press to toggle this panel"]').eq(1).click(); + cy.get('[aria-label="Press to toggle this panel"]').eq(2).click(); + }); +}); + +describe('Render coordinate map for data configuration panel', () => { + beforeEach(() => { + renderCoordinateMap(); + }); + + it('Render coordinate map and verify data config panel', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).contains('Select a field').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(3).contains('Select a field').should('exist'); + cy.get('[data-test-subj="comboBoxInput"]').eq(4).contains('Select a field').should('exist'); + }); + + it('Render coordinate map and verify data gets render only after selecting the field value in data configuration panel', () => { + renderDataForCoordinateMap(); + }); + + it('Render coordinate map and verify data config dimensions panel "Field" contains only location', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist'); + cy.get('.euiComboBoxOption__content').contains('OriginLocation').should('exist'); + }); + + it('Render coordinate map and verify data config metrics panel "Field" contains only value which return either integer or float value', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist'); + cy.get('.euiComboBoxOption__content').contains('DistanceMiles').should('exist'); + cy.get('.euiComboBoxOption__content').should('not.contain', 'DestLocation'); + cy.get('.euiComboBoxOption__content').should('have.length', 6); + }); + + it('Render coordinate map and verify data config metric panel "Plot Label" contains a combination of string value and integer value', () => { + cy.get('[data-test-subj="comboBoxInput"]').eq(4).click(); + cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist'); + cy.get('.euiComboBoxOption__content').contains('Dest').should('exist'); + cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist'); + }); +}); + +describe('Render coordinate map for panel options', () => { + beforeEach(() => { + renderCoordinateMap(); + renderDataForCoordinateMap(); + }); + + it('Render coordinate map and verify the title gets updated according to user input ', () => { + cy.get('input[name="title"]').type("coordinate map"); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('.gtitle').contains('coordinate map').should('exist'); + }); +}); + +describe('Render coordinate map for text', () => { + beforeEach(() => { + renderCoordinateMap(); + renderDataForCoordinateMap(); + }); + + it('Render coordinate map and verify by default the "Show" is enabled for "Show Text"', () => { + cy.get('[data-text="Show"]').should('have.text', 'Show'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-unformatted="Duluth International Airport"]').should('exist'); + }); + + it('Render coordinate map and change "Show Text" to "Hidden"', () => { + cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click(); + cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); + cy.get('[data-unformatted="Duluth International Airport"]').should('not.exist'); + }); + + it('Render coordinate map and verify by default the "Top" is enabled for "Position"', () => { + cy.get('[data-text="Top"]').should('have.text', 'Top'); + cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked'); + }); + + it('Render coordinate map and change "Position" to "Right", "Bottom" and "Left"', () => { + cy.get('[data-text="Right"]').should('have.text', 'Right').click(); + cy.get('[data-text="Right"] [data-test-subj="middle right"]').should('not.have.attr', 'checked'); + cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); + cy.get('[data-text="Bottom"] [data-test-subj="bottom center"]').should('not.have.attr', 'checked'); + cy.get('[data-text="Left"]').should('have.text', 'Left').click(); + cy.get('[data-text="Left"] [data-test-subj="middle left"]').should('not.have.attr', 'checked'); + }); +}); + +describe('Render coordinate map for chart style options', () => { + beforeEach(() => { + renderCoordinateMap(); + renderDataForCoordinateMap(); + }); + + it('Render coordinate map and change Label Size ', () => { + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('textarea[name="description"]').should('exist').click(); + cy.get('[data-unformatted="Duluth International Airport"]').should('have.css', 'font-size', '20px'); + cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', labelSize) + }); + + it('Render coordinate map and change "Latitude Range"', () => { + cy.get('input[type="number"]').eq(1).should('have.value', latitudeRangeMin); + cy.get('input[type="number"]').eq(2).should('have.value', latitudeRangeMax); + cy.get('input[type="number"]').eq(1).click().clear().type(30); + }); + + it('Render coordinate map and change "Longitude Range"', () => { + cy.get('input[type="number"]').eq(3).should('have.value', longitudeRangeMin); + cy.get('input[type="number"]').eq(4).should('have.value', longitudeRangeMax); + cy.get('input[type="number"]').eq(4).click().clear().type(40); + }); +}); + +describe('Render coordinate map and verify if reset works properly', () => { + beforeEach(() => { + renderCoordinateMap(); + renderDataForCoordinateMap(); + }); + + it('Render coordinate map with all feild data then click on reset and verify reset works properly', () => { + cy.get('input[placeholder="Title"]').type('coordinate map'); + cy.get('textarea[placeholder="Description"]').type('Description For coordinate map'); + cy.get('.euiButton__text').contains('Hidden').click(); + cy.get('.euiButton__text').contains('Right').click(); + cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize); + cy.get('.euiButtonEmpty__text').contains('Reset').click(); + cy.get('input[placeholder="Title"]').should('not.have.value', 'coordinate map'); + cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For coordinate map'); + cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); + cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked'); + cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', ''); + }); +}); diff --git a/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js deleted file mode 100644 index fce5bc392..000000000 --- a/.cypress/integration/VisualizationCharts/9_verticalBar_chart.spec.js +++ /dev/null @@ -1,215 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -/// -import { - delay, - TEST_QUERIES, -} from '../../utils/event_analytics/constants'; - -import { - querySearch, - landOnEventVisualizations, -} from '../../utils/event_analytics/helpers'; - -const numberOfWindow = 6; -const labelSize = 20; -const rotateLevel = 45; -const groupWidth = 10; -const groupWidthUpdated = 0.8; -const barWidth = 10; -const barWidthUpdated = .87; -const lineWidth = 7; -const lineWidthUpdated = 7; -const fillOpacity = 10; -const fillOpacityUpdated = 90; -const numberOfColor = 24; - -const renderVerticalBarChart = () => { - landOnEventVisualizations(); - querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM); - cy.get('[data-test-subj="comboBoxInput"]').click(); - cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Vertical bar').click({ force: true }); -}; - -describe('Adding sample data for visualizations', () => { - it('Adds sample flights data for visualizations to use', () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); - cy.get('div[data-test-subj="sampleDataSetCardlogs"]') - .contains(/(Add|View) data/) - .click(); - }); -}); - -describe('Render vertical bar chart and verify default behaviour ', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and verify by default the data gets render', () => { - cy.get('.xy').should('exist'); - }); - - it('Render vertical bar chart and verify you see data configuration panel and chart panel', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Configuration').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('dimensions').should('exist'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('breakdowns').should('exist'); - cy.get('.euiButton__text').contains('Update chart').should('exist'); - - cy.get('.euiIEFlexWrapFix').contains('Panel options').click(); - cy.get('.euiIEFlexWrapFix').contains('Legend').click(); - cy.get('.euiIEFlexWrapFix').contains('Chart styles').click(); - cy.get('.euiIEFlexWrapFix').contains('Color theme').click(); - }); - - it('Render vertical bar chart and verify the data configuration panel and chart panel are collapsable', () => { - cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow); - cy.get('[aria-label="Press to toggle this panel"]').eq(0).click({ force: true }); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(0).should('exist'); - cy.get('[aria-label="Press to toggle this panel"]').eq(1).click({ force: true }); - cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); - }); -}); - -describe('Render vertical bar chart for data configuration panel', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and verify data config panel', () => { - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'tags'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'count'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'avg bytes'); - cy.get('[data-test-subj="explorer__vizDataConfig-panel"]').eq(0).should('contain', 'host'); - }); - - it('Render vertical bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(4).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('host'); - }); - - it('Render vertical bar chart and verify data config panel Restrict user to select a duplicate field on Series field', () => { - cy.get('[data-test-subj="viz-config-add-btn"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('.euiComboBoxOption__content').contains('count'); - cy.get('.euiComboBoxOption__content').should('not.contain', 'tags'); - }); - - it('Render vertical bar chart and verify data config panel no result found if metric is missing', () => { - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(3).click(); - cy.get('[data-test-subj="viz-config-delete-btn"]').eq(2).click(); - cy.get('.euiButton__text').contains('Update chart').click(); - cy.get('.euiTextColor.euiTextColor--subdued').contains('Invalid visualization data').should('exist'); - cy.get('[data-test-subj="viz-config-add-btn"]').eq(3).click(); - cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxOptionsList "]').contains('host').click(); - cy.get('[data-test-subj="panelCloseBtn"]').click({ force: true }); - cy.get('.euiButton__text').contains('Update chart').click().then(() => { - cy.get('.main-svg').contains('Invalid visualization data').should('not.exist'); - }); - }); -}); - -describe('Render vertical bar chart for panel options', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and verify the title gets updated according to user input ', () => { - cy.get('input[name="title"]').type('horizontal bar chart'); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('.gtitle').contains('horizontal bar chart').should('exist'); - }); -}); - -describe('Render vertical bar chart for legend', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and verify legends for Show and Hidden', () => { - cy.get('#configPanel__legend').contains('Legend'); - cy.get('.euiTitle.euiTitle--xxsmall').contains('Show legend'); - cy.get('[data-text="Show"]').eq(0).contains('Show'); - cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked'); - cy.get('[data-text="Hidden"]').eq(0).contains('Hidden').click(); - cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked'); - cy.get('[data-unformatted="max(bytes)"]').should('not.exist'); - }); - - it('Render vertical bar chart and verify legends for position Right and Bottom', () => { - cy.get('[data-text="Right"]').should('have.text', 'Right'); - cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked'); - cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click(); - cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked'); - }); -}); - -describe('Render vertical bar chart for chart style options', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and increase Label Size ', () => { - cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(labelSize); - cy.get('textarea[name="description"]').should('exist').click(); - cy.get('[data-unformatted="0"]').should('have.css', 'font-size', '20px'); - }); - - it('Render vertical bar chart and "Rotate bar labels"', () => { - cy.get('input[type="range"]') - .eq(0) - .then(($el) => $el[0].stepUp(rotateLevel)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel); - }); - - it('Render vertical bar chart and change "Group Width"', () => { - cy.get('input[type="range"]') - .eq(1) - .then(($el) => $el[0].stepUp(groupWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated); - }); - - it('Render vertical bar chart and change "Bar Width"', () => { - cy.get('input[type="range"]') - .eq(2) - .then(($el) => $el[0].stepDown(barWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(2).should('have.value', barWidthUpdated); - }); - - it('Render vertical bar chart and change "Line Width"', () => { - cy.get('input[type="range"]') - .eq(3) - .then(($el) => $el[0].stepUp(lineWidth)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated); - }); - - it('Render vertical bar chart and change "Fill Opacity"', () => { - cy.get('input[type="range"]') - .eq(4) - .then(($el) => $el[0].stepDown(fillOpacity)) - .trigger('change', { force: true }); - cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated); - }); -}); - -describe('Render vertical bar chart for color theme', () => { - beforeEach(() => { - renderVerticalBarChart(); - }); - - it('Render vertical bar chart and "Add color theme"', () => { - cy.get('.euiButton__text').contains('+ Add color theme').click({ force: true }); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click({ force: true }); - cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click({ force: true }); - }); -}); \ No newline at end of file diff --git a/.cypress/utils/app_constants.js b/.cypress/utils/app_constants.js index 1ea09e351..4d20359f4 100644 --- a/.cypress/utils/app_constants.js +++ b/.cypress/utils/app_constants.js @@ -3,27 +3,31 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { suppressResizeObserverIssue } from './constants'; + export const delay = 1000; export const timeoutDelay = 30000; -export const TYPING_DELAY = 150; +export const TYPING_DELAY = 500; export const moveToHomePage = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-applications#/`); + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); cy.wait(delay * 3); cy.get('.euiTitle').contains('Applications').should('exist'); }; export const moveToCreatePage = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-applications#/`); - cy.get('.euiButton[href="#/create"]').eq(0).click(); + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); + cy.get('.euiButton[href="#/application_analytics/create"]').eq(0).click(); + suppressResizeObserverIssue(); cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Create application'); }; export const moveToApplication = (name) => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-applications#/`); - cy.get('.euiTableRow').should('have.length.greaterThan', 0);//Replaces Wait + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); + suppressResizeObserverIssue(); + cy.wait(delay * 6); cy.get(`[data-test-subj="${name}ApplicationLink"]`).click(); - cy.get('.euiTableRow').should('have.length.lessThan', 1);//Replaces Wait + cy.wait(delay); cy.get('[data-test-subj="applicationTitle"]').should('contain', name); changeTimeTo24('years'); }; @@ -32,14 +36,17 @@ export const moveToEditPage = () => { moveToApplication(nameOne); cy.get('[data-test-subj="app-analytics-configTab"]').click(); cy.get('[data-test-subj="editApplicationButton"]').click(); + suppressResizeObserverIssue(); cy.wait(delay); cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Edit application'); }; export const changeTimeTo24 = (timeUnit) => { cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').trigger('mouseover').click(); + cy.wait(delay); cy.get('[aria-label="Time unit"]').select(timeUnit); cy.get('.euiButton').contains('Apply').click(); + cy.wait(delay); cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); }; diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js index af655fbe3..194fe0e97 100644 --- a/.cypress/utils/constants.js +++ b/.cypress/utils/constants.js @@ -11,7 +11,6 @@ export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d'; export const SPAN_ID = 'a673bc074b438374'; export const SERVICE_NAME = 'frontend-client'; export const SERVICE_SPAN_ID = '7df5609a6d104736'; -export const AUTH_SERVICE_SPAN_ID = '277a5934acf55dcf'; export const testDataSet = [ { @@ -72,8 +71,6 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => { // notebooks export const TEST_NOTEBOOK = 'Test Notebook'; -export const TEST_INTEGRATION_INSTANCE = 'nginx-test'; -export const TEST_SAMPLE_INSTANCE = 'nginx-sample'; export const SAMPLE_URL = 'https://github.com/opensearch-project/sql/tree/main/sql-jdbc'; export const NOTEBOOK_TEXT = 'Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.'; export const OPENSEARCH_URL = 'https://opensearch.org/docs/latest/observability-plugin/notebooks/'; diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js index bbbe86ef2..5c5063a36 100644 --- a/.cypress/utils/event_analytics/constants.js +++ b/.cypress/utils/event_analytics/constants.js @@ -3,6 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue } from '../constants'; + export const delay = 1000; export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]'; @@ -52,23 +54,202 @@ export const TEST_QUERIES = [ }, ]; -export const aggregationValues = [ - 'count', - 'sum', - 'avg', - 'max', - 'min', - 'var_samp', - 'var_pop', - 'stddev_samp', - 'stddev_pop', -]; - export const TESTING_PANEL = 'Mock Testing Panels'; export const SAVE_QUERY1 = 'Mock Flight Events Overview'; export const SAVE_QUERY2 = 'Mock Flight count by destination'; export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel'; export const SAVE_QUERY4 = 'Mock Flight peek'; + +export const aggregationValues = [ + 'COUNT', + 'SUM', + 'AVERAGE', + 'MAX', + 'MIN', + 'VAR_SAMP', + 'VAR_POP', + 'STDDEV_SAMP', + 'STDDEV_POP', +]; + +export const querySearch = (query, rangeSelected) => { + cy.get('[data-test-subj="searchAutocompleteTextArea"]', { timeout: COMMAND_TIMEOUT_LONG }) + .clear() + .focus() + .type(query, { delay: 50 }); + suppressResizeObserverIssue(); + cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); + cy.get(rangeSelected).click(); + cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); +}; + +export const landOnEventHome = () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs/`); +}; + +export const landOnEventExplorer = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` + ); +}; + +export const landOnEventVisualizations = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` + ); + suppressResizeObserverIssue(); // have to add + cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); +}; + +export const landOnPanels = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` + ); + cy.wait(delay); +}; + +const vis_name_sub_string = Math.floor(Math.random() * 100); +export const saveVisualizationAndVerify = () => { + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); + cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); + cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); + cy.get( + '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]' + ) + .eq(0) + .click(); + cy.get('.euiPopover__panel input') + .eq(1) + .type(`Test visualization` + vis_name_sub_string); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + cy.wait(delay); + cy.get('.euiHeaderBreadcrumbs a').eq(1).click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') + .eq(0) + .type(`Test visualization` + vis_name_sub_string) + .type('{enter}'); + cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); +}; + +export const deleteVisualization = () => { + cy.get('a[href = "#/event_analytics"]').click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') + .eq(0) + .type(`Test visualization` + vis_name_sub_string) + .type('{enter}'); + cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); + cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); + cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); + cy.get('input[placeholder = "delete"]').clear().type('delete'); + cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); + cy.get('.euiToastHeader').should('exist'); +}; + +export const renderTreeMapchart = () => { + querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Tree Map') + .type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]') + .click() + .type('This is the description for Tree Map'); + cy.get('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist'); + cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); + cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click(); + cy.get('button[name="Slice Dice"]').click(); +}; + +export const renderPieChart = () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click(); + cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click(); + cy.wait(delay); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]') + .click() + .type('This is the description for Pie chart'); + cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend'); + cy.get('span[data-text="Show"]').contains('Show').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position'); + cy.get('span[data-text="Right"]').contains('Right').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size'); + cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist'); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click(); + cy.get( + '#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable' + ).click(); + cy.get('.euiComboBoxOption__content').contains('Donut').click(); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size'); + cy.get('#configPanel__chartStyles input[type="number"]').click().type('10'); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme'); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiColorPalettePicker__item').eq(1).contains('Single Color').click(); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); + cy.get('[aria-label="Select #D36086 as the color"]').click(); + cy.get('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]') + .contains('Preview') + .click(); + cy.get('.plot-container.plotly').should('exist'); +}; + +export const renderDataConfig = () => { + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Cofigurations'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(1).contains('Field'); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFieldText[placeholder="Custom label"]').eq(0).type('Average field'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(2).contains('Metrics').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); + cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(4).click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Min field'); + cy.get('.euiButton__text').contains('Right').click(); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').contains('Update chart').click(); + cy.get('.js-plotly-plot').should('exist'); +}; + +export const renderLineChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Line') + .type('{enter}'); +}; + +export const renderAddParent = () => { + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist'); + cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist'); + cy.get('p.euiComboBoxPlaceholder').click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist'); + cy.get('p.euiComboBoxPlaceholder').click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Line') + .type('{enter}'); +}; + +export const renderGaugeChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Gauge') + .type('{enter}'); +}; + export const HOST_TEXT_1 = "artifacts.opensearch.org"; export const HOST_TEXT_2 = "www.opensearch.org"; export const HOST_TEXT_3 = "cdn.opensearch-opensearch-opensearch.org"; diff --git a/.cypress/utils/event_analytics/helpers.js b/.cypress/utils/event_analytics/helpers.js index a2f5c392f..32944db75 100644 --- a/.cypress/utils/event_analytics/helpers.js +++ b/.cypress/utils/event_analytics/helpers.js @@ -3,80 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue, delay } from '../constants'; +import { COMMAND_TIMEOUT_LONG } from '../constants'; export const clearQuerySearchBoxText = (testSubjectName) => { cy.get(`[data-test-subj="${testSubjectName}"]`, { timeout: COMMAND_TIMEOUT_LONG, }).clear({ force: true }); }; - -export const querySearch = (query, rangeSelected) => { - cy.get('[data-test-subj="searchAutocompleteTextArea"]', { timeout: COMMAND_TIMEOUT_LONG }) - .clear() - .focus() - .type(query); - suppressResizeObserverIssue(); - cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); - cy.get(rangeSelected).click(); - cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click(); -}; - -export const landOnEventHome = () => { - cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-logs/`); -}; - -export const landOnEventExplorer = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` - ); -}; - -export const landOnEventVisualizations = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-logs#/explorer` - ); - suppressResizeObserverIssue(); // have to add - cy.get('button[id="main-content-vis"]').contains('Visualizations').click(); -}; - -export const landOnPanels = () => { - cy.visit( - `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/` - ); - cy.wait(delay); -}; - -const vis_name_sub_string = Math.floor(Math.random() * 100); -export const saveVisualizationAndVerify = () => { - cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click(); - cy.get('.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]') - .eq(0) - .click({ force: true }); - cy.get('.euiPopover__panel input') - .eq(1) - .type(`Test visualization` + vis_name_sub_string, { force: true }); - cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true }); - cy.wait(delay); - cy.get('.euiHeaderBreadcrumbs a').eq(1).click({ force: true }); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization` + vis_name_sub_string) - .type('{enter}'); - cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); -}; - -export const deleteVisualization = () => { - cy.get('a[href = "#/"]').click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') - .eq(0) - .type(`Test visualization` + vis_name_sub_string) - .type('{enter}'); - cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); - cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); - cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); - cy.get('input[placeholder = "delete"]').clear().type('delete'); - cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); - cy.get('.euiToastHeader').should('exist'); -}; diff --git a/.cypress/utils/panel_constants.js b/.cypress/utils/panel_constants.js index de009ccf9..cc173d807 100644 --- a/.cypress/utils/panel_constants.js +++ b/.cypress/utils/panel_constants.js @@ -20,9 +20,9 @@ export const SAMPLE_VISUALIZATIONS_NAMES = [ ]; export const PPL_VISUALIZATIONS = [ - 'source = opensearch_dashboards_sample_data_flights | stats count(Dest) by Dest', + 'source = opensearch_dashboards_sample_data_flights | stats count() by Dest', 'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier', - 'source = opensearch_dashboards_sample_data_flights | stats max( DistanceKilometers ) by Dest', + 'source = opensearch_dashboards_sample_data_flights | stats max( DistanceKilometers ) by DestCityName', ]; export const PPL_VISUALIZATIONS_NAMES = [ @@ -31,12 +31,6 @@ export const PPL_VISUALIZATIONS_NAMES = [ 'Max distance by destination city', ]; -export const PPL_VISUALIZATION_CONFIGS = [ - '{"dataConfig":{"series":[{"customLabel":"","label":"Dest","name":"Dest","aggregation":"count"}],"dimensions":[{"label":"Dest","name":"Dest"}],"breakdowns":[]}}', - '{"dataConfig":{"series":[{"customLabel":"","label":"FlightDelayMin","name":"FlightDelayMin","aggregation":"avg"}],"dimensions":[{"label":"Dest","name":"Dest"}],"breakdowns":[]}}', - '{"dataConfig":{"series":[{"label":"DistanceKilometers","name":"DistanceKilometers","aggregation":"max","customLabel":""}],"dimensions":[{"label":"Dest","name":"Dest"}]}}', -]; - export const NEW_VISUALIZATION_NAME = 'Flight count by destination airport'; export const PPL_FILTER = "where Carrier = 'OpenSearch-Air' | where Dest = 'Munich Airport'"; diff --git a/.env b/.env deleted file mode 100644 index ce311ad44..000000000 --- a/.env +++ /dev/null @@ -1,3 +0,0 @@ -# version for opensearch & opensearch-dashboards docker image -VERSION=3.0.0 - diff --git a/.eslintrc.js b/.eslintrc.js index 35fde0175..f8dd0a681 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,11 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -const LICENSE_HEADER = `/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */`; - module.exports = { root: true, extends: [ @@ -20,12 +15,6 @@ module.exports = { files: ['**/*.{js,ts,tsx}'], rules: { 'no-console': 0, - '@osd/eslint/require-license-header': [ - 'error', - { - licenses: [LICENSE_HEADER], - }, - ], }, }, ], diff --git a/.github/ISSUE_TEMPLATE/integration_request.md b/.github/ISSUE_TEMPLATE/integration_request.md deleted file mode 100644 index a8a632924..000000000 --- a/.github/ISSUE_TEMPLATE/integration_request.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -name: 🎆 Integration suggestion -about: Suggest an integration -title: '[Integration]' -labels: 'integration, untriaged' -assignees: '' ---- - -**What is the integration resource ?** - -Describe the integration resource you are interested in and attach a link to the integration resource [ [`Nginx`](https://www.nginx.com/) for example ...]_ - -**What is the integration source protocol ?** - -Describe the integration resource log protocol you are interesting in [ [`access.log`](https://nginx.org/en/docs/http/ngx_http_log_module.html?&_ga=2.217812566.1563503332.1689381945-1241118970.1689381945#log_format) for example ] - -**What is the integration target protocol ?** - -Describe the target protocol you are interested to ingest [ for example [`logs.mapping`](https://github.com/opensearch-project/opensearch-catalog/blob/main/schema/observability/logs/logs.mapping) , [`http.mapping`](https://github.com/opensearch-project/opensearch-catalog/blob/main/schema/observability/logs/http.mapping) ] - -**Which agents would you use to ship this data ?** - -Describe the agents you may be using to ship this telemetry data [ OTEL receiver / Fluent-bit / Telegraf / collectd ] - -**Would you be using an ingestion pipeline ?** - -Describe whether you may be using an ingestion pipeline to collect and enrich the data on-route [ OTEL Collector / Data-Prepper / ADOT collector ] - -**Which Dashboards would you be using ?** - -Describe the dashboard you would like to see on-top of the ingested telemetry signals ?[Try adding screenshots & descriptions] - - ----- - -**Do you have any additional context?** - -Add any other context or screenshots about the feature request here. \ No newline at end of file diff --git a/.github/workflows/backport.yml b/.github/workflows/backport.yml index 6472a968d..e47d8d88c 100644 --- a/.github/workflows/backport.yml +++ b/.github/workflows/backport.yml @@ -7,7 +7,6 @@ on: jobs: backport: - if: github.event.pull_request.merged == true runs-on: ubuntu-latest permissions: contents: write @@ -23,8 +22,7 @@ jobs: installation_id: 22958780 - name: Backport - uses: VachaShah/backport@v2.2.0 + uses: VachaShah/backport@v1.1.4 with: github_token: ${{ steps.github_app_token.outputs.token }} - head_template: backport/backport-<%= number %>-to-<%= base %> - failure_labels: backport-failed + branch_name: backport/backport-${{ github.event.number }} diff --git a/.github/workflows/dashboards-observability-test-and-build-workflow.yml b/.github/workflows/dashboards-observability-test-and-build-workflow.yml index e9002ab81..5f04b6a1d 100644 --- a/.github/workflows/dashboards-observability-test-and-build-workflow.yml +++ b/.github/workflows/dashboards-observability-test-and-build-workflow.yml @@ -14,8 +14,6 @@ jobs: strategy: matrix: os: [ubuntu-latest, windows-latest, macos-latest] - # Since Windows is inconsistent, we want to let other OSes run on a fail - fail-fast: false runs-on: ${{ matrix.os }} steps: @@ -53,25 +51,16 @@ jobs: with: path: OpenSearch-Dashboards/plugins/dashboards-observability - - name: Load Plugin Bootstrap cache - uses: actions/cache@v3 - with: - path: | - **/node_modules - **/target - key: ${{ runner.os }}-bootstrap-${{ hashFiles('OpenSearch-Dashboards/yarn.lock', 'OpenSearch-Dashboards/plugins/dashboards-observability/yarn.lock') }} - restore-keys: ${{ runner.os }}-bootstrap- - name: Plugin Bootstrap run: | - cd OpenSearch-Dashboards - yarn config set network-timeout 1000000 -g - yarn osd bootstrap || yarn osd bootstrap + cd OpenSearch-Dashboards/plugins/dashboards-observability + yarn osd bootstrap - name: Test all dashboards-observability modules run: | cd OpenSearch-Dashboards/plugins/dashboards-observability - yarn test --coverage --maxWorkers=100% + yarn test --coverage - name: Upload coverage if: ${{ matrix.os == 'ubuntu-latest' }} @@ -91,4 +80,4 @@ jobs: uses: actions/upload-artifact@v1 with: name: dashboards-observability-${{ matrix.os }} - path: ./OpenSearch-Dashboards/plugins/dashboards-observability/build + path: ./OpenSearch-Dashboards/plugins/dashboards-observability/build \ No newline at end of file diff --git a/.github/workflows/integration-tests-workflow.yml b/.github/workflows/integration-tests-workflow.yml deleted file mode 100644 index 37a8bda54..000000000 --- a/.github/workflows/integration-tests-workflow.yml +++ /dev/null @@ -1,163 +0,0 @@ -name: Dashboards observability plugin E2E test -on: [pull_request, push] -env: - PLUGIN_NAME: dashboards-observability - OPENSEARCH_DASHBOARDS_VERSION: 'main' - OPENSEARCH_VERSION: '3.0.0' - OPENSEARCH_PLUGIN_VERSION: '3.0.0.0' - -jobs: - tests: - env: - # Prevents extra Cypress installation progress messages - CI: 1 - # Avoid warnings like "tput: No value for $TERM and no -T specified" - TERM: xterm - WORKING_DIR: ${{ matrix.working_directory }}. - - strategy: - fail-fast: false - matrix: - os: [ubuntu-latest] - java: [11] - include: - - os: ubuntu-latest - cypress_cache_folder: ~/.cache/Cypress - - runs-on: ${{ matrix.os }} - - steps: - - name: Set up Java 11 - uses: actions/setup-java@v3 - with: - distribution: 'corretto' - java-version: '11' - - - name: Download observability artifact - uses: peternied/download-file@v2 - with: - url: https://ci.opensearch.org/ci/dbc/distribution-build-opensearch/${{ env.OPENSEARCH_VERSION }}/latest/linux/x64/tar/builds/opensearch/plugins/opensearch-observability-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip - - - name: Download SQL artifact - uses: peternied/download-file@v2 - with: - url: https://ci.opensearch.org/ci/dbc/distribution-build-opensearch/${{ env.OPENSEARCH_VERSION }}/latest/linux/x64/tar/builds/opensearch/plugins/opensearch-sql-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip - - - name: Download OpenSearch - uses: peternied/download-file@v2 - with: - url: https://artifacts.opensearch.org/snapshots/core/opensearch/${{ env.OPENSEARCH_VERSION }}-SNAPSHOT/opensearch-min-${{ env.OPENSEARCH_VERSION }}-SNAPSHOT-linux-x64-latest.tar.gz - - - name: Extract OpenSearch - run: | - tar -xzf opensearch-*.tar.gz - rm -f opensearch-*.tar.gz - shell: bash - - - name: Install observability plugin - run: | - /bin/bash -c "yes | ./opensearch-${{ env.OPENSEARCH_VERSION }}-SNAPSHOT/bin/opensearch-plugin install file:$(pwd)/opensearch-observability-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip" - shell: bash - - - name: Install linux SQL plugin - run: | - /bin/bash -c "yes | ./opensearch-${{ env.OPENSEARCH_VERSION }}-SNAPSHOT/bin/opensearch-plugin install file:$(pwd)/opensearch-sql-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip" - shell: bash - - - name: Run OpenSearch - run: /bin/bash -c "./opensearch-${{ env.OPENSEARCH_VERSION }}-SNAPSHOT/bin/opensearch &" - shell: bash - - - name: Sleep while OpenSearch starts - uses: peternied/action-sleep@v1 - with: - seconds: 30 - - - name: Checkout OpenSearch Dashboards - uses: actions/checkout@v2 - with: - repository: opensearch-project/Opensearch-Dashboards - ref: ${{ env.OPENSEARCH_DASHBOARDS_VERSION }} - path: OpenSearch-Dashboards - - - name: Checkout dashboards observability - uses: actions/checkout@v2 - with: - path: OpenSearch-Dashboards/plugins/dashboards-observability - - - name: Get node and yarn versions - working-directory: ${{ env.WORKING_DIR }} - id: versions_step - run: | - echo "::set-output name=node_version::$(node -p "(require('./OpenSearch-Dashboards/package.json').engines.node).match(/[.0-9]+/)[0]")" - echo "::set-output name=yarn_version::$(node -p "(require('./OpenSearch-Dashboards/package.json').engines.yarn).match(/[.0-9]+/)[0]")" - - - name: Setup node - uses: actions/setup-node@v1 - with: - node-version: ${{ steps.versions_step.outputs.node_version }} - registry-url: 'https://registry.npmjs.org' - - - name: Install correct yarn version for OpenSearch Dashboards - run: | - npm uninstall -g yarn - echo "Installing yarn ${{ steps.versions_step.outputs.yarn_version }}" - npm i -g yarn@${{ steps.versions_step.outputs.yarn_version }} - - - name: Bootstrap the plugin - run: | - cd OpenSearch-Dashboards/plugins/dashboards-observability - yarn osd bootstrap - - - name: Run OpenSearch Dashboards server - run: | - cd OpenSearch-Dashboards - yarn start --no-base-path --no-watch & - sleep 400 - - - name: Install Cypress - run: | - cd ./OpenSearch-Dashboards/plugins/dashboards-observability - npx cypress install - shell: bash - - - name: Get Cypress version - id: cypress_version - run: | - cd ./OpenSearch-Dashboards/plugins/dashboards-observability - echo "::set-output name=cypress_version::$(cat ./package.json | jq '.dependencies.cypress' | tr -d '"')" - - - name: Cache Cypress - id: cache-cypress - uses: actions/cache@v2 - with: - path: ${{ matrix.cypress_cache_folder }} - key: cypress-cache-v2-${{ runner.os }}-${{ hashFiles('OpenSearch-Dashboards/plugins/dashboards-observability/package.json') }} - - - name: Reset npm's script shell - if: ${{ matrix.os == 'windows-latest' }} - run: | - npm config delete script-shell - - - name: Cypress tests - uses: cypress-io/github-action@v2 - with: - working-directory: OpenSearch-Dashboards/plugins/dashboards-observability - command: yarn cypress:parallel --browser chrome - wait-on: 'http://localhost:5601' - env: - CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }} - - - name: Capture failure screenshots - uses: actions/upload-artifact@v1 - if: failure() - with: - name: cypress-screenshots-${{ matrix.os }} - path: OpenSearch-Dashboards/plugins/dashboards-observability/.cypress/screenshots - - - name: Capture test video - uses: actions/upload-artifact@v1 - if: always() - with: - name: cypress-videos-${{ matrix.os }} - path: OpenSearch-Dashboards/plugins/dashboards-observability/.cypress/videos diff --git a/DEVELOPER_GUIDE.md b/DEVELOPER_GUIDE.md index f917628f7..8093ce576 100644 --- a/DEVELOPER_GUIDE.md +++ b/DEVELOPER_GUIDE.md @@ -4,10 +4,16 @@ So you want to contribute code to this project? Excellent! We're glad you're her ### Setup -1. Git clone OpenSearch-Dashboard for the version that matches the version you want to use [OpenSearch-Dashboards](https://github.com/opensearch-project/OpenSearch-Dashboards) -2. Change your node version to the version specified in `.node-version` inside the OpenSearch Dashboards root directory. (using [nvm](https://github.com/nvm-sh/nvm) can help for that) -3. Change directory into `OpenSearch-Dashboards` and git Clone the [Observability-Dashboard](https://github.com/opensearch-project/dashboards-observability) into the `plugins/` directory. -4. Run `yarn osd bootstrap` inside `OpenSearch-Dashboards`. +1. Download OpenSearch for the version that matches the [OpenSearch Dashboards version specified in opensearch_dashboards.json](./dashboards-observability/opensearch_dashboards.json#L4) from [opensearch.org](https://opensearch.org/downloads.html). +1. Download the OpenSearch Dashboards source code for the [version specified in opensearch_dashboards.json](./dashboards-observability/opensearch_dashboards.json#L4) you want to set up. +1. Change your node version to the version specified in `.node-version` inside the OpenSearch Dashboards root directory. +1. cd into `OpenSearch-Dashboards` and remove the `plugins` directory. +1. Check out this package from version control as the `plugins/dashboards-observability` directory. +```bash +git clone https://github.com/opensearch-project/dashboards-observability plugins +git checkout main +``` +6. Run `yarn osd bootstrap` inside `OpenSearch-Dashboards`. Ultimately, your directory structure should look like this: @@ -22,15 +28,11 @@ Ultimately, your directory structure should look like this: To build the plugin's distributable zip simply run `yarn build`. -The output file : `./build/observabilityDashboards-?.?.?.zip` (`?.?.?` stands for the version number) - -### Run Directly - -Cd back to `OpenSearch-Dashboards` directory and run `yarn start` to start OpenSearch Dashboards including this plugin. OpenSearch Dashboards will be available on `localhost:5601`. +Example output: `./build/observability*.zip` -### Run Docker +### Run -Run `docker-compose up -d` after changing the [Dockerfile](Dockerfile) as described in this [tutorial](Using-Docker.md) +cd back to `OpenSearch-Dashboards` directory and run `yarn start` to start OpenSearch Dashboards including this plugin. OpenSearch Dashboards will be available on `localhost:5601`. ### Submitting Changes diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index f6cef1862..000000000 --- a/Dockerfile +++ /dev/null @@ -1,21 +0,0 @@ -# Declare a build argument for the version -ARG VERSION - -# Use OpenSearch image as base -FROM opensearchproject/opensearch-dashboards:${VERSION} - -# Copy plugin zip into image -COPY ./build /tmp - -USER root -RUN mv /tmp/observabilityDashboards*.zip /tmp/observabilityDashboards.zip -USER opensearch-dashboards - -RUN /usr/share/opensearch-dashboards/bin/opensearch-dashboards-plugin remove observabilityDashboards && \ - /usr/share/opensearch-dashboards/bin/opensearch-dashboards-plugin install file:///tmp/observabilityDashboards.zip - -USER root -RUN rm -r /tmp/observabilityDashboards.zip - -# Switch back to opensearch user -USER opensearch-dashboards diff --git a/README.md b/README.md index fa98f08fa..a098f3ffd 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,8 @@ Observability is collection of plugins and applications that let you visualize d ## Plugin Components +The Dashboards Observability plugin has four components: Trace Analytics, Event Analytics, Operational Panels, and Notebooks. + ### Trace Analytics Trace Analytics page provides instant on dashboards in OpenSearch Dashboards for users to quickly analyze their logs. The plugin uses aggregated results from two indices, `otel-v1-apm-span-*` and `otel-v1-apm-service-map*` created by the otel-trace-raw-processor and service-map-processor, and renders three main views: @@ -91,11 +93,6 @@ Additionally the fields can be sorted and filtered. Event Analytics allows user to monitor, correlate, analyze and visualize machine generated data through [Piped Processing Language](https://opensearch.org/docs/latest/observability-plugins/ppl/index/). It also enables the user to turn data-driven events into visualizations and save frequently used ones for quick access. -### Metrics Analytics - -Metrics Analytics allows ingesting and visualize metric data from log data aggregated within OpenSearch, allowing you to analyze and correlate data across logs, traces, and metrics. -Previously, you could ingest and visualize only logs and traces from your monitored environments. Using Metrics Analytics one can observe your digital assets with more granularity, gain deeper insight into the health of your infrastructure, and better inform your root cause analysis. - ### Operational Panels Operational panels provides the users to create and view different visualizations on ingested observability data, using Piped Processing Language queries. Use PPL 'where clauses' and datetime timespans to filter all visualizations in the panel. @@ -104,40 +101,13 @@ Operational panels provides the users to create and view different visualization Dashboards offer a solution for a few selected use cases, and are great tools if you’re focused on monitoring a known set of metrics over time. Notebooks enables contextual use of data with detailed explanations by allowing a user to combine saved visualizations, text, graphs and decorate data with other reference data sources. -### Integrations -Integration is a new type of logical component that allows high level composition of multiple Dashboards / Applications / Queries and more. Integrations can be used to bring together all the metrics and logs from the infrastructure and gain insight into the unified system as a whole. - ---- - -Integration usually consist of the following assets: -- dashboards & visualization -- schema configuration (mapping & templates) -- data on-boarding (sample data) - -[See Integration Documentation](https://github.com/opensearch-project/dashboards-observability/wiki/Integration-Documentation-Reference) - -[See Integration Tutorial](https://github.com/opensearch-project/dashboards-observability/wiki/Integration-Creation-Guide) - -Please See additional information [documentation](https://opensearch.org/docs/latest/integrations/index) - -> Integration Spec [RFC](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/3412#schema-support-for-observability) - -### Observability Correlation -In order to be able to correlate information across different signal (represented in different indices) we introduced the notion of correlation into the schema. This information is represented explicitly in both the declarative schema file and the physical mapping file. -Using this metadata information will enable the knowledge to be projected and allow for analytic engine to produce a join query that will take advantage of these relationships. - -The Observability dashboard vision of [telemetry Data Correlation](https://github.com/opensearch-project/dashboards-observability/wiki/Observability-Future-Vision) - ---- -## WIKI Home -Please see our WIKI page for additional information [WIKI](https://opensearch.org/docs/latest/observability/index/) to learn more about our features. - ## Documentation + Please see our technical [documentation](https://opensearch.org/docs/latest/observability/index/) to learn more about its features. ## Contributing -- See [developer guide](DEVELOPER_GUIDE.md) and [how to contribute to this project](CONTRIBUTING.md). -- See [Integration Contribution Guide](https://github.com/opensearch-project/dashboards-observability/wiki/Integration-Creation-Guide) for integration creation additional context + +See [developer guide](DEVELOPER_GUIDE.md) and [how to contribute to this project](CONTRIBUTING.md). ## Getting Help @@ -159,9 +129,4 @@ This project is licensed under the [Apache v2.0 License](LICENSE). ## Copyright -Copyright OpenSearch Contributors. See [NOTICE](NOTICE) for details. - -## Screenshots - -