Skip to content

Commit

Permalink
Add Security Hub UI (#18942)
Browse files Browse the repository at this point in the history
1.Fixes #18819
2.Add Security Hub page as a new tab for Interrogation Services

Signed-off-by: AllForNothing <[email protected]>
  • Loading branch information
AllForNothing authored Jul 20, 2023
1 parent b08dce4 commit 73533d8
Show file tree
Hide file tree
Showing 44 changed files with 2,114 additions and 48 deletions.
3 changes: 2 additions & 1 deletion src/portal/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"options": {
"allowedCommonJsDependencies": [
"cron-validator",
"js-yaml"
"js-yaml",
"highcharts"
],
"outputPath": "dist",
"index": "src/index.html",
Expand Down
6 changes: 6 additions & 0 deletions src/portal/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions src/portal/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"cron-validator": "^1.3.1",
"highcharts": "^11.1.0",
"js-yaml": "^4.1.0",
"ngx-clipboard": "^15.1.0",
"ngx-cookie": "^6.0.1",
Expand All @@ -66,6 +67,7 @@
"@types/node": "^16.11.6",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"cypress": "12.12.0",
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
Expand All @@ -86,7 +88,6 @@
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard": "^29.0.0",
"stylelint-config-standard-scss": "^6.1.0",
"typescript": "~5.0.4",
"cypress": "12.12.0"
"typescript": "~5.0.4"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import {
ChangeDetectorRef,
Component,
ElementRef,
OnDestroy,
OnInit,
ViewChild,
OnDestroy,
ElementRef,
ChangeDetectorRef,
} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { AppConfigService } from '../../services/app-config.service';
import { ModalEvent } from '../modal-event';
Expand Down Expand Up @@ -192,5 +192,6 @@ export class HarborShellComponent implements OnInit, OnDestroy {
if (localStorage) {
localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
}
this.event.publish(HarborEvent.THEME_CHANGE);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ <h2 class="custom-h2" sub-header-title>
>{{ 'CONFIG.VULNERABILITY' | translate }}</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
routerLink="security-hub"
routerLinkActive="active"
>{{ 'SECURITY_HUB.SECURITY_HUB' | translate }}</a
>
</li>
</ul>
</nav>
<router-outlet></router-outlet>
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ import {
ScanApiDefaultRepository,
ScanApiRepository,
} from './vulnerability/scanAll.api.repository';
import { VulnerabilitySummaryComponent } from './vulnerability-database/vulnerability-summary/vulnerability-summary.component';
import { VulnerabilityFilterComponent } from './vulnerability-database/vulnerability-filter/vulnerability-filter.component';
import { SecurityHubComponent } from './vulnerability-database/security-hub.component';
import { SingleBarComponent } from './vulnerability-database/single-bar/single-bar.component';

const routes: Routes = [
{
Expand All @@ -40,6 +44,10 @@ const routes: Routes = [
path: 'vulnerability',
component: VulnerabilityConfigComponent,
},
{
path: 'security-hub',
component: SecurityHubComponent,
},
{
path: '',
redirectTo: 'scanners',
Expand All @@ -57,6 +65,10 @@ const routes: Routes = [
ConfigurationScannerComponent,
InterrogationServicesComponent,
VulnerabilityConfigComponent,
VulnerabilityFilterComponent,
VulnerabilitySummaryComponent,
SecurityHubComponent,
SingleBarComponent,
],
providers: [
ScanAllRepoService,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<app-vulnerability-summary
(searchCVE)="searchCVE($event)"
(searchRepo)="searchRepo($event)"></app-vulnerability-summary>
<h1 appScrollSection="{{ vulId }}">{{ 'SECURITY_HUB.VUL' | translate }}</h1>

<clr-datagrid
[clrDgLoading]="loading"
(clrDgRefresh)="clrDgRefresh($event, options)">
<clr-dg-action-bar class="action-bar">
<app-vulnerability-filter
[loading]="loading"
(search)="search($event)"></app-vulnerability-filter>
<span class="refresh-btn" (click)="refresh()">
<clr-icon shape="refresh"></clr-icon>
</span>
</clr-dg-action-bar>
<clr-dg-column class="min-width">{{
'SECURITY_HUB.CVE_ID' | translate
}}</clr-dg-column>
<clr-dg-column class="min-width">{{
'SECURITY_HUB.REPO_NAME' | translate
}}</clr-dg-column>
<clr-dg-column class="min-width">{{
'P2P_PROVIDER.DIGEST' | translate
}}</clr-dg-column>
<clr-dg-column>{{ 'AUDIT_LOG.TAGS' | translate }}</clr-dg-column>
<clr-dg-column>{{ 'VULNERABILITY.GRID.CVSS3' | translate }}</clr-dg-column>
<clr-dg-column>{{
'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate
}}</clr-dg-column>
<clr-dg-column class="min-width">{{
'VULNERABILITY.PACKAGE' | translate
}}</clr-dg-column>
<clr-dg-column>{{
'VULNERABILITY.GRID.COLUMN_VERSION' | translate
}}</clr-dg-column>
<clr-dg-column>{{
'VULNERABILITY.GRID.COLUMN_FIXED' | translate
}}</clr-dg-column>
<clr-dg-placeholder
>{{ 'SECURITY_HUB.NO_VUL' | translate }}
</clr-dg-placeholder>
<clr-dg-row *ngFor="let c of vul" [clrDgItem]="c">
<clr-dg-cell class="min-width">
<span *ngIf="!c?.links || c?.links?.length === 0">{{
c.cve_id
}}</span>
<a
rel="noopener noreferrer"
*ngIf="c?.links && c?.links.length === 1"
href="{{ c?.links[0] }}"
target="_blank"
>{{ c.cve_id }}</a
>
<span *ngIf="c?.links && c?.links.length > 1">
{{ c.cve_id }}
<clr-signpost>
<clr-signpost-content *clrIfOpen>
<div class="mt-5px" *ngFor="let link of c?.links">
<a
rel="noopener noreferrer"
href="{{ link }}"
target="_blank"
>{{ link }}</a
>
</div>
</clr-signpost-content>
</clr-signpost>
</span>
</clr-dg-cell>
<clr-dg-cell class="ellipsis min-width" title="{{ c.repository_name }}">
<a
href="javascript:void(0)"
[routerLink]="getRepoLink(c.project_id, c.repository_name)"
>{{ c.repository_name }}</a
>
</clr-dg-cell>
<clr-dg-cell class="ellipsis min-width" title="{{ c?.digest }}">
<a
href="javascript:void(0)"
[routerLink]="
getDigestLink(c.project_id, c.repository_name, c.digest)
"
>{{ c?.digest?.slice(0, 15) }}</a
>
</clr-dg-cell>
<clr-dg-cell class="ellipsis" title="{{ c.tags?.join(', ') }}">{{
c.tags?.join(', ')
}}</clr-dg-cell>
<clr-dg-cell>{{ c.cvss_v3_score }}</clr-dg-cell>
<clr-dg-cell [ngSwitch]="c.severity">
<span
*ngSwitchCase="'Critical'"
class="label label-critical no-border"
>{{ severityText(c.severity) | translate }}</span
>
<span *ngSwitchCase="'High'" class="label label-danger no-border">{{
severityText(c.severity) | translate
}}</span>
<span
*ngSwitchCase="'Medium'"
class="label label-medium no-border"
>{{ severityText(c.severity) | translate }}</span
>
<span *ngSwitchCase="'Low'" class="label label-low no-border">{{
severityText(c.severity) | translate
}}</span>
<span *ngSwitchCase="'None'" class="label label-none no-border">{{
severityText(c.severity) | translate
}}</span>
<span *ngSwitchDefault>{{
severityText(c.severity) | translate
}}</span>
</clr-dg-cell>
<clr-dg-cell class="ellipsis" title="{{ c.package }}">{{
c.package
}}</clr-dg-cell>
<clr-dg-cell class="ellipsis" title="{{ c.version }}">{{
c.version
}}</clr-dg-cell>
<clr-dg-cell class="ellipsis" title="{{ c.fixed_version }}">{{
c.fixed_version
}}</clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
{{ 'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate }}:
{{ c.desc }}
</clr-dg-row-detail>
</clr-dg-row>
<clr-dg-footer>
<span class="mr-1"
>{{ total === -1 ? '1000+' : total }}
{{ 'SECURITY_HUB.CVE' | translate }}</span
>
<clr-dg-pagination
#pagination
[clrDgTotalItems]="total === -1 ? maxNum : total"
[clrDgPageSize]="pageSize"
[(clrDgPage)]="currentPage">
<clr-dg-page-size [clrPageSizeOptions]="[10, 25, 50]">{{
'PAGINATION.PAGE_SIZE' | translate
}}</clr-dg-page-size>
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
.flex {
display: flex;
}

.label-critical {
background:red;
color:#621501;
}


.label-danger {
background:#e64524!important;
color:#621501!important;
}

.label-medium {
background-color: orange;
color:#621501;
}

.label-low {
background: #007CBB;
color:#cab6b1;
}

.label-none {
background-color: grey;
color:#bad7ba;
}

.no-border {
border: none;
}


.action-bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
}

.refresh-btn {
margin-right: 2rem;
cursor: pointer;

&:hover {
color: #007CBB;
}
}

.repo-name {
min-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.min-width {
min-width: 9rem !important;
}
Loading

0 comments on commit 73533d8

Please sign in to comment.