From 682e8a03b428430347da4b1e6fbde815669f74ef Mon Sep 17 00:00:00 2001
From: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Date: Tue, 5 Apr 2022 15:12:08 -0700
Subject: [PATCH 1/2] remove button toggle and add stop button

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
---
 .../components/common/search/search.tsx       | 13 ++++++
 .../public/components/explorer/explorer.tsx   | 46 +++++++------------
 2 files changed, 29 insertions(+), 30 deletions(-)

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) => {
             </EuiPopover>
           </EuiFlexItem>
         )}
+        {isLiveTailOn && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              iconType="stop"
+              onClick={() => stopLive()}
+              color="danger"
+              data-test-subj="eventLiveTail__off"
+            >
+            Stop
+            </EuiButton>
+          </EuiFlexItem>
+        )}
         {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
           <>
             <EuiFlexItem key={'search-save-'} className="euiFlexItem--flexGrowZero">
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 (
-      <EuiButtonToggle
-        label={liveTailNameRef.current}
+      <EuiButton
         iconType={isLiveTailOn ? 'stop' : 'play'}
         iconSide="left"
         onClick={() => setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
-        onChange={onToggleChange}
         data-test-subj="eventLiveTail"
-      />
+      >
+       {liveTailNameRef.current}
+      </EuiButton>
     );
-  }, [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[] = [
-    <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 () => {
@@ -1265,6 +1250,7 @@ export const Explorer = ({
           onItemSelect={onItemSelect}
           tabId={tabId}
           baseQuery={appBaseQuery}
+          stopLive={stopLive}
         />
         <EuiTabbedContent
           className="mainContentTabs"

From 0be8351ad172280ba4cefe8d06a353928064d39a Mon Sep 17 00:00:00 2001
From: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
Date: Tue, 5 Apr 2022 17:06:43 -0700
Subject: [PATCH 2/2] update cypress

Signed-off-by: Kavitha Conjeevaram Mohan <mohakavi@amazon.com>
---
 .../.cypress/integration/event_analytics.spec.js                 | 1 -
 1 file changed, 1 deletion(-)

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