Skip to content

N
nexpie-grafana-theme
Commit df50fa23 by Torkel Ödegaard
Options

feat(export): export dashboard modal

parent ad7a1e15
Showing with 44 additions and 38 deletions
docs/sources/reference/dashboard.md
...@@ -26,7 +26,6 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized ...@@ -26,7 +26,6 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized
{ {
"id": null, "id": null,
"title": "New dashboard", "title": "New dashboard",
"originalTitle": "New dashboard",
"tags": [], "tags": [],
"style": "dark", "style": "dark",
"timezone": "browser", "timezone": "browser",
...@@ -59,7 +58,6 @@ Each field in the dashboard JSON is explained below with its usage: ...@@ -59,7 +58,6 @@ Each field in the dashboard JSON is explained below with its usage:
| ---- | ----- | | ---- | ----- |
| **id** | unique dashboard id, an integer | | **id** | unique dashboard id, an integer |
| **title** | current title of dashboard | | **title** | current title of dashboard |
| **originalTitle** | title of dashboard when saved for the first time |
| **tags** | tags associated with dashboard, an array of strings | | **tags** | tags associated with dashboard, an array of strings |
| **style** | theme of dashboard, i.e. `dark` or `light` | | **style** | theme of dashboard, i.e. `dark` or `light` |
| **timezone** | timezone of dashboard, i.e. `utc` or `browser` | | **timezone** | timezone of dashboard, i.e. `utc` or `browser` |
......
public/app/features/dashboard/dashboardSrv.js
...@@ -22,7 +22,6 @@ function (angular, $, _, moment) { ...@@ -22,7 +22,6 @@ function (angular, $, _, moment) {
this.id = data.id || null; this.id = data.id || null;
this.title = data.title || 'No Title'; this.title = data.title || 'No Title';
this.originalTitle = this.title;
this.tags = data.tags || []; this.tags = data.tags || [];
this.style = data.style || "dark"; this.style = data.style || "dark";
this.timezone = data.timezone || ''; this.timezone = data.timezone || '';
......
public/app/features/dashboard/dashnav/dashnav.html
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</li> </li>
<li> <li>
<a class="pointer" ng-click="shareExport()"> <a class="pointer" ng-click="shareExport()">
<i class="fa fa-cloud-upload"></i>Export <i class="fa fa-cloud-upload"></i>Export for sharing
</a> </a>
</li> </li>
</ul> </ul>
......
public/app/features/dashboard/export/export_modal.html
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
</div> </div>
<div class="modal-content" ng-cloak> <div class="modal-content" ng-cloak>
<p> <!-- <p> -->
Exporting will export a cleaned sharable dashboard that can be imported <!-- Exporting will export a cleaned sharable dashboard that can be imported -->
into another Grafana instance. <!-- into another Grafana instance. -->
</p> <!-- </p> -->
<h3 class="section-heading"> <h3 class="section-heading">
Options Options
...@@ -38,37 +38,29 @@ ...@@ -38,37 +38,29 @@
</div> </div>
</div> </div>
<h3 class="section-heading"> <!-- <h3 class="section&#45;heading"> -->
Dashboard data sources <!-- Dashboard data sources -->
</h3> <!-- </h3> -->
<!-- -->
<div class="gf-form-group"> <!-- <div class="gf&#45;form&#45;group"> -->
<div class="gf-form-inline" ng-repeat="input in ctrl.dash.__inputs"> <!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
<div class="gf-form width-25"> <!-- <div class="gf&#45;form width&#45;25"> -->
<label class="gf-form-label width-8">Name</label> <!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
<input type="text" class="gf-form-input" ng-model="input.name"> <!-- <input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
<label class="gf-form-label text-success" ng-show="input.name"> <!-- </div> -->
<i class="fa fa-check"></i> <!-- </div> -->
</label> <!-- </div> -->
</div>
<div class="gf-form width-25">
<label class="gf-form-label width-8">Description</label>
<input type="text" class="gf-form-input" ng-model="input.desc">
<label class="gf-form-label text-success" ng-show="input.desc">
<i class="fa fa-check"></i>
</label>
</div>
</div>
</div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.export()"> <button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
<i class="fa fa-download"></i> Export <i class="fa fa-save"></i> Save to file
</button>
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()">
<i class="fa fa-file-text-o"></i> View JSON
</button> </button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a> <a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div> </div>
</div> </div>
</div> </div>
</div>
public/app/features/dashboard/export/export_modal.ts
///<reference path="../../../headers/common.d.ts" /> ///<reference path="../../../headers/common.d.ts" />
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import angular from 'angular';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import config from 'app/core/config'; import config from 'app/core/config';
...@@ -25,6 +26,18 @@ export class DashExportCtrl { ...@@ -25,6 +26,18 @@ export class DashExportCtrl {
}); });
} }
save() {
var blob = new Blob([angular.toJson(this.dash, true)], { type: "application/json;charset=utf-8" });
var wnd: any = window;
wnd.saveAs(blob, this.dash.title + '-' + new Date().getTime() + '.json');
}
saveJson() {
var html = angular.toJson(this.dash, true);
var uri = "data:application/json," + encodeURIComponent(html);
var newWindow = window.open(uri);
}
} }
export function dashExportDirective() { export function dashExportDirective() {
......
public/app/features/dashboard/export/exporter.ts
...@@ -15,6 +15,8 @@ export class DashboardExporter { ...@@ -15,6 +15,8 @@ export class DashboardExporter {
var dynSrv = new DynamicDashboardSrv(); var dynSrv = new DynamicDashboardSrv();
dynSrv.process(dash, {cleanUpOnly: true}); dynSrv.process(dash, {cleanUpOnly: true});
dash.id = null;
var inputs = []; var inputs = [];
var requires = {}; var requires = {};
var datasources = {}; var datasources = {};
...@@ -63,10 +65,14 @@ export class DashboardExporter { ...@@ -63,10 +65,14 @@ export class DashboardExporter {
return req; return req;
}); });
dash["__inputs"] = inputs; // make inputs and requires a top thing
dash["__requires"] = requires; var newObj = {};
newObj["__inputs"] = inputs;
newObj["__requires"] = requires;
_.defaults(newObj, dash);
return dash; return newObj;
}).catch(err => { }).catch(err => {
console.log('Export failed:', err); console.log('Export failed:', err);
return {}; return {};
......
public/dashboards/home.json
{ {
"id": null, "id": null,
"title": "Home", "title": "Home",
"originalTitle": "Home",
"tags": [], "tags": [],
"style": "dark", "style": "dark",
"timezone": "browser", "timezone": "browser",
......
public/dashboards/template_vars.json
{ {
"id": null, "id": null,
"title": "Templated Graphs Nested", "title": "Templated Graphs Nested",
"originalTitle": "Templated Graphs Nested",
"tags": [ "tags": [
"showcase", "showcase",
"templated" "templated"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment