Skip to content

Commit

Permalink
final live fixes (#558)
Browse files Browse the repository at this point in the history 
Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
  • Loading branch information
@kavithacm
kavithacm authored Mar 9, 2022
1 parent d9f106d commit d25ab36
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 63 deletions.
59 changes: 59 additions & 0 deletions dashboards-observability/.cypress/integration/event_analytics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -384,3 +384,62 @@ describe('Switch on and off livetail', () => {
cy.get('.euiToastHeader__title').contains('Off').should('exist');
});
});

describe('Live tail stop automatically', () => {
it('Moving to other tab should stop live tail automatically', () => {
landOnEventExplorer();
cy.wait(delay);

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.wait(delay * 2);
cy.get('.euiToastHeader__title').contains('On').should('exist');
});

it('Add a new tab', () => {
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.then((lists) => {
const initialLength = Cypress.$(lists).length;
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.should('have.length', initialLength + 1);
});
});

it('Click to switch to another tab', () => {
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.first()
.click();
cy.wait(delay);

cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.first()
.should('have.class', 'euiTab-isSelected');
});

it('Close current selected tab', () => {
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.then((lists) => {
const initialLength = Cypress.$(lists).length;
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"] button.euiTab').eq(1).click();
cy.get('button.euiTab-isSelected [data-test-subj="eventExplorer__tabClose"]').click();
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.should('have.length', initialLength - 1);
});
});

it('Live tail should be stopped', () => {
cy.get('.euiButton__text').contains('Live');
});
});
41 changes: 6 additions & 35 deletions dashboards-observability/public/components/common/search/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import './search.scss';

