diff --git a/CHANGELOG.md b/CHANGELOG.md index d123b651..b0382d3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Added + +- Add options to customize table columns in AlertGroup page ([3281](https://github.com/grafana/oncall/pull/3281)) + ### Fixed - User profile UI tweaks ([#3443](https://github.com/grafana/oncall/pull/3443)) diff --git a/engine/apps/api/alert_group_table_columns.py b/engine/apps/api/alert_group_table_columns.py new file mode 100644 index 00000000..8fb33811 --- /dev/null +++ b/engine/apps/api/alert_group_table_columns.py @@ -0,0 +1,31 @@ +import typing + +from apps.user_management.constants import AlertGroupTableColumns, default_columns + +if typing.TYPE_CHECKING: + from apps.user_management.models import User + + +def alert_group_table_user_settings(user: "User") -> AlertGroupTableColumns: + """ + Returns user settings for alert group table columns. The flag "default" shows that user has default settings for + visible columns. It's used by frontend to enable/disable `reset` button. + This function uses lazy update to update columns settings for organization and for user. + """ + default_organization_columns = default_columns() + if not user.organization.alert_group_table_columns: + user.organization.update_alert_group_table_columns(default_organization_columns) + organization_columns = user.organization.alert_group_table_columns + if user.alert_group_table_selected_columns: + visible_columns = [ + column for column in user.alert_group_table_selected_columns if column in organization_columns + ] + else: + visible_columns = default_organization_columns + user.update_alert_group_table_selected_columns(visible_columns) + hidden_columns = [column for column in organization_columns if column not in visible_columns] + return { + "visible": visible_columns, + "hidden": hidden_columns, + "default": visible_columns == default_organization_columns, + } diff --git a/engine/apps/api/serializers/alert_group_table_settings.py b/engine/apps/api/serializers/alert_group_table_settings.py new file mode 100644 index 00000000..24dccf1a --- /dev/null +++ b/engine/apps/api/serializers/alert_group_table_settings.py @@ -0,0 +1,60 @@ +from rest_framework import serializers +from rest_framework.exceptions import ValidationError + +from apps.user_management.constants import ( + AlertGroupTableColumnTypeChoices, + AlertGroupTableDefaultColumnChoices, + default_columns, +) + + +class AlertGroupTableColumnSerializer(serializers.Serializer): + name = serializers.CharField(max_length=200) + id = serializers.CharField(max_length=200) + type = serializers.ChoiceField(choices=AlertGroupTableColumnTypeChoices.choices) + + def validate(self, data): + self._validate_id(data) + return data + + def _validate_id(self, data): + """Validate if `id` of column with `default` type is in the list of available default columns""" + if ( + data["type"] == AlertGroupTableColumnTypeChoices.DEFAULT.value + and data["id"] not in AlertGroupTableDefaultColumnChoices.values + ): + raise ValidationError("Invalid column id format") + + +class AlertGroupTableColumnsOrganizationSerializer(serializers.Serializer): + visible = AlertGroupTableColumnSerializer(many=True) + hidden = AlertGroupTableColumnSerializer(many=True) + + def validate(self, data): + """ + Validate that at least one column is selected as visible and that all default columns are in the list. + """ + columns = data["visible"] + data["hidden"] + request_columns_ids = [column["id"] for column in columns] + if len(data["visible"]) == 0: + raise ValidationError("At least one column should be selected as visible") + elif not set(request_columns_ids) >= set(AlertGroupTableDefaultColumnChoices.values): + raise ValidationError("Default column cannot be removed") + elif len(request_columns_ids) > len(set(request_columns_ids)): + raise ValidationError("Duplicate column") + return data + + +class AlertGroupTableColumnsUserSerializer(AlertGroupTableColumnsOrganizationSerializer): + def validate(self, data): + """ + Validate that all columns exist in organization alert group table columns list. + """ + data = super().validate(data) + columns = data["visible"] + data["hidden"] + request_columns_ids = [column["id"] for column in columns] + organization_columns = self.context["request"].auth.organization.alert_group_table_columns or default_columns() + organization_columns_ids = [column["id"] for column in organization_columns] + if set(organization_columns_ids) != set(request_columns_ids): + raise ValidationError("Invalid settings") + return data diff --git a/engine/apps/api/tests/test_alert_group_table_settings.py b/engine/apps/api/tests/test_alert_group_table_settings.py new file mode 100644 index 00000000..175f3308 --- /dev/null +++ b/engine/apps/api/tests/test_alert_group_table_settings.py @@ -0,0 +1,339 @@ +import pytest +from django.urls import reverse +from rest_framework import status +from rest_framework.test import APIClient + +from apps.api.alert_group_table_columns import alert_group_table_user_settings +from apps.api.permissions import LegacyAccessControlRole +from apps.user_management.constants import AlertGroupTableColumnTypeChoices, default_columns + +DEFAULT_COLUMNS = default_columns() + + +def columns_settings(add_column=None): + default_settings = {"visible": DEFAULT_COLUMNS[:], "hidden": [], "default": True} + if add_column: + default_settings["hidden"].append(add_column) + return default_settings + + +@pytest.mark.django_db +def test_get_columns( + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + organization, user, token = make_organization_and_user_with_plugin_token() + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + response = client.get(url, format="json", **make_user_auth_headers(user, token)) + expected_result = alert_group_table_user_settings(user) + + assert response.status_code == status.HTTP_200_OK + assert response.json() == expected_result + + +@pytest.mark.parametrize( + "initial_columns_settings,updated_columns_settings,status_code", + [ + # add column + ( + columns_settings(), + columns_settings({"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}), + status.HTTP_200_OK, + ), + # remove column + ( + columns_settings({"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}), + columns_settings(), + status.HTTP_200_OK, + ), + # wrong data format + (columns_settings(), {}, status.HTTP_400_BAD_REQUEST), + (columns_settings(), {"visible": []}, status.HTTP_400_BAD_REQUEST), + (columns_settings(), {"hidden": []}, status.HTTP_400_BAD_REQUEST), + # wrong id + ( + columns_settings(), + columns_settings({"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.DEFAULT.value}), + status.HTTP_400_BAD_REQUEST, + ), + # duplicate id + ( + columns_settings(), + columns_settings({"name": "Test", "id": 1, "type": AlertGroupTableColumnTypeChoices.DEFAULT.value}), + status.HTTP_400_BAD_REQUEST, + ), + # remove default column + ( + columns_settings(), + {"visible": DEFAULT_COLUMNS[:-1], "hidden": []}, + status.HTTP_400_BAD_REQUEST, + ), + ], +) +@pytest.mark.django_db +def test_update_columns_list( + initial_columns_settings, + updated_columns_settings, + status_code, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + """Test alert group table settings for organization (POST request)""" + organization, user, token = make_organization_and_user_with_plugin_token() + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + client.post(url, data=initial_columns_settings, format="json", **make_user_auth_headers(user, token)) + response = client.post(url, data=updated_columns_settings, format="json", **make_user_auth_headers(user, token)) + assert response.status_code == status_code + if status_code == status.HTTP_200_OK: + assert response.json() == updated_columns_settings + + +@pytest.mark.parametrize( + "initial_columns_settings,updated_columns_settings,status_code", + [ + # hide column + (columns_settings(), {"visible": DEFAULT_COLUMNS[:-1], "hidden": DEFAULT_COLUMNS[-1:]}, status.HTTP_200_OK), + # make column visible + ({"visible": DEFAULT_COLUMNS[:-1], "hidden": DEFAULT_COLUMNS[-1:]}, columns_settings(), status.HTTP_200_OK), + # wrong data format + (columns_settings(), {}, status.HTTP_400_BAD_REQUEST), + (columns_settings(), {"visible": []}, status.HTTP_400_BAD_REQUEST), + (columns_settings(), {"hidden": []}, status.HTTP_400_BAD_REQUEST), + # hide all columns + (columns_settings(), {"visible": [], "hidden": DEFAULT_COLUMNS[:]}, status.HTTP_400_BAD_REQUEST), + # add column + ( + columns_settings(), + columns_settings({"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}), + status.HTTP_400_BAD_REQUEST, + ), + # remove column + ( + columns_settings({"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}), + columns_settings(), + status.HTTP_400_BAD_REQUEST, + ), + ], +) +@pytest.mark.django_db +def test_update_columns_settings( + initial_columns_settings, + updated_columns_settings, + status_code, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + """Test alert group table settings for user (PUT request)""" + organization, user, token = make_organization_and_user_with_plugin_token() + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + client.post(url, data=initial_columns_settings, format="json", **make_user_auth_headers(user, token)) + response = client.put(url, data=updated_columns_settings, format="json", **make_user_auth_headers(user, token)) + assert response.status_code == status_code + if status_code == status.HTTP_200_OK: + updated_columns_settings["default"] = updated_columns_settings["visible"] == DEFAULT_COLUMNS + assert response.json() == updated_columns_settings + + +@pytest.mark.django_db +def test_reset_user_columns( + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + """Test reset alert group table settings for user""" + organization, user, token = make_organization_and_user_with_plugin_token() + client = APIClient() + url = reverse("api-internal:alert_group_table-reset_columns_settings") + new_column = {"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value} + organization.update_alert_group_table_columns(default_columns() + [new_column]) + user.update_alert_group_table_selected_columns(organization.alert_group_table_columns[1::-1]) + default_settings = columns_settings(new_column) + assert alert_group_table_user_settings(user) != default_settings + response = client.post(url, format="json", **make_user_auth_headers(user, token)) + assert response.status_code == status.HTTP_200_OK + assert response.json() == default_settings + + +@pytest.mark.django_db +@pytest.mark.parametrize( + "role,expected_status", + [ + (LegacyAccessControlRole.ADMIN, status.HTTP_200_OK), + (LegacyAccessControlRole.EDITOR, status.HTTP_200_OK), + (LegacyAccessControlRole.VIEWER, status.HTTP_200_OK), + (LegacyAccessControlRole.NONE, status.HTTP_403_FORBIDDEN), + ], +) +def test_get_columns_permissions( + role, + expected_status, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + organization, user, token = make_organization_and_user_with_plugin_token(role) + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + response = client.get(url, format="json", **make_user_auth_headers(user, token)) + + assert response.status_code == expected_status + + +@pytest.mark.django_db +@pytest.mark.parametrize( + "role,expected_status", + [ + (LegacyAccessControlRole.ADMIN, status.HTTP_200_OK), + (LegacyAccessControlRole.EDITOR, status.HTTP_403_FORBIDDEN), + (LegacyAccessControlRole.VIEWER, status.HTTP_403_FORBIDDEN), + (LegacyAccessControlRole.NONE, status.HTTP_403_FORBIDDEN), + ], +) +def test_update_columns_list_permissions( + role, + expected_status, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + organization, user, token = make_organization_and_user_with_plugin_token(role) + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + data = columns_settings() + response = client.post(url, data=data, format="json", **make_user_auth_headers(user, token)) + + assert response.status_code == expected_status + + +@pytest.mark.django_db +@pytest.mark.parametrize( + "role,expected_status", + [ + (LegacyAccessControlRole.ADMIN, status.HTTP_200_OK), + (LegacyAccessControlRole.EDITOR, status.HTTP_200_OK), + (LegacyAccessControlRole.VIEWER, status.HTTP_200_OK), + (LegacyAccessControlRole.NONE, status.HTTP_403_FORBIDDEN), + ], +) +def test_update_columns_settings_permissions( + role, + expected_status, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + organization, user, token = make_organization_and_user_with_plugin_token(role) + client = APIClient() + url = reverse("api-internal:alert_group_table-columns_settings") + data = columns_settings() + response = client.put(url, data=data, format="json", **make_user_auth_headers(user, token)) + + assert response.status_code == expected_status + + +@pytest.mark.django_db +@pytest.mark.parametrize( + "role,expected_status", + [ + (LegacyAccessControlRole.ADMIN, status.HTTP_200_OK), + (LegacyAccessControlRole.EDITOR, status.HTTP_200_OK), + (LegacyAccessControlRole.VIEWER, status.HTTP_200_OK), + (LegacyAccessControlRole.NONE, status.HTTP_403_FORBIDDEN), + ], +) +def test_reset_user_columns_permissions( + role, + expected_status, + make_organization_and_user_with_plugin_token, + make_user_auth_headers, +): + organization, user, token = make_organization_and_user_with_plugin_token(role) + client = APIClient() + url = reverse("api-internal:alert_group_table-reset_columns_settings") + response = client.post(url, format="json", **make_user_auth_headers(user, token)) + + assert response.status_code == expected_status + + +@pytest.mark.parametrize( + "user_settings,organization_settings,expected_result", + [ + # user doesn't have settings, organization has default settings - all columns are visible + ( + None, + DEFAULT_COLUMNS, + {"visible": DEFAULT_COLUMNS, "hidden": [], "default": True}, + ), + # user doesn't have settings, organization has updated settings - only default columns are visible + ( + None, + DEFAULT_COLUMNS + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + { + "visible": DEFAULT_COLUMNS, + "hidden": [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + "default": True, + }, + ), + # user has settings, organization has default settings - only selected columns are visible + ( + DEFAULT_COLUMNS[:3], + DEFAULT_COLUMNS, + {"visible": DEFAULT_COLUMNS[:3], "hidden": DEFAULT_COLUMNS[3:], "default": False}, + ), + # user has settings, organization has unchanged settings - only selected columns are visible + ( + DEFAULT_COLUMNS[:3] + + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + DEFAULT_COLUMNS + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + { + "visible": ( + DEFAULT_COLUMNS[:3] + + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}] + ), + "hidden": DEFAULT_COLUMNS[3:], + "default": False, + }, + ), + # user has settings, organization has updated settings - column was removed, remove from settings + ( + DEFAULT_COLUMNS[:3] + + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + DEFAULT_COLUMNS, + {"visible": DEFAULT_COLUMNS[:3], "hidden": DEFAULT_COLUMNS[3:], "default": False}, + ), + # user has settings with reordered columns, organization has unchanged settings - selected columns in particular + # order are visible + ( + [ + DEFAULT_COLUMNS[1], + DEFAULT_COLUMNS[3], + {"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}, + DEFAULT_COLUMNS[2], + ], + DEFAULT_COLUMNS + [{"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}], + { + "visible": [ + DEFAULT_COLUMNS[1], + DEFAULT_COLUMNS[3], + {"name": "Test", "id": "test", "type": AlertGroupTableColumnTypeChoices.LABEL.value}, + DEFAULT_COLUMNS[2], + ], + "hidden": DEFAULT_COLUMNS[:1] + DEFAULT_COLUMNS[4:], + "default": False, + }, + ), + ], +) +@pytest.mark.django_db +def test_alert_group_table_user_settings( + user_settings, + organization_settings, + expected_result, + make_organization_and_user, +): + organization, user = make_organization_and_user() + organization.update_alert_group_table_columns(organization_settings) + if user_settings: + user.update_alert_group_table_selected_columns(user_settings) + result = alert_group_table_user_settings(user) + assert result == expected_result + assert user.alert_group_table_selected_columns == result["visible"] diff --git a/engine/apps/api/urls.py b/engine/apps/api/urls.py index c8c79a1e..80137dc0 100644 --- a/engine/apps/api/urls.py +++ b/engine/apps/api/urls.py @@ -4,6 +4,7 @@ from common.api_helpers.optional_slash_router import OptionalSlashRouter, option from .views import UserNotificationPolicyView, auth from .views.alert_group import AlertGroupView +from .views.alert_group_table_settings import AlertGroupTableColumnsViewSet from .views.alert_receive_channel import AlertReceiveChannelView from .views.alert_receive_channel_template import AlertReceiveChannelTemplateView from .views.alerts import AlertDetailView @@ -143,3 +144,19 @@ urlpatterns += [ name="alert_group_labels-get_key", ), ] + +# Alert group table settings +urlpatterns += [ + re_path( + r"^alertgroup_table_settings/?$", + AlertGroupTableColumnsViewSet.as_view( + {"get": "get_columns", "put": "update_user_columns", "post": "update_organization_columns"} + ), + name="alert_group_table-columns_settings", + ), + re_path( + r"^alertgroup_table_settings/reset?$", + AlertGroupTableColumnsViewSet.as_view({"post": "reset_user_columns"}), + name="alert_group_table-reset_columns_settings", + ), +] diff --git a/engine/apps/api/views/alert_group_table_settings.py b/engine/apps/api/views/alert_group_table_settings.py new file mode 100644 index 00000000..3b0a35f4 --- /dev/null +++ b/engine/apps/api/views/alert_group_table_settings.py @@ -0,0 +1,55 @@ +import typing + +from rest_framework.permissions import IsAuthenticated +from rest_framework.request import Request +from rest_framework.response import Response + +from apps.api.alert_group_table_columns import alert_group_table_user_settings +from apps.api.permissions import RBACPermission +from apps.api.serializers.alert_group_table_settings import ( + AlertGroupTableColumnsOrganizationSerializer, + AlertGroupTableColumnsUserSerializer, +) +from apps.api.views.labels import LabelsFeatureFlagViewSet +from apps.auth_token.auth import PluginAuthentication +from apps.user_management.constants import AlertGroupTableColumn, default_columns + + +class AlertGroupTableColumnsViewSet(LabelsFeatureFlagViewSet): + authentication_classes = (PluginAuthentication,) + permission_classes = (IsAuthenticated, RBACPermission) + + rbac_permissions = { + "get_columns": [RBACPermission.Permissions.ALERT_GROUPS_READ], + "update_user_columns": [RBACPermission.Permissions.ALERT_GROUPS_READ], + "reset_user_columns": [RBACPermission.Permissions.ALERT_GROUPS_READ], + "update_organization_columns": [RBACPermission.Permissions.OTHER_SETTINGS_WRITE], + } + + def get_columns(self, request: Request) -> Response: + return Response(alert_group_table_user_settings(request.user)) + + def update_organization_columns(self, request: Request) -> Response: + """add/remove columns for organization""" + serializer = AlertGroupTableColumnsOrganizationSerializer(data=request.data, context={"request": request}) + serializer.is_valid(raise_exception=True) + columns: typing.List[AlertGroupTableColumn] = serializer.validated_data.get( + "visible", [] + ) + serializer.validated_data.get("hidden", []) + request.auth.organization.update_alert_group_table_columns(columns) + return Response(alert_group_table_user_settings(request.user)) + + def update_user_columns(self, request: Request) -> Response: + """select/hide/change order for user""" + user = request.user + serializer = AlertGroupTableColumnsUserSerializer(data=request.data, context={"request": request}) + serializer.is_valid(raise_exception=True) + columns: typing.List[AlertGroupTableColumn] = serializer.validated_data.get("visible", []) + user.update_alert_group_table_selected_columns(columns) + return Response(alert_group_table_user_settings(user)) + + def reset_user_columns(self, request: Request) -> Response: + """set default alert group table settings for user""" + user = request.user + user.update_alert_group_table_selected_columns(default_columns()) + return Response(alert_group_table_user_settings(user)) diff --git a/engine/apps/user_management/constants.py b/engine/apps/user_management/constants.py new file mode 100644 index 00000000..16c3b4ff --- /dev/null +++ b/engine/apps/user_management/constants.py @@ -0,0 +1,39 @@ +import typing + +from django.db.models import TextChoices + + +class AlertGroupTableDefaultColumnChoices(TextChoices): + STATUS = "status", "Status" + ID = "id", "ID" + TITLE = "title", "Title" + ALERTS = "alerts", "Alerts" + INTEGRATION = "integration", "Integration" + CREATED = "created", "Created" + LABELS = "labels", "Labels" + TEAM = "team", "Team" + USERS = "users", "Users" + + +class AlertGroupTableColumnTypeChoices(TextChoices): + DEFAULT = "default" + LABEL = "label" + + +class AlertGroupTableColumn(typing.TypedDict): + id: str + name: str + type: str + + +class AlertGroupTableColumns(typing.TypedDict): + visible: typing.List[AlertGroupTableColumn] + hidden: typing.List[AlertGroupTableColumn] + default: bool + + +def default_columns() -> typing.List[AlertGroupTableColumn]: + return [ + {"name": column.label, "id": column.value, "type": AlertGroupTableColumnTypeChoices.DEFAULT.value} + for column in AlertGroupTableDefaultColumnChoices + ] diff --git a/engine/apps/user_management/migrations/0018_auto_20231115_1206.py b/engine/apps/user_management/migrations/0018_auto_20231115_1206.py new file mode 100644 index 00000000..5e92d9ad --- /dev/null +++ b/engine/apps/user_management/migrations/0018_auto_20231115_1206.py @@ -0,0 +1,23 @@ +# Generated by Django 3.2.20 on 2023-11-15 12:06 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('user_management', '0017_alter_organization_maintenance_author'), + ] + + operations = [ + migrations.AddField( + model_name='organization', + name='alert_group_table_columns', + field=models.JSONField(default=None, null=True), + ), + migrations.AddField( + model_name='user', + name='alert_group_table_selected_columns', + field=models.JSONField(default=None, null=True), + ), + ] diff --git a/engine/apps/user_management/models/organization.py b/engine/apps/user_management/models/organization.py index 70fcf8e0..d3a16bf2 100644 --- a/engine/apps/user_management/models/organization.py +++ b/engine/apps/user_management/models/organization.py @@ -6,11 +6,12 @@ from urllib.parse import urljoin from django.conf import settings from django.core.validators import MinLengthValidator from django.db import models -from django.db.models import Count, Q +from django.db.models import Count, JSONField, Q from django.utils import timezone from mirage import fields as mirage_fields from apps.alerts.models import MaintainableObject +from apps.user_management.constants import AlertGroupTableColumn from apps.user_management.subscription_strategy import FreePublicBetaSubscriptionStrategy from common.insight_log import ChatOpsEvent, ChatOpsTypePlug, write_chatops_insight_log from common.oncall_gateway import create_oncall_connector, delete_oncall_connector, delete_slack_connector @@ -248,6 +249,8 @@ class Organization(MaintainableObject): is_rbac_permissions_enabled = models.BooleanField(default=False) is_grafana_incident_enabled = models.BooleanField(default=False) + alert_group_table_columns: list[AlertGroupTableColumn] | None = JSONField(default=None, null=True) + class Meta: unique_together = ("stack_id", "org_id") @@ -283,6 +286,11 @@ class Organization(MaintainableObject): def emails_left(self, user): return self.subscription_strategy.emails_left(user) + def update_alert_group_table_columns(self, columns: typing.List[AlertGroupTableColumn]) -> None: + if columns != self.alert_group_table_columns: + self.alert_group_table_columns = columns + self.save(update_fields=["alert_group_table_columns"]) + def set_general_log_channel(self, channel_id, channel_name, user): if self.general_log_channel_id != channel_id: old_general_log_channel_id = self.slack_team_identity.cached_channels.filter( diff --git a/engine/apps/user_management/models/user.py b/engine/apps/user_management/models/user.py index d6dbbd71..42a942b5 100644 --- a/engine/apps/user_management/models/user.py +++ b/engine/apps/user_management/models/user.py @@ -21,6 +21,7 @@ from apps.api.permissions import ( user_is_authorized, ) from apps.schedules.tasks import drop_cached_ical_for_custom_events_for_organization +from apps.user_management.constants import AlertGroupTableColumn from common.public_primary_keys import generate_public_primary_key, increase_public_primary_key_length if typing.TYPE_CHECKING: @@ -236,6 +237,8 @@ class User(models.Model): is_active = models.BooleanField(null=True, default=True) permissions = models.JSONField(null=False, default=list) + alert_group_table_selected_columns: list[AlertGroupTableColumn] | None = models.JSONField(default=None, null=True) + def __str__(self): return f"{self.pk}: {self.username}" @@ -449,6 +452,11 @@ class User(models.Model): ), ) + def update_alert_group_table_selected_columns(self, columns: typing.List[AlertGroupTableColumn]) -> None: + if self.alert_group_table_selected_columns != columns: + self.alert_group_table_selected_columns = columns + self.save(update_fields=["alert_group_table_selected_columns"]) + # TODO: check whether this signal can be moved to save method of the model @receiver(post_save, sender=User) diff --git a/grafana-plugin/e2e-tests/utils/alertGroup.ts b/grafana-plugin/e2e-tests/utils/alertGroup.ts index 1a7d854d..33ef2462 100644 --- a/grafana-plugin/e2e-tests/utils/alertGroup.ts +++ b/grafana-plugin/e2e-tests/utils/alertGroup.ts @@ -55,20 +55,17 @@ export const filterAlertGroupsTableByIntegrationAndGoToDetailPage = async ( await selectElement.type(integrationName); await selectValuePickerValue(page, integrationName, false); - /** - * wait for the alert groups to be filtered then by this particular integration (toBeVisible assertion), - * then click on the alert group and go to the individual alert group page - */ - const firstTableRow = page.locator('table > tbody > tr:first-child'); - try { /** - * wait for up to 5 seconds for the alert groups to be filtered, if the first row does not correspond + * wait for up to 2 seconds for the alert groups to be filtered, if the first row does not correspond * to `integrationName` assume that the background workers have not created it yet and lets * recursively retry this function */ - await firstTableRow.getByText(integrationName).waitFor({ state: 'visible', timeout: 5000 }); - await firstTableRow.locator('td:nth-child(4) a').click(); + + await page.waitForTimeout(2000); + + expect(await page.locator('table > tbody > tr [data-testid=integration-name]').textContent()).toBe(integrationName); + await page.locator('table > tbody > tr [data-testid=integration-url]').click(); } catch (err) { return filterAlertGroupsTableByIntegrationAndGoToDetailPage(page, integrationName, (retryNum += 1)); } diff --git a/grafana-plugin/jest.setup.ts b/grafana-plugin/jest.setup.ts index 0dc74191..4ae785da 100644 --- a/grafana-plugin/jest.setup.ts +++ b/grafana-plugin/jest.setup.ts @@ -19,3 +19,34 @@ Object.defineProperty(window, 'matchMedia', { dispatchEvent: jest.fn(), })), }); + +Object.defineProperty(window, 'ResizeObserver', { + writable: true, + value: class ResizeObserver { + constructor(callback: ResizeObserverCallback) { + setTimeout(() => { + callback( + [ + { + contentRect: { + x: 1, + y: 2, + width: 500, + height: 500, + top: 100, + bottom: 0, + left: 100, + right: 0, + }, + target: {}, + } as ResizeObserverEntry, + ], + this + ); + }); + } + observe() {} + disconnect() {} + unobserve() {} + }, +}); diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 9a328a97..5219ad4a 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -79,7 +79,7 @@ "@types/react-dom": "^18.0.6", "@types/react-responsive": "^8.0.5", "@types/react-router-dom": "^5.3.3", - "@types/react-test-renderer": "^17.0.2", + "@types/react-test-renderer": "^18.0.5", "@types/react-transition-group": "^4.4.5", "@types/throttle-debounce": "^5.0.0", "@typescript-eslint/eslint-plugin": "^5.40.1", @@ -101,9 +101,9 @@ "openapi-typescript": "^7.0.0-next.4", "plop": "^2.7.4", "postcss-loader": "^7.0.1", - "react": "17.0.2", - "react-dom": "17.0.2", - "react-test-renderer": "^17.0.2", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-test-renderer": "^18.0.2", "stylelint-config-prettier": "^9.0.3", "stylelint-prettier": "^2.0.0", "ts-jest": "29.0.3", @@ -116,18 +116,22 @@ "node": ">=14" }, "dependencies": { + "@dnd-kit/core": "^6.0.8", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", "@grafana/data": "^9.2.4", "@grafana/faro-web-sdk": "^1.0.0-beta4", "@grafana/faro-web-tracing": "^1.0.0-beta4", - "@grafana/labels": "1.3.4", + "@grafana/labels": "~1.3.5", "@grafana/runtime": "9.3.0-beta1", - "@grafana/ui": "^9.4.7", + "@grafana/ui": "^10.2.0", "@opentelemetry/api": "^1.3.0", "array-move": "^4.0.0", "change-case": "^4.1.1", "circular-dependency-plugin": "^5.2.2", "dayjs": "^1.11.5", "eslint-plugin-import": "^2.25.4", + "immutability-helper": "^3.1.1", "mobx": "5.13.0", "mobx-react": "6.1.1", "object-hash": "^3.0.0", diff --git a/grafana-plugin/src/assets/style/global.css b/grafana-plugin/src/assets/style/global.css index ef7ae849..5cc2b9ab 100644 --- a/grafana-plugin/src/assets/style/global.css +++ b/grafana-plugin/src/assets/style/global.css @@ -44,9 +44,8 @@ margin-bottom: 16px; } -.rc-table-cell { - padding-left: 4px; - padding-right: 4px; +td.rc-table-cell { + height: 44px !important; /* works better than break-all, especially for table headers */ word-break: break-word; diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index bbcc0df9..7b02d032 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -143,6 +143,10 @@ -webkit-box-orient: vertical; } +.overflow-child--line-1 { + -webkit-line-clamp: 1; +} + .break-word { word-break: break-all; } @@ -150,3 +154,40 @@ .line-clamp-3 { -webkit-line-clamp: 3; } + +/* ----- + * CSSTransitionGroup fading + */ + +.fade-enter { + max-height: 0; + opacity: 0; +} + +.fade-enter.fade-enter-active { + max-height: 50px; + opacity: 1; + transition: opacity 300ms ease-in, max-height 300ms ease-in; +} + +.fade-leave { + opacity: 1; + max-height: 50px; +} + +.fade-leave.fade-leave-active { + max-height: 0; + opacity: 0; + transition: opacity 300ms ease-in, max-height 300ms ease-in; +} + +.fade-exit { + opacity: 1; + max-height: 50px; +} + +.fade-exit.fade-exit-active { + max-height: 0; + opacity: 0; + transition: opacity 300ms ease-in, max-height 300ms ease-in; +} diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx index 85329a4f..7f0a21c9 100644 --- a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx +++ b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx @@ -27,7 +27,7 @@ const CheatSheet = (props: CheatSheetProps) => { {cheatSheetName} cheatsheet - + {cheatSheetData.description}
@@ -70,7 +70,7 @@ const CheatSheetListItem = (props: CheatSheetListItemProps) => { {item.codeExample} openNotification('Example copied')}> - + diff --git a/grafana-plugin/src/components/GTable/GTable.tsx b/grafana-plugin/src/components/GTable/GTable.tsx index ac6283f4..a646c16b 100644 --- a/grafana-plugin/src/components/GTable/GTable.tsx +++ b/grafana-plugin/src/components/GTable/GTable.tsx @@ -115,7 +115,7 @@ const GTable = (props: Props
{item.canHoverIcon ? ( - + ) : ( )} diff --git a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx index 7454403a..c270e278 100644 --- a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx +++ b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx @@ -256,6 +256,7 @@ const IntegrationContactPoint: React.FC<{ return ( { window.open( @@ -277,6 +278,7 @@ const IntegrationContactPoint: React.FC<{ } > { alertReceiveChannelStore diff --git a/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx b/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx index b255fa60..8047ad54 100644 --- a/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx +++ b/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx @@ -35,13 +35,13 @@ const IntegrationInputField: React.FC = ({
- {showEye && } + {showEye && } {showCopy && ( - + )} - {showExternal && } + {showExternal && }
diff --git a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx index fd90261b..7f541056 100644 --- a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx +++ b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx @@ -72,6 +72,7 @@ export class NotificationPolicy extends React.Component = ({ qualit Calculation methodology - + {expanded && ( diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx index ecc27c61..90f98dfa 100644 --- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx +++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx @@ -33,7 +33,13 @@ const SourceCode: FC = (props) => { > {showClipboardIconOnly ? ( - + ) : (
  • - Choose + Select...
    - - - -
    + class="css-1j2891d-Icon" + />
    @@ -493,18 +411,18 @@ exports[`AddResponders should render selected team and users properly 1`] = `
  • - Choose + Select...
    - - - -
    + class="css-1j2891d-Icon" + />
    @@ -630,18 +525,18 @@ exports[`AddResponders should render selected team and users properly 1`] = `
  • - Choose + Select...
    - - - -
    + class="css-1j2891d-Icon" + />
    @@ -767,81 +639,63 @@ exports[`AddResponders should render selected team and users properly 1`] = `
    • - - - +
    -
    -
    - - -
    - Learn more -
    -
    - - - + Learn more +
    +
    +
    -
    - -     - about Default vs Important user personal notification settings + + + about Default vs Important user personal notification settings +
    diff --git a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/__snapshots__/AddRespondersPopup.test.tsx.snap b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/__snapshots__/AddRespondersPopup.test.tsx.snap index ba89c566..d9a80841 100644 --- a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/__snapshots__/AddRespondersPopup.test.tsx.snap +++ b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/__snapshots__/AddRespondersPopup.test.tsx.snap @@ -7,81 +7,79 @@ exports[`AddRespondersPopup it shows a loading message initially 1`] = ` data-testid="add-responders-popup" >
    - - - -
    + class="css-1j2891d-Icon" + />
    - - - -
    +
    - Users - - + + +
    Loading...