From dd78f4ade130a289ac728fa7d0df2fe10eb92f25 Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Tue, 12 Apr 2022 10:07:48 -0700 Subject: [PATCH 1/6] module event live Signed-off-by: Kavitha Conjeevaram Mohan --- .../integration/event_analytics.spec.js | 4 +- .../common/constants/shared.ts | 51 ++++ .../common/types/explorer.ts | 8 + .../__/live_tail_button.test.tsx.snap | 275 ++++++++++++++++++ .../live_tail/live_tail_button.test.tsx | 75 +++++ .../common/live_tail/live_tail_button.tsx | 58 ++++ .../components/common/search/search.tsx | 29 +- .../public/components/explorer/explorer.tsx | 222 ++++---------- 8 files changed, 540 insertions(+), 182 deletions(-) create mode 100644 dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap create mode 100644 dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx create mode 100644 dashboards-observability/public/components/common/live_tail/live_tail_button.tsx diff --git a/dashboards-observability/.cypress/integration/event_analytics.spec.js b/dashboards-observability/.cypress/integration/event_analytics.spec.js index 46b03b715..3f40da076 100644 --- a/dashboards-observability/.cypress/integration/event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/event_analytics.spec.js @@ -394,7 +394,7 @@ describe('Switch on and off livetail', () => { cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); cy.get('[data-test-subj=eventLiveTail]').click(); - cy.get('[data-test-subj=eventLiveTail__delay10]').click(); + cy.get('[data-test-subj=10s]').click(); cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('On').should('exist'); @@ -412,7 +412,7 @@ describe('Live tail stop automatically', () => { cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); cy.get('[data-test-subj=eventLiveTail]').click(); - cy.get('[data-test-subj=eventLiveTail__delay10]').click(); + cy.get('[data-test-subj=10s]').click(); cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('On').should('exist'); }); diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index 7f6e0a2ca..19c0fb8fd 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -74,3 +74,54 @@ export const pageStyles: CSS.Properties = { export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double']; export const ENABLED_VIS_TYPES = ['bar', 'horizontal_bar', 'line', 'pie', 'heatmap', 'text']; + +//Live tail constants +export const LIVE_OPTIONS = [ + { + label:'5s', + startTime: 'now-5s', + delayTime: 5000, + }, + { + label:'10s', + startTime: 'now-10s', + delayTime: 10000, + }, + { + label:'30s', + startTime: 'now-30s', + delayTime: 30000, + }, + { + label:'1m', + startTime: 'now-1m', + delayTime: 60000, + }, + { + label:'5m', + startTime: 'now-5m', + delayTime: 60000 * 5, + }, + { + label:'15m', + startTime: 'now-15m', + delayTime: 60000 * 15, + }, + { + label:'30m', + startTime: 'now-30m', + delayTime: 60000 * 30, + }, + { + label:'1h', + startTime: 'now-1h', + delayTime: 60000 * 60, + }, + { + label:'2h', + startTime: 'now-2h', + delayTime: 60000 * 120, + }, +]; + +export const LIVE_END_TIME ='now'; \ No newline at end of file diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 9f5c15fb0..fcf9017d2 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -217,3 +217,11 @@ export interface IDefaultTimestampState { default_timestamp: string; message: string; } + +export interface LiveTailProps { + isLiveTailOn: boolean; + setIsLiveTailPopoverOpen: React.Dispatch>; + liveTailName: string; + isLiveTailPopoverOpen: boolean; + dataTestSubj: string; +} diff --git a/dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap b/dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap new file mode 100644 index 000000000..78104e652 --- /dev/null +++ b/dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap @@ -0,0 +1,275 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Live tail button change live tail to 10s interval 1`] = ` + + + + + + + +`; + +exports[`Live tail button starts live tail with 5s interval 1`] = ` + + + + + + + +`; + +exports[`Live tail off button stop live tail 1`] = ` + + + + + + + +`; diff --git a/dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx b/dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx new file mode 100644 index 000000000..05909e960 --- /dev/null +++ b/dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx @@ -0,0 +1,75 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount, shallow } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { LiveTailButton, StopLiveButton } from './live_tail_button'; +import { waitFor } from '@testing-library/dom'; + + describe('Live tail button', () => { + configure({ adapter: new Adapter() }); + + it('starts live tail with 5s interval', async () => { + const setIsLiveTailPopoverOpen = jest.fn(); + + const wrapper = mount( + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); + + it('change live tail to 10s interval', async () => { + const setIsLiveTailPopoverOpen = jest.fn(); + + const wrapper = mount( + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); + }); + + describe('Live tail off button', () => { + configure({ adapter: new Adapter() }); + + it('stop live tail', async () => { + const StopLive = jest.fn(); + + const wrapper = mount( + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); + }); \ No newline at end of file diff --git a/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx new file mode 100644 index 000000000..1384e9e7a --- /dev/null +++ b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx @@ -0,0 +1,58 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +//Define pop over interval options for live tail button in your plugin + +import { EuiButton } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import { LiveTailProps } from 'common/types/explorer'; + +//Live Tail Button +export const LiveTailButton = ({ + isLiveTailOn, + isLiveTailPopoverOpen, + setIsLiveTailPopoverOpen, + liveTailName, + dataTestSubj, +}: LiveTailProps) => { + + const liveButton = useMemo(() => { + return ( + setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} + data-test-subj={dataTestSubj} + > + {liveTailName} + + )}, [isLiveTailPopoverOpen, isLiveTailOn]); + return liveButton; +}; + +export const StopLiveButton = (props: any) => { + const { + StopLive, + dataTestSubj, +} = props; + + const stopButton = () => { + return ( + StopLive()} + color="danger" + data-test-subj={dataTestSubj} + > + Stop + + ) + }; + return stopButton(); +}; + +export const sleep = (milliseconds: number | undefined) => { + return new Promise((resolve) => setTimeout(resolve, milliseconds)); + }; \ No newline at end of file diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx index 6c59133d2..6995b6945 100644 --- a/dashboards-observability/public/components/common/search/search.tsx +++ b/dashboards-observability/public/components/common/search/search.tsx @@ -25,6 +25,7 @@ import { SavePanel } from '../../explorer/save_panel'; import { PPLReferenceFlyout } from '../helpers'; import { uiSettingsService } from '../../../../common/utils'; import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer'; +import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button'; export interface IQueryBarProps { query: string; tempQuery: string; @@ -78,6 +79,8 @@ export const Search = (props: any) => { tabId = '', baseQuery = '', stopLive, + setIsLiveTailPopoverOpen, + liveTailName, } = props; const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX); @@ -113,6 +116,16 @@ export const Search = (props: any) => { ); + const liveButton = ( + + ); + return (
@@ -165,11 +178,11 @@ export const Search = (props: any) => { /> )} - {!showSavePanelOptionsList && ( + {showSaveButton && !showSavePanelOptionsList && ( @@ -179,14 +192,10 @@ export const Search = (props: any) => { )} {isLiveTailOn && ( - stopLive()} - color="danger" - data-test-subj="eventLiveTail__off" - > - Stop - + )} {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && ( diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/explorer/explorer.tsx index 4f9233cf8..5bf35de87 100644 --- a/dashboards-observability/public/components/explorer/explorer.tsx +++ b/dashboards-observability/public/components/explorer/explorer.tsx @@ -20,7 +20,6 @@ import { EuiFlexItem, EuiLink, EuiContextMenuItem, - EuiButton, } from '@elastic/eui'; import dateMath from '@elastic/datemath'; import classNames from 'classnames'; @@ -55,7 +54,7 @@ import { FINAL_QUERY, DATE_PICKER_FORMAT, } from '../../../common/constants/explorer'; -import { PPL_STATS_REGEX, PPL_NEWLINE_REGEX } from '../../../common/constants/shared'; +import { PPL_STATS_REGEX, PPL_NEWLINE_REGEX, LIVE_OPTIONS, LIVE_END_TIME } from '../../../common/constants/shared'; import { getIndexPatternFromRawQuery, preprocessQuery, buildQuery } from '../../../common/utils'; import { useFetchEvents, useFetchVisualizations } from './hooks'; import { changeQuery, changeDateRange, selectQueries } from './slices/query_slice'; @@ -77,6 +76,7 @@ import { onItemSelect, } from '../common/search/autocomplete_logic'; import { formatError } from './utils'; +import { sleep } from '../common/live_tail/live_tail_button'; const TYPE_TAB_MAPPING = { [SAVED_QUERY]: TAB_EVENT_ID, @@ -285,7 +285,7 @@ export const Explorer = ({ ? TYPE_TAB_MAPPING[SAVED_QUERY] : TYPE_TAB_MAPPING[SAVED_VISUALIZATION]; setSelectedContentTab(tabToBeFocused); - await fetchData(); + await fetchData('', ''); }) .catch((error) => { notifications.toasts.addError(error, { @@ -298,7 +298,7 @@ export const Explorer = ({ indexPattern: string ): Promise => await timestampUtils.getTimestamp(indexPattern); - const fetchData = async () => { + const fetchData = async (startTime: string, endTime: string) => { const curQuery = queryRef.current; const rawQueryStr = buildQuery(appBaseQuery, curQuery![RAW_QUERY]); const curIndex = getIndexPatternFromRawQuery(rawQueryStr); @@ -323,11 +323,16 @@ export const Explorer = ({ } } + if (!isLiveTailOnRef.current) { + startTime = curQuery![SELECTED_DATE_RANGE][0]; + endTime = curQuery![SELECTED_DATE_RANGE][1]; + } + // compose final query const finalQuery = composeFinalQuery( curQuery, - curQuery![SELECTED_DATE_RANGE][0], - curQuery![SELECTED_DATE_RANGE][1], + startTime, + endTime, curTimestamp, isLiveTailOnRef.current ); @@ -347,84 +352,39 @@ export const Explorer = ({ getVisualizations(); getAvailableFields(`search source=${curIndex}`); } else { - findAutoInterval(curQuery![SELECTED_DATE_RANGE][0], curQuery![SELECTED_DATE_RANGE][1]); - getEvents(undefined, (error) => { - const formattedError = formatError(error.name, error.message, error.body.message); - notifications.toasts.addError(formattedError, { - title: 'Error fetching events', + findAutoInterval(startTime, endTime); + if (isLiveTailOnRef.current){ + getLiveTail(undefined, (error) => { + const formattedError = formatError(error.name, error.message, error.body.message); + notifications.toasts.addError(formattedError, { + title: 'Error fetching events', + }); }); - }); + } else { + getEvents(undefined, (error) => { + const formattedError = formatError(error.name, error.message, error.body.message); + notifications.toasts.addError(formattedError, { + title: 'Error fetching events', + }); + }); + } getCountVisualizations(minInterval); } // for comparing usage if for the same tab, user changed index from one to another - setPrevIndex(curTimestamp); - if (!queryRef.current!.isLoaded) { - dispatch( - changeQuery({ - tabId, - query: { - isLoaded: true, - }, - }) - ); - } - }; - - const fetchLiveData = async (startTime: string, endTime: string) => { - const curQuery = queryRef.current; - const rawQueryStr = buildQuery(appBaseQuery, curQuery![RAW_QUERY]); - const curIndex = getIndexPatternFromRawQuery(rawQueryStr); - if (isEmpty(rawQueryStr)) { - return; - } - - if (isEmpty(curIndex)) { - setToast('Query does not include vaild index.', 'danger'); - return; - } - - let curTimestamp: string = curQuery![SELECTED_TIMESTAMP]; - - if (isEmpty(curTimestamp)) { - const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex); - if (isEmpty(defaultTimestamp.default_timestamp)) { - setToast(defaultTimestamp.message, 'danger'); - return; - } - curTimestamp = defaultTimestamp.default_timestamp; - if (defaultTimestamp.hasSchemaConflict) { - setToast(defaultTimestamp.message, 'danger'); + if (!isLiveTailOnRef.current){ + setPrevIndex(curTimestamp); + if (!queryRef.current!.isLoaded) { + dispatch( + changeQuery({ + tabId, + query: { + isLoaded: true, + }, + }) + ); } } - - // compose final query - const finalQuery = composeFinalQuery( - curQuery, - startTime, - endTime, - curTimestamp, - isLiveTailOnRef.current - ); - - await dispatch( - changeQuery({ - tabId, - query: { - finalQuery, - [SELECTED_TIMESTAMP]: curTimestamp, - }, - }) - ); - - findAutoInterval(startTime, endTime); - getLiveTail(undefined, (error) => { - const formattedError = formatError(error.name, error.message, error.body.message); - notifications.toasts.addError(formattedError, { - title: 'Error fetching events', - }); - }); - getCountVisualizations(minInterval); }; const isIndexPatternChanged = (currentQuery: string, prevTabQuery: string) => @@ -445,7 +405,7 @@ export const Explorer = ({ if (objectId) { updateTabData(objectId); } else { - fetchData(); + fetchData('', ''); } }, []); @@ -473,7 +433,7 @@ export const Explorer = ({ }, }) ); - await fetchData(); + await fetchData('', ''); }; const handleAddField = (field: IField) => toggleFields(field, AVAILABLE_FIELDS, SELECTED_FIELDS); @@ -836,7 +796,7 @@ export const Explorer = ({ await updateCurrentTimeStamp(''); } await updateQueryInStore(tempQuery); - fetchData(); + fetchData('', ''); }, [tempQuery, query[RAW_QUERY]]); const handleQueryChange = async (newQuery: string) => { @@ -1057,23 +1017,6 @@ export const Explorer = ({ } }; - const wrappedPopoverButton = useMemo(() => { - return ( - setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} - data-test-subj="eventLiveTail" - > - {liveTailNameRef.current} - - ); - }, [isLiveTailPopoverOpen, isLiveTailOn]); - - const sleep = (milliseconds: number | undefined) => { - return new Promise((resolve) => setTimeout(resolve, milliseconds)); - }; - const liveTailLoop = async ( name: string, startTime: string, @@ -1115,81 +1058,19 @@ export const Explorer = ({ } }, [selectedContentTabId, browserTabFocus]); - const popoverItems: ReactElement[] = [ - { - liveTailLoop('5s', 'now-5s', 'now', 5000); - }} - > - 5s - , - { - liveTailLoop('10s', 'now-10s', 'now', 10000); - }} - > - 10s - , - { - liveTailLoop('30s', 'now-30s', 'now', 30000); - }} - > - 30s - , - { - liveTailLoop('1m', 'now-1m', 'now', 60000); - }} - > - 1m - , - { - liveTailLoop('5m', 'now-5m', 'now', 60000 * 5); - }} - > - 5m - , - { - liveTailLoop('15m', 'now-15m', 'now', 60000 * 15); - }} - > - 15m - , - { - liveTailLoop('30m', 'now-30m', 'now', 60000 * 30); - }} - > - 30m - , - { - liveTailLoop('1h', 'now-1h', 'now', 60000 * 60); - }} - > - 1h - , + const popoverItems: ReactElement[] = LIVE_OPTIONS.map((e) => { + return ( { - liveTailLoop('2h', 'now-2h', 'now', 60000 * 120); + liveTailLoop(e.label, e.startTime, LIVE_END_TIME, e.delayTime); }} + data-test-subj={e.label} > - 2h - , - ]; + {e.label} + + ) + }); const dateRange = isEmpty(startTime) || isEmpty(endTime) @@ -1201,7 +1082,7 @@ export const Explorer = ({ const handleLiveTailSearch = useCallback( async (startTime: string, endTime: string) => { await updateQueryInStore(tempQuery); - fetchLiveData(startTime, endTime); + fetchData(startTime, endTime); }, [tempQuery] ); @@ -1238,7 +1119,6 @@ export const Explorer = ({ savedObjects={savedObjects} showSavePanelOptionsList={isEqual(selectedContentTabId, TAB_CHART_ID)} handleTimeRangePickerRefresh={handleTimeRangePickerRefresh} - liveTailButton={wrappedPopoverButton} isLiveTailPopoverOpen={isLiveTailPopoverOpen} closeLiveTailPopover={() => setIsLiveTailPopoverOpen(false)} popoverItems={popoverItems} @@ -1250,6 +1130,8 @@ export const Explorer = ({ tabId={tabId} baseQuery={appBaseQuery} stopLive={stopLive} + setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen} + liveTailName={liveTailNameRef.current} /> Date: Tue, 12 Apr 2022 11:22:17 -0700 Subject: [PATCH 2/6] fix bug- stops live tail when moved using breadcrumbs Signed-off-by: Kavitha Conjeevaram Mohan --- .../public/components/explorer/explorer.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/explorer/explorer.tsx index 5bf35de87..156158d36 100644 --- a/dashboards-observability/public/components/explorer/explorer.tsx +++ b/dashboards-observability/public/components/explorer/explorer.tsx @@ -1058,6 +1058,16 @@ export const Explorer = ({ } }, [selectedContentTabId, browserTabFocus]); + //stop live tail if the page is moved using breadcrumbs + var lastUrl = location.href; + new MutationObserver(() => { + const url = location.href; + if (url !== lastUrl) { + lastUrl = url; + stopLive(); + } + }).observe(document, {subtree: true, childList: true}); + const popoverItems: ReactElement[] = LIVE_OPTIONS.map((e) => { return ( Date: Wed, 13 Apr 2022 12:51:16 -0700 Subject: [PATCH 3/6] format livetail file, optional args and specific cypress name Signed-off-by: Kavitha Conjeevaram Mohan --- .../integration/event_analytics.spec.js | 4 +- .../common/live_tail/live_tail_button.tsx | 79 +++++++++---------- .../public/components/explorer/explorer.tsx | 16 ++-- 3 files changed, 48 insertions(+), 51 deletions(-) diff --git a/dashboards-observability/.cypress/integration/event_analytics.spec.js b/dashboards-observability/.cypress/integration/event_analytics.spec.js index 3f40da076..981b10b53 100644 --- a/dashboards-observability/.cypress/integration/event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/event_analytics.spec.js @@ -394,7 +394,7 @@ describe('Switch on and off livetail', () => { cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); cy.get('[data-test-subj=eventLiveTail]').click(); - cy.get('[data-test-subj=10s]').click(); + cy.get('[data-test-subj=eventLiveTail__delay10s]').click(); cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('On').should('exist'); @@ -412,7 +412,7 @@ describe('Live tail stop automatically', () => { cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query); cy.get('[data-test-subj=eventLiveTail]').click(); - cy.get('[data-test-subj=10s]').click(); + cy.get('[data-test-subj=eventLiveTail__delay10s]').click(); cy.wait(delay * 2); cy.get('.euiToastHeader__title').contains('On').should('exist'); }); diff --git a/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx index 1384e9e7a..d6d4dff7c 100644 --- a/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx +++ b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx @@ -5,54 +5,51 @@ //Define pop over interval options for live tail button in your plugin -import { EuiButton } from '@elastic/eui'; -import React, { useMemo } from 'react'; -import { LiveTailProps } from 'common/types/explorer'; +import { EuiButton } from "@elastic/eui"; +import React, { useMemo } from "react"; +import { LiveTailProps } from "common/types/explorer"; //Live Tail Button export const LiveTailButton = ({ - isLiveTailOn, - isLiveTailPopoverOpen, - setIsLiveTailPopoverOpen, - liveTailName, - dataTestSubj, + isLiveTailOn, + isLiveTailPopoverOpen, + setIsLiveTailPopoverOpen, + liveTailName, + dataTestSubj }: LiveTailProps) => { - - const liveButton = useMemo(() => { - return ( - setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} - data-test-subj={dataTestSubj} - > - {liveTailName} - - )}, [isLiveTailPopoverOpen, isLiveTailOn]); - return liveButton; + const liveButton = useMemo(() => { + return ( + setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} + data-test-subj={dataTestSubj} + > + {liveTailName} + + ); + }, [isLiveTailPopoverOpen, isLiveTailOn]); + return liveButton; }; export const StopLiveButton = (props: any) => { - const { - StopLive, - dataTestSubj, -} = props; - - const stopButton = () => { - return ( - StopLive()} - color="danger" - data-test-subj={dataTestSubj} - > - Stop - - ) - }; - return stopButton(); + const { StopLive, dataTestSubj } = props; + + const stopButton = () => { + return ( + StopLive()} + color="danger" + data-test-subj={dataTestSubj} + > + Stop + + ); + }; + return stopButton(); }; export const sleep = (milliseconds: number | undefined) => { - return new Promise((resolve) => setTimeout(resolve, milliseconds)); - }; \ No newline at end of file + return new Promise(resolve => setTimeout(resolve, milliseconds)); +}; diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/explorer/explorer.tsx index 156158d36..33ad3fa6e 100644 --- a/dashboards-observability/public/components/explorer/explorer.tsx +++ b/dashboards-observability/public/components/explorer/explorer.tsx @@ -285,7 +285,7 @@ export const Explorer = ({ ? TYPE_TAB_MAPPING[SAVED_QUERY] : TYPE_TAB_MAPPING[SAVED_VISUALIZATION]; setSelectedContentTab(tabToBeFocused); - await fetchData('', ''); + await fetchData(); }) .catch((error) => { notifications.toasts.addError(error, { @@ -298,7 +298,7 @@ export const Explorer = ({ indexPattern: string ): Promise => await timestampUtils.getTimestamp(indexPattern); - const fetchData = async (startTime: string, endTime: string) => { + const fetchData = async (startTime?: string, endTime?: string) => { const curQuery = queryRef.current; const rawQueryStr = buildQuery(appBaseQuery, curQuery![RAW_QUERY]); const curIndex = getIndexPatternFromRawQuery(rawQueryStr); @@ -323,7 +323,7 @@ export const Explorer = ({ } } - if (!isLiveTailOnRef.current) { + if ((isEqual(typeof startTime, 'undefined')) && (isEqual(typeof endTime, 'undefined'))) { startTime = curQuery![SELECTED_DATE_RANGE][0]; endTime = curQuery![SELECTED_DATE_RANGE][1]; } @@ -405,7 +405,7 @@ export const Explorer = ({ if (objectId) { updateTabData(objectId); } else { - fetchData('', ''); + fetchData(); } }, []); @@ -433,7 +433,7 @@ export const Explorer = ({ }, }) ); - await fetchData('', ''); + await fetchData(); }; const handleAddField = (field: IField) => toggleFields(field, AVAILABLE_FIELDS, SELECTED_FIELDS); @@ -796,7 +796,7 @@ export const Explorer = ({ await updateCurrentTimeStamp(''); } await updateQueryInStore(tempQuery); - fetchData('', ''); + fetchData(); }, [tempQuery, query[RAW_QUERY]]); const handleQueryChange = async (newQuery: string) => { @@ -1059,7 +1059,7 @@ export const Explorer = ({ }, [selectedContentTabId, browserTabFocus]); //stop live tail if the page is moved using breadcrumbs - var lastUrl = location.href; + let lastUrl = location.href; new MutationObserver(() => { const url = location.href; if (url !== lastUrl) { @@ -1075,7 +1075,7 @@ export const Explorer = ({ onClick={async () => { liveTailLoop(e.label, e.startTime, LIVE_END_TIME, e.delayTime); }} - data-test-subj={e.label} + data-test-subj={'eventLiveTail__delay'+e.label} > {e.label} From 1a25d600d57df787df08975554b34c3cd4516668 Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Wed, 13 Apr 2022 13:21:06 -0700 Subject: [PATCH 4/6] format using prettier Signed-off-by: Kavitha Conjeevaram Mohan --- .../common/live_tail/live_tail_button.tsx | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx index d6d4dff7c..0e53152fa 100644 --- a/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx +++ b/dashboards-observability/public/components/common/live_tail/live_tail_button.tsx @@ -11,45 +11,45 @@ import { LiveTailProps } from "common/types/explorer"; //Live Tail Button export const LiveTailButton = ({ - isLiveTailOn, - isLiveTailPopoverOpen, - setIsLiveTailPopoverOpen, - liveTailName, - dataTestSubj + isLiveTailOn, + isLiveTailPopoverOpen, + setIsLiveTailPopoverOpen, + liveTailName, + dataTestSubj, }: LiveTailProps) => { - const liveButton = useMemo(() => { - return ( - setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} - data-test-subj={dataTestSubj} - > - {liveTailName} - - ); - }, [isLiveTailPopoverOpen, isLiveTailOn]); - return liveButton; + const liveButton = useMemo(() => { + return ( + setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)} + data-test-subj={dataTestSubj} + > + {liveTailName} + + ); + }, [isLiveTailPopoverOpen, isLiveTailOn]); + return liveButton; }; export const StopLiveButton = (props: any) => { - const { StopLive, dataTestSubj } = props; + const { StopLive, dataTestSubj } = props; - const stopButton = () => { - return ( - StopLive()} - color="danger" - data-test-subj={dataTestSubj} - > - Stop - - ); - }; - return stopButton(); + const stopButton = () => { + return ( + StopLive()} + color="danger" + data-test-subj={dataTestSubj} + > + Stop + + ); + }; + return stopButton(); }; export const sleep = (milliseconds: number | undefined) => { - return new Promise(resolve => setTimeout(resolve, milliseconds)); + return new Promise((resolve) => setTimeout(resolve, milliseconds)); }; From 9a8b039b99d8ba7111c462ababa9ed15a742769f Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Thu, 14 Apr 2022 14:56:26 -0700 Subject: [PATCH 5/6] change jest test location Signed-off-by: Kavitha Conjeevaram Mohan --- .../__snapshots__}/live_tail_button.test.tsx.snap | 0 .../common/live_tail/{ => __tests__}/live_tail_button.test.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename dashboards-observability/public/components/common/live_tail/{__ => __tests__/__snapshots__}/live_tail_button.test.tsx.snap (100%) rename dashboards-observability/public/components/common/live_tail/{ => __tests__}/live_tail_button.test.tsx (100%) diff --git a/dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap b/dashboards-observability/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap similarity index 100% rename from dashboards-observability/public/components/common/live_tail/__/live_tail_button.test.tsx.snap rename to dashboards-observability/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap diff --git a/dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx b/dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx similarity index 100% rename from dashboards-observability/public/components/common/live_tail/live_tail_button.test.tsx rename to dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx From 956a258a11ad71a285fc5eb8249bde466aabf070 Mon Sep 17 00:00:00 2001 From: Kavitha Conjeevaram Mohan Date: Thu, 14 Apr 2022 15:10:18 -0700 Subject: [PATCH 6/6] change test location Signed-off-by: Kavitha Conjeevaram Mohan --- .../common/live_tail/__tests__/live_tail_button.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx b/dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx index 05909e960..4cb2a478f 100644 --- a/dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx +++ b/dashboards-observability/public/components/common/live_tail/__tests__/live_tail_button.test.tsx @@ -6,7 +6,7 @@ import { configure, mount, shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; -import { LiveTailButton, StopLiveButton } from './live_tail_button'; +import { LiveTailButton, StopLiveButton } from '../live_tail_button'; import { waitFor } from '@testing-library/dom'; describe('Live tail button', () => {