V13: Change WebhookLog status for clarity (#15247)

* Refactor to show icon and status code to make status more clear

* Fix up migration

* Add change log status migration

* Fix up frontend to display cross when fail

---------

Co-authored-by: Zeegaan <nge@umbraco.dk>

src/Umbraco.Core/Services/WebhookLogFactory.cs

@@ -1,4 +1,5 @@
-using Umbraco.Cms.Core.Models;
+using System.Net;
+using Umbraco.Cms.Core.Models;
 using Umbraco.Cms.Core.Webhooks;
 
 namespace Umbraco.Cms.Core.Services;
@@ -20,7 +21,7 @@ public class WebhookLogFactory : IWebhookLogFactory
         {
             log.RequestBody = await responseModel.HttpResponseMessage!.RequestMessage!.Content!.ReadAsStringAsync(cancellationToken);
             log.ResponseBody = await responseModel.HttpResponseMessage.Content.ReadAsStringAsync(cancellationToken);
-            log.StatusCode = responseModel.HttpResponseMessage.StatusCode.ToString();
+            log.StatusCode = MapStatusCodeToMessage(responseModel.HttpResponseMessage.StatusCode);
             log.RetryCount = responseModel.RetryCount;
             log.ResponseHeaders = responseModel.HttpResponseMessage.Headers.ToString();
             log.RequestHeaders = responseModel.HttpResponseMessage.RequestMessage.Headers.ToString();
@@ -28,4 +29,6 @@ public class WebhookLogFactory : IWebhookLogFactory
 
         return log;
     }
+
+    private string MapStatusCodeToMessage(HttpStatusCode statusCode) => $"{statusCode.ToString()} ({(int)statusCode})";
 }

src/Umbraco.Infrastructure/Migrations/Upgrade/UmbracoPlan.cs

@@ -101,5 +101,6 @@ public class UmbracoPlan : MigrationPlan
         To<V_13_0_0.AddWebhookRequest>("{4E652F18-9A29-4656-A899-E3F39069C47E}");
         To<V_13_0_0.RenameWebhookIdToKey>("{148714C8-FE0D-4553-B034-439D91468761}");
         To<V_13_0_0.AddWebhookDatabaseLock>("{23BA95A4-FCCE-49B0-8AA1-45312B103A9B}");
+        To<V_13_0_0.ChangeLogStatusCode>("{7DDCE198-9CA4-430C-8BBC-A66D80CA209F}");
     }
 }

src/Umbraco.Infrastructure/Migrations/Upgrade/V_13_0_0/ChangeLogStatusCode.cs

@@ -0,0 +1,45 @@
+using System.Net;
+using NPoco;
+using Umbraco.Cms.Core;
+using Umbraco.Cms.Infrastructure.Persistence;
+using Umbraco.Cms.Infrastructure.Persistence.Dtos;
+using Umbraco.Extensions;
+
+namespace Umbraco.Cms.Infrastructure.Migrations.Upgrade.V_13_0_0;
+
+public class ChangeLogStatusCode : MigrationBase
+{
+    public ChangeLogStatusCode(IMigrationContext context) : base(context)
+    {
+    }
+
+    protected override void Migrate()
+    {
+        if (!TableExists(Constants.DatabaseSchema.Tables.WebhookLog))
+        {
+            return;
+        }
+
+        Sql<ISqlContext> fetchQuery = Database.SqlContext.Sql()
+            .Select<WebhookLogDto>()
+            .From<WebhookLogDto>();
+
+        // Use a custom SQL query to prevent selecting explicit columns (sortOrder doesn't exist yet)
+        List<WebhookLogDto> webhookLogDtos = Database.Fetch<WebhookLogDto>(fetchQuery);
+
+        Sql<ISqlContext> deleteQuery = Database.SqlContext.Sql()
+            .Delete<WebhookLogDto>();
+
+        Database.Execute(deleteQuery);
+
+        foreach (WebhookLogDto webhookLogDto in webhookLogDtos)
+        {
+            if (Enum.TryParse(webhookLogDto.StatusCode, out HttpStatusCode statusCode))
+            {
+                webhookLogDto.StatusCode = $"{statusCode.ToString()} ({(int)statusCode})";
+            }
+        }
+
+        Database.InsertBatch(webhookLogDtos);
+    }
+}

src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js

@@ -55,7 +55,7 @@
     }
 
     function isChecked(log) {
-      return log.statusCode === "OK";
+      return log.statusCode === "OK (200)";
     }
 
     init();

src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html

@@ -16,8 +16,9 @@
           <umb-checkmark
             ng-if="vm.isChecked(log)"
             checked="vm.isChecked(log)"
-            size="xs">
+            size="m">
           </umb-checkmark>
+          <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="!vm.isChecked(log)"></umb-icon>
         </td>
         <td>{{ log.webhookKey }}</td>
         <td>{{ log.formattedLogDate }}</td>

src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html

@@ -15,17 +15,17 @@
        <umb-box>
           <umb-box-header title-key="general_general"></umb-box-header>
           <umb-box-content class="block-form">
-              
+
               <umb-control-group>
                 <div class="flex items-center">
                   <div class="flx-g0 flx-s0" style="flex-basis: 40px;">
-                    <umb-checkmark checked="true" size="m" style="cursor: default"></umb-checkmark>
-                    <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.webhookLogEntry.response.isSuccess === false"></umb-icon>
+                    <umb-checkmark checked="true" size="m" style="cursor: default" ng-if="model.log.statusCode === 'OK (200)'"></umb-checkmark>
+                    <umb-icon icon="icon-wrong" class="umb-checkmark umb-checkmark--m" style="cursor: default;" ng-if="model.log.statusCode !== 'OK (200)'"></umb-icon>
                   </div>
-                  <div class="flx-g1 flx-s1 flx-b2" ng-if="model.webhookLogEntry.responseStatus.description || model.webhookLogEntry.response.statusCode">{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})</div>
+                  <div class="flx-g1 flx-s1 flx-b2">{{model.log.statusCode}}</div>
                 </div>
               </umb-control-group>
-              
+
               <umb-control-group label="@general_date">
                   <div>{{model.log.formattedLogDate}}</div>
               </umb-control-group>
@@ -34,10 +34,6 @@
                   <div>{{model.log.url}}</div>
               </umb-control-group>
 
-              <umb-control-group label="Status code">
-                <div>{{model.log.statusCode}}</div>
-              </umb-control-group>
-
               <umb-control-group label="Event">
                 <div>{{model.log.eventAlias}}</div>
               </umb-control-group>