Add All Environments option for environments

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/40531

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { ALL_ENVIRONMENT_NAME } from '../constants';
 
 export default {
   components: {
@@ -8,14 +9,27 @@ export default {
     GlDeprecatedDropdown,
     GlDeprecatedDropdownItem,
   },
+  props: {
+    includeAll: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
   computed: {
-    ...mapState('threatMonitoring', ['environments', 'currentEnvironmentId']),
+    ...mapState('threatMonitoring', ['environments', 'currentEnvironmentId', 'allEnvironments']),
     ...mapGetters('threatMonitoring', ['currentEnvironmentName', 'canChangeEnvironment']),
+    environmentName() {
+      return this.allEnvironments && this.includeAll
+        ? ALL_ENVIRONMENT_NAME
+        : this.currentEnvironmentName;
+    },
   },
   methods: {
-    ...mapActions('threatMonitoring', ['setCurrentEnvironmentId']),
+    ...mapActions('threatMonitoring', ['setCurrentEnvironmentId', 'setAllEnvironments']),
   },
   environmentFilterId: 'threat-monitoring-environment-filter',
+  ALL_ENVIRONMENT_NAME,
 };
 </script>
 
@@ -31,7 +45,7 @@ export default {
       ref="environmentsDropdown"
       class="mb-0 d-flex"
       toggle-class="d-flex justify-content-between text-truncate"
-      :text="currentEnvironmentName"
+      :text="environmentName"
       :disabled="!canChangeEnvironment"
     >
       <gl-deprecated-dropdown-item
@@ -41,6 +55,12 @@ export default {
         @click="setCurrentEnvironmentId(environment.id)"
         >{{ environment.name }}</gl-deprecated-dropdown-item
       >
+      <gl-deprecated-dropdown-item
+        v-if="includeAll"
+        ref="environmentsDropdownItem"
+        @click="setAllEnvironments"
+        >{{ $options.ALL_ENVIRONMENT_NAME }}</gl-deprecated-dropdown-item
+      >
     </gl-deprecated-dropdown>
   </gl-form-group>
 </template>

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

@@ -176,7 +176,7 @@ export default {
 
     <div class="pt-3 px-3 bg-gray-light">
       <div class="row justify-content-between align-items-center">
-        <environment-picker ref="environmentsPicker" />
+        <environment-picker ref="environmentsPicker" :include-all="true" />
         <div class="col-sm-auto">
           <gl-button
             category="secondary"

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

+import { s__ } from '~/locale';
+
 export const INVALID_CURRENT_ENVIRONMENT_NAME = '–';
 
 export const PREDEFINED_NETWORK_POLICIES = [
@@ -30,3 +32,5 @@ spec:
     - port: 443`,
   },
 ];
+
+export const ALL_ENVIRONMENT_NAME = s__('ThreatMonitoring|All Environments');

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

@@ -16,14 +16,20 @@ const commitReceivePoliciesError = (commit, payload) => {
 };
 
 export const fetchPolicies = ({ state, commit }, environmentId) => {
-  if (!state.policiesEndpoint || !environmentId) return commitReceivePoliciesError(commit);
+  if (!state.policiesEndpoint) return commitReceivePoliciesError(commit);
 
   commit(types.REQUEST_POLICIES);
 
+  const params = environmentId ? { params: { environment_id: environmentId } } : {};
+
   return axios
-    .get(state.policiesEndpoint, { params: { environment_id: environmentId } })
+    .get(state.policiesEndpoint, params)
     .then(({ data }) => commit(types.RECEIVE_POLICIES_SUCCESS, data))
-    .catch(error => commitReceivePoliciesError(commit, error?.response?.data));
+    .catch(({ response: { data } }) => {
+      const payload = data?.payload?.length ? data.payload : [];
+      commit(types.RECEIVE_POLICIES_SUCCESS, payload);
+      commitReceivePoliciesError(commit, data);
+    });
 };
 
 const commitPolicyError = (commit, type, payload) => {

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

@@ -70,3 +70,8 @@ export const setCurrentTimeWindow = ({ commit, dispatch }, timeWindow) => {
     root: true,
   });
 };
+
+export const setAllEnvironments = ({ commit, dispatch }) => {
+  commit(types.SET_ALL_ENVIRONMENTS);
+  dispatch(`networkPolicies/fetchPolicies`, null, { root: true });
+};

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

@@ -4,5 +4,6 @@ export const REQUEST_ENVIRONMENTS = 'REQUEST_ENVIRONMENTS';
 export const RECEIVE_ENVIRONMENTS_SUCCESS = 'RECEIVE_ENVIRONMENTS_SUCCESS';
 export const RECEIVE_ENVIRONMENTS_ERROR = 'RECEIVE_ENVIRONMENTS_ERROR';
 export const SET_CURRENT_ENVIRONMENT_ID = 'SET_CURRENT_ENVIRONMENT_ID';
+export const SET_ALL_ENVIRONMENTS = 'SET_ALL_ENVIRONMENTS';
 
 export const SET_CURRENT_TIME_WINDOW = 'SET_CURRENT_TIME_WINDOW';

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

@@ -21,8 +21,12 @@ export default {
   },
   [types.SET_CURRENT_ENVIRONMENT_ID](state, payload) {
     state.currentEnvironmentId = payload;
+    state.allEnvironments = false;
   },
   [types.SET_CURRENT_TIME_WINDOW](state, payload) {
     state.currentTimeWindow = payload;
   },
+  [types.SET_ALL_ENVIRONMENTS](state) {
+    state.allEnvironments = true;
+  },
 };

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

@@ -7,4 +7,5 @@ export default () => ({
   errorLoadingEnvironments: false,
   currentEnvironmentId: -1,
   currentTimeWindow: defaultTimeRange.name,
+  allEnvironments: false,
 });

ee/changelogs/unreleased/add_support_for_all_environments_network_policy.yml

+---
+title: Add 'All Environments' option for environment dropdown if enabled
+merge_request: 40531
+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__341__caption_"
+  aria-describedby="__BVID__359__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__341"
+  id="__BVID__359"
   role="table"
 >
   <!---->

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

 import { shallowMount } from '@vue/test-utils';
 import createStore from 'ee/threat_monitoring/store';
 import EnvironmentPicker from 'ee/threat_monitoring/components/environment_picker.vue';
-import { INVALID_CURRENT_ENVIRONMENT_NAME } from 'ee/threat_monitoring/constants';
+import {
+  INVALID_CURRENT_ENVIRONMENT_NAME,
+  ALL_ENVIRONMENT_NAME,
+} from 'ee/threat_monitoring/constants';
 import { mockEnvironmentsResponse } from '../mock_data';
 
 const mockEnvironments = mockEnvironmentsResponse.environments;
+const currentEnvironment = mockEnvironments[1];
 
 describe('EnvironmentPicker component', () => {
   let store;
@@ -44,7 +48,6 @@ describe('EnvironmentPicker component', () => {
       });
     });
     describe('given there are environments', () => {
-      const currentEnvironment = mockEnvironments[1];
       beforeEach(() => {
         factory({
           environments: mockEnvironments,
@@ -73,6 +76,25 @@ describe('EnvironmentPicker component', () => {
         });
       });
     });
+    describe('with includeAll enabled', () => {
+      beforeEach(() => {
+        factory({
+          environments: mockEnvironments,
+          currentEnvironmentId: currentEnvironment.id,
+          allEnvironments: true,
+        });
+        wrapper = shallowMount(EnvironmentPicker, {
+          propsData: {
+            includeAll: true,
+          },
+          store,
+        });
+      });
+
+      it('has text set to the all environment option', () => {
+        expect(findEnvironmentsDropdown().attributes().text).toBe(ALL_ENVIRONMENT_NAME);
+      });
+    });
   });
 
   describe.each`

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

@@ -72,28 +72,74 @@ describe('Network Policy actions', () => {
           ],
           [],
         ));
+
+      describe('without environment id', () => {
+        beforeEach(() => {
+          mock.onGet(networkPoliciesEndpoint, null).replyOnce(httpStatus.OK, mockPoliciesResponse);
+        });
+        it('should dispatch the request and success actions', () =>
+          testAction(
+            actions.fetchPolicies,
+            null,
+            state,
+            [
+              { type: types.REQUEST_POLICIES },
+              {
+                type: types.RECEIVE_POLICIES_SUCCESS,
+                payload: mockPoliciesResponse,
+              },
+            ],
+            [],
+          ));
+      });
     });
 
     describe('on error', () => {
-      const error = { error: 'foo' };
-
-      beforeEach(() => {
-        mock.onGet(networkPoliciesEndpoint).replyOnce(500, error);
+      describe('without payload', () => {
+        const error = { error: 'foo' };
+
+        beforeEach(() => {
+          mock.onGet(networkPoliciesEndpoint).replyOnce(500, error);
+        });
+
+        it('should dispatch the request, error actions and updates payload', () =>
+          testAction(
+            actions.fetchPolicies,
+            environmentId,
+            state,
+            [
+              { type: types.REQUEST_POLICIES },
+              { type: types.RECEIVE_POLICIES_SUCCESS, payload: [] },
+              { type: types.RECEIVE_POLICIES_ERROR, payload: 'foo' },
+            ],
+            [],
+          ).then(() => {
+            expect(createFlash).toHaveBeenCalled();
+          }));
       });
 
-      it('should dispatch the request and error actions', () =>
-        testAction(
-          actions.fetchPolicies,
-          environmentId,
-          state,
-          [
-            { type: types.REQUEST_POLICIES },
-            { type: types.RECEIVE_POLICIES_ERROR, payload: 'foo' },
-          ],
-          [],
-        ).then(() => {
-          expect(createFlash).toHaveBeenCalled();
-        }));
+      describe('with payload', () => {
+        const payload = { error: 'foo', payload: [policy] };
+
+        beforeEach(() => {
+          mock.onGet(networkPoliciesEndpoint).replyOnce(500, payload);
+        });
+
+        it('should dispatch the request, error actions and updates payload', () =>
+          testAction(
+            actions.fetchPolicies,
+            environmentId,
+            state,
+            [
+              { type: types.REQUEST_POLICIES },
+              { type: types.RECEIVE_POLICIES_SUCCESS, payload: [policy] },
+              { type: types.RECEIVE_POLICIES_ERROR, payload: 'foo' },
+            ],
+            [],
+          ).then(() => {
+            expect(createFlash).toHaveBeenCalled();
+          }));
+      });
     });
 
     describe('with an empty endpoint', () => {
@@ -117,24 +163,6 @@ describe('Network Policy actions', () => {
           expect(createFlash).toHaveBeenCalled();
         }));
     });
-
-    describe('without environment id', () => {
-      it('should dispatch RECEIVE_POLICIES_ERROR', () =>
-        testAction(
-          actions.fetchPolicies,
-          undefined,
-          state,
-          [
-            {
-              type: types.RECEIVE_POLICIES_ERROR,
-              payload: s__('NetworkPolicies|Something went wrong, unable to fetch policies'),
-            },
-          ],
-          [],
-        ).then(() => {
-          expect(createFlash).toHaveBeenCalled();
-        }));
-    });
   });
 
   describe('createPolicy', () => {

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

@@ -237,4 +237,15 @@ describe('Threat Monitoring actions', () => {
         ],
       ));
   });
+
+  describe('setAllEnvironments', () => {
+    it('commits the SET_ALL_ENVIRONMENTS mutation and dispatches Network Policy fetch action', () =>
+      testAction(
+        actions.setAllEnvironments,
+        null,
+        state,
+        [{ type: types.SET_ALL_ENVIRONMENTS }],
+        [{ type: 'networkPolicies/fetchPolicies', payload: null }],
+      ));
+  });
 });

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

@@ -100,8 +100,9 @@ describe('Threat Monitoring mutations', () => {
       mutations[types.SET_CURRENT_ENVIRONMENT_ID](state, environmentId);
     });
 
-    it('sets currentEnvironmentId', () => {
+    it('sets currentEnvironmentId and allEnvironments', () => {
       expect(state.currentEnvironmentId).toBe(environmentId);
+      expect(state.allEnvironments).toBe(false);
     });
   });
 
@@ -116,4 +117,14 @@ describe('Threat Monitoring mutations', () => {
       expect(state.currentTimeWindow).toBe(timeWindow);
     });
   });
+
+  describe(types.SET_ALL_ENVIRONMENTS, () => {
+    beforeEach(() => {
+      mutations[types.SET_ALL_ENVIRONMENTS](state);
+    });
+
+    it('sets allEnvironments', () => {
+      expect(state.allEnvironments).toBe(true);
+    });
+  });
 });

locale/gitlab.pot

@@ -26166,6 +26166,9 @@ msgstr ""
 msgid "Threat Monitoring"
 msgstr ""
 
+msgid "ThreatMonitoring|All Environments"
+msgstr ""
+
 msgid "ThreatMonitoring|Anomalous Requests"
 msgstr ""