Add filters to the instance level dashboard

- Rename wrong test names

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard.vue

@@ -2,12 +2,14 @@
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import InstanceSecurityVulnerabilities from './first_class_instance_security_dashboard_vulnerabilities.vue';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 
 export default {
   components: {
     SecurityDashboardLayout,
     InstanceSecurityVulnerabilities,
     VulnerabilitySeverity,
+    Filters,
   },
   props: {
     dashboardDocumentation: {
@@ -23,14 +25,31 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      filters: {},
+    };
+  },
+  methods: {
+    handleFilterChange(filters) {
+      this.filters = filters;
+    },
+  },
 };
 </script>
 
 <template>
   <security-dashboard-layout>
+    <template #header>
+      <header class="page-title-holder flex-fill d-flex align-items-center">
+        <h2 class="page-title">{{ s__('SecurityDashboard|Security Dashboard') }}</h2>
+      </header>
+      <filters @filterChange="handleFilterChange" />
+    </template>
     <instance-security-vulnerabilities
       :dashboard-documentation="dashboardDocumentation"
       :empty-state-svg-path="emptyStateSvgPath"
+      :filters="filters"
     />
     <template #aside>
       <vulnerability-severity :endpoint="vulnerableProjectsEndpoint" />

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue

@@ -22,6 +22,11 @@ export default {
       type: String,
       required: true,
     },
+    filters: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -36,6 +41,7 @@ export default {
       variables() {
         return {
           first: VULNERABILITIES_PER_PAGE,
+          ...this.filters,
         };
       },
       update: ({ vulnerabilities }) => vulnerabilities.nodes,

ee/app/assets/javascripts/security_dashboard/graphql/instance_vulnerabilities.graphql

 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 #import "ee/vulnerabilities/graphql/vulnerability.fragment.graphql"
 
-query instance($after: String, $first: Int) {
-  vulnerabilities(after:$after, first:$first) {
+query instance(
+  $after: String,
+  $first: Int
+  $severity: [VulnerabilitySeverity!]
+  $reportType: [VulnerabilityReportType!]
+  $state: [VulnerabilityState!]
+) {
+  vulnerabilities(
+    after:$after,
+    first:$first,
+    severity: $severity
+    reportType: $reportType
+    state: $state
+  ) {
     nodes {
       ...Vulnerability
     }

ee/spec/frontend/security_dashboard/components/first_class_instance_security_dashboard_spec.js

@@ -3,6 +3,7 @@ import SecurityDashboardLayout from 'ee/security_dashboard/components/security_d
 import FirstClassInstanceDashboard from 'ee/security_dashboard/components/first_class_instance_security_dashboard.vue';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 
 describe('First Class Instance Dashboard Component', () => {
   let wrapper;
@@ -13,6 +14,7 @@ describe('First Class Instance Dashboard Component', () => {
 
   const findInstanceVulnerabilities = () => wrapper.find(FirstClassInstanceVulnerabilities);
   const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
+  const findFilters = () => wrapper.find(Filters);
 
   const createWrapper = () => {
     return shallowMount(FirstClassInstanceDashboard, {
@@ -39,6 +41,20 @@ describe('First Class Instance Dashboard Component', () => {
     expect(findInstanceVulnerabilities().props()).toEqual({
       dashboardDocumentation,
       emptyStateSvgPath,
+      filters: {},
+    });
+  });
+
+  it('has filters', () => {
+    expect(findFilters().exists()).toBe(true);
+  });
+
+  it('it responds to the filterChange event', () => {
+    const filters = { severity: 'critical' };
+    findFilters().vm.$listeners.filterChange(filters);
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.filters).toEqual(filters);
+      expect(findInstanceVulnerabilities().props('filters')).toEqual(filters);
     });
   });