Annotations: Disable "Add annotation" button when annotations are disabled (#57481)

This commit is contained in:
Ryan McKinley
2022-10-24 13:24:33 -07:00
committed by GitHub
parent e59ddd6bc5
commit 37b011d79e
4 changed files with 60 additions and 16 deletions

View File

@@ -121,9 +121,11 @@ export const AnnotationSettingsEdit = ({ editIdx, dashboard }: Props) => {
{ds && !ds.annotations && <AngularEditorLoader datasource={ds} annotation={annotation} onChange={onUpdate} />}
</FieldSet>
<Stack>
<Button variant="destructive" onClick={onDelete}>
Delete
</Button>
{!annotation.builtIn && (
<Button variant="destructive" onClick={onDelete}>
Delete
</Button>
)}
<Button variant="secondary" onClick={onPreview}>
Preview in dashboard
</Button>

View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { arrayUtils } from '@grafana/data';
import { arrayUtils, AnnotationQuery } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
import { DeleteButton, Icon, IconButton, VerticalGroup } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
@@ -29,6 +29,30 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
const showEmptyListCTA = annotations.length === 0 || (annotations.length === 1 && annotations[0].builtIn);
const getAnnotationName = (anno: AnnotationQuery) => {
if (anno.enable === false) {
return (
<>
<Icon name="times" /> &nbsp;<em className="muted">(Disabled) &nbsp; {anno.name}</em>
</>
);
}
if (anno.builtIn) {
return (
<>
<Icon name="comment-alt" /> &nbsp;<em className="muted">{anno.name} (Built-in)</em>
</>
);
}
return (
<>
<Icon name="comment-alt" /> &nbsp;{anno.name}
</>
);
};
const dataSourceSrv = getDataSourceSrv();
return (
<VerticalGroup>
@@ -46,11 +70,11 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
<tr key={`${annotation.name}-${idx}`}>
{annotation.builtIn ? (
<td style={{ width: '90%' }} className="pointer" onClick={() => onEdit(idx)}>
<Icon name="comment-alt" /> &nbsp; <em className="muted">{annotation.name} (Built-in)</em>
{getAnnotationName(annotation)}
</td>
) : (
<td className="pointer" onClick={() => onEdit(idx)}>
<Icon name="comment-alt" /> &nbsp; {annotation.name}
{getAnnotationName(annotation)}
</td>
)}
<td className="pointer" onClick={() => onEdit(idx)}>
@@ -65,11 +89,13 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
) : null}
</td>
<td style={{ width: '1%' }}>
<DeleteButton
size="sm"
onConfirm={() => onDelete(idx)}
aria-label={`Delete query with title "${annotation.name}"`}
/>
{!annotation.builtIn && (
<DeleteButton
size="sm"
onConfirm={() => onDelete(idx)}
aria-label={`Delete query with title "${annotation.name}"`}
/>
)}
</td>
</tr>
))}