Pagination refactoring/cleanup

CHANGELOG.md

@@ -5,6 +5,14 @@ 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
+
+### Changes
+
+- Removed the hardcoding of page size on frontend ([#3205](https://github.com/grafana/oncall/pull/#3205))
+- Prevent additional polling on Incidents if the previous request didn't complete
+  ([#3205](https://github.com/grafana/oncall/pull/#3205))
+
 ## v1.3.47 (2023-10-25)
 
 ### Fixed

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { SelectableValue, TimeRange } from '@grafana/data';
+import { KeyValue, SelectableValue, TimeRange } from '@grafana/data';
 import {
   InlineSwitch,
   MultiSelect,
@@ -31,16 +31,15 @@ import LocationHelper from 'utils/LocationHelper';
 import { PAGE } from 'utils/consts';
 
 import { parseFilters } from './RemoteFilters.helpers';
-import { FilterOption, RemoteFiltersType } from './RemoteFilters.types';
+import { FilterOption } from './RemoteFilters.types';
 
 import styles from './RemoteFilters.module.css';
 
 const cx = cn.bind(styles);
 
 interface RemoteFiltersProps extends WithStoreProps {
-  value: RemoteFiltersType;
   onChange: (filters: { [key: string]: any }, isOnMount: boolean, invalidateFn: () => boolean) => void;
-  query: { [key: string]: any };
+  query: KeyValue;
   page: PAGE;
   defaultFilters?: FiltersValues;
   extraFilters?: (state, setState, onFiltersValueChange) => React.ReactNode;
@@ -82,11 +81,18 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
   }
 
   async componentDidMount() {
-    const { query, page, store, defaultFilters } = this.props;
-
-    const { filtersStore } = store;
+    const {
+      query,
+      page,
+      store: { filtersStore },
+      defaultFilters,
+    } = this.props;
 
     const filterOptions = await filtersStore.updateOptionsForPage(page);
+    const currentTablePageNum = parseInt(filtersStore.currentTablePageNum[page] || query.p || 1, 10);
+
+    // set the current page from filters/query or default it to 1
+    filtersStore.currentTablePageNum[page] = currentTablePageNum;
 
     let { filters, values } = parseFilters({ ...query, ...filtersStore.globalValues }, filterOptions, query);
 
@@ -422,10 +428,7 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
     }
 
     const currentRequestId = this.getNewRequestId();
-
-    this.setState({
-      lastRequestId: currentRequestId,
-    });
+    this.setState({ lastRequestId: currentRequestId });
 
     LocationHelper.update({ ...values }, 'partial');
     onChange(values, isOnMount, this.invalidateFn.bind(this, currentRequestId));
@@ -443,4 +446,6 @@ class RemoteFilters extends Component<RemoteFiltersProps, RemoteFiltersState> {
   debouncedOnChange = debounce(this.onChange, 500);
 }
 
-export default withMobXProviderContext(RemoteFilters);
+export default withMobXProviderContext(RemoteFilters) as unknown as React.ComponentClass<
+  Omit<RemoteFiltersProps, 'store'>
+>;

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

@@ -28,7 +28,7 @@ export class AlertReceiveChannelStore extends BaseStore {
   searchResult: Array<AlertReceiveChannel['id']>;
 
   @observable.shallow
-  paginatedSearchResult: { count?: number; results?: Array<AlertReceiveChannel['id']> } = {};
+  paginatedSearchResult: { count?: number; results?: Array<AlertReceiveChannel['id']>; page_size?: number } = {};
 
   @observable.shallow
   items: { [id: string]: AlertReceiveChannel } = {};
@@ -81,6 +81,7 @@ export class AlertReceiveChannelStore extends BaseStore {
     }
 
     return {
+      page_size: this.paginatedSearchResult.page_size,
       count: this.paginatedSearchResult.count,
       results:
         this.paginatedSearchResult.results &&
@@ -133,7 +134,7 @@ export class AlertReceiveChannelStore extends BaseStore {
 
   async updatePaginatedItems(query: any = '', page = 1, updateCounters = false, invalidateFn = undefined) {
     const filters = typeof query === 'string' ? { search: query } : query;
-    const { count, results } = await makeRequest(this.path, { params: { ...filters, page } });
+    const { count, results, page_size } = await makeRequest(this.path, { params: { ...filters, page } });
 
     if (invalidateFn?.()) {
       return undefined;
@@ -155,6 +156,7 @@ export class AlertReceiveChannelStore extends BaseStore {
     this.paginatedSearchResult = {
       count,
       results: results.map((item: AlertReceiveChannel) => item.id),
+      page_size,
     };
 
     if (updateCounters) {

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

@@ -44,7 +44,12 @@ export class AlertGroupStore extends BaseStore {
   incidentsItemsPerPage?: number;
 
   @observable
-  alertsSearchResult: any = {};
+  alertsSearchResult: {
+    prev?: string;
+    next?: string;
+    results?: any;
+    page_size?: number;
+  } = {};
 
   @observable
   alerts = new Map<string, Alert>();
@@ -89,29 +94,6 @@ export class AlertGroupStore extends BaseStore {
     }).catch(showApiError);
   }
 
-  @action // FIXME for `attach to` feature ONLY
-  async updateItems(query = '') {
-    const { results } = await makeRequest(`${this.path}`, {
-      params: { search: query, resolved: false, is_root: true },
-    });
-
-    this.items = {
-      ...this.items,
-      ...results.reduce(
-        (acc: { [key: string]: Alert }, item: Alert) => ({
-          ...acc,
-          [item.pk]: item,
-        }),
-        {}
-      ),
-    };
-
-    this.searchResult = {
-      ...this.searchResult,
-      [query]: results.map((item: Alert) => item.pk),
-    };
-  }
-
   async updateItem(id: Alert['pk']) {
     const item = await this.getById(id);
 
@@ -220,12 +202,13 @@ export class AlertGroupStore extends BaseStore {
   // TODO check if methods are dublicating existing ones
   @action
   async updateIncidents() {
-    this.getNewIncidentsStats();
-    this.getAcknowledgedIncidentsStats();
-    this.getResolvedIncidentsStats();
-    this.getSilencedIncidentsStats();
-
-    this.updateAlertGroups();
+    await Promise.all([
+      this.getNewIncidentsStats(),
+      this.getAcknowledgedIncidentsStats(),
+      this.getResolvedIncidentsStats(),
+      this.getSilencedIncidentsStats(),
+      this.updateAlertGroups(),
+    ]);
 
     this.liveUpdatesPaused = false;
   }
@@ -238,7 +221,7 @@ export class AlertGroupStore extends BaseStore {
 
     this.incidentFilters = params;
 
-    this.updateIncidents();
+    await this.updateIncidents();
   }
 
   @action
@@ -271,11 +254,12 @@ export class AlertGroupStore extends BaseStore {
       results,
       next: nextRaw,
       previous: previousRaw,
+      page_size,
     } = await makeRequest(`${this.path}`, {
       params: {
         ...this.incidentFilters,
-        cursor: this.incidentsCursor,
         perpage: this.incidentsItemsPerPage,
+        cursor: this.incidentsCursor,
         is_root: true,
       },
     }).catch(refreshPageError);
@@ -294,21 +278,30 @@ export class AlertGroupStore extends BaseStore {
     // @ts-ignore
     this.alerts = new Map<number, Alert>([...this.alerts, ...newAlerts]);
 
+    this.incidentsItemsPerPage = page_size;
+
     this.alertsSearchResult['default'] = {
       prev: prevCursor,
       next: nextCursor,
       results: results.map((alert: Alert) => alert.pk),
+      page_size,
     };
 
     this.alertGroupsLoading = false;
   }
 
   getAlertSearchResult(query: string) {
-    if (!this.alertsSearchResult[query]) {
-      return undefined;
+    const result = this.alertsSearchResult[query];
+    if (!result) {
+      return {};
     }
 
-    return this.alertsSearchResult[query].results.map((pk: Alert['pk']) => this.alerts.get(pk));
+    return {
+      prev: result.prev,
+      next: result.next,
+      page_size: result.page_size,
+      results: result.results.map((pk: Alert['pk']) => this.alerts.get(pk)),
+    };
   }
 
   @action

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

@@ -17,6 +17,9 @@ export class FiltersStore extends BaseStore {
   @observable.shallow
   public values: { [page: string]: FiltersValues } = {};
 
+  @observable.shallow
+  public currentTablePageNum: { [page: string]: number } = {};
+
   private _globalValues: FiltersValues = {};
 
   @observable

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

@@ -196,6 +196,7 @@ export class ScheduleStore extends BaseStore {
     if (!this.searchResult) {
       return undefined;
     }
+
     return {
       page_size: this.searchResult.page_size,
       count: this.searchResult.count,

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

@@ -17,7 +17,7 @@ import { User } from './user.types';
 
 export class UserStore extends BaseStore {
   @observable.shallow
-  searchResult: { count?: number; results?: Array<User['pk']> } = {};
+  searchResult: { count?: number; results?: Array<User['pk']>; page_size?: number } = {};
 
   @observable.shallow
   items: { [pk: string]: User } = {};
@@ -122,7 +122,7 @@ export class UserStore extends BaseStore {
       return;
     }
 
-    const { count, results } = response;
+    const { count, results, page_size } = response;
 
     this.items = {
       ...this.items,
@@ -140,6 +140,7 @@ export class UserStore extends BaseStore {
 
     this.searchResult = {
       count,
+      page_size,
       results: results.map((item: User) => item.pk),
     };
 
@@ -148,6 +149,7 @@ export class UserStore extends BaseStore {
 
   getSearchResult() {
     return {
+      page_size: this.searchResult.page_size,
       count: this.searchResult.count,
       results: this.searchResult.results && this.searchResult.results.map((userPk: User['pk']) => this.items?.[userPk]),
     };