Update vulnerabilities query to be agent-specific

- add clusterAgentID field
- update tests

app/assets/javascripts/clusters/agents/components/show.vue

@@ -122,7 +122,7 @@ export default {
       </p>
 
       <gl-tabs sync-active-tab-with-query-params lazy>
-        <slot name="ee-security-tab"></slot>
+        <slot name="ee-security-tab" :cluster-agent-id="clusterAgent.id"></slot>
 
         <gl-tab :title="$options.i18n.activity" query-param-value="activity">
           <activity-events :agent-name="agentName" :project-path="projectPath" />

ee/app/assets/javascripts/clusters/agents/components/show.vue

@@ -27,9 +27,9 @@ export default {
 
 <template>
   <agent-show-page>
-    <template v-if="showSecurityTab" #ee-security-tab>
+    <template v-if="showSecurityTab" #ee-security-tab="{ clusterAgentId }">
       <gl-tab :title="$options.i18n.securityTabTitle">
-        <agent-vulnerability-report />
+        <agent-vulnerability-report :cluster-agent-id="clusterAgentId" />
       </gl-tab>
     </template>
   </agent-show-page>

ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue

@@ -34,23 +34,26 @@ export default {
     };
   },
   inject: ['projectPath'],
+  props: {
+    clusterAgentId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
-      graphqlFilters: undefined,
+      graphqlFilters: { clusterAgentId: [this.clusterAgentId] },
     };
   },
-  computed: {
-    filtersToShow() {
-      return FILTER_PRESETS[REPORT_TAB.OPERATIONAL];
-    },
-  },
   methods: {
     updateGraphqlFilters(graphqlFilters) {
       this.graphqlFilters = graphqlFilters;
       this.graphqlFilters.reportType = REPORT_TYPE_PRESETS.OPERATIONAL;
+      this.graphqlFilters.clusterAgentId = [this.clusterAgentId];
     },
   },
   fieldsToShow: FIELD_PRESETS[REPORT_TAB.OPERATIONAL],
+  filtersToShow: FILTER_PRESETS[REPORT_TAB.OPERATIONAL],
   REPORT_TAB,
   projectVulnerabilitiesQuery,
 };
@@ -59,7 +62,7 @@ export default {
 <template>
   <div>
     <vulnerability-filters
-      :filters="filtersToShow"
+      :filters="$options.filtersToShow"
       class="security-dashboard-filters gl-mt-7"
       @filters-changed="updateGraphqlFilters"
     />

ee/app/assets/javascripts/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql

@@ -14,6 +14,7 @@ query projectVulnerabilities(
   $hasResolution: Boolean
   $includeExternalIssueLinks: Boolean = false
   $vetEnabled: Boolean = false
+  $clusterAgentId: [ClustersAgentID!]
 ) {
   project(fullPath: $fullPath) {
     id
@@ -28,6 +29,7 @@ query projectVulnerabilities(
       sort: $sort
       hasIssues: $hasIssues
       hasResolution: $hasResolution
+      clusterAgentId: $clusterAgentId
     ) {
       nodes {
         ...VulnerabilityFragment

ee/spec/frontend/clusters/agents/components/show_spec.js

 import { GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ClusterAgentShow from 'ee/clusters/agents/components/show.vue';
+import AgentShowPage from '~/clusters/agents/components/show.vue';
+import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/agent_vulnerability_report.vue';
 
 describe('ClusterAgentShow', () => {
   let wrapper;
 
+  const clusterAgentId = 'gid://gitlab/Clusters::Agent/1';
+  const AgentShowPageStub = stubComponent(AgentShowPage, {
+    provide: { agentName: 'test', projectPath: 'test' },
+    template: `<div><slot name="ee-security-tab" clusterAgentId="${clusterAgentId}"></slot></div>`,
+  });
+
   const createWrapper = ({ glFeatures = {} } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(ClusterAgentShow, {
         provide: { glFeatures },
+        stubs: {
+          AgentShowPage: AgentShowPageStub,
+        },
       }),
     );
   };
 
+  const findAgentVulnerabilityReport = () => wrapper.findComponent(AgentVulnerabilityReport);
   const findTab = () => wrapper.findComponent(GlTab);
 
   afterEach(() => {
@@ -34,4 +47,14 @@ describe('ClusterAgentShow', () => {
       expect(findTab().exists()).toBe(tabStatus);
     });
   });
+
+  describe('vulnerability report', () => {
+    it('renders with cluster agent id', async () => {
+      createWrapper({
+        glFeatures: { clusterVulnerabilities: true, kubernetesClusterVulnerabilities: true },
+      });
+      await nextTick();
+      expect(findAgentVulnerabilityReport().props('clusterAgentId')).toBe(clusterAgentId);
+    });
+  });
 });

ee/spec/frontend/security_dashboard/components/agent/__snapshots__/agent_vulnerability_report_spec.js.snap

@@ -9,6 +9,7 @@ exports[`Agent vulnerability report component renders 1`] = `
    
   <vulnerability-list-graphql-stub
     fields="[object Object],[object Object],[object Object],[object Object],,[object Object]"
+    filters="[object Object]"
     query="[object Object]"
   />
 </div>

ee/spec/frontend/security_dashboard/components/agent/agent_vulnerability_report_spec.js

@@ -4,10 +4,11 @@ import AgentVulnerabilityReport from 'ee/security_dashboard/components/agent/age
 describe('Agent vulnerability report component', () => {
   let wrapper;
 
+  const propsData = { clusterAgentId: 'gid://gitlab/Clusters::Agent/1' };
   const provide = { agentName: 'primary-agent', projectPath: '/path/to/project/' };
 
   const createWrapper = () => {
-    wrapper = shallowMount(AgentVulnerabilityReport, { provide });
+    wrapper = shallowMount(AgentVulnerabilityReport, { propsData, provide });
   };
 
   afterEach(() => {