{receivers.map((receiver, index) => {
@@ -286,4 +293,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
borderBottomLeftRadius: `${theme.shape.radius.default}`,
borderBottomRightRadius: `${theme.shape.radius.default}`,
}),
+ noIntegrationsContainer: css({
+ paddingTop: `${theme.spacing(1.5)}`,
+ paddingLeft: `${theme.spacing(1.5)}`,
+ }),
});
diff --git a/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx b/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx
index 6faa94018e0..e1599527caa 100644
--- a/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/ContactPoints.test.tsx
@@ -19,7 +19,8 @@ import setupMimirFlavoredServer, { MIMIR_DATASOURCE_UID } from './__mocks__/mimi
import setupVanillaAlertmanagerFlavoredServer, {
VANILLA_ALERTMANAGER_DATASOURCE_UID,
} from './__mocks__/vanillaAlertmanagerServer';
-import { ContactPointWithMetadata, RouteReference } from './utils';
+import { RECEIVER_META_KEY } from './constants';
+import { ContactPointWithMetadata, ReceiverConfigWithMetadata, RouteReference } from './utils';
/**
* There are lots of ways in which we test our pages and components. Here's my opinionated approach to testing them.
@@ -197,6 +198,30 @@ describe('contact points', () => {
expect(editAction).toHaveAttribute('aria-disabled', 'true');
});
+ it('should show warning when no receivers are configured', async () => {
+ renderWithProvider(
);
+
+ expect(screen.getByText(/No integrations configured/i)).toBeInTheDocument();
+ });
+
+ it('should not show warning when at least one receiver is configured', async () => {
+ const receiver: ReceiverConfigWithMetadata = {
+ name: 'email',
+ provenance: undefined,
+ type: 'email',
+ disableResolveMessage: false,
+ settings: { addresses: 'test1@test.com,test2@test.com,test3@test.com,test4@test.com' },
+ [RECEIVER_META_KEY]: {
+ name: 'Email',
+ description: 'The email receiver',
+ },
+ };
+ renderWithProvider(
+
+ );
+ expect(screen.queryByText(/No integrations configured/i)).not.toBeInTheDocument();
+ });
+
it('should disable buttons when provisioned', async () => {
const { user } = renderWithProvider(
);
diff --git a/public/app/features/alerting/unified/components/contact-points/useContactPoints.tsx b/public/app/features/alerting/unified/components/contact-points/useContactPoints.tsx
index ef7bb63bbff..10d56e2ac5f 100644
--- a/public/app/features/alerting/unified/components/contact-points/useContactPoints.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/useContactPoints.tsx
@@ -4,7 +4,7 @@
*/
import { produce } from 'immer';
-import { remove } from 'lodash';
+import { merge, remove, set } from 'lodash';
import { useMemo } from 'react';
import { alertingApi } from 'app/features/alerting/unified/api/alertingApi';
@@ -340,10 +340,45 @@ export function useDeleteContactPoint({ alertmanager }: BaseAlertmanagerArgs) {
};
}
-const mapIntegrationSettings = (integration: GrafanaManagedReceiverConfig): GrafanaManagedReceiverConfig => {
+/**
+ * Turns a Grafana Managed receiver config into a format that can be sent to the k8s API
+ *
+ * When updating secure settings, we need to send a value of `true` for any secure setting that we want to keep the same.
+ *
+ * Any other setting that has a value in `secureSettings` will correspond to a new value for that setting -
+ * so we should not tell the API that we want to preserve it. Those values will instead be sent within `settings`
+ */
+const mapIntegrationSettingsForK8s = (integration: GrafanaManagedReceiverConfig): GrafanaManagedReceiverConfig => {
+ const { secureSettings, settings, ...restOfIntegration } = integration;
+ const secureFields = Object.entries(secureSettings || {}).reduce((acc, [key, value]) => {
+ // If a secure field has no (changed) value, then we tell the backend to persist it
+ if (value === undefined) {
+ return {
+ ...acc,
+ [key]: true,
+ };
+ }
+ return acc;
+ }, {});
+
+ const mappedSecureSettings = Object.entries(secureSettings || {}).reduce((acc, [key, value]) => {
+ // If the value is an empty string/falsy value, then we need to omit it from the payload
+ // so the backend knows to remove it
+ if (!value) {
+ return acc;
+ }
+
+ // Otherwise, we send the value of the secure field
+ return set(acc, key, value);
+ }, {});
+
+ // Merge settings properly with lodash so we don't lose any information from nested keys/secure settings
+ const mergedSettings = merge({}, settings, mappedSecureSettings);
+
return {
- ...integration,
- settings: { ...integration.settings, ...integration.secureSettings },
+ ...restOfIntegration,
+ secureFields,
+ settings: mergedSettings,
};
};
const grafanaContactPointToK8sReceiver = (
@@ -358,7 +393,7 @@ const grafanaContactPointToK8sReceiver = (
},
spec: {
title: contactPoint.name,
- integrations: (contactPoint.grafana_managed_receiver_configs || []).map(mapIntegrationSettings),
+ integrations: (contactPoint.grafana_managed_receiver_configs || []).map(mapIntegrationSettingsForK8s),
},
};
};
diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx
index c9d7d8e2e17..9110dbbf8fa 100644
--- a/public/app/features/alerting/unified/components/expressions/Expression.tsx
+++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx
@@ -20,7 +20,7 @@ import {
import { AlertQuery, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
import { usePagination } from '../../hooks/usePagination';
-import { HoverCard } from '../HoverCard';
+import { PopupCard } from '../HoverCard';
import { Spacer } from '../Spacer';
import { AlertStateTag } from '../rules/AlertStateTag';
@@ -424,7 +424,7 @@ const TimeseriesRow: FC
= ({ frame, index }) =>
{name}
-
= ({ frame, index }) =>
}
>
Time series data
-
+