diff --git a/dashboards-observability/.cypress/integration/event_analytics.spec.js b/dashboards-observability/.cypress/integration/event_analytics.spec.js
index 5ee45d3b8..5aeb98057 100644
--- a/dashboards-observability/.cypress/integration/event_analytics.spec.js
+++ b/dashboards-observability/.cypress/integration/event_analytics.spec.js
@@ -400,7 +400,6 @@ describe('Switch on and off livetail', () => {
cy.wait(delay * 2);
cy.get('.euiToastHeader__title').contains('On').should('exist');
- cy.get('[data-test-subj=eventLiveTail]').click();
cy.get('[data-test-subj=eventLiveTail__off').click();
cy.wait(delay * 2);
cy.get('.euiToastHeader__title').contains('Off').should('exist');
diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx
index 104e845b0..6c59133d2 100644
--- a/dashboards-observability/public/components/common/search/search.tsx
+++ b/dashboards-observability/public/components/common/search/search.tsx
@@ -77,6 +77,7 @@ export const Search = (props: any) => {
onItemSelect,
tabId = '',
baseQuery = '',
+ stopLive,
} = props;
const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
@@ -176,6 +177,18 @@ 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 2fd2c781d..ba11573f7 100644
--- a/dashboards-observability/public/components/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/explorer/explorer.tsx
@@ -20,7 +20,7 @@ import {
EuiFlexItem,
EuiLink,
EuiContextMenuItem,
- EuiButtonToggle,
+ EuiButton,
} from '@elastic/eui';
import dateMath from '@elastic/datemath';
import classNames from 'classnames';
@@ -136,7 +136,6 @@ export const Explorer = ({
const [isLiveTailOn, setIsLiveTailOn] = useState(false);
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);
@@ -1059,25 +1058,18 @@ export const Explorer = ({
}
};
- const onToggleChange = (e: {
- target: { checked: boolean | ((prevState: boolean) => boolean) };
- }) => {
- setLiveTailToggle(e.target.checked);
- setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen);
- };
-
const wrappedPopoverButton = useMemo(() => {
return (
- setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
- onChange={onToggleChange}
data-test-subj="eventLiveTail"
- />
+ >
+ {liveTailNameRef.current}
+
);
- }, [isLiveTailPopoverOpen, liveTailToggle, onToggleChange, isLiveTailOn]);
+ }, [isLiveTailPopoverOpen, isLiveTailOn]);
const sleep = (milliseconds: number | undefined) => {
return new Promise((resolve) => setTimeout(resolve, milliseconds));
@@ -1110,28 +1102,21 @@ export const Explorer = ({
}
};
+ const stopLive = () => {
+ setLiveTailName('Live');
+ setIsLiveTailOn(false);
+ setLiveHits(0);
+ setIsLiveTailPopoverOpen(false);
+ if (isLiveTailOnRef.current) setToast('Live tail Off', 'danger');
+ }
+
useEffect(() => {
if ((isEqual(selectedContentTabId, TAB_CHART_ID)) || (!browserTabFocus)) {
- setLiveTailName('Live');
- setIsLiveTailOn(false);
- setLiveHits(0);
+ stopLive();
}
}, [selectedContentTabId, browserTabFocus]);
const popoverItems: ReactElement[] = [
- {
- setLiveTailName('Live');
- setIsLiveTailOn(false);
- setToast('Live tail Off', 'success');
- setLiveHits(0);
- setIsLiveTailPopoverOpen(false);
- }}
- data-test-subj="eventLiveTail__off"
- >
- Stop
- ,
{
@@ -1265,6 +1250,7 @@ export const Explorer = ({
onItemSelect={onItemSelect}
tabId={tabId}
baseQuery={appBaseQuery}
+ stopLive={stopLive}
/>