Added dialog to view and copy Event JSON

Author: niemyjski

src/app.less

@@ -36,6 +36,7 @@
 @import "app/session/session.less";
 @import "components/date-range-picker/date-range-picker-directive.less";
 @import "components/dialog/confirm-dialog.less";
+@import "components/dialog/json-dialog.less";
 @import "components/events/events-directive.less";
 @import "components/loading-bar/loading-bar-directive.less";
 @import "components/log-level/log-level-directive.less";

src/app/event/event-controller.js

@@ -2,7 +2,7 @@
   'use strict';
 
   angular.module('app.event')
-    .controller('Event', function ($ExceptionlessClient, $scope, $state, $stateParams, $timeout, $window, billingService, clipboard, errorService, eventService, filterService, hotkeys, linkService, notificationService, projectService, simpleErrorService, urlService, translateService) {
+    .controller('Event', function ($ExceptionlessClient, $scope, $state, $stateParams, $timeout, $window, billingService, clipboard, dialogService, errorService, eventService, filterService, hotkeys, linkService, notificationService, projectService, simpleErrorService, urlService, translateService) {
       var vm = this;
 
       function activateSessionEventsTab() {
@@ -312,7 +312,7 @@
           }
 
           vm.event = response.data.plain();
-          vm.event_json = angular.toJson(vm.event);
+          vm.event_json = angular.toJson(vm.event, true);
           vm.sessionEvents.relativeTo = vm.event.date;
           vm.errorData = getErrorData(vm.event);
           vm.errorType = getErrorType(vm.event);
@@ -428,6 +428,26 @@
         return projectService.promoteTab(vm.project.id, tabName).then(onSuccess, onFailure);
       }
 
+      function viewJSON() {
+        function onSuccess() {
+          $ExceptionlessClient.createFeatureUsage(vm._source + '.viewJSON.success')
+            .setProperty('id', vm._eventId)
+            .submit();
+        }
+
+        function onFailure() {
+          $ExceptionlessClient.createFeatureUsage(vm._source + '.viewJSON.error')
+            .setProperty('id', vm._eventId)
+            .submit();
+        }
+
+        $ExceptionlessClient.createFeatureUsage(vm._source + '.viewJSON')
+          .setProperty('id', vm._eventId)
+          .submit();
+
+        return dialogService.viewJSON(vm.event_json).then(onSuccess, onFailure)
+      }
+
       function updateIsAccordionVisible() {
         vm.isAccordionVisible = $window.innerWidth < 768;
       }
@@ -535,6 +555,7 @@
           hideSessionStartTime: true
         };
         vm.sessionEventsTabActivated = false;
+        vm.viewJSON = viewJSON;
         vm.tabs = [];
 
         return getEvent().then(getProject).then(function () {

src/app/event/event.js

@@ -9,6 +9,7 @@
 
     'exceptionless',
     'exceptionless.billing',
+    'exceptionless.dialog',
     'exceptionless.error',
     'exceptionless.event',
     'exceptionless.events',

src/app/event/event.tpl.html

@@ -7,7 +7,7 @@
         <i class="fa fa-calendar"></i> {{::'Event Occurrence' | translate}}
 
         <div class="pull-right hidden-print">
-          <a clipboard text="vm.event_json" on-copied="vm.copied()" supported="vm.clipboardSupported" ng-show="vm.event.stack_id && vm.clipboardSupported" class="btn btn-default btn-xs fa fa-code hidden-xs" role="button" title="{{::'Copy Event JSON to Clipboard' | translate}}"></a>
+          <a ng-show="vm.event.stack_id" ng-click="vm.viewJSON()" class="btn btn-default btn-xs fa fa-code hidden-xs" role="button" title="{{::'View JSON' | translate}}"></a>
           <a ui-sref="app.stack({ id: vm.event.stack_id })" ng-class="{'disabled': !vm.event.stack_id}" class="btn btn-default btn-xs fa fa-fw fa-caret-up" role="button" title="{{::'Go To Stack' | translate}}"></a>
           <a ui-sref="app.event({ id: vm.previous, tab: vm.getCurrentTab() })" ng-class="{'disabled': !vm.previous}" class="btn btn-default btn-xs fa fa-fw fa-caret-left" role="button" title="{{::'Previous Occurrence' | translate}}"></a>
           <a ui-sref="app.event({ id: vm.next, tab: vm.getCurrentTab() })" ng-class="{'disabled': !vm.next}" class="btn btn-default btn-xs fa fa-fw fa-caret-right" role="button" title="{{::'Next Occurrence' | translate}}"></a>

src/components/dialog/dialog-service.js

@@ -18,11 +18,17 @@
         }).result;
       }
 
-      var service = {
+      function viewJSON(json, copyButtonText) {
+        return dialogs.create('components/dialog/json-dialog.tpl.html', 'jsonDialog as vm', {
+          copyButtonText: copyButtonText,
+          json: json
+        }).result;
+      }
+
+      return {
         confirm: confirm,
-        confirmDanger: confirmDanger
+        confirmDanger: confirmDanger,
+        viewJSON: viewJSON
       };
-
-      return service;
     });
 }());

