mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Import views are now consolidated into one view, and found through one navigation (dashboard search -> Import, Closes #1511
This commit is contained in:
Torkel Ödegaard
parent
4a93d205bb
commit
15c52cacfb
@ -3,7 +3,6 @@ define([
|
||||
'./pulldown',
|
||||
'./search',
|
||||
'./metricKeys',
|
||||
'./graphiteImport',
|
||||
'./inspectCtrl',
|
||||
'./jsonEditorCtrl',
|
||||
'./loginCtrl',
|
||||
|
||||
@ -1,108 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'kbn'
|
||||
],
|
||||
function (angular, app, _, kbn) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv, $location) {
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.datasources = datasourceSrv.getMetricSources();
|
||||
$scope.setDatasource(null);
|
||||
};
|
||||
|
||||
$scope.setDatasource = function(datasource) {
|
||||
$scope.datasource = datasourceSrv.get(datasource);
|
||||
|
||||
if (!$scope.datasource) {
|
||||
$scope.error = "Cannot find datasource " + datasource;
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.listAll = function(query) {
|
||||
delete $scope.error;
|
||||
|
||||
$scope.datasource.listDashboards(query)
|
||||
.then(function(results) {
|
||||
$scope.dashboards = results;
|
||||
})
|
||||
.then(null, function(err) {
|
||||
$scope.error = err.message || 'Error while fetching list of dashboards';
|
||||
});
|
||||
};
|
||||
|
||||
$scope.import = function(dashName) {
|
||||
delete $scope.error;
|
||||
|
||||
$scope.datasource.loadDashboard(dashName)
|
||||
.then(function(results) {
|
||||
if (!results.data || !results.data.state) {
|
||||
throw { message: 'no dashboard state received from graphite' };
|
||||
}
|
||||
|
||||
graphiteToGrafanaTranslator(results.data.state, $scope.datasource.name);
|
||||
})
|
||||
.then(null, function(err) {
|
||||
$scope.error = err.message || 'Failed to import dashboard';
|
||||
});
|
||||
};
|
||||
|
||||
function graphiteToGrafanaTranslator(state, datasource) {
|
||||
var graphsPerRow = 2;
|
||||
var rowHeight = 300;
|
||||
var rowTemplate;
|
||||
var currentRow;
|
||||
var panel;
|
||||
|
||||
rowTemplate = {
|
||||
title: '',
|
||||
panels: [],
|
||||
height: rowHeight
|
||||
};
|
||||
|
||||
currentRow = angular.copy(rowTemplate);
|
||||
|
||||
var newDashboard = angular.copy($scope.dashboard);
|
||||
newDashboard.rows = [];
|
||||
newDashboard.title = state.name;
|
||||
newDashboard.rows.push(currentRow);
|
||||
|
||||
_.each(state.graphs, function(graph, index) {
|
||||
if (currentRow.panels.length === graphsPerRow) {
|
||||
currentRow = angular.copy(rowTemplate);
|
||||
newDashboard.rows.push(currentRow);
|
||||
}
|
||||
|
||||
panel = {
|
||||
type: 'graph',
|
||||
span: 12 / graphsPerRow,
|
||||
title: graph[1].title,
|
||||
targets: [],
|
||||
datasource: datasource,
|
||||
id: index + 1
|
||||
};
|
||||
|
||||
_.each(graph[1].target, function(target) {
|
||||
panel.targets.push({
|
||||
target: target
|
||||
});
|
||||
});
|
||||
|
||||
currentRow.panels.push(panel);
|
||||
});
|
||||
|
||||
window.grafanaImportDashboard = newDashboard;
|
||||
$location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title));
|
||||
|
||||
$scope.dismiss();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@ -13,5 +13,6 @@ define([
|
||||
'./timeSrv',
|
||||
'./unsavedChangesSrv',
|
||||
'./directives/dashSearchView',
|
||||
'./graphiteImportCtrl',
|
||||
'./importCtrl',
|
||||
], function () {});
|
||||
|
||||
94
src/app/features/dashboard/graphiteImportCtrl.js
Normal file
94
src/app/features/dashboard/graphiteImportCtrl.js
Normal file
@ -0,0 +1,94 @@
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'kbn'
|
||||
],
|
||||
function (angular, app, _, kbn) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('GraphiteImportCtrl', function($scope, datasourceSrv, dashboardSrv, $location) {
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.datasources = [];
|
||||
_.each(datasourceSrv.getAll(), function(ds) {
|
||||
if (ds.type === 'graphite') {
|
||||
$scope.sourceName = ds.name;
|
||||
$scope.datasources.push(ds.name);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$scope.listAll = function() {
|
||||
$scope.datasource = datasourceSrv.get($scope.sourceName);
|
||||
|
||||
$scope.datasource.listDashboards('').then(function(results) {
|
||||
$scope.dashboards = results;
|
||||
}, function(err) {
|
||||
var message = err.message || err.statusText || 'Error';
|
||||
$scope.appEvent('alert-error', ['Failed to load dashboard list from graphite', message]);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.import = function(dashName) {
|
||||
$scope.datasource.loadDashboard(dashName).then(function(results) {
|
||||
if (!results.data || !results.data.state) {
|
||||
throw { message: 'no dashboard state received from graphite' };
|
||||
}
|
||||
|
||||
graphiteToGrafanaTranslator(results.data.state, $scope.datasource.name);
|
||||
}, function(err) {
|
||||
var message = err.message || err.statusText || 'Error';
|
||||
$scope.appEvent('alert-error', ['Failed to load dashboard from graphite', message]);
|
||||
});
|
||||
};
|
||||
|
||||
function graphiteToGrafanaTranslator(state, datasource) {
|
||||
var graphsPerRow = 2;
|
||||
var rowHeight = 300;
|
||||
var rowTemplate;
|
||||
var currentRow;
|
||||
var panel;
|
||||
|
||||
rowTemplate = {
|
||||
title: '',
|
||||
panels: [],
|
||||
height: rowHeight
|
||||
};
|
||||
|
||||
currentRow = angular.copy(rowTemplate);
|
||||
|
||||
var newDashboard = dashboardSrv.create({});
|
||||
newDashboard.rows = [];
|
||||
newDashboard.title = state.name;
|
||||
newDashboard.rows.push(currentRow);
|
||||
|
||||
_.each(state.graphs, function(graph, index) {
|
||||
if (currentRow.panels.length === graphsPerRow) {
|
||||
currentRow = angular.copy(rowTemplate);
|
||||
newDashboard.rows.push(currentRow);
|
||||
}
|
||||
|
||||
panel = {
|
||||
type: 'graph',
|
||||
span: 12 / graphsPerRow,
|
||||
title: graph[1].title,
|
||||
targets: [],
|
||||
datasource: datasource,
|
||||
id: index + 1
|
||||
};
|
||||
|
||||
_.each(graph[1].target, function(target) {
|
||||
panel.targets.push({ target: target });
|
||||
});
|
||||
|
||||
currentRow.panels.push(panel);
|
||||
});
|
||||
|
||||
window.grafanaImportDashboard = newDashboard;
|
||||
$location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title));
|
||||
}
|
||||
});
|
||||
});
|
||||
34
src/app/features/dashboard/partials/graphiteImport.html
Normal file
34
src/app/features/dashboard/partials/graphiteImport.html
Normal file
@ -0,0 +1,34 @@
|
||||
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
|
||||
|
||||
<div ng-if="datasources.length > 0">
|
||||
<h2 style="margin-top: 30px;">Load dashboard from Graphite-Web</h2>
|
||||
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 150px">
|
||||
<strong>Data source</strong>
|
||||
</li>
|
||||
<li>
|
||||
<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
|
||||
</select>
|
||||
</li>
|
||||
<li style="float: right">
|
||||
<button class="btn btn-inverse tight-form-btn" ng-click="listAll()">List dashboards</button>
|
||||
</li>
|
||||
<div class="clearfix"></div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<table class="grafana-options-table" style="margin-top: 20px;">
|
||||
<tr ng-repeat="dash in dashboards">
|
||||
<td style="">{{dash.name}}</td>
|
||||
<td>
|
||||
<button class="btn btn-inverse pull-right" ng-click="import(dash.name)">
|
||||
Load
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="page-container">
|
||||
<div class="page">
|
||||
<h2>
|
||||
Import dashboard
|
||||
Import file
|
||||
<span><tip>Load dashboard JSON layout from file</tip></span>
|
||||
</h2>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
<h2>Migrate dashboards</h2>
|
||||
|
||||
<div class="tight-form">
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 150px">
|
||||
<strong>Dashboard source</strong>
|
||||
@ -62,6 +62,9 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div ng-include="'app/features/dashboard/partials/graphiteImport.html'"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Import']" data-title="{{tab}}">
|
||||
<div ng-repeat="tab in ['General', 'Rows']" data-title="{{tab}}">
|
||||
</div>
|
||||
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
|
||||
</div>
|
||||
@ -70,11 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="editor.index == 2">
|
||||
<ng-include src="'app/partials/import.html'"></ng-include>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
|
||||
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 2+$index">
|
||||
<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
|
||||
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
|
||||
</div>
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
|
||||
<h5>Import dashboards from graphite web</h5>
|
||||
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" bs-tooltip="'Datasource'">{{datasource.name}} <span class="caret"></span></button>
|
||||
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="datasource in datasources" role="menuitem">
|
||||
<a ng-click="setDatasource(datasource.value);">{{datasource.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button ng-click="listAll()" class="btn btn-success">List all dashboards</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-row" style="margin-top: 10px;max-height: 400px; overflow-y: scroll;max-width: 500px;">
|
||||
<table class="grafana-options-table">
|
||||
<tr ng-repeat="dash in dashboards">
|
||||
<td style="">{{dash.name}}</td>
|
||||
<td style="padding-left: 20px;">
|
||||
<a class="pointer" ng-click="import(dash.name)">
|
||||
import
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div ng-show="error" style="margin-top: 20px" class="alert alert-error">
|
||||
{{error}}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user