Merge branch '14707-implement-draft-frontend-ee' into 'master'

Begin laying frontend framework for Threat Monitoring UI

See merge request gitlab-org/gitlab!20910

ee/app/assets/javascripts/pages/projects/threat_monitoring/show/index.js

+import initThreatMonitoringApp from 'ee/threat_monitoring';
+
+document.addEventListener('DOMContentLoaded', initThreatMonitoringApp);

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

+<script>
+import { mapActions } from 'vuex';
+import { GlAlert, GlEmptyState, GlIcon, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'ThreatMonitoring',
+  components: {
+    GlAlert,
+    GlEmptyState,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    isWafSetup: {
+      type: Boolean,
+      required: true,
+    },
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    documentationPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAlert: true,
+    };
+  },
+  created() {
+    if (this.isWafSetup) {
+      this.setEndpoint(this.endpoint);
+    }
+  },
+  methods: {
+    ...mapActions('threatMonitoring', ['setEndpoint']),
+    dismissAlert() {
+      this.showAlert = false;
+    },
+  },
+  emptyStateDescription: s__(
+    `ThreatMonitoring|A Web Application Firewall (WAF) provides monitoring and
+    rules to protect production applications. GitLab adds the modsecurity WAF
+    plug-in when you install the Ingress app in your Kubernetes cluster.`,
+  ),
+  alertText: s__(
+    `ThreatMonitoring|The graph below is an overview of traffic coming to your
+    application. View the documentation for instructions on how to access the
+    WAF logs to see what type of malicious traffic is trying to access your
+    app.`,
+  ),
+};
+</script>
+
+<template>
+  <gl-empty-state
+    v-if="!isWafSetup"
+    :title="s__('ThreatMonitoring|Web Application Firewall not enabled')"
+    :description="$options.emptyStateDescription"
+    :svg-path="emptyStateSvgPath"
+    :primary-button-link="documentationPath"
+    :primary-button-text="__('Learn more')"
+  />
+
+  <section v-else>
+    <gl-alert
+      v-if="showAlert"
+      class="my-3"
+      variant="tip"
+      :secondary-button-link="documentationPath"
+      :secondary-button-text="__('View documentation')"
+      @dismiss="dismissAlert"
+    >
+      {{ $options.alertText }}
+    </gl-alert>
+    <header class="my-3">
+      <h2 class="h4 mb-1">
+        {{ s__('ThreatMonitoring|Threat Monitoring') }}
+        <gl-link
+          target="_blank"
+          :href="documentationPath"
+          :aria-label="s__('ThreatMonitoring|Threat Monitoring help page link')"
+        >
+          <gl-icon name="question" />
+        </gl-link>
+      </h2>
+    </header>
+  </section>
+</template>

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

+import Vue from 'vue';
+import ThreatMonitoringApp from './components/app.vue';
+import createStore from './store';
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export default () => {
+  const el = document.querySelector('#js-threat-monitoring-app');
+  const { isWafSetup, endpoint, emptyStateSvgPath, documentationPath } = el.dataset;
+
+  const store = createStore();
+
+  return new Vue({
+    el,
+    store,
+    render(createElement) {
+      return createElement(ThreatMonitoringApp, {
+        props: {
+          isWafSetup: parseBoolean(isWafSetup),
+          endpoint,
+          emptyStateSvgPath,
+          documentationPath,
+        },
+      });
+    },
+  });
+};

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

+import Vue from 'vue';
+import Vuex from 'vuex';
+import threatMonitoring from './modules/threat_monitoring';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vuex.Store({
+    modules: {
+      threatMonitoring: threatMonitoring(),
+    },
+  });

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

+import * as types from './mutation_types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);

ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/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/threat_monitoring/mutation_types.js

+// eslint-disable-next-line import/prefer-default-export
+export const SET_ENDPOINT = 'SET_ENDPOINT';

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

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_ENDPOINT](state, payload) {
+    state.endpoint = payload;
+  },
+};

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

+export default () => ({
+  endpoint: '',
+});

ee/app/views/projects/threat_monitoring/show.html.haml

-- breadcrumb_title _("Threat Monitoring")
-- page_title _("Threat Monitoring")
+- breadcrumb_title s_("ThreatMonitoring|Threat Monitoring")
+- page_title s_("ThreatMonitoring|Threat Monitoring")
 
