Merge branch 'jereksel-feature/save_json'

public/app/features/dashboard/dashboard_srv.ts

@@ -100,7 +100,7 @@ export class DashboardSrv {
       .catch(this.handleSaveDashboardError.bind(this, clone, options));
   }
 
-  saveDashboard(options, clone) {
+  saveDashboard(options?, clone?) {
     if (clone) {
       this.setCurrent(this.create(clone, this.dash.meta));
     }
@@ -124,6 +124,10 @@ export class DashboardSrv {
     return this.save(this.dash.getSaveModelClone(), options);
   }
 
+  saveJSONDashboard(json: string) {
+    return this.save(JSON.parse(json), {});
+  }
+
   showDashboardProvisionedModal() {
     this.$rootScope.appEvent('show-modal', {
       templateHtml: '<save-provisioned-dashboard-modal dismiss="dismiss()"></save-provisioned-dashboard-modal>',

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

@@ -87,12 +87,22 @@
 	<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>
 </div>
 
-<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'view_json'" >
-	<h3 class="dashboard-settings__header">View JSON</h3>
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'dashboard_json'" >
+	<h3 class="dashboard-settings__header">JSON Model</h3>
+  <div class="dashboard-settings__subheader">
+    The JSON Model below is data structure that defines the dashboard. Including settings, panel settings & layout,
+    queries etc.
+  </div>
 
 	<div class="gf-form">
 		<code-editor content="ctrl.json" data-mode="json" data-max-lines=30 ></code-editor>
 	</div>
+
+  <div class="gf-form-button-row">
+    <button class="btn btn-success" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
+      <i class="fa fa-save"></i> Save Changes
+    </button>
+  </div>
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'permissions'" >

public/app/features/dashboard/settings/settings.ts

@@ -17,7 +17,14 @@ export class SettingsCtrl {
   hasUnsavedFolderChange: boolean;
 
   /** @ngInject */
-  constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) {
+  constructor(
+    private $scope,
+    private $route,
+    private $location,
+    private $rootScope,
+    private backendSrv,
+    private dashboardSrv
+  ) {
     // temp hack for annotations and variables editors
     // that rely on inherited scope
     $scope.dashboard = this.dashboard;
@@ -93,8 +100,8 @@ export class SettingsCtrl {
     }
 
     this.sections.push({
-      title: 'View JSON',
-      id: 'view_json',
+      title: 'JSON Model',
+      id: 'dashboard_json',
       icon: 'gicon gicon-json',
     });
 
@@ -137,6 +144,12 @@ export class SettingsCtrl {
     this.dashboardSrv.saveDashboard();
   }
 
+  saveDashboardJson() {
+    this.dashboardSrv.saveJSONDashboard(this.json).then(() => {
+      this.$route.reload();
+    });
+  }
+
   onPostSave() {
     this.hasUnsavedFolderChange = false;
   }

public/sass/components/_dashboard_settings.scss

@@ -53,6 +53,13 @@
   margin-bottom: $spacer*2;
 }
 
+.dashboard-settings__subheader {
+  color: $text-muted;
+  font-style: italic;
+  position: relative;
+  top: -1.5rem;
+}
+
 .dashboard-settings__nav-item {
   padding: 7px 12px;
   color: $text-color;
@@ -85,3 +92,7 @@
     margin-bottom: 10px;
   }
 }
+
+.dashboard-settings__json-save-button {
+  margin-top: $spacer;
+}