Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

final live tail fixes #558

Merged
merged 1 commit into from
Mar 9, 2022
Merged

final live tail fixes #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions dashboards-observability/.cypress/integration/event_analytics.spec.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these parentheses are unnecessary

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah removed one condition from there and forgot to remove the extra

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>
);
};
};