Use generalized PAGE_SIZE constant and utils

- condense PAGE_SIZE usage in ee/threat_monitoring
  to one constant
- utilize existing utils for parsing response headers

ee/app/assets/javascripts/threat_monitoring/components/alerts/alerts_list.vue

@@ -17,18 +17,11 @@ import getAlertsQuery from '~/graphql_shared/queries/get_alerts.query.graphql';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import { joinPaths } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { PAGE_SIZE } from 'ee/threat_monitoring/constants';
 import AlertDrawer from './alert_drawer.vue';
 import AlertFilters from './alert_filters.vue';
 import AlertStatus from './alert_status.vue';
-import {
-  DEFAULT_FILTERS,
-  FIELDS,
-  MESSAGES,
-  PAGE_SIZE,
-  STATUSES,
-  DOMAIN,
-  CLOSED,
-} from './constants';
+import { DEFAULT_FILTERS, FIELDS, MESSAGES, STATUSES, DOMAIN, CLOSED } from './constants';
 
 export default {
   PAGE_SIZE,

ee/app/assets/javascripts/threat_monitoring/components/alerts/constants.js

@@ -62,8 +62,6 @@ export const FIELDS = [
   },
 ];
 
-export const PAGE_SIZE = 20;
-
 export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] };
 
 export const DOMAIN = 'threat_monitoring';

ee/app/assets/javascripts/threat_monitoring/components/instance_project_selector.vue

@@ -2,12 +2,12 @@
 import produce from 'immer';
 import getUsersProjects from '~/graphql_shared/queries/get_users_projects.query.graphql';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
+import { PAGE_SIZE } from 'ee/threat_monitoring/constants';
 
 const defaultPageInfo = { endCursor: '', hasNextPage: false };
 
 export default {
   MINIMUM_QUERY_LENGTH: 3,
-  PROJECTS_PER_PAGE: 20,
   SEARCH_ERROR: 'SEARCH_ERROR',
   QUERY_TOO_SHORT_ERROR: 'QUERY_TOO_SHORT_ERROR',
   NO_RESULTS_ERROR: 'NO_RESULTS_ERROR',
@@ -17,7 +17,7 @@ export default {
       variables() {
         return {
           search: this.searchQuery,
-          first: this.$options.PROJECTS_PER_PAGE,
+          first: PAGE_SIZE,
           searchNamespaces: true,
           sort: 'similarity',
         };

ee/app/assets/javascripts/threat_monitoring/constants.js

@@ -43,3 +43,5 @@ spec:
 ];
 
 export const ALL_ENVIRONMENT_NAME = s__('ThreatMonitoring|All Environments');
+
+export const PAGE_SIZE = 20;

ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/actions.js

 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
+import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
+import { PAGE_SIZE } from 'ee/threat_monitoring/constants';
 import * as types from './mutation_types';
 
 export const setEnvironmentEndpoint = ({ commit }, endpoint) => {
@@ -29,12 +31,12 @@ const getEnvironments = async (url, page = 1) => {
   try {
     const { data, headers } = await axios.get(url, {
       params: {
-        per_page: 20,
+        per_page: PAGE_SIZE,
         page,
       },
     });
 
-    const nextPage = headers && headers['x-next-page'];
+    const { nextPage } = parseIntPagination(normalizeHeaders(headers));
     return { environments: data.environments, nextPage };
   } catch {
     throw new Error();

ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js

@@ -13,7 +13,7 @@ jest.mock('~/flash');
 
 const environmentsEndpoint = 'environmentsEndpoint';
 const networkPolicyStatisticsEndpoint = 'networkPolicyStatisticsEndpoint';
-const nextPage = 'someHash';
+const nextPage = 2;
 
 describe('Threat Monitoring actions', () => {
   let state;