Add filter descriptions (#1845)

# What this PR does
<img width="954" alt="Screenshot 2023-04-28 at 9 33 16 AM"
src="https://user-images.githubusercontent.com/2262529/235033175-6a94ffb2-3a39-4730-b855-5b1c5dff8fda.png">


## Which issue(s) this PR fixes

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

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
+
+### Added
+
+- Add filter descriptions to web ui by @iskhakov ([1845](https://github.com/grafana/oncall/pull/1845))
+
 ## v1.2.16 (2023-04-27)
 
 ### Added

engine/apps/api/views/alert_group.py

@@ -84,6 +84,8 @@ class AlertGroupFilter(DateRangeFilterMixin, ByTeamModelFieldFilterMixin, ModelF
     Examples of possible date formats here https://docs.djangoproject.com/en/1.9/ref/settings/#datetime-input-formats
     """
 
+    FILTER_BY_INVOLVED_USERS_ALERT_GROUPS_CUTOFF = 1000
+
     started_at_gte = filters.DateTimeFilter(field_name="started_at", lookup_expr="gte")
     started_at_lte = filters.DateTimeFilter(field_name="started_at", lookup_expr="lte")
     resolved_at_lte = filters.DateTimeFilter(field_name="resolved_at", lookup_expr="lte")
@@ -186,7 +188,6 @@ class AlertGroupFilter(DateRangeFilterMixin, ByTeamModelFieldFilterMixin, ModelF
         return queryset
 
     def filter_by_involved_users(self, queryset, name, value):
-        NOTIFICATION_HISTORY_CUTOFF = 1000
         users = value
 
         if not users:
@@ -198,7 +199,7 @@ class AlertGroupFilter(DateRangeFilterMixin, ByTeamModelFieldFilterMixin, ModelF
             UserNotificationPolicyLogRecord.objects.filter(author__in=users)
             .order_by("-alert_group_id")
             .values_list("alert_group_id", flat=True)
-            .distinct()[:NOTIFICATION_HISTORY_CUTOFF]
+            .distinct()[: self.FILTER_BY_INVOLVED_USERS_ALERT_GROUPS_CUTOFF]
         )
 
         queryset = queryset.filter(
@@ -620,6 +621,7 @@ class AlertGroupView(
                 "type": "options",
                 "href": api_root + "users/?filters=true&roles=0&roles=1&roles=2",
                 "default": {"display_name": self.request.user.username, "value": self.request.user.public_primary_key},
+                "description": f"This filter works only for last {AlertGroupFilter.FILTER_BY_INVOLVED_USERS_ALERT_GROUPS_CUTOFF} alert groups these users involved in.",
             },
             {
                 "name": "status",
@@ -651,6 +653,7 @@ class AlertGroupView(
                 "name": "mine",
                 "type": "boolean",
                 "default": "true",
+                "description": f"This filter works only for last {AlertGroupFilter.FILTER_BY_INVOLVED_USERS_ALERT_GROUPS_CUTOFF} alert groups you're involved in.",
             },
         ]
 

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

@@ -1,7 +1,17 @@
 import React, { Component } from 'react';
 
 import { SelectableValue, TimeRange } from '@grafana/data';
-import { IconButton, InlineSwitch, MultiSelect, TimeRangeInput, Select, LoadingPlaceholder, Input } from '@grafana/ui';
+import {
+  IconButton,
+  InlineSwitch,
+  MultiSelect,
+  TimeRangeInput,
+  Select,
+  LoadingPlaceholder,
+  Input,
+  Icon,
+  Tooltip,
+} from '@grafana/ui';
 import { capitalCase } from 'change-case';
 import cn from 'classnames/bind';
 import { debounce, isEmpty, isUndefined, omitBy, pickBy } from 'lodash-es';
@@ -114,8 +124,13 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
       <div className={cx('filters')}>
         {filters.map((filterOption: FilterOption) => (
           <div key={filterOption.name} className={cx('filter')}>
-            <Text type="secondary">{filterOption.display_name || capitalCase(filterOption.name)}:</Text>{' '}
-            {this.renderFilterOption(filterOption)}
+            <Text type="secondary">{filterOption.display_name || capitalCase(filterOption.name)}</Text>
+            {filterOption.description && (
+              <Tooltip content={filterOption.description}>
+                <Icon name="info-circle" />
+              </Tooltip>
+            )}
+            <Text type="secondary">:</Text> {this.renderFilterOption(filterOption)}
             <IconButton size="sm" name="times" onClick={this.getDeleteFilterClickHandler(filterOption.name)} />
           </div>
         ))}

grafana-plugin/src/containers/RemoteFilters/RemoteFilters.types.ts

@@ -10,4 +10,5 @@ export interface FilterOption {
   options?: SelectOption[];
   default?: { value: string };
   global?: boolean;
+  description?: string;
 }