From 13db9b308e89a612a08520e782f6b239de1f49d0 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 21 Nov 2023 09:24:48 +0100 Subject: [PATCH] V13: Webhook logs formatting (#15246) * Use code snippet component for request and response * Change overlay size to medium * Format log date * Handle JS as JavaScript * Try format JSON * Update less syntax * Add word wrap * Formatting * Update variable * Remove unused editorService * Add missing details controller and fix formatting in catch block * Set data object * Update overlay size to match umb-editor overlay * Use editorService instead to show details on overlay * Add general box header --- .../components/umbcodesnippet.directive.js | 10 +- .../src/less/components/overlays.less | 27 ++-- .../src/less/components/umb-code-snippet.less | 13 +- .../views/components/umb-code-snippet.html | 2 +- .../richtextrule/richtextrule.html | 2 +- .../src/views/webhooks/logs.controller.js | 21 ++- .../src/views/webhooks/logs.html | 2 +- .../webhooks/overlays/details.controller.js | 33 +++++ .../src/views/webhooks/overlays/details.html | 126 ++++++++++++------ .../webhooks/overlays/header.controller.js | 4 +- .../src/views/webhooks/webhooks.controller.js | 2 +- 11 files changed, 178 insertions(+), 64 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js index f0dad31ee2..e0ac1a10a5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js @@ -1,4 +1,4 @@ -/** +/** @ngdoc directive @name umbraco.directives.directive:umbCodeSnippet @restrict E @@ -47,7 +47,8 @@ controllerAs: 'vm', transclude: true, bindings: { - language: '<' + language: '<', + wrap: ' +
{{vm.language}} diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html b/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html index 20c62cbd77..c190921dcb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html +++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html @@ -64,7 +64,7 @@ action="vm.submit(model)"> - + diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js index b278638e34..c6b45530d8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.controller.js @@ -1,7 +1,7 @@ (function () { "use strict"; - function WebhookLogController($q, webhooksResource, overlayService) { + function WebhookLogController($q, webhooksResource, editorService, userService, dateHelper) { const vm = this; @@ -25,20 +25,33 @@ return webhooksResource.getLogs() .then(data => { vm.logs = data.items; + vm.logs.forEach(log => { + formatDatesToLocal(log); + }); }); } + function formatDatesToLocal(log) { + userService.getCurrentUser().then(currentUser => { + log.formattedLogDate = dateHelper.getLocalDate(log.date, currentUser.locale, "LLL"); + }); + } + function openLogOverlay(log) { - overlayService.open({ + + const dialog = { view: "views/webhooks/overlays/details.html", title: 'Details', position: 'right', + size: 'medium', log, currentUser: this.currentUser, close: () => { - overlayService.close(); + editorService.close(); } - }); + }; + + editorService.open(dialog); } function isChecked(log) { diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html index f2db3096af..9eec01ce05 100644 --- a/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/logs.html @@ -20,7 +20,7 @@ {{ log.webhookKey }} - {{ log.date }} + {{ log.formattedLogDate }} {{ log.url }} {{ log.eventAlias }} {{ log.retryCount }} diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js new file mode 100644 index 0000000000..39d25c0205 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.controller.js @@ -0,0 +1,33 @@ +(function () { + "use strict"; + function DetailsController($scope) { + const vm = this; + + vm.close = close; + vm.formatData = formatData; + + function formatData(data) { + + let obj = data; + + if (data.detectIsJson()) { + try { + obj = Utilities.fromJson(data) + } catch (err) { + obj = data; + } + } + + return obj; + } + + function close() { + if ($scope.model && $scope.model.close) { + $scope.model.close(); + } + } + + } + + angular.module("umbraco").controller("Umbraco.Editors.Webhooks.DetailsController", DetailsController); +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html index d66c1463e7..d1ce18477e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/details.html @@ -1,43 +1,85 @@ -
-
-
-
- - -
-
{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})
-
-
-
- Date -
{{model.log.date}}
-
-
- Url -
{{model.log.url}}
-
-
- Status code -
{{model.log.statusCode}}
-
-
- Event -
{{model.log.eventAlias}}
-
-
- Retry count -
{{model.log.retryCount}}
-
-
- Request - 
{{model.log.requestHeaders}}
----
-{{model.log.requestBody}}
-
-
- Response - 
{{model.log.responseHeaders}}
----
-{{model.log.responseBody}}
-
+
+ + + + + + + + + + + + + +
+
+ + +
+
{{model.webhookLogEntry.response.statusDescription}} ({{model.webhookLogEntry.response.statusCode}})
+
+ + + +
{{model.log.formattedLogDate}}
+ + + +
{{model.log.url}}
+ + + +
{{model.log.statusCode}}
+ + + +
{{model.log.eventAlias}}
+ + + +
{{model.log.retryCount}}
+ + + + + + + + + + 
{{model.log.requestHeaders}}
+ {{vm.formatData(model.log.requestBody) | json}} + + + + + + + 
{{model.log.responseHeaders}}
+ {{vm.formatData(model.log.responseBody) | json}} + + + + + + + + + + + + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js index 298cb95bd8..baa816146a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/overlays/header.controller.js @@ -10,13 +10,13 @@ $scope.headerModel = { key: "", value: "" }; - function submit () { + function submit() { if ($scope.headerModel.key && $scope.headerModel.value) { $scope.model.submit($scope.headerModel); } } - function close () { + function close() { $scope.model.close(); } } diff --git a/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js b/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js index 10a0f51c08..ff4e214596 100644 --- a/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/webhooks/webhooks.controller.js @@ -1,7 +1,7 @@ (function () { "use strict"; - function WebhookController($q, $timeout, $location, $routeParams, webhooksResource, navigationService, notificationsService, editorService, overlayService, contentTypeResource, mediaTypeResource, memberTypeResource) { + function WebhookController($q, $timeout, $location, $routeParams, webhooksResource, navigationService, notificationsService, overlayService, contentTypeResource, mediaTypeResource, memberTypeResource) { const vm = this;