Direct paging integrations table

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Split Integrations table into Connections and Direct Paging tabs ([#3290](https://github.com/grafana/oncall/pull/3290))
+
 ## v1.3.55 (2023-11-07)
 
 ### Changed

engine/apps/api/tests/test_alert_receive_channel.py

@@ -33,6 +33,29 @@ def test_get_alert_receive_channel(alert_receive_channel_internal_api_setup, mak
     assert response.status_code == status.HTTP_200_OK
 
 
+@pytest.mark.django_db
+def test_get_alert_receive_channel_by_integration_ne(
+    make_organization_and_user_with_plugin_token, make_user_auth_headers, make_alert_receive_channel
+):
+    organization, user, token = make_organization_and_user_with_plugin_token()
+
+    make_alert_receive_channel(organization, integration=AlertReceiveChannel.INTEGRATION_GRAFANA)
+    make_alert_receive_channel(organization, integration=AlertReceiveChannel.INTEGRATION_GRAFANA_ALERTING)
+    make_alert_receive_channel(organization, integration=AlertReceiveChannel.INTEGRATION_DIRECT_PAGING)
+
+    client = APIClient()
+    url = f"{reverse('api-internal:alert_receive_channel-list')}?integration_ne={AlertReceiveChannel.INTEGRATION_DIRECT_PAGING}"
+
+    response = client.get(url, format="json", **make_user_auth_headers(user, token))
+    results = response.json()["results"]
+
+    assert response.status_code == status.HTTP_200_OK
+    assert len(results) == 2
+
+    for result in results:
+        assert result["integration"] != AlertReceiveChannel.INTEGRATION_DIRECT_PAGING
+
+
 @pytest.mark.django_db
 @pytest.mark.parametrize(
     "query_param,should_be_unpaginated",

engine/apps/api/views/alert_receive_channel.py

@@ -43,6 +43,9 @@ class AlertReceiveChannelFilter(ByTeamModelFieldFilterMixin, filters.FilterSet):
         choices=AlertReceiveChannel.MAINTENANCE_MODE_CHOICES, method="filter_maintenance_mode"
     )
     integration = filters.MultipleChoiceFilter(choices=AlertReceiveChannel.INTEGRATION_CHOICES)
+    integration_ne = filters.MultipleChoiceFilter(
+        choices=AlertReceiveChannel.INTEGRATION_CHOICES, field_name="integration", exclude=True
+    )
     team = TeamModelMultipleChoiceFilter()
 
     class Meta:

grafana-plugin/.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
         'newlines-between': 'always',
       },
     ],
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
     'no-unused-vars': [
       'warn',
       {

grafana-plugin/e2e-tests/integrations/heartbeat.test.ts

@@ -15,7 +15,7 @@ test.describe("updating an integration's heartbeat interval works", async () =>
   };
 
   test('change heartbeat interval', async ({ adminRolePage: { page } }) => {
-    await createIntegration(page, generateRandomValue());
+    await createIntegration({ page, integrationName: generateRandomValue() });
 
     await _openHeartbeatSettingsForm(page);
 
@@ -43,7 +43,7 @@ test.describe("updating an integration's heartbeat interval works", async () =>
   });
 
   test('send heartbeat', async ({ adminRolePage: { page } }) => {
-    await createIntegration(page, generateRandomValue());
+    await createIntegration({ page, integrationName: generateRandomValue() });
 
     await _openHeartbeatSettingsForm(page);
 

grafana-plugin/e2e-tests/integrations/integrationsTable.test.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '../fixtures';
+import { generateRandomValue } from '../utils/forms';
+import { createIntegration } from '../utils/integrations';
+
+test('Integrations table shows data in Connections and Direct Paging tabs', async ({ adminRolePage: { page } }) => {
+  //   // Create 2 integrations that are not Direct Paging
+  const ID = generateRandomValue();
+  const WEBHOOK_INTEGRATION_NAME = `Webhook-${ID}`;
+  const ALERTMANAGER_INTEGRATION_NAME = `Alertmanager-${ID}`;
+  const DIRECT_PAGING_INTEGRATION_NAME = `Direct paging`;
+
+  await createIntegration({ page, integrationSearchText: 'Webhook', integrationName: WEBHOOK_INTEGRATION_NAME });
+  await page.getByRole('tab', { name: 'Tab Integrations' }).click();
+
+  await createIntegration({
+    page,
+    integrationSearchText: 'Alertmanager',
+    shouldGoToIntegrationsPage: false,
+    integrationName: ALERTMANAGER_INTEGRATION_NAME,
+  });
+  await page.getByRole('tab', { name: 'Tab Integrations' }).click();
+
+  // Create 1 Direct Paging integration if it doesn't exist
+  const integrationsTable = page.getByTestId('integrations-table');
+  await page.getByRole('tab', { name: 'Tab Direct Paging' }).click();
+  const isDirectPagingAlreadyCreated = await page.getByText('Direct paging').isVisible();
+  if (!isDirectPagingAlreadyCreated) {
+    await createIntegration({
+      page,
+      integrationSearchText: 'Direct paging',
+      shouldGoToIntegrationsPage: false,
+      integrationName: DIRECT_PAGING_INTEGRATION_NAME,
+    });
+  }
+  await page.getByRole('tab', { name: 'Tab Integrations' }).click();
+
+  // By default Connections tab is opened and newly created integrations are visible except Direct Paging one
+  await expect(integrationsTable.getByText(WEBHOOK_INTEGRATION_NAME)).toBeVisible();
+  await expect(integrationsTable.getByText(ALERTMANAGER_INTEGRATION_NAME)).toBeVisible();
+  await expect(integrationsTable).not.toContainText(DIRECT_PAGING_INTEGRATION_NAME);
+
+  // Then after switching to Direct Paging tab only Direct Paging integration is visible
+  await page.getByRole('tab', { name: 'Tab Direct Paging' }).click();
+  await expect(integrationsTable.getByText(WEBHOOK_INTEGRATION_NAME)).not.toBeVisible();
+  await expect(integrationsTable.getByText(ALERTMANAGER_INTEGRATION_NAME)).not.toBeVisible();
+  await expect(integrationsTable).toContainText(DIRECT_PAGING_INTEGRATION_NAME);
+});

grafana-plugin/e2e-tests/integrations/maintenanceMode.test.ts

@@ -106,7 +106,7 @@ test.describe('maintenance mode works', () => {
     const integrationName = generateRandomValue();
 
     await createEscalationChain(page, escalationChainName, EscalationStep.NotifyUsers, userName);
-    await createIntegration(page, integrationName);
+    await createIntegration({ page, integrationName });
     await assignEscalationChainToIntegration(page, escalationChainName);
     await enableMaintenanceMode(page, maintenanceModeType);
 

grafana-plugin/e2e-tests/utils/escalationChain.ts

@@ -32,7 +32,7 @@ export const createEscalationChain = async (
   await page.locator('text=Loading...').waitFor({ state: 'detached' });
 
   // open the create escalation chain modal
-  (await page.waitForSelector('text=New Escalation Chain')).click();
+  (await page.waitForSelector('text=/New Escalation Chain/i')).click();
 
   // fill in the name input
   await fillInInput(page, 'div[data-testid="create-escalation-chain-name-input-modal"] >> input', escalationChainName);
@@ -44,21 +44,26 @@ export const createEscalationChain = async (
   if (escalationStep) {
     // add an escalation step
     await selectDropdownValue({
-      page, selectType: 'grafanaSelect', placeholderText: 'Add escalation step...', value: escalationStep,
+      page,
+      selectType: 'grafanaSelect',
+      placeholderText: 'Add escalation step...',
+      value: escalationStep,
     });
 
     // toggle important
     if (important) {
       await selectDropdownValue({
         page,
         selectType: 'grafanaSelect',
-        placeholderText: "Default",
-        value: "Important",
+        placeholderText: 'Default',
+        value: 'Important',
       });
     }
 
     // select the escalation step value (e.g. user or schedule)
-    if (escalationStepValue) {await selectEscalationStepValue(page, escalationStep, escalationStepValue);}
+    if (escalationStepValue) {
+      await selectEscalationStepValue(page, escalationStep, escalationStepValue);
+    }
   }
 };
 

grafana-plugin/e2e-tests/utils/integrations.ts

@@ -1,25 +1,40 @@
 import { Page } from '@playwright/test';
-import { clickButton, selectDropdownValue } from './forms';
+import { clickButton, generateRandomValue, selectDropdownValue } from './forms';
 import { goToOnCallPage } from './navigation';
 
-const CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR = 'div[data-testid="create-integration-modal"]';
-
 export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
-  // go to the integrations page
-  await goToOnCallPage(page, 'integrations');
-
   // open the create integration modal
-  (await page.waitForSelector('text=New integration')).click();
+  await page.getByRole('button', { name: 'New integration' }).click();
 
   // wait for it to pop up
-  await page.waitForSelector(CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR);
+  await page.getByTestId('create-integration-modal').waitFor();
 };
 
-export const createIntegration = async (page: Page, integrationName: string): Promise<void> => {
+export const createIntegration = async ({
+  page,
+  integrationName = `integration-${generateRandomValue()}`,
+  integrationSearchText = 'Webhook',
+  shouldGoToIntegrationsPage = true,
+}: {
+  page: Page;
+  integrationName?: string;
+  integrationSearchText?: string;
+  shouldGoToIntegrationsPage?: boolean;
+}): Promise<void> => {
+  if (shouldGoToIntegrationsPage) {
+    // go to the integrations page
+    await goToOnCallPage(page, 'integrations');
+  }
+
   await openCreateIntegrationModal(page);
 
-  // create a webhook integration
-  (await page.waitForSelector(`${CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR} >> text=Webhook`)).click();
+  // create an integration
+  await page
+    .getByTestId('create-integration-modal')
+    .getByTestId('integration-display-name')
+    .filter({ hasText: integrationSearchText })
+    .first()
+    .click();
 
   // fill in the required inputs
   (await page.waitForSelector('input[name="verbal_name"]', { state: 'attached' })).fill(integrationName);
@@ -55,7 +70,7 @@ export const createIntegrationAndSendDemoAlert = async (
   integrationName: string,
   escalationChainName: string
 ): Promise<void> => {
-  await createIntegration(page, integrationName);
+  await createIntegration({ page, integrationName });
   await assignEscalationChainToIntegration(page, escalationChainName);
   await sendDemoAlert(page);
 };

grafana-plugin/package.json

@@ -13,6 +13,8 @@
     "test:silent": "jest --silent",
     "test:e2e": "yarn playwright test --grep-invert @expensive",
     "test:e2e-expensive": "yarn playwright test --grep @expensive",
+    "test:e2e:watch": "yarn test:e2e --ui",
+    "test:e2e:gen": "yarn playwright codegen http://localhost:3000",
     "cleanup-e2e-results": "rm -rf playwright-report && rm -rf test-results",
     "e2e-show-report": "yarn playwright show-report",
     "dev": "grafana-toolkit plugin:dev",

grafana-plugin/src/containers/Labels/LabelsFilter.tsx

@@ -21,11 +21,8 @@ interface LabelsFilterProps {
 
 const LabelsFilter = observer((props: LabelsFilterProps) => {
   const { filterType, className, autoFocus, value: propsValue, onChange } = props;
-
   const [value, setValue] = useState([]);
-
   const [keys, setKeys] = useState([]);
-
   const { alertGroupStore, labelsStore } = useStore();
 
   const loadKeys =
@@ -44,9 +41,7 @@ const LabelsFilter = observer((props: LabelsFilterProps) => {
 
   useEffect(() => {
     const keyValuePairs = (propsValue || []).map((k) => k.split(':'));
-
     const promises = keyValuePairs.map(([keyId]) => loadValuesForKey(keyId));
-
     const fetchKeyValues = async () => await Promise.all(promises);
 
     fetchKeyValues().then((list) => {

grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx

@@ -44,6 +44,7 @@ interface RemoteFiltersProps extends WithStoreProps {
   defaultFilters?: FiltersValues;
   extraFilters?: (state, setState, onFiltersValueChange) => React.ReactNode;
   grafanaTeamStore: GrafanaTeamStore;
+  skipFilterOptionFn?: (filterOption: FilterOption) => boolean;
 }
 interface RemoteFiltersState {
   filterOptions?: FilterOption[];
@@ -86,11 +87,16 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
       page,
       store: { filtersStore },
       defaultFilters,
+      skipFilterOptionFn,
     } = this.props;
 
-    const filterOptions = await filtersStore.updateOptionsForPage(page);
+    let filterOptions = await filtersStore.updateOptionsForPage(page);
     const currentTablePageNum = parseInt(filtersStore.currentTablePageNum[page] || query.p || 1, 10);
 
+    if (skipFilterOptionFn) {
+      filterOptions = filterOptions.filter((option: FilterOption) => !skipFilterOptionFn(option));
+    }
+
     // set the current page from filters/query or default it to 1
     filtersStore.setCurrentTablePageNum(page, currentTablePageNum);
 

grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts

@@ -21,6 +21,7 @@ import {
   AlertReceiveChannelCounters,
   ContactPoint,
   MaintenanceMode,
+  SupportedIntegrationFilters,
 } from './alert_receive_channel.types';
 
 export class AlertReceiveChannelStore extends BaseStore {
@@ -132,8 +133,17 @@ export class AlertReceiveChannelStore extends BaseStore {
     return results;
   }
 
-  async updatePaginatedItems(query: any = '', page = 1, updateCounters = false, invalidateFn = undefined) {
-    const filters = typeof query === 'string' ? { search: query } : query;
+  async updatePaginatedItems({
+    filters,
+    page = 1,
+    updateCounters = false,
+    invalidateFn = undefined,
+  }: {
+    filters: SupportedIntegrationFilters;
+    page: number;
+    updateCounters: boolean;
+    invalidateFn: () => boolean;
+  }) {
     const { count, results, page_size } = await makeRequest(this.path, { params: { ...filters, page } });
 
     if (invalidateFn?.()) {

grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.types.ts

@@ -62,3 +62,11 @@ export interface ContactPoint {
   contactPoint: string;
   notificationConnected: boolean;
 }
+
+export interface SupportedIntegrationFilters {
+  integration?: string[];
+  integration_ne?: string[];
+  team?: string[];
+  label?: string[];
+  searchTerm?: string;
+}

grafana-plugin/src/pages/integrations/Integrations.module.scss

@@ -7,6 +7,10 @@
   width: 40px;
 }
 
+.tabsBar {
+  margin-bottom: 24px;
+}
+
 .integrations-header {
   margin-bottom: 24px;
   right: 0;
@@ -45,3 +49,7 @@
     background: var(--cards-background);
   }
 }
+
+.goToDirectPagingAlert {
+  margin-top: 24px;
+}