src/components/dialog/json-dialog-controller.js

@@ -0,0 +1,25 @@
+(function () {
+  'use strict';
+
+  angular.module('exceptionless.dialog')
+    .controller('jsonDialog', function ($uibModalInstance, $translate, clipboard, data) {
+      var vm = this;
+      function close() {
+        $uibModalInstance.dismiss('close');
+      }
+
+      function copy() {
+        clipboard.copyText(vm.json);
+        $uibModalInstance.close('copy');
+      }
+
+      this.$onInit = function $onInit() {
+        vm.copyButtonText = angular.isDefined(data.copyButtonText) ? data.copyButtonText : $translate.instant('Copy to Clipboard');
+        vm.header = angular.isDefined(data.header) ? data.header : $translate.instant('DIALOGS_JSON');
+        vm.json = data.json;
+        vm.close = close;
+        vm.copy = copy;
+        vm.showCopyButton = clipboard.supported;
+      };
+    });
+}());

src/components/dialog/json-dialog.less

@@ -0,0 +1,8 @@
+.btn-dialog-json {
+    text-transform: capitalize;
+}
+
+.json-content {
+  max-height: 400px;
+  overflow-y: scroll;
+}

src/components/dialog/json-dialog.tpl.html

@@ -0,0 +1,18 @@
+<div class="modal-header dialog-header-json">
+  <button type="button" role="button" class="close" ng-click="vm.close()">&times;</button>
+  <h4 class="modal-title">
+    <span class="fa fa-code"></span>
+    {{::vm.header}}
+  </h4>
+</div>
+
+<div class="modal-body">
+  <pre class="json-content" ng-bind="vm.json"></pre>
+</div>
+
+<div class="modal-footer">
+  <button type="button" role="button" class="btn btn-default" ng-click="vm.close()">{{::'DIALOGS_CLOSE' | translate}}</button>
+  <button type="button" role="button" class="btn btn-primary btn-dialog-copy" ng-click="vm.copy()" autofocus ng-show="vm.showCopyButton">
+    {{vm.copyButtonText}}
+  </button>
+</div>

src/index.html

@@ -132,6 +132,7 @@
         <script src="components/dialog/dialog.js"></script>
         <script src="components/dialog/dialog-service.js"></script>
         <script src="components/dialog/confirm-dialog-controller.js"></script>
+        <script src="components/dialog/json-dialog-controller.js"></script>
         <script src="components/duration/duration-directive.js"></script>
 
         <script src="components/error/error-service.js"></script>

src/lang/en-us.json

@@ -187,6 +187,7 @@
   "Request":"Request",
   "to enable sessions and other premium features!":"to enable sessions and other premium features!",
   "is attempting to use a premium feature.":"is attempting to use a premium feature.",
+  "View JSON": "View JSON",
   "Copy Stack Trace to Clipboard":"Copy Stack Trace to Clipboard",
   "Copy Event JSON to Clipboard":"Copy Event JSON to Clipboard",
   "Copy to Clipboard":"Copy to Clipboard",
@@ -685,6 +686,7 @@
   "DIALOGS_NOTIFICATION_MSG": "Unknown application notification.",
   "DIALOGS_CONFIRMATION": "Confirmation",
   "DIALOGS_CONFIRMATION_MSG": "Confirmation required.",
+  "DIALOGS_JSON": "JSON",
   "DIALOGS_OK": "OK",
   "DIALOGS_YES": "Yes",
   "DIALOGS_NO": "No",

src/lang/zh-cn.json

@@ -187,6 +187,7 @@
     "Request":"请求",
     "to enable sessions and other premium features!":"以启用会话及其他高级特性！",
     "is attempting to use a premium feature.":"正在尝试使用高级特性。",
+    "View JSON": "查看 JSON",
     "Copy Stack Trace to Clipboard":"将堆栈跟踪复制到剪贴板",
     "Copy Event JSON to Clipboard":"将事件以JSON格式复制到剪贴板",
     "Copy to Clipboard":"复制到剪贴板",
@@ -686,6 +687,7 @@
     "DIALOGS_NOTIFICATION_MSG": "未知应用程序的通知。",
     "DIALOGS_CONFIRMATION": "确认",
     "DIALOGS_CONFIRMATION_MSG": "确认要求。",
+    "DIALOGS_JSON": "JSON",
     "DIALOGS_OK": "确定",
     "DIALOGS_YES": "确认",
     "DIALOGS_NO": "取消",