feat(asset.controller.ts): add open vulnerability modal to asset

Updated the asset open vulnerability column to show a modal of a list of all open asset
vulnerabilities

feat #862

frontend/src/app/app.module.ts

@@ -51,6 +51,7 @@ import { SelectButtonModule } from 'primeng/selectbutton';
 import { ListboxModule } from 'primeng/listbox';
 import { UserFormComponent } from './user-form/user-form.component';
 import { ApikeyManagementComponent } from './apikey-management/apikey-management.component';
+import { DialogModule } from 'primeng/dialog';
 @NgModule({
   declarations: [
     AppComponent,
@@ -101,6 +102,7 @@ import { ApikeyManagementComponent } from './apikey-management/apikey-management
     PasswordModule,
     SelectButtonModule,
     ListboxModule,
+    DialogModule,
   ],
   providers: [
     AppService,

frontend/src/app/app.service.ts

@@ -88,6 +88,15 @@ export class AppService {
       });
   }
 
+  /**
+   * Function returns all open vulnerabilities by Asset ID
+   * @param assetId
+   * @returns open asset vulnerabilities
+   */
+  getOpenVulnsByAssetId(assetId: number) {
+    return this.http.get(`${this.api}/asset/${assetId}/open/vulnerabilities`);
+  }
+
   /**
    * Function returns all archived assets related to the organization ID
    * @param id is the ID of the organization

frontend/src/app/organization/organization.component.html

@@ -33,7 +33,7 @@
         <td>{{ asset?.name }}</td>
         <td>{{asset?.jira?.id ? 'Yes' : 'No'}}</td>
         <td>{{ asset?.status === 'A' ? 'Active':'Archived' }}</td>
-        <td>{{asset?.openVulnCount}}</td>
+        <td><a (click)="showOpenVulnsModal(asset.id, asset.name)">{{asset?.openVulnCount}}</a></td>
         <td>
           <button *ngIf="!isArchive" class="btn btn-secondary" type="button" style="margin-right: 10px;"
             data-toggle="tooltip" (click)="navigateToAsset(asset.id)" c data-placement="bottom" title="Edit Asset">
@@ -73,4 +73,54 @@
     <button (click)="navigateToCreateAsset()" *ngIf="!isArchive && isAdmin" type="button" class="btn btn-primary ">
       Add Asset
     </button>
+    <p-dialog header="{{assetNameHeader}} Open Vulnerabilities" [(visible)]="displayOpenVulnModal" modal="true"
+      [style]="{width: '70vw'}">
+      <p-table #vulnTable [value]="openVulns" [paginator]="true" [rows]="10" styleClass="p-datatable-striped">
+        <ng-template pTemplate="header">
+          <tr>
+            <th pSortableColumn="id">ID<p-sortIcon field="id"></p-sortIcon>
+            </th>
+            <th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon>
+            </th>
+            <th pSortableColumn="risk">Risk<p-sortIcon field="risk"></p-sortIcon>
+            </th>
+            <th pSortableColumn="systemic">Systemic<p-sortIcon field="systemic"></p-sortIcon>
+            </th>
+            <th pSortableColumn="cvssScore">CVSS Score<p-sortIcon field="cvssScore"></p-sortIcon>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <input pInputText type="text" (input)="vulnTable.filter($event.target.value, 'id', 'equals')"
+                placeholder="Search by ID" class="p-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="vulnTable.filter($event.target.value, 'name', 'contains')"
+                placeholder="Search by Name" class="p-column-filter">
+            </th>
+            <th>
+              <p-multiSelect [options]="risks" placeholder="All" (onChange)="onRiskChange($event)" optionLabel="name"
+                styleClass="p-column-filter">
+                <ng-template let-option pTemplate="item">
+                  <div class="p-multiselect-representative-option">
+                    <span class="p-ml-1">{{option.name}}</span>
+                  </div>
+                </ng-template>
+              </p-multiSelect>
+            </th>
+            <th></th>
+            <th></th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-vuln>
+          <tr>
+            <td>{{vuln?.id}}</td>
+            <td>{{vuln?.name}}</td>
+            <td>{{vuln?.risk}}</td>
+            <td>{{vuln?.systemic}}</td>
+            <td>{{vuln?.cvssScore}}</td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </p-dialog>
   </div>

frontend/src/app/organization/organization.component.ts

@@ -16,8 +16,18 @@ export class OrganizationComponent implements OnInit {
   org: any;
   isArchive = false;
   isAdmin: boolean;
+  displayOpenVulnModal = false;
+  openVulns: any = [];
+  assetNameHeader: string;
   @ViewChild('dt') table: Table;
-
+  @ViewChild('vulnTable') vulnTable: Table;
+  risks = [
+    { name: 'Informational' },
+    { name: 'Low' },
+    { name: 'Medium' },
+    { name: 'High' },
+    { name: 'Critical' },
+  ];
   constructor(
     public activatedRoute: ActivatedRoute,
     public router: Router,
@@ -94,6 +104,19 @@ export class OrganizationComponent implements OnInit {
     this.router.navigate([`organization/${this.orgId}/asset-form/${assetId}`]);
   }
 
+  /**
+   * Function responsible for navigating the user to the assets open vulnereabilities
+   * @param assetId asset ID passed required
+   */
+  showOpenVulnsModal(assetId: number, assetName: string) {
+    this.displayOpenVulnModal = true;
+    this.assetNameHeader = assetName;
+    this.openVulns = [];
+    this.appService.getOpenVulnsByAssetId(assetId).subscribe((openVulns) => {
+      this.openVulns = openVulns;
+    });
+  }
+
   /**
    * Function responsible for archiving an asset
    */
@@ -118,4 +141,9 @@ export class OrganizationComponent implements OnInit {
       });
     }
   }
+
+  onRiskChange(event) {
+    const selectedRiskAry = event.value.map((x) => x.name);
+    this.vulnTable.filter(selectedRiskAry, 'risk', 'in');
+  }
 }

src/app.ts

@@ -146,6 +146,11 @@ createConnection().then((_) => {
     jwtMiddleware.checkToken,
     assetController.getAssetById
   );
+  app.get(
+    '/api/asset/:assetId/open/vulnerabilities',
+    jwtMiddleware.checkToken,
+    assetController.getOpenVulnsByAsset
+  );
   app.get(
     '/api/assessment/:id',
     jwtMiddleware.checkToken,

src/routes/asset.controller.ts

@@ -114,6 +114,31 @@ export const getOpenVulnCountByAsset = async (asset: Asset) => {
     .getCount();
   return vulnCount;
 };
+/**
+ * @description Fetch open vulnerabilities by asset ID
+ * @param {Asset} asset
+ * @returns array of vulnerabilities
+ */
+export const getOpenVulnsByAsset = async (req: UserRequest, res: Response) => {
+  const assetAccess = await hasAssetReadAccess(req, +req.params.assetId);
+  if (!assetAccess) {
+    return res.status(404).json('Asset not found');
+  }
+  const vulns = await getConnection()
+    .getRepository(Vulnerability)
+    .createQueryBuilder('vuln')
+    .leftJoinAndSelect('vuln.assessment', 'assessment')
+    .leftJoinAndSelect('assessment.asset', 'asset')
+    .where('asset.id = :assetId', {
+      assetId: req.params.assetId,
+    })
+    .andWhere('vuln.status = :status', {
+      status: 'Open',
+    })
+    .select(['vuln'])
+    .getMany();
+  return res.status(200).json(vulns);
+};
 /**
  * @description API backend for creating an asset associated by org ID
  * @param {UserRequest} req