x/compass-web
Code Issues Proposed changes

Fix minor chart and cluster css

Browse Source 
Change-Id: I09290ba4bfac811809d4e3c0537ede6be53e595e
This commit is contained in:
jiahuay 2014-09-07 15:54:19 -07:00
parent 0246c15dd3
commit 84ef7619da
5 changed files with 187 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
v2/assets/css/chart.css
View File

@ -92,21 +92,21 @@ ganttchart .axis path, ganttchart .axis line {
} }
ganttchart .bar { ganttchart .bar {
fill: #33b5e5;
} }
ganttchart .bar-failed { ganttchart .bar-failed {
fill: #CC0000; fill: #CC0000; /*red*/
} }
ganttchart .bar-running { ganttchart .bar-warning {
fill: #669900; fill: #ffbb33; /*yellow*/
} }
ganttchart .bar-succeeded { ganttchart .bar-successful {
fill: #33b5e5; fill: #669900; /*green*/
} }
ganttchart .bar-killed { ganttchart .bar-unknown {
fill: #ffbb33; fill: #33b5e5; /*blue*/
/*fill: #B8B8B8; grey*/
} }

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

@ -162,7 +162,7 @@
</hostprogressbar> </hostprogressbar>
</td> </td>
<td class="align-right"> <td class="align-right">
<button class="btn btn-trash-hover cluster-overview-delete border-radius-4 btn-xs" ng-click="openDeleteHostModal($index)" ng-disabled="clusterProgress.state == 'INSTALLING'"> <button class="btn border-radius-4 btn-xs" ng-click="openDeleteHostModal($index)" ng-disabled="clusterProgress.state == 'INSTALLING'">
<i class="ace-icon fa fa-trash-o bigger-120"></i> <i class="ace-icon fa fa-trash-o bigger-120"></i>
</button> </button>
</td> </td>
@ -175,7 +175,7 @@
</div> </div>
<div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;" > <div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;" >
Are you sure to delete Are you sure to delete
<strong>{{host.name}}</strong>? <strong>{{host.hostname}}</strong>?
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Cancel</button> <button class="btn btn-default" ng-click="cancel()">Cancel</button>

238
v2/src/app/monitoring/monitoring.js
View File

