From ba5fd67b08333f2fb8b5964f632315a726776dc0 Mon Sep 17 00:00:00 2001 From: AllForNothing Date: Thu, 2 Apr 2020 14:03:35 +0800 Subject: [PATCH] Improve webhook UI according to the UX Signed-off-by: AllForNothing --- .../add-webhook-form.component.html | 10 ++++----- .../add-webhook-form.component.scss | 6 ++++++ .../add-webhook-form.component.spec.ts | 3 +++ .../add-webhook-form.component.ts | 3 +++ .../add-webhook/add-webhook.component.scss | 3 +++ .../last-trigger/last-trigger.component.html | 2 +- .../last-trigger.component.spec.ts | 8 +++++++ .../last-trigger/last-trigger.component.ts | 6 +++++- .../project/webhook/webhook.component.html | 13 ++++++------ .../project/webhook/webhook.component.scss | 2 +- .../project/webhook/webhook.component.spec.ts | 3 +++ .../app/project/webhook/webhook.component.ts | 11 +++++++++- .../project/webhook/webhook.service.spec.ts | 7 +++++++ .../app/project/webhook/webhook.service.ts | 21 +++++++++++++++++++ src/portal/src/i18n/lang/en-us-lang.json | 2 +- src/portal/src/i18n/lang/es-es-lang.json | 2 +- src/portal/src/i18n/lang/fr-fr-lang.json | 2 +- src/portal/src/i18n/lang/pt-br-lang.json | 2 +- src/portal/src/i18n/lang/tr-tr-lang.json | 2 +- 19 files changed, 88 insertions(+), 20 deletions(-) diff --git a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html index f4428c6b23..65182c5faa 100644 --- a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html +++ b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html @@ -27,7 +27,7 @@ - @@ -35,9 +35,9 @@
-
+
- +
@@ -92,12 +92,12 @@
- +
- +
\ No newline at end of file diff --git a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss index bafd18d06f..94284186cb 100644 --- a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss +++ b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss @@ -10,4 +10,10 @@ } .width-238 { width: 238px; +} +.width-7rem { + width: 7rem; +} +.clr-control-label { + width: 9rem !important; } \ No newline at end of file diff --git a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts index 6070c40cad..b1a441801a 100644 --- a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts +++ b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts @@ -27,6 +27,9 @@ describe('AddWebhookFormComponent', () => { }, testEndpoint() { return of(null); + }, + eventTypeToText(eventType: string) { + return eventType; } }; const mockMessageHandlerService = { diff --git a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.ts b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.ts index 3af1f4971e..2f4e6a59d1 100644 --- a/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.ts +++ b/src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.ts @@ -129,4 +129,7 @@ export class AddWebhookFormComponent implements OnInit { && this.webhook.event_types && this.webhook.event_types.length > 0; } + eventTypeToText(eventType: string): string { + return this.webhookService.eventTypeToText(eventType); + } } diff --git a/src/portal/src/app/project/webhook/add-webhook/add-webhook.component.scss b/src/portal/src/app/project/webhook/add-webhook/add-webhook.component.scss index e69de29bb2..54e218914d 100644 --- a/src/portal/src/app/project/webhook/add-webhook/add-webhook.component.scss +++ b/src/portal/src/app/project/webhook/add-webhook/add-webhook.component.scss @@ -0,0 +1,3 @@ +:host::ng-deep.modal-dialog { + width: 27rem; +} \ No newline at end of file diff --git a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.html b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.html index b748ab3637..4ec8936f65 100644 --- a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.html +++ b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.html @@ -4,7 +4,7 @@ {{'WEBHOOK.STATUS' | translate}} {{'WEBHOOK.LAST_TRIGGERED' | translate}} - {{item.event_type}} + {{eventTypeToText(item.event_type)}}
diff --git a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.spec.ts b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.spec.ts index f57ee6c947..0ccb4e103c 100644 --- a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.spec.ts +++ b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.spec.ts @@ -5,6 +5,8 @@ import { SharedModule } from "../../../shared/shared.module"; import { LastTriggerComponent } from "./last-trigger.component"; import { LastTrigger } from "../webhook"; import { SimpleChange } from "@angular/core"; +import { of } from "rxjs"; +import { WebhookService } from "../webhook.service"; describe('LastTriggerComponent', () => { const mokedTriggers: LastTrigger[] = [ @@ -23,6 +25,11 @@ describe('LastTriggerComponent', () => { last_trigger_time: null } ]; + const mockWebhookService = { + eventTypeToText(eventType: string) { + return eventType; + } + }; let component: LastTriggerComponent; let fixture: ComponentFixture; beforeEach(() => { @@ -35,6 +42,7 @@ describe('LastTriggerComponent', () => { declarations: [ LastTriggerComponent ], + providers: [{ provide: WebhookService, useValue: mockWebhookService }] }); }); beforeEach(() => { diff --git a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.ts b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.ts index 33b0dab962..ab4c210fc3 100644 --- a/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.ts +++ b/src/portal/src/app/project/webhook/last-trigger/last-trigger.component.ts @@ -3,6 +3,7 @@ import { OnInit, SimpleChanges } from "@angular/core"; import { LastTrigger } from "../webhook"; +import { WebhookService } from "../webhook.service"; @Component({ @@ -14,7 +15,7 @@ export class LastTriggerComponent implements OnInit , OnChanges { @Input() inputLastTriggers: LastTrigger[]; @Input() webhookName: string; lastTriggers: LastTrigger[] = []; - constructor() { + constructor(private webhookService: WebhookService) { } ngOnChanges(changes: SimpleChanges): void { if (changes && changes['inputLastTriggers']) { @@ -28,4 +29,7 @@ export class LastTriggerComponent implements OnInit , OnChanges { } ngOnInit(): void { } + eventTypeToText(eventType: string): string { + return this.webhookService.eventTypeToText(eventType); + } } diff --git a/src/portal/src/app/project/webhook/webhook.component.html b/src/portal/src/app/project/webhook/webhook.component.html index cd350825ee..2c610b7d9b 100644 --- a/src/portal/src/app/project/webhook/webhook.component.html +++ b/src/portal/src/app/project/webhook/webhook.component.html @@ -30,6 +30,7 @@ {{'BUTTON.EDIT' | translate}} +
{{'WEBHOOK.NAME' | translate}} - {{'WEBHOOK.NOTIFY_TYPE' | translate}} - {{'WEBHOOK.TARGET' | translate}} {{'WEBHOOK.ENABLED' | translate}} + {{'WEBHOOK.NOTIFY_TYPE' | translate}} + {{'WEBHOOK.TARGET' | translate}} {{'WEBHOOK.EVENT_TYPES' | translate}} {{'WEBHOOK.CREATED' | translate}} {{'WEBHOOK.DESCRIPTION' | translate}} @@ -60,8 +61,6 @@ {{w.name}} - {{w?.targets[0].type}} - {{w?.targets[0].address}}
@@ -72,10 +71,12 @@ {{'WEBHOOK.DISABLED' | translate}}
+ {{w?.targets[0].type}} + {{w?.targets[0].address}}
- {{w?.event_types[0]}} + {{eventTypeToText(w?.event_types[0])}}
@@ -84,7 +85,7 @@
- {{e}} + {{eventTypeToText(e)}}
diff --git a/src/portal/src/app/project/webhook/webhook.component.scss b/src/portal/src/app/project/webhook/webhook.component.scss index ea270b6ae8..290c4cb848 100644 --- a/src/portal/src/app/project/webhook/webhook.component.scss +++ b/src/portal/src/app/project/webhook/webhook.component.scss @@ -55,6 +55,6 @@ justify-content: flex-end; align-items: center; } -.width-340 { +.min-width-340 { min-width: 340px!important; } \ No newline at end of file diff --git a/src/portal/src/app/project/webhook/webhook.component.spec.ts b/src/portal/src/app/project/webhook/webhook.component.spec.ts index 0da4d8c4e1..ce140a190c 100644 --- a/src/portal/src/app/project/webhook/webhook.component.spec.ts +++ b/src/portal/src/app/project/webhook/webhook.component.spec.ts @@ -73,6 +73,9 @@ describe('WebhookComponent', () => { }, editWebhook() { return of(true); + }, + eventTypeToText(eventType: string) { + return eventType; } }; const mockActivatedRoute = { diff --git a/src/portal/src/app/project/webhook/webhook.component.ts b/src/portal/src/app/project/webhook/webhook.component.ts index 91f176ad30..9c42b22135 100644 --- a/src/portal/src/app/project/webhook/webhook.component.ts +++ b/src/portal/src/app/project/webhook/webhook.component.ts @@ -83,7 +83,13 @@ export class WebhookComponent implements OnInit { response => { this.metadata = response; if (this.metadata && this.metadata.event_type) { - this.metadata.event_type.sort(); + // sort by text + this.metadata.event_type.sort((a: string, b: string) => { + if (this.eventTypeToText(a) === this.eventTypeToText(b)) { + return 0; + } + return this.eventTypeToText(a) > this.eventTypeToText(b) ? 1 : -1; + }); } }, error => { @@ -222,4 +228,7 @@ export class WebhookComponent implements OnInit { ); this.confirmationDialogComponent.open(msg); } + eventTypeToText(eventType: string): string { + return this.webhookService.eventTypeToText(eventType); + } } diff --git a/src/portal/src/app/project/webhook/webhook.service.spec.ts b/src/portal/src/app/project/webhook/webhook.service.spec.ts index 00bd96e1ad..59a6299d85 100644 --- a/src/portal/src/app/project/webhook/webhook.service.spec.ts +++ b/src/portal/src/app/project/webhook/webhook.service.spec.ts @@ -15,4 +15,11 @@ describe('WebhookService', () => { it('should be created', inject([WebhookService], (service: WebhookService) => { expect(service).toBeTruthy(); })); + it('function eventTypeToText should work', inject([WebhookService], (service: WebhookService) => { + expect(service).toBeTruthy(); + const eventType: string = 'REPLICATION'; + expect(service.eventTypeToText(eventType)).toEqual('Replication finished'); + const mockedEventType: string = 'TEST'; + expect(service.eventTypeToText(mockedEventType)).toEqual('TEST'); + })); }); diff --git a/src/portal/src/app/project/webhook/webhook.service.ts b/src/portal/src/app/project/webhook/webhook.service.ts index 3a761a3a0d..18d09247b3 100644 --- a/src/portal/src/app/project/webhook/webhook.service.ts +++ b/src/portal/src/app/project/webhook/webhook.service.ts @@ -18,6 +18,20 @@ import { HttpClient } from "@angular/common/http"; import { Webhook, LastTrigger } from "./webhook"; import { CURRENT_BASE_HREF } from "../../../lib/utils/utils"; +const EVENT_TYPES_TEXT_MAP = { + 'REPLICATION': 'Replication finished', + 'PUSH_ARTIFACT': 'Artifact pushed', + 'PULL_ARTIFACT': 'Artifact pulled', + 'DELETE_ARTIFACT': 'Artifact deleted', + 'DOWNLOAD_CHART': 'Chart downloaded', + 'UPLOAD_CHART': 'Chart uploaded', + 'DELETE_CHART': 'Chart deleted', + 'QUOTA_EXCEED': 'Quota exceed', + 'QUOTA_WARNING': 'Quota near threshold', + 'SCANNING_FAILED': 'Scanning failed', + 'SCANNING_COMPLETED': 'Scanning finished', +}; + @Injectable() export class WebhookService { constructor(private http: HttpClient) { } @@ -66,4 +80,11 @@ export class WebhookService { .get(`${CURRENT_BASE_HREF}/projects/${projectId}/webhook/events`) .pipe(catchError(error => observableThrowError(error))); } + + public eventTypeToText(eventType: string): string { + if (EVENT_TYPES_TEXT_MAP[eventType]) { + return EVENT_TYPES_TEXT_MAP[eventType]; + } + return eventType; + } } diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json index dc74afe4d7..2bbf6e04de 100644 --- a/src/portal/src/i18n/lang/en-us-lang.json +++ b/src/portal/src/i18n/lang/en-us-lang.json @@ -393,7 +393,7 @@ "ENABLE": "Enable", "DISABLE": "Disable", "NAME": "Name", - "TARGET": "Target", + "TARGET": "Endpoint URL", "EVENT_TYPES": "Event types", "DESCRIPTION": "Description", "NO_WEBHOOK": "No Webhook", diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json index 9341a367ea..1898eaff3f 100644 --- a/src/portal/src/i18n/lang/es-es-lang.json +++ b/src/portal/src/i18n/lang/es-es-lang.json @@ -394,7 +394,7 @@ "ENABLE": "Enable", "DISABLE": "Disable", "NAME": "Name", - "TARGET": "Target", + "TARGET": "Endpoint URL", "EVENT_TYPES": "Event types", "DESCRIPTION": "Description", "NO_WEBHOOK": "No Webhook", diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json index e6295d17b3..184457cd98 100644 --- a/src/portal/src/i18n/lang/fr-fr-lang.json +++ b/src/portal/src/i18n/lang/fr-fr-lang.json @@ -385,7 +385,7 @@ "ENABLE": "Enable", "DISABLE": "Disable", "NAME": "Name", - "TARGET": "Target", + "TARGET": "Endpoint URL", "EVENT_TYPES": "Event types", "DESCRIPTION": "Description", "NO_WEBHOOK": "No Webhook", diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json index 7b11e29694..8c7f853867 100644 --- a/src/portal/src/i18n/lang/pt-br-lang.json +++ b/src/portal/src/i18n/lang/pt-br-lang.json @@ -423,7 +423,7 @@ "ENABLE": "Enable", "DISABLE": "Disable", "NAME": "Name", - "TARGET": "Target", + "TARGET": "Endpoint URL", "EVENT_TYPES": "Event types", "DESCRIPTION": "Description", "NO_WEBHOOK": "No Webhook", diff --git a/src/portal/src/i18n/lang/tr-tr-lang.json b/src/portal/src/i18n/lang/tr-tr-lang.json index 0854eb291f..307714fa61 100644 --- a/src/portal/src/i18n/lang/tr-tr-lang.json +++ b/src/portal/src/i18n/lang/tr-tr-lang.json @@ -393,7 +393,7 @@ "ENABLE": "Enable", "DISABLE": "Disable", "NAME": "Name", - "TARGET": "Target", + "TARGET": "Endpoint URL", "EVENT_TYPES": "Event types", "DESCRIPTION": "Description", "NO_WEBHOOK": "No Webhook",