remove button toggle and add stop button (opensearch-project#623)

* remove button toggle and add stop button Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]> * update cypress Signed-off-by: Kavitha Conjeevaram Mohan <[email protected]>
eugenesk24 · Jun 6, 2022 · a630f47 · a630f47
1 parent b7856f4
commit a630f47
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/dashboards-observability/.cypress/integration/event_analytics.spec.js b/dashboards-observability/.cypress/integration/event_analytics.spec.js
@@ -393,7 +393,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
@@ -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
@@ -20,7 +20,7 @@ import {
   EuiFlexItem,
   EuiLink,
   EuiContextMenuItem,
-  EuiButtonToggle,
+  EuiButton,
 } from '@elastic/eui';
 import dateMath from '@elastic/datemath';
 import classNames from 'classnames';
@@ -135,7 +135,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);
@@ -1058,25 +1057,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));
@@ -1109,28 +1101,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 () => {
@@ -1264,6 +1249,7 @@ export const Explorer = ({
           onItemSelect={onItemSelect}
           tabId={tabId}
           baseQuery={appBaseQuery}
+          stopLive={stopLive}
         />
         <EuiTabbedContent
           className="mainContentTabs"