diff --git a/CHANGELOG.md b/CHANGELOG.md index 57f844352c..b38818f988 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Simplify Direct Paging workflow. Now when using Direct Paging you either simply specify a team, or one or more users to page by @joeyorlando ([#3128](https://github.com/grafana/oncall/pull/3128)) - Enable timing options for mobile push notifications, allow multi-select by @Ferril ([#3187](https://github.com/grafana/oncall/pull/3187)) +- 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)) ### Fixed diff --git a/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx b/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx index bd86eebc83..bfcdc2eb03 100644 --- a/grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx +++ b/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 { } 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.setCurrentTablePageNum(page, currentTablePageNum); let { filters, values } = parseFilters({ ...query, ...filtersStore.globalValues }, filterOptions, query); @@ -422,10 +428,7 @@ class RemoteFilters extends Component { } 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 { debouncedOnChange = debounce(this.onChange, 500); } -export default withMobXProviderContext(RemoteFilters); +export default withMobXProviderContext(RemoteFilters) as unknown as React.ComponentClass< + Omit +>; diff --git a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts b/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts index 2978c5b0bf..67afa9e6f0 100644 --- a/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts +++ b/grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts @@ -28,7 +28,7 @@ export class AlertReceiveChannelStore extends BaseStore { searchResult: Array; @observable.shallow - paginatedSearchResult: { count?: number; results?: Array } = {}; + paginatedSearchResult: { count?: number; results?: Array; 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) { diff --git a/grafana-plugin/src/models/alertgroup/alertgroup.ts b/grafana-plugin/src/models/alertgroup/alertgroup.ts index f0068af1ae..72a645d334 100644 --- a/grafana-plugin/src/models/alertgroup/alertgroup.ts +++ b/grafana-plugin/src/models/alertgroup/alertgroup.ts @@ -41,10 +41,14 @@ export class AlertGroupStore extends BaseStore { incidentsCursor?: string; @observable - incidentsItemsPerPage?: number; - - @observable - alertsSearchResult: any = {}; + alertsSearchResult: { + [key: string]: { + prev?: string; + next?: string; + results?: string[]; + page_size?: number; + }; + } = {}; @observable alerts = new Map(); @@ -89,29 +93,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 +201,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 +220,7 @@ export class AlertGroupStore extends BaseStore { this.incidentFilters = params; - this.updateIncidents(); + await this.updateIncidents(); } @action @@ -256,9 +238,8 @@ export class AlertGroupStore extends BaseStore { } @action - async setIncidentsItemsPerPage(value: number) { + async setIncidentsItemsPerPage() { this.setIncidentsCursor(undefined); - this.incidentsItemsPerPage = value; this.updateAlertGroups(); } @@ -271,11 +252,12 @@ export class AlertGroupStore extends BaseStore { results, next: nextRaw, previous: previousRaw, + page_size, } = await makeRequest(`${this.path}`, { params: { ...this.incidentFilters, + perpage: this.alertsSearchResult?.['default']?.page_size, cursor: this.incidentsCursor, - perpage: this.incidentsItemsPerPage, is_root: true, }, }).catch(refreshPageError); @@ -298,17 +280,24 @@ export class AlertGroupStore extends BaseStore { 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 diff --git a/grafana-plugin/src/models/filters/filters.ts b/grafana-plugin/src/models/filters/filters.ts index d3acff0091..472dd72776 100644 --- a/grafana-plugin/src/models/filters/filters.ts +++ b/grafana-plugin/src/models/filters/filters.ts @@ -3,6 +3,7 @@ import { action, observable } from 'mobx'; import BaseStore from 'models/base_store'; import { makeRequest } from 'network'; import { RootStore } from 'state'; +import { PAGE } from 'utils/consts'; import { getItem, setItem } from 'utils/localStorage'; import { getApiPathByPage } from './filters.helpers'; @@ -17,6 +18,9 @@ export class FiltersStore extends BaseStore { @observable.shallow public values: { [page: string]: FiltersValues } = {}; + @observable.shallow + public currentTablePageNum: { [page: string]: number } = {}; + private _globalValues: FiltersValues = {}; @observable @@ -65,4 +69,9 @@ export class FiltersStore extends BaseStore { [page]: value, }; } + + @action + setCurrentTablePageNum(page: PAGE, currentTablePageNum: number) { + this.currentTablePageNum[page] = currentTablePageNum; + } } diff --git a/grafana-plugin/src/models/user/user.ts b/grafana-plugin/src/models/user/user.ts index dd92f53836..1fd01a0307 100644 --- a/grafana-plugin/src/models/user/user.ts +++ b/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 } = {}; + searchResult: { count?: number; results?: Array; 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]), }; diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index 0b55431566..8dc34b7dca 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -1,8 +1,7 @@ -import React, { ReactElement, SyntheticEvent } from 'react'; +import React, { SyntheticEvent } from 'react'; -import { Button, HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; +import { Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; import cn from 'classnames/bind'; -import { get } from 'lodash-es'; import { observer } from 'mobx-react'; import moment from 'moment-timezone'; import Emoji from 'react-emoji-render'; @@ -40,19 +39,6 @@ interface Pagination { start: number; end: number; } - -function withSkeleton(fn: (alert: AlertType) => ReactElement | ReactElement[]) { - const WithSkeleton = (alert: AlertType) => { - if (alert.short) { - return ; - } - - return fn(alert); - }; - - return WithSkeleton; -} - interface IncidentsPageProps extends WithStoreProps, PageProps, RouteComponentProps {} interface IncidentsPageState { @@ -63,9 +49,14 @@ interface IncidentsPageState { showAddAlertGroupForm: boolean; } -const ITEMS_PER_PAGE = 25; const POLLING_NUM_SECONDS = 15; +const PAGINATION_OPTIONS = [ + { label: '25', value: 25 }, + { label: '50', value: 50 }, + { label: '100', value: 100 }, +]; + @observer class Incidents extends React.Component { constructor(props: IncidentsPageProps) { @@ -76,12 +67,10 @@ class Incidents extends React.Component query: { cursor: cursorQuery, start: startQuery, perpage: perpageQuery }, } = props; - const cursor = cursorQuery || undefined; const start = !isNaN(startQuery) ? Number(startQuery) : 1; - const itemsPerPage = !isNaN(perpageQuery) ? Number(perpageQuery) : ITEMS_PER_PAGE; + const pageSize = !isNaN(perpageQuery) ? Number(perpageQuery) : undefined; - store.alertGroupStore.incidentsCursor = cursor; - store.alertGroupStore.incidentsItemsPerPage = itemsPerPage; + store.alertGroupStore.incidentsCursor = cursorQuery || undefined; this.state = { selectedIncidentIds: [], @@ -89,16 +78,20 @@ class Incidents extends React.Component showAddAlertGroupForm: false, pagination: { start, - end: start + itemsPerPage - 1, + end: start + pageSize, }, }; - - store.alertGroupStore.updateBulkActions(); - store.alertGroupStore.updateSilenceOptions(); } private pollingIntervalId: NodeJS.Timer = undefined; + componentDidMount() { + const { alertGroupStore } = this.props.store; + + alertGroupStore.updateBulkActions(); + alertGroupStore.updateSilenceOptions(); + } + componentWillUnmount(): void { this.clearPollingInterval(); } @@ -279,8 +272,12 @@ class Incidents extends React.Component this.setState({ showAddAlertGroupForm: true }); }; - handleFiltersChange = (filters: IncidentsFiltersType, isOnMount: boolean) => { - const { store } = this.props; + handleFiltersChange = async (filters: IncidentsFiltersType, isOnMount: boolean) => { + const { + store: { alertGroupStore }, + } = this.props; + + const { start } = this.state.pagination; this.setState({ filters, @@ -288,45 +285,50 @@ class Incidents extends React.Component }); if (!isOnMount) { - this.setState({ - pagination: { - start: 1, - end: store.alertGroupStore.incidentsItemsPerPage, - }, - }); + this.setPagination(1, alertGroupStore.alertsSearchResult['default'].page_size); } this.clearPollingInterval(); this.setPollingInterval(filters, isOnMount); - this.fetchIncidentData(filters, isOnMount); + + await this.fetchIncidentData(filters, isOnMount); + + if (isOnMount) { + this.setPagination(start, start + alertGroupStore.alertsSearchResult['default'].page_size - 1); + } + }; + + setPagination = (start = this.state.pagination?.start, end = this.state.pagination?.end) => { + this.setState({ + pagination: { + start, + end, + }, + }); }; - fetchIncidentData = (filters: IncidentsFiltersType, isOnMount: boolean) => { + fetchIncidentData = async (filters: IncidentsFiltersType, isOnMount: boolean) => { const { store } = this.props; - store.alertGroupStore.updateIncidentFilters(filters, isOnMount); // this line fetches incidents + await store.alertGroupStore.updateIncidentFilters(filters, isOnMount); // this line fetches the incidents LocationHelper.update({ ...store.alertGroupStore.incidentFilters }, 'partial'); }; onChangeCursor = (cursor: string, direction: 'prev' | 'next') => { - const { store } = this.props; + const { alertGroupStore } = this.props.store; + const pageSize = alertGroupStore.alertsSearchResult['default'].page_size; - store.alertGroupStore.updateIncidentsCursor(cursor); + alertGroupStore.updateIncidentsCursor(cursor); this.setState( { selectedIncidentIds: [], pagination: { - start: - this.state.pagination.start + store.alertGroupStore.incidentsItemsPerPage * (direction === 'prev' ? -1 : 1), - end: - this.state.pagination.end + store.alertGroupStore.incidentsItemsPerPage * (direction === 'prev' ? -1 : 1), + start: this.state.pagination.start + pageSize * (direction === 'prev' ? -1 : 1), + end: this.state.pagination.end + pageSize * (direction === 'prev' ? -1 : 1), }, }, () => { - LocationHelper.update( - { start: this.state.pagination.start, perpage: store.alertGroupStore.incidentsItemsPerPage }, - 'partial' - ); + LocationHelper.update({ start: this.state.pagination.start, perpage: pageSize }, 'partial'); } ); }; @@ -334,15 +336,22 @@ class Incidents extends React.Component handleChangeItemsPerPage = (value: number) => { const { store } = this.props; - store.alertGroupStore.setIncidentsItemsPerPage(value); + store.alertGroupStore.alertsSearchResult['default'] = { + ...store.alertGroupStore.alertsSearchResult['default'], + page_size: value, + }; + + store.alertGroupStore.setIncidentsItemsPerPage(); this.setState({ selectedIncidentIds: [], pagination: { start: 1, - end: store.alertGroupStore.incidentsItemsPerPage, + end: value, }, }); + + LocationHelper.update({ start: 1, perpage: value }, 'partial'); }; renderBulkActions = () => { @@ -353,7 +362,7 @@ class Incidents extends React.Component return null; } - const results = store.alertGroupStore.getAlertSearchResult('default'); + const { results } = store.alertGroupStore.getAlertSearchResult('default'); const hasSelected = selectedIncidentIds.length > 0; const hasInvalidatedAlert = Boolean( @@ -431,14 +440,9 @@ class Incidents extends React.Component renderTable() { const { selectedIncidentIds, pagination } = this.state; - const { - store, - store: { alertGroupStore, filtersStore }, - } = this.props; + const { alertGroupStore, filtersStore } = this.props.store; - const results = alertGroupStore.getAlertSearchResult('default'); - const prev = get(alertGroupStore.alertsSearchResult, `default.prev`); - const next = get(alertGroupStore.alertsSearchResult, `default.next`); + const { results, prev, next } = alertGroupStore.getAlertSearchResult('default'); const isLoading = alertGroupStore.alertGroupsLoading || filtersStore.options['incidents'] === undefined; if (results && !results.length) { @@ -462,57 +466,6 @@ class Incidents extends React.Component ); } - const columns = [ - { - width: '140px', - title: 'Status', - key: 'time', - render: withSkeleton(this.renderStatus), - }, - { - width: '10%', - title: 'ID', - key: 'id', - render: withSkeleton(this.renderId), - }, - { - width: '35%', - title: 'Title', - key: 'title', - render: withSkeleton(this.renderTitle), - }, - { - width: '5%', - title: 'Alerts', - key: 'alerts', - render: withSkeleton(this.renderAlertsCounter), - }, - { - width: '15%', - title: 'Integration', - key: 'source', - render: withSkeleton(this.renderSource), - }, - { - width: '10%', - title: 'Created', - key: 'created', - render: withSkeleton(this.renderStartedAt), - }, - { - width: '10%', - title: 'Team', - key: 'team', - render: withSkeleton((item: AlertType) => this.renderTeam(item, store.grafanaTeamStore.items)), - }, - { - width: '15%', - title: 'Users', - key: 'users', - render: withSkeleton(renderRelatedUsers), - }, - ]; - return (
{this.renderBulkActions()} @@ -526,33 +479,25 @@ class Incidents extends React.Component }} rowKey="pk" data={results} - columns={columns} + columns={this.getTableColumns()} /> -
- -
+ {this.shouldShowPagination() && ( +
+ +
+ )}
); } - handleSelectedIncidentIdsChange = (ids: Array) => { - this.setState({ selectedIncidentIds: ids }, () => { - ids.length > 0 ? this.clearPollingInterval() : this.setPollingInterval(); - }); - }; - renderId(record: AlertType) { return ( @@ -565,11 +510,8 @@ class Incidents extends React.Component renderTitle = (record: AlertType) => { const { store, query } = this.props; - const { - pagination: { start }, - } = this.state; - - const { incidentsItemsPerPage, incidentsCursor } = store.alertGroupStore; + const { start } = this.state.pagination || {}; + const { incidentsCursor } = store.alertGroupStore; return (
@@ -580,7 +522,7 @@ class Incidents extends React.Component page: 'alert-groups', id: record.pk, cursor: incidentsCursor, - perpage: incidentsItemsPerPage, + perpage: store.alertGroupStore.alertsSearchResult?.['default']?.page_size, start, ...query, }} @@ -649,6 +591,77 @@ class Incidents extends React.Component ); } + shouldShowPagination() { + const { alertGroupStore } = this.props.store; + + return Boolean( + this.state.pagination?.start && + this.state.pagination?.end && + alertGroupStore.alertsSearchResult?.['default']?.page_size + ); + } + + handleSelectedIncidentIdsChange = (ids: Array) => { + this.setState({ selectedIncidentIds: ids }, () => { + ids.length > 0 ? this.clearPollingInterval() : this.setPollingInterval(); + }); + }; + + getTableColumns(): Array<{ width: string; title: string; key: string; render }> { + const { store } = this.props; + + return [ + { + width: '140px', + title: 'Status', + key: 'time', + render: this.renderStatus, + }, + { + width: '10%', + title: 'ID', + key: 'id', + render: this.renderId, + }, + { + width: '35%', + title: 'Title', + key: 'title', + render: this.renderTitle, + }, + { + width: '5%', + title: 'Alerts', + key: 'alerts', + render: this.renderAlertsCounter, + }, + { + width: '15%', + title: 'Integration', + key: 'source', + render: this.renderSource, + }, + { + width: '10%', + title: 'Created', + key: 'created', + render: this.renderStartedAt, + }, + { + width: '10%', + title: 'Team', + key: 'team', + render: (item: AlertType) => this.renderTeam(item, store.grafanaTeamStore.items), + }, + { + width: '15%', + title: 'Users', + key: 'users', + render: renderRelatedUsers, + }, + ]; + } + getOnActionButtonClick = (incidentId: string, action: AlertAction): ((e: SyntheticEvent) => Promise) => { const { store } = this.props; @@ -719,13 +732,28 @@ class Incidents extends React.Component clearPollingInterval() { clearInterval(this.pollingIntervalId); - this.pollingIntervalId = undefined; + this.pollingIntervalId = null; } setPollingInterval(filters: IncidentsFiltersType = this.state.filters, isOnMount = false) { - this.pollingIntervalId = setInterval(() => { - this.fetchIncidentData(filters, isOnMount); - }, POLLING_NUM_SECONDS * 1000); + const startPolling = (delayed = false) => { + this.pollingIntervalId = setTimeout( + async () => { + const isBrowserWindowInactive = document.hidden; + if (!isBrowserWindowInactive) { + await this.fetchIncidentData(filters, isOnMount); + } + + if (this.pollingIntervalId === null) { + return; + } + startPolling(isBrowserWindowInactive); + }, + delayed ? 60 * 1000 : POLLING_NUM_SECONDS * 1000 + ); + }; + + startPolling(); } } diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx index f3882f25b1..64730ffa33 100644 --- a/grafana-plugin/src/pages/integrations/Integrations.tsx +++ b/grafana-plugin/src/pages/integrations/Integrations.tsx @@ -42,7 +42,6 @@ import styles from './Integrations.module.scss'; const cx = cn.bind(styles); const FILTERS_DEBOUNCE_MS = 500; -const ITEMS_PER_PAGE = 15; interface IntegrationsState extends PageBaseState { integrationsFilters: Record; @@ -66,15 +65,11 @@ class Integrations extends React.Component constructor(props: IntegrationsProps) { super(props); - const { query, store } = props; - this.state = { integrationsFilters: { searchTerm: '' }, errorData: initErrorDataState(), confirmationModal: undefined, }; - - store.currentPage['integrations'] = Number(store.currentPage['integrations'] || query.p || 1); } async componentDidMount() { @@ -121,7 +116,7 @@ class Integrations extends React.Component update = () => { const { store } = this.props; const { integrationsFilters } = this.state; - const page = store.currentPage['integrations']; + const page = store.filtersStore.currentTablePageNum[PAGE.Integrations]; LocationHelper.update({ p: page }, 'partial'); @@ -135,7 +130,7 @@ class Integrations extends React.Component const { alertReceiveChannelId, confirmationModal } = this.state; const { alertReceiveChannelStore } = store; - const { count, results } = alertReceiveChannelStore.getPaginatedSearchResult(); + const { count, results, page_size } = alertReceiveChannelStore.getPaginatedSearchResult(); return ( <> @@ -178,8 +173,8 @@ class Integrations extends React.Component className={cx('integrations-table')} rowClassName={cx('integrations-table-row')} pagination={{ - page: store.currentPage['integrations'], - total: Math.ceil((count || 0) / ITEMS_PER_PAGE), + page: store.filtersStore.currentTablePageNum[PAGE.Integrations], + total: results ? Math.ceil((count || 0) / page_size) : 0, onChange: this.handleChangePage, }} /> @@ -520,13 +515,13 @@ class Integrations extends React.Component invalidateRequestFn = (requestedPage: number) => { const { store } = this.props; - return requestedPage !== store.getCurrentPage(PAGE.Integrations); + return requestedPage !== store.filtersStore.currentTablePageNum[PAGE.Integrations]; }; handleChangePage = (page: number) => { const { store } = this.props; - store.currentPage['integrations'] = page; + store.filtersStore.currentTablePageNum[PAGE.Integrations] = page; this.update(); }; @@ -578,12 +573,12 @@ class Integrations extends React.Component const { alertReceiveChannelStore } = store; const { integrationsFilters } = this.state; - const newPage = isOnMount ? store.getCurrentPage(PAGE.Integrations) : 1; + const newPage = isOnMount ? store.filtersStore.currentTablePageNum[PAGE.Integrations] : 1; return alertReceiveChannelStore .updatePaginatedItems(integrationsFilters, newPage, false, () => this.invalidateRequestFn(newPage)) .then(() => { - store.setCurrentPage(PAGE.Integrations, newPage); + store.filtersStore.currentTablePageNum[PAGE.Integrations] = newPage; LocationHelper.update({ p: newPage }, 'partial'); }); }; diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 99f2c1d3b2..825a423287 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -234,7 +234,7 @@ class OutgoingWebhooks extends React.Component { + handleFiltersChange = (filters: FiltersValues, isOnMount: boolean) => { const { store } = this.props; const { outgoingWebhookStore } = store; diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx index e6c5d52bff..83910d4520 100644 --- a/grafana-plugin/src/pages/schedules/Schedules.tsx +++ b/grafana-plugin/src/pages/schedules/Schedules.tsx @@ -37,7 +37,6 @@ import { PAGE, PLUGIN_ROOT, TEXT_ELLIPSIS_CLASS } from 'utils/consts'; import styles from './Schedules.module.css'; const cx = cn.bind(styles); -const PAGE_SIZE_DEFAULT = 15; interface SchedulesPageProps extends WithStoreProps, RouteComponentProps, PageProps {} @@ -47,7 +46,6 @@ interface SchedulesPageState { showNewScheduleSelector: boolean; expandedRowKeys: Array; scheduleIdToEdit?: Schedule['id']; - page: number; } @observer @@ -63,7 +61,6 @@ class SchedulesPage extends React.Component boolean) => { - this.handleSchedulesFiltersChange(filters, isOnMount, invalidateFn); - }} + onChange={this.handleSchedulesFiltersChange} />
@@ -130,7 +126,7 @@ class SchedulesPage extends React.Component boolean) => { - this.setState({ filters, page: isOnMount ? this.state.page : 1 }, () => { + handleSchedulesFiltersChange = (filters: RemoteFiltersType, _isOnMount: boolean, invalidateFn: () => boolean) => { + this.setState({ filters }, () => { this.applyFilters(invalidateFn); }); }; applyFilters = (invalidateFn?: () => boolean) => { - const { scheduleStore } = this.props.store; - const { page, filters } = this.state; + const { scheduleStore, filtersStore } = this.props.store; + const { filters } = this.state; + const currentTablePage = filtersStore.currentTablePageNum[PAGE.Schedules]; - LocationHelper.update({ p: page }, 'partial'); - scheduleStore.updateItems(filters, page, invalidateFn); + LocationHelper.update({ p: currentTablePage }, 'partial'); + scheduleStore.updateItems(filters, currentTablePage, invalidateFn); }; handlePageChange = (page: number) => { - this.setState({ page, expandedRowKeys: [] }, this.applyFilters); + const { store } = this.props; + store.filtersStore.currentTablePageNum[PAGE.Schedules] = page; + + this.setState({ expandedRowKeys: [] }, this.applyFilters); }; update = () => { const { store } = this.props; - const { page, startMoment } = this.state; + const { startMoment } = this.state; + const page = store.filtersStore.currentTablePageNum[PAGE.Schedules]; store.scheduleStore.updatePersonalEvents(store.userStore.currentUserPk, startMoment, 9, true); diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx index a4f0e87edf..24bf1278ad 100644 --- a/grafana-plugin/src/pages/users/Users.tsx +++ b/grafana-plugin/src/pages/users/Users.tsx @@ -25,7 +25,7 @@ import { PageProps, WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; import LocationHelper from 'utils/LocationHelper'; import { generateMissingPermissionMessage, isUserActionAllowed, UserActions } from 'utils/authorization'; -import { PLUGIN_ROOT } from 'utils/consts'; +import { PAGE, PLUGIN_ROOT } from 'utils/consts'; import { getUserRowClassNameFn } from './Users.helpers'; @@ -35,11 +35,9 @@ const cx = cn.bind(styles); interface UsersProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {} -const ITEMS_PER_PAGE = 100; const REQUIRED_PERMISSION_TO_VIEW_USERS = UserActions.UserSettingsWrite; interface UsersState extends PageBaseState { - page: number; isWrongTeam: boolean; userPkToEdit?: UserType['pk'] | 'new'; usersFilters?: { @@ -54,10 +52,10 @@ class Users extends React.Component { const { query: { p }, + store: { filtersStore }, } = props; this.state = { - page: p ? Number(p) : 1, isWrongTeam: false, userPkToEdit: undefined, usersFilters: { @@ -66,6 +64,10 @@ class Users extends React.Component { errorData: initErrorDataState(), }; + + // Users component doesn't rely on RemoteFilters + // therefore we need to initialize the page in the constructor instead + filtersStore.currentTablePageNum[PAGE.Users] = p ? Number(p) : 1; } async componentDidMount() { @@ -74,8 +76,9 @@ class Users extends React.Component { updateUsers = async (invalidateFn?: () => boolean) => { const { store } = this.props; - const { usersFilters, page } = this.state; - const { userStore } = store; + const { usersFilters } = this.state; + const { userStore, filtersStore } = store; + const page = filtersStore.currentTablePageNum[PAGE.Users]; if (!isUserActionAllowed(REQUIRED_PERMISSION_TO_VIEW_USERS)) { return; @@ -84,7 +87,6 @@ class Users extends React.Component { LocationHelper.update({ p: page }, 'partial'); await userStore.updateItems(usersFilters, page, invalidateFn); - // otherwise MobX doesn't update :( this.forceUpdate(); }; @@ -171,12 +173,14 @@ class Users extends React.Component { renderContentIfAuthorized(authorizedToViewUsers: boolean) { const { - store: { userStore }, + store: { userStore, filtersStore }, } = this.props; - const { usersFilters, page, userPkToEdit } = this.state; + const { usersFilters, userPkToEdit } = this.state; + + const page = filtersStore.currentTablePageNum[PAGE.Users]; - const { count, results } = userStore.getSearchResult(); + const { count, results, page_size } = userStore.getSearchResult(); const columns = this.getTableColumns(); const handleClear = () => @@ -209,7 +213,7 @@ class Users extends React.Component { rowClassName={getUserRowClassNameFn(userPkToEdit, userStore.currentUserPk)} pagination={{ page, - total: Math.ceil((count || 0) / ITEMS_PER_PAGE), + total: results ? Math.ceil((count || 0) / page_size) : 0, onChange: this.handleChangePage, }} /> @@ -417,11 +421,19 @@ class Users extends React.Component { } handleChangePage = (page: number) => { - this.setState({ page }, this.updateUsers); + const { filtersStore } = this.props.store; + + filtersStore.currentTablePageNum[PAGE.Users] = page; + + this.updateUsers(); }; handleUsersFiltersChange = (usersFilters: any, invalidateFn: () => boolean) => { - this.setState({ usersFilters, page: 1 }, () => { + const { filtersStore } = this.props.store; + + filtersStore.currentTablePageNum[PAGE.Users] = 1; + + this.setState({ usersFilters }, () => { this.updateUsers(invalidateFn); }); }; diff --git a/grafana-plugin/src/state/rootBaseStore/index.ts b/grafana-plugin/src/state/rootBaseStore/index.ts index c1638da9d9..6a771e2561 100644 --- a/grafana-plugin/src/state/rootBaseStore/index.ts +++ b/grafana-plugin/src/state/rootBaseStore/index.ts @@ -37,7 +37,6 @@ import { CLOUD_VERSION_REGEX, GRAFANA_LICENSE_CLOUD, GRAFANA_LICENSE_OSS, - PAGE, PLUGIN_ROOT, } from 'utils/consts'; import FaroHelper from 'utils/faro'; @@ -80,9 +79,6 @@ export class RootBaseStore { @observable incidentsPage: any = this.initialQuery.p ? Number(this.initialQuery.p) : 1; - @observable - currentPage: { [key: string]: number } = {}; - @observable onCallApiUrl: string; @@ -312,13 +308,4 @@ export class RootBaseStore { const settings = await PluginState.getGrafanaPluginSettings(); return settings.jsonData?.onCallApiUrl; } - - getCurrentPage = (page: PAGE): number => { - return this.currentPage[page]; - }; - - @action - setCurrentPage = (page: PAGE, value: number) => { - this.currentPage[page] = value; - }; } diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts index b045079c2b..6195082dac 100644 --- a/grafana-plugin/src/utils/consts.ts +++ b/grafana-plugin/src/utils/consts.ts @@ -50,6 +50,7 @@ export enum PAGE { Incidents = 'incidents', Webhooks = 'webhooks', Schedules = 'schedules', + Users = 'users', } export const TEXT_ELLIPSIS_CLASS = 'overflow-child';