From a5587031b110114ea3439d74deea9fa0b6ffe0ea Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 23 Jul 2024 16:51:00 +0300
Subject: [PATCH] AG filters (#4718)

# What this PR does

- Refactored filters to allow for easier customization part of
`extraInformation`
- Refactored filters to render with portals
- Always initialize mandatory fields with default values
- Added `TimeRangePickerWrapper` that mimics logic of the same selector
used in Grafana from `@grafana/scenes`, specifically `ScenesTimePicker`

~~- Bumped all `@grafana/*` dependencies to latest version~~ (postponed
to be done in a separate PR)

## Which issue(s) this PR closes

Related to https://github.com/grafana/oncall/issues/4464
---
 .../RemoteFilters/RemoteFilters.tsx           | 131 +++++++++++++-----
 .../RemoteFilters/TimeRangePickerWrapper.tsx  | 122 ++++++++++++++++
 .../src/models/alertgroup/alertgroup.ts       |   1 +
 .../src/models/filters/filters.types.ts       |  13 ++
 .../src/pages/incidents/Incidents.tsx         | 127 ++++++++++++-----
 grafana-plugin/src/types.ts                   |   2 +-
 6 files changed, 323 insertions(+), 73 deletions(-)
 create mode 100644 grafana-plugin/src/containers/RemoteFilters/TimeRangePickerWrapper.tsx

diff --git a/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx b/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx
index 61a83f9f..309f2a79 100644
--- a/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx
+++ b/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx
@@ -5,7 +5,6 @@ import { GrafanaTheme2, KeyValue, SelectableValue, TimeRange } from '@grafana/da
 import {
   InlineSwitch,
   MultiSelect,
-  TimeRangeInput,
   Select,
   LoadingPlaceholder,
   Input,
@@ -19,33 +18,53 @@ import { capitalCase } from 'change-case';
 import { debounce, isUndefined, omitBy, pickBy } from 'lodash-es';
 import { observer } from 'mobx-react';
 import moment from 'moment-timezone';
+import ReactDOM from 'react-dom';
 import Emoji from 'react-emoji-render';
 
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { Text } from 'components/Text/Text';
 import { LabelsFilter } from 'containers/Labels/LabelsFilter';
 import { RemoteSelect } from 'containers/RemoteSelect/RemoteSelect';
 import { TeamName } from 'containers/TeamName/TeamName';
-import { FiltersValues } from 'models/filters/filters.types';
+import { FilterExtraInformation, FilterExtraInformationValues } from 'models/filters/filters.types';
 import { GrafanaTeamStore } from 'models/grafana_team/grafana_team';
 import { SelectOption, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import { LocationHelper } from 'utils/LocationHelper';
 import { PAGE } from 'utils/consts';
 import { convertTimerangeToFilterValue, getValueForDateRangeFilterType } from 'utils/datetime';
-import { allFieldsEmpty } from 'utils/utils';
 
 import { parseFilters } from './RemoteFilters.helpers';
 import { FilterOption } from './RemoteFilters.types';
+import { TimeRangePickerWrapper } from './TimeRangePickerWrapper';
 
 interface RemoteFiltersProps extends WithStoreProps, Themeable2 {
   onChange: (filters: Record<string, any>, isOnMount: boolean, invalidateFn: () => boolean) => void;
   query: KeyValue;
   page: PAGE;
-  defaultFilters?: FiltersValues;
-  extraFilters?: (state, setState, onFiltersValueChange) => React.ReactNode;
   grafanaTeamStore: GrafanaTeamStore;
+  extraInformation?: FilterExtraInformation;
+  extraFilters?: (state, setState, onFiltersValueChange) => React.ReactNode;
   skipFilterOptionFn?: (filterOption: FilterOption) => boolean;
 }
+
+export function filterExtraInformation(object: FilterExtraInformationValues): FilterExtraInformationValues {
+  const defaultValues: Partial<FilterExtraInformationValues> = {
+    isClearable: true,
+    showInputLabel: true,
+  };
+
+  const result = { ...object };
+
+  Object.keys(defaultValues).forEach((key) => {
+    if (!result.hasOwnProperty(key)) {
+      result[key] = defaultValues[key];
+    }
+  });
+
+  return result;
+}
+
 export interface RemoteFiltersState {
   filterOptions?: FilterOption[];
   filters: FilterOption[];
@@ -86,12 +105,12 @@ class _RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
       query,
       page,
       store: { filtersStore },
-      defaultFilters,
       skipFilterOptionFn,
     } = this.props;
 
     let filterOptions = await filtersStore.updateOptionsForPage(page);
     const currentTablePageNum = parseInt(filtersStore.currentTablePageNum[page] || query.p || 1, 10);
+    const defaultFilters = this.extractDefaultValuesFromExtraInformation();
 
     if (skipFilterOptionFn) {
       filterOptions = filterOptions.filter((option: FilterOption) => !skipFilterOptionFn(option));
@@ -100,11 +119,11 @@ class _RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
     // set the current page from filters/query or default it to 1
     filtersStore.setCurrentTablePageNum(page, currentTablePageNum);
 
-    let { filters, values } = parseFilters({ ...query, ...filtersStore.globalValues }, filterOptions, query);
-
-    if (allFieldsEmpty(values)) {
-      ({ filters, values } = parseFilters(defaultFilters, filterOptions, query));
-    }
+    let { filters, values } = parseFilters(
+      { ...defaultFilters, ...query, ...filtersStore.globalValues },
+      filterOptions,
+      query
+    );
 
     this.setState({ filterOptions, filters, values }, () => this.onChange(true));
   }
@@ -147,28 +166,8 @@ class _RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
 
     return (
       <div className={styles.filters}>
-        {filters.map((filterOption: FilterOption) => (
-          <div key={filterOption.name} className={styles.filter}>
-            <Text withBackground wrap={false} type="primary">
-              {filterOption.display_name || capitalCase(filterOption.name)}
-              {filterOption.description && (
-                <span className={styles.infoIcon}>
-                  <Tooltip content={filterOption.description}>
-                    <Icon name="info-circle" />
-                  </Tooltip>
-                </span>
-              )}
-            </Text>
-            {this.renderFilterOption(filterOption)}
-            <Button
-              size="md"
-              icon="times"
-              tooltip="Remove filter"
-              variant="secondary"
-              onClick={this.getDeleteFilterClickHandler(filterOption.name)}
-            />
-          </div>
-        ))}
+        {filters.map(this.renderFilterBlock)}
+
         <div className={styles.filterOptions}>
           <Select
             menuShouldPortal
@@ -187,6 +186,67 @@ class _RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
     );
   };
 
+  renderFilterBlock = (filterOption: FilterOption) => {
+    const { theme, extraInformation } = this.props;
+    const showInputLabel = this.getExtraInformationField(filterOption, 'showInputLabel');
+    const isInputClearable = this.getExtraInformationField(filterOption, 'isClearable');
+
+    const styles = getStyles(theme);
+
+    const filterElement = (
+      <div key={filterOption.name} className={styles.filter}>
+        <RenderConditionally shouldRender={showInputLabel}>
+          <Text withBackground wrap={false} type="primary">
+            {filterOption.display_name || capitalCase(filterOption.name)}
+            {filterOption.description && (
+              <span className={styles.infoIcon}>
+                <Tooltip content={filterOption.description}>
+                  <Icon name="info-circle" />
+                </Tooltip>
+              </span>
+            )}
+          </Text>
+        </RenderConditionally>
+
+        {this.renderFilterOption(filterOption)}
+
+        <RenderConditionally shouldRender={isInputClearable}>
+          <Button
+            size="md"
+            icon="times"
+            tooltip="Remove filter"
+            variant="secondary"
+            onClick={this.getDeleteFilterClickHandler(filterOption.name)}
+          />
+        </RenderConditionally>
+      </div>
+    );
+
+    if (extraInformation?.[filterOption.name]?.portal?.current) {
+      return ReactDOM.createPortal(filterElement, extraInformation[filterOption.name].portal.current);
+    }
+
+    return filterElement;
+  };
+
+  getExtraInformationField = (filterOption: FilterOption, key: keyof FilterExtraInformationValues) => {
+    return filterExtraInformation(this.props.extraInformation?.[filterOption.name])?.[key];
+  };
+
+  extractDefaultValuesFromExtraInformation = (): { [key: string]: FilterExtraInformationValues } => {
+    const { extraInformation } = this.props;
+
+    return extraInformation
+      ? Object.keys(extraInformation).reduce((acc, key) => {
+          if (extraInformation[key].value) {
+            acc[key] = extraInformation[key].value;
+          }
+
+          return acc;
+        }, {})
+      : {};
+  };
+
   handleSearch = (query: string) => {
     const { filters } = this.state;
 
@@ -324,12 +384,10 @@ class _RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
         const value = getValueForDateRangeFilterType(values[filter.name]);
 
         return (
-          <TimeRangeInput
+          <TimeRangePickerWrapper
             timeZone={moment.tz.guess()}
             value={value}
             onChange={this.getDateRangeFilterChangeHandler(filter.name)}
-            hideTimeZone
-            clearable={false}
           />
         );
 
@@ -465,7 +523,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     filters: css`
       display: flex;
       gap: 10px;
-      padding: 10px;
       border: 1px solid ${theme.colors.border.weak}
       border-radius: 2px;
       flex-wrap: wrap;
diff --git a/grafana-plugin/src/containers/RemoteFilters/TimeRangePickerWrapper.tsx b/grafana-plugin/src/containers/RemoteFilters/TimeRangePickerWrapper.tsx
new file mode 100644
index 00000000..974b916f
--- /dev/null
+++ b/grafana-plugin/src/containers/RemoteFilters/TimeRangePickerWrapper.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+
+import { dateMath, DateTime, TimeRange, toUtc } from '@grafana/data';
+import { TimeZone } from '@grafana/schema';
+import { TimeRangePicker } from '@grafana/ui';
+import { noop } from 'lodash';
+
+interface TimeRangePickerProps {
+  value: TimeRange;
+  timeZone: string;
+
+  onChange: (timeRange: TimeRange) => void;
+}
+
+export function TimeRangePickerWrapper(props: TimeRangePickerProps) {
+  const { onChange } = props;
+
+  const [value, setValue] = useState<TimeRange>(props.value);
+  const [timezone, setTimezone] = useState<string>(props.timeZone);
+
+  return (
+    <TimeRangePicker
+      isOnCanvas
+      timeZone={timezone}
+      value={value}
+      onChange={onPickerChange}
+      onZoom={onZoom}
+      onMoveBackward={onMoveBackward}
+      onMoveForward={onMoveForward}
+      onChangeTimeZone={onTimezoneChange}
+      onChangeFiscalYearStartMonth={noop}
+    />
+  );
+
+  function onPickerChange(timeRange: TimeRange) {
+    setValue(timeRange);
+    onChange(timeRange);
+  }
+
+  function onZoom() {
+    const zoomedTimeRange = getZoomedTimeRange(value, 2);
+    onPickerChange(zoomedTimeRange);
+  }
+
+  function onMoveBackward() {
+    onPickerChange(getShiftedTimeRange(TimeRangeDirection.Backward, value, Date.now()));
+  }
+
+  function onMoveForward() {
+    onPickerChange(getShiftedTimeRange(TimeRangeDirection.Forward, value, Date.now()));
+  }
+
+  function onTimezoneChange(timeZone: TimeZone) {
+    setTimezone(timeZone);
+    onPickerChange(evaluateTimeRange(value.from, value.to, timeZone));
+  }
+}
+
+function evaluateTimeRange(
+  from: string | DateTime,
+  to: string | DateTime,
+  timeZone: TimeZone,
+  fiscalYearStartMonth?: number,
+  delay?: string
+): TimeRange {
+  const hasDelay = delay && to === 'now';
+
+  return {
+    from: dateMath.parse(from, false, timeZone, fiscalYearStartMonth)!,
+    to: dateMath.parse(hasDelay ? 'now-' + delay : to, true, timeZone, fiscalYearStartMonth)!,
+    raw: {
+      from: from,
+      to: to,
+    },
+  };
+}
+
+function getZoomedTimeRange(timeRange: TimeRange, factor: number): TimeRange {
+  const timespan = timeRange.to.valueOf() - timeRange.from.valueOf();
+  const center = timeRange.to.valueOf() - timespan / 2;
+  // If the timepsan is 0, zooming out would do nothing, so we force a zoom out to 30s
+  const newTimespan = timespan === 0 ? 30000 : timespan * factor;
+
+  const to = center + newTimespan / 2;
+  const from = center - newTimespan / 2;
+
+  return { from: toUtc(from), to: toUtc(to), raw: { from: toUtc(from), to: toUtc(to) } };
+}
+
+enum TimeRangeDirection {
+  Backward,
+  Forward,
+}
+
+function getShiftedTimeRange(dir: TimeRangeDirection, timeRange: TimeRange, upperLimit: number): TimeRange {
+  const oldTo = timeRange.to.valueOf();
+  const oldFrom = timeRange.from.valueOf();
+  const halfSpan = (oldTo - oldFrom) / 2;
+
+  let fromRaw: number;
+  let toRaw: number;
+  if (dir === TimeRangeDirection.Backward) {
+    fromRaw = oldFrom - halfSpan;
+    toRaw = oldTo - halfSpan;
+  } else {
+    fromRaw = oldFrom + halfSpan;
+    toRaw = oldTo + halfSpan;
+
+    if (toRaw > upperLimit && oldTo < upperLimit) {
+      toRaw = upperLimit;
+      fromRaw = oldFrom;
+    }
+  }
+
+  const from = toUtc(fromRaw);
+  const to = toUtc(toRaw);
+  return {
+    from,
+    to,
+    raw: { from, to },
+  };
+}
diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.ts b/grafana-plugin/src/models/alertgroup/alertgroup.ts
index ca4c11c5..bc22ed4b 100644
--- a/grafana-plugin/src/models/alertgroup/alertgroup.ts
+++ b/grafana-plugin/src/models/alertgroup/alertgroup.ts
@@ -172,6 +172,7 @@ export class AlertGroupStore {
     this.liveUpdatesPaused = value;
   }
 
+  @WithGlobalNotification({ failure: PROCESSING_REQUEST_ERROR })
   @AutoLoadingState(ActionKey.UPDATE_FILTERS_AND_FETCH_INCIDENTS)
   async updateIncidentFiltersAndRefetchIncidentsAndStats(params: any, keepCursor = false) {
     if (!keepCursor) {
diff --git a/grafana-plugin/src/models/filters/filters.types.ts b/grafana-plugin/src/models/filters/filters.types.ts
index ae7cd852..fcd2edf0 100644
--- a/grafana-plugin/src/models/filters/filters.types.ts
+++ b/grafana-plugin/src/models/filters/filters.types.ts
@@ -1,9 +1,22 @@
+import React from 'react';
+
 import { SelectOption } from 'state/types';
 
 export interface FiltersValues {
   [key: string]: any;
 }
 
+export interface FilterExtraInformationValues {
+  isClearable?: boolean;
+  value?: any;
+  portal?: React.RefObject<any>;
+  showInputLabel?: boolean;
+}
+
+export interface FilterExtraInformation {
+  [key: string]: FilterExtraInformationValues;
+}
+
 export interface FilterOption {
   name: string;
   type: 'search' | 'options' | 'boolean' | 'daterange' | 'team_select';
diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index bcefaf3f..4b873b3c 100644
--- a/grafana-plugin/src/pages/incidents/Incidents.tsx
+++ b/grafana-plugin/src/pages/incidents/Incidents.tsx
@@ -1,14 +1,14 @@
 import React, { SyntheticEvent } from 'react';
 
 import { css, cx } from '@emotion/css';
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, durationToMilliseconds, parseDuration, SelectableValue } from '@grafana/data';
 import { LabelTag } from '@grafana/labels';
 import {
   Button,
   HorizontalGroup,
   Icon,
-  LoadingPlaceholder,
   RadioButtonGroup,
+  RefreshPicker,
   Tooltip,
   VerticalGroup,
   withTheme2,
@@ -79,16 +79,18 @@ interface IncidentsPageState {
   isSelectorColumnMenuOpen: boolean;
   isHorizontalScrolling: boolean;
   isFirstIncidentsFetchDone: boolean;
+  refreshInterval: string;
 }
 
-const POLLING_NUM_SECONDS = 10;
-
 const PAGINATION_OPTIONS = [
   { label: '25', value: 25 },
   { label: '50', value: 50 },
   { label: '100', value: 100 },
 ];
 
+const REFRESH_OPTIONS = ['5s', '10s', '15s', '30s', '1m', '5m'];
+const REFRESH_DEFAULT_VALUE = '10s';
+
 const TABLE_SCROLL_OPTIONS: SelectableValue[] = [
   {
     value: false,
@@ -124,10 +126,12 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
     store.alertGroupStore.incidentsCursor = cursorQuery || undefined;
 
     this.rootElRef = React.createRef<HTMLDivElement>();
+    this.filtersPortalRef = React.createRef<HTMLDivElement>();
 
     this.state = {
       selectedIncidentIds: [],
       showAddAlertGroupForm: false,
+      refreshInterval: REFRESH_DEFAULT_VALUE,
       pagination: {
         start,
         end: start + pageSize,
@@ -138,6 +142,7 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
     };
   }
 
+  private filtersPortalRef: React.RefObject<HTMLDivElement>;
   private rootElRef: React.RefObject<HTMLDivElement>;
   private pollingIntervalId: ReturnType<typeof setInterval> = undefined;
 
@@ -160,25 +165,46 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
 
   render() {
     const { history } = this.props;
-    const { showAddAlertGroupForm } = this.state;
+    const { refreshInterval, showAddAlertGroupForm } = this.state;
 
     const {
       theme,
+      store,
       store: { alertReceiveChannelStore },
     } = this.props;
     const styles = getStyles(theme);
 
+    const isLoading = LoaderHelper.isLoading(store.loaderStore, [
+      ActionKey.FETCH_INCIDENTS,
+      ActionKey.FETCH_INCIDENTS_POLLING,
+      ActionKey.FETCH_INCIDENTS_AND_STATS,
+      ActionKey.INCIDENTS_BULK_UPDATE,
+    ]);
+
     return (
       <>
         <div>
           <div className={styles.title}>
             <HorizontalGroup justify="space-between">
               <Text.Title level={3}>Alert Groups</Text.Title>
-              <WithPermissionControlTooltip userAction={UserActions.AlertGroupsDirectPaging}>
-                <Button icon="plus" onClick={this.handleOnClickEscalateTo}>
-                  Escalation
-                </Button>
-              </WithPermissionControlTooltip>
+
+              <div className={styles.rightSideFilters}>
+                <div ref={this.filtersPortalRef} />
+                <RefreshPicker
+                  onIntervalChanged={this.onIntervalRefreshChange}
+                  onRefresh={this.onRefresh}
+                  intervals={REFRESH_OPTIONS}
+                  value={refreshInterval}
+                  isLoading={isLoading}
+                  isOnCanvas
+                  showAutoInterval={false}
+                />
+                <WithPermissionControlTooltip userAction={UserActions.AlertGroupsDirectPaging}>
+                  <Button icon="plus" onClick={this.handleOnClickEscalateTo}>
+                    Escalation
+                  </Button>
+                </WithPermissionControlTooltip>
+              </div>
             </HorizontalGroup>
           </div>
           {this.renderIncidentFilters()}
@@ -322,32 +348,54 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
           query={query}
           page={PAGE.Incidents}
           onChange={this.handleFiltersChange}
+          extraInformation={{
+            started_at: {
+              isClearable: false,
+              value: 'now-30d_now',
+              portal: this.filtersPortalRef,
+              showInputLabel: false,
+            },
+            team: {
+              value: [],
+            },
+            status: {
+              value: [IncidentStatus.Firing, IncidentStatus.Acknowledged],
+            },
+            mine: {
+              value: false,
+            },
+          }}
           extraFilters={(...args) => {
             return this.renderCards(...args, store, theme);
           }}
           grafanaTeamStore={store.grafanaTeamStore}
-          defaultFilters={{
-            team: [],
-            status: [IncidentStatus.Firing, IncidentStatus.Acknowledged],
-            mine: false,
-            started_at: 'now-30d_now',
-          }}
         />
       </div>
     );
   }
 
+  onRefresh = async () => {
+    this.clearPollingInterval();
+    await this.props.store.alertGroupStore.fetchIncidentsAndStats(true);
+    this.setPollingInterval();
+  };
+
+  onIntervalRefreshChange = (value: string) => {
+    this.clearPollingInterval();
+    this.setState({ refreshInterval: value }, () => value && this.setPollingInterval());
+  };
+
   handleOnClickEscalateTo = () => {
     this.setState({ showAddAlertGroupForm: true });
   };
 
   handleFiltersChange = async (filters: IncidentsFiltersType, isOnMount: boolean) => {
-    const {
-      store: { alertGroupStore },
-    } = this.props;
-
+    const { alertGroupStore } = this.props.store;
     const { start } = this.state.pagination;
 
+    // Clear polling whenever filters change
+    this.clearPollingInterval();
+
     this.setState({
       filters,
       selectedIncidentIds: [],
@@ -357,7 +405,12 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
       this.setPagination(1, alertGroupStore.alertsSearchResult.page_size);
     }
 
-    await this.fetchIncidentData(filters);
+    try {
+      await this.fetchIncidentData(filters);
+    } finally {
+      // Re-enable polling after query is done
+      this.setPollingInterval();
+    }
 
     if (isOnMount) {
       this.setPagination(start, start + alertGroupStore.alertsSearchResult.page_size - 1);
@@ -437,15 +490,8 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
       return null;
     }
 
-    const hasSelected = selectedIncidentIds.length > 0;
-    const isLoading = LoaderHelper.isLoading(store.loaderStore, [
-      ActionKey.FETCH_INCIDENTS,
-      ActionKey.FETCH_INCIDENTS_POLLING,
-      ActionKey.FETCH_INCIDENTS_AND_STATS,
-      ActionKey.INCIDENTS_BULK_UPDATE,
-    ]);
-
     const styles = getStyles(theme);
+    const hasSelected = selectedIncidentIds.length > 0;
     const isBulkUpdate = LoaderHelper.isLoading(store.loaderStore, ActionKey.INCIDENTS_BULK_UPDATE);
 
     return (
@@ -493,7 +539,7 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
                 />
               </WithPermissionControlTooltip>
             )}
-            <Text type="secondary">
+            <Text type="secondary" className={styles.alertsSelected}>
               {hasSelected
                 ? `${selectedIncidentIds.length} Alert Group${selectedIncidentIds.length > 1 ? 's' : ''} selected`
                 : 'No Alert Groups selected'}
@@ -501,10 +547,6 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
           </div>
 
           <div className={styles.fieldsDropdown}>
-            <RenderConditionally shouldRender={isLoading}>
-              <LoadingPlaceholder text="Loading..." className={styles.loadingPlaceholder} />
-            </RenderConditionally>
-
             <RenderConditionally shouldRender={store.hasFeature(AppFeature.Labels)}>
               <RadioButtonGroup
                 options={TABLE_SCROLL_OPTIONS}
@@ -964,6 +1006,12 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
 
   setPollingInterval() {
     const startPolling = () => {
+      if (!this.state.refreshInterval) {
+        return;
+      }
+
+      const pollingNum = durationToMilliseconds(parseDuration(this.state.refreshInterval));
+
       this.pollingIntervalId = setTimeout(async () => {
         const isBrowserWindowInactive = document.hidden;
         const { liveUpdatesPaused } = this.props.store.alertGroupStore;
@@ -984,7 +1032,7 @@ class _IncidentsPage extends React.Component<IncidentsPageProps, IncidentsPageSt
         }
 
         startPolling();
-      }, POLLING_NUM_SECONDS * 1000);
+      }, pollingNum);
     };
 
     startPolling();
@@ -997,6 +1045,15 @@ const getStyles = (theme: GrafanaTheme2) => {
       width: 400px;
     `,
 
+    alertsSelected: css`
+      white-space: nowrap;
+    `,
+
+    rightSideFilters: css`
+      display: flex;
+      gap: 8px;
+    `,
+
     bau: css`
       ${[1, 2, 3].map(
         (num) => `
diff --git a/grafana-plugin/src/types.ts b/grafana-plugin/src/types.ts
index 7bf6c041..576c1cac 100644
--- a/grafana-plugin/src/types.ts
+++ b/grafana-plugin/src/types.ts
@@ -1,4 +1,4 @@
-import { AppRootProps as BaseAppRootProps, AppPluginMeta, CurrentUserDTO, PluginConfigPageProps } from '@grafana/data';
+import { AppRootProps as BaseAppRootProps, AppPluginMeta, PluginConfigPageProps, CurrentUserDTO } from '@grafana/data';
 
 export type OnCallPluginMetaJSONData = {
   stackId: number;