Update monit APIs. Fix corresponding bugs for charts.
Also update d3 lib Change-Id: I0ece6b311e8fd073f7ef6ebc8af1f81c1943f072
This commit is contained in:
jiahuay
parent
7622386ae8
commit
4a425f596f
@ -84,6 +84,7 @@ ganttchart .chart {
|
|||||||
|
|
||||||
ganttchart text {
|
ganttchart text {
|
||||||
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
|
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ganttchart .axis path, ganttchart .axis line {
|
ganttchart .axis path, ganttchart .axis line {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -18,7 +18,8 @@ var app = angular.module('compass', [
|
|||||||
app.constant('settings', {
|
app.constant('settings', {
|
||||||
apiUrlBase: '/api',
|
apiUrlBase: '/api',
|
||||||
metadataUrlBase: 'data',
|
metadataUrlBase: 'data',
|
||||||
monitoringUrlBase: 'http://metrics-api/monit/api/v1'
|
//monitoringUrlBase: 'http://metrics-api/monit/api/v1'
|
||||||
|
monitoringUrlBase: '/monit/api/v1'
|
||||||
});
|
});
|
||||||
|
|
||||||
app.config(function($stateProvider, $urlRouterProvider) {
|
app.config(function($stateProvider, $urlRouterProvider) {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -12,10 +12,34 @@
|
|||||||
<b class="arrow fa fa-angle-down"></b>
|
<b class="arrow fa fa-angle-down"></b>
|
||||||
</a>
|
</a>
|
||||||
<ul class="submenu" ng-show="isMonitoringNavOpen" style="display: block">
|
<ul class="submenu" ng-show="isMonitoringNavOpen" style="display: block">
|
||||||
<li ng-repeat="nav in monitoringNav" ng-class="{active:state.includes('{{nav.name}}')}">
|
<li ng-class="{active:state.includes('cluster.monitoring.overview')}">
|
||||||
<a ui-sref="{{nav.name}}">
|
<a ui-sref="cluster.monitoring.overview">
|
||||||
<i class="menu-icon fa fa-caret-right"></i>
|
<i class="menu-icon fa fa-caret-right"></i>
|
||||||
{{nav.display}}
|
Overview
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li ng-class="{active:state.includes('cluster.monitoring.topology')}">
|
||||||
|
<a ui-sref="cluster.monitoring.topology">
|
||||||
|
<i class="menu-icon fa fa-caret-right"></i>
|
||||||
|
Topology
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li ng-class="{active:state.includes('cluster.monitoring.alerts')}">
|
||||||
|
<a ui-sref="cluster.monitoring.alerts">
|
||||||
|
<i class="menu-icon fa fa-caret-right"></i>
|
||||||
|
Alerts
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li ng-class="{active:state.includes('cluster.monitoring.metrics')}">
|
||||||
|
<a ui-sref="cluster.monitoring.metrics">
|
||||||
|
<i class="menu-icon fa fa-caret-right"></i>
|
||||||
|
Metrics
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li ng-class="{active:state.includes('cluster.monitoring.charts')}">
|
||||||
|
<a ui-sref="cluster.monitoring.charts">
|
||||||
|
<i class="menu-icon fa fa-caret-right"></i>
|
||||||
|
Dashboards
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -65,7 +65,7 @@ angular.module('compass.cluster', [
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
.controller('clusterCtrl', function($scope, $state, dataService, stateService, $stateParams) {
|
.controller('clusterCtrl', function($scope, $state, dataService, $stateParams) {
|
||||||
$scope.clusterId = $stateParams.id;
|
$scope.clusterId = $stateParams.id;
|
||||||
$scope.state = $state;
|
$scope.state = $state;
|
||||||
|
|
||||||
@ -73,11 +73,6 @@ angular.module('compass.cluster', [
|
|||||||
$scope.clusterInfo = data;
|
$scope.clusterInfo = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
dataService.getMonitoringNav().success(function(data) {
|
|
||||||
$scope.monitoringNav = data;
|
|
||||||
stateService.addStates($scope.monitoringNav);
|
|
||||||
});
|
|
||||||
|
|
||||||
}).directive('clusternav', function($timeout) {
|
}).directive('clusternav', function($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'EAC',
|
restrict: 'EAC',
|
||||||
|
|||||||
@ -4,13 +4,13 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-10" ng-controller="alertsCtrl" style="width: 100%;">
|
<div class="col-lg-10" style="width: 100%;">
|
||||||
<tabset style="width: 100%;">
|
<tabset style="width: 100%;">
|
||||||
<tab>
|
<tab>
|
||||||
<tab-heading>
|
<tab-heading>
|
||||||
<i class="ace-icon fa fa-bell"></i>Alarms
|
<i class="ace-icon fa fa-bell"></i>Alarms
|
||||||
</tab-heading>
|
</tab-heading>
|
||||||
<form class="form-inline">
|
<!--form class="form-inline">
|
||||||
<select class="form-control" ng-model="renderer" ng-change="rendererChanged(renderer)">
|
<select class="form-control" ng-model="renderer" ng-change="rendererChanged(renderer)">
|
||||||
<option ng-repeat="render in renderers" value="{{render}}">{{render}}</option>
|
<option ng-repeat="render in renderers" value="{{render}}">{{render}}</option>
|
||||||
</select>
|
</select>
|
||||||
@ -18,9 +18,9 @@
|
|||||||
<option ng-repeat="uri in uris" value="{{uri.v}}">{{uri.displayName}}</option>
|
<option ng-repeat="uri in uris" value="{{uri.v}}">{{uri.displayName}}</option>
|
||||||
</select>
|
</select>
|
||||||
<button class="btn btn-primary" ng-click="changeSeriesData(0)">Generate Alarm Report</button>
|
<button class="btn btn-primary" ng-click="changeSeriesData(0)">Generate Alarm Report</button>
|
||||||
</form>
|
</form-->
|
||||||
<div class="panel-body" id="alarmsGraphContainer">
|
<div class="panel-body" id="alarmsGraphContainer">
|
||||||
<ganttchart data="alerts" hosts="hosts"></ganttchart>
|
<ganttchart data="alerts" dataready="alertDataReady"></ganttchart>
|
||||||
</div>
|
</div>
|
||||||
</tab>
|
</tab>
|
||||||
<tab>
|
<tab>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-10" style="width: 100%;" ng-controller="metricsCtrl">
|
<div class="col-lg-10" style="width: 100%;">
|
||||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||||
<tab heading="Metrics">
|
<tab heading="Metrics">
|
||||||
<!--form class="form-inline ng-valid">
|
<!--form class="form-inline ng-valid">
|
||||||
@ -21,8 +21,8 @@
|
|||||||
<div class="col-md-4 col-sm-6">
|
<div class="col-md-4 col-sm-6">
|
||||||
<h3>
|
<h3>
|
||||||
Metrics Browser
|
Metrics Browser
|
||||||
<a href="" class="btn btn-default pull-right" ng-click="collapseAll()">Collapse all</a>
|
<a href="" class="btn btn-default btn-xs pull-right" ng-click="collapseAll()">Collapse all</a>
|
||||||
<a href="" class="btn btn-default pull-right margin-right-5" ng-click="expandAll()">Expand all</a>
|
<a href="" class="btn btn-default btn-xs pull-right margin-right-5" ng-click="expandAll()">Expand all</a>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<!-- Nested node template -->
|
<!-- Nested node template -->
|
||||||
@ -61,6 +61,7 @@
|
|||||||
interactive="true"
|
interactive="true"
|
||||||
useInteractiveGuideline="true"
|
useInteractiveGuideline="true"
|
||||||
toolTipContent="toolTipContentFunction()"
|
toolTipContent="toolTipContentFunction()"
|
||||||
|
xAxisTickFormat="xAxisTickFormatFunction()"
|
||||||
margin="{left:50,top:50,bottom:50,right:50}"
|
margin="{left:50,top:50,bottom:50,right:50}"
|
||||||
forceY="[0]"
|
forceY="[0]"
|
||||||
showLegend="true"
|
showLegend="true"
|
||||||
|
|||||||
@ -15,461 +15,148 @@ angular.module('compass.monitoring', [
|
|||||||
templateUrl: 'src/app/monitoring/cluster-monitoring.tpl.html',
|
templateUrl: 'src/app/monitoring/cluster-monitoring.tpl.html',
|
||||||
authenticate: true
|
authenticate: true
|
||||||
})
|
})
|
||||||
|
.state('cluster.monitoring.overview', {
|
||||||
|
url: '/overview',
|
||||||
|
controller: 'moniOverviewCtrl',
|
||||||
|
templateUrl: 'src/app/monitoring/overview.tpl.html',
|
||||||
|
authenticate: true
|
||||||
|
})
|
||||||
|
.state('cluster.monitoring.topology', {
|
||||||
|
url: '/topology',
|
||||||
|
controller: 'topologyCtrl',
|
||||||
|
templateUrl: 'src/app/monitoring/topology.tpl.html',
|
||||||
|
authenticate: true
|
||||||
|
})
|
||||||
|
.state('cluster.monitoring.alerts', {
|
||||||
|
url: '/alerts',
|
||||||
|
controller: 'alertsCtrl',
|
||||||
|
templateUrl: 'src/app/monitoring/alerts.tpl.html',
|
||||||
|
authenticate: true
|
||||||
|
})
|
||||||
|
.state('cluster.monitoring.metrics', {
|
||||||
|
url: '/metrics',
|
||||||
|
controller: 'metricsCtrl',
|
||||||
|
templateUrl: 'src/app/monitoring/metrics.tpl.html',
|
||||||
|
authenticate: true
|
||||||
|
})
|
||||||
|
.state('cluster.monitoring.charts', {
|
||||||
|
url: '/charts',
|
||||||
|
templateUrl: 'src/app/monitoring/charts.tpl.html',
|
||||||
|
authenticate: true
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
.controller('alertsCtrl', ['$scope',
|
.controller('moniOverviewCtrl', function($scope, dataService, $stateParams) {
|
||||||
function($scope) {
|
var clusterId = $stateParams.id;
|
||||||
$scope.options = {
|
|
||||||
renderer: 'area'
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.alertsData = {
|
|
||||||
"id": "server-1.huawei.com",
|
|
||||||
"name": "server-1.huawei.com",
|
|
||||||
"resource": "hosts",
|
|
||||||
"state": "running",
|
|
||||||
"type": "server",
|
|
||||||
"metrics": [],
|
|
||||||
"alarms": [{
|
|
||||||
"id": "critical",
|
|
||||||
"name": "critical",
|
|
||||||
"data": [{
|
|
||||||
"start": 1406831282409,
|
|
||||||
"end": 1406870037149
|
|
||||||
}, {
|
|
||||||
"start": 1406745382748,
|
|
||||||
"end": 1406761927670
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"id": "minor",
|
|
||||||
"name": "minor",
|
|
||||||
"data": [{
|
|
||||||
"start": 1406873957790,
|
|
||||||
"end": 1406886655198
|
|
||||||
}, {
|
|
||||||
"start": 1406774590378,
|
|
||||||
"end": 1406850781190
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"id": "positive",
|
|
||||||
"name": "positive",
|
|
||||||
"data": [{
|
|
||||||
"start": 1406873957790,
|
|
||||||
"end": 1406886655198
|
|
||||||
}, {
|
|
||||||
"start": 1406774590378,
|
|
||||||
"end": 1406850781190
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"id": "info",
|
|
||||||
"name": "info",
|
|
||||||
"data": [{
|
|
||||||
"start": 1406873957790,
|
|
||||||
"end": 1406886655198
|
|
||||||
}, {
|
|
||||||
"start": 1406774590378,
|
|
||||||
"end": 1406850781190
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.alerts = [{
|
|
||||||
"startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 02:36:45 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 04:56:32 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 06:35:47 EST 2012"),
|
|
||||||
"name": "os-db-node",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 06:29:53 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 06:34:04 EST 2012"),
|
|
||||||
"name": "os-db-node",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 05:35:21 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 06:21:22 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 05:00:06 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 05:05:07 EST 2012"),
|
|
||||||
"name": "os-keystone",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 03:46:59 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 04:54:19 EST 2012"),
|
|
||||||
"name": "os-image",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 04:02:45 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 04:48:56 EST 2012"),
|
|
||||||
"name": "os-image",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 03:27:35 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 03:58:43 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 01:40:11 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 03:26:35 EST 2012"),
|
|
||||||
"name": "os-db-node",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 03:00:03 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 03:09:51 EST 2012"),
|
|
||||||
"name": "os-keystone",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 01:21:00 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 02:51:42 EST 2012"),
|
|
||||||
"name": "os-mq",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 01:08:42 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 01:33:42 EST 2012"),
|
|
||||||
"name": "os-keystone",
|
|
||||||
"status": "CRITICAL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 00:27:15 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 00:54:56 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 00:29:48 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 00:44:50 EST 2012"),
|
|
||||||
"name": "os-image",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 07:39:21 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 07:43:22 EST 2012"),
|
|
||||||
"name": "os-image",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 07:00:06 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 07:05:07 EST 2012"),
|
|
||||||
"name": "os-compute2",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 08:46:59 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 09:54:19 EST 2012"),
|
|
||||||
"name": "os-compute1",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 09:02:45 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 09:48:56 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 08:27:35 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 08:58:43 EST 2012"),
|
|
||||||
"name": "os-compute2",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 08:40:11 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 08:46:35 EST 2012"),
|
|
||||||
"name": "os-mq",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 08:00:03 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 08:09:51 EST 2012"),
|
|
||||||
"name": "os-compute2",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 10:21:00 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 10:51:42 EST 2012"),
|
|
||||||
"name": "os-compute1",
|
|
||||||
"status": "SUCCESSFUL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 11:08:42 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 11:33:42 EST 2012"),
|
|
||||||
"name": "os-network",
|
|
||||||
"status": "CRITICAL"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sun Dec 09 12:27:15 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 12:54:56 EST 2012"),
|
|
||||||
"name": "os-mq",
|
|
||||||
"status": "WARNING"
|
|
||||||
}, {
|
|
||||||
"startDate": new Date("Sat Dec 08 23:12:24 EST 2012"),
|
|
||||||
"endDate": new Date("Sun Dec 09 00:26:13 EST 2012"),
|
|
||||||
"name": "os-controller",
|
|
||||||
"status": "UNKNOWN"
|
|
||||||
}];
|
|
||||||
|
|
||||||
$scope.hosts = ["os-controller", "os-db-node", "os-keystone", "os-network", "os-image", "os-mq", "os-compute1", "os-compute2"];
|
|
||||||
|
|
||||||
|
$scope.goDash = function(locs) {
|
||||||
|
//alert(locs);
|
||||||
|
setTimeout(function() {
|
||||||
|
document.getElementById('dashboards').src = "/dash/#/dashboard/file/" + locs;
|
||||||
|
}, 600);
|
||||||
}
|
}
|
||||||
])
|
|
||||||
|
|
||||||
|
$scope.moniOverviewData = [];
|
||||||
|
dataService.monitorOverview(clusterId).success(function(data) {
|
||||||
|
$scope.moniOverviewData = data;
|
||||||
|
}).error(function(response) {
|
||||||
|
// TODO: error handle
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
|
||||||
.value("graphConfigurations", {
|
|
||||||
apis: {
|
|
||||||
'simulation': {
|
|
||||||
uri: { v : "/monit/api/1.0.0/", displayName: 'Testing Cluster'},
|
|
||||||
metrics: true, alarms: true, topos: true,
|
|
||||||
},
|
|
||||||
'simulation.alarms': {
|
|
||||||
uri: "/monit/api/1.0.0/hosts/uc-server-2.huawei.com/alarms"
|
|
||||||
},
|
|
||||||
'192.168.255.85.hostgroup': {
|
|
||||||
uri: { v : '/monit/api/hostgroup/host1/metric/cpu.0.cpu.system.value',
|
|
||||||
displayName: 'Cluster 1'},
|
|
||||||
metrics: true, alarms: true
|
|
||||||
},
|
|
||||||
'192.168.255.85.topology': {
|
|
||||||
uri: { v: '/monit/api/topologies/1', displayName: 'Cluster 1'}, topos:true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderers:{
|
|
||||||
line: {
|
|
||||||
name: "line",
|
|
||||||
metrics: true,
|
|
||||||
view: com.huawei.compass.LineGraph,
|
|
||||||
model: com.huawei.compass.LineGraphModel
|
|
||||||
},
|
|
||||||
area: {
|
|
||||||
name: "area",
|
|
||||||
metrics: true,
|
|
||||||
view: com.huawei.compass.AreaGraph,
|
|
||||||
model: com.huawei.compass.AreaGraphModel
|
|
||||||
},
|
|
||||||
sparkline: {
|
|
||||||
name: "sparkline",
|
|
||||||
metrics: true,
|
|
||||||
view: com.huawei.compass.SparkGraph,
|
|
||||||
model: com.huawei.compass.SparkGraphModel
|
|
||||||
},
|
|
||||||
all: {
|
|
||||||
name: "all",
|
|
||||||
alarms: true,
|
|
||||||
view: com.huawei.compass.BlockGraph,
|
|
||||||
model: com.huawei.compass.BlockGraphModel,
|
|
||||||
value:""
|
|
||||||
},
|
|
||||||
|
|
||||||
critical: {
|
|
||||||
name: "critical",
|
|
||||||
alarms: true,
|
|
||||||
view: com.huawei.compass.BlockGraph,
|
|
||||||
model: com.huawei.compass.BlockGraphModel,
|
|
||||||
value:"critical"
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
name: "warning",
|
|
||||||
alarms: true,
|
|
||||||
view: com.huawei.compass.BlockGraph,
|
|
||||||
model: com.huawei.compass.BlockGraphModel,
|
|
||||||
value:"minor"
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
name: "success",
|
|
||||||
alarms: true,
|
|
||||||
view: com.huawei.compass.BlockGraph,
|
|
||||||
model: com.huawei.compass.BlockGraphModel,
|
|
||||||
value:"positive"
|
|
||||||
},
|
|
||||||
unknown: {
|
|
||||||
name: "unknown",
|
|
||||||
alarms: true,
|
|
||||||
view: com.huawei.compass.BlockGraph,
|
|
||||||
model: com.huawei.compass.BlockGraphModel,
|
|
||||||
value:"info"
|
|
||||||
},
|
|
||||||
tree: {
|
|
||||||
name: "tree",
|
|
||||||
topos: true,
|
|
||||||
view: com.huawei.compass.TreeGraph,
|
|
||||||
model: com.huawei.compass.TreeGraphModel,
|
|
||||||
value:"info"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
styles:{
|
|
||||||
"switch":"/assets/images/switch.png",
|
|
||||||
"server":"/assets/images/server.png",
|
|
||||||
"service":"/assets/images/switch.png",
|
|
||||||
"running":"#669900",
|
|
||||||
"error" : "#CC0000",
|
|
||||||
"warning" : "#ffff33",
|
|
||||||
"unknown" : "#33b5e5"
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
*/
|
|
||||||
|
|
||||||
.controller('alarmsCtrl', ['$scope', '$http', 'graphConfigurations', 'graphService',
|
.controller('topologyCtrl', function($scope, dataService, $stateParams) {
|
||||||
function($scope, $http, graphConfigurations, graphService) {
|
var clusterId = $stateParams.id;
|
||||||
$scope.uris = graphService.getUris(graphConfigurations, "alarms");
|
|
||||||
$scope.renderers = graphService.getRenderers(graphConfigurations, "alarms");
|
$scope.physicalTopoData = {};
|
||||||
$scope.rendererChanged = graphService.getRendererListener($scope);
|
$scope.physicalTopoDataReady = "false";
|
||||||
$scope.uriChanged = graphService.getUriListener($scope);
|
|
||||||
$scope.alertsData = {
|
dataService.monitorTopology(clusterId).success(function(data) {
|
||||||
"id": "server-1.huawei.com",
|
$scope.physicalTopoData = data;
|
||||||
"name": "server-1.huawei.com",
|
$scope.physicalTopoDataReady = "true";
|
||||||
"resource": "hosts",
|
}).error(function(response) {
|
||||||
"state": "running",
|
// TODO: error handling
|
||||||
"type": "server",
|
});
|
||||||
"metrics": [],
|
|
||||||
"alarms": [{
|
|
||||||
"id": "critical",
|
$scope.logicalTopoData = {};
|
||||||
"name": "critical",
|
$scope.logicalTopoDataReady = "false";
|
||||||
"data": [{
|
|
||||||
"start": 1406831282409,
|
dataService.monitorServiceTopology(clusterId).success(function(data) {
|
||||||
"end": 1406870037149
|
$scope.logicalTopoData = data;
|
||||||
}, {
|
$scope.logicalTopoDataReady = "true";
|
||||||
"start": 1406745382748,
|
}).error(function(response) {
|
||||||
"end": 1406761927670
|
// TODO: error handling
|
||||||
}]
|
});
|
||||||
}, {
|
|
||||||
"id": "minor",
|
})
|
||||||
"name": "minor",
|
|
||||||
"data": [{
|
.controller('alertsCtrl', function($scope, dataService, $stateParams) {
|
||||||
"start": 1406873957790,
|
var clusterId = $stateParams.id;
|
||||||
"end": 1406886655198
|
|
||||||
}, {
|
$scope.alerts = [];
|
||||||
"start": 1406774590378,
|
$scope.alertDataReady = "false";
|
||||||
"end": 1406850781190
|
|
||||||
}]
|
dataService.monitorAlarms(clusterId).success(function(data) {
|
||||||
}, {
|
$scope.alerts = data;
|
||||||
"id": "positive",
|
$scope.alertDataReady = "true";
|
||||||
"name": "positive",
|
}).error(function(response) {
|
||||||
"data": [{
|
//TODO: error handling
|
||||||
"start": 1406873957790,
|
});
|
||||||
"end": 1406886655198
|
|
||||||
}, {
|
})
|
||||||
"start": 1406774590378,
|
|
||||||
"end": 1406850781190
|
.controller('metricsCtrl', function($scope, dataService, $stateParams) {
|
||||||
}]
|
var clusterId = $stateParams.id;
|
||||||
}, {
|
|
||||||
"id": "info",
|
$scope.metricsTree = [];
|
||||||
"name": "info",
|
dataService.monitorMetricsTree().success(function(data) {
|
||||||
"data": [{
|
$scope.metricsTree = data;
|
||||||
"start": 1406873957790,
|
}).error(function(response) {
|
||||||
"end": 1406886655198
|
// TODO
|
||||||
}, {
|
});
|
||||||
"start": 1406774590378,
|
|
||||||
"end": 1406850781190
|
$scope.metrics = [];
|
||||||
}]
|
dataService.monitorMetrics().success(function(data) {
|
||||||
}]
|
$scope.metrics = data;
|
||||||
};
|
}).error(function(response) {
|
||||||
$scope.changeSeriesData = graphService.getDataListener($scope, function(data) {
|
// TODO
|
||||||
var uri = $scope.uri;
|
});
|
||||||
console.log("URI is .....", uri);
|
|
||||||
var renderer = $scope.renderer;
|
$scope.metricsData = [];
|
||||||
var isValidApi = (uri == graphConfigurations.apis["192.168.255.85.hostgroup"].uri.v);
|
$scope.generate = function(node) {
|
||||||
if (isValidApi)
|
console.log(node);
|
||||||
for (var i = 0; i < data.length; i++) data[i].name = data[i].id;
|
|
||||||
var gFormatter = com.huawei.compass.formatter.hourminute;
|
dataService.monitorClusterMetric(clusterId, node.title).success(function(data) {
|
||||||
var gName = "Alarms";
|
$scope.metricsData = data;
|
||||||
var gData = isValidApi ? data : data.groups[0].hosts;
|
|
||||||
// TODO(jiahua): graphConfigurations.renderers[renderer] is undefined
|
}).error(function(response) {
|
||||||
var gProperty = graphConfigurations.renderers[renderer].value;
|
// TODO
|
||||||
var view = new graphConfigurations.renderers[renderer].view({
|
|
||||||
name: gName,
|
|
||||||
model: new graphConfigurations.renderers[renderer].model({
|
|
||||||
data: gData,
|
|
||||||
propertyKey: "alarms",
|
|
||||||
propertyName: gProperty
|
|
||||||
}).model,
|
|
||||||
formatter: gFormatter,
|
|
||||||
yFormatter: d3.format('.3e'),
|
|
||||||
css: "chart-title",
|
|
||||||
width: 500,
|
|
||||||
height: 500,
|
|
||||||
css: {
|
|
||||||
"header": "chart-title",
|
|
||||||
"critical": "alarm-critical",
|
|
||||||
"major": "alarm-major",
|
|
||||||
"minor": "alarm-minor",
|
|
||||||
"info": "alarm-info",
|
|
||||||
"positive": "alarm-positive"
|
|
||||||
},
|
|
||||||
listener: function(d) {
|
|
||||||
alert("Alarm Selected (" + d.startDate + ", " + d.endDate + ")");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$.graphs.get("alarmsGraphContainer").innerHTML = "";
|
|
||||||
$.graphs.get("alarmsGraphContainer").appendChild(view);
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
.controller('metricsCtrl', function($scope, dataService) {
|
// For Angular UI Tree
|
||||||
|
|
||||||
$scope.toggle = function(scope) {
|
$scope.toggle = function(scope) {
|
||||||
scope.toggle();
|
scope.toggle();
|
||||||
};
|
};
|
||||||
|
|
||||||
var getRootNodesScope = function() {
|
var getRootNodesScope = function() {
|
||||||
return angular.element(document.getElementById("tree-root")).scope();
|
return angular.element(document.getElementById("tree-root")).scope();
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.collapseAll = function() {
|
$scope.collapseAll = function() {
|
||||||
var scope = getRootNodesScope();
|
var scope = getRootNodesScope();
|
||||||
scope.collapseAll();
|
scope.collapseAll();
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.expandAll = function() {
|
$scope.expandAll = function() {
|
||||||
var scope = getRootNodesScope();
|
var scope = getRootNodesScope();
|
||||||
scope.expandAll();
|
scope.expandAll();
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.metricsTree = [];
|
// For NVD3 Line Chart
|
||||||
|
$scope.xAxisTickFormatFunction = function() {
|
||||||
dataService.getMetricsTreeNodes().success(function(data) {
|
|
||||||
$scope.metricsTree = data;
|
|
||||||
}).error(function(response) {
|
|
||||||
$scope.metricsTree = [];
|
|
||||||
});
|
|
||||||
|
|
||||||
$scope.generate = function(node) {
|
|
||||||
console.log(node);
|
|
||||||
// call metric api here to get data for chart
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.metricsData = [{
|
|
||||||
"key": "Series 1",
|
|
||||||
"values": [
|
|
||||||
[1, 0],
|
|
||||||
[2, 6],
|
|
||||||
[3, 5],
|
|
||||||
[4, 11],
|
|
||||||
[5, 5]
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"key": "Series 2",
|
|
||||||
"values": [
|
|
||||||
[1, 0],
|
|
||||||
[2, 10],
|
|
||||||
[3, 5],
|
|
||||||
[4, 5],
|
|
||||||
[5, 0]
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"key": "Series 3",
|
|
||||||
"values": [
|
|
||||||
[1, 0],
|
|
||||||
[2, 6],
|
|
||||||
[3, 5],
|
|
||||||
[4, 11],
|
|
||||||
[5, 5]
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"key": "Series 4",
|
|
||||||
"values": [
|
|
||||||
[1, 7],
|
|
||||||
[2, 14],
|
|
||||||
[3, 14],
|
|
||||||
[4, 23],
|
|
||||||
[5, 16]
|
|
||||||
]
|
|
||||||
}];
|
|
||||||
|
|
||||||
$scope.xAxisTickFormat = function() {
|
|
||||||
return function(d) {
|
return function(d) {
|
||||||
return d3.time.format('%x')(new Date(d));
|
return d3.time.format('%x')(new Date(d));
|
||||||
}
|
}
|
||||||
@ -477,7 +164,6 @@ angular.module('compass.monitoring', [
|
|||||||
|
|
||||||
$scope.toolTipContentFunction = function() {
|
$scope.toolTipContentFunction = function() {
|
||||||
return function(key, x, y, e, graph) {
|
return function(key, x, y, e, graph) {
|
||||||
console.log('tooltip content');
|
|
||||||
return 'Super New Tooltip' +
|
return 'Super New Tooltip' +
|
||||||
'<h1>' + key + '</h1>' +
|
'<h1>' + key + '</h1>' +
|
||||||
'<p>' + y + ' at ' + x + '</p>'
|
'<p>' + y + ' at ' + x + '</p>'
|
||||||
@ -495,368 +181,3 @@ angular.module('compass.monitoring', [
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
.controller('moniOverviewCtrl', function($scope) {
|
|
||||||
|
|
||||||
$scope.goDash = function(locs){
|
|
||||||
//alert(locs);
|
|
||||||
setTimeout(function(){document.getElementById('dashboards').src = "/dash/#/dashboard/file/"+locs;},600);
|
|
||||||
}
|
|
||||||
|
|
||||||
$scope.moniOverviewData = [{
|
|
||||||
"name": "cluster_summary",
|
|
||||||
"display_name": "Cluster Summary",
|
|
||||||
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Metrics%20Dashboard",
|
|
||||||
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "controller",
|
|
||||||
"display_name": "Controller",
|
|
||||||
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Controller",
|
|
||||||
|
|
||||||
"state": "error"
|
|
||||||
}, {
|
|
||||||
"name": "alert",
|
|
||||||
"display_name": "Alert",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/alerts",
|
|
||||||
"dash": "",
|
|
||||||
"state": "",
|
|
||||||
"alerts": [{
|
|
||||||
"type": "critical",
|
|
||||||
"name": "os-keystone"
|
|
||||||
}, {
|
|
||||||
"type": "warning",
|
|
||||||
"name": "os-mq",
|
|
||||||
}, {
|
|
||||||
"type": "warning",
|
|
||||||
"name": "os-db-node"
|
|
||||||
}, {
|
|
||||||
"type": "critical",
|
|
||||||
"name": "os-network"
|
|
||||||
}, {
|
|
||||||
"type": "warning",
|
|
||||||
"name": "os-keystone"
|
|
||||||
}, {
|
|
||||||
"type": "warning",
|
|
||||||
"name": "os-compute2"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "compute",
|
|
||||||
"display_name": "Compute",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Compute",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "security",
|
|
||||||
"display_name": "Security",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Security",
|
|
||||||
"state": "warning"
|
|
||||||
}, {
|
|
||||||
"name": "database",
|
|
||||||
"display_name": "Database",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Database",
|
|
||||||
"state": "warning"
|
|
||||||
}, {
|
|
||||||
"name": "image",
|
|
||||||
"display_name": "Image",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Image",
|
|
||||||
"state": "warning"
|
|
||||||
}, {
|
|
||||||
"name": "store",
|
|
||||||
"display_name": "Store",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Storage",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "messagebus",
|
|
||||||
"display_name": "Message Bus",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Message%20Bus",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "processes",
|
|
||||||
"display_name": "Processes",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Processes",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "monitoring",
|
|
||||||
"display_name": "Monitoring",
|
|
||||||
"base_url": "/#/cluster/2/monitoring/charts",
|
|
||||||
"dash": "Metrics%20Dashboard",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "users",
|
|
||||||
"display_name": "Users",
|
|
||||||
"base_url": "/#/users",
|
|
||||||
"dash": "",
|
|
||||||
"state": "ok"
|
|
||||||
}];
|
|
||||||
|
|
||||||
|
|
||||||
$scope.logicalTopoData = {
|
|
||||||
"name": "cluster",
|
|
||||||
"children": [{
|
|
||||||
"name": "compute",
|
|
||||||
"state": "error",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-compute1",
|
|
||||||
"state": "error",
|
|
||||||
"children": [{
|
|
||||||
"name": "nova-compute",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-api-metadata",
|
|
||||||
}, {
|
|
||||||
"name": "nova-consoleauth",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "ceilometer-agent-compute",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "neutron-openvswitch-agent",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-novncproxy",
|
|
||||||
"state": "ok"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "os-compute2",
|
|
||||||
"state": "error",
|
|
||||||
"children": [{
|
|
||||||
"name": "nova-compute",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-api-metadata",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-consoleauth",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "ceilometer-agent-compute",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "neutron-openvswitch-agent",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-novncproxy",
|
|
||||||
"state": "ok"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "controller",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-controller",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "glance-api",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "glance-registry",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "heat-api",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "heat-api-cfn",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "heat-engine",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "keystone-all",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "neutron-server",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-api",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-cert",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-conductor",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-consoleauth",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-novncproxy",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-objectstore",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "nova-scheduler",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "ceilometer-api",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "ceilometer-agent-central",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "cpu"
|
|
||||||
}, {
|
|
||||||
"name": "memory"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "ceilometer-collector",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "process count"
|
|
||||||
}, {
|
|
||||||
"name": "load"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "network",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-network",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "openvswitch",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "interface tx"
|
|
||||||
}, {
|
|
||||||
"name": "interface xx"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "neutron",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "process status"
|
|
||||||
}, {
|
|
||||||
"name": "memory"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "image",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-image",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "glance",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "image count"
|
|
||||||
}, {
|
|
||||||
"name": "process status"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "cinder-volume",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "storage capacity"
|
|
||||||
}, {
|
|
||||||
"name": "process status"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "cinder-api",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "cinder-scheduler",
|
|
||||||
"state": "ok"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "database",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-db-node",
|
|
||||||
"children": [{
|
|
||||||
"name": "mysql",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "queries per second"
|
|
||||||
}, {
|
|
||||||
"name": "response time"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "redis",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "queries per second"
|
|
||||||
}, {
|
|
||||||
"name": "response time"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "message queue",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-mq",
|
|
||||||
"children": [{
|
|
||||||
"name": "rabbit-mq",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "process count"
|
|
||||||
}, {
|
|
||||||
"name": "messages tx"
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
"name": "mysql",
|
|
||||||
"state": "ok",
|
|
||||||
"children": [{
|
|
||||||
"name": "status"
|
|
||||||
}, {
|
|
||||||
"name": "connection"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
$scope.physicalTopoData = {
|
|
||||||
"name": "compass-dc1",
|
|
||||||
"children": [{
|
|
||||||
"name": "172.29.8.40",
|
|
||||||
"state": "warning",
|
|
||||||
"children": [{
|
|
||||||
"name": "os-controller",
|
|
||||||
"state": "warning"
|
|
||||||
}, {
|
|
||||||
"name": "os-db-node",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "os-keystone",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "os-network",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "os-image",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "os-mq",
|
|
||||||
"state": "ok"
|
|
||||||
}, {
|
|
||||||
"name": "os-compute1",
|
|
||||||
"state": "warning"
|
|
||||||
}, {
|
|
||||||
"name": "os-compute2",
|
|
||||||
"state": "ok"
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
$scope.serverCount = 8;
|
|
||||||
|
|
||||||
//$scope.topoDropDown = 'service';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|||||||
@ -3,8 +3,7 @@
|
|||||||
Cluster Overview
|
Cluster Overview
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container row side-padding-0 top-padding-0">
|
||||||
<div class="container row side-padding-0 top-padding-0" ng-controller="moniOverviewCtrl">
|
|
||||||
<div class="toc info-icons">
|
<div class="toc info-icons">
|
||||||
<ul class="tiles">
|
<ul class="tiles">
|
||||||
<li ng-repeat="tile in moniOverviewData">
|
<li ng-repeat="tile in moniOverviewData">
|
||||||
@ -49,22 +48,4 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--div class="row side-padding-10 top-padding-10" ng-controller="moniOverviewCtrl">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<div ng-repeat="role in logicalTopoData.children" class="well pull-left">
|
|
||||||
<span>{{role.name}}</span>
|
|
||||||
<span>{{role.children.length}}</span>
|
|
||||||
<br/>{{role.state}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 top-padding-10" style="height: 300px">
|
|
||||||
<nvd3-stacked-area-chart data="exampleData" id="exampleId" showXAxis="true" showYAxis="true" tooltips="true" interactive="true" useInteractiveGuideline="true" toolTipContent="toolTipContentFunction()" forceY="[0]">
|
|
||||||
<svg></svg>
|
|
||||||
</nvd3-stacked-area-chart>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div-->
|
|
||||||
|
|||||||
@ -4,16 +4,17 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-10" ng-controller="moniOverviewCtrl" style="width: 100%;">
|
<div class="col-lg-10" style="width: 100%;">
|
||||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||||
<tab heading="Physical View">
|
<tab heading="Physical View">
|
||||||
Layer 2/3 Topology
|
Layer 2/3 Topology
|
||||||
<treechart id="physicalTopo" data="physicalTopoData" count="serverCount" style="width: 100%; height: 1280px; transition: 0.4s all ease-out;"></treechart>
|
<treechart id="physicalTopo" data="physicalTopoData" dataready="physicalTopoDataReady" style="width: 100%; height: 1280px; transition: 0.4s all ease-out;"></treechart>
|
||||||
|
|
||||||
</tab>
|
</tab>
|
||||||
|
|
||||||
<tab heading="Service View">
|
<tab heading="Service View">
|
||||||
Service Diagram
|
Service Diagram
|
||||||
<circlepacking id="logicalTopo" data="logicalTopoData" style="display: block; margin-left: auto; margin-right: auto; width: 100%; height: 700px; transition: 0.4s all ease-out;"></circlepacking>
|
<circlepacking id="logicalTopo" data="logicalTopoData" dataready="logicalTopoDataReady" style="display: block; margin-left: auto; margin-right: auto; width: 100%; height: 700px; transition: 0.4s all ease-out;"></circlepacking>
|
||||||
</tab>
|
</tab>
|
||||||
</tabset>
|
</tabset>
|
||||||
</div>
|
</div>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
angular.module('compass.services', [])
|
angular.module('compass.services', [])
|
||||||
|
|
||||||
// stateService is used for dynamically add/edit state
|
// stateService is used for dynamically add/edit state
|
||||||
|
/*
|
||||||
.service('stateService', ['$state',
|
.service('stateService', ['$state',
|
||||||
function($state) {
|
function($state) {
|
||||||
this.addStates = function(pendingStates) {
|
this.addStates = function(pendingStates) {
|
||||||
@ -25,6 +26,7 @@ angular.module('compass.services', [])
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
*/
|
||||||
|
|
||||||
// dataService is used for http calls
|
// dataService is used for http calls
|
||||||
.service('dataService', ['$http', 'settings',
|
.service('dataService', ['$http', 'settings',
|
||||||
@ -208,134 +210,95 @@ angular.module('compass.services', [])
|
|||||||
this.deleteHost = function(id) {
|
this.deleteHost = function(id) {
|
||||||
return $http.delete(settings.apiUrlBase + '/hosts/' + id);
|
return $http.delete(settings.apiUrlBase + '/hosts/' + id);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
this.getMetricsTreeNodes = function() {
|
|
||||||
return $http.get(settings.metadataUrlBase + '/metrics_tree.json');
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitorHosts = function() {
|
|
||||||
// /monit/api/hosts
|
|
||||||
return $http.get(settings.monitoringUrlBase + '/hosts');
|
|
||||||
/*
|
/*
|
||||||
return $http.jsonp(settings.monitoringUrlBase + '/hosts' + settings.jsonpSuffix);
|
this.deleteHost = function(clusterId, hostId) {
|
||||||
var url = settings.monitoringUrlBase + '/hosts' ;
|
return $http.delete(settings.apiUrlBase + '/clusters/' + clusterId + '/hosts/' + hostId);
|
||||||
$http.jsonp(url).success(function (data, status, headers, config) {
|
};
|
||||||
console.log(data);
|
|
||||||
return data;
|
|
||||||
}).error(function (data, status, headers, config) {
|
|
||||||
//this always gets called
|
|
||||||
console.log(status);
|
|
||||||
deferred.reject(status);
|
|
||||||
return 'undefined';
|
|
||||||
});
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
this.monitorHosts = function(id) {
|
||||||
|
// This differ from the main hosts API because it has status/alert information
|
||||||
|
// /monit/api/cluster/<id>/hosts
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + id + '/hosts');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorRsHostGroupMetric = function(groupName, metricName) {
|
/* this.monitorProxy = function(px_url) {
|
||||||
// /monit/api/rshostgroup/<hostgroup>/metric/<metricname>
|
// Leave for now may delete later
|
||||||
return $http.get(settings.monitoringUrlBase + '/rshostgroup/' + groupName + '/metric/' + metricName);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitorAlerts = function() {
|
|
||||||
// /monit/api/alarms
|
|
||||||
//return $http.get(settings.monitoringUrlBase + '/alarms');
|
|
||||||
var url = settings.monitoringUrlBase + '/alarms' ;
|
|
||||||
return $http.get(settings.monitoringUrlBase + '/hosts/');
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitorTest = function() {
|
|
||||||
return $http.get(settings.monitoringUrlBase + '/');
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitorProxy = function(px_url) {
|
|
||||||
// /monit/api/proxy/<path:url>
|
// /monit/api/proxy/<path:url>
|
||||||
return $http.get(settings.monitoringUrlBase + '/proxy/' + px_url);
|
return $http.get(settings.monitoringUrlBase + '/proxy/' + px_url);
|
||||||
};
|
};
|
||||||
|
*/
|
||||||
this.monitorMetrics = function() {
|
this.monitorMetrics = function() {
|
||||||
|
// This returns a flat json list of metrics currently or historically have been collected
|
||||||
// /monit/api/metrics
|
// /monit/api/metrics
|
||||||
return $http.get(settings.monitoringUrlBase + '/metrics');
|
return $http.get(settings.monitoringUrlBase + '/metrics');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorMetricsTree = function() {
|
this.monitorMetricsTree = function() {
|
||||||
|
// This will also order the metrics in a tree
|
||||||
// /monit/api/metricstree
|
// /monit/api/metricstree
|
||||||
return $http.get(settings.monitoringUrlBase + '/metricstree');
|
return $http.get(settings.monitoringUrlBase + '/metricstree');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorHostMetric = function(hostName, metricName) {
|
this.monitorHostMetric = function(clusterId, hostName, metricName) {
|
||||||
// /monit/api/host/<hostname>/metric/<metricname>
|
// Returns a single metric for a cluster host
|
||||||
return $http.get(settings.monitoringUrlBase + '/host/' + hostName + '/metric/' + metricName);
|
// /monit/api/cluster/<id>/host/<hostname>/metric/<metricname>
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/hosts/' + hostName + '/metric/' + metricName);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorHostGroupMetric = function(groupName, metricName) {
|
this.monitorHostGroupMetric = function(clusterId, groupName, metricName) {
|
||||||
// /monit/api/hostgroup/<hostgroup>/metric/<metricname>
|
// Returns a single metric for a cluster hostgroup
|
||||||
return $http.get(settings.monitoringUrlBase + '/hostgroup/' + groupName + '/metric/' + metricName);
|
// /monit/api/cluster/<id>/hostgroup/<hostgroup>/metric/<metricname>
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/hostgroups/' + groupName + '/metric/' + metricName);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorRsHostMetric = function(hostName, metricName) {
|
this.monitorClusterMetric = function(clusterId, metricName) {
|
||||||
// /monit/api/rshost/<hostname>/metric/<metricname>
|
// Returns a single metric for a cluster hostgroup
|
||||||
var url = settings.monitoringUrlBase + '/alarms';
|
// /monit/api/cluster/<id>/metric/<metricname>
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/metrics/' + metricName);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorRsHostGroupMetric = function(groupName, metricName) {
|
this.monitorAlarms = function(clusterId) {
|
||||||
// /monit/api/rshostgroup/<hostgroup>/metric/<metricname>
|
// Returns all alarm data for a cluster host
|
||||||
return $http.get(settings.monitoringUrlBase + '/rshostgroup/' + groupName + '/metric/' + metricName);
|
// /monit/api/cluster/<id>/alarms
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/alarms');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorAlarms = function() {
|
this.monitorEvents = function(id) {
|
||||||
// /monit/api/alarms
|
// Reurns all event data for a cluster host
|
||||||
return $http.get(settings.monitoringUrlBase + '/alarms');
|
// /monit/api/cluster/<id>/events
|
||||||
/*
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + id + '/events');
|
||||||
var url = settings.monitoringUrlBase + '/alarms' ;
|
|
||||||
$http.get(url).success(function (data, status, headers, config) {
|
|
||||||
console.log(data);
|
|
||||||
return data;
|
|
||||||
}).error(function (data, status, headers, config) {
|
|
||||||
//this always gets called
|
|
||||||
console.log(status);
|
|
||||||
//deferred.reject(status);
|
|
||||||
return 'undefined';
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorServices = function() {
|
this.monitorTopology = function(clusterId) {
|
||||||
// /monit/api/services
|
// Returns a nested json of networks and servers
|
||||||
return $http.get(settings.monitoringUrlBase + '/services');
|
// /monit/api/cluster/<id>/topology
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/topology');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorTopology = function() {
|
this.monitorServiceTopology = function(clusterId) {
|
||||||
// /monit/api/topologies/1
|
// Returns a nested json of servers, roles and metrics
|
||||||
return $http.get(settings.monitoringUrlBase + '/topologies/1');
|
// /monit/api/cluster/<id>/servicetopology
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/servicetopology');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorEvents = function() {
|
this.monitorOverview = function(clusterId) {
|
||||||
// /monit/api/events
|
// Returns a nested json for constructing the overview page
|
||||||
return $http.get(settings.monitoringUrlBase + '/events');
|
// /monit/api/cluster/<id>/overview
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/overview');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorEvents = function(eventID) {
|
this.monitorUsers = function(clusterId) {
|
||||||
// /monit/api/event/<eventId>
|
// Returns a flat json list of all cluster users
|
||||||
return $http.get(settings.monitoringUrlBase + '/event' + eventID);
|
// /monit/api/cluster/<id>/users
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/users');
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorOverview = function() {
|
this.monitorUser = function(clusterId, userName) {
|
||||||
// /monit/api/overview
|
// Returns json information on a particliar user
|
||||||
return $http.get(settings.monitoringUrlBase + '/overview');
|
// /monit/api/cluster/<id>/user/<username>
|
||||||
|
return $http.get(settings.monitoringUrlBase + '/clusters/' + clusterId + '/user' + userName);
|
||||||
};
|
};
|
||||||
|
|
||||||
this.monitorUsers = function() {
|
|
||||||
// /monit/api/users
|
|
||||||
return $http.get(settings.monitoringUrlBase + '/users');
|
|
||||||
};
|
|
||||||
|
|
||||||
this.monitorEvents = function(userName) {
|
|
||||||
// /monit/api/user/<username>
|
|
||||||
return $http.get(settings.monitoringUrlBase + '/user' + userName);
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|||||||
@ -123,142 +123,155 @@ angular.module('compass.charts', [])
|
|||||||
return {
|
return {
|
||||||
restrict: 'EAC',
|
restrict: 'EAC',
|
||||||
scope: {
|
scope: {
|
||||||
data: '='
|
data: '=',
|
||||||
|
dataready: '=',
|
||||||
|
id: '@'
|
||||||
},
|
},
|
||||||
link: function(scope, elem, attrs) {
|
link: function(scope, elem, attrs) {
|
||||||
//console.log(scope, elem, attrs)
|
scope.$watch('dataready', function(newVal, oldVal) {
|
||||||
var data = scope.data;
|
if (newVal != oldVal) {
|
||||||
|
if (newVal == "true") {
|
||||||
var w = 600,
|
drawCircleGraph();
|
||||||
h = 600,
|
|
||||||
r = 550,
|
|
||||||
x = d3.scale.linear().range([0, r]),
|
|
||||||
y = d3.scale.linear().range([0, r]),
|
|
||||||
node,
|
|
||||||
root;
|
|
||||||
|
|
||||||
var pack = d3.layout.pack()
|
|
||||||
.size([r, r])
|
|
||||||
.value(function(d) {
|
|
||||||
if (d.children === undefined || d.children.length == 0) {
|
|
||||||
return 500;
|
|
||||||
} else {
|
|
||||||
return undefined;
|
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
var vis = d3.select("circlepacking").append("svg:svg", "h2")
|
function drawCircleGraph() {
|
||||||
.attr("width", w)
|
|
||||||
.attr("height", h)
|
|
||||||
.append("svg:g")
|
|
||||||
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
|
|
||||||
|
|
||||||
node = root = data;
|
var elemId = scope.id;
|
||||||
|
var data = scope.data;
|
||||||
|
|
||||||
var nodes = pack.nodes(root);
|
var w = 600,
|
||||||
|
h = 600,
|
||||||
|
r = 550,
|
||||||
|
x = d3.scale.linear().range([0, r]),
|
||||||
|
y = d3.scale.linear().range([0, r]),
|
||||||
|
node,
|
||||||
|
root;
|
||||||
|
|
||||||
vis.selectAll("circle")
|
var pack = d3.layout.pack()
|
||||||
.data(nodes)
|
.size([r, r])
|
||||||
.enter().append("svg:circle")
|
.value(function(d) {
|
||||||
.attr("class", function(d) {
|
if (d.children === undefined || d.children.length == 0) {
|
||||||
return d.children ? "parent" : "child";
|
return 500;
|
||||||
})
|
|
||||||
.attr("cx", function(d) {
|
|
||||||
return d.x;
|
|
||||||
})
|
|
||||||
.attr("cy", function(d) {
|
|
||||||
return d.y;
|
|
||||||
})
|
|
||||||
.attr("r", function(d) {
|
|
||||||
return d.r;
|
|
||||||
})
|
|
||||||
.attr("depth", function(d) {
|
|
||||||
return d.depth;
|
|
||||||
})
|
|
||||||
.on("click", function(d) {
|
|
||||||
return zoom(node == d ? root : d);
|
|
||||||
})
|
|
||||||
.on("contextmenu", function(d) {
|
|
||||||
//stop showing browser menu
|
|
||||||
d3.event.preventDefault();
|
|
||||||
})
|
|
||||||
.on("mouseover", function(d) {
|
|
||||||
//console.log("mouseover ", d)
|
|
||||||
});
|
|
||||||
|
|
||||||
vis.selectAll("text")
|
|
||||||
.data(nodes)
|
|
||||||
.enter().append("svg:text")
|
|
||||||
.attr("class", function(d) {
|
|
||||||
return d.children ? "parent" : "child";
|
|
||||||
})
|
|
||||||
.attr("x", function(d) {
|
|
||||||
return d.x;
|
|
||||||
})
|
|
||||||
.attr("y", function(d) {
|
|
||||||
if(d.depth == 0 || d.depth == 1) {
|
|
||||||
return y(d.y + d.r + 20);
|
|
||||||
} else if(d.depth == 2 || d.depth == 3) {
|
|
||||||
return y(d.y + d.r + 5);
|
|
||||||
} else {
|
} else {
|
||||||
return y(d.y);
|
return undefined;
|
||||||
}
|
}
|
||||||
//return d.children ? d.y + d.r + 10 : d.y;
|
})
|
||||||
})
|
|
||||||
.attr("dy", ".35em")
|
|
||||||
.attr("text-anchor", "middle")
|
|
||||||
.style("opacity", function(d) {
|
|
||||||
return d.r > 20 ? 1 : 0;
|
|
||||||
})
|
|
||||||
.text(function(d) {
|
|
||||||
return d.name;
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select(window).on("click", function() {
|
var vis = d3.select("#" + elemId).append("svg:svg", "h2")
|
||||||
zoom(root);
|
.attr("width", w)
|
||||||
});
|
.attr("height", h)
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");
|
||||||
|
|
||||||
|
node = root = data;
|
||||||
|
|
||||||
function zoom(d, i) {
|
var nodes = pack.nodes(root);
|
||||||
var k = r / d.r / 2;
|
|
||||||
x.domain([d.x - d.r, d.x + d.r]);
|
|
||||||
y.domain([d.y - d.r, d.y + d.r]);
|
|
||||||
|
|
||||||
var t = vis.transition()
|
vis.selectAll("circle")
|
||||||
.duration(d3.event.altKey ? 7500 : 750);
|
.data(nodes)
|
||||||
|
.enter().append("svg:circle")
|
||||||
t.selectAll("circle")
|
.attr("class", function(d) {
|
||||||
|
return d.children ? "parent" : "child";
|
||||||
|
})
|
||||||
.attr("cx", function(d) {
|
.attr("cx", function(d) {
|
||||||
return x(d.x);
|
return d.x;
|
||||||
})
|
})
|
||||||
.attr("cy", function(d) {
|
.attr("cy", function(d) {
|
||||||
return y(d.y);
|
return d.y;
|
||||||
})
|
})
|
||||||
.attr("r", function(d) {
|
.attr("r", function(d) {
|
||||||
return k * d.r;
|
return d.r;
|
||||||
|
})
|
||||||
|
.attr("depth", function(d) {
|
||||||
|
return d.depth;
|
||||||
|
})
|
||||||
|
.on("click", function(d) {
|
||||||
|
return zoom(node == d ? root : d);
|
||||||
|
})
|
||||||
|
.on("contextmenu", function(d) {
|
||||||
|
//stop showing browser menu
|
||||||
|
d3.event.preventDefault();
|
||||||
|
})
|
||||||
|
.on("mouseover", function(d) {
|
||||||
|
//console.log("mouseover ", d)
|
||||||
});
|
});
|
||||||
|
|
||||||
t.selectAll("text")
|
vis.selectAll("text")
|
||||||
|
.data(nodes)
|
||||||
|
.enter().append("svg:text")
|
||||||
|
.attr("class", function(d) {
|
||||||
|
return d.children ? "parent" : "child";
|
||||||
|
})
|
||||||
.attr("x", function(d) {
|
.attr("x", function(d) {
|
||||||
return x(d.x);
|
return d.x;
|
||||||
})
|
})
|
||||||
.attr("y", function(d) {
|
.attr("y", function(d) {
|
||||||
if(d.depth == 0 || d.depth == 1) {
|
if (d.depth == 0 || d.depth == 1) {
|
||||||
return y(d.y + d.r + 20);
|
return y(d.y + d.r + 20);
|
||||||
} else if(d.depth == 2 || d.depth == 3) {
|
} else if (d.depth == 2 || d.depth == 3) {
|
||||||
return y(d.y + d.r + 5);
|
return y(d.y + d.r + 5);
|
||||||
} else {
|
} else {
|
||||||
return y(d.y);
|
return y(d.y);
|
||||||
}
|
}
|
||||||
|
//return d.children ? d.y + d.r + 10 : d.y;
|
||||||
//return d.children ? y(d.y + d.r + 10) : y(d.y);
|
|
||||||
})
|
})
|
||||||
.style("opacity", function(d) {
|
.attr("dy", ".35em")
|
||||||
return k * d.r > 20 ? 1 : 0;
|
.attr("text-anchor", "middle")
|
||||||
|
.style("display", function(d) {
|
||||||
|
return d.r > 30 ? "block" : "none";
|
||||||
|
})
|
||||||
|
.text(function(d) {
|
||||||
|
return d.name;
|
||||||
});
|
});
|
||||||
|
|
||||||
node = d;
|
d3.select(window).on("click", function() {
|
||||||
d3.event.stopPropagation();
|
zoom(root);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function zoom(d, i) {
|
||||||
|
var k = r / d.r / 2;
|
||||||
|
x.domain([d.x - d.r, d.x + d.r]);
|
||||||
|
y.domain([d.y - d.r, d.y + d.r]);
|
||||||
|
|
||||||
|
var t = vis.transition()
|
||||||
|
.duration(d3.event.altKey ? 7500 : 750);
|
||||||
|
|
||||||
|
t.selectAll("circle")
|
||||||
|
.attr("cx", function(d) {
|
||||||
|
return x(d.x);
|
||||||
|
})
|
||||||
|
.attr("cy", function(d) {
|
||||||
|
return y(d.y);
|
||||||
|
})
|
||||||
|
.attr("r", function(d) {
|
||||||
|
return k * d.r;
|
||||||
|
});
|
||||||
|
|
||||||
|
t.selectAll("text")
|
||||||
|
.attr("x", function(d) {
|
||||||
|
return x(d.x);
|
||||||
|
})
|
||||||
|
.attr("y", function(d) {
|
||||||
|
if (d.depth == 0 || d.depth == 1) {
|
||||||
|
return y(d.y + d.r + 20);
|
||||||
|
} else if (d.depth == 2 || d.depth == 3) {
|
||||||
|
return y(d.y + d.r + 5);
|
||||||
|
} else {
|
||||||
|
return y(d.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
//return d.children ? y(d.y + d.r + 10) : y(d.y);
|
||||||
|
})
|
||||||
|
.style("display", function(d) {
|
||||||
|
return k * d.r > 30 ? "block" : "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
node = d;
|
||||||
|
d3.event.stopPropagation();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -270,224 +283,237 @@ angular.module('compass.charts', [])
|
|||||||
restrict: 'EAC',
|
restrict: 'EAC',
|
||||||
scope: {
|
scope: {
|
||||||
data: '=',
|
data: '=',
|
||||||
count: '=',
|
dataready: '=',
|
||||||
id: '@'
|
id: '@'
|
||||||
},
|
},
|
||||||
link: function(scope, elem, attrs) {
|
link: function(scope, elem, attrs) {
|
||||||
var id = scope.id;
|
scope.$watch('dataready', function(newVal, oldVal) {
|
||||||
|
if (newVal != oldVal) {
|
||||||
var margin = {
|
if (newVal == "true") {
|
||||||
top: 0,
|
drawTree();
|
||||||
right: 120,
|
}
|
||||||
bottom: 0,
|
|
||||||
left: 130
|
|
||||||
};
|
|
||||||
|
|
||||||
var serverCount = scope.count;
|
|
||||||
|
|
||||||
var serversHeight = serverCount * 68;
|
|
||||||
if (serversHeight < 500) {
|
|
||||||
serversHeight = 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
var width = 1000 - margin.right - margin.left,
|
|
||||||
height = serversHeight - margin.top - margin.bottom;
|
|
||||||
|
|
||||||
imgWidth = 163;
|
|
||||||
imgHeight = 32;
|
|
||||||
|
|
||||||
var i = 0,
|
|
||||||
duration = 750,
|
|
||||||
root;
|
|
||||||
|
|
||||||
var tree = d3.layout.tree()
|
|
||||||
.size([height, width]);
|
|
||||||
|
|
||||||
var diagonal = d3.svg.diagonal()
|
|
||||||
.projection(function(d) {
|
|
||||||
return [d.y, d.x];
|
|
||||||
});
|
|
||||||
|
|
||||||
var svg = d3.select("#" + id).append("svg")
|
|
||||||
.attr("width", width + margin.right + margin.left)
|
|
||||||
.attr("height", height + margin.top + margin.bottom)
|
|
||||||
.append("g")
|
|
||||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
||||||
|
|
||||||
root = scope.data;
|
|
||||||
root.x0 = height / 2;
|
|
||||||
root.y0 = 0;
|
|
||||||
|
|
||||||
update(root);
|
|
||||||
|
|
||||||
d3.select(self.frameElement).style("height", "600px");
|
|
||||||
|
|
||||||
function update(source) {
|
|
||||||
|
|
||||||
// Compute the new tree layout.
|
|
||||||
var nodes = tree.nodes(root).reverse(),
|
|
||||||
links = tree.links(nodes);
|
|
||||||
|
|
||||||
// Normalize for fixed-depth.
|
|
||||||
nodes.forEach(function(d) {
|
|
||||||
d.y = d.depth * 300;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update the nodes…
|
|
||||||
var node = svg.selectAll("g.node")
|
|
||||||
.data(nodes, function(d) {
|
|
||||||
return d.id || (d.id = ++i);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Enter any new nodes at the parent's previous position.
|
|
||||||
var nodeEnter = node.enter().append("g")
|
|
||||||
.attr("class", "node")
|
|
||||||
.attr("transform", function(d) {
|
|
||||||
var transX = parseFloat(source.y0) - 10;
|
|
||||||
var transY = parseFloat(source.x0) - imgHeight / 2;
|
|
||||||
return "translate(" + transX + "," + transY + ")";
|
|
||||||
})
|
|
||||||
.attr("width", imgWidth)
|
|
||||||
.attr("height", imgHeight)
|
|
||||||
.on("click", click);
|
|
||||||
|
|
||||||
nodeEnter.append("image")
|
|
||||||
.attr("xlink:href", function(d) {
|
|
||||||
if (d.depth == 0)
|
|
||||||
return "assets/img/router.png";
|
|
||||||
else if (d.depth == 1)
|
|
||||||
return "assets/img/switch1.png";
|
|
||||||
else
|
|
||||||
return "assets/img/server1.png";
|
|
||||||
})
|
|
||||||
.attr("width", imgWidth)
|
|
||||||
.attr("height", imgHeight);
|
|
||||||
|
|
||||||
nodeEnter.append("rect")
|
|
||||||
.attr("width", imgWidth)
|
|
||||||
.attr("height", imgHeight)
|
|
||||||
.attr("data-state", function(d) {
|
|
||||||
return d.state
|
|
||||||
})
|
|
||||||
.style("opacity", function(d) {
|
|
||||||
if (d.depth == 0)
|
|
||||||
return 0;
|
|
||||||
else
|
|
||||||
return 0.3;
|
|
||||||
});
|
|
||||||
|
|
||||||
nodeEnter.append("text")
|
|
||||||
.attr("x", function(d) {
|
|
||||||
if (d.depth == 0)
|
|
||||||
return -5;
|
|
||||||
else
|
|
||||||
return d.children || d._children ? -8 : imgWidth + 10;
|
|
||||||
})
|
|
||||||
.attr("y", function(d) {
|
|
||||||
if (d.depth == 0)
|
|
||||||
return imgHeight / 2;
|
|
||||||
else if (d.depth == 1)
|
|
||||||
return 6;
|
|
||||||
else
|
|
||||||
return imgHeight / 2;
|
|
||||||
})
|
|
||||||
.attr("dy", ".25em")
|
|
||||||
.attr("text-anchor", function(d) {
|
|
||||||
return d.children || d._children ? "end" : "start";
|
|
||||||
})
|
|
||||||
.text(function(d) {
|
|
||||||
return d.name;
|
|
||||||
})
|
|
||||||
.style("font-size", "15px")
|
|
||||||
.style("fill-opacity", 1e-6);
|
|
||||||
|
|
||||||
// Transition nodes to their new position.
|
|
||||||
var nodeUpdate = node.transition()
|
|
||||||
.duration(duration)
|
|
||||||
.attr("transform", function(d) {
|
|
||||||
var transX = parseFloat(d.y) - 10;
|
|
||||||
var transY = parseFloat(d.x) - imgHeight / 2;
|
|
||||||
return "translate(" + transX + "," + transY + ")";
|
|
||||||
});
|
|
||||||
|
|
||||||
nodeUpdate.select("text")
|
|
||||||
.style("fill-opacity", 1);
|
|
||||||
|
|
||||||
// Transition exiting nodes to the parent's new position.
|
|
||||||
var nodeExit = node.exit().transition()
|
|
||||||
.duration(duration)
|
|
||||||
.attr("transform", function(d) {
|
|
||||||
var transX = parseFloat(source.y) - 10;
|
|
||||||
var transY = parseFloat(source.x) - imgHeight / 2;
|
|
||||||
return "translate(" + transX + "," + transY + ")";
|
|
||||||
})
|
|
||||||
.remove();
|
|
||||||
|
|
||||||
nodeExit.select("circle")
|
|
||||||
.attr("r", 1e-6);
|
|
||||||
|
|
||||||
nodeExit.select("text")
|
|
||||||
.style("fill-opacity", 1e-6);
|
|
||||||
|
|
||||||
// Update the links…
|
|
||||||
var link = svg.selectAll("path.link")
|
|
||||||
.data(links, function(d) {
|
|
||||||
return d.target.id;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Enter any new links at the parent's previous position.
|
|
||||||
link.enter().insert("path", "g")
|
|
||||||
.attr("class", "link")
|
|
||||||
.attr("d", function(d) {
|
|
||||||
var o = {
|
|
||||||
x: source.x0,
|
|
||||||
y: source.y0
|
|
||||||
};
|
|
||||||
return diagonal({
|
|
||||||
source: o,
|
|
||||||
target: o
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Transition links to their new position.
|
|
||||||
link.transition()
|
|
||||||
.duration(duration)
|
|
||||||
.attr("d", diagonal);
|
|
||||||
|
|
||||||
// Transition exiting nodes to the parent's new position.
|
|
||||||
link.exit().transition()
|
|
||||||
.duration(duration)
|
|
||||||
.attr("d", function(d) {
|
|
||||||
var o = {
|
|
||||||
x: source.x,
|
|
||||||
y: source.y
|
|
||||||
};
|
|
||||||
return diagonal({
|
|
||||||
source: o,
|
|
||||||
target: o
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.remove();
|
|
||||||
|
|
||||||
// Stash the old positions for transition.
|
|
||||||
nodes.forEach(function(d) {
|
|
||||||
d.x0 = d.x;
|
|
||||||
d.y0 = d.y;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle children on click.
|
|
||||||
function click(d) {
|
|
||||||
if (d.children) {
|
|
||||||
d._children = d.children;
|
|
||||||
d.children = null;
|
|
||||||
} else {
|
|
||||||
d.children = d._children;
|
|
||||||
d._children = null;
|
|
||||||
}
|
}
|
||||||
update(d);
|
}, true);
|
||||||
}
|
|
||||||
|
|
||||||
|
function drawTree() {
|
||||||
|
var elemId = scope.id,
|
||||||
|
tree = d3.layout.tree();
|
||||||
|
|
||||||
|
var margin = {
|
||||||
|
top: 0,
|
||||||
|
right: 120,
|
||||||
|
bottom: 0,
|
||||||
|
left: 130
|
||||||
|
};
|
||||||
|
|
||||||
|
// calculate servers count
|
||||||
|
var serverCount = 0;
|
||||||
|
var treeNodes = tree.nodes(scope.data).reverse();
|
||||||
|
treeNodes.forEach(function(d) {
|
||||||
|
if (d.depth == 2)
|
||||||
|
serverCount++;
|
||||||
|
});
|
||||||
|
|
||||||
|
var serversHeight = serverCount * 68;
|
||||||
|
if (serversHeight < 500) {
|
||||||
|
serversHeight = 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
var width = 1000 - margin.right - margin.left,
|
||||||
|
height = serversHeight - margin.top - margin.bottom;
|
||||||
|
tree.size([height, width]);
|
||||||
|
|
||||||
|
imgWidth = 163;
|
||||||
|
imgHeight = 32;
|
||||||
|
|
||||||
|
var i = 0,
|
||||||
|
duration = 750,
|
||||||
|
root = scope.data;
|
||||||
|
|
||||||
|
var diagonal = d3.svg.diagonal()
|
||||||
|
.projection(function(d) {
|
||||||
|
return [d.y, d.x];
|
||||||
|
});
|
||||||
|
|
||||||
|
var svg = d3.select("#" + elemId).append("svg")
|
||||||
|
.attr("width", width + margin.right + margin.left)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
root.x0 = height / 2;
|
||||||
|
root.y0 = 0;
|
||||||
|
|
||||||
|
update(root);
|
||||||
|
|
||||||
|
d3.select(self.frameElement).style("height", "600px");
|
||||||
|
|
||||||
|
function update(source) {
|
||||||
|
|
||||||
|
// Compute the new tree layout.
|
||||||
|
var nodes = tree.nodes(root).reverse(),
|
||||||
|
links = tree.links(nodes);
|
||||||
|
|
||||||
|
// Normalize for fixed-depth.
|
||||||
|
nodes.forEach(function(d) {
|
||||||
|
d.y = d.depth * 300;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update the nodes…
|
||||||
|
var node = svg.selectAll("g.node")
|
||||||
|
.data(nodes, function(d) {
|
||||||
|
return d.id || (d.id = ++i);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Enter any new nodes at the parent's previous position.
|
||||||
|
var nodeEnter = node.enter().append("g")
|
||||||
|
.attr("class", "node")
|
||||||
|
.attr("transform", function(d) {
|
||||||
|
var transX = parseFloat(source.y0) - 10;
|
||||||
|
var transY = parseFloat(source.x0) - imgHeight / 2;
|
||||||
|
return "translate(" + transX + "," + transY + ")";
|
||||||
|
})
|
||||||
|
.attr("width", imgWidth)
|
||||||
|
.attr("height", imgHeight)
|
||||||
|
.on("click", click);
|
||||||
|
|
||||||
|
nodeEnter.append("image")
|
||||||
|
.attr("xlink:href", function(d) {
|
||||||
|
if (d.depth == 0)
|
||||||
|
return "assets/img/router.png";
|
||||||
|
else if (d.depth == 1)
|
||||||
|
return "assets/img/switch1.png";
|
||||||
|
else
|
||||||
|
return "assets/img/server1.png";
|
||||||
|
})
|
||||||
|
.attr("width", imgWidth)
|
||||||
|
.attr("height", imgHeight);
|
||||||
|
|
||||||
|
nodeEnter.append("rect")
|
||||||
|
.attr("width", imgWidth)
|
||||||
|
.attr("height", imgHeight)
|
||||||
|
.attr("data-state", function(d) {
|
||||||
|
return d.state
|
||||||
|
})
|
||||||
|
.style("opacity", function(d) {
|
||||||
|
if (d.depth == 0)
|
||||||
|
return 0;
|
||||||
|
else
|
||||||
|
return 0.3;
|
||||||
|
});
|
||||||
|
|
||||||
|
nodeEnter.append("text")
|
||||||
|
.attr("x", function(d) {
|
||||||
|
if (d.depth == 0)
|
||||||
|
return -5;
|
||||||
|
else
|
||||||
|
return d.children || d._children ? -8 : imgWidth + 10;
|
||||||
|
})
|
||||||
|
.attr("y", function(d) {
|
||||||
|
if (d.depth == 0)
|
||||||
|
return imgHeight / 2;
|
||||||
|
else if (d.depth == 1)
|
||||||
|
return 6;
|
||||||
|
else
|
||||||
|
return imgHeight / 2;
|
||||||
|
})
|
||||||
|
.attr("dy", ".25em")
|
||||||
|
.attr("text-anchor", function(d) {
|
||||||
|
return d.children || d._children ? "end" : "start";
|
||||||
|
})
|
||||||
|
.text(function(d) {
|
||||||
|
return d.name;
|
||||||
|
})
|
||||||
|
.style("font-size", "15px")
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// Transition nodes to their new position.
|
||||||
|
var nodeUpdate = node.transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) {
|
||||||
|
var transX = parseFloat(d.y) - 10;
|
||||||
|
var transY = parseFloat(d.x) - imgHeight / 2;
|
||||||
|
return "translate(" + transX + "," + transY + ")";
|
||||||
|
});
|
||||||
|
|
||||||
|
nodeUpdate.select("text")
|
||||||
|
.style("fill-opacity", 1);
|
||||||
|
|
||||||
|
// Transition exiting nodes to the parent's new position.
|
||||||
|
var nodeExit = node.exit().transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) {
|
||||||
|
var transX = parseFloat(source.y) - 10;
|
||||||
|
var transY = parseFloat(source.x) - imgHeight / 2;
|
||||||
|
return "translate(" + transX + "," + transY + ")";
|
||||||
|
})
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
nodeExit.select("circle")
|
||||||
|
.attr("r", 1e-6);
|
||||||
|
|
||||||
|
nodeExit.select("text")
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// Update the links…
|
||||||
|
var link = svg.selectAll("path.link")
|
||||||
|
.data(links, function(d) {
|
||||||
|
return d.target.id;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Enter any new links at the parent's previous position.
|
||||||
|
link.enter().insert("path", "g")
|
||||||
|
.attr("class", "link")
|
||||||
|
.attr("d", function(d) {
|
||||||
|
var o = {
|
||||||
|
x: source.x0,
|
||||||
|
y: source.y0
|
||||||
|
};
|
||||||
|
return diagonal({
|
||||||
|
source: o,
|
||||||
|
target: o
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Transition links to their new position.
|
||||||
|
link.transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("d", diagonal);
|
||||||
|
|
||||||
|
// Transition exiting nodes to the parent's new position.
|
||||||
|
link.exit().transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("d", function(d) {
|
||||||
|
var o = {
|
||||||
|
x: source.x,
|
||||||
|
y: source.y
|
||||||
|
};
|
||||||
|
return diagonal({
|
||||||
|
source: o,
|
||||||
|
target: o
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
// Stash the old positions for transition.
|
||||||
|
nodes.forEach(function(d) {
|
||||||
|
d.x0 = d.x;
|
||||||
|
d.y0 = d.y;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle children on click.
|
||||||
|
function click(d) {
|
||||||
|
if (d.children) {
|
||||||
|
d._children = d.children;
|
||||||
|
d.children = null;
|
||||||
|
} else {
|
||||||
|
d.children = d._children;
|
||||||
|
d._children = null;
|
||||||
|
}
|
||||||
|
update(d);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -497,7 +523,7 @@ app.directive('ganttchart', function() {
|
|||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
scope: {
|
scope: {
|
||||||
data: '=',
|
data: '=',
|
||||||
hosts: '='
|
dataready: '='
|
||||||
},
|
},
|
||||||
template: '<div class="pull-right"><button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'1hr\')">1 HR</button>'
|
template: '<div class="pull-right"><button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'1hr\')">1 HR</button>'
|
||||||
+ '<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'3hr\')">3 HR</button>'
|
+ '<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'3hr\')">3 HR</button>'
|
||||||
@ -506,78 +532,99 @@ app.directive('ganttchart', function() {
|
|||||||
+ '<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'1week\')">1 WEEK</button>'
|
+ '<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain(\'1week\')">1 WEEK</button>'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ '<div class="clear-fix"></div>',
|
+ '<div class="clear-fix"></div>',
|
||||||
|
// BUG: svg not appended initially if using templateUrl
|
||||||
|
//templateUrl: "src/common/ganttchart.tpl.html",
|
||||||
link: function(scope, element, attrs) {
|
link: function(scope, element, attrs) {
|
||||||
var tasks = scope.data;
|
scope.$watch('dataready', function(newVal, oldVal) {
|
||||||
var hostnames = scope.hosts;
|
if (newVal != oldVal) {
|
||||||
var taskStatus = {
|
if (newVal == "true") {
|
||||||
"SUCCESSFUL": "bar-successful",
|
drawChart();
|
||||||
"CRITICAL": "bar-failed",
|
}
|
||||||
"WARNING": "bar-warning",
|
|
||||||
"UNKNOWN": "bar-unknown"
|
|
||||||
};
|
|
||||||
|
|
||||||
tasks.sort(function(a, b) {
|
|
||||||
return a.endDate - b.endDate;
|
|
||||||
});
|
|
||||||
var maxDate = tasks[tasks.length - 1].endDate;
|
|
||||||
tasks.sort(function(a, b) {
|
|
||||||
return a.startDate - b.startDate;
|
|
||||||
});
|
|
||||||
var minDate = tasks[0].startDate;
|
|
||||||
|
|
||||||
var format = "%H:%M";
|
|
||||||
var timeDomainString = "1day";
|
|
||||||
|
|
||||||
var gantt = d3.gantt().taskTypes(hostnames).taskStatus(taskStatus).tickFormat(format).height(450).width(800);
|
|
||||||
|
|
||||||
scope.changeTimeDomain = function(timeDomainString) {
|
|
||||||
this.timeDomainString = timeDomainString;
|
|
||||||
switch (timeDomainString) {
|
|
||||||
case "1hr":
|
|
||||||
format = "%H:%M:%S";
|
|
||||||
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -1), getEndDate()]);
|
|
||||||
break;
|
|
||||||
case "3hr":
|
|
||||||
format = "%H:%M";
|
|
||||||
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -3), getEndDate()]);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "6hr":
|
|
||||||
format = "%H:%M";
|
|
||||||
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -6), getEndDate()]);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "1day":
|
|
||||||
format = "%H:%M";
|
|
||||||
gantt.timeDomain([d3.time.day.offset(getEndDate(), -1), getEndDate()]);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "1week":
|
|
||||||
format = "%a %H:%M";
|
|
||||||
gantt.timeDomain([d3.time.day.offset(getEndDate(), -7), getEndDate()]);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
format = "%H:%M"
|
|
||||||
|
|
||||||
}
|
}
|
||||||
gantt.tickFormat(format);
|
}, true);
|
||||||
gantt.redraw(tasks);
|
|
||||||
}
|
|
||||||
|
|
||||||
gantt.timeDomainMode("fixed");
|
function drawChart () {
|
||||||
scope.changeTimeDomain(timeDomainString);
|
var tasks = scope.data;
|
||||||
|
var hostnames = [];
|
||||||
|
|
||||||
gantt(tasks);
|
angular.forEach(tasks, function(task) {
|
||||||
|
if(hostnames.indexOf(task) == -1) {
|
||||||
|
hostnames.push(task.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//var hostnames = scope.hosts;
|
||||||
|
var taskStatus = {
|
||||||
|
"SUCCESSFUL": "bar-successful",
|
||||||
|
"CRITICAL": "bar-failed",
|
||||||
|
"WARNING": "bar-warning",
|
||||||
|
"UNKNOWN": "bar-unknown"
|
||||||
|
};
|
||||||
|
|
||||||
|
tasks.sort(function(a, b) {
|
||||||
|
return a.endDate - b.endDate;
|
||||||
|
});
|
||||||
|
var maxDate = tasks[tasks.length - 1].endDate;
|
||||||
|
tasks.sort(function(a, b) {
|
||||||
|
return a.startDate - b.startDate;
|
||||||
|
});
|
||||||
|
var minDate = tasks[0].startDate;
|
||||||
|
|
||||||
function getEndDate() {
|
var format = "%H:%M";
|
||||||
var lastEndDate = Date.now();
|
var timeDomainString = "1day";
|
||||||
if (tasks.length > 0) {
|
|
||||||
lastEndDate = tasks[tasks.length - 1].endDate;
|
var gantt = d3.gantt().taskTypes(hostnames).taskStatus(taskStatus).tickFormat(format).height(450).width(800);
|
||||||
|
|
||||||
|
scope.changeTimeDomain = function(timeDomainString) {
|
||||||
|
this.timeDomainString = timeDomainString;
|
||||||
|
switch (timeDomainString) {
|
||||||
|
case "1hr":
|
||||||
|
format = "%H:%M:%S";
|
||||||
|
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -1), getEndDate()]);
|
||||||
|
break;
|
||||||
|
case "3hr":
|
||||||
|
format = "%H:%M";
|
||||||
|
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -3), getEndDate()]);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "6hr":
|
||||||
|
format = "%H:%M";
|
||||||
|
gantt.timeDomain([d3.time.hour.offset(getEndDate(), -6), getEndDate()]);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "1day":
|
||||||
|
format = "%H:%M";
|
||||||
|
gantt.timeDomain([d3.time.day.offset(getEndDate(), -1), getEndDate()]);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "1week":
|
||||||
|
format = "%a %H:%M";
|
||||||
|
gantt.timeDomain([d3.time.day.offset(getEndDate(), -7), getEndDate()]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
format = "%H:%M"
|
||||||
|
|
||||||
|
}
|
||||||
|
gantt.tickFormat(format);
|
||||||
|
gantt.redraw(tasks);
|
||||||
|
}
|
||||||
|
|
||||||
|
gantt.timeDomainMode("fixed");
|
||||||
|
scope.changeTimeDomain(timeDomainString);
|
||||||
|
|
||||||
|
gantt(tasks);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getEndDate() {
|
||||||
|
var lastEndDate = Date.now();
|
||||||
|
if (tasks.length > 0) {
|
||||||
|
lastEndDate = tasks[tasks.length - 1].endDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
return lastEndDate;
|
||||||
}
|
}
|
||||||
|
|
||||||
return lastEndDate;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
8
v2/src/common/ganttchart.tpl.html
Normal file
8
v2/src/common/ganttchart.tpl.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<div class="pull-right">
|
||||||
|
<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain('1hr')">1 HR</button>
|
||||||
|
<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain('3hr')">3 HR</button>
|
||||||
|
<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain('6hr')">6 HR</button>
|
||||||
|
<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain('1day')">1 DAY</button>
|
||||||
|
<button type="button" class="btn btn-xs side-margin-3" ng-click="changeTimeDomain('1week')">1 WEEK</button>
|
||||||
|
</div>
|
||||||
|
<div class="clear-fix"></div>
|
||||||
6
v2/vendor/d3/d3.min.js
vendored
Normal file → Executable file
6
v2/vendor/d3/d3.min.js
vendored
Normal file → Executable file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user