Cancel events.

src/Squidex.Shared/Permissions.cs

@@ -99,6 +99,7 @@ namespace Squidex.Shared
 
         public const string AppRules = "squidex.apps.{app}.rules";
         public const string AppRulesRead = "squidex.apps.{app}.rules.read";
+        public const string AppRulesEvents = "squidex.apps.{app}.rules.events";
         public const string AppRulesCreate = "squidex.apps.{app}.rules.create";
         public const string AppRulesUpdate = "squidex.apps.{app}.rules.update";
         public const string AppRulesDisable = "squidex.apps.{app}.rules.disable";

src/Squidex/Areas/Api/Controllers/Rules/RulesController.cs

@@ -260,6 +260,7 @@ namespace Squidex.Areas.Api.Controllers.Rules
         /// </returns>
         [HttpPut]
         [Route("apps/{app}/rules/events/{id}/")]
+        [ApiPermission(Permissions.AppRulesEvents)]
         [ApiCosts(0)]
         public async Task<IActionResult> PutEvent(string app, Guid id)
         {
@@ -286,6 +287,7 @@ namespace Squidex.Areas.Api.Controllers.Rules
         /// </returns>
         [HttpDelete]
         [Route("apps/{app}/rules/events/{id}/")]
+        [ApiPermission(Permissions.AppRulesEvents)]
         [ApiCosts(0)]
         public async Task<IActionResult> DeleteEvent(string app, Guid id)
         {

src/Squidex/app/features/rules/pages/events/pipes.ts

@@ -15,7 +15,7 @@ export class RuleEventBadgeClassPipe implements PipeTransform {
     public transform(status: string) {
         if (status === 'Retry') {
             return 'warning';
-        } else if (status === 'Failed') {
+        } else if (status === 'Failed' || status === 'Cancelled') {
             return 'danger';
         } else if (status === 'Pending') {
             return 'secondary';

src/Squidex/app/features/rules/pages/events/rule-events-page.component.html

@@ -59,19 +59,19 @@
                             <h3>Last Invocation</h3>
                         </div>
                         
-                        <div class="row event-stats">
-                            <div class="col-4">
+                        <div class="row no-gutters event-stats">
+                            <div class="col-3">
                                 <span class="badge badge-pill badge-{{event.result | sqxRuleEventBadgeClass}}">{{event.result}}</span>
                             </div>
-                            <div class="col-4">
+                            <div class="col-2">
                                 Attempts: {{event.numCalls}}
                             </div>
                             <div class="col-4">
                                 Next: <ng-container *ngIf="event.nextAttempt">{{event.nextAttempt | sqxFromNow}}</ng-container>
                             </div>
-                            <div class="col-auto text-right">
-                                <button class="btn btn-success btn-sm" (click)="enqueue(event)">
-                                    Enqueue
+                            <div class="col-3 text-right">
+                                <button class="btn btn-outline-danger btn-sm mr-1" (click)="cancel(event)" [class.hidden]="!event.nextAttempt">
+                                    Cancel
                                 </button>
 
                                 <button class="btn btn-success btn-sm" (click)="enqueue(event)">

src/Squidex/app/features/rules/pages/events/rule-events-page.component.scss

@@ -13,7 +13,7 @@ h3 {
     &-stats {
         font-size: .8rem;
         font-weight: normal;
-        line-height: 1.5rem;
+        line-height: 2rem;
     }
 
     &-dump {