Tweaks for integrations #2869

teodosii · 2023-08-23T13:51:56Z

What this PR does

This PR adds a few tweaks to the integrations page

prevent calling /counters on the integration page, instead call it with counters/[id]
call to /counters will be done only once when we load all the integrations and prevent calling it again once we switch pages. Prior to this change every page resulted in a call to /counters, and due to the fact the request took on average 3-5s it was being stalled by the browser on subsequent calls.
Call to /connected_contact_points is now conditioned by the integration type
No more page flicking when going back from integration page to the list of integrations
No more page flickering when switching pages in table view if there's more requests ongoing
Prevent discarding filters when going back from Integration view to the table view
Fixed routes not moving up/down
Fixed routes flickering when adding/removing a route

These changes should result in slightly loader times because /counters was time-consuming request, and less UX issues.

Which issue(s) this PR fixes

described at Switching pages on the Integration table doesn't fully change the page #2843 but incompletely

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)

teodosii · 2023-08-23T13:55:03Z

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

+      results: results.map((item: User) => item.pk),
+    };
+
+    return response;


this part is not touched, I only removed the wrapped new Promise (...) and instead returned the response which is a Promise too.

teodosii · 2023-08-23T13:55:50Z

grafana-plugin/src/pages/integration/Integration.tsx

@@ -697,6 +692,17 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
      })
      .finally(() => this.setState({ isLoading: false }));
  }
+
+  async loadContactPointsMaybe(id: AlertReceiveChannel['id']) {
+    const { alertReceiveChannelStore } = this.props.store;


the page will not wait until contact points are loaded, but instead render them when they're available so that we don't slow down the page load.

grafana-plugin/src/pages/integration/Integration.tsx

…lickering

teodosii · 2023-08-29T12:10:08Z

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

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

+  @observable
+  public isLoading = true;


easier to track now if the filters are loading or not

isLoading===true is the same as store.filters.options[page]===undefined

so don't see the reason of having isLoading flag

maskin25 · 2023-08-29T12:43:40Z

grafana-plugin/src/pages/integration/Integration.tsx

@@ -697,6 +705,17 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
      })
      .finally(() => this.setState({ isLoading: false }));
  }
