Skip to content

N
nexpie-grafana-theme
Commit 5f399112 by Torkel Ödegaard
Options

refactoring progress

parent b995dc54
Showing with 133 additions and 162 deletions
src/app/app.js
......@@ -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) {
......
src/app/controllers/all.js
define([
'./grafanaCtrl',
'./dash',
'./dashLoader',
'./row',
......
src/app/controllers/dash.js
......@@ -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;
......
src/app/controllers/graphiteImport.js
......@@ -96,7 +96,7 @@ function (angular, app, _) {
currentRow.panels.push(panel);
});
dashboard.dash_load(newDashboard);
$scope.dashboard.dash_load(newDashboard);
}
});
......
src/app/controllers/search.js
......@@ -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,
......
src/app/partials/dashboard.html
<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 ng-controller="DashCtrl">
<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>
<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="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="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>
</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 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>
<div style="padding-top:0px" ng-if="!row.collapse">
<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>
<!-- 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>
<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 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 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>
\ No newline at end of file
src/app/routes/dashboard-loader.js
......@@ -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) {
......
src/app/services/dashboard.js
......@@ -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;
......
src/app/services/dashboard/dashboardKeyBindings.js
......@@ -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;
});
......
src/app/services/panelMove.js
......@@ -72,7 +72,7 @@ function (angular, _) {
create: function(dashboard) {
return new PanelMoveSrv(dashboard);
}
}
};
});
......
src/app/services/unsavedChangesSrv.js
......@@ -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
......
src/index.html
......@@ -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">
......
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