Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-03 05:21:38 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5642 from zhoumeina/pr/fix_chart_card_view_issues

Browse Source 
fix issue helmchart layout related issues
This commit is contained in:
Mia ZHOU 2018-08-17 14:45:51 +08:00 committed by GitHub
commit e3a755ea14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> </div>
<div *ngIf="isCardView" class="row card-container"> <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)"> <a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header"> <div class="card-header">
<div class="card-icon"> <div class="card-icon">
@ -63,12 +63,12 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="row flex-items-xs-between"> <div class="row flex-items-xs-between">
<div class="col-xs-6"> <div>
<span class="version-text">{{item.total_versions}}</span> <span class="version-text">{{item.total_versions}}</span>
<label *ngIf="item.total_versions !== 1">{{'HELM_CHART.CHARTVERSIONS' | translate}}</label> <label class="card-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.VERSION' | translate}}</label>
</div> </div>
<div class="col-xs-6"> <div>
<span class="label" <span class="label"
[class.label-danger]="item.deprecated" [class.label-danger]="item.deprecated"
[class.label-success]="!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 { .card-container {
margin-top: 21px; margin-top: 21px;
.chart-card {
width: 200px;
margin: 10px;
}
.card-header { .card-header {
.card-icon { .card-icon {
@include flex-center; @include flex-center;
@ -46,6 +50,11 @@ $size60:60px;
.version-text { .version-text {
font-size:1.1rem; font-size:1.1rem;
} }
.card-label {
width: 60px;
display: inline-block;
}
} }
} }
@ -62,7 +71,7 @@ $size60:60px;
.size-60 { .size-60 {
height:$size60; height:$size60;
max-width:165px; max-width:100%;
} }
.margin-right-12 { .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)"> <a let i=index; class="card clickable" (click)="onVersionClick(item)">
<div class="card-header"> <div class="card-header">
<div class="card-media-block"> <div class="card-media-block">
<img [src]="getImgLink(item)"/> <img [src]="item.icon ?item.icon:chartDefaultIcon" (error)="getDefaultIcon(item);" />
<div class="card-media-description"> <div class="card-media-description">
<span class="card-media-title">{{item.name}}</span> <span class="card-media-title">{{item.name}}</span>
<a class="card-media-text">{{item.home}}</a> <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 "rxjs/add/observable/of";
import { Observable } from "rxjs/Observable"; import { Observable } from "rxjs/Observable";
import {HttpErrorResponse} from "@angular/common/http";
import { RequestQueryParams } from "./RequestQueryParams"; import { RequestQueryParams } from "./RequestQueryParams";
import { HelmChartItem, HelmChartVersion, HelmChartDetail } from "./interface"; import { HelmChartItem, HelmChartVersion, HelmChartDetail } from "./interface";
@ -131,8 +132,7 @@ export class HelmChartDefaultService extends HelmChartService {
} }
} }
private handleErrorObservable(error: Response | any) { private handleErrorObservable(error: HttpErrorResponse) {
console.error(error.message || error);
return Observable.throw(error.message || error); return Observable.throw(error.message || error);
} }
@ -213,6 +213,7 @@ export class HelmChartDefaultService extends HelmChartService {
.catch(this.handleErrorObservable); .catch(this.handleErrorObservable);
} }
public uploadChart( public uploadChart(
projectName: string, projectName: string,
chart?: File, chart?: File,
@ -229,8 +230,10 @@ export class HelmChartDefaultService extends HelmChartService {
uploadURL = `${this.config.helmChartEndpoint}/${projectName}/prov`; uploadURL = `${this.config.helmChartEndpoint}/${projectName}/prov`;
} }
} }
return this.http.post(uploadURL, formData) return this.http.post(uploadURL, formData,{
.map(reponse => this.extractData(reponse)) responseType: ResponseContentType.Json
})
.map(response => this.extractData(response))
.catch(this.handleErrorObservable); .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="summary-block row">
<div class="image-summary col-md-4 col-sm-6"> <div class="image-summary col-md-4 col-sm-6">
<div class="flex-block"> <div class="flex-block">
<div class="image-detail-label"> <section class="image-detail-label">
<div>{{'TAG.AUTHOR' | translate }}</div> <section class="detail-row">
<div>{{'TAG.ARCHITECTURE' | translate }}</div> <label class="detail-label">{{'TAG.AUTHOR' | translate }}</label>
<div>{{'TAG.OS' | translate }}</div> <div class="image-details" [title]="author | translate">{{author | translate}}</div>
<div>{{'TAG.DOCKER_VERSION' | translate }}</div> </section>
<div>{{'TAG.SCAN_COMPLETION_TIME' | translate }}</div> <section class="detail-row">
</div> <label class="detail-label">{{'TAG.ARCHITECTURE' | translate }}</label>
<div class="image-detail-value"> <div class="image-details" [title]="tagDetails.architecture">{{tagDetails.architecture}}</div>
<div>{{author | translate}}</div> </section>
<div>{{tagDetails.architecture}}</div> <section class="detail-row">
<div>{{tagDetails.os}}</div> <label class="detail-label">{{'TAG.OS' | translate }}</label>
<div>{{tagDetails.docker_version}}</div> <div class="image-details" [title]="tagDetails.os">{{tagDetails.os}}</div>
<div>{{scanCompletedDatetime | date}}</div> </section>
</div> <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> </div>
<div *ngIf="withClair" class="col-md-4 col-sm-6"> <div *ngIf="withClair" class="col-md-4 col-sm-6">
@ -33,18 +41,28 @@
</div> </div>
<div class="flex-block vulnerabilities-info"> <div class="flex-block vulnerabilities-info">
<div class="second-column"> <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>
<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> <clr-icon shape="error" size="24" class="is-error"></clr-icon> {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}&nbsp;{{'TAG.LEVEL_VULNERABILITIES'
<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> | 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 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>
</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="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
<div class="fourth-column"> <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> </div>
</div> </div>

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

@ -1,3 +1,4 @@
@import "../mixin";
.overview-section { .overview-section {
padding-bottom: 36px; padding-bottom: 36px;
} }
@ -103,6 +104,15 @@ margin-left:20px;}
margin-right: 10px; margin-right: 10px;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
.detail-row {
display: flex;
.detail-label {
flex:0 0 150px;
}
.image-details {
@include text-overflow-param(200px);
}
}
} }
.image-detail-value { .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.whenStable().then(() => {
fixture.detectChanges(); 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(); expect(el).toBeTruthy();
let el2: HTMLElement = el.querySelector('div'); expect(el.textContent).toEqual("steven");
expect(el2).toBeTruthy();
expect(el2.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} * @returns {string}
*/ */
export const errorHandler = function (error: any): string { export const errorHandler = function (error: any): string {
let errorObj = error.json(); if (error && error._body) {
if (errorObj && errorObj.error) {
// treat as string message // 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 { } else {
switch (error.statusCode || error.status) { switch (error.statusCode || error.status) {
case 400: case 400: