grafana/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx

import { AnnotationQuery, EventBus, GrafanaThemeV2 } from '@grafana/data';
import React, { useEffect, useState } from 'react';
import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
import { InlineField, InlineSwitch, useStyles2 } from '@grafana/ui';
import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
import { css } from '@emotion/css';

export interface AnnotationPickerProps {
  events: EventBus;
  annotation: AnnotationQuery;
  onEnabledChanged: (annotation: AnnotationQuery) => void;
}

export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: AnnotationPickerProps): JSX.Element => {
  const [loading, setLoading] = useState(false);
  const styles = useStyles2(getStyles);
  const onCancel = () => getDashboardQueryRunner().cancel(annotation);

  useEffect(() => {
    const started = events.subscribe(AnnotationQueryStarted, (event) => {
      if (event.payload === annotation) {
        setLoading(true);
      }
    });
    const stopped = events.subscribe(AnnotationQueryFinished, (event) => {
      if (event.payload === annotation) {
        setLoading(false);
      }
    });

    return () => {
      started.unsubscribe();
      stopped.unsubscribe();
    };
  });

  return (
    <div key={annotation.name} className={styles.annotation}>
      <InlineField label={annotation.name} disabled={loading}>
        <>
          <InlineSwitch value={annotation.enable} onChange={() => onEnabledChanged(annotation)} disabled={loading} />
          <div className={styles.indicator}>
            <LoadingIndicator loading={loading} onCancel={onCancel} />
          </div>
        </>
      </InlineField>
    </div>
  );
};

function getStyles(theme: GrafanaThemeV2) {
  return {
    annotation: css`
      display: inline-block;
      margin-right: ${theme.spacing(1)};

      .fa-caret-down {
        font-size: 75%;
        padding-left: ${theme.spacing(1)};
      }

      .gf-form-inline .gf-form {
        margin-bottom: 0;
      }
    `,
    indicator: css`
      align-self: center;
      padding: 0 ${theme.spacing(0.5)};
    `,
  };
}