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
This commit is contained in:
Marcus Efraimsson 2017-12-26 13:52:19 +01:00 committed by Torkel Ödegaard
parent c11cf18879
commit 39eb8f9eba
6 changed files with 14 additions and 1 deletions

View File

@ -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;
}
}

View File

@ -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();

View File

@ -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',

View File

@ -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>

View File

@ -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',

View File

@ -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>