IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(export): export dashboard modal

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-05-17 11:17:11 +02:00
parent ad7a1e15b4
commit df50fa2332
8 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/sources/reference/dashboard.md
View File

@ -26,7 +26,6 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized
{
"id": null,
"title": "New dashboard",
"originalTitle": "New dashboard",
"tags": [],
"style": "dark",
"timezone": "browser",
@ -59,7 +58,6 @@ Each field in the dashboard JSON is explained below with its usage:
| ---- | ----- |
| **id** | unique dashboard id, an integer |
| **title** | current title of dashboard |
| **originalTitle** | title of dashboard when saved for the first time |
| **tags** | tags associated with dashboard, an array of strings |
| **style** | theme of dashboard, i.e. `dark` or `light` |
| **timezone** | timezone of dashboard, i.e. `utc` or `browser` |

1
public/app/features/dashboard/dashboardSrv.js
View File

@ -22,7 +22,6 @@ function (angular, $, _, moment) {
this.id = data.id || null;
this.title = data.title || 'No Title';
this.originalTitle = this.title;
this.tags = data.tags || [];
this.style = data.style || "dark";
this.timezone = data.timezone || '';

2
public/app/features/dashboard/dashnav/dashnav.html
View File

@ -35,7 +35,7 @@
</li>
<li>
<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>
</li>
</ul>

50
public/app/features/dashboard/export/export_modal.html
View File

@ -12,10 +12,10 @@
</div>
<div class="modal-content" ng-cloak>
<p>
Exporting will export a cleaned sharable dashboard that can be imported
into another Grafana instance.
</p>
<!-- <p> -->
<!-- Exporting will export a cleaned sharable dashboard that can be imported -->
<!-- into another Grafana instance. -->
<!-- </p> -->
<h3 class="section-heading">
Options
@ -38,37 +38,29 @@
</div>
</div>
<h3 class="section-heading">
Dashboard data sources
</h3>
<div class="gf-form-group">
<div class="gf-form-inline" ng-repeat="input in ctrl.dash.__inputs">
<div class="gf-form width-25">
<label class="gf-form-label width-8">Name</label>
<input type="text" class="gf-form-input" ng-model="input.name">
<label class="gf-form-label text-success" ng-show="input.name">
<i class="fa fa-check"></i>
</label>
</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>
<!-- <h3 class="section&#45;heading"> -->
<!-- Dashboard data sources -->
<!-- </h3> -->
<!-- -->
<!-- <div class="gf&#45;form&#45;group"> -->
<!-- <div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
<!-- <div class="gf&#45;form width&#45;25"> -->
<!-- <label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
<!-- <input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.export()">
<i class="fa fa-download"></i> Export
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
<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>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
</div>
</div>
</div>

13
public/app/features/dashboard/export/export_modal.ts
View File

@ -1,6 +1,7 @@
///<reference path="../../../headers/common.d.ts" />
import kbn from 'app/core/utils/kbn';
import angular from 'angular';
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
import config from 'app/core/config';
@ -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() {

12
public/app/features/dashboard/export/exporter.ts
View File

@ -15,6 +15,8 @@ export class DashboardExporter {
var dynSrv = new DynamicDashboardSrv();
dynSrv.process(dash, {cleanUpOnly: true});
dash.id = null;
var inputs = [];
var requires = {};
var datasources = {};
@ -63,10 +65,14 @@ export class DashboardExporter {
return req;
});
dash["__inputs"] = inputs;
dash["__requires"] = requires;
// make inputs and requires a top thing
var newObj = {};
newObj["__inputs"] = inputs;
newObj["__requires"] = requires;
return dash;
_.defaults(newObj, dash);
return newObj;
}).catch(err => {
console.log('Export failed:', err);
return {};

1
public/dashboards/home.json
View File

@ -1,7 +1,6 @@
{
"id": null,
"title": "Home",
"originalTitle": "Home",
"tags": [],
"style": "dark",
"timezone": "browser",

1
public/dashboards/template_vars.json
View File

@ -1,7 +1,6 @@
{
"id": null,
"title": "Templated Graphs Nested",
"originalTitle": "Templated Graphs Nested",
"tags": [
"showcase",
"templated"