@ -75,131 +75,131 @@ angular.module('compass.monitoring', [
$scope.alerts = [{ $scope.alerts = [{
"startDate": new Date("Sun Dec 09 01:36:45 EST 2012"), "startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
"endDate": new Date("Sun Dec 09 02:36:45 EST 2012"), "endDate": new Date("Sun Dec 09 02:36:45 EST 2012"),
"name": "host-01", "name": "os-controller",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 04:56:32 EST 2012"), "startDate": new Date("Sun Dec 09 04:56:32 EST 2012"),
"endDate": new Date("Sun Dec 09 06:35:47 EST 2012"), "endDate": new Date("Sun Dec 09 06:35:47 EST 2012"),
"name": "host-05", "name": "os-db-node",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 06:29:53 EST 2012"), "startDate": new Date("Sun Dec 09 06:29:53 EST 2012"),
"endDate": new Date("Sun Dec 09 06:34:04 EST 2012"), "endDate": new Date("Sun Dec 09 06:34:04 EST 2012"),
"name": "host-02", "name": "os-db-node",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 05:35:21 EST 2012"), "startDate": new Date("Sun Dec 09 05:35:21 EST 2012"),
"endDate": new Date("Sun Dec 09 06:21:22 EST 2012"), "endDate": new Date("Sun Dec 09 06:21:22 EST 2012"),
"name": "host-01", "name": "os-controller",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 05:00:06 EST 2012"), "startDate": new Date("Sun Dec 09 05:00:06 EST 2012"),
"endDate": new Date("Sun Dec 09 05:05:07 EST 2012"), "endDate": new Date("Sun Dec 09 05:05:07 EST 2012"),
"name": "host-03", "name": "os-keystone",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 03:46:59 EST 2012"), "startDate": new Date("Sun Dec 09 03:46:59 EST 2012"),
"endDate": new Date("Sun Dec 09 04:54:19 EST 2012"), "endDate": new Date("Sun Dec 09 04:54:19 EST 2012"),
"name": "host-01", "name": "os-image",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 04:02:45 EST 2012"), "startDate": new Date("Sun Dec 09 04:02:45 EST 2012"),
"endDate": new Date("Sun Dec 09 04:48:56 EST 2012"), "endDate": new Date("Sun Dec 09 04:48:56 EST 2012"),
"name": "host-02", "name": "os-image",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 03:27:35 EST 2012"), "startDate": new Date("Sun Dec 09 03:27:35 EST 2012"),
"endDate": new Date("Sun Dec 09 03:58:43 EST 2012"), "endDate": new Date("Sun Dec 09 03:58:43 EST 2012"),
"name": "host-03", "name": "os-controller",
"status": "SUCCEEDED" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 01:40:11 EST 2012"), "startDate": new Date("Sun Dec 09 01:40:11 EST 2012"),
"endDate": new Date("Sun Dec 09 03:26:35 EST 2012"), "endDate": new Date("Sun Dec 09 03:26:35 EST 2012"),
"name": "host-04", "name": "os-db-node",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 03:00:03 EST 2012"), "startDate": new Date("Sun Dec 09 03:00:03 EST 2012"),
"endDate": new Date("Sun Dec 09 03:09:51 EST 2012"), "endDate": new Date("Sun Dec 09 03:09:51 EST 2012"),
"name": "host-05", "name": "os-keystone",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 01:21:00 EST 2012"), "startDate": new Date("Sun Dec 09 01:21:00 EST 2012"),
"endDate": new Date("Sun Dec 09 02:51:42 EST 2012"), "endDate": new Date("Sun Dec 09 02:51:42 EST 2012"),
"name": "host-01", "name": "os-mq",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 01:08:42 EST 2012"), "startDate": new Date("Sun Dec 09 01:08:42 EST 2012"),
"endDate": new Date("Sun Dec 09 01:33:42 EST 2012"), "endDate": new Date("Sun Dec 09 01:33:42 EST 2012"),
"name": "host-04", "name": "os-keystone",
"status": "CRITICAL" "status": "CRITICAL"
}, { }, {
"startDate": new Date("Sun Dec 09 00:27:15 EST 2012"), "startDate": new Date("Sun Dec 09 00:27:15 EST 2012"),
"endDate": new Date("Sun Dec 09 00:54:56 EST 2012"), "endDate": new Date("Sun Dec 09 00:54:56 EST 2012"),
"name": "host-04", "name": "os-controller",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 00:29:48 EST 2012"), "startDate": new Date("Sun Dec 09 00:29:48 EST 2012"),
"endDate": new Date("Sun Dec 09 00:44:50 EST 2012"), "endDate": new Date("Sun Dec 09 00:44:50 EST 2012"),
"name": "host-01", "name": "os-image",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 07:39:21 EST 2012"), "startDate": new Date("Sun Dec 09 07:39:21 EST 2012"),
"endDate": new Date("Sun Dec 09 07:43:22 EST 2012"), "endDate": new Date("Sun Dec 09 07:43:22 EST 2012"),
"name": "host-03", "name": "os-image",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 07:00:06 EST 2012"), "startDate": new Date("Sun Dec 09 07:00:06 EST 2012"),
"endDate": new Date("Sun Dec 09 07:05:07 EST 2012"), "endDate": new Date("Sun Dec 09 07:05:07 EST 2012"),
"name": "host-02", "name": "os-compute2",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 08:46:59 EST 2012"), "startDate": new Date("Sun Dec 09 08:46:59 EST 2012"),
"endDate": new Date("Sun Dec 09 09:54:19 EST 2012"), "endDate": new Date("Sun Dec 09 09:54:19 EST 2012"),
"name": "host-02", "name": "os-compute1",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 09:02:45 EST 2012"), "startDate": new Date("Sun Dec 09 09:02:45 EST 2012"),
"endDate": new Date("Sun Dec 09 09:48:56 EST 2012"), "endDate": new Date("Sun Dec 09 09:48:56 EST 2012"),
"name": "host-01", "name": "os-controller",
"status": "WARNING" "status": "WARNING"
}, { }, {
"startDate": new Date("Sun Dec 09 08:27:35 EST 2012"), "startDate": new Date("Sun Dec 09 08:27:35 EST 2012"),
"endDate": new Date("Sun Dec 09 08:58:43 EST 2012"), "endDate": new Date("Sun Dec 09 08:58:43 EST 2012"),
"name": "host-05", "name": "os-compute2",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 08:40:11 EST 2012"), "startDate": new Date("Sun Dec 09 08:40:11 EST 2012"),
"endDate": new Date("Sun Dec 09 08:46:35 EST 2012"), "endDate": new Date("Sun Dec 09 08:46:35 EST 2012"),
"name": "host-03", "name": "os-mq",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 08:00:03 EST 2012"), "startDate": new Date("Sun Dec 09 08:00:03 EST 2012"),
"endDate": new Date("Sun Dec 09 08:09:51 EST 2012"), "endDate": new Date("Sun Dec 09 08:09:51 EST 2012"),
"name": "host-02", "name": "os-compute2",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 10:21:00 EST 2012"), "startDate": new Date("Sun Dec 09 10:21:00 EST 2012"),
"endDate": new Date("Sun Dec 09 10:51:42 EST 2012"), "endDate": new Date("Sun Dec 09 10:51:42 EST 2012"),
"name": "host-04", "name": "os-compute1",
"status": "SUCCEEDED" "status": "SUCCESSFUL"
}, { }, {
"startDate": new Date("Sun Dec 09 11:08:42 EST 2012"), "startDate": new Date("Sun Dec 09 11:08:42 EST 2012"),
"endDate": new Date("Sun Dec 09 11:33:42 EST 2012"), "endDate": new Date("Sun Dec 09 11:33:42 EST 2012"),
"name": "host-04", "name": "os-network",
"status": "CRITICAL" "status": "CRITICAL"
}, { }, {
"startDate": new Date("Sun Dec 09 12:27:15 EST 2012"), "startDate": new Date("Sun Dec 09 12:27:15 EST 2012"),
"endDate": new Date("Sun Dec 09 12:54:56 EST 2012"), "endDate": new Date("Sun Dec 09 12:54:56 EST 2012"),
"name": "host-02", "name": "os-mq",
"status": "SUCCEEDED" "status": "WARNING"
}, { }, {
"startDate": new Date("Sat Dec 08 23:12:24 EST 2012"), "startDate": new Date("Sat Dec 08 23:12:24 EST 2012"),
"endDate": new Date("Sun Dec 09 00:26:13 EST 2012"), "endDate": new Date("Sun Dec 09 00:26:13 EST 2012"),
"name": "host-01", "name": "os-controller",
"status": "UNKNOWN" "status": "UNKNOWN"
}]; }];
$scope.hosts = ["host-01", "host-02", "host-03", "host-04", "host-05"]; $scope.hosts = ["os-controller", "os-db-node", "os-keystone", "os-network", "os-image", "os-mq", "os-compute1", "os-compute2"];
} }
]) ])
@ -467,12 +467,12 @@ angular.module('compass.monitoring', [
$scope.logicalTopoData = { $scope.logicalTopoData = {
"name": "cluster1", "name": "cluster",
"children": [{ "children": [{
"name": "compute", "name": "compute",
"state": "error", "state": "error",
"children": [{ "children": [{
"name": "host1", "name": "os-compute1",
"state": "error", "state": "error",
"children": [{ "children": [{
"name": "service1" "name": "service1"
@ -484,30 +484,19 @@ angular.module('compass.monitoring', [
"name": "service4" "name": "service4"
}] }]
}, { }, {
"name": "host2", "name": "os-compute2",
"state": "error", "state": "error",
"children": [{ "children": [{
"name": "service1" "name": "service1"
}, { }, {
"name": "service2" "name": "service2"
}] }]
}, {
"name": "host3",
"state": "error",
"children": [{
"name": "service1",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}] }]
}, { }, {
"name": "storage", "name": "controller",
"state": "ok", "state": "ok",
"children": [{ "children": [{
"name": "host7", "name": "os-controller",
"state": "ok", "state": "ok",
"children": [{ "children": [{
"name": "service5", "name": "service5",
@ -543,51 +532,101 @@ angular.module('compass.monitoring', [
"name": "network", "name": "network",
"state": "warning", "state": "warning",
"children": [{ "children": [{
"name": "host10", "name": "os-network",
"state": "warning",
"children": []
}, {
"name": "host11",
"state": "warning",
"children": []
}]
}, {
"name": "controller",
"state": "warning", "state": "warning",
"children": [{ "children": [{
"name": "host12", "name": "service5",
"state": "warning", "state": "ok",
"children": [] "children": [{
"name": "metric1"
}, { }, {
"name": "host13", "name": "metric2"
}]
}, {
"name": "service6",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}]
}, {
"name": "image",
"state": "warning", "state": "warning",
"children": [] "children": [{
"name": "os-image",
"state": "warning",
"children": [{
"name": "service5",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}, {
"name": "service6",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}] }]
}, { }, {
"name": "database", "name": "database",
"state": "warning", "state": "warning",
"children": [{ "children": [{
"name": "host14", "name": "os-db-node",
"children": [] "children": [{
}, { "name": "service5",
"name": "host15",
"children": []
}]
}, {
"name": "image",
"state": "ok", "state": "ok",
"children": [{ "children": [{
"name": "host16", "name": "metric1"
"children": []
}, { }, {
"name": "host17", "name": "metric2"
"children": [] }]
}, {
"name": "service6",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}]
}, {
"name": "message queue",
"state": "ok",
"children": [{
"name": "os-mq",
"children": [{
"name": "service5",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}, {
"name": "service6",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}] }]
}] }]
}; };
/*
$scope.physicalTopoData = { $scope.physicalTopoData = {
"name": "Compass Server", "name": "compass-dc1",
"children": [{ "children": [{
"name": "switch1", "name": "switch1",
"state": "error", "state": "error",
@ -631,7 +670,40 @@ angular.module('compass.monitoring', [
}] }]
}] }]
}; };
$scope.serverCount = 9; */
$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'; //$scope.topoDropDown = 'service';

2
v2/src/app/monitoring/topology.tpl.html
View File

@ -13,7 +13,7 @@
<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: 1280px; transition: 0.4s all ease-out;"></circlepacking> <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>
</tab> </tab>
</tabset> </tabset>
</div> </div>

29
v2/src/common/charts.js
View File

@ -178,6 +178,10 @@ angular.module('compass.charts', [])
.on("click", function(d) { .on("click", function(d) {
return zoom(node == d ? root : d); return zoom(node == d ? root : d);
}) })
.on("contextmenu", function(d) {
//stop showing browser menu
d3.event.preventDefault();
})
.on("mouseover", function(d) { .on("mouseover", function(d) {
//console.log("mouseover ", d) //console.log("mouseover ", d)
}); });
@ -192,7 +196,14 @@ angular.module('compass.charts', [])
return d.x; return d.x;
}) })
.attr("y", function(d) { .attr("y", function(d) {
return d.children ? d.y + d.r + 10 : d.y; 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 ? d.y + d.r + 10 : d.y;
}) })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
@ -232,7 +243,15 @@ angular.module('compass.charts', [])
return x(d.x); return x(d.x);
}) })
.attr("y", function(d) { .attr("y", function(d) {
return d.children ? y(d.y + d.r + 10) : y(d.y); 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("opacity", function(d) { .style("opacity", function(d) {
return k * d.r > 20 ? 1 : 0; return k * d.r > 20 ? 1 : 0;
@ -491,10 +510,10 @@ app.directive('ganttchart', function() {
var tasks = scope.data; var tasks = scope.data;
var hostnames = scope.hosts; var hostnames = scope.hosts;
var taskStatus = { var taskStatus = {
"SUCCEEDED": "bar", "SUCCESSFUL": "bar-successful",
"CRITICAL": "bar-failed", "CRITICAL": "bar-failed",
"WARNING": "bar-running", "WARNING": "bar-warning",
"UNKNOWN": "bar-killed" "UNKNOWN": "bar-unknown"
}; };
tasks.sort(function(a, b) { tasks.sort(function(a, b) {