Update Threat Monitoring page

This commit updates Threat Monitoring pages as follows:

- Update tabs order
- Renamed Overview to Statistics
- Made fetch request local to prevent unnecessary requests on other
  pages

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

@@ -161,7 +161,13 @@ export default {
     </header>
 
     <gl-tabs>
-      <gl-tab :title="s__('ThreatMonitoring|Overview')">
+      <gl-tab ref="networkPolicyTab" :title="s__('ThreatMonitoring|Policies')">
+        <network-policy-list
+          :documentation-path="documentationPath"
+          :new-policy-path="newPolicyPath"
+        />
+      </gl-tab>
+      <gl-tab :title="s__('ThreatMonitoring|Statistics')">
         <threat-monitoring-filters />
 
         <threat-monitoring-section
@@ -196,12 +202,6 @@ export default {
           documentation-anchor="container-network-policy"
         />
       </gl-tab>
-      <gl-tab ref="networkPolicyTab" :title="s__('ThreatMonitoring|Policies')">
-        <network-policy-list
-          :documentation-path="documentationPath"
-          :new-policy-path="newPolicyPath"
-        />
-      </gl-tab>
     </gl-tabs>
   </section>
 </template>

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

@@ -91,8 +91,16 @@ export default {
         : '';
     },
   },
+  watch: {
+    currentEnvironmentId(envId) {
+      this.fetchPolicies(envId);
+    },
+  },
+  created() {
+    this.fetchPolicies(this.currentEnvironmentId);
+  },
   methods: {
-    ...mapActions('networkPolicies', ['createPolicy', 'updatePolicy']),
+    ...mapActions('networkPolicies', ['fetchPolicies', 'createPolicy', 'updatePolicy']),
     getTimeAgoString(creationTimestamp) {
       if (!creationTimestamp) return '';
       return getTimeago().format(creationTimestamp);

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

 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
 import { setUrlFragment } from '~/lib/utils/url_utility';
 import LoadingSkeleton from './loading_skeleton.vue';
@@ -60,6 +60,7 @@ export default {
     },
   },
   computed: {
+    ...mapState('threatMonitoring', ['currentEnvironmentId', 'currentTimeWindow']),
     ...mapState({
       isLoading(state) {
         return state[this.storeNamespace].isLoadingStatistics;
@@ -96,6 +97,24 @@ export default {
       return setUrlFragment(this.documentationPath, this.documentationAnchor);
     },
   },
+  watch: {
+    currentEnvironmentId() {
+      this.fetchStatistics();
+    },
+    currentTimeWindow() {
+      this.fetchStatistics();
+    },
+  },
+  created() {
+    this.fetchStatistics();
+  },
+  methods: {
+    ...mapActions({
+      fetchStatistics(dispatch) {
+        return dispatch(`${this.storeNamespace}/fetchStatistics`);
+      },
+    }),
+  },
 };
 </script>
 

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

@@ -54,21 +54,12 @@ export const fetchEnvironments = ({ state, dispatch }) => {
     .catch(() => dispatch('receiveEnvironmentsError'));
 };
 
-export const setCurrentEnvironmentId = ({ commit, dispatch }, environmentId) => {
+export const setCurrentEnvironmentId = ({ commit }, environmentId) => {
   commit(types.SET_CURRENT_ENVIRONMENT_ID, environmentId);
-  dispatch(`threatMonitoringWaf/fetchStatistics`, null, { root: true });
-  dispatch(`threatMonitoringNetworkPolicy/fetchStatistics`, null, {
-    root: true,
-  });
-  dispatch(`networkPolicies/fetchPolicies`, environmentId, { root: true });
 };
 
-export const setCurrentTimeWindow = ({ commit, dispatch }, timeWindow) => {
+export const setCurrentTimeWindow = ({ commit }, timeWindow) => {
   commit(types.SET_CURRENT_TIME_WINDOW, timeWindow.name);
-  dispatch(`threatMonitoringWaf/fetchStatistics`, null, { root: true });
-  dispatch(`threatMonitoringNetworkPolicy/fetchStatistics`, null, {
-    root: true,
-  });
 };
 
 export const setAllEnvironments = ({ commit, dispatch }) => {

ee/changelogs/unreleased/threat-monitoring-tabs.yml

+---
+title: Update Threat Monitoring page
+merge_request: 42541
+author:
+type: changed

ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap

@@ -6,10 +6,10 @@ exports[`NetworkPolicyList component renders policies table 1`] = `
 <table
   aria-busy="false"
   aria-colcount="3"
-  aria-describedby="__BVID__359__caption_"
+  aria-describedby="__BVID__432__caption_"
   aria-multiselectable="false"
   class="table b-table gl-table table-hover b-table-stacked-md b-table-selectable b-table-select-single"
-  id="__BVID__359"
+  id="__BVID__432"
   role="table"
 >
   <!---->

ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js

@@ -70,6 +70,17 @@ describe('NetworkPolicyList component', () => {
     expect(wrapper.find(PolicyDrawer).exists()).toBe(false);
   });
 
+  it('fetches policies', () => {
+    expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/fetchPolicies', -1);
+  });
+
+  it('fetches policies on environment change', async () => {
+    store.dispatch.mockReset();
+    await store.commit('threatMonitoring/SET_CURRENT_ENVIRONMENT_ID', 2);
+
+    expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/fetchPolicies', 2);
+  });
+
   it('does not render edit button', () => {
     expect(wrapper.find('[data-testid="edit-button"]').exists()).toBe(false);
   });

ee/spec/frontend/threat_monitoring/components/threat_monitoring_section_spec.js

@@ -32,6 +32,8 @@ describe('ThreatMonitoringSection component', () => {
       ...state,
     });
 
+    jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
+
     wrapper = shallowMount(ThreatMonitoringSection, {
       propsData: {
         storeNamespace: 'threatMonitoringWaf',
@@ -110,6 +112,24 @@ describe('ThreatMonitoringSection component', () => {
     expect(findChartEmptyState().exists()).toBe(false);
   });
 
+  it('fetches statistics', () => {
+    expect(store.dispatch).toHaveBeenCalledWith('threatMonitoringWaf/fetchStatistics');
+  });
+
+  it('fetches statistics on environment change', async () => {
+    store.dispatch.mockReset();
+    await store.commit('threatMonitoring/SET_CURRENT_ENVIRONMENT_ID', 2);
+
+    expect(store.dispatch).toHaveBeenCalledWith('threatMonitoringWaf/fetchStatistics');
+  });
+
+  it('fetches statistics on time window change', async () => {
+    store.dispatch.mockReset();
+    await store.commit('threatMonitoring/SET_CURRENT_TIME_WINDOW', 'hour');
+
+    expect(store.dispatch).toHaveBeenCalledWith('threatMonitoringWaf/fetchStatistics');
+  });
+
   describe('given the statistics are loading', () => {
     beforeEach(() => {
       factory({

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

@@ -202,39 +202,26 @@ describe('Threat Monitoring actions', () => {
   describe('setCurrentEnvironmentId', () => {
     const environmentId = 1;
 
-    it('commits the SET_CURRENT_ENVIRONMENT_ID mutation and dispatches WAF, Network Policy statistics fetch actions and policy fetch action', () =>
+    it('commits the SET_CURRENT_ENVIRONMENT_ID mutation', () =>
       testAction(
         actions.setCurrentEnvironmentId,
         environmentId,
         state,
         [{ type: types.SET_CURRENT_ENVIRONMENT_ID, payload: environmentId }],
-        [
-          { type: 'threatMonitoringWaf/fetchStatistics', payload: null },
-          {
-            type: 'threatMonitoringNetworkPolicy/fetchStatistics',
-            payload: null,
-          },
-          { type: 'networkPolicies/fetchPolicies', payload: environmentId },
-        ],
+        [],
       ));
   });
 
   describe('setCurrentTimeWindow', () => {
     const timeWindow = { name: 'foo' };
 
-    it('commits the SET_CURRENT_TIME_WINDOW mutation and dispatches WAF and Network Policy fetch actions', () =>
+    it('commits the SET_CURRENT_TIME_WINDOW mutation', () =>
       testAction(
         actions.setCurrentTimeWindow,
         timeWindow,
         state,
         [{ type: types.SET_CURRENT_TIME_WINDOW, payload: timeWindow.name }],
-        [
-          { type: 'threatMonitoringWaf/fetchStatistics', payload: null },
-          {
-            type: 'threatMonitoringNetworkPolicy/fetchStatistics',
-            payload: null,
-          },
-        ],
+        [],
       ));
   });
 

locale/gitlab.pot

@@ -26269,9 +26269,6 @@ msgstr ""
 msgid "ThreatMonitoring|Operations Per Second"
 msgstr ""
 
-msgid "ThreatMonitoring|Overview"
-msgstr ""
-
 msgid "ThreatMonitoring|Packet Activity"
 msgstr ""
 
@@ -26290,6 +26287,9 @@ msgstr ""
 msgid "ThreatMonitoring|Something went wrong, unable to fetch statistics"
 msgstr ""
 
+msgid "ThreatMonitoring|Statistics"
+msgstr ""
+
 msgid "ThreatMonitoring|The firewall is not installed or has been disabled. To view this data, ensure the web application firewall is installed and enabled for your cluster."
 msgstr ""