Fix docs and UI for connecting Grafana Alerting from other stack (#4243)

This PR fixes docs and UI to avoid usage of Grafana (Other) integration
which is using old mechanism for alert creation.
1. Rename Grafana (Other) integration to Grafana Alerting Legacy
2. Remove its mentions from docs and correct docs for connection Grafana
Alerting
3. Make AlertManager featured integration and upgrade its description.

![image](https://github.com/grafana/oncall/assets/20221722/6e84403e-c293-4791-9905-4d06c69775e9)

---------

Co-authored-by: Rares Mardare <rares.mardare@grafana.com>

docs/sources/integrations/grafana-alerting/index.md

@@ -21,29 +21,22 @@ weight: 100
 
 Grafana Alerting for Grafana OnCall can be set up using two methods:
 
-- Grafana Alerting: Grafana OnCall is connected to the same Grafana instance being used to manage Grafana OnCall.
-- Grafana (Other Grafana): Grafana OnCall is connected to one or more Grafana instances, separate from the one being used to manage Grafana OnCall.
+- Grafana OnCall is connected to the same Grafana instance being used to manage Grafana OnCall.
+- Grafana OnCall is connected to one or more Grafana instances, separate from the one being used to manage Grafana OnCall.
 
-## Configure Grafana Alerting for Grafana OnCall
-
-You must have an Admin role to create integrations in Grafana OnCall.
-
-1. In the **Integrations** tab, click **+ New integration to receive alerts**.
-2. Select **Grafana Alerting** by clicking the **Quick connect** button or select **Grafana (Other Grafana)** from
-   the integrations list.
-3. Follow the configuration steps that display in the **How to connect** window to retrieve your unique integration URL
-   and complete any necessary configurations.
-
-### Configure Grafana Cloud Alerting
+## Configure Grafana Alerting in same Grafana instance
 
 Use the following method if you are connecting Grafana OnCall with alerts coming from the same Grafana instance from
 which Grafana OnCall is being managed.
 
 1. In Grafana OnCall, navigate to the **Integrations** tab and select **New Integration to receive alerts**.
-1. Click **Quick connect** in the **Grafana Alerting** tile. This will automatically create the integration in Grafana
-   OnCall as well as the required contact point in Alerting.
+1. Click **Quick connect** in the **Grafana Alerting** tile. This will open a **New Grafana Alerting integration** configuration window.
 
-   > **Note:** You must connect the contact point with a notification policy. For more information, see
+1. In the opened window, enter a name and description for the integration and choose existing or create a new contact point.
+   This contact point will send alerts to the created integration.
+
+   > **Note:** You must connect the contact point with a notification policy in Grafana Alerting to receive alerts in Grafana OnCall.
+   > For more information, see
    > [Contact points in Grafana Alerting](https://grafana.com/docs/grafana/latest/alerting/unified-alerting/contact-points/)
 
 1. Determine the escalation chain for the new integration by either selecting an existing one or by creating a new
@@ -52,23 +45,24 @@ which Grafana OnCall is being managed.
    the integration you created in Grafana OnCall.
 1. Click the **Edit** (pencil) icon, then click **Test**. This will send a test alert to Grafana OnCall.
 
-### Configure Grafana (Other Grafana)
+## Configure external Grafana Alerting from other Grafana Instance
 
 Connect Grafana OnCall with alerts coming from a Grafana instance that is different from the instance that Grafana
 OnCall is being managed:
 
 1. In Grafana OnCall, navigate to the **Integrations** tab and select **New Integration to receive alerts**.
-2. Select the **Alertmanager** tile.
-3. Enter a name and description for the integration, click Create
-4. A new page will open with the integration details. Copy the OnCall Integration URL from HTTP Endpoint section.
-5. Go to the other Grafana instance to connect to Grafana OnCall and navigate to **Alerting > Contact Points**.
-6. Select **New Contact Point**.
-7. Choose the contact point type `webhook`, then paste the URL generated in step 3 into the URL field.
+1. Select the **Alertmanager** tile.
+1. Enter a name and description for the integration, click Create
+1. A new page will open with the integration details. Copy the OnCall Integration URL from HTTP Endpoint section.
+1. Go to the other Grafana instance to connect to Grafana OnCall and navigate to **Alerting > Contact Points**.
+1. Select **New Contact Point**.
+1. Choose the contact point type `webhook`, then paste the URL generated in step 3 into the URL field.
 
-   > **Note:** You must connect the contact point with a notification policy. For more information,
-   > see [Contact points in Grafana Alerting](https://grafana.com/docs/grafana/latest/alerting/unified-alerting/contact-points/).
+   > **Note:** You must connect the contact point with a notification policy in Grafana Alerting to receive alerts in Grafana OnCall.
+   > For more information, see
+   > [Contact points in Grafana Alerting](https://grafana.com/docs/grafana/latest/alerting/unified-alerting/contact-points/)
 
-8. Click the **Edit** (pencil) icon, then click **Test**. This will send a test alert to Grafana OnCall.
+1. Click the **Edit** (pencil) icon, then click **Test**. This will send a test alert to Grafana OnCall.
 
 ## Note about grouping and autoresolution
 

engine/apps/alerts/tests/test_alert_group.py

@@ -49,7 +49,7 @@ def test_render_for_phone_call(
 
     expected_verbose_name = (
         f"to check an Alert Group from Grafana OnCall. "
-        f"Alert via {alert_receive_channel.verbal_name} - Grafana with title TestAlert triggered 1 times"
+        f"Alert via {alert_receive_channel.verbal_name} - Grafana Legacy Alerting with title TestAlert triggered 1 times"
     )
     rendered_text = AlertGroupPhoneCallRenderer(alert_group).render()
     assert expected_verbose_name in rendered_text

engine/apps/api/tests/test_alert_receive_channel.py

@@ -44,7 +44,7 @@ def alert_receive_channel_internal_api_setup(
 
 @pytest.fixture
 def setup_additional_settings_for_integration():
-    integration_config = AlertReceiveChannel._config[0]
+    integration_config = AlertReceiveChannel._config[2]  # It points to alertmanager
     previous_value = getattr(integration_config, "additional_settings_serializer", None)
     integration_config.additional_settings_serializer = AdditionalSettingsTestSerializer
     try:
@@ -2653,7 +2653,7 @@ def test_alert_receive_channel_integration_options_search(
     response = client.get(search_url, format="json", **make_user_auth_headers(user, token))
     assert response.status_code == status.HTTP_200_OK
     returned_choices = [i["display_name"] for i in response.json()]
-    assert returned_choices == ["Grafana Alerting", "Grafana", "(Legacy) Grafana Alerting"]
+    assert returned_choices == ["Grafana Alerting", "Grafana Legacy Alerting", "(Deprecated) Grafana Alerting"]
 
     search_url = f"{url}?search=notfound"
     response = client.get(search_url, format="json", **make_user_auth_headers(user, token))

engine/apps/telegram/tests/test_message_renderer.py

@@ -74,7 +74,7 @@ def test_alert_group_message(make_organization, make_alert_receive_channel, make
     assert text == (
         f"<a href='{organization.web_link_with_uuid}'>&#8205;</a>🔴 #{alert_group.inside_organization_number}, {alert_receive_channel.config.tests['telegram']['title']}\n"
         "Firing, alerts: 1\n"
-        "Source: Test integration - Grafana\n"
+        "Source: Test integration - Grafana Legacy Alerting\n"
         f"{alert_group.web_link}\n\n"
         f"{alert_receive_channel.config.tests['telegram']['message']}"
     )
@@ -158,7 +158,7 @@ def test_personal_message(
     assert text == (
         f"<a href='{organization.web_link_with_uuid}'>&#8205;</a>🟠 #{alert_group.inside_organization_number}, {alert_receive_channel.config.tests['telegram']['title']}\n"
         f"Acknowledged by {user_name}, alerts: 1\n"
-        "Source: Test integration - Grafana\n"
+        "Source: Test integration - Grafana Legacy Alerting\n"
         f"{alert_group.web_link}\n\n"
         f"{alert_receive_channel.config.tests['telegram']['message']}\n\n\n"
         "Alert group log:\n"

engine/config_integrations/alertmanager.py

@@ -2,13 +2,14 @@
 enabled = True
 title = "Alertmanager"
 slug = "alertmanager"
-short_description = "Prometheus"
+short_description = "Connect external Alertmanager or Grafana Alerting from other Grafana instance"
 is_displayed_on_web = True
-is_featured = False
+is_featured = True
 is_able_to_autoresolve = True
 is_demo_alert_enabled = True
 description = None
 based_on_alertmanager = True
+featured_tag_name = "Prometheus"
 
 
 # Behaviour

engine/config_integrations/grafana.py

@@ -1,8 +1,8 @@
 # Main
 enabled = True
-title = "Grafana"
+title = "Grafana Legacy Alerting"
 slug = "grafana"
-short_description = "Other Grafana"
+short_description = ""
 description = None
 is_displayed_on_web = True
 is_featured = False

engine/config_integrations/legacy_alertmanager.py

@@ -1,9 +1,13 @@
 # Main
+# It's a Deprecated Alertmanager integration which was processing one alert at once instead of processing a group.
+# All such integrations are migrated.
+from settings.base import IS_OPEN_SOURCE
+
 enabled = True
 title = "(Legacy) AlertManager"
 slug = "legacy_alertmanager"
 short_description = "Prometheus"
-is_displayed_on_web = True
+is_displayed_on_web = IS_OPEN_SOURCE  # Display this integration in web only in OSS, where they were not migrated
 is_featured = False
 is_able_to_autoresolve = True
 is_demo_alert_enabled = True

engine/config_integrations/legacy_grafana_alerting.py

@@ -1,9 +1,13 @@
 # Main
+# It's a Deprecated Grafana Alerting integration which was processing one alert at once instead of processing a group.
+# All such integrations are migrated.
+from settings.base import IS_OPEN_SOURCE
+
 enabled = True
-title = "(Legacy) Grafana Alerting"
+title = "(Deprecated) Grafana Alerting"
 slug = "legacy_grafana_alerting"
 short_description = "Why I am legacy?"
-is_displayed_on_web = True
+is_displayed_on_web = IS_OPEN_SOURCE  # Display this integration in web only in OSS, where they were not migrated
 is_featured = False
 featured_tag_name = None
 is_able_to_autoresolve = True

engine/settings/base.py

@@ -819,13 +819,12 @@ INBOUND_EMAIL_DOMAIN = os.getenv("INBOUND_EMAIL_DOMAIN")
 INBOUND_EMAIL_WEBHOOK_SECRET = os.getenv("INBOUND_EMAIL_WEBHOOK_SECRET")
 
 INSTALLED_ONCALL_INTEGRATIONS = [
-    "config_integrations.alertmanager",
-    "config_integrations.legacy_alertmanager",
-    "config_integrations.grafana",
+    # Featured
     "config_integrations.grafana_alerting",
-    "config_integrations.legacy_grafana_alerting",
-    "config_integrations.formatted_webhook",
     "config_integrations.webhook",
+    "config_integrations.alertmanager",
+    # Not featured
+    "config_integrations.formatted_webhook",
     "config_integrations.kapacitor",
     "config_integrations.elastalert",
     "config_integrations.heartbeat",
@@ -835,6 +834,13 @@ INSTALLED_ONCALL_INTEGRATIONS = [
     "config_integrations.slack_channel",
     "config_integrations.zabbix",
     "config_integrations.direct_paging",
+    # Actually it's Grafana 8 integration.
+    # users are confused and tries to use to send alerts from external Grafana.
+    # So move it closer to the end of the list
+    "config_integrations.grafana",
+    # Legacy are not shown, ordering isn't important
+    "config_integrations.legacy_alertmanager",
+    "config_integrations.legacy_grafana_alerting",
 ]
 
 ADVANCED_WEBHOOK_PRESET = "apps.webhooks.presets.advanced.AdvancedWebhookPreset"

grafana-plugin/src/components/IntegrationLogo/IntegrationLogo.module.css

@@ -23,7 +23,11 @@
   background-size: 100% !important;
 }
 
-.bg_Grafana,
+.bg_GrafanaLegacyAlerting {
+  background: url(../../assets/img/grafana-legacy-alerting-icon.svg);
+  background-size: 100% !important;
+}
+
 .bg_GrafanaAlerting {
   background: url(../../assets/img/grafana_icon.svg);
   background-size: 100% !important;

grafana-plugin/src/components/IntegrationLogo/IntegrationLogo.tsx

@@ -37,7 +37,7 @@ export const IntegrationLogo: FC<IntegrationLogoProps> = (props) => {
     <div className={cx('root')}>
       <div
         className={cx('bg', {
-          [`bg_${integration.display_name.replace(' ', '')}`]: true,
+          [`bg_${integration.display_name.replace(new RegExp(' ', 'g'), '')}`]: true,
         })}
         style={bgStyle}
       />