Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-01-24 08:31:24 +01:00
Code Issues Projects Releases Wiki Activity

fix issue helmchart layout related issues

Browse Source 
1 Misc issues for chart repo card view
 2 Create group dialog ignores the error from backend
 3 The detail page of a scanned image has overlap of text fields.

Signed-off-by: Meina Zhou <meinaz@vmware.com>
This commit is contained in:
Meina Zhou 2018-08-16 16:11:09 +08:00
parent 2e4295ba52
commit c89fcd18f5
8 changed files with 79 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/ui_ng/lib/src/helm-chart/helm-chart.component.html
View File

@ -53,7 +53,7 @@
</div>
</div>
<div *ngIf="isCardView" class="row card-container">
<div *ngFor="let item of charts;" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div *ngFor="let item of charts;" class="chart-card">
<a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header">
<div class="card-icon">
@ -63,12 +63,12 @@
</div>
<div class="card-footer">
<div class="row flex-items-xs-between">
<div class="col-xs-6">
<div>
<span class="version-text">{{item.total_versions}}</span>
<label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
<label *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
<label class="card-label" *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label>
<label class="card-label" *ngIf="item.total_versions === 1">{{'HELM_CHART.VERSION' | translate}}</label>
</div>
<div class="col-xs-6">
<div>
<span class="label"
[class.label-danger]="item.deprecated"
[class.label-success]="!item.deprecated"

11
src/ui_ng/lib/src/helm-chart/helm-chart.component.scss
View File

@ -31,6 +31,10 @@ $size60:60px;
.card-container {
margin-top: 21px;
.chart-card {
width: 200px;
margin: 10px;
}
.card-header {
.card-icon {
@include flex-center;
@ -46,6 +50,11 @@ $size60:60px;
.version-text {
font-size:1.1rem;
}
.card-label {
width: 60px;
display: inline-block;
}
}
}
@ -62,7 +71,7 @@ $size60:60px;
.size-60 {
height:$size60;
max-width:165px;
max-width:100%;
}
.margin-right-12 {

2
src/ui_ng/lib/src/helm-chart/versions/helm-chart-version.component.html
View File

@ -82,7 +82,7 @@
<a let i=index; class="card clickable" (click)="onVersionClick(item)">
<div class="card-header">
<div class="card-media-block">
<img [src]="getImgLink(item)"/>
<img [src]="item.icon ?item.icon:chartDefaultIcon" (error)="getDefaultIcon(item);" />
<div class="card-media-description">
<span class="card-media-title">{{item.name}}</span>
<a class="card-media-text">{{item.home}}</a>

11
src/ui_ng/lib/src/service/helm-chart.service.ts
View File

@ -3,6 +3,7 @@ import { Http, Response, ResponseContentType } from "@angular/http";
import "rxjs/add/observable/of";
import { Observable } from "rxjs/Observable";
import {HttpErrorResponse} from "@angular/common/http";
import { RequestQueryParams } from "./RequestQueryParams";
import { HelmChartItem, HelmChartVersion, HelmChartDetail } from "./interface";
@ -131,8 +132,7 @@ export class HelmChartDefaultService extends HelmChartService {
}
}
private handleErrorObservable(error: Response | any) {
console.error(error.message || error);
private handleErrorObservable(error: HttpErrorResponse) {
return Observable.throw(error.message || error);
}
@ -213,6 +213,7 @@ export class HelmChartDefaultService extends HelmChartService {
.catch(this.handleErrorObservable);
}
public uploadChart(
projectName: string,
chart?: File,
@ -229,8 +230,10 @@ export class HelmChartDefaultService extends HelmChartService {
uploadURL = `${this.config.helmChartEndpoint}/${projectName}/prov`;
}
}
return this.http.post(uploadURL, formData)
.map(reponse => this.extractData(reponse))
return this.http.post(uploadURL, formData,{
responseType: ResponseContentType.Json
})
.map(response => this.extractData(response))
.catch(this.handleErrorObservable);
}
}

58
src/ui_ng/lib/src/tag/tag-detail.component.html
View File

@ -11,20 +11,28 @@
<div class="summary-block row">
<div class="image-summary col-md-4 col-sm-6">
<div class="flex-block">
<div class="image-detail-label">
<div>{{'TAG.AUTHOR' | translate }}</div>
<div>{{'TAG.ARCHITECTURE' | translate }}</div>
<div>{{'TAG.OS' | translate }}</div>
<div>{{'TAG.DOCKER_VERSION' | translate }}</div>
<div>{{'TAG.SCAN_COMPLETION_TIME' | translate }}</div>
</div>
<div class="image-detail-value">
<div>{{author | translate}}</div>
<div>{{tagDetails.architecture}}</div>
<div>{{tagDetails.os}}</div>
<div>{{tagDetails.docker_version}}</div>
<div>{{scanCompletedDatetime | date}}</div>
</div>
<section class="image-detail-label">
<section class="detail-row">
<label class="detail-label">{{'TAG.AUTHOR' | translate }}</label>
<div class="image-details" [title]="author | translate">{{author | translate}}</div>
</section>
<section class="detail-row">
<label class="detail-label">{{'TAG.ARCHITECTURE' | translate }}</label>
<div class="image-details" [title]="tagDetails.architecture">{{tagDetails.architecture}}</div>
</section>
<section class="detail-row">
<label class="detail-label">{{'TAG.OS' | translate }}</label>
<div class="image-details" [title]="tagDetails.os">{{tagDetails.os}}</div>
</section>
<section class="detail-row">
<label class="detail-label">{{'TAG.DOCKER_VERSION' | translate }}</label>
<div class="image-details" [title]="tagDetails.docker_version">{{tagDetails.docker_version}}</div>
</section>
<section class="detail-row">
<label class="detail-label">{{'TAG.SCAN_COMPLETION_TIME' | translate }}</label>
<div class="image-details" [title]="scanCompletedDatetime | date">{{scanCompletedDatetime | date}}</div>
</section>
</section>
</div>
</div>
<div *ngIf="withClair" class="col-md-4 col-sm-6">
@ -33,18 +41,28 @@
</div>
<div class="flex-block vulnerabilities-info">
<div class="second-column">
<div><clr-icon shape="error" size="24" class="is-error"></clr-icon> {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
<div class="second-row"><clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
<div><clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
<div class="second-row"><clr-icon shape="help" size="18"></clr-icon>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES' | translate }}</div>
<div>
<clr-icon shape="error" size="24" class="is-error"></clr-icon> {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES'
| translate }}</div>
<div class="second-row">
<clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES'
| translate }}</div>
<div>
<clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES'
| translate }}</div>
<div class="second-row">
<clr-icon shape="help" size="18"></clr-icon>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES'
| translate }}</div>
</div>
</div>
</div>
<div *ngIf="!withAdmiral && tagDetails?.labels?.length" >
<div *ngIf="!withAdmiral && tagDetails?.labels?.length">
<div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
<div class="fourth-column">
<div *ngFor="let label of tagDetails.labels" style="margin-bottom: 2px;"><hbr-label-piece [label]="label"></hbr-label-piece></div>
<div *ngFor="let label of tagDetails.labels" style="margin-bottom: 2px;">
<hbr-label-piece [label]="label"></hbr-label-piece>
</div>
</div>
</div>
</div>

10
src/ui_ng/lib/src/tag/tag-detail.component.scss
View File

@ -1,3 +1,4 @@
@import "../mixin";
.overview-section {
padding-bottom: 36px;
}
@ -103,6 +104,15 @@ margin-left:20px;}
margin-right: 10px;
text-align: left;
font-weight: 600;
.detail-row {
display: flex;
.detail-label {
flex:0 0 150px;
}
.image-details {
@include text-overflow-param(200px);
}
}
}
.image-detail-value {

6
src/ui_ng/lib/src/tag/tag-detail.component.spec.ts
View File

@ -140,11 +140,9 @@ describe('TagDetailComponent (inline template)', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
let el: HTMLElement = fixture.nativeElement.querySelector('.image-detail-value');
let el: HTMLElement = fixture.nativeElement.querySelector('.image-detail-label .image-details');
expect(el).toBeTruthy();
let el2: HTMLElement = el.querySelector('div');
expect(el2).toBeTruthy();
expect(el2.textContent).toEqual("steven");
expect(el.textContent).toEqual("steven");
});
}));

9
src/ui_ng/src/app/shared/shared.utils.ts
View File

@ -26,10 +26,13 @@ import { httpStatusCode, AlertType } from './shared.const';
* @returns {string}
*/
export const errorHandler = function (error: any): string {
let errorObj = error.json();
if (errorObj && errorObj.error) {
if (error && error._body) {
// treat as string message
return errorObj.error;
if (typeof error._body === "string") {
return error._body;
} else if (error._body.error) {
return error._body.error;
}
} else {
switch (error.statusCode || error.status) {
case 400: