From c89fcd18f598508c7f01c795aed76439bbb86515 Mon Sep 17 00:00:00 2001 From: Meina Zhou Date: Thu, 16 Aug 2018 16:11:09 +0800 Subject: [PATCH] fix issue helmchart layout related issues 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 --- .../src/helm-chart/helm-chart.component.html | 10 ++-- .../src/helm-chart/helm-chart.component.scss | 11 +++- .../helm-chart-version.component.html | 2 +- .../lib/src/service/helm-chart.service.ts | 11 ++-- .../lib/src/tag/tag-detail.component.html | 58 ++++++++++++------- .../lib/src/tag/tag-detail.component.scss | 10 ++++ .../lib/src/tag/tag-detail.component.spec.ts | 6 +- src/ui_ng/src/app/shared/shared.utils.ts | 9 ++- 8 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html index a4006cde8..864d71052 100644 --- a/src/ui_ng/lib/src/helm-chart/helm-chart.component.html +++ b/src/ui_ng/lib/src/helm-chart/helm-chart.component.html @@ -53,7 +53,7 @@
-
+
@@ -63,12 +63,12 @@
-
+
{{item.total_versions}} - - + +
-
+
- +
{{item.name}} {{item.home}} diff --git a/src/ui_ng/lib/src/service/helm-chart.service.ts b/src/ui_ng/lib/src/service/helm-chart.service.ts index 99f936eb9..d97538067 100644 --- a/src/ui_ng/lib/src/service/helm-chart.service.ts +++ b/src/ui_ng/lib/src/service/helm-chart.service.ts @@ -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); } } diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html b/src/ui_ng/lib/src/tag/tag-detail.component.html index 2ce7f05c1..cadbb49a0 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.html +++ b/src/ui_ng/lib/src/tag/tag-detail.component.html @@ -11,20 +11,28 @@
-
-
{{'TAG.AUTHOR' | translate }}
-
{{'TAG.ARCHITECTURE' | translate }}
-
{{'TAG.OS' | translate }}
-
{{'TAG.DOCKER_VERSION' | translate }}
-
{{'TAG.SCAN_COMPLETION_TIME' | translate }}
-
-
-
{{author | translate}}
-
{{tagDetails.architecture}}
-
{{tagDetails.os}}
-
{{tagDetails.docker_version}}
-
{{scanCompletedDatetime | date}}
-
+
+
+ +
{{author | translate}}
+
+
+ +
{{tagDetails.architecture}}
+
+
+ +
{{tagDetails.os}}
+
+
+ +
{{tagDetails.docker_version}}
+
+
+ +
{{scanCompletedDatetime | date}}
+
+
@@ -33,18 +41,28 @@
-
{{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{'TAG.LEVEL_VULNERABILITIES' | translate }}
-
{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{'TAG.LEVEL_VULNERABILITIES' | translate }}
-
{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{'TAG.LEVEL_VULNERABILITIES' | translate }}
-
{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{'TAG.LEVEL_VULNERABILITIES' | translate }}
+
+ {{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{'TAG.LEVEL_VULNERABILITIES' + | translate }}
+
+ {{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{'TAG.LEVEL_VULNERABILITIES' + | translate }}
+
+ {{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{'TAG.LEVEL_VULNERABILITIES' + | translate }}
+
+ {{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{'TAG.LEVEL_VULNERABILITIES' + | translate }}
-
+
{{'TAG.LABELS' | translate }}
-
+
+ +
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.scss b/src/ui_ng/lib/src/tag/tag-detail.component.scss index b1894a310..1b426ad82 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.scss +++ b/src/ui_ng/lib/src/tag/tag-detail.component.scss @@ -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 { diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts index 015b2220f..1528c7098 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts @@ -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"); }); })); diff --git a/src/ui_ng/src/app/shared/shared.utils.ts b/src/ui_ng/src/app/shared/shared.utils.ts index 5b1654cf3..cdc173c17 100644 --- a/src/ui_ng/src/app/shared/shared.utils.ts +++ b/src/ui_ng/src/app/shared/shared.utils.ts @@ -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: