Add support for multiple environments

Update code to support multiple environments
scoped within a project for NetworkPolicy k8s
resource

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

@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     ...mapState('networkPolicies', ['policies', 'isLoadingPolicies', 'isUpdatingPolicy']),
-    ...mapState('threatMonitoring', ['currentEnvironmentId']),
+    ...mapState('threatMonitoring', ['currentEnvironmentId', 'allEnvironments']),
     ...mapGetters('networkPolicies', ['policiesWithDefaults']),
     documentationFullPath() {
       return setUrlFragment(this.documentationPath, 'container-network-policy');
@@ -90,6 +90,34 @@ export default {
           )
         : '';
     },
+    fields() {
+      const namespace = {
+        key: 'namespace',
+        label: s__('NetworkPolicies|Namespace'),
+        thClass: 'font-weight-bold',
+      };
+      const fields = [
+        {
+          key: 'name',
+          label: s__('NetworkPolicies|Name'),
+          thClass: 'w-50 font-weight-bold',
+        },
+        {
+          key: 'status',
+          label: s__('NetworkPolicies|Status'),
+          thClass: 'font-weight-bold',
+        },
+        {
+          key: 'creationTimestamp',
+          label: s__('NetworkPolicies|Last modified'),
+          thClass: 'font-weight-bold',
+        },
+      ];
+      // Adds column 'namespace' only while 'all environments' option is selected
+      if (this.allEnvironments) fields.splice(1, 0, namespace);
+
+      return fields;
+    },
   },
   methods: {
     ...mapActions('networkPolicies', ['createPolicy', 'updatePolicy']),
@@ -127,23 +155,6 @@ export default {
         });
     },
   },
-  fields: [
-    {
-      key: 'name',
-      label: s__('NetworkPolicies|Name'),
-      thClass: 'w-75 font-weight-bold',
-    },
-    {
-      key: 'status',
-      label: s__('NetworkPolicies|Status'),
-      thClass: 'font-weight-bold',
-    },
-    {
-      key: 'creationTimestamp',
-      label: s__('NetworkPolicies|Last modified'),
-      thClass: 'font-weight-bold',
-    },
-  ],
   emptyStateDescription: s__(
     `NetworkPolicies|Policies are a specification of how groups of pods are allowed to communicate with each other's network endpoints.`,
   ),
@@ -193,7 +204,7 @@ export default {
       ref="policiesTable"
       :busy="isLoadingPolicies"
       :items="policiesWithDefaults"
-      :fields="$options.fields"
+      :fields="fields"
       head-variant="white"
       stacked="md"
       thead-class="gl-text-gray-900 border-bottom"

ee/changelogs/unreleased/add_namespace_column_for_network_policies_ui.yml

+---
+title: Add namespace column into the network policies UI. Only visible when All Environment
+  option is set.
+merge_request: 42125
+author:
+type: changed

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

@@ -25,7 +25,7 @@ exports[`NetworkPolicyList component renders policies table 1`] = `
     >
       <th
         aria-colindex="1"
-        class="w-75 font-weight-bold"
+        class="w-50 font-weight-bold"
         role="columnheader"
         scope="col"
       >

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

@@ -112,6 +112,19 @@ spec:
     expect(findPoliciesTable().element).toMatchSnapshot();
   });
 
+  describe('with allEnvironments enabled', () => {
+    beforeEach(() => {
+      wrapper.vm.$store.state.threatMonitoring.allEnvironments = true;
+    });
+
+    it('renders policies table', () => {
+      const namespaceHeader = findPoliciesTable()
+        .findAll('[role="columnheader"]')
+        .at(1);
+      expect(namespaceHeader.text()).toBe('Namespace');
+    });
+  });
+
   it('renders closed editor drawer', () => {
     const editorDrawer = findEditorDrawer();
     expect(editorDrawer.exists()).toBe(true);

locale/gitlab.pot

@@ -16748,6 +16748,9 @@ msgstr ""
 msgid "NetworkPolicies|Name"
 msgstr ""
 
+msgid "NetworkPolicies|Namespace"
+msgstr ""
+
 msgid "NetworkPolicies|Network Policy"
 msgstr ""