diff --git a/apps/frontend/src/components/cards/sbomview/ComponentContent.vue b/apps/frontend/src/components/cards/sbomview/ComponentContent.vue index 625269125e..02a02999f3 100644 --- a/apps/frontend/src/components/cards/sbomview/ComponentContent.vue +++ b/apps/frontend/src/components/cards/sbomview/ComponentContent.vue @@ -197,6 +197,7 @@ function jsonToTabFormat(value: Object): Omit { const customRender = [ 'affectingVulnerabilities', 'properties', + 'externalReferences', 'component', 'parents', 'children', @@ -235,6 +236,16 @@ function generateTabs( } if (generalProps.tableData!.rows.length > 0) tabs.unshift(generalProps); + const externalReferences = _.get(object, 'externalReferences'); + if (externalReferences) { + tabs.push({ + name: `${prefix}${' External References'}`, + ...jsonToTabFormat( + externalReferences.map((reference) => _.omit(reference, 'hashes')) + ) + }); + } + // These are properties on `object` used to include arbitrary data from external tools if (object.properties) tabs.push(...generateTabsFromProperties(object.properties, prefix)); @@ -323,6 +334,7 @@ export default class ComponentContent extends Vue { }); } + // show components that this component depends on if (this.component.children.length) { tabs.push({ name: 'Dependencies', @@ -330,6 +342,7 @@ export default class ComponentContent extends Vue { }); } + // show components that depend on this component if (this.component.parents.length) { tabs.push({ name: 'Parents',