Panel Header: Add CancelQuery option to panel header (#64796)

Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>

packages/grafana-data/src/types/icon.ts

@@ -195,6 +195,7 @@ export const availableIconsIndex = {
   'step-backward': true,
   'stopwatch-slash': true,
   sync: true,
+  'sync-slash': true,
   table: true,
   'tag-alt': true,
   'telegram-alt': true,

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -6,6 +6,7 @@ import { GrafanaTheme2, LoadingState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2, useTheme2 } from '../../themes';
+import { DelayRender } from '../../utils/DelayRender';
 import { Icon } from '../Icon/Icon';
 import { LoadingBar } from '../LoadingBar/LoadingBar';
 import { Tooltip } from '../Tooltip';
@@ -54,6 +55,7 @@ export interface PanelChromeProps {
    */
   leftItems?: ReactNode[];
   displayMode?: 'default' | 'transparent';
+  onCancelQuery?: () => void;
 }
 
 /**
@@ -82,6 +84,7 @@ export function PanelChrome({
   statusMessage,
   statusMessageOnClick,
   leftItems,
+  onCancelQuery,
 }: PanelChromeProps) {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
@@ -124,12 +127,21 @@ export function PanelChrome({
       </div>
 
       {loadingState === LoadingState.Streaming && (
-        <Tooltip content="Streaming">
-          <TitleItem className={dragClassCancel} data-testid="panel-streaming">
+        <Tooltip content={onCancelQuery ? 'Stop streaming' : 'Streaming'}>
+          <TitleItem className={dragClassCancel} data-testid="panel-streaming" onClick={onCancelQuery}>
             <Icon name="circle-mono" size="md" className={styles.streaming} />
           </TitleItem>
         </Tooltip>
       )}
+      {loadingState === LoadingState.Loading && onCancelQuery && (
+        <DelayRender delay={2000}>
+          <Tooltip content="Cancel query">
+            <TitleItem className={dragClassCancel} data-testid="panel-cancel-query" onClick={onCancelQuery}>
+              <Icon name="sync-slash" size="md" />
+            </TitleItem>
+          </Tooltip>
+        </DelayRender>
+      )}
     </>
   );
 

packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx

@@ -5,6 +5,7 @@ import { GrafanaTheme2, LinkModel, LinkTarget } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
+import { Button } from '../Button';
 
 type TitleItemProps = {
   className?: string;
@@ -15,7 +16,9 @@ type TitleItemProps = {
   title?: string;
 };
 
-export const TitleItem = forwardRef<HTMLAnchorElement, TitleItemProps>(
+type TitleItemElement = HTMLAnchorElement & HTMLButtonElement;
+
+export const TitleItem = forwardRef<TitleItemElement, TitleItemProps>(
   ({ className, children, href, onClick, target, title, ...rest }, ref) => {
     const styles = useStyles2(getStyles);
 
@@ -33,6 +36,12 @@ export const TitleItem = forwardRef<HTMLAnchorElement, TitleItemProps>(
           {children}
         </a>
       );
+    } else if (onClick) {
+      return (
+        <Button ref={ref} className={cx(styles.item, className)} variant="secondary" fill="text" onClick={onClick}>
+          {children}
+        </Button>
+      );
     } else {
       return (
         <span ref={ref} className={cx(styles.item, className)} {...rest}>

packages/grafana-ui/src/utils/DelayRender.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  delay: number;
+}
+
+/**
+ * Delay the rendering of the children by N amount of milliseconds
+ */
+export function DelayRender({ children, delay }: Props) {
+  const [shouldRender, setRender] = useState(false);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setRender(true);
+    }, delay);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [children, delay]);
+
+  return <>{shouldRender ? children : null}</>;
+}

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx

