x/compass-web
Code Issues Proposed changes

Add rickshaw for monitoring

Browse Source 
Change-Id: I77c02a9bf2f4d341fb0310127e2b6d4077de2249
This commit is contained in:
jiahuay 2014-07-22 13:38:27 -07:00
parent dd49da4663
commit 1b839b3dd4
10 changed files with 133 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
v2/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/rickshaw/rickshaw.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/ace.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/ace-fonts.css" />
@ -24,6 +25,8 @@
<script type="text/javascript" src="vendor/angular-dragdrop/draganddrop.js"></script>
<script type="text/javascript" src="vendor/ng-table/ng-table.min.js"></script>
<script type="text/javascript" src="vendor/d3/d3.min.js"></script>
<script type="text/javascript" src="vendor/rickshaw/rickshaw.min.js"></script>
<script type="text/javascript" src="vendor/angular-rickshaw/rickshaw.min.js"></script>
<script type="text/javascript" src="src/app/app.js"></script>
<script type="text/javascript" src="src/app/appDev.js"></script>

3
v2/src/app/app.js
View File

@ -13,7 +13,8 @@ var app = angular.module('compass', [
app.constant('settings', {
apiUrlBase: '/api/v2.0',
metadataUrlBase: 'data'
metadataUrlBase: 'data',
monitoringUrlBase: ''
});
app.config(function($stateProvider, $urlRouterProvider) {

3
v2/src/app/cluster/cluster-charts.tpl.html Normal file
View File

@ -0,0 +1,3 @@
charts
<rickshaw rickshaw-options="options2" rickshaw-features="features2" rickshaw-series="series2">
</rickshaw>

4
v2/src/app/cluster/cluster-hostgroups.tpl.html
View File

@ -1 +1,3 @@
hostgroups
hostgroups
<rickshaw rickshaw-options="options" rickshaw-features="features" rickshaw-series="series">
</rickshaw>

6
v2/src/app/cluster/cluster-monitoring.tpl.html
View File

@ -1,3 +1,3 @@
<div class="main-content">
<div ui-view></div>
</div>
<div ng-controller="monitoringCtrl">
<div ui-view></div>
</div>

1
v2/src/app/cluster/cluster-novamanage.tpl.html Normal file
View File

@ -0,0 +1 @@
nova manage

115
v2/src/app/cluster/cluster.js
View File

@ -2,7 +2,8 @@ angular.module('compass.cluster', [
'ui.router',
'ui.bootstrap',
'ngAnimate',
'ngTable'
'ngTable',
'angular-rickshaw'
])
.config(function($stateProvider, $urlRouterProvider) {
@ -185,7 +186,117 @@ angular.module('compass.cluster', [
};
});
}
]);
])
.controller('monitoringCtrl', ['$scope',
function($scope) {
$scope.options = {
renderer: 'area'
};
$scope.features = {
hover: {
xFormatter: function(x) {
return 't=' + x;
},
yFormatter: function(y) {
return '$' + y;
}
}
};
$scope.series = [{
name: 'Series 1',
color: 'steelblue',
data: [{
x: 0,
y: 23
}, {
x: 1,
y: 15
}, {
x: 2,
y: 79
}, {
x: 3,
y: 31
}, {
x: 4,
y: 60
}]
}, {
name: 'Series 2',
color: 'lightblue',
data: [{
x: 0,
y: 30
}, {
x: 1,
y: 20
}, {
x: 2,
y: 64
}, {
x: 3,
y: 50
}, {
x: 4,
y: 15
}]
}];
$scope.options2 = {
renderer: 'line'
};
$scope.features2 = {
hover: {
xFormatter: function(x) {
return 't=' + x;
},
yFormatter: function(y) {
return '$' + y;
}
}
};
$scope.series2 = [{
name: 'Series 1',
color: 'steelblue',
data: [{
x: 0,
y: 23
}, {
x: 1,
y: 15
}, {
x: 2,
y: 79
}, {
x: 3,
y: 31
}, {
x: 4,
y: 60
}]
}, {
name: 'Series 2',
color: 'lightblue',
data: [{
x: 0,
y: 30
}, {
x: 1,
y: 20
}, {
x: 2,
y: 64
}, {
x: 3,
y: 50
}, {
x: 4,
y: 15
}]
}];
}
])
var ModalInstanceCtrl = function($scope, $modalInstance, allAdapters, cluster) {
$scope.allAdapters = allAdapters;

1
v2/vendor/angular-rickshaw/rickshaw.min.js vendored Normal file
View File

@ -0,0 +1 @@
'use strict';angular.module('angular-rickshaw',[]).directive('rickshaw',function($compile){return{restrict:'EA',scope:{options:'=rickshawOptions',series:'=rickshawSeries',features:'=rickshawFeatures'},link:function(scope,element,attrs){function getSettings(el){var settings=angular.copy(scope.options);settings.element=el;settings.series=scope.series;return settings}var graph;function update(){var mainEl=angular.element(element);mainEl.append(graphEl);mainEl.empty();var graphEl=$compile('<div></div>')(scope);mainEl.append(graphEl);var settings=getSettings(graphEl[0]);graph=new Rickshaw.Graph(settings);if(scope.features&&scope.features.hover){var hoverConfig={graph:graph};hoverConfig.xFormatter=scope.features.hover.xFormatter;hoverConfig.yFormatter=scope.features.hover.yFormatter;hoverConfig.formatter=scope.features.hover.formatter;var hoverDetail=new Rickshaw.Graph.HoverDetail(hoverConfig)}if(scope.features&&scope.features.palette){var palette=new Rickshaw.Color.Palette({scheme:scope.features.palette});for(var i=0;i<settings.series.length;i++){settings.series[i].color=palette.color()}}graph.render();if(scope.features&&scope.features.xAxis){var xAxisConfig={graph:graph};if(scope.features.xAxis.timeUnit){var time=new Rickshaw.Fixtures.Time();xAxisConfig.timeUnit=time.unit(scope.features.xAxis.timeUnit)}var xAxis=new Rickshaw.Graph.Axis.Time(xAxisConfig);xAxis.render()}if(scope.features&&scope.features.yAxis){var yAxisConfig={graph:graph};if(scope.features.yAxis.tickFormat){yAxisConfig.tickFormat=Rickshaw.Fixtures.Number[scope.features.yAxis.tickFormat]}var yAxis=new Rickshaw.Graph.Axis.Y(yAxisConfig);yAxis.render()}if(scope.features&&scope.features.legend){var legendEl=$compile('<div></div>')(scope);mainEl.append(legendEl);var legend=new Rickshaw.Graph.Legend({graph:graph,element:legendEl[0]});if(scope.features.legend.toggle){var shelving=new Rickshaw.Graph.Behavior.Series.Toggle({graph:graph,legend:legend})}if(scope.features.legend.highlight){var highlighter=new Rickshaw.Graph.Behavior.Series.Highlight({graph:graph,legend:legend})}}}scope.$watch('options',function(newValue,oldValue){if(!angular.equals(newValue,oldValue)){update()}});scope.$watch('series',function(newValue,oldValue){if(!angular.equals(newValue,oldValue)){update()}});scope.$watch('features',function(newValue,oldValue){if(!angular.equals(newValue,oldValue)){update()}});update()},controller:function($scope,$element,$attrs){}}});

1
v2/vendor/rickshaw/rickshaw.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
v2/vendor/rickshaw/rickshaw.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long