License and supplier tab now shows package version and allows click-t…

…hrough to package manager web page
rhyskoedijk · Dec 3, 2024 · 2f448d7 · 2f448d7
1 parent 5cada85
commit 2f448d7
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/shared/spdx/convertSpdxToXlsx.ts b/shared/spdx/convertSpdxToXlsx.ts
@@ -253,7 +253,7 @@ export async function convertSpdxToXlsxAsync(spdx: IDocument): Promise<Buffer> {
       .map((license: ILicense) => {
         const packagesWithLicense = packages
           .filter((p) => getPackageLicenseExpression(p)?.includes(license.licenseId))
-          .map((p) => p.name || '')
+          .map((p) => `${p.name || ''}@${p.versionInfo || ''}`)
           .distinct();
         const licenseRisk = getLicenseRiskAssessment(license.licenseId);
         return {
@@ -282,7 +282,7 @@ export async function convertSpdxToXlsxAsync(spdx: IDocument): Promise<Buffer> {
       .map((supplier: string) => {
         const packagesFromSupplier = packages
           .filter((p) => getPackageSupplierOrganization(p) == supplier)
-          .map((p) => p.name || '')
+          .map((p) => `${p.name || ''}@${p.versionInfo || ''}`)
           .distinct();
         return {
           name: supplier || '',

diff --git a/ui/components/SpdxLicenseTableCard.tsx b/ui/components/SpdxLicenseTableCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Card } from 'azure-devops-ui/Card';
 import { IReadonlyObservableValue, ObservableArray, ObservableValue } from 'azure-devops-ui/Core/Observable';
+import { Link } from 'azure-devops-ui/Link';
 import { Pill, PillSize, PillVariant } from 'azure-devops-ui/Pill';
 import {
   ColumnSorting,
@@ -20,14 +21,19 @@ import { getLicenseRiskAssessment, LicenseRiskSeverity } from '../../shared/ghsa
 import { ISeverity } from '../../shared/models/severity/ISeverity';
 import { getSeverityByName } from '../../shared/models/severity/Severities';
 import { IDocument } from '../../shared/models/spdx/2.3/IDocument';
+import { getExternalRefPackageManagerUrl } from '../../shared/models/spdx/2.3/IExternalRef';
 import { ILicense } from '../../shared/models/spdx/2.3/ILicense';
 import { getPackageLicenseExpression } from '../../shared/models/spdx/2.3/IPackage';
 
 interface ILicenseTableItem {
   id: string;
   name: string;
   packageCount: number;
-  packages: string[];
+  packages: {
+    name: string;
+    version: string;
+    url?: string;
+  }[];
   riskSeverity: ISeverity;
   riskReasons: string[];
   url: string;
@@ -70,8 +76,13 @@ export class SpdxLicenseTableCard extends React.Component<Props, State> {
         ?.map((license: ILicense) => {
           const packagesWithLicense = props.document.packages
             ?.filter((p) => getPackageLicenseExpression(p)?.includes(license.licenseId))
-            ?.map((p) => p.name || '')
-            ?.distinct();
+            ?.map((p) => {
+              return {
+                name: p.name || '',
+                version: p.versionInfo || '',
+                url: getExternalRefPackageManagerUrl(p.externalRefs),
+              };
+            });
           const licenseRisk = getLicenseRiskAssessment(license.licenseId);
           return {
             id: license.licenseId,
@@ -165,7 +176,7 @@ export class SpdxLicenseTableCard extends React.Component<Props, State> {
         (item) =>
           !keyword ||
           item.name?.toLowerCase()?.includes(keyword.toLowerCase()) ||
-          item.packages?.some((p) => p.toLowerCase().includes(keyword.toLowerCase())),
+          item.packages?.some((p) => p.name.toLowerCase().includes(keyword.toLowerCase())),
       );
       tableItems.splice(0, tableItems.length, ...filteredItems);
     };
@@ -278,7 +289,15 @@ function renderPackagesCell(
     children: (
       <div className="bolt-table-cell-content flex-row flex-wrap flex-gap-4">
         {tableItem.packages.map((pkg, index) => (
-          <span key={index}>{pkg}; </span>
+          <Link
+            key={index}
+            className="bolt-table-link bolt-table-link-inline"
+            href={pkg.url}
+            target={pkg.url ? '_blank' : undefined}
+            excludeTabStop
+          >
+            {pkg.name} <span className="secondary-text">{pkg.version}</span>
+          </Link>
         ))}
       </div>
     ),

diff --git a/ui/components/SpdxSupplierTableCard.tsx b/ui/components/SpdxSupplierTableCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Card } from 'azure-devops-ui/Card';
 import { IReadonlyObservableValue, ObservableArray, ObservableValue } from 'azure-devops-ui/Core/Observable';
+import { Link } from 'azure-devops-ui/Link';
 import {
   ColumnSorting,
   ITableColumn,
@@ -15,13 +16,18 @@ import { FILTER_CHANGE_EVENT, IFilter } from 'azure-devops-ui/Utilities/Filter';
 import { ZeroData } from 'azure-devops-ui/ZeroData';
 
 import { IDocument } from '../../shared/models/spdx/2.3/IDocument';
+import { getExternalRefPackageManagerUrl } from '../../shared/models/spdx/2.3/IExternalRef';
 import { getPackageSupplierOrganization } from '../../shared/models/spdx/2.3/IPackage';
 
 interface ISupplierTableItem {
   id: string;
   name: string;
   packageCount: number;
-  packages: string[];
+  packages: {
+    name: string;
+    version: string;
+    url?: string;
+  }[];
 }
 
 interface Props {
@@ -58,8 +64,13 @@ export class SpdxSupplierTableCard extends React.Component<Props, State> {
         ?.map((supplier: string) => {
           const packagesFromSupplier = props.document.packages
             ?.filter((p) => getPackageSupplierOrganization(p) == supplier)
-            ?.map((p) => p.name || '')
-            ?.distinct();
+            ?.map((p) => {
+              return {
+                name: p.name || '',
+                version: p.versionInfo || '',
+                url: getExternalRefPackageManagerUrl(p.externalRefs),
+              };
+            });
           return {
             id: supplier || '',
             name: supplier || '',
@@ -150,7 +161,7 @@ export class SpdxSupplierTableCard extends React.Component<Props, State> {
         (item) =>
           !keyword ||
           item.name?.toLowerCase()?.includes(keyword.toLowerCase()) ||
-          item.packages?.some((p) => p.toLowerCase().includes(keyword.toLowerCase())),
+          item.packages?.some((p) => p.name.toLowerCase().includes(keyword.toLowerCase())),
       );
       tableItems.splice(0, tableItems.length, ...filteredItems);
     };
@@ -229,7 +240,15 @@ function renderPackagesCell(
     children: (
       <div className="bolt-table-cell-content flex-row flex-wrap flex-gap-4">
         {tableItem.packages.map((pkg, index) => (
-          <span key={index}>{pkg}; </span>
+          <Link
+            key={index}
+            className="bolt-table-link bolt-table-link-inline"
+            href={pkg.url}
+            target={pkg.url ? '_blank' : undefined}
+            excludeTabStop
+          >
+            {pkg.name} <span className="secondary-text">{pkg.version}</span>
+          </Link>
         ))}
       </div>
     ),