+
+  async loadExtraDataMaybe(id: AlertReceiveChannel['id']) {


just loadExtraData is better

maskin25 · 2023-08-30T08:51:59Z

grafana-plugin/src/state/rootBaseStore/index.ts

@@ -79,6 +80,9 @@ export class RootBaseStore {
  @observable
  incidentsPage: any = this.initialQuery.p ? Number(this.initialQuery.p) : 1;

+  @observable
+  currentPage: { [key: string]: number } = {};


we can use src/pages/index.tsx -> getMatchedPage to get current page

this gets you the page number, not the page string

maskin25 · 2023-08-30T08:55:35Z

grafana-plugin/src/pages/integrations/Integrations.tsx

+    return alertReceiveChannelStore
+      .updatePaginatedItems(integrationsFilters, newPage, false, () => this.invalidateRequestFn(newPage))
+      .then(() => {
+        store.setCurrentPage(PAGE.Integrations, newPage);


did not get why do we need store.setCurrentPage... to navigate we use history.push(${PLUGIN_ROOT}/fooor react router links, to get current page we can usegetMatchedPage`

store.setCurrentPage is not for navigation, is for updating the store to know which was the last page we hit (the page num, not the page string)

# What this PR does This PR adds a few tweaks to the integrations page - prevent calling `/counters` on the integration page, instead call it with `counters/[id]` - call to `/counters` will be done only once when we load all the integrations and prevent calling it again once we switch pages. Prior to this change every page resulted in a call to `/counters`, and due to the fact the request took on average `3-5s` it was being stalled by the browser on subsequent calls. - Call to `/connected_contact_points` is now conditioned by the integration type - No more page flicking when going back from integration page to the list of integrations - No more page flickering when switching pages in table view if there's more requests ongoing - Prevent discarding filters when going back from Integration view to the table view - Fixed routes not moving up/down - Fixed routes flickering when adding/removing a route These changes should result in slightly loader times because `/counters` was time-consuming request, and less UX issues. ## Which issue(s) this PR fixes - described at #2843 but incompletely ## 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)

teodosii added 5 commits August 22, 2023 17:29

first changes to fix integrations navigation

45e7f2c

tweaks & optimizations

a8df7b6

Merge branch 'dev' into rares/2843

6c3ead7

fix

1ab9996

fix for reapplying the filters

5ec0607

teodosii requested a review from a team August 23, 2023 13:51

teodosii added the pr:no public docs Added to a PR that does not require public documentation updates label Aug 23, 2023

changelog

0445b65

teodosii commented Aug 23, 2023

View reviewed changes

teodosii added 3 commits August 23, 2023 16:56

Merge branch 'dev' into rares/2843

76773a1

Merge branch 'dev' into rares/2843

b8494fe

Merge branch 'dev' into rares/2843

5ac0ab9

maskin25 reviewed Aug 28, 2023

View reviewed changes

grafana-plugin/src/pages/integration/Integration.tsx Outdated Show resolved Hide resolved

maskin25 reviewed Aug 28, 2023

View reviewed changes

grafana-plugin/src/pages/integration/Integration.tsx Outdated Show resolved Hide resolved

maskin25 approved these changes Aug 28, 2023

View reviewed changes

teodosii added 13 commits August 28, 2023 15:15

fixed table filters update

6f1b6cd

param typing

d4b0199

Merge branch 'dev' into rares/2843

1ce7014

review

2299146

fix passed page param in table + build fix

988687a

fixed Integrations page losing its filters, fixed initial page load f…

40d4fc6

…lickering

removed maintenance page, updated changelog

1a9278c

maintenance breadcrumb removal

8f40236

fixed mobx not updating the routes tree component

619fa4a

Merge branch 'dev' into rares/2843

cae77f2

changelog

055a4f6

build fix

f99987b

fixed routes not moving up/down

58f0a23

teodosii commented Aug 29, 2023

View reviewed changes

maskin25 reviewed Aug 29, 2023

View reviewed changes

maskin25 approved these changes Aug 29, 2023

View reviewed changes

teodosii added 4 commits August 30, 2023 11:02

few other tweaks

2ae899b

Merge branch 'dev' into rares/2843

12cf219

fixed didInvalidateFn for async calls

e3c095c

lint

8bc5afd

maskin25 reviewed Aug 30, 2023

View reviewed changes

teodosii added 3 commits August 30, 2023 12:01

@action on mobx action

52cbbe0

corrected changelog

9d2244d

removed maintenance from plugin.json

b8f2b72

teodosii added this pull request to the merge queue Aug 30, 2023

Merged via the queue into dev with commit 26dee30 Aug 30, 2023

teodosii deleted the rares/2843 branch August 30, 2023 11:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tweaks for integrations #2869

Tweaks for integrations #2869

teodosii commented Aug 23, 2023 •

edited

Loading

teodosii Aug 23, 2023

teodosii Aug 23, 2023

teodosii Aug 29, 2023

maskin25 Aug 29, 2023

maskin25 Aug 29, 2023

maskin25 Aug 29, 2023

maskin25 Aug 30, 2023

teodosii Aug 30, 2023

maskin25 Aug 30, 2023 •

edited

Loading

teodosii Aug 30, 2023

Tweaks for integrations #2869

Tweaks for integrations #2869

Conversation

teodosii commented Aug 23, 2023 • edited Loading

What this PR does

Which issue(s) this PR fixes

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maskin25 Aug 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

teodosii commented Aug 23, 2023 •

edited

Loading

maskin25 Aug 30, 2023 •

edited

Loading