admin-dependencies.component.html

<div class="page-container">
  <div class="header-container">
    <div class="page-header">
      <h1 jhiTranslate="dependencies.title">Software Dependencies</h1>
    </div>
    <div class="flex items-center gap-2">
      <jhi-button
        severity="secondary"
        variant="outlined"
        size="sm"
        icon="sync"
        [label]="'dependencies.refreshVulnerabilities'"
        [shouldTranslate]="true"
        [disabled]="isRefreshing()"
        [loading]="isRefreshing()"
        (click)="refreshVulnerabilities()"
      />
      @if (dependenciesOverview()) {
        <jhi-button
          severity="primary"
          size="sm"
          icon="download"
          [label]="'dependencies.downloadSbom'"
          [shouldTranslate]="true"
          (click)="downloadDependencies()"
        />
      }
    </div>
  </div>

  @if (isLoading()) {
    <div class="flex justify-center py-16">
      <jhi-progress-spinner classStyling="w-12 h-12" strokeWidth="4" />
    </div>
  } @else if (dependenciesOverview(); as overview) {
    <!-- Info -->
    <jhi-info-box severity="info" message="dependencies.infoTitle" [shouldTranslate]="true">
      <p class="m-0 mt-2 text-sm text-text-secondary leading-relaxed">
        <span jhiTranslate="dependencies.vulnerabilityExplanation"></span>
        <a href="https://osv.dev" target="_blank" rel="noopener noreferrer" class="text-primary font-semibold no-underline hover:underline"
          >osv.dev</a
        >.
        <span jhiTranslate="dependencies.securityFeatureHighlight"></span>
      </p>
      <hr class="border-border-default my-2" />
      <p class="m-0 text-xs text-text-secondary leading-relaxed">
        <strong jhiTranslate="dependencies.infoServerLabel"></strong>
        <span jhiTranslate="dependencies.infoServerDesc"></span>
        <br />
        <strong jhiTranslate="dependencies.infoClientLabel"></strong>
        <span jhiTranslate="dependencies.infoClientDesc"></span>
      </p>
    </jhi-info-box>

    <!-- Summary -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-6">
      <div class="bg-background-surface border border-border-default rounded-lg p-5 text-center">
        <div class="text-3xl font-bold text-text-primary">{{ overview.dependencies?.length }}</div>
        <div class="text-sm text-text-secondary mt-1" jhiTranslate="dependencies.totalComponents"></div>
      </div>
      <div class="bg-background-surface border border-border-default rounded-lg p-5 text-center">
        <div class="text-3xl font-bold text-text-primary">{{ overview.serverCount }}</div>
        <div class="text-sm text-text-secondary mt-1" jhiTranslate="dependencies.serverComponents"></div>
      </div>
      <div class="bg-background-surface border border-border-default rounded-lg p-5 text-center">
        <div class="text-3xl font-bold text-text-primary">{{ overview.clientCount }}</div>
        <div class="text-sm text-text-secondary mt-1" jhiTranslate="dependencies.clientComponents"></div>
      </div>
      <div class="bg-background-surface border border-border-default rounded-lg p-5 text-center">
        <div
          class="text-3xl font-bold"
          [class.text-negative]="overview.totalVulnerabilities"
          [class.text-text-primary]="!overview.totalVulnerabilities"
        >
          {{ overview.totalVulnerabilities }}
        </div>
        <div
          class="text-sm text-text-secondary mt-1"
          [jhiTranslate]="overview.totalVulnerabilities === 1 ? 'dependencies.vulnerability' : 'dependencies.vulnerabilities'"
        ></div>
        <div class="flex justify-center gap-1.5 flex-wrap mt-2">
          <jhi-tag text="dependencies.severity.criticalCount" [translationParams]="{ count: overview.criticalCount ?? 0 }" color="danger" />
          <jhi-tag text="dependencies.severity.highCount" [translationParams]="{ count: overview.highCount ?? 0 }" color="warn" />
          <jhi-tag text="dependencies.severity.mediumCount" [translationParams]="{ count: overview.mediumCount ?? 0 }" color="warn" />
          <jhi-tag text="dependencies.severity.lowCount" [translationParams]="{ count: overview.lowCount ?? 0 }" color="secondary" />
        </div>
      </div>
    </div>

    <jhi-search-filter-sort-bar
      [searchText]="'dependencies.filterPlaceholder'"
      [totalRecords]="filteredDependencyCount()"
      [singleEntity]="'dependencies.dependency'"
      [multipleEntities]="'dependencies.dependencies'"
      [filters]="filters()"
      [sortableFields]="sortableFields"
      searchWidth="max-w-[30%]"
      (searchOutput)="onSearchChange($event)"
      (filterOutput)="onFilterChange($event)"
      (sortOutput)="onSortChange($event)"
    />

    <div class="mt-2">
      <jhi-dynamic-table
        [columns]="columns()"
        [data]="paginatedDependencies()"
        [totalRecords]="filteredDependencyCount()"
        [page]="currentPage()"
        [rows]="pageSize()"
        [rowsPerPageOptions]="rowsPerPageOptions"
        [loading]="isLoading()"
        [selectable]="false"
        (lazyLoad)="onPageChange($event)"
      />
    </div>
  } @else {
    <jhi-info-box severity="info" message="dependencies.notAvailable" [shouldTranslate]="true" />
  }

  <!-- Custom column templates (outside conditional so viewChild can resolve them) -->
  <ng-template #versionTemplate let-dep>
    <jhi-tag [text]="dep.version ?? ''" color="info" [shouldTranslate]="false" />
  </ng-template>

  <ng-template #securityTemplate let-dep>
    @if (dep.vulnerabilities?.length) {
      <div class="flex flex-col items-start gap-1">
        <jhi-tag
          text="dependencies.vulnerabilityCount"
          [translationParams]="{ count: dep.vulnerabilities.length }"
          [color]="dep.severityTagColor"
          [icon]="faExclamationTriangle"
        />
        <div class="flex flex-wrap items-center gap-1">
          @for (vuln of isVulnerabilityExpanded(dep) ? dep.vulnerabilities : dep.vulnerabilities.slice(0, 3); track vuln.id) {
            <a
              [href]="'https://osv.dev/vulnerability/' + vuln.id"
              target="_blank"
              rel="noopener noreferrer"
              class="no-underline hover:opacity-70 transition-opacity"
            >
              <jhi-tag [text]="vuln.id ?? ''" color="info" [shouldTranslate]="false" />
            </a>
          }
          @if (dep.vulnerabilities.length > 3) {
            <jhi-button
              [label]="isVulnerabilityExpanded(dep) ? 'dependencies.showLess' : 'dependencies.showMore'"
              [translationParams]="{ count: dep.vulnerabilities.length - 3 }"
              variant="text"
              severity="primary"
              size="xs"
              (click)="$event.stopPropagation(); toggleVulnerabilityExpansion(dep)"
            />
          }
        </div>
      </div>
    } @else {
      <jhi-tag text="dependencies.secure" color="success" [icon]="faShieldAlt" />
    }
  </ng-template>

  <ng-template #sourceTemplate let-dep>
    @if (dep.source === 'server') {
      <jhi-tag text="dependencies.sourceServer" color="primary" />
    } @else {
      <jhi-tag text="dependencies.sourceClient" color="info" />
    }
  </ng-template>
</div>