diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 70df9a82829..f34e7c667e0 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -1392,11 +1392,6 @@ "count": 2 } }, - "public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx": { - "no-restricted-syntax": { - "count": 1 - } - }, "public/app/features/alerting/unified/components/mute-timings/MuteTimingTimeInterval.tsx": { "no-restricted-syntax": { "count": 5 @@ -1521,11 +1516,6 @@ "count": 1 } }, - "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx": { - "no-restricted-syntax": { - "count": 1 - } - }, "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx": { "no-restricted-syntax": { "count": 1 diff --git a/public/app/features/alerting/unified/components/Provisioning.tsx b/public/app/features/alerting/unified/components/Provisioning.tsx index 7a88d1e21d7..151b6800d24 100644 --- a/public/app/features/alerting/unified/components/Provisioning.tsx +++ b/public/app/features/alerting/unified/components/Provisioning.tsx @@ -54,6 +54,24 @@ export const ImportedContactPointAlert = (props: ExtraAlertProps) => { ); }; +export const ImportedTimeIntervalAlert = (props: ExtraAlertProps) => { + return ( + + + This time interval was imported from an external Alertmanager and is currently read-only. The time interval will + become editable after the migration process is complete. + + + ); +}; + export const ProvisioningBadge = ({ tooltip, provenance, diff --git a/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.test.tsx b/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.test.tsx new file mode 100644 index 00000000000..5b5cd905e16 --- /dev/null +++ b/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.test.tsx @@ -0,0 +1,130 @@ +import { render, screen, userEvent } from 'test/test-utils'; + +import { setupMswServer } from 'app/features/alerting/unified/mockApi'; +import { grantUserPermissions } from 'app/features/alerting/unified/mocks'; +import { setTimeIntervalsList } from 'app/features/alerting/unified/mocks/server/configure'; +import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext'; +import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource'; +import { AccessControlAction } from 'app/types/accessControl'; + +import MuteTimingsSelector from './MuteTimingsSelector'; + +const renderWithProvider = (alertManagerSource = GRAFANA_RULES_SOURCE_NAME) => { + return render( + + {}, + }} + /> + + ); +}; + +setupMswServer(); + +describe('MuteTimingsSelector', () => { + beforeEach(() => { + grantUserPermissions([ + AccessControlAction.AlertingNotificationsRead, + AccessControlAction.AlertingNotificationsWrite, + ]); + }); + + it('should show all non-imported time intervals', async () => { + const user = userEvent.setup(); + setTimeIntervalsList([ + { name: 'regular-interval', provenance: 'none' }, + { name: 'file-provisioned', provenance: 'file' }, + { name: 'another-regular', provenance: 'none' }, + ]); + + renderWithProvider(); + + // Click to open the dropdown + const selector = await screen.findByRole('combobox', { name: /time intervals/i }); + await user.click(selector); + + // All non-imported intervals should be visible + expect(await screen.findByText('regular-interval')).toBeInTheDocument(); + expect(screen.getByText('file-provisioned')).toBeInTheDocument(); + expect(screen.getByText('another-regular')).toBeInTheDocument(); + }); + + it('should filter out imported time intervals (provenance: prometheus_convert)', async () => { + const user = userEvent.setup(); + setTimeIntervalsList([ + { name: 'regular-interval', provenance: 'none' }, + { name: 'imported-interval', provenance: 'prometheus_convert' }, + { name: 'file-provisioned', provenance: 'file' }, + ]); + + renderWithProvider(); + + // Click to open the dropdown + const selector = await screen.findByRole('combobox', { name: /time intervals/i }); + await user.click(selector); + + // Regular and file-provisioned should be visible + expect(await screen.findByText('regular-interval')).toBeInTheDocument(); + expect(screen.getByText('file-provisioned')).toBeInTheDocument(); + + // Imported interval should NOT be in the list + expect(screen.queryByText('imported-interval')).not.toBeInTheDocument(); + }); + + it('should show only non-imported intervals when all types are present', async () => { + const user = userEvent.setup(); + setTimeIntervalsList([ + { name: 'normal-1', provenance: 'none' }, + { name: 'imported-1', provenance: 'prometheus_convert' }, + { name: 'normal-2', provenance: 'none' }, + { name: 'imported-2', provenance: 'prometheus_convert' }, + { name: 'file-1', provenance: 'file' }, + ]); + + renderWithProvider(); + + // Click to open the dropdown + const selector = await screen.findByRole('combobox', { name: /time intervals/i }); + await user.click(selector); + + // Non-imported intervals should be visible + expect(await screen.findByText('normal-1')).toBeInTheDocument(); + expect(screen.getByText('normal-2')).toBeInTheDocument(); + expect(screen.getByText('file-1')).toBeInTheDocument(); + + // Imported intervals should NOT be visible + expect(screen.queryByText('imported-1')).not.toBeInTheDocument(); + expect(screen.queryByText('imported-2')).not.toBeInTheDocument(); + }); + + it('should handle empty list', async () => { + setTimeIntervalsList([]); + + renderWithProvider(); + + // Selector should be present but have no options + const selector = await screen.findByRole('combobox', { name: /time intervals/i }); + expect(selector).toBeInTheDocument(); + }); + + it('should handle list with only imported intervals', async () => { + const user = userEvent.setup(); + setTimeIntervalsList([ + { name: 'imported-1', provenance: 'prometheus_convert' }, + { name: 'imported-2', provenance: 'prometheus_convert' }, + ]); + + renderWithProvider(); + + // Click to open the dropdown + const selector = await screen.findByRole('combobox', { name: /time intervals/i }); + await user.click(selector); + + // No intervals should be visible + expect(screen.queryByText('imported-1')).not.toBeInTheDocument(); + expect(screen.queryByText('imported-2')).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.tsx b/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.tsx index c4df5d63289..19f0afa9d8f 100644 --- a/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.tsx +++ b/public/app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector.tsx @@ -1,17 +1,25 @@ import { SelectableValue } from '@grafana/data'; import { t } from '@grafana/i18n'; import { MultiSelect, MultiSelectCommonProps } from '@grafana/ui'; -import { useMuteTimings } from 'app/features/alerting/unified/components/mute-timings/useMuteTimings'; +import { MuteTiming, useMuteTimings } from 'app/features/alerting/unified/components/mute-timings/useMuteTimings'; import { BaseAlertmanagerArgs } from 'app/features/alerting/unified/types/hooks'; import { timeIntervalToString } from 'app/features/alerting/unified/utils/alertmanager'; -import { MuteTimeInterval } from 'app/plugins/datasource/alertmanager/types'; +import { K8sAnnotations } from 'app/features/alerting/unified/utils/k8s/constants'; -const mapTimeInterval = ({ name, time_intervals }: MuteTimeInterval): SelectableValue => ({ +const PROMETHEUS_CONVERT_PROVENANCE = 'prometheus_convert'; + +const mapTimeInterval = ({ name, time_intervals }: MuteTiming): SelectableValue => ({ value: name, label: name, description: time_intervals.map((interval) => timeIntervalToString(interval)).join(', AND '), }); +/** Check if a time interval was imported from an external Alertmanager */ +const isImportedTimeInterval = (timing: MuteTiming): boolean => { + const provenance = timing.metadata?.annotations?.[K8sAnnotations.Provenance]; + return provenance === PROMETHEUS_CONVERT_PROVENANCE; +}; + /** Provides a MultiSelect with available time intervals for the given alertmanager */ const TimeIntervalSelector = ({ alertmanager, @@ -19,7 +27,9 @@ const TimeIntervalSelector = ({ }: BaseAlertmanagerArgs & { selectProps: MultiSelectCommonProps }) => { const { data } = useMuteTimings({ alertmanager, skip: selectProps.disabled }); - const timeIntervalOptions = data?.map((value) => mapTimeInterval(value)) || []; + // Filter out imported time intervals (provenance === 'prometheus_convert') + const availableTimings = data?.filter((timing) => !isImportedTimeInterval(timing)) || []; + const timeIntervalOptions = availableTimings.map((value) => mapTimeInterval(value)); return ( { return ; } + const provenance = timeInterval?.metadata?.annotations?.[K8sAnnotations.Provenance]; + return ( ); }; diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.test.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.test.tsx new file mode 100644 index 00000000000..74616e40676 --- /dev/null +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.test.tsx @@ -0,0 +1,103 @@ +import { render, screen } from 'test/test-utils'; + +import { setupMswServer } from 'app/features/alerting/unified/mockApi'; +import { grantUserPermissions } from 'app/features/alerting/unified/mocks'; +import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext'; +import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource'; +import { AccessControlAction } from 'app/types/accessControl'; + +import MuteTimingForm from './MuteTimingForm'; +import { muteTimeInterval } from './mocks'; + +const renderWithProvider = (provenance?: string, editMode = false) => { + return render( + + + + ); +}; + +setupMswServer(); + +describe('MuteTimingForm', () => { + beforeEach(() => { + grantUserPermissions([ + AccessControlAction.AlertingNotificationsRead, + AccessControlAction.AlertingNotificationsWrite, + ]); + }); + + it('should not show any alert when provenance is none', async () => { + renderWithProvider('none'); + + expect(screen.queryByText(/imported and cannot be edited/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/provisioned/i)).not.toBeInTheDocument(); + }); + + it('should not show any alert when provenance is undefined', async () => { + renderWithProvider(undefined); + + expect(screen.queryByText(/imported and cannot be edited/i)).not.toBeInTheDocument(); + expect(screen.queryByText(/provisioned/i)).not.toBeInTheDocument(); + }); + + it('should show imported alert when provenance is prometheus_convert', async () => { + renderWithProvider('prometheus_convert'); + + expect( + await screen.findByText(/This time interval was imported and cannot be edited through the UI/i) + ).toBeInTheDocument(); + expect( + screen.getByText(/This time interval was imported from an external Alertmanager and is currently read-only/i) + ).toBeInTheDocument(); + }); + + it('should show provisioning alert when provenance is file', async () => { + renderWithProvider('file'); + + expect(await screen.findByText(/This time interval cannot be edited through the UI/i)).toBeInTheDocument(); + expect( + screen.getByText(/This time interval has been provisioned, that means it was created by config/i) + ).toBeInTheDocument(); + }); + + it('should show provisioning alert for other provenance types', async () => { + renderWithProvider('api'); + + expect(await screen.findByText(/This time interval cannot be edited through the UI/i)).toBeInTheDocument(); + }); + + it('should disable form when provenance is prometheus_convert', async () => { + renderWithProvider('prometheus_convert', true); + + const nameInput = await screen.findByTestId('mute-timing-name'); + expect(nameInput).toBeDisabled(); + }); + + it('should disable form when provenance is file', async () => { + renderWithProvider('file', true); + + const nameInput = await screen.findByTestId('mute-timing-name'); + expect(nameInput).toBeDisabled(); + }); + + it('should enable form when provenance is none', async () => { + renderWithProvider('none', true); + + const nameInput = await screen.findByTestId('mute-timing-name'); + expect(nameInput).toBeEnabled(); + }); + + it('should enable form when provenance is undefined', async () => { + renderWithProvider(undefined, true); + + const nameInput = await screen.findByTestId('mute-timing-name'); + expect(nameInput).toBeEnabled(); + }); +}); diff --git a/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx index 72baa73ccb1..ba978a345f0 100644 --- a/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx +++ b/public/app/features/alerting/unified/components/mute-timings/MuteTimingForm.tsx @@ -14,18 +14,21 @@ import { import { useAlertmanager } from '../../state/AlertmanagerContext'; import { MuteTimingFields } from '../../types/mute-timing-form'; +import { PROVENANCE_NONE } from '../../utils/k8s/constants'; import { makeAMLink } from '../../utils/misc'; import { createMuteTiming, defaultTimeInterval, isTimeIntervalDisabled } from '../../utils/mute-timings'; -import { ProvisionedResource, ProvisioningAlert } from '../Provisioning'; +import { ImportedTimeIntervalAlert, ProvisionedResource, ProvisioningAlert } from '../Provisioning'; import { MuteTimingTimeInterval } from './MuteTimingTimeInterval'; +const PROMETHEUS_CONVERT_PROVENANCE = 'prometheus_convert'; + interface Props { muteTiming?: MuteTiming; showError?: boolean; loading?: boolean; - /** Is the current mute timing provisioned? If so, will disable editing via UI */ - provisioned?: boolean; + /** Provenance of the mute timing - indicates how it was created (e.g., 'file', 'prometheus_convert', 'none') */ + provenance?: string; /** Are we editing an existing time interval? */ editMode?: boolean; } @@ -56,7 +59,7 @@ const useDefaultValues = (muteTiming?: MuteTiming): MuteTimingFields => { }; }; -const MuteTimingForm = ({ muteTiming, showError, loading, provisioned, editMode }: Props) => { +const MuteTimingForm = ({ muteTiming, showError, loading, provenance, editMode }: Props) => { const { selectedAlertmanager } = useAlertmanager(); const hookArgs = { alertmanager: selectedAlertmanager! }; @@ -105,14 +108,19 @@ const MuteTimingForm = ({ muteTiming, showError, loading, provisioned, editMode ); } + const isProvisioned = Boolean(provenance && provenance !== PROVENANCE_NONE); + const isImported = provenance === PROMETHEUS_CONVERT_PROVENANCE; + return ( <> - {provisioned && } + {isProvisioned && isImported && } + {isProvisioned && !isImported && }
-
+
( diff --git a/public/app/features/alerting/unified/mocks/server/configure.ts b/public/app/features/alerting/unified/mocks/server/configure.ts index 3e3043d9331..347899e976a 100644 --- a/public/app/features/alerting/unified/mocks/server/configure.ts +++ b/public/app/features/alerting/unified/mocks/server/configure.ts @@ -175,6 +175,36 @@ export const setTimeIntervalsListEmpty = () => { return handler; }; +interface TimeIntervalConfig { + name: string; + provenance?: string; +} + +/** + * Makes the mock server respond with custom time intervals + */ +export const setTimeIntervalsList = (intervals: TimeIntervalConfig[]) => { + const listMuteTimingsPath = listNamespacedTimeIntervalHandler().info.path; + const handler = http.get(listMuteTimingsPath, () => { + const items = intervals.map((interval) => ({ + metadata: { + annotations: { + 'grafana.com/provenance': interval.provenance ?? 'none', + }, + name: interval.name, + uid: `uid-${interval.name}`, + namespace: 'default', + resourceVersion: 'e0270bfced786660', + }, + spec: { name: interval.name, time_intervals: [] }, + })); + return HttpResponse.json(getK8sResponse('TimeIntervalList', items)); + }); + + server.use(handler); + return handler; +}; + export function mimirDataSource() { const dataSource = mockDataSource( { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index a5545957399..186a3786bea 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -2178,8 +2178,10 @@ "badge-tooltip-provenance": "This resource has been provisioned via {{provenance}} and cannot be edited through the UI", "badge-tooltip-standard": "This resource has been provisioned and cannot be edited through the UI", "body-imported": "This contact point contains integrations that were imported from an external Alertmanager and is currently read-only. The integrations will become editable after the migration process is complete.", + "body-imported-time-interval": "This time interval was imported from an external Alertmanager and is currently read-only. The time interval will become editable after the migration process is complete.", "body-provisioned": "This {{resource}} has been provisioned, that means it was created by config. Please contact your server admin to update this {{resource}}.", "title-imported": "This contact point was imported and cannot be edited through the UI", + "title-imported-time-interval": "This time interval was imported and cannot be edited through the UI", "title-provisioned": "This {{resource}} cannot be edited through the UI" }, "provisioning-badge": {