Add network_policy store module

This patch introduces initial store module implementation for the new
network policy management page. This store only has 2 actions:
setEndpoints and fetchPolicies behind the new networkPolicyManagement
feature flag.

ee/app/assets/javascripts/threat_monitoring/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import threatMonitoring from './modules/threat_monitoring';
 import threatMonitoringStatistics from './modules/threat_monitoring_statistics';
+import networkPolicies from './modules/network_policies';
 
 Vue.use(Vuex);
 
@@ -30,5 +31,6 @@ export default () =>
           },
         };
       }),
+      networkPolicies: networkPolicies(),
     },
   });

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

+import { s__ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import * as types from './mutation_types';
+
+export const setEndpoints = ({ commit }, endpoints) => {
+  commit(types.SET_ENDPOINT, endpoints.networkPoliciesEndpoint);
+};
+
+export const fetchPolicies = ({ state, commit }, environmentId) => {
+  const commitError = payload => {
+    const error =
+      payload?.error || s__('NetworkPolicies|Something went wrong, unable to fetch policies');
+    commit(types.RECEIVE_POLICIES_ERROR, error);
+    createFlash(error);
+  };
+
+  if (!state.policiesEndpoint || !environmentId) return commitError();
+
+  commit(types.REQUEST_POLICIES);
+
+  return axios
+    .get(state.policiesEndpoint, { params: { environment_id: environmentId } })
+    .then(({ data }) => commit(types.RECEIVE_POLICIES_SUCCESS, data))
+    .catch(error => commitError(error?.response?.data));
+};

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

+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+export default () => ({
+  namespaced: true,
+  actions,
+  mutations,
+  state,
+});

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

+export const SET_ENDPOINT = 'SET_ENDPOINT';
+
+export const REQUEST_POLICIES = 'REQUEST_POLICIES';
+export const RECEIVE_POLICIES_SUCCESS = 'RECEIVE_POLICIES_SUCCESS';
+export const RECEIVE_POLICIES_ERROR = 'RECEIVE_POLICIES_ERROR';

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

+import * as types from './mutation_types';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+export default {
+  [types.SET_ENDPOINT](state, endpoint) {
+    state.policiesEndpoint = endpoint;
+  },
+  [types.REQUEST_POLICIES](state) {
+    state.isLoadingPolicies = true;
+    state.errorLoadingPolicies = false;
+  },
+  [types.RECEIVE_POLICIES_SUCCESS](state, policies) {
+    state.policies = policies.map(policy => convertObjectPropsToCamelCase(policy));
+    state.isLoadingPolicies = false;
+    state.errorLoadingPolicies = false;
+  },
+  [types.RECEIVE_POLICIES_ERROR](state) {
+    state.isLoadingPolicies = false;
+    state.errorLoadingPolicies = true;
+  },
+};

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

+export default () => ({
+  policiesEndpoint: '',
+  policies: [],
+  isLoadingPolicies: false,
+  errorLoadingPolicies: false,
+});

ee/spec/frontend/threat_monitoring/mock_data.js

@@ -15,6 +15,31 @@ export const mockEnvironmentsResponse = {
   stopped_count: 5,
 };
 
+export const mockPoliciesResponse = [
+  {
+    name: 'policy',
+    namespace: 'production',
+    manifest: `---
+apiVersion: networking.k8s.io/v1
+kind: NetworkPolicy
+metadata:
+  name: example-name
+  namespace: example-namespace
+spec:
+  podSelector:
+    matchLabels:
+      role: db
+  policyTypes:
+  - Ingress
+  ingress:
+  - from:
+    - namespaceSelector:
+        matchLabels:
+          project: myproject`,
+    created_timestamp: '2020-04-14T00:08:30Z',
+  },
+];
+
 export const mockNominalHistory = [
   ['2019-12-04T00:00:00.000Z', 56],
   ['2019-12-05T00:00:00.000Z', 2647],

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

+import { s__ } from '~/locale';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import httpStatus from '~/lib/utils/http_status';
+import createFlash from '~/flash';
+import testAction from 'helpers/vuex_action_helper';
+
+import * as actions from 'ee/threat_monitoring/store/modules/network_policies/actions';
+import * as types from 'ee/threat_monitoring/store/modules/network_policies/mutation_types';
+import getInitialState from 'ee/threat_monitoring/store/modules/network_policies/state';
+
+import { mockPoliciesResponse } from '../../../mock_data';
+
+jest.mock('~/flash', () => jest.fn());
+
+const networkPoliciesEndpoint = 'networkPoliciesEndpoint';
+
+describe('Network Policy actions', () => {
+  let state;
+
+  beforeEach(() => {
+    state = getInitialState();
+  });
+
+  afterEach(() => {
+    createFlash.mockClear();
+  });
+
+  describe('setEndpoints', () => {
+    it('commits the SET_ENDPOINT mutation', () =>
+      testAction(
+        actions.setEndpoints,
+        { networkPoliciesEndpoint },
+        state,
+        [
+          {
+            type: types.SET_ENDPOINT,
+            payload: networkPoliciesEndpoint,
+          },
+        ],
+        [],
+      ));
+  });
+
+  describe('fetchPolicies', () => {
+    let mock;
+    const currentEnvironmentId = 3;
+
+    beforeEach(() => {
+      state.policiesEndpoint = networkPoliciesEndpoint;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('on success', () => {
+      beforeEach(() => {
+        mock
+          .onGet(networkPoliciesEndpoint, {
+            params: { environment_id: currentEnvironmentId },
+          })
+          .replyOnce(httpStatus.OK, mockPoliciesResponse);
+      });
+
+      it('should dispatch the request and success actions', () =>
+        testAction(
+          actions.fetchPolicies,
+          currentEnvironmentId,
+          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);
+      });
+
+      it('should dispatch the request and error actions', () =>
+        testAction(
+          actions.fetchPolicies,
+          currentEnvironmentId,
+          state,
+          [
+            { type: types.REQUEST_POLICIES },
+            { type: types.RECEIVE_POLICIES_ERROR, payload: 'foo' },
+          ],
+          [],
+        ));
+    });
+
+    describe('with an empty endpoint', () => {
+      beforeEach(() => {
+        state.policiesEndpoint = '';
+      });
+
+      it('should dispatch RECEIVE_POLICES_ERROR', () =>
+        testAction(
+          actions.fetchPolicies,
+          currentEnvironmentId,
+          state,
+          [
+            {
+              type: types.RECEIVE_POLICIES_ERROR,
+              payload: s__('NetworkPolicies|Something went wrong, unable to fetch policies'),
+            },
+          ],
+          [],
+        ));
+    });
+
+    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'),
+            },
+          ],
+          [],
+        ));
+    });
+  });
+});

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

