harbor/src/portal/src/app/project/webhook/webhook.component.html

113 lines
7.1 KiB
HTML

<div class="row">
<h4 class="mt-1">{{'WEBHOOK.WEBHOOKS' | translate}}</h4>
<clr-datagrid [clrDgLoading]="loadingWebhookList || loadingMetadata" [(clrDgSelected)]="selectedRow">
<clr-dg-action-bar>
<div class="clr-row">
<div class="clr-col-7">
<button [disabled]="!hasCreatPermission" [clrLoading]="addBtnState" id="new-webhook" type="button" class="btn btn-secondary" (click)="newWebhook()">
<clr-icon shape="plus" size="16"></clr-icon>
{{'WEBHOOK.NEW_WEBHOOK' | translate}}
</button>
<clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn btn-link" clrDropdownTrigger>
<span id="action-webhook">{{'MEMBER.ACTION' | translate}}
<clr-icon class="clr-icon" shape="caret down"></clr-icon></span>
<clr-dropdown-menu *clrIfOpen>
<button clrDropdownItem (click)="switchWebhookStatus()"
[disabled]="!(selectedRow && selectedRow.length === 1) || !hasUpdatePermission">
<span id="toggle-webhook">
<span *ngIf="selectedRow[0] && !selectedRow[0].enabled">
<clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
<span class="margin-left-10">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
</span>
<span *ngIf="!(selectedRow[0] && !selectedRow[0].enabled)">
<clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
<span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</span>
</span>
</button>
<button clrDropdownItem (click)="editWebhook()"
class="btn btn-secondary" [disabled]="!(selectedRow && selectedRow.length === 1) || !hasUpdatePermission">
<clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
<span id="edit-webhook" class="margin-left-10">{{'BUTTON.EDIT' | translate}}</span>
</button>
<div class="dropdown-divider"></div>
<button clrDropdownItem (click)="deleteWebhook()"
class="btn btn-secondary" [disabled]="!(selectedRow && selectedRow.length >= 1) || !hasUpdatePermission">
<clr-icon class="margin-top-0" size="16" shape="times"></clr-icon>
<span id="delete-webhook"
class="margin-left-10">{{'BUTTON.DELETE' | translate}}</span>
</button>
</clr-dropdown-menu>
</clr-dropdown>
</div>
<div class="clr-col-5">
<div class="action-head-pos">
<span class="refresh-btn">
<clr-icon shape="refresh" (click)="success()" [hidden]="loadingWebhookList || loadingMetadata"></clr-icon>
</span>
</div>
</div>
</div>
</clr-dg-action-bar>
<clr-dg-column [clrDgField]="'name'">{{'WEBHOOK.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'WEBHOOK.ENABLED' | translate}}</clr-dg-column>
<clr-dg-column>{{'WEBHOOK.NOTIFY_TYPE' | translate}}</clr-dg-column>
<clr-dg-column class="min-width-340">{{'WEBHOOK.TARGET' | translate}}</clr-dg-column>
<clr-dg-column>{{'WEBHOOK.EVENT_TYPES' | translate}}</clr-dg-column>
<clr-dg-column>{{'WEBHOOK.CREATED' | translate}}</clr-dg-column>
<clr-dg-column>{{'WEBHOOK.DESCRIPTION' | translate}}</clr-dg-column>
<clr-dg-placeholder>
{{'WEBHOOK.NO_WEBHOOK' | translate}}
</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let w of webhookList" [clrDgItem]="w">
<clr-dg-cell>{{w.name}}</clr-dg-cell>
<clr-dg-cell [ngSwitch]="w.enabled">
<div *ngSwitchCase="true" class="icon-wrap">
<clr-icon shape="check-circle" size="20" class="is-success enabled-icon"></clr-icon>
<span>{{'WEBHOOK.ENABLED' | translate}}</span>
</div>
<div *ngSwitchCase="false" class="icon-wrap">
<clr-icon shape="exclamation-triangle" size="20" class="is-warning"></clr-icon>
<span>{{'WEBHOOK.DISABLED' | translate}}</span>
</div>
</clr-dg-cell>
<clr-dg-cell>{{w?.targets[0].type}}</clr-dg-cell>
<clr-dg-cell>{{w?.targets[0].address}}</clr-dg-cell>
<clr-dg-cell class="event-types">
<div class="cell" *ngIf="w?.event_types?.length">
<div class="bar-state">
<span class="label-flex" *ngIf="w?.event_types[0]">{{eventTypeToText(w?.event_types[0])}}</span>
</div>
<div class="signpost-item" [hidden]="w?.event_types?.length<=1">
<div class="trigger-item">
<clr-signpost>
<button class="btn btn-link ellipsis-btn font-size-20" clrSignpostTrigger>...</button>
<clr-signpost-content [clrPosition]="'left-top'" *clrIfOpen>
<div>
<div *ngFor="let e of w?.event_types" class="bar-state">
<span class="label not-scan">{{eventTypeToText(e)}}</span>
</div>
</div>
</clr-signpost-content>
</clr-signpost>
</div>
</div>
</div>
</clr-dg-cell>
<clr-dg-cell>{{w.creation_time | date: 'short'}}</clr-dg-cell>
<clr-dg-cell>{{w.description}}</clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
<last-trigger class="w-100" [webhookName]="w.name" *clrIfExpanded [inputLastTriggers]="lastTriggers"></last-trigger>
</clr-dg-row-detail>
</clr-dg-row>
<clr-dg-footer>
<span *ngIf="webhookList?.length > 0">1 - {{webhookList?.length}} {{'WEBHOOK.OF' | translate}} </span> {{webhookList?.length}} {{'WEBHOOK.ITEMS' | translate}}
<clr-dg-pagination [clrDgPageSize]="10"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
<add-webhook (notify)="success()" [metadata]="metadata" [projectId]="projectId"></add-webhook>
<confirmation-dialog #confirmationDialogComponent (confirmAction)="confirmSwitch($event)"></confirmation-dialog>