Annotations: Support filtering the target panels (#66325)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

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

@@ -1,30 +1,23 @@
 import { ComponentType } from 'react';
 import { Observable } from 'rxjs';
 
+import { DataQuery, AnnotationQuery as SchemaAnnotationQuery } from '@grafana/schema';
+
 import { DataFrame } from './dataFrame';
 import { QueryEditorProps } from './datasource';
-import { DataQuery, DataSourceRef } from './query';
 
 /**
  * This JSON object is stored in the dashboard json model.
  */
-export interface AnnotationQuery<TQuery extends DataQuery = DataQuery> {
-  datasource?: DataSourceRef | null;
-
-  enable: boolean;
-  name: string;
-  iconColor: string;
-  hide?: boolean;
-  builtIn?: number;
-  type?: string;
+export interface AnnotationQuery<TQuery extends DataQuery = DataQuery> extends SchemaAnnotationQuery<TQuery> {
   snapshotData?: any;
 
-  // Standard datasource query
-  target?: TQuery;
-
   // Convert a dataframe to an AnnotationEvent
   mappings?: AnnotationEventMappings;
 
+  // When using the 'grafana' datasource, this may be dashboard
+  type?: string;
+
   // Sadly plugins can set any property directly on the main object
   [key: string]: any;
 }
@@ -51,7 +44,7 @@ export interface AnnotationEvent {
   newState?: string;
 
   // Currently used to merge annotations from alerts and dashboard
-  source?: any; // source.type === 'dashboard'
+  source?: any; // source.type === 'dashboard' -- should be AnnotationQuery
 }
 
 export interface AnnotationEventUIModel {

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

@@ -57,6 +57,7 @@ export class DataSourcePlugin<
     return this;
   }
 
+  /** @deprecated -- register the annotation support in the instance constructor */
   setAnnotationQueryCtrl(AnnotationsQueryCtrl: any) {
     this.components.AnnotationsQueryCtrl = AnnotationsQueryCtrl;
     return this;

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -416,4 +416,8 @@ export const Components = {
   Variables: {
     variableOption: 'data-testid variable-option',
   },
+  Annotations: {
+    annotationsTypeInput: 'annotations-type-input',
+    annotationsChoosePanelInput: 'choose-panels-input',
+  },
 };

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -66,6 +66,11 @@ export const Pages = {
       submenuItemValueDropDownDropDown: 'Variable options',
       submenuItemValueDropDownOptionTexts: (item: string) =>
         `data-testid Dashboard template variables Variable Value DropDown option text ${item}`,
+      Annotations: {
+        annotationsWrapper: 'data-testid annotation-wrapper',
+        annotationLabel: (label: string) => `data-testid Dashboard annotations submenu Label ${label}`,
+        annotationToggle: (label: string) => `data-testid Dashboard annotations submenu Toggle ${label}`,
+      },
     },
     Settings: {
       Actions: {
@@ -93,6 +98,11 @@ export const Pages = {
         Settings: {
           name: 'Annotations settings name input',
         },
+        NewAnnotation: {
+          panelFilterSelect: 'data-testid annotations-panel-filter',
+          showInLabel: 'show-in-label',
+          previewInDashboard: 'data-testid annotations-preview',
+        },
       },
       Variables: {
         List: {
@@ -239,6 +249,9 @@ export const Pages = {
   },
   SoloPanel: {
     url: (page: string) => `/d-solo/${page}`,
+    Annotations: {
+      marker: 'data-testid annotation-marker',
+    },
   },
   PluginsList: {
     page: 'Plugins list page',

packages/grafana-schema/src/index.gen.ts

@@ -10,7 +10,7 @@
 // Raw generated types from Dashboard kind.
 export type {
   AnnotationTarget,
-  AnnotationQuery,
+  AnnotationPanelFilter,
   DashboardLink,
   DashboardLinkType,
   VariableType,
@@ -34,7 +34,7 @@ export type {
 // Raw generated enums and default consts from dashboard kind.
 export {
   defaultAnnotationTarget,
-  defaultAnnotationQuery,
+  defaultAnnotationPanelFilter,
   LoadingState,
   defaultDashboardLink,
   FieldColorModeId,
@@ -59,6 +59,8 @@ export {
 // TODO generate code such that tsc enforces type compatibility between raw and veneer decls
 export type {
   Dashboard,
+  AnnotationContainer,
+  AnnotationQuery,
   VariableModel,
   DataSourceRef,
   DataTransformerConfig,
@@ -79,6 +81,8 @@ export type {
 // TODO generate code such that tsc enforces type compatibility between raw and veneer decls
 export {
   defaultDashboard,
+  defaultAnnotationContainer,
+  defaultAnnotationQuery,
   defaultVariableModel,
   VariableHide,
   defaultPanel,

packages/grafana-schema/src/raw/dashboard/x/dashboard_types.gen.ts

@@ -9,12 +9,40 @@
 // Run 'make gen-cue' from repository root to regenerate.
 
 /**
- * TODO docs
+ * TODO -- should not be a public interface on its own, but required for Veneer
+ */
+export interface AnnotationContainer {
+  list?: Array<AnnotationQuery>;
+}
+
+export const defaultAnnotationContainer: Partial<AnnotationContainer> = {
+  list: [],
+};
+
+/**
+ * TODO: this should be a regular DataQuery that depends on the selected dashboard
+ * these match the properties of the "grafana" datasouce that is default in most dashboards
  */
 export interface AnnotationTarget {
+  /**
+   * Only required/valid for the grafana datasource...
+   * but code+tests is already depending on it so hard to change
+   */
   limit: number;
+  /**
+   * Only required/valid for the grafana datasource...
+   * but code+tests is already depending on it so hard to change
+   */
   matchAny: boolean;
+  /**
+   * Only required/valid for the grafana datasource...
+   * but code+tests is already depending on it so hard to change
+   */
   tags: Array<string>;
+  /**
+   * Only required/valid for the grafana datasource...
+   * but code+tests is already depending on it so hard to change
+   */
   type: string;
 }
 
@@ -22,52 +50,78 @@ export const defaultAnnotationTarget: Partial<AnnotationTarget> = {
   tags: [],
 };
 
+export interface AnnotationPanelFilter {
+  /**
+   * Should the specified panels be included or excluded
+   */
+  exclude?: boolean;
+  /**
+   * Panel IDs that should be included or excluded
+   */
+  ids: Array<number>;
+}
+
+export const defaultAnnotationPanelFilter: Partial<AnnotationPanelFilter> = {
+  exclude: false,
+  ids: [],
+};
+
 /**
  * TODO docs
  * FROM: AnnotationQuery in grafana-data/src/types/annotations.ts
  */
 export interface AnnotationQuery {
-  builtIn: number; // TODO should this be persisted at all?
   /**
-   * Datasource to use for annotation.
+   * TODO: Should be DataSourceRef
    */
   datasource: {
     type?: string;
     uid?: string;
   };
   /**
-   * Whether annotation is enabled.
+   * When enabled the annotation query is issued with every dashboard refresh
    */
   enable: boolean;
   /**
-   * Whether to hide annotation.
+   * Optionally
+   */
+  filter?: AnnotationPanelFilter;
+  /**
+   * Annotation queries can be toggled on or off at the top of the dashboard.
+   * When hide is true, the toggle is not shown in the dashboard.
    */
   hide?: boolean;
   /**
-   * Annotation icon color.
+   * Color to use for the annotation event markers
    */
-  iconColor?: string;
+  iconColor: string;
   /**
    * Name of annotation.
    */
-  name?: string;
+  name: string;
   /**
-   * Query for annotation data.
+   * TODO.. this should just be a normal query target
    */
-  rawQuery?: string;
-  showIn: number;
   target?: AnnotationTarget;
-  type: string;
+  /**
+   * TODO -- this should not exist here, it is based on the --grafana-- datasource
+   */
+  type?: string;
 }
 
 export const defaultAnnotationQuery: Partial<AnnotationQuery> = {
-  builtIn: 0,
   enable: true,
   hide: false,
-  showIn: 0,
-  type: 'dashboard',
 };
 
+export enum LoadingState {
+  Done = 'Done',
+  Error = 'Error',
+  Loading = 'Loading',
+  NotStarted = 'NotStarted',
+  Streaming = 'Streaming',
+}
+
 /**
  * FROM: packages/grafana-data/src/types/templateVars.ts
  * TODO docs
@@ -107,14 +161,6 @@ export enum VariableHide {
   hideVariable = 2,
 }
 
-export enum LoadingState {
-  Done = 'Done',
-  Error = 'Error',
-  Loading = 'Loading',
-  NotStarted = 'NotStarted',
-  Streaming = 'Streaming',
-}
-
 /**
  * Ref to a DataSource instance
  */
@@ -662,9 +708,7 @@ export interface Dashboard {
   /**
    * TODO docs
    */
-  annotations?: {
-    list?: Array<AnnotationQuery>;
-  };
+  annotations?: AnnotationContainer;
   /**
    * Description of dashboard.
    */

packages/grafana-schema/src/veneer/dashboard.types.ts

@@ -1,6 +1,8 @@
-import { DataSourceRef as CommonDataSourceRef } from '../common/common.gen';
+import { DataSourceRef as CommonDataSourceRef, DataSourceRef } from '../common/common.gen';
 import * as raw from '../raw/dashboard/x/dashboard_types.gen';
 
+import { DataQuery } from './common.types';
+
 export type { CommonDataSourceRef as DataSourceRef };
 
 export interface Panel<TOptions = Record<string, unknown>, TCustomFieldConfig = Record<string, unknown>>
@@ -28,13 +30,24 @@ export interface VariableModel
   datasource: CommonDataSourceRef | null;
 }
 
-export interface Dashboard extends Omit<raw.Dashboard, 'templating'> {
+export interface Dashboard extends Omit<raw.Dashboard, 'templating' | 'annotations'> {
   panels?: Array<Panel | raw.RowPanel | raw.GraphPanel | raw.HeatmapPanel>;
+  annotations?: AnnotationContainer;
   templating?: {
     list?: VariableModel[];
   };
 }
 
+export interface AnnotationQuery<TQuery extends DataQuery = DataQuery>
+  extends Omit<raw.AnnotationQuery, 'target' | 'datasource'> {
+  datasource?: DataSourceRef | null;
+  target?: TQuery;
+}
+
+export interface AnnotationContainer extends Omit<raw.AnnotationContainer, 'list'> {
+  list?: AnnotationQuery[]; // use the version from this file
+}
+
 export interface FieldConfig<TOptions = Record<string, unknown>> extends raw.FieldConfig {
   custom?: TOptions & Record<string, unknown>;
 }
@@ -69,3 +82,6 @@ export const defaultPanel: Partial<Panel> = raw.defaultPanel;
 export const defaultFieldConfig: Partial<FieldConfig> = raw.defaultFieldConfig;
 export const defaultFieldConfigSource: Partial<FieldConfigSource> = raw.defaultFieldConfigSource;
 export const defaultMatcherConfig: Partial<MatcherConfig> = raw.defaultMatcherConfig;
+export const defaultAnnotationQuery: Partial<AnnotationQuery> = raw.defaultAnnotationQuery as AnnotationQuery;
+export const defaultAnnotationContainer: Partial<AnnotationContainer> =
+  raw.defaultAnnotationContainer as AnnotationContainer;