mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactoring progress
This commit is contained in:
Torkel Ödegaard
parent
b995dc54f1
commit
5f3991127b
@ -49,23 +49,6 @@ function (angular, $, _, appLevelRequire, config) {
|
||||
return module;
|
||||
};
|
||||
|
||||
app.safeApply = function ($scope, fn) {
|
||||
switch($scope.$$phase) {
|
||||
case '$apply':
|
||||
// $digest hasn't started, we should be good
|
||||
$scope.$eval(fn);
|
||||
break;
|
||||
case '$digest':
|
||||
// waiting to $apply the changes
|
||||
setTimeout(function () { app.safeApply($scope, fn); }, 10);
|
||||
break;
|
||||
default:
|
||||
// clear to begin an $apply $$phase
|
||||
$scope.$apply(fn);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
|
||||
|
||||
$routeProvider.otherwise({ redirectTo: config.default_route });
|
||||
@ -97,12 +80,6 @@ function (angular, $, _, appLevelRequire, config) {
|
||||
apps_deps.push(module_name);
|
||||
});
|
||||
|
||||
app.panel_helpers = {
|
||||
partial: function (name) {
|
||||
return 'app/partials/'+name+'.html';
|
||||
}
|
||||
};
|
||||
|
||||
// load the core components
|
||||
require([
|
||||
'controllers/all',
|
||||
@ -116,7 +93,6 @@ function (angular, $, _, appLevelRequire, config) {
|
||||
angular
|
||||
.element(document)
|
||||
.ready(function() {
|
||||
$('body').attr('ng-controller', 'DashCtrl');
|
||||
angular.bootstrap(document, apps_deps)
|
||||
.invoke(['$rootScope', function ($rootScope) {
|
||||
_.each(pre_boot_modules, function (module) {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
define([
|
||||
'./grafanaCtrl',
|
||||
'./dash',
|
||||
'./dashLoader',
|
||||
'./row',
|
||||
|
||||
@ -30,35 +30,15 @@ function (angular, $, config, _) {
|
||||
|
||||
var module = angular.module('kibana.controllers');
|
||||
|
||||
module.controller('DashCtrl', function(
|
||||
$scope, $rootScope, $timeout, ejsResource, filterSrv, dashboardKeybindings,
|
||||
alertSrv, keyboardManager, grafanaVersion) {
|
||||
module.controller('DashCtrl', function($scope, $rootScope, dashboardKeybindings) {
|
||||
|
||||
$scope.editor = {
|
||||
index: 0
|
||||
};
|
||||
|
||||
$scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
|
||||
$scope.editor = { index: 0 };
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.config = config;
|
||||
|
||||
// Make stuff, including underscore.js available to views
|
||||
$scope._ = _;
|
||||
$scope.dashAlerts = alertSrv;
|
||||
|
||||
// Clear existing alerts
|
||||
alertSrv.clearAll();
|
||||
|
||||
$scope.reset_row();
|
||||
|
||||
$scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
|
||||
|
||||
$scope.bindKeyboardShortcuts();
|
||||
dashboardKeybindings.shortcuts();
|
||||
};
|
||||
|
||||
$scope.bindKeyboardShortcuts = dashboardKeybindings.shortcuts;
|
||||
|
||||
$scope.isPanel = function(obj) {
|
||||
if(!_.isNull(obj) && !_.isUndefined(obj) && !_.isUndefined(obj.type)) {
|
||||
return true;
|
||||
|
||||
@ -96,7 +96,7 @@ function (angular, app, _) {
|
||||
currentRow.panels.push(panel);
|
||||
});
|
||||
|
||||
dashboard.dash_load(newDashboard);
|
||||
$scope.dashboard.dash_load(newDashboard);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -9,14 +9,15 @@ function (angular, _, config, $) {
|
||||
|
||||
var module = angular.module('kibana.controllers');
|
||||
|
||||
module.controller('SearchCtrl', function($scope, $rootScope, dashboard, $element, $location) {
|
||||
module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, ejsResource) {
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
|
||||
$scope.giveSearchFocus = 0;
|
||||
$scope.selectedIndex = -1;
|
||||
$scope.results = {dashboards: [], tags: [], metrics: []};
|
||||
$scope.query = { query: 'title:' };
|
||||
$rootScope.$on('open-search', $scope.openSearch);
|
||||
$scope.$onRootScope('open-search', $scope.openSearch, $scope);
|
||||
};
|
||||
|
||||
$scope.keyDown = function (evt) {
|
||||
@ -153,7 +154,7 @@ function (angular, _, config, $) {
|
||||
};
|
||||
|
||||
$scope.addMetricToCurrentDashboard = function (metricId) {
|
||||
dashboard.rows.push({
|
||||
$scope.dashboard.rows.push({
|
||||
title: '',
|
||||
height: '250px',
|
||||
editable: true,
|
||||
|
||||
@ -1,111 +1,114 @@
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
|
||||
<ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-controller="DashCtrl">
|
||||
|
||||
<div class="submenu-controls">
|
||||
<div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
|
||||
<div class="submenu-panel-title">
|
||||
<span class="small"><strong>{{pulldown.type}}:</strong></span>
|
||||
</div>
|
||||
<div class="submenu-panel-wrapper">
|
||||
<kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
|
||||
<ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submenu-controls">
|
||||
<div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
|
||||
<div class="submenu-panel-title">
|
||||
<span class="small"><strong>{{pulldown.type}}:</strong></span>
|
||||
</div>
|
||||
<div class="submenu-panel-wrapper">
|
||||
<kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div class="container-fluid main">
|
||||
<div>
|
||||
<div class="grafana-container container">
|
||||
<!-- Rows -->
|
||||
<div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)">
|
||||
<div class="row-control">
|
||||
<div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
|
||||
<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
|
||||
<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
|
||||
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
|
||||
</span>
|
||||
<span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
|
||||
<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
|
||||
</span>
|
||||
<span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
|
||||
</div>
|
||||
<div class="row-open" ng-show="!row.collapse">
|
||||
<div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
|
||||
<span class="row-tab-button">
|
||||
<i class="icon-caret-right" ></i>
|
||||
<div class="container-fluid main">
|
||||
<div>
|
||||
<div class="grafana-container container">
|
||||
<!-- Rows -->
|
||||
<div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)">
|
||||
<div class="row-control">
|
||||
<div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
|
||||
<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
|
||||
<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
|
||||
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class='row-tab bgSuccess dropdown' ng-show="row.editable">
|
||||
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon-th-list"></i>
|
||||
<span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
|
||||
<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
|
||||
</span>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Add Panel</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="add_panel_default('graph')">Graph</li></a>
|
||||
<li><a ng-click="add_panel_default('text')">Text</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Set height</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="set_height('100px')">100 px</li></a>
|
||||
<li><a ng-click="set_height('150px')">150 px</li></a>
|
||||
<li><a ng-click="set_height('200px')">200 px</li></a>
|
||||
<li><a ng-click="set_height('250px')">250 px</li></a>
|
||||
<li><a ng-click="set_height('300px')">300 px</li></a>
|
||||
<li><a ng-click="set_height('350px')">350 px</li></a>
|
||||
<li><a ng-click="set_height('450px')">450 px</li></a>
|
||||
<li><a ng-click="set_height('500px')">500 px</li></a>
|
||||
<li><a ng-click="set_height('600px')">600 px</li></a>
|
||||
<li><a ng-click="set_height('700px')">700 px</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Move</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="move_row(-1)">Up</li></a>
|
||||
<li><a ng-click="move_row(1)">Down</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a config-modal="app/partials/roweditor.html">Row editor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="delete_row()">Delete row</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding-top:0px" ng-if="!row.collapse">
|
||||
|
||||
<!-- Panels -->
|
||||
<div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
|
||||
<!-- Content Panel -->
|
||||
<div style="position:relative">
|
||||
<kibana-panel type="panel.type" ng-cloak></kibana-panel>
|
||||
<div class="row-open" ng-show="!row.collapse">
|
||||
<div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
|
||||
<span class="row-tab-button">
|
||||
<i class="icon-caret-right" ></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class='row-tab bgSuccess dropdown' ng-show="row.editable">
|
||||
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon-th-list"></i>
|
||||
</span>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Add Panel</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="add_panel_default('graph')">Graph</li></a>
|
||||
<li><a ng-click="add_panel_default('text')">Text</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Set height</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="set_height('100px')">100 px</li></a>
|
||||
<li><a ng-click="set_height('150px')">150 px</li></a>
|
||||
<li><a ng-click="set_height('200px')">200 px</li></a>
|
||||
<li><a ng-click="set_height('250px')">250 px</li></a>
|
||||
<li><a ng-click="set_height('300px')">300 px</li></a>
|
||||
<li><a ng-click="set_height('350px')">350 px</li></a>
|
||||
<li><a ng-click="set_height('450px')">450 px</li></a>
|
||||
<li><a ng-click="set_height('500px')">500 px</li></a>
|
||||
<li><a ng-click="set_height('600px')">600 px</li></a>
|
||||
<li><a ng-click="set_height('700px')">700 px</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-submenu">
|
||||
<a href="javascript:void();">Move</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="move_row(-1)">Up</li></a>
|
||||
<li><a ng-click="move_row(1)">Down</li></a>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a config-modal="app/partials/roweditor.html">Row editor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a ng-click="delete_row()">Delete row</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
|
||||
</div>
|
||||
<div style="padding-top:0px" ng-if="!row.collapse">
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<!-- Panels -->
|
||||
<div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
|
||||
<!-- Content Panel -->
|
||||
<div style="position:relative">
|
||||
<kibana-panel type="panel.type" ng-cloak></kibana-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-show='dashboard.editable && dashboard.panel_hints' class="row-fluid add-row-panel-hint">
|
||||
<div class="span12" style="text-align:right;">
|
||||
@ -114,7 +117,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -21,24 +21,22 @@ function (angular, $, config, _) {
|
||||
$scope, $rootScope, $http, $routeParams, alertSrv, dashboard, filterSrv, panelMoveSrv) {
|
||||
|
||||
$scope.init = function() {
|
||||
console.log('DashFromFileProvider->init()')
|
||||
|
||||
file_load($routeParams.jsonFile)
|
||||
.then(function(data) {
|
||||
$scope.dashboard = dashboard.create(data);
|
||||
$scope.filter = filterSrv;
|
||||
$scope.filter.init($scope.dashboard);
|
||||
file_load($routeParams.jsonFile).then(function(data) {
|
||||
$scope.dashboard = dashboard.create(data);
|
||||
$scope.filter = filterSrv;
|
||||
$scope.filter.init($scope.dashboard);
|
||||
|
||||
var panelMove = panelMoveSrv.create($scope.dashboard);
|
||||
// For moving stuff around the dashboard.
|
||||
$scope.panelMoveDrop = panelMove.onDrop;
|
||||
$scope.panelMoveStart = panelMove.onStart;
|
||||
$scope.panelMoveStop = panelMove.onStop;
|
||||
$scope.panelMoveOver = panelMove.onOver;
|
||||
$scope.panelMoveOut = panelMove.onOut;
|
||||
var panelMove = panelMoveSrv.create($scope.dashboard);
|
||||
// For moving stuff around the dashboard.
|
||||
$scope.panelMoveDrop = panelMove.onDrop;
|
||||
$scope.panelMoveStart = panelMove.onStart;
|
||||
$scope.panelMoveStop = panelMove.onStop;
|
||||
$scope.panelMoveOver = panelMove.onOver;
|
||||
$scope.panelMoveOut = panelMove.onOut;
|
||||
|
||||
$rootScope.$emit("dashboard-loaded", $scope.dashboard);
|
||||
});
|
||||
$rootScope.$emit("dashboard-loaded", $scope.dashboard);
|
||||
});
|
||||
};
|
||||
|
||||
var renderTemplate = function(json,params) {
|
||||
|
||||
@ -13,7 +13,7 @@ function (angular, $, kbn, _) {
|
||||
|
||||
var module = angular.module('kibana.services');
|
||||
|
||||
module.service('dashboard', function(timer, $rootScope) {
|
||||
module.service('dashboard', function(timer, $rootScope, $timeout) {
|
||||
|
||||
function DashboardModel (data) {
|
||||
this.title = data.title;
|
||||
|
||||
@ -9,7 +9,15 @@ function(angular, $) {
|
||||
var module = angular.module('kibana.services');
|
||||
|
||||
module.service('dashboardKeybindings', function($rootScope, keyboardManager, dashboard) {
|
||||
this.hasRegistered = false;
|
||||
|
||||
this.shortcuts = function() {
|
||||
if (this.hasRegistered) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.hasRegistered = true;
|
||||
|
||||
$rootScope.$on('panel-fullscreen-enter', function() {
|
||||
$rootScope.fullscreen = true;
|
||||
});
|
||||
|
||||
@ -72,7 +72,7 @@ function (angular, _) {
|
||||
create: function(dashboard) {
|
||||
return new PanelMoveSrv(dashboard);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -12,16 +12,19 @@ function(angular, _, config) {
|
||||
|
||||
var module = angular.module('kibana.services');
|
||||
|
||||
module.service('unsavedChangesSrv', function($rootScope, $modal, dashboard, $q, $location, $timeout) {
|
||||
module.service('unsavedChangesSrv', function($rootScope, $modal, $q, $location, $timeout) {
|
||||
|
||||
var self = this;
|
||||
var modalScope = $rootScope.$new();
|
||||
|
||||
$rootScope.$on("dashboard-loaded", function(event, newDashboard) {
|
||||
self.original = angular.copy(newDashboard);
|
||||
self.current = newDashboard;
|
||||
});
|
||||
|
||||
$rootScope.$on("dashboard-saved", function(event, savedDashboard) {
|
||||
self.original = angular.copy(savedDashboard);
|
||||
self.current = savedDashboard;
|
||||
});
|
||||
|
||||
$rootScope.$on("$routeChangeSuccess", function() {
|
||||
@ -63,7 +66,7 @@ function(angular, _, config) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var current = angular.copy(dashboard.current);
|
||||
var current = angular.copy(self.current);
|
||||
var original = self.original;
|
||||
|
||||
// ignore timespan changes
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-cloak body-class>
|
||||
<body ng-cloak body-class ng-controller="GrafanaCtrl">
|
||||
|
||||
<link rel="stylesheet" href="css/bootstrap.light.min.css" ng-if="dashboard.style === 'light'">
|
||||
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user