From 2c3614ce6c272eb3a7a07c2e5e2dc99277e0efb5 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Wed, 30 Mar 2022 16:34:15 -0700 Subject: [PATCH] Edit visualization time range change (#617) Signed-off-by: Eugene Lee --- .../integration/app_analytics.spec.js | 65 ++++++++++++++----- .../.cypress/utils/app_constants.js | 9 +-- .../components/app_table.tsx | 5 -- .../components/application.tsx | 38 +++++++---- .../config_components/log_config.tsx | 2 +- .../components/application_analytics/home.tsx | 19 +----- .../components/common/search/autocomplete.tsx | 7 +- .../components/common/search/search.tsx | 13 ++-- .../custom_panels/custom_panel_view.tsx | 6 +- .../panel_modules/panel_grid/panel_grid.tsx | 18 ++--- .../visualization_container.tsx | 2 +- .../public/components/explorer/explorer.tsx | 13 ++-- 12 files changed, 111 insertions(+), 86 deletions(-) diff --git a/dashboards-observability/.cypress/integration/app_analytics.spec.js b/dashboards-observability/.cypress/integration/app_analytics.spec.js index 2ebe3b4b1..7d268d08c 100644 --- a/dashboards-observability/.cypress/integration/app_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/app_analytics.spec.js @@ -14,7 +14,8 @@ import { changeTimeTo24, expectMessageOnHover, baseQuery, - name, + nameOne, + nameTwo, description, service_one, service_two, @@ -37,7 +38,7 @@ describe('Creating application', () => { it('Disables create button if missing fields', () => { expectMessageOnHover('Name is required.'); - cy.get('[data-test-subj="nameFormRow"]').type(name); + cy.get('[data-test-subj="nameFormRow"]').type(nameOne); expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); cy.get('.euiAccordion').contains('Log source').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); @@ -46,7 +47,8 @@ describe('Creating application', () => { expectMessageOnHover('Provide at least one log source, service, entity or trace group.'); cy.get('.euiAccordion').contains('Services & entities').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); - cy.get('.euiFilterSelectItem').contains(service_one).click(); + cy.focused().type('{downArrow}'); + cy.focused().type('{enter}'); cy.get('.euiBadge').contains('1').should('exist'); cy.get('.euiButton').contains('Create').should('not.be.disabled'); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); @@ -77,13 +79,14 @@ describe('Creating application', () => { }); it('Creates an application and redirects to application', () => { - cy.get('[data-test-subj="nameFormRow"]').type(name); + cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type('This application is for testing.'); cy.get('.euiAccordion').contains('Log source').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); cy.get('.euiAccordion').contains('Services & entities').click(); cy.get('[data-test-subj="servicesEntitiesComboBox"]').click(); - cy.get('.euiFilterSelectItem').contains(service_one).trigger('click'); + cy.focused().type('{downArrow}'); + cy.focused().type('{enter}'); cy.get('.euiBadge').contains('1').should('exist'); cy.get('.euiAccordion').contains('Trace groups').click(); cy.get('[data-test-subj="traceGroupsComboBox"]').type('http'); @@ -93,7 +96,7 @@ describe('Creating application', () => { cy.get('.euiButton').contains('Create').should('not.be.disabled'); cy.get('.euiButton').contains('Create').click(); cy.wait(delay); - cy.get('.euiTitle').contains(name).should('exist'); + cy.get('.euiTitle').contains(nameOne).should('exist'); cy.get('.euiTab').contains('Panel').click(); cy.get('.euiText').contains('Start by adding metrics').should('exist'); }); @@ -105,7 +108,7 @@ describe('Creating application', () => { }); it('Saves current input on reload', () => { - cy.get('[data-test-subj="nameFormRow"]').type(name); + cy.get('[data-test-subj="nameFormRow"]').type(nameOne); cy.get('[data-test-subj="descriptionFormRow"]').type(description); cy.get('.euiAccordion').contains('Log source').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); @@ -120,7 +123,7 @@ describe('Creating application', () => { cy.get('.euiBadge').contains('2').should('exist'); cy.reload(); cy.wait(delay); - cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', name); + 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('.euiAccordion').contains('Log source').click(); cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', baseQuery); @@ -162,13 +165,13 @@ describe('Creating application', () => { describe('Viewing application', () => { before(() => { - moveToApplication(); + moveToApplication(nameOne); }); it('Has working breadcrumbs', () => { cy.get('.euiBreadcrumb').contains('Cypress').click(); cy.wait(delay); - cy.get('.euiTitle').contains(name).should('exist'); + cy.get('.euiTitle').contains(nameOne).should('exist'); cy.get('.euiBreadcrumb').contains('Application analytics').click(); cy.wait(delay); cy.get('.euiTitle').contains('Applications').should('exist'); @@ -178,7 +181,7 @@ describe('Viewing application', () => { }); it('Shares time range among tabs', () => { - moveToApplication(); + moveToApplication(nameOne); changeTimeTo24('months'); cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('.euiTab').contains('Services').click(); @@ -191,7 +194,33 @@ describe('Viewing application', () => { cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); }); + it('Saves time range for each application', () => { + moveToCreatePage(); + cy.get('[data-test-subj="nameFormRow"]').type(nameTwo); + cy.get('.euiAccordion').contains('Log source').click(); + cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(baseQuery); + cy.get('.euiButton').contains('Create').should('not.be.disabled'); + cy.get('.euiButton').contains('Create').click(); + cy.wait(delay); + cy.get('.euiTitle').contains(nameTwo).should('exist'); + changeTimeTo24('weeks'); + cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); + cy.get('.euiBreadcrumb').contains('Application analytics').click(); + cy.wait(delay); + cy.get('.euiLink').contains(nameOne).click(); + cy.wait(delay); + cy.get('.euiTitle').contains(nameOne).should('exist'); + cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); + cy.get('.euiBreadcrumb').contains('Application analytics').click(); + cy.wait(delay); + cy.get('.euiLink').contains(nameTwo).click(); + cy.wait(delay); + cy.get('.euiTitle').contains(nameTwo).should('exist'); + cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks'); + }); + it('Adds filter when Trace group name is clicked', () => { + moveToApplication(nameOne); cy.get('.euiTab').contains('Overview').click(); cy.wait(delay); cy.get('.euiLink').contains('client_create_order').click(); @@ -276,6 +305,7 @@ describe('Viewing application', () => { 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); + changeTimeTo24('hours'); cy.get('.euiButton').contains('Refresh').click(); cy.get('.euiTab').contains('Visualizations').click(); supressResizeObserverIssue(); @@ -295,6 +325,7 @@ describe('Viewing application', () => { cy.get('.euiContextMenuItem').contains('Edit').click(); supressResizeObserverIssue(); cy.wait(delay); + cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 hours'); cy.get('.euiBadge').contains('Bar').click(); cy.focused().type('{downArrow}'); cy.focused().type('{enter}'); @@ -349,7 +380,7 @@ describe('Editing application', () => { cy.get('.euiCodeBlock__code').contains(baseQuery).should('exist'); cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 2); cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 3); - cy.get('.euiTitle').contains(name).should('exist'); + cy.get('.euiTitle').contains(nameOne).should('exist'); }); }); @@ -360,7 +391,7 @@ describe('Application Analytics home page', () => { it('Show correct information in table', () => { cy.get('.euiTableRow').first().within(($row) => { - cy.get('.euiLink').contains(name).should('exist'); + cy.get('.euiLink').contains(nameOne).should('exist'); cy.get('.euiTableCellContent').contains(composition).should('exist'); cy.get('.euiBadge').contains('Available').should('exist'); cy.get('[style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist'); @@ -389,15 +420,17 @@ describe('Application Analytics home page', () => { it('Deletes application', () => { cy.get('.euiPopover').contains('Actions').click(); cy.get('.euiContextMenuItem-isDisabled').contains('Delete').should('exist'); - cy.get('.euiTableRow').first().within(($row) => { + cy.get('.euiTableRow').eq(0).within(($row) => { + cy.get('.euiCheckbox').click(); + }); + cy.get('.euiTableRow').eq(1).within(($row) => { cy.get('.euiCheckbox').click(); }); - cy.wait(delay); cy.get('.euiPopover').contains('Actions').click(); cy.get('.euiContextMenuItem').contains('Delete').click(); cy.get('.euiButton--fill').contains('Delete').click(); cy.wait(delay); - cy.get('.euiToast').contains(`Application "${newName}" successfully deleted!`); + cy.get('.euiToast').contains(`Applications successfully deleted!`); cy.get('.euiLink').contains(newName).should('not.exist'); }); }); diff --git a/dashboards-observability/.cypress/utils/app_constants.js b/dashboards-observability/.cypress/utils/app_constants.js index 621d272c0..ae8e86fa6 100644 --- a/dashboards-observability/.cypress/utils/app_constants.js +++ b/dashboards-observability/.cypress/utils/app_constants.js @@ -22,9 +22,9 @@ export const moveToCreatePage = () => { cy.get('.euiTitle').contains('Create application').should('exist'); }; -export const moveToApplication = () => { +export const moveToApplication = (name) => { 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'); @@ -32,7 +32,7 @@ export const moveToApplication = () => { }; export const moveToEditPage = () => { - moveToApplication(); + moveToApplication(nameOne); cy.get('.euiTab').contains('Configuration').click(); cy.get('.euiButton').contains('Edit').click(); supressResizeObserverIssue(); @@ -53,7 +53,8 @@ export const expectMessageOnHover = (message) => { }; export const baseQuery = 'source = opensearch_dashboards_sample_data_flights'; -export const name = 'Cypress'; +export const nameOne = 'Cypress'; +export const nameTwo = 'Pine'; export const description = 'This is my application for cypress testing.'; export const service_one = 'order'; export const service_two = 'payment'; diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx index 73b01a67b..42aeb3a54 100644 --- a/dashboards-observability/public/components/application_analytics/components/app_table.tsx +++ b/dashboards-observability/public/components/application_analytics/components/app_table.tsx @@ -50,7 +50,6 @@ interface AppTableProps extends AppAnalyticsComponentDeps { export function AppTable(props: AppTableProps) { const { - http, chrome, applications, parentBreadcrumbs, @@ -58,8 +57,6 @@ export function AppTable(props: AppTableProps) { renameApplication, deleteApplication, setFilters, - setStartTime, - setEndTime, clearStorage, } = props; const [isModalVisible, setIsModalVisible] = useState(false); @@ -82,8 +79,6 @@ export function AppTable(props: AppTableProps) { const clear = () => { setFilters([]); - setStartTime('now-24h'); - setEndTime('now'); clearStorage(); }; diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx index 9c47d1a4f..cf8678ea3 100644 --- a/dashboards-observability/public/components/application_analytics/components/application.tsx +++ b/dashboards-observability/public/components/application_analytics/components/application.tsx @@ -112,15 +112,11 @@ export function Application(props: AppDetailProps) { appId, chrome, parentBreadcrumbs, - startTime, - endTime, query, filters, appConfigs, updateApp, setAppConfigs, - setStartTimeWithStorage, - setEndTimeWithStorage, setToasts, setFilters, } = props; @@ -143,14 +139,22 @@ export function Application(props: AppDetailProps) { const [editVizId, setEditVizId] = useState(''); const [visWithAvailability, setVisWithAvailability] = useState([]); const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedTab(selectedTab.id); + const [appStartTime, setAppStartTime] = useState( + sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h' + ); + const [appEndTime, setAppEndTime] = useState( + sessionStorage.getItem(`${application.name}EndTime`) || 'now' + ); + const history = useHistory(); const setStartTimeForApp = (newStartTime: string) => { - setStartTimeWithStorage(newStartTime, `${application.name}StartTime`); + setAppStartTime(newStartTime); + sessionStorage.setItem(`${application.name}StartTime`, newStartTime); }; - const setEndTimeForApp = (newEndTime: string) => { - setEndTimeWithStorage(newEndTime, `${application.name}EndTime`); + setAppEndTime(newEndTime); + sessionStorage.setItem(`${application.name}EndTime`, newEndTime); }; const addSpanFilter = (field: string, value: any) => { @@ -227,9 +231,9 @@ export function Application(props: AppDetailProps) { }, [appId, application.name]); useEffect(() => { - const DSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs); + const DSL = filtersToDsl(filters, query, appStartTime, appEndTime, 'app', appConfigs); setSpanDSL(DSL); - }, [filters, appConfigs, query, startTime, endTime]); + }, [filters, appConfigs, query, appStartTime, appEndTime]); useEffect(() => { if (selectedTabId !== TAB_LOG_ID) { @@ -285,6 +289,8 @@ export function Application(props: AppDetailProps) { @@ -328,6 +336,8 @@ export function Application(props: AppDetailProps) { page="app" childBreadcrumbs={childBreadcrumbs} traceIdColumnAction={traceIdColumnAction} + startTime={appStartTime} + endTime={appEndTime} setStartTime={setStartTimeForApp} setEndTime={setEndTimeForApp} /> @@ -364,8 +374,8 @@ export function Application(props: AppDetailProps) { searchBarConfigs={searchBarConfigs} appId={appId} addVisualizationToPanel={addVisualizationToPanel} - startTime={startTime} - endTime={endTime} + startTime={appStartTime} + endTime={appEndTime} setStartTime={setStartTimeForApp} setEndTime={setEndTimeForApp} appBaseQuery={application.baseQuery} @@ -391,8 +401,8 @@ export function Application(props: AppDetailProps) { page="app" appName={application.name} appId={appId} - startTime={startTime} - endTime={endTime} + startTime={appStartTime} + endTime={appEndTime} setStartTime={setStartTimeForApp} setEndTime={setEndTimeForApp} switchToEvent={switchToEvent} @@ -510,6 +520,8 @@ export function Application(props: AppDetailProps) { { uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light' }`} color="hollow" - onClick={() => showFlyout()} + onClick={showFlyout} onClickAriaLabel={'pplLinkShowFlyout'} > PPL diff --git a/dashboards-observability/public/components/application_analytics/home.tsx b/dashboards-observability/public/components/application_analytics/home.tsx index 644a23bd2..0b0277ba1 100644 --- a/dashboards-observability/public/components/application_analytics/home.tsx +++ b/dashboards-observability/public/components/application_analytics/home.tsx @@ -54,8 +54,6 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps { setQueryWithStorage: (newQuery: string) => void; setFiltersWithStorage: (newFilters: FilterType[]) => void; setAppConfigs: (newAppConfigs: FilterType[]) => void; - setStartTimeWithStorage: (newStartTime: string, itemName?: string) => void; - setEndTimeWithStorage: (newEndTime: string, itemName?: string) => void; } export const Home = (props: HomeProps) => { @@ -107,17 +105,6 @@ export const Home = (props: HomeProps) => { setQuery(newQuery); sessionStorage.setItem('AppAnalyticsQuery', newQuery); }; - const setStartTimeWithStorage = ( - newStartTime: string, - itemName: string = 'AppAnalyticsStartTime' - ) => { - setStartTime(newStartTime); - sessionStorage.setItem(itemName, newStartTime); - }; - const setEndTimeWithStorage = (newEndTime: string, itemName: string = 'AppAnalyticsEndTime') => { - setEndTime(newEndTime); - sessionStorage.setItem(itemName, newEndTime); - }; useEffect(() => { handleIndicesExistRequest(http, setIndicesExist); @@ -140,11 +127,9 @@ export const Home = (props: HomeProps) => { setFilters, setFiltersWithStorage, startTime, - setStartTime: setStartTimeWithStorage, - setStartTimeWithStorage, + setStartTime, endTime, - setEndTime: setEndTimeWithStorage, - setEndTimeWithStorage, + setEndTime, indicesExist, }; diff --git a/dashboards-observability/public/components/common/search/autocomplete.tsx b/dashboards-observability/public/components/common/search/autocomplete.tsx index ffe3f83d1..3d3fdac26 100644 --- a/dashboards-observability/public/components/common/search/autocomplete.tsx +++ b/dashboards-observability/public/components/common/search/autocomplete.tsx @@ -28,7 +28,6 @@ interface AutocompleteProps extends IQueryBarProps { placeholder?: string; possibleCommands?: Array<{ label: string }>; append?: any; - inputDisabled?: boolean; } export const Autocomplete = (props: AutocompleteProps) => { @@ -46,7 +45,6 @@ export const Autocomplete = (props: AutocompleteProps) => { placeholder = 'Enter PPL query', possibleCommands, append, - inputDisabled, } = props; const [autocompleteState, setAutocompleteState] = useState>({ @@ -142,9 +140,8 @@ export const Autocomplete = (props: AutocompleteProps) => { placeholder, inputElement: null, })} - {...(panelsFilter - ? { append, fullWidth: true, disabled: inputDisabled } - : { disabled: isDisabled })} + {...(panelsFilter && { append, fullWidth: true })} + disabled={isDisabled} /> {autocompleteState.isOpen && (
{ let flyout; if (isFlyoutVisible) { flyout = ; - }; + } const Savebutton = ( { liveStreamChecked={props.liveStreamChecked} onLiveStreamChange={props.onLiveStreamChange} handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)} - handleTimeRangePickerRefresh={handleTimeRangePickerRefresh} /> + handleTimeRangePickerRefresh={handleTimeRangePickerRefresh} + /> )} - - {!showSavePanelOptionsList && ( + + {!showSavePanelOptionsList && ( { - )} + )} {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && ( <> @@ -229,4 +230,4 @@ export const Search = (props: any) => { {flyout}
); -}; \ No newline at end of file +}; 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..19916104a 100644 --- a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx +++ b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx @@ -74,7 +74,7 @@ import { * setToast: create Toast function */ -interface Props { +interface CustomPanelViewProps { panelId: string; page: 'app' | 'operationalPanels'; appId?: string; @@ -121,7 +121,7 @@ export const CustomPanelView = ({ setToast, switchToEvent, switchToEditViz, -}: Props) => { +}: CustomPanelViewProps) => { const [openPanelName, setOpenPanelName] = useState(''); const [panelCreatedTime, setPanelCreatedTime] = useState(''); const [pplFilterValue, setPPLFilterValue] = useState(''); @@ -650,6 +650,7 @@ export const CustomPanelView = ({ dslService={dslService} getSuggestions={getSuggestionsAfterSource} onItemSelect={onItemSelect} + isDisabled={inputDisabled} tabId={'panels-filter'} placeholder={ "Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']" @@ -664,7 +665,6 @@ export const CustomPanelView = ({ PPL } - inputDisabled={inputDisabled} /> 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..7cbbfd141 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 @@ -2,6 +2,8 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable no-console */ import _ from 'lodash'; import React, { useEffect, useState } from 'react'; @@ -38,7 +40,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; @@ -56,7 +58,7 @@ type Props = { showFlyout: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void; editActionType: string; setEditVizId?: any; -}; +} export const PanelGrid = ({ http, @@ -75,16 +77,16 @@ export const PanelGrid = ({ pplFilterValue, showFlyout, editActionType, -}: Props) => { +}: PanelGridProps) => { const [currentLayout, setCurrentLayout] = useState([]); const [postEditLayout, setPostEditLayout] = useState([]); const [gridData, setGridData] = useState(panelVisualizations.map(() => <>)); const isLocked = useObservable(chrome.getIsNavDrawerLocked$()); // Reset Size of Visualizations when layout is changed - const layoutChanged = (currentLayout: Layout[], allLayouts: Layouts) => { + const layoutChanged = (currLayouts: Layout[], allLayouts: Layouts) => { window.dispatchEvent(new Event('resize')); - setPostEditLayout(currentLayout); + setPostEditLayout(currLayouts); }; const loadVizComponents = () => { @@ -136,12 +138,12 @@ export const PanelGrid = ({ }; // Save Visualization Layouts when not in edit mode anymore (after users saves the panel) - const saveVisualizationLayouts = async (panelId: string, visualizationParams: any) => { + const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => { return http .put(`${CUSTOM_PANELS_API_PREFIX}/visualizations/edit`, { body: JSON.stringify({ - panelId: panelId, - visualizationParams: visualizationParams, + panelId: panelID, + visualizationParams, }), }) .then(async (res) => { 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..483e184e4 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 @@ -85,7 +85,7 @@ export const VisualizationContainer = ({ const [visualizationData, setVisualizationData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [isError, setIsError] = useState(''); - const onActionsMenuClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen); + const onActionsMenuClick = () => setIsPopoverOpen((currPopoverOpen) => !currPopoverOpen); const closeActionsMenu = () => setIsPopoverOpen(false); let popoverPanel = [ diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/explorer/explorer.tsx index 5b3f3244f..2fd2c781d 100644 --- a/dashboards-observability/public/components/explorer/explorer.tsx +++ b/dashboards-observability/public/components/explorer/explorer.tsx @@ -218,7 +218,7 @@ export const Explorer = ({ .fetchSavedObjects({ objectId, }) - .then((res) => { + .then(async (res) => { const savedData = res.observabilityObjectList[0]; const isSavedQuery = has(savedData, SAVED_QUERY); const savedType = isSavedQuery ? SAVED_QUERY : SAVED_VISUALIZATION; @@ -287,7 +287,7 @@ export const Explorer = ({ ? TYPE_TAB_MAPPING[SAVED_QUERY] : TYPE_TAB_MAPPING[SAVED_VISUALIZATION]; setSelectedContentTab(tabToBeFocused); - fetchData(); + await fetchData(); }) .catch((error) => { notifications.toasts.addError(error, { @@ -434,7 +434,6 @@ export const Explorer = ({ const updateTabData = async (objectId: string) => { await getSavedDataById(objectId); - await fetchData(); }; useEffect(() => { @@ -457,8 +456,8 @@ export const Explorer = ({ if (savedObjectId) { updateTabData(savedObjectId); } else { + setTempQuery(''); emptyTab(); - fetchData(); } } }, [savedObjectId]); @@ -473,10 +472,10 @@ export const Explorer = ({ [INDEX]: '', [SELECTED_TIMESTAMP]: '', [SAVED_OBJECT_ID]: '', - [SELECTED_DATE_RANGE]: ['now-24h', 'now'], }, }) ); + await fetchData(); }; const handleAddField = (field: IField) => toggleFields(field, AVAILABLE_FIELDS, SELECTED_FIELDS); @@ -1243,8 +1242,8 @@ export const Explorer = ({ handleQueryChange={handleQueryChange} handleQuerySearch={handleQuerySearch} dslService={dslService} - startTime={dateRange[0]} - endTime={dateRange[1]} + startTime={appLogEvents ? startTime : dateRange[0]} + endTime={appLogEvents ? endTime : dateRange[1]} handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)} selectedPanelName={selectedPanelNameRef.current} selectedCustomPanelOptions={selectedCustomPanelOptions}