From 694589cd07cdfb7fc43e352c3b292b5bde7cab1b Mon Sep 17 00:00:00 2001 From: Shenoy Pratik Date: Wed, 13 Apr 2022 09:23:26 -0700 Subject: [PATCH] updated events flyout ui, unskip jest tests (#638) Signed-off-by: Shenoy Pratik --- .../custom_panel_view.test.tsx.snap | 3115 ++++---------- .../__tests__/custom_panel_view.test.tsx | 2 +- .../__snapshots__/utils.test.tsx.snap | 3614 ++++++++++++++--- .../helpers/__tests__/utils.test.tsx | 16 +- .../visualization_container.test.tsx.snap | 151 +- .../visualization_container.test.tsx | 2 +- .../__snapshots__/data_grid.test.tsx.snap | 100 +- .../__snapshots__/docViewerRow.test.tsx.snap | 50 +- .../components/explorer/docTable/docView.scss | 4 +- .../explorer/docTable/docViewRow.tsx | 13 +- 10 files changed, 3886 insertions(+), 3181 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap index 8d81dec7f..1ae063c63 100644 --- a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap @@ -72,11 +72,20 @@ exports[`Panels View Component renders panel view container with visualizations } cloneCustomPanel={[MockFunction]} deleteCustomPanel={[MockFunction]} + dslService={ + DSLService { + "fetch": [Function], + "fetchFields": [Function], + "fetchIndices": [Function], + "http": [MockFunction], + } + } endTime="now" http={[MockFunction]} + onEditClick={[Function]} page="operationalPanels" panelId="L8Sx53wBDp0rvEg3yoLb" - parentBreadcrumb={ + parentBreadcrumbs={ Array [ Object { "href": "#/operational_panels/", @@ -101,19 +110,22 @@ exports[`Panels View Component renders panel view container with visualizations startTime="now-30m" >
- +
-
-
-
- - - - - -
+ + + + +
- +
@@ -357,38 +374,33 @@ exports[`Panels View Component renders panel view container with visualizations
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" + - + Add visualization + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" >
- Add Visualization + Add visualization @@ -469,15 +488,15 @@ exports[`Panels View Component renders panel view container with visualizations
- - + +
-
+
- } - disabled={true} - fullWidth={true} - onChange={[Function]} - onKeyPress={[Function]} + baseQuery="source = " + dslService={ + DSLService { + "fetch": [Function], + "fetchFields": [Function], + "fetchIndices": [Function], + "http": [MockFunction], + } + } + getSuggestions={[Function]} + handleQueryChange={[Function]} + handleQuerySearch={[Function]} + isDisabled={true} + key="autocomplete-search-bar" + onItemSelect={[Function]} placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" - value="" + possibleCommands={ + Array [ + Object { + "label": "where", + }, + ] + } + query="" + tabId="panels-filter" + tempQuery="" > - - PPL - - } - fullWidth={true} +
-
-
- - - - -
- - - -
- - + + } + aria-autocomplete="both" + aria-labelledby="autocomplete-4-label" + autoCapitalize="off" + autoComplete="off" + autoCorrect="off" + autoFocus={false} + data-test-subj="searchAutocompleteTextArea" + disabled={true} + enterKeyHint="search" + fullWidth={true} + id="autocomplete-textarea" + maxLength={512} + onBlur={[Function]} + onChange={[Function]} + onClick={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" + spellCheck="false" + type="search" + value="" + > + + PPL + + } + fullWidth={true} + inputId="autocomplete-textarea" + > +
+
+ + + + +
+ + + +
+ + +
+
-
-
- - - -
+ + + +
- +
@@ -1196,38 +1290,33 @@ exports[`Panels View Component renders panel view container with visualizations
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" + - + Add visualization + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" >
- Add Visualization + Add visualization @@ -1308,8 +1404,8 @@ exports[`Panels View Component renders panel view container with visualizations
- - + +
@@ -1397,6 +1493,7 @@ exports[`Panels View Component renders panel view container with visualizations editMode={false} endTime="now" http={[MockFunction]} + onEditClick={[Function]} onRefresh={false} panelId="L8Sx53wBDp0rvEg3yoLb" panelVisualizations={Array []} @@ -1527,7 +1624,7 @@ exports[`Panels View Component renders panel view container with visualizations `; -exports[`Panels View Component renders panel view container with visualizations 2`] = ` +exports[`Panels View Component renders panel view container without visualizations 1`] = ` -
- -
- -
- -
- -
- -

- - -
- -
- -
- - Created on - Invalid date -
- - -
- -
- -
- - - - - -
- - -
- - Panel actions - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - withTitle={true} - > - -
-
- - - - - -
-
- - -
- - -
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - > - -
-
- - - - - -
-
- - -
- -
- -
- -

- - -
- -
- -
- - PPL - - } - disabled={true} - fullWidth={true} - onChange={[Function]} - onKeyPress={[Function]} - placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" - value="" - > - - PPL - - } - fullWidth={true} - > -
-
- - - - -
- - - -
- - -
- - -
- - -
- -
- - } - > -
- - - - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="QuickSelectPopover" - isOpen={false} - ownFocus={true} - panelPaddingSize="m" - > - -
-
- - - -
-
- - - -
- } - iconType={false} - isCustom={true} - startDateControl={
} - > -
- -
- - -
-
- -
- - -
- - - - - - - - - - - -
- -
- - -
- -
- - -
- - -
- -
- - -
- -
-

- Start by adding - your first visualization -

- -
- - -
- -
- Use PPL Queries to fetch & filter observability data and create - visualizations -
- -
- -
- -
- - -
- - -
- -
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - > - -
-
- - - - - -
-
- - -
- -
- - -
- -
- - - - - -
- - - - -
- -
- -
- -
- -`; - -exports[`Panels View Component renders panel view container without visualizations 1`] = ` -
- +
-
-
-
- - - - - -
+ + + + +
- +
@@ -3582,38 +1989,33 @@ exports[`Panels View Component renders panel view container without visualizatio
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" + - + Add visualization + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" >
- Add Visualization + Add visualization @@ -3689,15 +2098,15 @@ exports[`Panels View Component renders panel view container without visualizatio
- - + +
-
+
- } - disabled={true} - fullWidth={true} - onChange={[Function]} - onKeyPress={[Function]} + baseQuery="source = " + dslService={ + DSLService { + "fetch": [Function], + "fetchFields": [Function], + "fetchIndices": [Function], + "http": [MockFunction], + } + } + getSuggestions={[Function]} + handleQueryChange={[Function]} + handleQuerySearch={[Function]} + isDisabled={true} + key="autocomplete-search-bar" + onItemSelect={[Function]} placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" - value="" + possibleCommands={ + Array [ + Object { + "label": "where", + }, + ] + } + query="" + tabId="panels-filter" + tempQuery="" > - - PPL - - } - fullWidth={true} +
-
-
- - - - -
- - - -
- - + + } + aria-autocomplete="both" + aria-labelledby="autocomplete-1-label" + autoCapitalize="off" + autoComplete="off" + autoCorrect="off" + autoFocus={false} + data-test-subj="searchAutocompleteTextArea" + disabled={true} + enterKeyHint="search" + fullWidth={true} + id="autocomplete-textarea" + maxLength={512} + onBlur={[Function]} + onChange={[Function]} + onClick={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" + spellCheck="false" + type="search" + value="" + > + + PPL + + } + fullWidth={true} + inputId="autocomplete-textarea" + > +
+
+ + + + +
+ + + +
+ + +
+
-
-
- - - -
+ + + +
- +
@@ -4402,38 +2886,33 @@ exports[`Panels View Component renders panel view container without visualizatio
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" + - + Add visualization + + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" >
- Add Visualization + Add visualization @@ -4509,8 +2995,8 @@ exports[`Panels View Component renders panel view container without visualizatio
- - + +
@@ -4598,6 +3084,7 @@ exports[`Panels View Component renders panel view container without visualizatio editMode={false} endTime="now" http={[MockFunction]} + onEditClick={[Function]} onRefresh={false} panelId="L8Sx53wBDp0rvEg3yoLb" panelVisualizations={Array []} diff --git a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx index 3ad38f26d..81cb151cd 100644 --- a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx +++ b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx @@ -21,7 +21,7 @@ import DSLService from '../../../../public/services/requests/dsl'; import { coreStartMock } from '../../../../test/__mocks__/coreMocks'; import { HttpResponse } from '../../../../../../src/core/public'; -describe.skip('Panels View Component', () => { +describe('Panels View Component', () => { configure({ adapter: new Adapter() }); it('renders panel view container without visualizations', async () => { diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index 2657b951e..ee8985c12 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -2,374 +2,1295 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
- - - -
- - - + data={ + Array [ + Object { + "marker": Object { + "color": Array [ + "#3CA1C7", + "#8C55A3", + "#DB748A", + "#F2BE4B", + ], + }, + "name": "avg(FlightDelayMin)", + "orientation": "v", + "type": "bar", + "x": Array [ + "BeatsWest", + "Logstash Airways", + "OpenSearch Dashboards Airlines", + "OpenSearch-Air", + ], + "y": Array [ + 53.65384615384615, + 45.36144578313253, + 63.1578947368421, + 46.81318681318681, + ], + }, + ] + } + layout={ + Object { + "barmode": "", + "colorway": Array [ + "#3CA1C7", + "#8C55A3", + "#DB748A", + "#F2BE4B", + "#68CCC2", + "#2A7866", + "#843769", + "#374FB8", + "#BD6F26", + "#4C636F", + ], + "height": 500, + "legend": Object { + "orientation": "v", + "traceorder": "normal", + }, + "margin": Object { + "b": 30, + "l": 60, + "pad": 0, + "r": 30, + "t": 50, + }, + "showlegend": true, + "title": "", + } + } + > + +
+ + + + +
`; exports[`Utils helper functions renders displayVisualization function 2`] = `
- - - -
- - - + > + +
+ + + + +
`; exports[`Utils helper functions renders displayVisualization function 3`] = `
- - - - -
- - - - + useResizeHandler={true} + > +
+ + + + +
`; exports[`Utils helper functions renders displayVisualization function 4`] = `
- - + - - -
- - - - + useResizeHandler={true} + > +
+ + + + +
`; diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx index 0e92e37e7..e1d1f1dbb 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -28,7 +28,7 @@ import { import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared'; import React from 'react'; -describe.skip('Utils helper functions', () => { +describe('Utils helper functions', () => { configure({ adapter: new Adapter() }); it('validates isNameValid function', () => { @@ -103,19 +103,25 @@ describe.skip('Utils helper functions', () => { }); it('renders displayVisualization function', () => { - const wrapper1 = mount(
{displayVisualization(samplePPLResponse, 'bar', false)}
); + const wrapper1 = mount( +
{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'bar')}
+ ); expect(wrapper1).toMatchSnapshot(); - const wrapper2 = mount(
{displayVisualization(samplePPLResponse, 'line', true)}
); + const wrapper2 = mount( +
{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'line')}
+ ); expect(wrapper2).toMatchSnapshot(); const wrapper3 = mount( -
{displayVisualization(samplePPLResponse, 'horizontal_bar', false)}
+
+ {displayVisualization(sampleSavedVisualization, samplePPLResponse, 'horizontal_bar')} +
); expect(wrapper3).toMatchSnapshot(); const wrapper4 = mount( -
{displayVisualization(samplePPLEmptyResponse, 'horizontal_bar', true)}
+
{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}
); expect(wrapper4).toMatchSnapshot(); }); diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap index 100d6bc41..7382d56d0 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap @@ -6,6 +6,7 @@ exports[`Visualization Container Component renders add visualization container 1 editMode={true} fromTime="now-15m" http={[MockFunction]} + onEditClick={[Function]} onRefresh={true} pplFilterValue="where Carrier = \\"OpenSearch-Air\\"" pplService={ @@ -25,155 +26,7 @@ exports[`Visualization Container Component renders add visualization container 1 grow={false} >
-
- -
- -
- -
- - -
- - -
- -
- - -
- - - - - -
- -
- -
-
- - - - - - - - -
-
- - -`; - -exports[`Visualization Container Component renders add visualization container 2`] = ` - - -
{ +describe('Visualization Container Component', () => { configure({ adapter: new Adapter() }); it('renders add visualization container', async () => { diff --git a/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap index a98dbe783..df40c845c 100644 --- a/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap +++ b/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap @@ -412,34 +412,46 @@ exports[`Datagrid component Renders data grid component 1`] = ` className="osdDocTableCell__toggleDetails" key="grid-td-14" > - + > + + + + + @@ -628,34 +640,46 @@ exports[`Datagrid component Renders data grid component 1`] = ` className="osdDocTableCell__toggleDetails" key="grid-td-17" > - + > + + + + + diff --git a/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap b/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap index b023ef06d..87754ba9e 100644 --- a/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap +++ b/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap @@ -24,34 +24,46 @@ exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`] className="osdDocTableCell__toggleDetails" key="grid-td-3" > - + > + + + + + { const getExpColapTd = () => { return ( - + iconType={detailsOpen || surroundingEventsOpen ? 'arrowLeft' : 'arrowRight'} + /> ); };