From b5d6defc67d3e32ee8a32a56619dbfe46fd2210a Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Mon, 21 Mar 2022 16:01:47 -0700 Subject: [PATCH 01/13] Remove switch to edit viz and clean up breadcrumbs Signed-off-by: Eugene Lee --- .../components/application.tsx | 2 +- .../custom_panels/custom_panel_view.tsx | 195 ++++++++---------- 2 files changed, 90 insertions(+), 107 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 3712afd97..5b0866224 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -383,13 +383,13 @@ export function Application(props: AppDetailProps) { dslService={dslService} chrome={chrome} parentBreadcrumbs={parentBreadcrumbs} + childBreadcrumbs={childBreadcrumbs} // App analytics will not be renaming/cloning/deleting panels renameCustomPanel={async () => undefined} cloneCustomPanel={async () => Promise.reject()} deleteCustomPanel={async () => Promise.reject()} setToast={setToasts} page="app" - appName={application.name} appId={appId} startTime={startTime} endTime={endTime} diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx index 6865ddb5b..12a7ba9cc 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx @@ -74,16 +74,16 @@ import { * setToast: create Toast function */ -interface Props { +interface CustomPanelViewProps { panelId: string; page: 'app' | 'operationalPanels'; appId?: string; - appName?: string; http: CoreStart['http']; pplService: PPLService; dslService: DSLService; chrome: CoreStart['chrome']; parentBreadcrumbs: EuiBreadcrumb[]; + childBreadcrumbs?: EuiBreadcrumb[]; renameCustomPanel: (editedCustomPanelName: string, editedCustomPanelId: string) => Promise; deleteCustomPanel: (customPanelId: string, customPanelName: string) => Promise; cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise; @@ -101,27 +101,28 @@ interface Props { switchToEditViz?: any; } -export const CustomPanelView = ({ - panelId, - page, - appId, - appName, - http, - pplService, - dslService, - chrome, - parentBreadcrumbs, - startTime, - endTime, - setStartTime, - setEndTime, - renameCustomPanel, - deleteCustomPanel, - cloneCustomPanel, - setToast, - switchToEvent, - switchToEditViz, -}: Props) => { +export const CustomPanelView = (props: CustomPanelViewProps) => { + const { + panelId, + page, + appId, + http, + pplService, + dslService, + chrome, + parentBreadcrumbs, + childBreadcrumbs, + startTime, + endTime, + setStartTime, + setEndTime, + renameCustomPanel, + deleteCustomPanel, + cloneCustomPanel, + setToast, + switchToEvent, + switchToEditViz, + } = props; const [openPanelName, setOpenPanelName] = useState(''); const [panelCreatedTime, setPanelCreatedTime] = useState(''); const [pplFilterValue, setPPLFilterValue] = useState(''); @@ -509,13 +510,6 @@ export const CustomPanelView = ({ }, ]; - // Set saved object id to empty when redirect away from events tab - useEffect(() => { - if (appPanel) { - switchToEditViz(''); - } - }); - // Fetch the custom panel on Initial Mount useEffect(() => { fetchCustomPanel(); @@ -536,28 +530,17 @@ export const CustomPanelView = ({ // Edit the breadcrumb when panel name changes useEffect(() => { let newBreadcrumb; - if (appPanel) { - newBreadcrumb = [ - ...parentBreadcrumbs, - { - text: 'Application analytics', - href: '#/application_analytics', - }, - { - text: appName, - href: `${last(parentBreadcrumbs)!.href}${appId}`, - }, - ]; + if (childBreadcrumbs) { + newBreadcrumb = childBreadcrumbs; } else { newBreadcrumb = [ - ...parentBreadcrumbs, { text: openPanelName, href: `${last(parentBreadcrumbs)!.href}${panelId}`, }, ]; } - chrome.setBreadcrumbs(newBreadcrumb); + chrome.setBreadcrumbs([...parentBreadcrumbs, ...newBreadcrumb]); }, [panelId, openPanelName]); return ( @@ -566,75 +549,75 @@ export const CustomPanelView = ({ {appPanel || ( - - -

{openPanelName}

- - - - - Created on {moment(panelCreatedTime).format(UI_DATE_FORMAT)} - - )} - {appPanel || ( - - - {editMode ? ( - <> + <> + + +

{openPanelName}

+ + + + + Created on {moment(panelCreatedTime).format(UI_DATE_FORMAT)} + + + + {editMode ? ( + <> + + editPanel('cancel')} + > + Cancel + + + + editPanel('save')}> + Save + + + + ) : ( editPanel('cancel')} + iconType="pencil" + onClick={() => editPanel('edit')} + disabled={editDisabled} > - Cancel - - - - editPanel('save')}> - Save + Edit - - ) : ( - - editPanel('edit')} - disabled={editDisabled} + )} + + setPanelsMenuPopover(false)} > - Edit - + + - )} - - setPanelsMenuPopover(false)} - > - - - - - - - - - - + + + + + + + + )} From 5c678b47bba396b162882824e0d7c1732abe6208 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 22 Mar 2022 10:08:13 -0700 Subject: [PATCH 02/13] Add onEditClick prop to modularize Signed-off-by: Eugene Lee --- .../components/application.tsx | 6 ++- .../__tests__/custom_panel_view.test.tsx | 8 ++++ .../custom_panels/custom_panel_view.tsx | 7 ++- .../public/components/custom_panels/home.tsx | 9 +++- .../__snapshots__/panel_grid.test.tsx.snap | 1 + .../panel_grid/__tests__/panel_grid.test.tsx | 4 ++ .../panel_modules/panel_grid/panel_grid.tsx | 48 +++++++++---------- .../visualization_container.test.tsx | 4 ++ .../visualization_container.tsx | 12 ++--- .../paragraph_components/para_output.tsx | 4 ++ 10 files changed, 62 insertions(+), 41 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 5b0866224..864c358eb 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -374,6 +374,10 @@ export function Application(props: AppDetailProps) { ); }; + const onEditClick = (savedVisualizationId: string) => { + switchToEditViz(savedVisualizationId); + }; + const getPanel = () => { return ( ); }; 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 c5c3d3df0..3ad38f26d 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 @@ -42,6 +42,9 @@ describe.skip('Panels View Component', () => { const cloneCustomPanel = jest.fn(); const deleteCustomPanel = jest.fn(); const setToast = jest.fn(); + const onEditClick = (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }; const wrapper = mount( { cloneCustomPanel={cloneCustomPanel} deleteCustomPanel={deleteCustomPanel} setToast={setToast} + onEditClick={onEditClick} startTime={start} endTime={end} setStartTime={setStart} @@ -97,6 +101,9 @@ describe.skip('Panels View Component', () => { const cloneCustomPanel = jest.fn(); const deleteCustomPanel = jest.fn(); const setToast = jest.fn(); + const onEditClick = (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }; const wrapper = mount( { cloneCustomPanel={cloneCustomPanel} deleteCustomPanel={deleteCustomPanel} setToast={setToast} + onEditClick={onEditClick} startTime={start} endTime={end} setStartTime={setStart} diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx index 12a7ba9cc..c2da8464d 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx @@ -93,12 +93,12 @@ interface CustomPanelViewProps { text?: React.ReactChild | undefined, side?: string | undefined ) => void; + onEditClick: (savedVisualizationId: string) => any; startTime: string; endTime: string; setStartTime: any; setEndTime: any; switchToEvent?: any; - switchToEditViz?: any; } export const CustomPanelView = (props: CustomPanelViewProps) => { @@ -120,8 +120,8 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { deleteCustomPanel, cloneCustomPanel, setToast, + onEditClick, switchToEvent, - switchToEditViz, } = props; const [openPanelName, setOpenPanelName] = useState(''); const [panelCreatedTime, setPanelCreatedTime] = useState(''); @@ -721,13 +721,12 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { pplService={pplService} startTime={startTime} endTime={endTime} - fromApp={appPanel} onRefresh={onRefresh} cloneVisualization={cloneVisualization} pplFilterValue={pplFilterValue} showFlyout={showFlyout} editActionType={editActionType} - switchToEditViz={switchToEditViz} + onEditClick={onEditClick} /> diff --git a/dashboards-observability/public/components/custom_panels/home.tsx b/dashboards-observability/public/components/custom_panels/home.tsx index 112015b0b..4a5395fb0 100644 --- a/dashboards-observability/public/components/custom_panels/home.tsx +++ b/dashboards-observability/public/components/custom_panels/home.tsx @@ -40,7 +40,7 @@ import { isNameValid } from './helpers/utils'; * renderProps: Props from router */ -interface Props { +interface PanelHomeProps { http: CoreStart['http']; chrome: CoreStart['chrome']; parentBreadcrumbs: EuiBreadcrumb[]; @@ -56,7 +56,7 @@ export const Home = ({ pplService, dslService, renderProps, -}: Props) => { +}: PanelHomeProps) => { const [customPanelData, setcustomPanelData] = useState([]); const [toasts, setToasts] = useState([]); const [loading, setLoading] = useState(false); @@ -70,6 +70,10 @@ export const Home = ({ setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]); }; + const onEditClick = (savedVisualizationId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`); + }; + // Fetches all saved Custom Panels const fetchCustomPanels = () => { setLoading(true); @@ -330,6 +334,7 @@ export const Home = ({ cloneCustomPanel={cloneCustomPanel} deleteCustomPanel={deleteCustomPanel} setToast={setToast} + onEditClick={onEditClick} startTime={start} endTime={end} setStartTime={setStart} diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap index 2501bc88a..b192dff2d 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap @@ -50,6 +50,7 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat editMode={false} endTime="now" http={[MockFunction]} + onEditClick={[Function]} onRefresh={false} panelId="" panelVisualizations={Array []} diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx index a4f548087..1366eb453 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx @@ -31,6 +31,9 @@ describe('Panel Grid Component', () => { const pplFilterValue = ''; const showFlyout = jest.fn(); const editActionType = ''; + const onEditClick = (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }; const wrapper = mount( { pplFilterValue={pplFilterValue} showFlyout={showFlyout} editActionType={editActionType} + onEditClick={onEditClick} /> ); wrapper.update(); diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx index eba2bd2c0..ca2263ec6 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx @@ -38,7 +38,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive); * editActionType: Type of action done while clicking the edit button */ -type Props = { +interface PanelGridProps { http: CoreStart['http']; chrome: CoreStart['chrome']; panelId: string; @@ -48,34 +48,33 @@ type Props = { pplService: PPLService; startTime: string; endTime: string; - fromApp?: boolean; - switchToEditViz?: any; + onEditClick: (savedVisualizationId: string) => any; onRefresh: boolean; cloneVisualization: (visualzationTitle: string, savedVisualizationId: string) => void; pplFilterValue: string; showFlyout: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void; editActionType: string; setEditVizId?: any; -}; - -export const PanelGrid = ({ - http, - chrome, - panelId, - panelVisualizations, - setPanelVisualizations, - editMode, - pplService, - startTime, - endTime, - fromApp = false, - switchToEditViz, - onRefresh, - cloneVisualization, - pplFilterValue, - showFlyout, - editActionType, -}: Props) => { +} + +export const PanelGrid = (props: PanelGridProps) => { + const { + http, + chrome, + panelId, + panelVisualizations, + setPanelVisualizations, + editMode, + pplService, + startTime, + endTime, + onEditClick, + onRefresh, + cloneVisualization, + pplFilterValue, + showFlyout, + editActionType, + } = props; const [currentLayout, setCurrentLayout] = useState([]); const [postEditLayout, setPostEditLayout] = useState([]); const [gridData, setGridData] = useState(panelVisualizations.map(() => <>)); @@ -100,8 +99,7 @@ export const PanelGrid = ({ fromTime={startTime} toTime={endTime} onRefresh={onRefresh} - fromApp={fromApp} - switchToEditViz={switchToEditViz} + onEditClick={onEditClick} cloneVisualization={cloneVisualization} pplFilterValue={pplFilterValue} showFlyout={showFlyout} diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx index bf972e5e1..20ab07fa9 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx @@ -39,6 +39,9 @@ describe.skip('Visualization Container Component', () => { const showFlyout = jest.fn(); const removeVisualization = jest.fn(); const pplService = new PPLService(httpClientMock); + const onEditClick = (savedVisId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisId}`); + }; const wrapper = mount( { pplFilterValue={pplFilterValue} showFlyout={showFlyout} removeVisualization={removeVisualization} + onEditClick={onEditClick} /> ); wrapper.update(); diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx index a718403e2..06abdd374 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx @@ -53,8 +53,7 @@ interface Props { onRefresh: boolean; pplFilterValue: string; usedInNotebooks?: boolean; - fromApp?: boolean; - switchToEditViz?: any; + onEditClick: (savedVisualizationId: string) => any; cloneVisualization?: (visualzationTitle: string, savedVisualizationId: string) => void; showFlyout?: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void; removeVisualization?: (visualizationId: string) => void; @@ -71,8 +70,7 @@ export const VisualizationContainer = ({ onRefresh, pplFilterValue, usedInNotebooks, - fromApp, - switchToEditViz, + onEditClick, cloneVisualization, showFlyout, removeVisualization, @@ -94,11 +92,7 @@ export const VisualizationContainer = ({ disabled={disablePopover} onClick={() => { closeActionsMenu(); - if (fromApp) { - switchToEditViz(savedVisualizationId); - } else { - window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`); - } + onEditClick(savedVisualizationId); }} > Edit diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/para_output.tsx b/dashboards-observability/public/components/notebooks/components/paragraph_components/para_output.tsx index 113e4c536..0a3776e9f 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/para_output.tsx +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/para_output.tsx @@ -133,6 +133,9 @@ export const ParaOutput = (props: { let toObs = moment(visInput?.timeRange?.to).format(dateFormat); fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs; toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs; + const onEditClick = (savedVisualizationId: string) => { + window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`); + }; return ( <> @@ -143,6 +146,7 @@ export const ParaOutput = (props: { http={props.http} editMode={false} visualizationId={''} + onEditClick={onEditClick} savedVisualizationId={para.visSavedObjId} pplService={props.pplService} fromTime={para.visStartTime} From dbd046e42620c67563d5490cc5948b53caf2d8bc Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 22 Mar 2022 11:40:10 -0700 Subject: [PATCH 03/13] Remove duplicate components Signed-off-by: Eugene Lee --- .../components/application.tsx | 2 +- .../custom_panels/custom_panel_view.tsx | 143 ++++++++---------- .../__snapshots__/empty_panel.test.tsx.snap | 120 ++++++++------- .../__tests__/empty_panel.test.tsx | 67 ++++++-- .../panel_modules/empty_panel.tsx | 84 +--------- .../__tests__/visualization_flyout.test.tsx | 2 - .../visualization_flyout.tsx | 6 +- 7 files changed, 195 insertions(+), 229 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 864c358eb..2dde6f602 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -399,7 +399,7 @@ export function Application(props: AppDetailProps) { endTime={endTime} setStartTime={setStartTimeForApp} setEndTime={setEndTimeForApp} - switchToEvent={switchToEvent} + onAddClick={switchToEvent} onEditClick={onEditClick} /> ); diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx index c2da8464d..4d437e57a 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx @@ -64,26 +64,34 @@ import { * * Props taken in as params are: * panelId: Name of the panel opened + * page: Page where component is called * http: http core service * pplService: ppl requestor service + * dslService: dsl requestor service * chrome: chrome core service * parentBreadcrumb: parent breadcrumb * renameCustomPanel: Rename function for the panel - * cloneCustomPanel: Clone function for the panel * deleteCustomPanel: Delete function for the panel + * cloneCustomPanel: Clone function for the panel * setToast: create Toast function + * onEditClick: Edit function for visualization + * startTime: Starting time + * endTime: Ending time + * setStartTime: Function to change start time + * setEndTime: Function to change end time + * childBreadcrumbs: Breadcrumbs to extend + * appId: id of application that panel belongs to + * onAddClick: Function for add button instead of add visualization popover */ interface CustomPanelViewProps { panelId: string; page: 'app' | 'operationalPanels'; - appId?: string; http: CoreStart['http']; pplService: PPLService; dslService: DSLService; chrome: CoreStart['chrome']; parentBreadcrumbs: EuiBreadcrumb[]; - childBreadcrumbs?: EuiBreadcrumb[]; renameCustomPanel: (editedCustomPanelName: string, editedCustomPanelId: string) => Promise; deleteCustomPanel: (customPanelId: string, customPanelName: string) => Promise; cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise; @@ -98,7 +106,9 @@ interface CustomPanelViewProps { endTime: string; setStartTime: any; setEndTime: any; - switchToEvent?: any; + childBreadcrumbs?: EuiBreadcrumb[]; + appId?: string; + onAddClick?: any; } export const CustomPanelView = (props: CustomPanelViewProps) => { @@ -121,7 +131,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { cloneCustomPanel, setToast, onEditClick, - switchToEvent, + onAddClick, } = props; const [openPanelName, setOpenPanelName] = useState(''); const [panelCreatedTime, setPanelCreatedTime] = useState(''); @@ -423,6 +433,30 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { }); }; + const cancelButton = ( + editPanel('cancel')}> + Cancel + + ); + + const saveButton = ( + editPanel('save')}> + Save + + ); + + const editButton = ( + editPanel('edit')} disabled={editDisabled}> + Edit + + ); + + const addButton = ( + + Add + + ); + // Add Visualization Button const addVisualizationButton = ( { ); + const addVisualizationPopover = ( + + + + ); + // Panel Actions Button const panelActionsButton = ( { setPanelVisualizations={setPanelVisualizations} isFlyoutReplacement={isFlyoutReplacement} replaceVisualizationId={replaceVisualizationId} - appPanel={appPanel} appId={appId} /> ); @@ -563,31 +609,11 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { {editMode ? ( <> - - editPanel('cancel')} - > - Cancel - - - - editPanel('save')}> - Save - - + {cancelButton} + {saveButton} ) : ( - - editPanel('edit')} - disabled={editDisabled} - > - Edit - - + {editButton} )} { - - - - - + {addVisualizationPopover} @@ -664,52 +676,19 @@ export const CustomPanelView = (props: CustomPanelViewProps) => { <> {editMode ? ( <> - - editPanel('cancel')} - > - Cancel - - - - editPanel('save')}> - Save - - + {cancelButton} + {saveButton} ) : ( - - editPanel('edit')} - disabled={editDisabled} - > - Edit - - + {editButton} )} - - - Add - - + {addButton} )} {panelVisualizations.length === 0 && ( - + )} + Add Visualization + + } + closePopover={[MockFunction]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + > + + } - page="operationalPanel" >

- Start by adding - your first visualization + Start by adding your first visualization

- Use PPL Queries to fetch & filter observability data and create - visualizations + Use PPL Queries to fetch & filter observability data and create visualizations
@@ -101,12 +109,12 @@ exports[`Empty panel view component renders empty panel view with disabled popov disabled={true} iconSide="right" iconType="arrowDown" - onClick={[Function]} + onClick={[MockFunction]} > Add Visualization } - closePopover={[Function]} + closePopover={[MockFunction]} display="inlineBlock" hasArrow={true} id="addVisualizationContextMenu" @@ -116,7 +124,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov >
@@ -319,12 +335,12 @@ exports[`Empty panel view component renders empty panel view with enabled popove disabled={false} iconSide="right" iconType="arrowDown" - onClick={[Function]} + onClick={[MockFunction]} > Add Visualization } - closePopover={[Function]} + closePopover={[MockFunction]} display="inlineBlock" hasArrow={true} id="addVisualizationContextMenu" @@ -334,7 +350,7 @@ exports[`Empty panel view component renders empty panel view with enabled popove >
- - + + + + +
- - - + + + @@ -228,33 +208,8 @@ exports[`Empty panel view component renders empty panel view with disabled popov exports[`Empty panel view component renders empty panel view with enabled popover 1`] = ` - Add Visualization - - } - closePopover={[MockFunction]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - > - - - } + addVizDisabled={false} + showFlyout={[MockFunction]} >
- - Add Visualization - - } - closePopover={[MockFunction]} - 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={false} + panelPaddingSize="none" > -
- - - - - + + + + +
-
- - + + + diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx index 2969fb851..2c3c24dcd 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx @@ -14,69 +14,21 @@ describe('Empty panel view component', () => { it('renders empty panel view with disabled popover', () => { const addVizDisabled = true; - const onPopoverClick = jest.fn(); - const isVizPopoverOpen = false; - const closeVizPopover = jest.fn(); - const getVizContextPanels = jest.fn(); - const addVisualizationButton = ( - - Add Visualization - + const showFlyout = jest.fn(); + const wrapper = mount( + ); - const addVisualizationPopover = ( - - - - ); - const wrapper = mount(); - expect(wrapper).toMatchSnapshot(); expect(wrapper.find('EuiButton').prop('disabled')).toBe(true); }); it('renders empty panel view with enabled popover', () => { const addVizDisabled = false; - const onPopoverClick = jest.fn(); - const isVizPopoverOpen = false; - const closeVizPopover = jest.fn(); - const getVizContextPanels = jest.fn(); - const addVisualizationButton = ( - - Add Visualization - - ); - - const addVisualizationPopover = ( - - - + const showFlyout = jest.fn(); + const wrapper = mount( + ); - const wrapper = mount(); expect(wrapper).toMatchSnapshot(); expect(wrapper.find('EuiButton').prop('disabled')).toBe(false); diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx index 55dce61db..5a5a821d3 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/empty_panel.tsx @@ -4,7 +4,8 @@ */ import { EuiSpacer, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import React from 'react'; +import React, { useState } from 'react'; +import { AddVisualizationPopover } from '../helpers/add_visualization_popover'; /* * EmptyPanelView - This Sub-component is shown to the user when a operational panel is empty @@ -15,10 +16,16 @@ import React from 'react'; */ interface EmptyPanelViewProps { - addButton: any; + addButton?: any; + addVizDisabled: boolean; + showFlyout: (isReplacement?: boolean, replaceVizId?: string) => void; } -export const EmptyPanelView = ({ addButton }: EmptyPanelViewProps) => { +export const EmptyPanelView = ({ + addVizDisabled, + showFlyout, + addButton = , +}: EmptyPanelViewProps) => { return (
From 85f9e99b3bd14da2067c45795853d97befc90890 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Wed, 23 Mar 2022 14:55:00 -0700 Subject: [PATCH 06/13] Sentence case event analytics Signed-off-by: Eugene Lee --- .../visualization_flyout.test.tsx.snap | 24 +++++++++---------- .../visualization_flyout.tsx | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap index 36907e0a2..1d43d5228 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap @@ -78,7 +78,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `

- Select Existing Visualization + Select existing visualization

@@ -239,7 +239,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = ` class="euiTitle euiTitle--medium" id="addVisualizationFlyout" > - Select Existing Visualization + Select existing visualization
- Select Existing Visualization + Select existing visualization
- Select Existing Visualization + Select existing visualization
- Select Existing Visualization + Select existing visualization
- Select Existing Visualization + Select existing visualization
@@ -1138,7 +1138,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]

- Replace Visualization + Replace visualization

@@ -1303,7 +1303,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`] class="euiTitle euiTitle--medium" id="addVisualizationFlyout" > - Replace Visualization + Replace visualization
- Replace Visualization + Replace visualization
- Replace Visualization + Replace visualization
- Replace Visualization + Replace visualization
- Replace Visualization + Replace visualization
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx index d178ff881..2c97e7095 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx @@ -213,7 +213,7 @@ export const VisaulizationFlyout = ({

- {isFlyoutReplacement ? 'Replace Visualization' : 'Select Existing Visualization'} + {isFlyoutReplacement ? 'Replace visualization' : 'Select existing visualization'}

From dbe358e7326b6d2857f6d5d301909d66aaf8ffc7 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Wed, 23 Mar 2022 14:55:24 -0700 Subject: [PATCH 07/13] Add and update cypress tests Signed-off-by: Eugene Lee --- .../integration/app_analytics.spec.js | 162 ++++++++++++++++-- .../.cypress/integration/panels.spec.js | 31 +++- .../.cypress/utils/app_constants.js | 24 ++- 3 files changed, 189 insertions(+), 28 deletions(-) diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index 701c79bdd..561af7ec9 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -21,10 +21,14 @@ import { trace_one, trace_two, trace_three, - spanQueryPartOne, - spanQueryPartTwo, - spanQueryPartThree, - visName, + spanQueryOnePartOne, + spanQueryOnePartTwo, + spanQueryOnePartThree, + spanQueryTwoPartOne, + spanQueryTwoPartTwo, + spanQueryTwoPartThree, + visOneName, + visTwoName, composition, newName, } from '../utils/app_constants'; @@ -92,10 +96,22 @@ describe('Creating application', () => { cy.get('.euiBadge').contains('2').should('exist'); cy.get('.euiButton').contains('Create').should('not.be.disabled'); cy.get('.euiButton').contains('Create').click(); - cy.wait(delay); + cy.wait(delay*3); cy.get('.euiTitle').contains(name).should('exist'); cy.get('.euiTab').contains('Panel').click(); - cy.get('.euiText').contains('Start by adding metrics').should('exist'); + cy.get('.euiText').contains('Start by adding your first visualization').should('exist'); + }); + + it('Hides application panels in Operational Panels', () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` + ); + cy.wait(delay*3); + cy.get('input.euiFieldSearch').type(`${name}'s Panel`); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('.euiFormControlLayoutClearButton').click(); + cy.wait(delay); }); it('Redirects to home page on cancel', () => { @@ -161,12 +177,12 @@ describe('Creating application', () => { }); describe('Viewing application', () => { - before(() => { + beforeEach(() => { moveToApplication(); + changeTimeTo24('months'); }) it('Shares time range among tabs', () => { - changeTimeTo24('months'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('.euiTab').contains('Services').click(); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); @@ -254,20 +270,23 @@ describe('Viewing application', () => { cy.get('.euiBadge__text').contains('Base Query').should('exist'); }); - it('Saves visualization to panel', () => { - cy.get('.euiTab').contains('Log Events').click(); + it('Saves visualization #1 to panel', () => { + cy.get('.euiTab').contains('Panel').click(); + cy.get('.euiButton').eq(3).contains('Add').click(); + cy.wait(delay); cy.get('.plot-container').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"]').type('x'); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryPartOne); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartTwo); - cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryPartThree); - cy.get('.euiButton').contains('Refresh').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryOnePartOne); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryOnePartTwo); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryOnePartThree); + changeTimeTo24('months'); cy.get('.euiTab').contains('Visualizations').click(); supressResizeObserverIssue(); cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); - cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visName); + 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('.euiTab').contains('Panel').click(); @@ -275,13 +294,14 @@ describe('Viewing application', () => { cy.get('.js-plotly-plot').should('exist'); }); - it('Adds availability level to visualization', () => { + it('Adds availability level to visualization #1', () => { cy.get('.euiTab').contains('Panel').click(); cy.wait(delay); cy.get('[aria-label="actionMenuButton"]').click(); cy.get('.euiContextMenuItem').contains('Edit').click(); supressResizeObserverIssue(); cy.wait(delay); + changeTimeTo24('months'); cy.get('.euiBadge').contains('Bar').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); @@ -302,6 +322,100 @@ describe('Viewing application', () => { cy.wait(delay); cy.get('.js-plotly-plot').should('exist'); cy.get('.textpoint').contains('Available').should('exist'); + moveToHomePage(); + cy.get('.euiBadge').contains('Available').should('exist'); + cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); + }); + + it('Saves visualization #2 to panel with availability level', () => { + cy.get('.euiTab').contains('Log Events').click(); + cy.get('.plot-container').should('exist'); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').type('x'); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').clear().wait(delay * 2).type(spanQueryTwoPartOne); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryTwoPartTwo); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').wait(delay * 2).type(spanQueryTwoPartThree); + changeTimeTo24('months'); + cy.get('.euiTab').contains('Visualizations').click(); + supressResizeObserverIssue(); + cy.get('.euiBadge').contains('Bar').click(); + cy.focused().type('{downArrow}'); + cy.focused().type('{enter}'); + cy.wait(delay); + cy.get('.euiButton').contains('+ Add availability level').click(); + cy.get('[data-test-subj="colorPickerAnchor"]').click(); + cy.get('[aria-label="Select #9170B8 as the color"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="nameFieldText"]').click().type('Super'); + cy.get('[data-test-subj="expressionSelect"]').select('<'); + cy.get('[data-test-subj="valueFieldNumber"]').clear().type('5.5'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.wait(delay); + cy.get('.euiButton').contains('+ Add availability level').click(); + cy.get('[data-test-subj="colorPickerAnchor"]').first().click(); + cy.get('[aria-label="Select #CA8EAE as the color"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="nameFieldText"]').first().click().type('Cool'); + cy.get('[data-test-subj="expressionSelect"]').first().select('>'); + cy.get('[data-test-subj="valueFieldNumber"]').first().clear().type('0'); + cy.get('[data-test-subj="visualizeEditorRenderButton"]').click(); + cy.wait(delay); + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); + cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visTwoName); + cy.wait(delay); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + cy.wait(delay); + cy.get('.euiTab').contains('Panel').click(); + cy.wait(delay); + cy.get('.js-plotly-plot').should('have.length', 2); + moveToHomePage(); + cy.get('.euiBadge').contains('Super').should('exist'); + cy.get('[style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('exist'); + }); + + it('Hides application visualizations in Event Analytics', () => { + cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`); + cy.wait(delay*3); + cy.get('input.euiFieldSearch').type(visOneName); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('input.euiFieldSearch').clear().type(visTwoName); + cy.wait(delay); + cy.get('.euiTableCellContent__text').contains('No items found').should('exist'); + cy.get('.euiFormControlLayoutClearButton').click(); + cy.wait(delay); + }); + + it('Hides application visualizations in Operational Panels', () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` + ); + cy.wait(delay*3); + cy.get('.euiButton__text').contains('Actions').click(); + cy.wait(delay); + cy.get('.euiContextMenuItem__text').contains('Add samples').click(); + cy.wait(delay); + cy.get('.euiButton__text').contains('Yes').click(); + cy.wait(delay*2); + cy.get('.euiLink').contains('[Logs] Web traffic Panel').first().click(); + cy.wait(delay); + cy.get('.euiButton__text').contains('Add visualization').click(); + cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); + cy.get('option').contains(visOneName).should('not.exist'); + cy.get('option').contains(visTwoName).should('not.exist'); + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` + ); + cy.wait(delay*3); + cy.get('input.euiFieldSearch').type('[Logs] Web traffic Panel'); + cy.wait(delay); + cy.get('.euiTableRow').first().within(($row) => { + cy.get('.euiCheckbox').click(); + }); + cy.get('.euiButton__text').contains('Actions').click(); + cy.wait(delay); + cy.get('.euiContextMenuItem__text').contains('Delete').click(); + cy.wait(delay); }); it('Configuration tab shows details', () => { @@ -310,7 +424,23 @@ describe('Viewing application', () => { cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 1); cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 2); + cy.get('option').should('have.length', 2); }); + + + it('Changes availability visualization', () => { + cy.get('.euiTab').contains('Configuration').click(); + cy.wait(delay); + cy.get('select').select(visOneName); + cy.wait(delay); + moveToHomePage(); + cy.get('.euiBadge').contains('Available').should('exist'); + cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); + moveToApplication(); + cy.get('.euiTab').contains('Configuration').click(); + cy.wait(delay); + cy.get('select').find('option:selected').should('have.text', visOneName); + }) }); describe('Editing application', () => { diff --git a/dashboards-observability/.cypress/integration/panels.spec.js b/dashboards-observability/.cypress/integration/panels.spec.js index b2eb67402..d0be020ca 100644 --- a/dashboards-observability/.cypress/integration/panels.spec.js +++ b/dashboards-observability/.cypress/integration/panels.spec.js @@ -183,6 +183,25 @@ describe('Testing a panel', () => { moveToTestPanel(); }); + it('Opens visualization flyout from empty panel', () => { + cy.get('.euiButton').eq(4).contains('Add visualization').click(); + cy.wait(delay); + cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); + cy.wait(delay); + cy.get('.euiButton').contains('Cancel').click(); + cy.get('.euiButton').eq(2).contains('Add visualization').click(); + cy.wait(delay); + cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); + cy.wait(delay); + cy.get('.euiButton').contains('Cancel').click(); + cy.get('.euiButton').contains('Add visualization').first().click(); + cy.get('.euiContextMenuItem__text').contains('Create new visualization').click(); + cy.wait(delay); + cy.get('.euiBreadcrumb').contains('Explorer').should('exist'); + cy.get('.euiCallOut').contains('No results match your search criteria').should('exist'); + moveToTestPanel(); + }); + it('Duplicate the open panel', () => { cy.get('.euiButton__text').contains('Panel actions').click(); cy.wait(delay); @@ -226,9 +245,9 @@ describe('Testing a panel', () => { }); it('Add existing visualization #1', () => { - cy.get('.euiButton__text').contains('Add Visualization').click(); + cy.get('.euiButton__text').contains('Add visualization').click(); cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Select Existing Visualization').click(); + cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); cy.wait(delay); cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]); cy.get('button[aria-label="refreshPreview"]').click(); @@ -240,9 +259,9 @@ describe('Testing a panel', () => { }); it('Add existing visualization #2', () => { - cy.get('.euiButton__text').contains('Add Visualization').click(); + cy.get('.euiButton__text').contains('Add visualization').click(); cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Select Existing Visualization').click(); + cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click(); cy.wait(delay); cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]); cy.get('button[aria-label="refreshPreview"]').click(); @@ -353,9 +372,9 @@ describe('Testing a panel', () => { }); it('Create new visualization and add to panel', () => { - cy.get('.euiButton__text').contains('Add Visualization').click(); + cy.get('.euiButton__text').contains('Add visualization').click(); cy.wait(delay); - cy.get('.euiContextMenuItem__text').contains('Create New Visualization').click(); + cy.get('.euiContextMenuItem__text').contains('Create new visualization').click(); cy.wait(delay * 3); cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer')); cy.get('[id^=autocomplete-textarea]').type(PPL_VISUALIZATIONS[2]); diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 621d272c0..d986ea602 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -5,7 +5,7 @@ import { supressResizeObserverIssue } from './constants'; -export const delay = 700; +export const delay = 1000; export const moveToHomePage = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); @@ -24,7 +24,7 @@ export const moveToCreatePage = () => { export const moveToApplication = () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`); - cy.wait(delay * 5); + cy.wait(delay * 6); cy.get('.euiLink').contains(name).click(); cy.wait(delay); cy.get('.euiTitle').contains(name).should('exist'); @@ -45,6 +45,7 @@ export const changeTimeTo24 = (timeUnit) => { cy.get('[aria-label="Time unit"]').select(timeUnit); cy.get('.euiButton').contains('Apply').click(); cy.wait(delay); + cy.get('.euiButton').contains('Refresh').click(); }; export const expectMessageOnHover = (message) => { @@ -52,6 +53,13 @@ export const expectMessageOnHover = (message) => { cy.get('.euiToolTipPopover').contains(message).should('exist'); }; +export const moveToPanelHome = () => { + cy.visit( + `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/` + ); + cy.wait(delay * 3); +}; + export const baseQuery = 'source = opensearch_dashboards_sample_data_flights'; export const name = 'Cypress'; export const description = 'This is my application for cypress testing.'; @@ -60,9 +68,13 @@ export const service_two = 'payment'; export const trace_one = 'HTTP POST'; export const trace_two = 'HTTP GET'; export const trace_three = 'client_pay_order'; -export const spanQueryPartOne = 'where DestCityName '; -export const spanQueryPartTwo = '= "Venice" | stats count() by span( timestamp '; -export const spanQueryPartThree = ', 6h )'; -export const visName = 'Flights to Venice'; +export const spanQueryOnePartOne = 'where DestCityName '; +export const spanQueryOnePartTwo = '= "Venice" | stats count() by span( timestamp '; +export const spanQueryOnePartThree = ', 6h )'; +export const spanQueryTwoPartOne = 'where OriginCityName '; +export const spanQueryTwoPartTwo = '= "Seoul" | stats count() by span( timestamp '; +export const spanQueryTwoPartThree = ', 6h )'; +export const visOneName = 'Flights to Venice'; +export const visTwoName = 'Flights from Seoul'; export const composition = 'order, payment, HTTP POST, HTTP GET, client_pay_order' export const newName = 'Monterey Cypress'; \ No newline at end of file From 53dcf74e42bb7e787d5ac0b2aa8627c255c298dc Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Mon, 28 Mar 2022 14:43:24 -0700 Subject: [PATCH 08/13] Try java 11 Signed-off-by: Eugene Lee --- opensearch-observability/build.gradle | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/opensearch-observability/build.gradle b/opensearch-observability/build.gradle index 487d85834..9771287e2 100644 --- a/opensearch-observability/build.gradle +++ b/opensearch-observability/build.gradle @@ -99,7 +99,7 @@ ext { } plugins.withId('java') { - sourceCompatibility = targetCompatibility = "1.8" + sourceCompatibility = targetCompatibility = "1.11" } plugins.withId('org.jetbrains.kotlin.jvm') { @@ -115,7 +115,7 @@ allprojects { } plugins.withId('java') { - sourceCompatibility = targetCompatibility = "1.8" + sourceCompatibility = targetCompatibility = "1.11" } } From 0bf4ab3946f044bea6493dc732af56f5e823dd8f Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Tue, 29 Mar 2022 14:39:49 -0700 Subject: [PATCH 09/13] Update snapshots Signed-off-by: Eugene Lee --- .../count_distribution.test.tsx.snap | 181 ++++++ .../__snapshots__/notebook.test.tsx.snap | 2 + .../__snapshots__/para_input.test.tsx.snap | 8 +- .../__snapshots__/para_output.test.tsx.snap | 2 +- .../__snapshots__/paragraphs.test.tsx.snap | 4 +- .../span_detail_flyout.test.tsx.snap | 577 ++++++++++++++++++ .../__snapshots__/plotly.test.tsx.snap | 170 ++++++ 7 files changed, 937 insertions(+), 7 deletions(-) diff --git a/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap index e2f169d5f..df3f7b3bd 100644 --- a/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap +++ b/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap @@ -169,4 +169,185 @@ exports[`Count distribution component Renders count distribution component with `; +exports[`Count distribution component Renders count distribution component with data 2`] = ` + + + +
+ + + +`; + exports[`Count distribution component Renders empty count distribution component 1`] = ``; diff --git a/dashboards-observability/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap index ae892d536..d184baf15 100644 --- a/dashboards-observability/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap @@ -313,6 +313,8 @@ exports[` spec renders the component 1`] = `
`; +exports[` spec renders the component 2`] = `null`; + exports[` spec renders the empty component 1`] = `
spec renders the markdown component 1`] = `
spec renders the markdown component 1`] = ` exports[` spec renders the visualization component 1`] = `
spec renders other types of outputs 1`] = ` class="euiText euiText--medium" >
`; diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap index 4b7da1ef2..ab01c3c85 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap @@ -79,10 +79,10 @@ exports[` spec renders the component 1`] = ` class="euiFormRow__fieldWrapper" >
spec renders the empty component 1`] = ` `; + +exports[` spec renders the empty component 2`] = ` + + + + + + +
+ + + +
+
+ + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + sideCar={ + Object { + "assignMedium": [Function], + "assignSyncMedium": [Function], + "options": Object { + "async": true, + "ssr": false, + }, + "read": [Function], + "useMedium": [Function], + } + } + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + > + + +
+ } + onActivation={[Function]} + onDeactivation={[Function]} + persistentFocus={false} + returnFocus={[Function]} + shards={Array []} + /> + + + + +
+
+ + + + + + +
+ +

+ Span detail +

+ +
+ + +
+
+
+ - +
+
+
+ +
+
+ +
+ + + + + + + + + + + + +
+ + + + + +`; diff --git a/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap b/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap index 66ee5e216..a426dfc52 100644 --- a/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap @@ -145,3 +145,173 @@ exports[`Ploty base component Renders Ploty base component 1`] = ` `; + +exports[`Ploty base component Renders Ploty base component 2`] = ` + + +
+ + +`; From ef962d2b57aed3b1fe506efafa878e2eb07f8abf Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Wed, 30 Mar 2022 14:43:06 -0700 Subject: [PATCH 10/13] Update snapshots Signed-off-by: Eugene Lee --- .../__snapshots__/empty_panel.test.tsx.snap | 323 +++++++++--------- .../visualization_flyout.test.tsx.snap | 8 +- .../__snapshots__/para_input.test.tsx.snap | 4 +- .../__snapshots__/para_output.test.tsx.snap | 2 +- .../__snapshots__/paragraphs.test.tsx.snap | 4 +- 5 files changed, 173 insertions(+), 168 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap index e22ae05fa..79cfdae00 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap @@ -77,112 +77,117 @@ exports[`Empty panel view component renders empty panel view with disabled popov
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={true} - panelPaddingSize="none" + -
-
+ - + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ - - - + + + + +
-
- + +
@@ -275,117 +280,117 @@ exports[`Empty panel view component renders empty panel view with enabled popove
- - Add Visualization - - } - closePopover={[Function]} - display="inlineBlock" - hasArrow={true} - id="addVisualizationContextMenu" - isOpen={false} - ownFocus={true} - panelPaddingSize="none" + -
-
+ - + } + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="addVisualizationContextMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" + > +
+
+ - - - + + + + +
-
- + +
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap index 82753cedf..b0e592f27 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap @@ -147,7 +147,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = ` class="euiTitle euiTitle--medium" id="addVisualizationFlyout" > - Select Existing Visualization + Select existing visualization
- Select Existing Visualization + Select existing visualization
- Replace Visualization + Replace visualization
- Replace Visualization + Replace visualization
spec renders the markdown component 1`] = `
spec renders other types of outputs 1`] = ` class="euiText euiText--medium" >
`; diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap index 110d1553c..00aa0dad2 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap @@ -79,10 +79,10 @@ exports[` spec renders the component 1`] = ` class="euiFormRow__fieldWrapper" >
Date: Wed, 30 Mar 2022 15:43:23 -0700 Subject: [PATCH 11/13] Update snapshots more Signed-off-by: Eugene Lee --- .../__snapshots__/empty_panel.test.tsx.snap | 25 +++++++++++-------- .../__snapshots__/para_input.test.tsx.snap | 4 +-- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap index 79cfdae00..3e67691fe 100644 --- a/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap @@ -78,7 +78,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov className="euiFlexItem euiFlexItem--flexGrowZero" > -
-

- Span detail -

-
-
-
-
- - -
-
-
-
-
- } - onActivation={[Function]} - onDeactivation={[Function]} - persistentFocus={false} - returnFocus={[Function]} - shards={Array []} - sideCar={ - Object { - "assignMedium": [Function], - "assignSyncMedium": [Function], - "options": Object { - "async": true, - "ssr": false, - }, - "read": [Function], - "useMedium": [Function], - } - } - > - - -
- } - onActivation={[Function]} - onDeactivation={[Function]} - persistentFocus={false} - returnFocus={[Function]} - shards={Array []} - sideCar={ - Object { - "assignMedium": [Function], - "assignSyncMedium": [Function], - "options": Object { - "async": true, - "ssr": false, - }, - "read": [Function], - "useMedium": [Function], - } - } - > - - -
- } - onActivation={[Function]} - onDeactivation={[Function]} - persistentFocus={false} - returnFocus={[Function]} - shards={Array []} - > - - -
- } - onActivation={[Function]} - onDeactivation={[Function]} - persistentFocus={false} - returnFocus={[Function]} - shards={Array []} - /> - - - - -
-
- - - - - - -
- -

- Span detail -

- -
- - -
-
-
- - -
-
-
- -
-
- -
- - - - - - - - - - - - -
- - - - - -`; diff --git a/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap b/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap index a426dfc52..66ee5e216 100644 --- a/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap @@ -145,173 +145,3 @@ exports[`Ploty base component Renders Ploty base component 1`] = ` `; - -exports[`Ploty base component Renders Ploty base component 2`] = ` - - -
- - -`;