Add scanner details for vulnerability modal

This includes adding scanner url and version if they are present

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue

@@ -12,8 +12,8 @@ export default {
 
 <template functional>
   <div class="d-sm-flex my-sm-2 my-4">
-    <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
-    <div class="col-sm-10 pl-0 text-secondary">
+    <label class="col-sm-3 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
+    <div class="col-sm-9 pl-0 text-secondary">
       <slot></slot>
     </div>
   </div>

ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue

@@ -6,6 +6,8 @@ import ExpandButton from '~/vue_shared/components/expand_button.vue';
 import SeverityBadge from './severity_badge.vue';
 import getFileLocation from '../store/utils/get_file_location';
 import VulnerabilityDetail from './vulnerability_detail.vue';
+import { s__, sprintf } from '~/locale';
+import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
 
 export default {
   name: 'VulnerabilityDetails',
@@ -67,6 +69,28 @@ export default {
     instances() {
       return this.asNonEmptyListOrNull(this.vulnerability.instances);
     },
+    scannerType() {
+      return REPORT_TYPES[this.vulnerability.report_type];
+    },
+    scannerUrl() {
+      return this.vulnerability.scanner?.url || '';
+    },
+    scannerVersion() {
+      return this.vulnerability.scanner?.version;
+    },
+    scannerName() {
+      return this.vulnerability.scanner?.name;
+    },
+    scannerProvider() {
+      if (!this.scannerVersion) {
+        return this.scannerName;
+      }
+
+      return sprintf(s__('Vulnerability|%{scannerName} (version %{scannerVersion})'), {
+        scannerName: this.scannerName,
+        scannerVersion: this.scannerVersion,
+      });
+    },
   },
   methods: {
     hasMoreValues(index, values) {
@@ -138,9 +162,15 @@ export default {
 
     <vulnerability-detail
       v-if="vulnerability.report_type"
-      :label="s__('Vulnerability|Report Type')"
+      :label="s__('Vulnerability|Scanner Type')"
     >
-      <gl-friendly-wrap :text="vulnerability.report_type" />
+      <gl-friendly-wrap :text="scannerType" />
+    </vulnerability-detail>
+
+    <vulnerability-detail v-if="scannerProvider" :label="s__('Vulnerability|Scanner Provider')">
+      <safe-link ref="scannerLink" :href="scannerUrl" target="_blank" rel="noopener noreferrer">
+        <gl-friendly-wrap :text="scannerProvider" />
+      </safe-link>
     </vulnerability-detail>
 
     <vulnerability-detail v-if="className" :label="s__('Vulnerability|Class')">

ee/changelogs/unreleased/214794-scanner-properties.yml

+---
+title: Add scanner name, version and URL to Vulnerability Modal
+merge_request: 30458
+author:
+type: added

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap

@@ -5,13 +5,13 @@ exports[`VulnerabilityDetail component renders the label prop and default slot 1
   class="d-sm-flex my-sm-2 my-4"
 >
   <label
-    class="col-sm-2 text-sm-right font-weight-bold pl-0"
+    class="col-sm-3 text-sm-right font-weight-bold pl-0"
   >
     foo:
   </label>
    
   <div
-    class="col-sm-10 pl-0 text-secondary"
+    class="col-sm-9 pl-0 text-secondary"
   >
     <p>
       bar

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_details_spec.js.snap

@@ -95,14 +95,29 @@ exports[`VulnerabilityDetails component pin test renders correctly 1`] = `
   </vulnerability-detail-stub>
    
   <vulnerability-detail-stub
-    label="Report Type"
+    label="Scanner Type"
   >
     <gl-friendly-wrap-stub
       symbols="/"
-      text="dependency_scanning"
+      text="Dependency Scanning"
     />
   </vulnerability-detail-stub>
    
+  <vulnerability-detail-stub
+    label="Scanner Provider"
+  >
+    <safe-link-stub
+      href="https://gitlab.com/gitlab-org/security-products/gemnasium"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <gl-friendly-wrap-stub
+        symbols="/"
+        text="Gemnasium (version 1.1.1)"
+      />
+    </safe-link-stub>
+  </vulnerability-detail-stub>
+   
   <!---->
    
   <!---->

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -151,6 +151,47 @@ describe('VulnerabilityDetails component', () => {
     });
   });
 
+  describe('scanner details', () => {
+    describe('with additional information', () => {
+      beforeEach(() => {
+        const vulnerability = makeVulnerability();
+        componentFactory(vulnerability);
+      });
+
+      it('should include version information', () => {
+        expect(findLink('scanner').text()).toBe('Gemnasium (version 1.1.1)');
+      });
+
+      it('should render link', () => {
+        expect(findLink('scanner').contains('a')).toBe(true);
+      });
+    });
+
+    describe('without additional information', () => {
+      beforeEach(() => {
+        const vulnerability = makeVulnerability({
+          scanner: {
+            id: 'clair',
+            name: 'Clair',
+          },
+        });
+        componentFactory(vulnerability);
+      });
+
+      it('should not display version', () => {
+        expectSafeLink({
+          link: findLink('scanner'),
+          href: '',
+          text: 'Clair',
+        });
+      });
+
+      it('should not render link', () => {
+        expect(findLink('scanner').contains('a')).toBe(false);
+      });
+    });
+  });
+
   describe('pin test', () => {
     const factory = vulnFinding => {
       wrapper = shallowMount(VulnerabilityDetails, {

ee/spec/frontend/vue_shared/security_reports/mock_data.js

@@ -308,7 +308,12 @@ export const mockFindings = [
     report_type: 'dependency_scanning',
     name: 'Cross-site Scripting in serialize-javascript',
     severity: 'unknown',
-    scanner: { external_id: 'gemnasium', name: 'Gemnasium' },
+    scanner: {
+      external_id: 'gemnasium',
+      name: 'Gemnasium',
+      version: '1.1.1',
+      url: 'https://gitlab.com/gitlab-org/security-products/gemnasium',
+    },
     identifiers: [
       {
         external_type: 'gemnasium',

locale/gitlab.pot

@@ -23434,6 +23434,9 @@ msgstr ""
 msgid "VulnerabilityStatusTypes|Resolved"
 msgstr ""
 
+msgid "Vulnerability|%{scannerName} (version %{scannerVersion})"
+msgstr ""
+
 msgid "Vulnerability|Class"
 msgstr ""
 
@@ -23467,7 +23470,10 @@ msgstr ""
 msgid "Vulnerability|Project"
 msgstr ""
 
-msgid "Vulnerability|Report Type"
+msgid "Vulnerability|Scanner Provider"
+msgstr ""
+
+msgid "Vulnerability|Scanner Type"
 msgstr ""
 
 msgid "Vulnerability|Severity"