provisioning: ux fixes when saving provisioned dashboards

Wider modal.
Tried to improve provisioning description text.
Code editor for json.
Button that allows to save the json to a file.

public/app/features/dashboard/dashboard_srv.ts

@@ -127,7 +127,6 @@ export class DashboardSrv {
   showDashboardProvisionedModal() {
   showDashboardProvisionedModal() {
     this.$rootScope.appEvent('show-modal', {
     this.$rootScope.appEvent('show-modal', {
       templateHtml: '<save-provisioned-dashboard-modal dismiss="dismiss()"></save-provisioned-dashboard-modal>',
       templateHtml: '<save-provisioned-dashboard-modal dismiss="dismiss()"></save-provisioned-dashboard-modal>',
-      modalClass: 'modal--narrow',
     });
     });
   }
   }
 
 

public/app/features/dashboard/save_provisioned_modal.ts

+import angular from 'angular';
+import { saveAs } from 'file-saver';
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
 
 
 const template = `
 const template = `
 <div class="modal-body">
 <div class="modal-body">
   <div class="modal-header">
   <div class="modal-header">
     <h2 class="modal-header-title">
     <h2 class="modal-header-title">
-      <i class="fa fa-save"></i>
-      <span class="p-l-1">Cannot save provisioned dashboards</span>
+      <i class="fa fa-save"></i><span class="p-l-1">Cannot save provisioned dashboard</span>
     </h2>
     </h2>
 
 
     <a class="modal-header-close" ng-click="ctrl.dismiss();">
     <a class="modal-header-close" ng-click="ctrl.dismiss();">
@@ -13,47 +14,48 @@ const template = `
     </a>
     </a>
   </div>
   </div>
 
 
-  <form name="ctrl.saveForm" class="modal-content" novalidate>
-    <h6 class="text-center">
+  <div class="modal-content">
+    <small>
       This dashboard cannot be saved from Grafana's UI since it has been provisioned from another source.
       This dashboard cannot be saved from Grafana's UI since it has been provisioned from another source.
-      <i><a href="http://docs.grafana.org/administration/provisioning/#dashboards">
-        More info about provisioning.
-      </a></i>
-    </h6>
+      Copy the JSON or save it to a file below. Then you can update your dashboard in corresponding provisioning source.<br/>
+      <i>See <a class="external-link" href="http://docs.grafana.org/administration/provisioning/#dashboards" target="_blank">
+      documentation</a> for more information about provisioning.</i>
+    </small>
     <div class="p-t-2">
     <div class="p-t-2">
       <div class="gf-form">
       <div class="gf-form">
-        <label class="gf-form-hint">
-          <textarea
-            type="text"
-            name="dashboardJson"
-            class="gf-form-input"
-            ng-model="ctrl.dashboardJson"
-            ng-model-options="{allowInvalid: true}"
-            autocomplete="off"
-            rows="3" /></textarea>
-        </label>
+        <code-editor content="ctrl.dashboardJson" data-mode="json" data-max-lines=15></code-editor>
+      </div>
+      <div class="gf-form-button-row">
+        <button class="btn btn-success" clipboard-button="ctrl.getJsonForClipboard()">
+          <i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard
+        </button>
+        <button class="btn btn-secondary" clipboard-button="ctrl.save()">
+          <i class="fa fa-save"></i>&nbsp;Save JSON to file
+        </button>
+        <a class="btn btn-link" ng-click="ctrl.dismiss();">Cancel</a>
       </div>
       </div>
     </div>
     </div>
-
-    <div class="gf-form-button-row text-center">
-      <button type="submit" class="btn btn-success" clipboard-button="ctrl.getJsonForClipboard()" >
-        <i class="fa fa-clipboard"></i>&nbsp;Copy json
-      </button>
-      <button class="btn btn-inverse" ng-click="ctrl.dismiss();">Close</button>
-    </div>
-  </form>
+  </div>
 </div>
 </div>
 `;
 `;
 
 
 export class SaveProvisionedDashboardModalCtrl {
 export class SaveProvisionedDashboardModalCtrl {
+  dash: any;
   dashboardJson: string;
   dashboardJson: string;
   dismiss: () => void;
   dismiss: () => void;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor(dashboardSrv) {
   constructor(dashboardSrv) {
-    var dashboard = dashboardSrv.getCurrent().getSaveModelClone();
-    delete dashboard.id;
-    this.dashboardJson = JSON.stringify(dashboard);
+    this.dash = dashboardSrv.getCurrent().getSaveModelClone();
+    delete this.dash.id;
+    this.dashboardJson = JSON.stringify(this.dash, null, 2);
+  }
+
+  save() {
+    var blob = new Blob([angular.toJson(this.dash, true)], {
+      type: 'application/json;charset=utf-8',
+    });
+    saveAs(blob, this.dash.title + '-' + new Date().getTime() + '.json');
   }
   }
 
 
   getJsonForClipboard() {
   getJsonForClipboard() {