Annotation Panel: release annotation panel (#36959)

Co-authored-by: Petros Kolyvas <code@petros.io>

public/app/plugins/panel/annolist/AnnoListPanel.tsx

@@ -9,6 +9,7 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import appEvents from 'app/core/app_events';
 import { AnnotationListItem } from './AnnotationListItem';
 import { AnnotationListItemTags } from './AnnotationListItemTags';
+import { CustomScrollbar } from '@grafana/ui';
 
 interface UserInfo {
   id?: number;
@@ -200,7 +201,6 @@ export class AnnoListPanel extends PureComponent<Props, State> {
   };
 
   render() {
-    const { height } = this.props;
     const { loaded, annotations, queryUser, queryTags } = this.state;
     if (!loaded) {
       return <div>loading...</div>;
@@ -214,9 +214,8 @@ export class AnnoListPanel extends PureComponent<Props, State> {
     // )}
 
     const hasFilter = queryUser || queryTags.length > 0;
-
     return (
-      <div style={{ height, overflow: 'scroll' }}>
+      <CustomScrollbar autoHeightMin="100%">
         {hasFilter && (
           <div>
             <b>Filter: &nbsp; </b>
@@ -231,15 +230,8 @@ export class AnnoListPanel extends PureComponent<Props, State> {
 
         {annotations.length < 1 && <div className="panel-alert-list__no-alerts">No Annotations Found</div>}
 
-        <AbstractList
+        <AbstractList items={annotations} renderItem={this.renderItem} getItemKey={(item) => `${item.id}`} />
-          items={annotations}
+      </CustomScrollbar>
-          renderItem={this.renderItem}
-          getItemKey={(item) => {
-            return item.id + '';
-          }}
-          className="dashlist"
-        />
-      </div>
     );
   }
 }

public/app/plugins/panel/annolist/README.md

@@ -2,5 +2,11 @@
 
 This Annotations List panel is **included** with Grafana.
 
-However, it is presently in alpha and is not accessible unless alpha panels are [enabled in Grafana settings](https://grafana.com/docs/grafana/latest/administration/configuration/#enable_alpha)
+Using the annotations list panel, you can quickly collect, filter and access annotations for easy reference or referral. 
+
+The annotations panel can be used to show annotations present within the panels on the current dashboard, or site-wide. Additional options include the ability to limit the list of annotations based on the current time range and the tags used on the annotations.
+
+Read more about it here:
+
+[http://docs.grafana.org/features/panels/annolist/](http://docs.grafana.org/features/panels/annolist/)
 

public/app/plugins/panel/annolist/module.tsx

@@ -3,72 +3,94 @@ import { PanelModel, PanelPlugin } from '@grafana/data';
 import { TagsInput } from '@grafana/ui';
 import { AnnoListPanel } from './AnnoListPanel';
 import { AnnoOptions } from './types';
+import { truncate } from '@sentry/utils';
 
 export const plugin = new PanelPlugin<AnnoOptions>(AnnoListPanel)
   .setPanelOptions((builder) => {
     builder
-      .addBooleanSwitch({
+      .addRadio({
-        path: 'showUser',
+        category: ['Annotation query'],
-        name: 'Show user',
-        description: '',
-        defaultValue: true,
-      })
-      .addBooleanSwitch({
-        path: 'showTime',
-        name: 'Show time',
-        description: '',
-        defaultValue: true,
-      })
-      .addBooleanSwitch({
-        path: 'showTags',
-        name: 'Show tags',
-        description: '',
-        defaultValue: true,
-      })
-      .addTextInput({
-        path: 'navigateBefore',
-        name: 'Before',
-        defaultValue: '10m',
-        description: '',
-      })
-      .addTextInput({
-        path: 'navigateAfter',
-        name: 'After',
-        defaultValue: '10m',
-        description: '',
-      })
-      .addBooleanSwitch({
-        path: 'navigateToPanel',
-        name: 'To panel',
-        description: '',
-        defaultValue: true,
-      })
-      .addBooleanSwitch({
         path: 'onlyFromThisDashboard',
-        name: 'Only this dashboard',
+        name: 'Query filter',
-        description: '',
         defaultValue: false,
+        settings: {
+          options: [
+            { value: false, label: 'All dashboards' },
+            { value: true, label: 'This dashboard' },
+          ] as any, // does not like boolean, but works fine!
+        },
       })
-      .addBooleanSwitch({
+      .addRadio({
+        category: ['Annotation query'],
         path: 'onlyInTimeRange',
-        name: 'Within Time Range',
+        name: 'Time range',
-        description: '',
         defaultValue: false,
+        settings: {
+          options: [
+            { value: false, label: 'None' },
+            { value: true, label: 'This dashboard' },
+          ] as any, // does not like boolean, but works fine!
+        },
       })
       .addCustomEditor({
+        category: ['Annotation query'],
         id: 'tags',
         path: 'tags',
         name: 'Tags',
-        description: '',
+        description: 'Match annotation tags',
         editor(props) {
           return <TagsInput tags={props.value} onChange={props.onChange} />;
         },
       })
       .addNumberInput({
+        category: ['Annotation query'],
         path: 'limit',
         name: 'Limit',
-        description: '',
         defaultValue: 10,
+      })
+      .addBooleanSwitch({
+        category: ['Display'],
+        path: 'showUser',
+        name: 'Show user',
+        defaultValue: true,
+      })
+      .addBooleanSwitch({
+        category: ['Display'],
+        path: 'showTime',
+        name: 'Show time',
+        defaultValue: true,
+      })
+      .addBooleanSwitch({
+        category: ['Display'],
+        path: 'showTags',
+        name: 'Show tags',
+        defaultValue: true,
+      })
+      .addRadio({
+        category: ['Link behavior'],
+        path: 'navigateToPanel',
+        name: 'Link target',
+        defaultValue: truncate,
+        settings: {
+          options: [
+            { value: true, label: 'Panel' },
+            { value: false, label: 'Dashboard' },
+          ] as any, // does not like boolean, but works fine!
+        },
+      })
+      .addTextInput({
+        category: ['Link behavior'],
+        path: 'navigateBefore',
+        name: 'Time before',
+        defaultValue: '10m',
+        description: '',
+      })
+      .addTextInput({
+        category: ['Link behavior'],
+        path: 'navigateAfter',
+        name: 'Time after',
+        defaultValue: '10m',
+        description: '',
       });
   })
   // TODO, we should support this directly in the plugin infrastructure

public/app/plugins/panel/annolist/plugin.json

@@ -2,7 +2,6 @@
   "type": "panel",
   "name": "Annotations list",
   "id": "annolist",
-  "state": "alpha",
 
   "skipDataQuery": true,