Merge pull request opensearch-project#7 from shankha-das/enhancement/…

…heatmap-787 Enhancement/heatmap 787
mrunal-z · Jun 24, 2022 · ea86f41 · ea86f41
2 parents ba50689 + b802383
commit ea86f41
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 140 deletions.
diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
@@ -18,6 +18,10 @@ import {
   landOnEventExplorer,
   landOnEventVisualizations,
   landOnPanels,
+  renderTreeMapchart,
+  renderPieChart,
+  renderLineChartForDataConfig,
+  DataConfigLineChart
 } from '../utils/event_constants';
 import { supressResizeObserverIssue } from '../utils/constants';
 
@@ -845,4 +849,11 @@ describe('Render Table View', () => {
     cy.get('.euiButtonEmpty__text').eq('6').click();
     cy.get('.euiContextMenuItem__text').eq(1).click();
   });
-});
+});
+
+describe('Render Time series chart/Line chart and verify Data configurations UI ', () => {
+  it('Render line chart and verify Data Configuration Panel', () => {
+    renderLineChartForDataConfig();
+    DataConfigLineChart();
+  });
+});
diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js
@@ -79,3 +79,62 @@ export const landOnPanels = () => {
   );
   cy.wait(delay);
 };
+
+export const renderTreeMapchart = () => {
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].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('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click();
+    cy.get('.euiComboBoxOption__content').eq(2).click();
+    cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click();
+    cy.get('.euiComboBoxOption__content').eq(1).click();
+    cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
+    cy.get('.euiComboBoxOption__content').eq(0).click();
+    cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist');
+    cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
+    cy.get('[data-test-subj = "comboBoxInput"]').eq(4).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('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('[name="count()"]').eq(0).click();
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
+};
+
+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}');
+};
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
@@ -230,3 +230,17 @@ export interface LiveTailProps {
   isLiveTailPopoverOpen: boolean;
   dataTestSubj: string;
 }
+
+export interface ConfigListEntry {
+  label: string;
+  aggregation: string;
+  custom_label: string;
+  name: string;
+  side: string;
+  type: string;
+}
+
+export interface ConfigList {
+  dimensions?: ConfigListEntry[];
+  metrics?: ConfigListEntry[];
+}
diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1277,20 +1277,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
-                          Object {
-                            "editor": [Function],
-                            "id": "value_options",
-                            "mapTo": "valueOptions",
-                            "name": "Value options",
-                            "schemas": Array [
-                              Object {
-                                "component": null,
-                                "isSingleSelection": true,
-                                "mapTo": "zaxis",
-                                "name": "Z-axis",
-                              },
-                            ],
-                          },
                           Object {
                             "editor": [Function],
                             "id": "chart_styles",