-#js-threat-monitoring-app
+#js-threat-monitoring-app{ data: { documentation_path: help_page_path('user/clusters/applications', anchor: 'web-application-firewall-modsecurity'),
+  empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
+  is_waf_setup: 'false',
+  endpoint: 'dummy',
+} }

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThreatMonitoringApp component given the WAF is not set up shows only the empty state 1`] = `
+<glemptystate-stub
+  description="A Web Application Firewall (WAF) provides monitoring and rules to protect production applications. GitLab adds the modsecurity WAF plug-in when you install the Ingress app in your Kubernetes cluster."
+  primarybuttonlink="/docs"
+  primarybuttontext="Learn more"
+  svgpath="/svgs"
+  title="Web Application Firewall not enabled"
+/>
+`;
+
+exports[`ThreatMonitoringApp component given the WAF is set up dismissing the alert hides the alert 1`] = `
+<section>
+  <!---->
+   
+  <header
+    class="my-3"
+  >
+    <h2
+      class="h4 mb-1"
+    >
+      
+      Threat Monitoring
+      
+      <gllink-stub
+        aria-label="Threat Monitoring help page link"
+        href="/docs"
+        target="_blank"
+      >
+        <glicon-stub
+          name="question"
+          size="16"
+        />
+      </gllink-stub>
+    </h2>
+  </header>
+</section>
+`;
+
+exports[`ThreatMonitoringApp component given the WAF is set up shows the alert and header 1`] = `
+<section>
+  <glalert-stub
+    class="my-3"
+    dismissible="true"
+    dismisslabel="Dismiss"
+    primarybuttonlink=""
+    primarybuttontext=""
+    secondarybuttonlink="/docs"
+    secondarybuttontext="View documentation"
+    title=""
+    variant="tip"
+  >
+    
+    The graph below is an overview of traffic coming to your application. View the documentation for instructions on how to access the WAF logs to see what type of malicious traffic is trying to access your app.
+  
+  </glalert-stub>
+   
+  <header
+    class="my-3"
+  >
+    <h2
+      class="h4 mb-1"
+    >
+      
+      Threat Monitoring
+      
+      <gllink-stub
+        aria-label="Threat Monitoring help page link"
+        href="/docs"
+        target="_blank"
+      >
+        <glicon-stub
+          name="question"
+          size="16"
+        />
+      </gllink-stub>
+    </h2>
+  </header>
+</section>
+`;

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

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import { TEST_HOST } from 'helpers/test_constants';
+import createStore from 'ee/threat_monitoring/store';
+import ThreatMonitoringApp from 'ee/threat_monitoring/components/app.vue';
+
+const localVue = createLocalVue();
+const endpoint = TEST_HOST;
+const emptyStateSvgPath = '/svgs';
+const documentationPath = '/docs';
+
+describe('ThreatMonitoringApp component', () => {
+  let store;
+  let wrapper;
+
+  const factory = propsData => {
+    store = createStore();
+
+    jest.spyOn(store, 'dispatch');
+
+    wrapper = shallowMount(ThreatMonitoringApp, {
+      localVue,
+      propsData,
+      store,
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('given the WAF is not set up', () => {
+    beforeEach(() => {
+      factory({
+        isWafSetup: false,
+        endpoint,
+        emptyStateSvgPath,
+        documentationPath,
+      });
+    });
+
+    it('does not dispatch any store actions', () => {
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+
+    it('shows only the empty state', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('given the WAF is set up', () => {
+    beforeEach(() => {
+      factory({
+        isWafSetup: true,
+        endpoint,
+        emptyStateSvgPath,
+        documentationPath,
+      });
+    });
+
+    it('sets the endpoint on creation', () => {
+      expect(store.dispatch).toHaveBeenCalledWith('threatMonitoring/setEndpoint', endpoint);
+    });
+
+    it('shows the alert and header', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('dismissing the alert', () => {
+      beforeEach(() => {
+        wrapper.find(GlAlert).vm.$emit('dismiss');
+      });
+
+      it('hides the alert', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
+  });
+});

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

+import testAction from 'helpers/vuex_action_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import * as actions from 'ee/threat_monitoring/store/modules/threat_monitoring/actions';
+import * as types from 'ee/threat_monitoring/store/modules/threat_monitoring/mutation_types';
+import getInitialState from 'ee/threat_monitoring/store/modules/threat_monitoring/state';
+
+describe('Threat Monitoring actions', () => {
+  describe('setEndpoint', () => {
+    it('commits the SET_ENDPOINT mutation', () =>
+      testAction(
+        actions.setEndpoint,
+        TEST_HOST,
+        getInitialState(),
+        [
+          {
+            type: types.SET_ENDPOINT,
+            payload: TEST_HOST,
+          },
+        ],
+        [],
+      ));
+  });
+});

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

+import { TEST_HOST } from 'helpers/test_constants';
+import * as types from 'ee/threat_monitoring/store/modules/threat_monitoring/mutation_types';
+import mutations from 'ee/threat_monitoring/store/modules/threat_monitoring/mutations';
+import getInitialState from 'ee/threat_monitoring/store/modules/threat_monitoring/state';
+
+describe('Threat Monitoring mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = getInitialState();
+  });
+
+  describe(types.SET_ENDPOINT, () => {
+    it('sets the endpoint', () => {
+      mutations[types.SET_ENDPOINT](state, TEST_HOST);
+
+      expect(state.endpoint).toBe(TEST_HOST);
+    });
+  });
+});

locale/gitlab.pot

@@ -18257,6 +18257,21 @@ msgstr ""
 msgid "Threat Monitoring"
 msgstr ""
 
+msgid "ThreatMonitoring|A Web Application Firewall (WAF) provides monitoring and rules to protect production applications. GitLab adds the modsecurity WAF plug-in when you install the Ingress app in your Kubernetes cluster."
+msgstr ""
+
+msgid "ThreatMonitoring|The graph below is an overview of traffic coming to your application. View the documentation for instructions on how to access the WAF logs to see what type of malicious traffic is trying to access your app."
+msgstr ""
+
+msgid "ThreatMonitoring|Threat Monitoring"
+msgstr ""
+
+msgid "ThreatMonitoring|Threat Monitoring help page link"
+msgstr ""
+
+msgid "ThreatMonitoring|Web Application Firewall not enabled"
+msgstr ""
+
 msgid "Thursday"
 msgstr ""