Improve webhook UI (#18325)

1. Add text format for payload data
2. Delete payload_format for Slack

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/base/project/webhook/add-webhook-form/add-webhook-form.component.ts

@@ -19,6 +19,7 @@ import {
     PAYLOAD_FORMATS,
     PAYLOAD_FORMAT_I18N_MAP,
     ProjectWebhookService,
+    WebhookType,
 } from '../webhook.service';
 import { compareValue } from '../../../../shared/units/utils';
 import { InlineAlertComponent } from '../../../../shared/components/inline-alert/inline-alert.component';
@@ -78,6 +79,7 @@ export class AddWebhookFormComponent implements OnInit, OnDestroy {
             this._nameSubscription = null;
         }
     }
+
     reset() {
         this.isNameExisting = false;
         this._nameSubject.next('');
@@ -96,7 +98,7 @@ export class AddWebhookFormComponent implements OnInit, OnDestroy {
                         ) {
                             return false;
                         }
-                        return name.length > 0;
+                        return name?.length > 0;
                     }),
                     switchMap(name => {
                         this.isNameExisting = false;
@@ -130,6 +132,9 @@ export class AddWebhookFormComponent implements OnInit, OnDestroy {
 
     add() {
         this.submitting = true;
+        if (this.webhook?.targets[0]?.type === WebhookType.SLACK) {
+            delete this.webhook?.targets[0]?.payload_format;
+        }
         this.webhookService
             .CreateWebhookPolicyOfProject({
                 projectNameOrId: this.projectId.toString(),
@@ -150,6 +155,9 @@ export class AddWebhookFormComponent implements OnInit, OnDestroy {
 
     save() {
         this.submitting = true;
+        if (this.webhook?.targets[0]?.type === WebhookType.SLACK) {
+            delete this.webhook?.targets[0]?.payload_format;
+        }
         this.webhookService
             .UpdateWebhookPolicyOfProject({
                 projectNameOrId: this.projectId.toString(),

src/portal/src/app/base/project/webhook/excutions/executions.component.html

@@ -65,15 +65,26 @@
                 </clr-tooltip></clr-dg-cell
             >
             <clr-dg-cell>
-                <span class="label-flex">
+                <span
+                    class="label-flex"
+                    *ngIf="execution?.extra_attrs?.event_type">
                     {{ eventTypeToText(execution?.extra_attrs?.event_type) }}
                 </span>
             </clr-dg-cell>
             <clr-dg-cell class="flex">
                 <clr-signpost>
-                    <a class="btn btn-link link-normal" clrSignpostTrigger>{{
-                        toString(toJson(execution?.extra_attrs?.payload))
-                    }}</a>
+                    <a class="btn btn-link link-normal" clrSignpostTrigger>
+                        <span *ngIf="useJsonFormat(execution?.vendor_type)">
+                            {{
+                                toString(
+                                    toJson(execution?.extra_attrs?.payload)
+                                )
+                            }}
+                        </span>
+                        <span *ngIf="!useJsonFormat(execution?.vendor_type)">
+                            {{ execution?.extra_attrs?.payload }}
+                        </span>
+                    </a>
                     <clr-signpost-content
                         class="pre"
                         [clrPosition]="'top-middle'"
@@ -83,12 +94,17 @@
                             [defaultValue]="
                                 toString(execution?.extra_attrs?.payload)
                             "></hbr-copy-input>
+                        <pre *ngIf="!useJsonFormat(execution?.vendor_type)">{{
+                            execution?.extra_attrs?.payload
+                        }}</pre>
                         <pre
                             [innerHTML]="
                                 toJson(execution?.extra_attrs?.payload)
                                     | json
                                     | markdown
-                            "></pre>
+                            "
+                            class="abc"
+                            *ngIf="useJsonFormat(execution?.vendor_type)"></pre>
                     </clr-signpost-content>
                 </clr-signpost>
             </clr-dg-cell>

src/portal/src/app/base/project/webhook/excutions/executions.component.ts

@@ -16,7 +16,7 @@ import {
     EXECUTION_STATUS,
     TIME_OUT,
 } from '../../p2p-provider/p2p-provider.service';
-import { ProjectWebhookService } from '../webhook.service';
+import { ProjectWebhookService, VendorType } from '../webhook.service';
 
 @Component({
     selector: 'app-executions',
@@ -172,4 +172,8 @@ export class ExecutionsComponent implements OnDestroy {
     eventTypeToText(eventType: any): string {
         return this.projectWebhookService.eventTypeToText(eventType);
     }
+
+    useJsonFormat(vendorType: string): boolean {
+        return vendorType === VendorType.WEBHOOK;
+    }
 }

src/portal/src/app/base/project/webhook/webhook.service.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
+import { MarkdownPipe } from 'ngx-markdown/src/markdown.pipe';
 
 const EVENT_TYPES_TEXT_MAP = {
     REPLICATION: 'Replication finished',
@@ -36,6 +37,16 @@ export const PAYLOAD_FORMAT_I18N_MAP = {
     [PAYLOAD_FORMATS[1]]: 'WEBHOOK.CLOUD_EVENT',
 };
 
+export enum WebhookType {
+    HTTP = 'http',
+    SLACK = 'slack',
+}
+
+export enum VendorType {
+    WEBHOOK = 'WEBHOOK',
+    SLACK = 'SLACK',
+}
+
 @Injectable()
 export class ProjectWebhookService {
     constructor() {}