@@ -23,7 +23,7 @@ export function PanelHeaderMenuProvider({ panel, dashboard, loadingState, childr
   const angularComponent = useSelector((state) => getPanelStateForModel(state, panel)?.angularComponent);
 
   useEffect(() => {
-    setItems(getPanelMenu(dashboard, panel, loadingState, angularComponent));
+    setItems(getPanelMenu(dashboard, panel, angularComponent));
   }, [dashboard, panel, angularComponent, loadingState, setItems]);
 
   return children({ items });

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -641,6 +641,11 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
     reportInteraction('dashboards_panelheader_statusmessage_clicked');
   };
 
+  onCancelQuery = () => {
+    this.props.panel.getQueryRunner().cancelQuery();
+    reportInteraction('dashboards_panelheader_cancelquery_clicked', { data_state: this.state.data.state });
+  };
+
   render() {
     const { dashboard, panel, isViewing, isEditing, width, height, plugin } = this.props;
     const { errorMessage, data } = this.state;
@@ -705,6 +710,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
           hoverHeaderOffset={hoverHeaderOffset}
           hoverHeader={this.hasOverlayHeader()}
           displayMode={transparent ? 'transparent' : 'default'}
+          onCancelQuery={this.onCancelQuery}
         >
           {(innerWidth, innerHeight) => (
             <>

public/app/features/dashboard/utils/getPanelMenu.test.ts

@@ -10,7 +10,6 @@ import {
   PluginExtensionRegistryItem,
   setPluginsExtensionRegistry,
 } from '@grafana/runtime';
-import { LoadingState } from '@grafana/schema';
 import config from 'app/core/config';
 import * as actions from 'app/features/explore/state/main';
 import { setStore } from 'app/store/store';
@@ -110,36 +109,6 @@ describe('getPanelMenu()', () => {
     `);
   });
 
-  it('should return the correct panel menu items when data is streaming', () => {
-    const panel = new PanelModel({});
-    const dashboard = createDashboardModelFixture({});
-
-    const menuItems = getPanelMenu(dashboard, panel, LoadingState.Streaming);
-    expect(menuItems).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          iconClassName: 'circle',
-          text: 'Stop query',
-        }),
-      ])
-    );
-  });
-
-  it('should return the correct panel menu items when data is loading', () => {
-    const panel = new PanelModel({});
-    const dashboard = createDashboardModelFixture({});
-
-    const menuItems = getPanelMenu(dashboard, panel, LoadingState.Loading);
-    expect(menuItems).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          iconClassName: 'circle',
-          text: 'Stop query',
-        }),
-      ])
-    );
-  });
-
   describe('when extending panel menu from plugins', () => {
     it('should contain menu item from link extension', () => {
       setPluginsExtensionRegistry({
@@ -156,7 +125,7 @@ describe('getPanelMenu()', () => {
 
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
-      const menuItems = getPanelMenu(dashboard, panel, LoadingState.Loading);
+      const menuItems = getPanelMenu(dashboard, panel);
       const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
 
       expect(moreSubMenu).toEqual(
@@ -184,7 +153,7 @@ describe('getPanelMenu()', () => {
 
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
-      const menuItems = getPanelMenu(dashboard, panel, LoadingState.Loading);
+      const menuItems = getPanelMenu(dashboard, panel);
       const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
 
       expect(moreSubMenu).toEqual(
@@ -223,7 +192,7 @@ describe('getPanelMenu()', () => {
 
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
-      const menuItems = getPanelMenu(dashboard, panel, LoadingState.Loading);
+      const menuItems = getPanelMenu(dashboard, panel);
       const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
 
       expect(moreSubMenu).toEqual(
@@ -254,7 +223,7 @@ describe('getPanelMenu()', () => {
 
       const panel = new PanelModel({});
       const dashboard = createDashboardModelFixture({});
-      const menuItems = getPanelMenu(dashboard, panel, LoadingState.Loading);
+      const menuItems = getPanelMenu(dashboard, panel);
       const moreSubMenu = menuItems.find((i) => i.text === 'More...')?.subMenu;
 
       expect(moreSubMenu).toEqual(
@@ -310,7 +279,7 @@ describe('getPanelMenu()', () => {
         title: 'My dashboard',
       });
 
-      getPanelMenu(dashboard, panel, LoadingState.Loading);
+      getPanelMenu(dashboard, panel);
 
       const context: PluginExtensionPanelContext = {
         pluginId: 'timeseries',
@@ -392,7 +361,7 @@ describe('getPanelMenu()', () => {
         title: 'My dashboard',
       });
 
-      expect(() => getPanelMenu(dashboard, panel, LoadingState.Loading)).toThrowError(TypeError);
+      expect(() => getPanelMenu(dashboard, panel)).toThrowError(TypeError);
     });
   });
 
@@ -405,7 +374,7 @@ describe('getPanelMenu()', () => {
       const panel = new PanelModel({ isViewing: true });
       const dashboard = createDashboardModelFixture({});
 
-      const menuItems = getPanelMenu(dashboard, panel, undefined, angularComponent);
+      const menuItems = getPanelMenu(dashboard, panel, angularComponent);
       expect(menuItems).toMatchInlineSnapshot(`
         [
           {

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -12,7 +12,6 @@ import {
   reportInteraction,
   PluginExtensionPanelContext,
 } from '@grafana/runtime';
-import { LoadingState } from '@grafana/schema';
 import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
 import config from 'app/core/config';
 import { t } from 'app/core/internationalization';
@@ -39,7 +38,6 @@ import { getTimeSrv } from '../services/TimeSrv';
 export function getPanelMenu(
   dashboard: DashboardModel,
   panel: PanelModel,
-  loadingState?: LoadingState,
   angularComponent?: AngularComponent | null
 ): PanelMenuItem[] {
   const onViewPanel = (event: React.MouseEvent<any>) => {
@@ -120,12 +118,6 @@ export function getPanelMenu(
     reportInteraction('dashboards_panelheader_togglelegend_clicked');
   };
 
-  const onCancelStreaming = (event: React.MouseEvent) => {
-    event.preventDefault();
-    panel.getQueryRunner().cancelQuery();
-    reportInteraction('dashboards_panelheader_cancelstreaming_clicked');
-  };
-
   const menu: PanelMenuItem[] = [];
 
   if (!panel.isEditing) {
@@ -146,17 +138,6 @@ export function getPanelMenu(
     });
   }
 
-  if (
-    dashboard.canEditPanel(panel) &&
-    (loadingState === LoadingState.Streaming || loadingState === LoadingState.Loading)
-  ) {
-    menu.push({
-      text: 'Stop query',
-      iconClassName: 'circle',
-      onClick: onCancelStreaming,
-    });
-  }
-
   menu.push({
     text: t('panel.header-menu.share', `Share`),
     iconClassName: 'share-alt',

public/app/features/query/state/PanelQueryRunner.ts

@@ -317,8 +317,11 @@ export class PanelQueryRunner {
 
     this.subscription.unsubscribe();
 
-    // If we have an old result with loading state, send it with done state
-    if (this.lastResult && this.lastResult.state === LoadingState.Loading) {
+    // If we have an old result with loading or streaming state, send it with done state
+    if (
+      this.lastResult &&
+      (this.lastResult.state === LoadingState.Loading || this.lastResult.state === LoadingState.Streaming)
+    ) {
       this.subject.next({
         ...this.lastResult,
         state: LoadingState.Done,