+import * as types from 'ee/threat_monitoring/store/modules/network_policies/mutation_types';
+import mutations from 'ee/threat_monitoring/store/modules/network_policies/mutations';
+
+describe('Network Policies mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {};
+  });
+
+  describe(types.SET_ENDPOINT, () => {
+    it('sets the endpoints', () => {
+      mutations[types.SET_ENDPOINT](state, 'policies');
+      expect(state.policiesEndpoint).toEqual('policies');
+    });
+  });
+
+  describe(types.REQUEST_POLICIES, () => {
+    beforeEach(() => {
+      mutations[types.REQUEST_POLICIES](state);
+    });
+
+    it('sets isLoadingPolicies to true and sets errorLoadingPolicies to false', () => {
+      expect(state.isLoadingPolicies).toBe(true);
+      expect(state.errorLoadingPolicies).toBe(false);
+    });
+  });
+
+  describe(types.RECEIVE_POLICIES_SUCCESS, () => {
+    let policies;
+
+    beforeEach(() => {
+      policies = [{ id: 1, name: 'production' }];
+      mutations[types.RECEIVE_POLICIES_SUCCESS](state, policies);
+    });
+
+    it('sets policies to the payload', () => {
+      expect(state.policies).toEqual(expect.objectContaining(policies));
+    });
+
+    it('sets isLoadingPolicies to false and sets errorLoadingPolicies to false', () => {
+      expect(state.isLoadingPolicies).toBe(false);
+      expect(state.errorLoadingPolicies).toBe(false);
+    });
+  });
+
+  describe(types.RECEIVE_POLICIES_ERROR, () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_POLICIES_ERROR](state);
+    });
+
+    it('sets isLoadingPolicies to false and sets errorLoadingPolicies to true', () => {
+      expect(state.isLoadingPolicies).toBe(false);
+      expect(state.errorLoadingPolicies).toBe(true);
+    });
+  });
+});

locale/gitlab.pot

@@ -13655,6 +13655,9 @@ msgstr ""
 msgid "Network"
 msgstr ""
 
+msgid "NetworkPolicies|Something went wrong, unable to fetch policies"
+msgstr ""
+
 msgid "Never"
 msgstr ""