diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.tsx index 0deef387034..fe2ec6ec1a9 100644 --- a/public/app/plugins/panel/annolist/AnnoListPanel.tsx +++ b/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 { }; render() { - const { height } = this.props; const { loaded, annotations, queryUser, queryTags } = this.state; if (!loaded) { return
loading...
; @@ -214,9 +214,8 @@ export class AnnoListPanel extends PureComponent { // )} const hasFilter = queryUser || queryTags.length > 0; - return ( -
+ {hasFilter && (
Filter:   @@ -231,15 +230,8 @@ export class AnnoListPanel extends PureComponent { {annotations.length < 1 &&
No Annotations Found
} - { - return item.id + ''; - }} - className="dashlist" - /> -
+ `${item.id}`} /> +
); } } diff --git a/public/app/plugins/panel/annolist/README.md b/public/app/plugins/panel/annolist/README.md index 7b1c05b5024..059f0762753 100644 --- a/public/app/plugins/panel/annolist/README.md +++ b/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/) diff --git a/public/app/plugins/panel/annolist/module.tsx b/public/app/plugins/panel/annolist/module.tsx index 58a45d77932..52988de51f3 100644 --- a/public/app/plugins/panel/annolist/module.tsx +++ b/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(AnnoListPanel) .setPanelOptions((builder) => { builder - .addBooleanSwitch({ - path: 'showUser', - 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({ + .addRadio({ + category: ['Annotation query'], path: 'onlyFromThisDashboard', - name: 'Only this dashboard', - description: '', + name: 'Query filter', 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', - description: '', + name: 'Time range', 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 ; }, }) .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 diff --git a/public/app/plugins/panel/annolist/plugin.json b/public/app/plugins/panel/annolist/plugin.json index 33fca12022b..269b9bec6ab 100644 --- a/public/app/plugins/panel/annolist/plugin.json +++ b/public/app/plugins/panel/annolist/plugin.json @@ -2,7 +2,6 @@ "type": "panel", "name": "Annotations list", "id": "annolist", - "state": "alpha", "skipDataQuery": true,