Add new instance vulnerability report

ee/app/assets/javascripts/security_dashboard/components/instance/instance_vulnerability_report.vue

+<script>
+import ReportNotConfiguredInstance from '../shared/empty_states/report_not_configured_instance.vue';
+import VulnerabilityReportTabs from '../shared/vulnerability_report/vulnerability_report_tabs.vue';
+import instanceVulnerabilitiesQuery from '../../graphql/queries/instance_vulnerabilities.query.graphql';
+
+export default {
+  components: {
+    ReportNotConfiguredInstance,
+    VulnerabilityReportTabs,
+  },
+  inject: ['hasProjects'],
+  instanceVulnerabilitiesQuery,
+};
+</script>
+
+<template>
+  <report-not-configured-instance v-if="!hasProjects" />
+  <vulnerability-report-tabs
+    v-else
+    :query="$options.instanceVulnerabilitiesQuery"
+    show-project-filter
+  />
+</template>

ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js

@@ -7,6 +7,18 @@ import apolloProvider from './graphql/provider';
 import createRouter from './router';
 import createStore from './store';
 import GroupVulnerabilityReport from './components/group/group_vulnerability_report.vue';
+import InstanceVulnerabilityReport from './components/instance/instance_vulnerability_report.vue';
+
+const getVulnerabilityComponent = (dashboardType) => {
+  switch (dashboardType) {
+    case DASHBOARD_TYPES.GROUP:
+      return GroupVulnerabilityReport;
+    case DASHBOARD_TYPES.INSTANCE:
+      return InstanceVulnerabilityReport;
+    default:
+      return VulnerabilityReport;
+  }
+};
 
 export default (el, dashboardType) => {
   if (!el) {
@@ -104,9 +116,8 @@ export default (el, dashboardType) => {
   const router = createRouter();
   const store = createStore({ dashboardType });
 
-  const component =
-    gon.features?.operationalVulnerabilities && dashboardType === DASHBOARD_TYPES.GROUP
-      ? GroupVulnerabilityReport
+  const component = gon.features?.operationalVulnerabilities
+    ? getVulnerabilityComponent(dashboardType)
     : VulnerabilityReport;
 
   return new Vue({

ee/app/helpers/security_helper.rb

@@ -14,9 +14,10 @@ module SecurityHelper
       project_list_endpoint: security_projects_path,
       instance_dashboard_settings_path: settings_security_dashboard_path,
       vulnerabilities_export_endpoint: expose_path(api_v4_security_vulnerability_exports_path),
-      scanners: VulnerabilityScanners::ListService.new(InstanceSecurityDashboard.new(current_user)).execute.to_json,
+      scanners: VulnerabilityScanners::ListService.new(instance_security_dashboard).execute.to_json,
       false_positive_doc_url: help_page_path('user/application_security/vulnerabilities/index'),
-      can_view_false_positive: can_view_false_positive?
+      can_view_false_positive: can_view_false_positive?,
+      has_projects: instance_security_dashboard.has_projects?.to_s
     }
   end
 
@@ -37,4 +38,10 @@ module SecurityHelper
       is_auditor: current_user.auditor?.to_s
     }
   end
+
+  private
+
+  def instance_security_dashboard
+    @_instance_security_dashboard ||= InstanceSecurityDashboard.new(current_user)
+  end
 end

ee/app/models/instance_security_dashboard.rb

@@ -41,6 +41,10 @@ class InstanceSecurityDashboard
     Vulnerabilities::HistoricalStatistic.for_project(projects)
   end
 
+  def has_projects?
+    projects.count > 0
+  end
+
   private
 
   attr_reader :project_ids, :user

ee/spec/frontend/security_dashboard/components/instance/instance_vulnerability_report_spec.js

+import { shallowMount } from '@vue/test-utils';
+import InstanceVulnerabilityReport from 'ee/security_dashboard/components/instance/instance_vulnerability_report.vue';
+import VulnerabilityReportTabs from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_report_tabs.vue';
+import ReportNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_instance.vue';
+
+describe('Instance vulnerabilities report component', () => {
+  let wrapper;
+
+  const createWrapper = ({ hasProjects = true } = {}) => {
+    wrapper = shallowMount(InstanceVulnerabilityReport, {
+      provide: { hasProjects },
+    });
+  };
+
+  const findReportNotConfiguredInstance = () => wrapper.findComponent(ReportNotConfiguredInstance);
+  const findVulnerabilityReportTabs = () => wrapper.findComponent(VulnerabilityReportTabs);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows the report not configured component if there are no projects', () => {
+    createWrapper({ hasProjects: false });
+
+    expect(findReportNotConfiguredInstance().exists()).toBe(true);
+    expect(findVulnerabilityReportTabs().exists()).toBe(false);
+  });
+
+  it('shows the vulnerability report tabs component if there are projects', () => {
+    createWrapper({ hasProjects: true });
+
+    expect(findReportNotConfiguredInstance().exists()).toBe(false);
+    expect(findVulnerabilityReportTabs().exists()).toBe(true);
+  });
+});

ee/spec/helpers/security_helper_spec.rb

@@ -23,7 +23,8 @@ RSpec.describe SecurityHelper do
         instance_dashboard_settings_path: settings_security_dashboard_path,
         vulnerabilities_export_endpoint: api_v4_security_vulnerability_exports_path,
         scanners: '[]',
-        can_view_false_positive: 'false'
+        can_view_false_positive: 'false',
+        has_projects: 'false'
       })
     end
   end