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) { ...@@ -49,23 +49,6 @@ function (angular, $, _, appLevelRequire, config) {
return module; 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) { app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
$routeProvider.otherwise({ redirectTo: config.default_route }); $routeProvider.otherwise({ redirectTo: config.default_route });
...@@ -97,12 +80,6 @@ function (angular, $, _, appLevelRequire, config) { ...@@ -97,12 +80,6 @@ function (angular, $, _, appLevelRequire, config) {
apps_deps.push(module_name); apps_deps.push(module_name);
}); });
app.panel_helpers = {
partial: function (name) {
return 'app/partials/'+name+'.html';
}
};
// load the core components // load the core components
require([ require([
'controllers/all', 'controllers/all',
...@@ -116,7 +93,6 @@ function (angular, $, _, appLevelRequire, config) { ...@@ -116,7 +93,6 @@ function (angular, $, _, appLevelRequire, config) {
angular angular
.element(document) .element(document)
.ready(function() { .ready(function() {
$('body').attr('ng-controller', 'DashCtrl');
angular.bootstrap(document, apps_deps) angular.bootstrap(document, apps_deps)
.invoke(['$rootScope', function ($rootScope) { .invoke(['$rootScope', function ($rootScope) {
_.each(pre_boot_modules, function (module) { _.each(pre_boot_modules, function (module) {
......
src/app/controllers/all.js
define([ define([
'./grafanaCtrl',
'./dash', './dash',
'./dashLoader', './dashLoader',
'./row', './row',
......
src/app/controllers/dash.js
...@@ -30,35 +30,15 @@ function (angular, $, config, _) { ...@@ -30,35 +30,15 @@ function (angular, $, config, _) {
var module = angular.module('kibana.controllers'); var module = angular.module('kibana.controllers');
module.controller('DashCtrl', function( module.controller('DashCtrl', function($scope, $rootScope, dashboardKeybindings) {
$scope, $rootScope, $timeout, ejsResource, filterSrv, dashboardKeybindings,
alertSrv, keyboardManager, grafanaVersion) {
$scope.editor = { $scope.editor = { index: 0 };
index: 0
};
$scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
$scope.init = function() { $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.reset_row();
dashboardKeybindings.shortcuts();
$scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
$scope.bindKeyboardShortcuts();
}; };
$scope.bindKeyboardShortcuts = dashboardKeybindings.shortcuts;
$scope.isPanel = function(obj) { $scope.isPanel = function(obj) {
if(!_.isNull(obj) && !_.isUndefined(obj) && !_.isUndefined(obj.type)) { if(!_.isNull(obj) && !_.isUndefined(obj) && !_.isUndefined(obj.type)) {
return true; return true;
......
src/app/controllers/graphiteImport.js
...@@ -96,7 +96,7 @@ function (angular, app, _) { ...@@ -96,7 +96,7 @@ function (angular, app, _) {
currentRow.panels.push(panel); 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, $) { ...@@ -9,14 +9,15 @@ function (angular, _, config, $) {
var module = angular.module('kibana.controllers'); 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.init = function() {
$scope.ejs = ejsResource(config.elasticsearch, config.elasticsearchBasicAuth);
$scope.giveSearchFocus = 0; $scope.giveSearchFocus = 0;
$scope.selectedIndex = -1; $scope.selectedIndex = -1;
$scope.results = {dashboards: [], tags: [], metrics: []}; $scope.results = {dashboards: [], tags: [], metrics: []};
$scope.query = { query: 'title:' }; $scope.query = { query: 'title:' };
$rootScope.$on('open-search', $scope.openSearch); $scope.$onRootScope('open-search', $scope.openSearch, $scope);
}; };
$scope.keyDown = function (evt) { $scope.keyDown = function (evt) {
...@@ -153,7 +154,7 @@ function (angular, _, config, $) { ...@@ -153,7 +154,7 @@ function (angular, _, config, $) {
}; };
$scope.addMetricToCurrentDashboard = function (metricId) { $scope.addMetricToCurrentDashboard = function (metricId) {
dashboard.rows.push({ $scope.dashboard.rows.push({
title: '', title: '',
height: '250px', height: '250px',
editable: true, editable: true,
......
src/app/partials/dashboard.html
<div class="navbar navbar-static-top"> <div ng-controller="DashCtrl">
<div class="navbar-inner">
<div class="container-fluid"> <div class="navbar navbar-static-top">
<span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span> <div class="navbar-inner">
<ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'"> <div class="container-fluid">
</ul> <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>
</div>
<div class="submenu-controls"> <div class="submenu-controls">
<div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }"> <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
<div class="submenu-panel-title"> <div class="submenu-panel-title">
<span class="small"><strong>{{pulldown.type}}:</strong></span> <span class="small"><strong>{{pulldown.type}}:</strong></span>
</div> </div>
<div class="submenu-panel-wrapper"> <div class="submenu-panel-wrapper">
<kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel> <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
</div>
</div> </div>
<div class="clearfix"></div>
</div> </div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="container-fluid main"> <div class="container-fluid main">
<div> <div>
<div class="grafana-container container"> <div class="grafana-container container">
<!-- Rows --> <!-- Rows -->
<div class="kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)"> <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="row-control">
<div class="grafana-row" style="padding:0px;margin:0px;position:relative;"> <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
<div class="row-close" ng-show="row.collapse" data-placement="bottom" > <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer"> <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> <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>
</span> </span>
</div> <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
<div class='row-tab bgSuccess dropdown' ng-show="row.editable"> <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-list"></i>
</span> </span>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1"> <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
<li class="dropdown-submenu"> </div>
<a href="javascript:void();">Add Panel</a> <div class="row-open" ng-show="!row.collapse">
<ul class="dropdown-menu"> <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
<li><a ng-click="add_panel_default('graph')">Graph</li></a> <span class="row-tab-button">
<li><a ng-click="add_panel_default('text')">Text</li></a> <i class="icon-caret-right" ></i>
</ul> </span>
</li> </div>
<li class="dropdown-submenu"> <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
<a href="javascript:void();">Set height</a> <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<ul class="dropdown-menu"> <i class="icon-th-list"></i>
<li><a ng-click="set_height('100px')">100 px</li></a> </span>
<li><a ng-click="set_height('150px')">150 px</li></a> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li><a ng-click="set_height('200px')">200 px</li></a> <li class="dropdown-submenu">
<li><a ng-click="set_height('250px')">250 px</li></a> <a href="javascript:void();">Add Panel</a>
<li><a ng-click="set_height('300px')">300 px</li></a> <ul class="dropdown-menu">
<li><a ng-click="set_height('350px')">350 px</li></a> <li><a ng-click="add_panel_default('graph')">Graph</li></a>
<li><a ng-click="set_height('450px')">450 px</li></a> <li><a ng-click="add_panel_default('text')">Text</li></a>
<li><a ng-click="set_height('500px')">500 px</li></a> </ul>
<li><a ng-click="set_height('600px')">600 px</li></a> </li>
<li><a ng-click="set_height('700px')">700 px</li></a> <li class="dropdown-submenu">
</ul> <a href="javascript:void();">Set height</a>
</li> <ul class="dropdown-menu">
<li class="dropdown-submenu"> <li><a ng-click="set_height('100px')">100 px</li></a>
<a href="javascript:void();">Move</a> <li><a ng-click="set_height('150px')">150 px</li></a>
<ul class="dropdown-menu"> <li><a ng-click="set_height('200px')">200 px</li></a>
<li><a ng-click="move_row(-1)">Up</li></a> <li><a ng-click="set_height('250px')">250 px</li></a>
<li><a ng-click="move_row(1)">Down</li></a> <li><a ng-click="set_height('300px')">300 px</li></a>
</ul> <li><a ng-click="set_height('350px')">350 px</li></a>
</li> <li><a ng-click="set_height('450px')">450 px</li></a>
<li> <li><a ng-click="set_height('500px')">500 px</li></a>
<a config-modal="app/partials/roweditor.html">Row editor</a> <li><a ng-click="set_height('600px')">600 px</li></a>
</li> <li><a ng-click="set_height('700px')">700 px</li></a>
<li> </ul>
<a ng-click="delete_row()">Delete row</a> </li>
</li> <li class="dropdown-submenu">
</ul> <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>
</div>
<div style="padding-top:0px" ng-if="!row.collapse"> <div style="padding-top:0px" ng-if="!row.collapse">
<!-- Panels --> <!-- 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}"> <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 --> <!-- Content Panel -->
<div style="position:relative"> <div style="position:relative">
<kibana-panel type="panel.type" ng-cloak></kibana-panel> <kibana-panel type="panel.type" ng-cloak></kibana-panel>
</div>
</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 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>
<div class="clearfix"></div> <div class="clearfix"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div ng-show='dashboard.editable && dashboard.panel_hints' class="row-fluid add-row-panel-hint"> <div ng-show='dashboard.editable && dashboard.panel_hints' class="row-fluid add-row-panel-hint">
<div class="span12" style="text-align:right;"> <div class="span12" style="text-align:right;">
...@@ -114,7 +117,7 @@ ...@@ -114,7 +117,7 @@
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/routes/dashboard-loader.js
...@@ -21,24 +21,22 @@ function (angular, $, config, _) { ...@@ -21,24 +21,22 @@ function (angular, $, config, _) {
$scope, $rootScope, $http, $routeParams, alertSrv, dashboard, filterSrv, panelMoveSrv) { $scope, $rootScope, $http, $routeParams, alertSrv, dashboard, filterSrv, panelMoveSrv) {
$scope.init = function() { $scope.init = function() {
console.log('DashFromFileProvider->init()')
file_load($routeParams.jsonFile) file_load($routeParams.jsonFile).then(function(data) {
.then(function(data) { $scope.dashboard = dashboard.create(data);
$scope.dashboard = dashboard.create(data); $scope.filter = filterSrv;
$scope.filter = filterSrv; $scope.filter.init($scope.dashboard);
$scope.filter.init($scope.dashboard);
var panelMove = panelMoveSrv.create($scope.dashboard); var panelMove = panelMoveSrv.create($scope.dashboard);
// For moving stuff around the dashboard. // For moving stuff around the dashboard.
$scope.panelMoveDrop = panelMove.onDrop; $scope.panelMoveDrop = panelMove.onDrop;
$scope.panelMoveStart = panelMove.onStart; $scope.panelMoveStart = panelMove.onStart;
$scope.panelMoveStop = panelMove.onStop; $scope.panelMoveStop = panelMove.onStop;
$scope.panelMoveOver = panelMove.onOver; $scope.panelMoveOver = panelMove.onOver;
$scope.panelMoveOut = panelMove.onOut; $scope.panelMoveOut = panelMove.onOut;
$rootScope.$emit("dashboard-loaded", $scope.dashboard); $rootScope.$emit("dashboard-loaded", $scope.dashboard);
}); });
}; };
var renderTemplate = function(json,params) { var renderTemplate = function(json,params) {
......
src/app/services/dashboard.js
...@@ -13,7 +13,7 @@ function (angular, $, kbn, _) { ...@@ -13,7 +13,7 @@ function (angular, $, kbn, _) {
var module = angular.module('kibana.services'); var module = angular.module('kibana.services');
module.service('dashboard', function(timer, $rootScope) { module.service('dashboard', function(timer, $rootScope, $timeout) {
function DashboardModel (data) { function DashboardModel (data) {
this.title = data.title; this.title = data.title;
......
src/app/services/dashboard/dashboardKeyBindings.js
...@@ -9,7 +9,15 @@ function(angular, $) { ...@@ -9,7 +9,15 @@ function(angular, $) {
var module = angular.module('kibana.services'); var module = angular.module('kibana.services');
module.service('dashboardKeybindings', function($rootScope, keyboardManager, dashboard) { module.service('dashboardKeybindings', function($rootScope, keyboardManager, dashboard) {
this.hasRegistered = false;
this.shortcuts = function() { this.shortcuts = function() {
if (this.hasRegistered) {
return;
}
this.hasRegistered = true;
$rootScope.$on('panel-fullscreen-enter', function() { $rootScope.$on('panel-fullscreen-enter', function() {
$rootScope.fullscreen = true; $rootScope.fullscreen = true;
}); });
......
src/app/services/panelMove.js
...@@ -72,7 +72,7 @@ function (angular, _) { ...@@ -72,7 +72,7 @@ function (angular, _) {
create: function(dashboard) { create: function(dashboard) {
return new PanelMoveSrv(dashboard); return new PanelMoveSrv(dashboard);
} }
} };
}); });
......
src/app/services/unsavedChangesSrv.js
...@@ -12,16 +12,19 @@ function(angular, _, config) { ...@@ -12,16 +12,19 @@ function(angular, _, config) {
var module = angular.module('kibana.services'); 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 self = this;
var modalScope = $rootScope.$new(); var modalScope = $rootScope.$new();
$rootScope.$on("dashboard-loaded", function(event, newDashboard) { $rootScope.$on("dashboard-loaded", function(event, newDashboard) {
self.original = angular.copy(newDashboard); self.original = angular.copy(newDashboard);
self.current = newDashboard;
}); });
$rootScope.$on("dashboard-saved", function(event, savedDashboard) { $rootScope.$on("dashboard-saved", function(event, savedDashboard) {
self.original = angular.copy(savedDashboard); self.original = angular.copy(savedDashboard);
self.current = savedDashboard;
}); });
$rootScope.$on("$routeChangeSuccess", function() { $rootScope.$on("$routeChangeSuccess", function() {
...@@ -63,7 +66,7 @@ function(angular, _, config) { ...@@ -63,7 +66,7 @@ function(angular, _, config) {
return false; return false;
} }
var current = angular.copy(dashboard.current); var current = angular.copy(self.current);
var original = self.original; var original = self.original;
// ignore timespan changes // ignore timespan changes
......
src/index.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</head> </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.light.min.css" ng-if="dashboard.style === 'light'">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <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