Panel: Cancel panel query via loading spinner (#25954)

* Panel: Cancel panel query via loading spinne

* Removed unused icon

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

@@ -87,10 +87,16 @@ export class PanelHeader extends Component<Props, State> {
     });
     });
   };
   };
 
 
+  onCancelQuery = () => {
+    this.props.panel.getQueryRunner().cancelQuery();
+  };
+
   private renderLoadingState(): JSX.Element {
   private renderLoadingState(): JSX.Element {
     return (
     return (
-      <div className="panel-loading">
-        <Icon className="fa-spin" name="fa fa-spinner" />
+      <div className="panel-loading" onClick={this.onCancelQuery}>
+        <Tooltip content="Cancel query">
+          <Icon className="panel-loading__spinner spin-counter-clock" name="sync" />
+        </Tooltip>
       </div>
       </div>
     );
     );
   }
   }

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

@@ -25,6 +25,7 @@ import {
   applyFieldOverrides,
   applyFieldOverrides,
   DataConfigSource,
   DataConfigSource,
   TimeZone,
   TimeZone,
+  LoadingState,
 } from '@grafana/data';
 } from '@grafana/data';
 
 
 export interface QueryRunnerOptions<
 export interface QueryRunnerOptions<
@@ -198,6 +199,22 @@ export class PanelQueryRunner {
     });
     });
   }
   }
 
 
+  cancelQuery() {
+    if (!this.subscription) {
+      return;
+    }
+
+    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) {
+      this.subject.next({
+        ...this.lastResult,
+        state: LoadingState.Done,
+      });
+    }
+  }
+
   resendLastResult = () => {
   resendLastResult = () => {
     if (this.lastResult) {
     if (this.lastResult) {
       this.subject.next(this.lastResult);
       this.subject.next(this.lastResult);

public/sass/components/_panel_header.scss

@@ -78,6 +78,10 @@ $panel-header-no-title-zindex: 1;
   z-index: $panel-header-z-index + 1;
   z-index: $panel-header-z-index + 1;
   font-size: $font-size-lg;
   font-size: $font-size-lg;
   color: $text-color-weak;
   color: $text-color-weak;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 }
 
 
 .panel-empty {
 .panel-empty {

public/sass/mixins/_animations.scss

@@ -34,3 +34,16 @@
     transition: max-height 250ms ease-in-out;
     transition: max-height 250ms ease-in-out;
   }
   }
 }
 }
+
+@keyframes spin-counter-clock {
+  0% {
+    transform: rotate(359deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.spin-counter-clock {
+  animation: spin-counter-clock 3s infinite linear;
+}