Dashboard: View JSON improvements (#10327)

* dashboard: enable copy to clipboard for view json and panel json

* dashboard: use code editor for view json under settings

public/app/core/controllers/json_editor_ctrl.ts

@@ -6,11 +6,14 @@ export class JsonEditorCtrl {
   constructor($scope) {
     $scope.json = angular.toJson($scope.object, true);
     $scope.canUpdate = $scope.updateHandler !== void 0 && $scope.contextSrv.isEditor;
+    $scope.canCopy = $scope.enableCopy;
 
     $scope.update = function() {
       var newObject = angular.fromJson($scope.json);
       $scope.updateHandler(newObject, $scope.object);
     };
+
+    $scope.getContentForClipboard = () => $scope.json;
   }
 }
 

public/app/core/directives/misc.ts

@@ -2,6 +2,7 @@ import angular from 'angular';
 import Clipboard from 'clipboard';
 import coreModule from '../core_module';
 import kbn from 'app/core/utils/kbn';
+import { appEvents } from 'app/core/core';
 
 /** @ngInject */
 function tip($compile) {
@@ -32,6 +33,10 @@ function clipboardButton() {
         },
       });
 
+      scope.clipboard.on('success', () => {
+        appEvents.emit('alert-success', ['Content copied to clipboard']);
+      });
+
       scope.$on('$destroy', function() {
         if (scope.clipboard) {
           scope.clipboard.destroy();

public/app/features/dashboard/export/export_modal.ts

@@ -31,6 +31,7 @@ export class DashExportCtrl {
     var clone = this.dash;
     let editScope = this.$rootScope.$new();
     editScope.object = clone;
+    editScope.enableCopy = true;
 
     this.$rootScope.appEvent('show-modal', {
       src: 'public/app/partials/edit_json.html',

public/app/features/dashboard/settings/settings.html

@@ -89,7 +89,7 @@
 	<h3 class="dashboard-settings__header">View JSON</h3>
 
 	<div class="gf-form">
-		<textarea class="gf-form-input" ng-model="ctrl.json" rows="30" spellcheck="false"></textarea>
+		<code-editor content="ctrl.json" data-mode="json" data-max-lines=30 ></code-editor>
 	</div>
 </div>
 

public/app/features/panel/panel_ctrl.ts

@@ -272,6 +272,7 @@ export class PanelCtrl {
     let editScope = this.$scope.$root.$new();
     editScope.object = this.panel.getSaveModel();
     editScope.updateHandler = this.replacePanel.bind(this);
+    editScope.enableCopy = true;
 
     this.publishAppEvent('show-modal', {
       src: 'public/app/partials/edit_json.html',

public/app/partials/edit_json.html

@@ -16,6 +16,9 @@
 
 		<div class="gf-form-button-row">
 			<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
+			<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
+				<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
+			</button>
 		</div>
 	</div>
 </div>