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 (cherry picked from commit 13db9b308e)
2023-11-21 09:24:48 +01:00
parent a4c7047a50
commit 3ff6bd191a
11 changed files with 178 additions and 64 deletions
--- 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: '<?'
        }
    };

@@ -77,9 +78,14 @@
                    case "css":
                        vm.language = "CSS";
                        break;
+                    case "js":
                    case "javascript":
                        vm.language = "JavaScript";
                        break;
+                    case "txt":
+                    case "text":
+                        vm.language = "Text/Plain";
+                        break;
                }
            }
            
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -133,14 +133,6 @@
    box-sizing: border-box;
    visibility: hidden;
    border-radius: @baseBorderRadius;
-
-    &.umb-overlay--small {
-        width: 420px;
-    }
-
-    &.umb-overlay--medium {
-        width: 520px;
-    }
 }

 .umb-overlay.umb-overlay-target .umb-overlay-header {
@@ -249,6 +241,24 @@
    font-size: 12px;
 }

+.umb-overlay.umb-overlay-target,
+.umb-overlay.umb-overlay-left,
+.umb-overlay.umb-overlay-right {
+
+    &.umb-overlay--small {
+      width: 500px;
+    }
+
+    &.umb-overlay--medium {
+      width: 800px;
+    }
+
+    &.umb-overlay--large {
+      max-width: 1600px;
+      width: calc(100% - 50px);
+    }
+}
+
 /*ensures dialogs doesnt have side-by-side labels*/
 .umb-overlay .control-label,
 .umb-overlay .form-horizontal .control-label,
@@ -261,7 +271,6 @@
    float: none;
 }

-
 .umb-overlay .controls-row,
 .umb-overlay .form-horizontal .controls,
 .form-horizontal .umb-overlay .controls {
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
@@ -1,4 +1,4 @@
-.umb-code-snippet {
+.umb-code-snippet {

    .umb-code-snippet__header {
        box-sizing: content-box;
@@ -41,4 +41,15 @@
            white-space: nowrap;
        }
    }
+
+    &--wrap {
+        pre {
+            word-wrap: break-word;
+
+            code {
+                white-space: pre-wrap;
+                word-wrap: break-word;
+            }
+        }
+    }
 }
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
@@ -1,4 +1,4 @@
-<div class="umb-code-snippet">
+<div class="umb-code-snippet" ng-class="{ 'umb-code-snippet--wrap': vm.wrap === true }">
    <div class="umb-code-snippet__header">
        <span class="language" ng-if="vm.language">{{vm.language}}</span>

--- 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)">
                    </umb-button>
                </umb-editor-footer-content-right>
-            </umb-editor-footer>     
+            </umb-editor-footer>
        </umb-editor-view>

    </form>
--- 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) {
--- 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 @@
          </umb-checkmark>
        </td>
        <td>{{ log.webhookKey }}</td>
-        <td>{{ log.date }}</td>
+        <td>{{ log.formattedLogDate }}</td>
        <td>{{ log.url }}</td>
        <td>{{ log.eventAlias }}</td>
        <td>{{ log.retryCount }}</td>
--- 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
@@ -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);
+})();
--- 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 @@
-<div class="headless-webhook-log-entry-details-overlay" style="margin-top: 20px;">
-  <div class="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>
-      </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>
-  </div>
-  <div class="control-group">
-    <span class="bold">Date</span>
-    <div class="controls controls-row">{{model.log.date}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Url</span>
-    <div class="controls controls-row">{{model.log.url}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Status code</span>
-    <div class="controls controls-row">{{model.log.statusCode}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Event</span>
-    <div class="controls controls-row">{{model.log.eventAlias}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Retry count</span>
-    <div class="controls controls-row">{{model.log.retryCount}}</div>
-  </div>
-  <div class="control-group">
-    <span class="bold">Request</span>
-    <pre>{{model.log.requestHeaders}}
---
-{{model.log.requestBody}}</pre>
-  </div>
-  <div class="control-group">
-    <span class="bold">Response</span>
-    <pre>{{model.log.responseHeaders}}
---
-{{model.log.responseBody}}</pre>
-  </div>
+<div ng-controller="Umbraco.Editors.Webhooks.DetailsController as vm" class="headless-webhook-log-entry-details-overlay" style="margin-top: 20px;">
+
+  <umb-editor-view>
+
+    <umb-editor-header
+        name="model.title"
+        name-locked="true"
+        hide-alias="true"
+        hide-icon="true"
+        hide-description="true">
+    </umb-editor-header>
+
+    <umb-editor-container>
+
+       <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>
+                  </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>
+              </umb-control-group>
+              
+              <umb-control-group label="@general_date">
+                  <div>{{model.log.formattedLogDate}}</div>
+              </umb-control-group>
+
+              <umb-control-group label="@general_url">
+                  <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>
+
+              <umb-control-group label="Retry count">
+                <div>{{model.log.retryCount}}</div>
+              </umb-control-group>
+
+          </umb-box-content>
+
+        </umb-box>
+
+        <umb-box>
+          <umb-box-header title="Request"></umb-box-header>
+          <umb-box-content class="block-form">
+            <pre class="code">{{model.log.requestHeaders}}</pre>
+            <umb-code-snippet language="'JSON'" wrap="true">{{vm.formatData(model.log.requestBody) | json}}</umb-code-snippet>
+          </umb-box-content>
+        </umb-box>
+
+        <umb-box>
+          <umb-box-header title="Response"></umb-box-header>
+          <umb-box-content class="block-form">
+            <pre class="code">{{model.log.responseHeaders}}</pre>
+            <umb-code-snippet language="'TEXT'" wrap="true">{{vm.formatData(model.log.responseBody) | json}}</umb-code-snippet>
+          </umb-box-content>
+        </umb-box>
+
+    </umb-editor-container>
+
+    <umb-editor-footer>
+        <umb-editor-footer-content-right>
+            <umb-button
+                type="button"
+                button-style="link"
+                label-key="general_close"
+                shortcut="esc"
+                action="vm.close()">
+            </umb-button>
+        </umb-editor-footer-content-right>
+    </umb-editor-footer>
+
+  </umb-editor-view>
+
 </div>
--- 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();
    }
  }
--- 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;