import React, { useMemo, useRef, useState } from 'react';
import React, { useState } from 'react';
import {
EuiFlexGroup,
EuiButton,
Expand All @@ -15,17 +15,15 @@ import {
EuiPopoverFooter,
EuiBadge,
EuiContextMenuPanel,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import _, { reduce } from 'lodash';
import _ from 'lodash';
import { DatePicker } from './date_picker';
import '@algolia/autocomplete-theme-classic';
import { Autocomplete } from './autocomplete';
import { SavePanel } from '../../explorer/save_panel';
import { PPLReferenceFlyout } from '../helpers';
import { uiSettingsService } from '../../../../common/utils';
import { HitsCounter } from '../../explorer/hits_counter';
import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
export interface IQueryBarProps {
query: string;
Expand Down Expand Up @@ -73,7 +71,6 @@ export const Search = (props: any) => {
closeLiveTailPopover,
popoverItems,
isLiveTailOn,
countDistribution,
selectedSubTabId,
searchBarConfigs = {},
getSuggestions,
Expand All @@ -86,9 +83,6 @@ export const Search = (props: any) => {

const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
const [liveHits, setLiveHits] = useState(0);
const liveHitsRef = useRef(0);
liveHitsRef.current = liveHits;

const closeFlyout = () => {
setIsFlyoutVisible(false);
Expand Down Expand Up @@ -118,19 +112,6 @@ export const Search = (props: any) => {
</EuiButton>
);

const totalHits = useMemo(() => {
if (isLiveTailOn && countDistribution?.data) {
let hits = reduce(
countDistribution['data']['count()'],
(sum, n) => {
return sum + n;
},
liveHits
)
setLiveHits(hits);
return hits
}} , [countDistribution?.data]);

return (
<div className="globalQueryBar">
<EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
Expand Down Expand Up @@ -169,19 +150,7 @@ export const Search = (props: any) => {
</EuiFlexItem>
<EuiFlexItem grow={false} />
<EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
{isLiveTailOn && countDistribution?.data ? (
<EuiFlexGroup justifyContent="center" alignItems="center">
<EuiText size="s" textAlign="left" color="default">
<h3>Live - </h3>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => { } } />
</EuiFlexItem>
</EuiFlexGroup>
) : (
{!isLiveTailOn && (
<DatePicker
startTime={startTime}
endTime={endTime}
Expand All @@ -194,6 +163,7 @@ export const Search = (props: any) => {
handleTimeRangePickerRefresh={handleTimeRangePickerRefresh} />
)}
</EuiFlexItem>
{!showSavePanelOptionsList && (
<EuiFlexItem className="euiFlexItem--flexGrowZero live-tail">
<EuiPopover
panelPaddingSize="none"
Expand All @@ -204,6 +174,7 @@ export const Search = (props: any) => {
<EuiContextMenuPanel items={popoverItems} />
</EuiPopover>
</EuiFlexItem>
)}
{showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
<>
<EuiFlexItem key={'search-save-'} className="euiFlexItem--flexGrowZero">
Expand Down Expand Up @@ -258,4 +229,4 @@ export const Search = (props: any) => {
{flyout}
</div>
);
};
};
106 changes: 78 additions & 28 deletions dashboards-observability/public/components/explorer/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
EuiContextMenuItem,
EuiButtonToggle,
} from '@elastic/eui';
import dateMath from '@elastic/datemath';
import classNames from 'classnames';
import { Search } from '../common/search/search';
import { CountDistribution } from './visualizations/count_distribution';
Expand Down Expand Up @@ -53,6 +54,7 @@ import {
TAB_CHART_ID,
INDEX,
FINAL_QUERY,
DATE_PICKER_FORMAT,
} from '../../../common/constants/explorer';
import { PPL_STATS_REGEX, PPL_NEWLINE_REGEX } from '../../../common/constants/shared';
import { getIndexPatternFromRawQuery, preprocessQuery, buildQuery } from '../../../common/utils';
Expand Down Expand Up @@ -139,6 +141,10 @@ export const Explorer = ({
const [liveTailTabId, setLiveTailTabId] = useState(TAB_EVENT_ID);
const [liveTailName, setLiveTailName] = useState('Live');
const [liveTailToggle, setLiveTailToggle] = useState(false);
const [liveHits, setLiveHits] = useState(0);
const [browserTabFocus, setBrowserTabFocus] = useState(true);
const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT);

const queryRef = useRef();
const selectedPanelNameRef = useRef('');
const explorerFieldsRef = useRef();
Expand Down Expand Up @@ -167,6 +173,17 @@ export const Explorer = ({
}
}, [isEventsLoading, isVisLoading]);

useEffect(() => {
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
setBrowserTabFocus(false);
}
else {
setBrowserTabFocus(true);
}
});
});

const composeFinalQuery = (
curQuery: any,
startingTime: string,
Expand Down Expand Up @@ -551,6 +568,19 @@ export const Explorer = ({
handleQuerySearch();
};

const totalHits: number = useMemo(() => {
if (isLiveTailOn && countDistribution?.data) {
let hits = reduce(
countDistribution['data']['count()'],
(sum, n) => {
return sum + n;
},
liveHits
)
setLiveHits(hits);
return hits
}} , [countDistribution?.data]);

const getMainContent = () => {
return (
<main className="container-fluid">
Expand Down Expand Up @@ -600,7 +630,7 @@ export const Explorer = ({
) : explorerData && !isEmpty(explorerData.jsonData) ? (
<div className="dscWrapper__content">
<div className="dscResults">
{countDistribution?.data && (
{countDistribution?.data && !isLiveTailOnRef.current && (
<>
<EuiFlexGroup justifyContent="center" alignItems="center">
<EuiFlexItem grow={false}>
Expand Down Expand Up @@ -643,14 +673,24 @@ export const Explorer = ({
</h2>
<div className="dscDiscover">
{isLiveTailOnRef.current && (
<div className="liveStream">
<EuiSpacer size="m" />
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>Live streaming</strong>
</EuiText>
<EuiSpacer size="m" />
</div>
<>
<EuiSpacer size="m" />
<EuiFlexGroup justifyContent="center" alignItems="center" gutterSize='m'>
<EuiLoadingSpinner size="l" />
<EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
<strong>&nbsp;&nbsp;Live streaming</strong>
</EuiText>
<EuiFlexItem grow={false}>
<HitsCounter
hits={totalHits}
showResetButton={false}
onResetQuery={() => { } } />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<strong>since {liveTimestamp}</strong>
</EuiFlexItem>
</EuiFlexGroup><EuiSpacer size="m" />
</>
)}
<DataGrid
http={http}
Expand Down Expand Up @@ -1026,8 +1066,7 @@ export const Explorer = ({
return (
<EuiButtonToggle
label={liveTailNameRef.current}
iconType={isLiveTailOn ? '' : 'play'}
isLoading={isLiveTailOn ? true : false}
iconType={isLiveTailOn ? 'stop' : 'play'}
iconSide="left"
onClick={() => setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
onChange={onToggleChange}
Expand All @@ -1051,20 +1090,44 @@ export const Explorer = ({
setIsLiveTailOn(true);
setToast('Live tail On', 'success');
setIsLiveTailPopoverOpen(false);
setLiveTimestamp(dateMath.parse(endTime)?.utc().format(DATE_PICKER_FORMAT));
setLiveHits(0);
await sleep(2000);
const curLiveTailname = liveTailNameRef.current;
while (isLiveTailOnRef.current === true && curLiveTailname === liveTailNameRef.current) {
handleLiveTailSearch(startTime, endTime);
if (liveTailTabIdRef.current !== curSelectedTabId.current) {
setIsLiveTailOn(!isLiveTailOnRef.current);
if ((liveTailTabIdRef.current !== curSelectedTabId.current)) {
setIsLiveTailOn(false);
isLiveTailOnRef.current = false;
setLiveTailName('');
setLiveTailName('Live');
setLiveHits(0);
}
await sleep(delayTime);
}
};

useEffect(() => {
if ((isEqual(selectedContentTabId, TAB_CHART_ID)) || (!browserTabFocus)) {
setLiveTailName('Live');
setIsLiveTailOn(false);
setLiveHits(0);
}
}, [selectedContentTabId, browserTabFocus]);

const popoverItems: ReactElement[] = [
<EuiContextMenuItem
key="stop"
onClick={() => {
setLiveTailName('Live');
setIsLiveTailOn(false);
setToast('Live tail Off', 'success');
setLiveHits(0);
setIsLiveTailPopoverOpen(false);
}}
data-test-subj="eventLiveTail__off"
>
Stop
</EuiContextMenuItem>,
<EuiContextMenuItem
key="5s"
onClick={async () => {
Expand Down Expand Up @@ -1138,18 +1201,6 @@ export const Explorer = ({
>
2h
</EuiContextMenuItem>,
<EuiContextMenuItem
key="stop"
onClick={() => {
setLiveTailName('Live');
setIsLiveTailOn(false);
setToast('Live tail Off', 'success');
setIsLiveTailPopoverOpen(false);
}}
data-test-subj="eventLiveTail__off"
>
Stop
</EuiContextMenuItem>,
];

const dateRange =
Expand Down Expand Up @@ -1204,7 +1255,6 @@ export const Explorer = ({
closeLiveTailPopover={() => setIsLiveTailPopoverOpen(false)}
popoverItems={popoverItems}
isLiveTailOn={isLiveTailOnRef.current}
countDistribution={countDistribution}
selectedSubTabId={selectedContentTabId}
searchBarConfigs={searchBarConfigs}
getSuggestions={appLogEvents ? getSuggestionsAfterSource : getFullSuggestions}
Expand All @@ -1222,4 +1272,4 @@ export const Explorer = ({
</div>
</TabContext.Provider>
);
};
};

0 comments on commit d25ab36

Please sign in to comment.