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 {
fill: #33b5e5;
}
ganttchart .bar-failed {
fill: #CC0000;
fill: #CC0000; /*red*/
}
ganttchart .bar-running {
fill: #669900;
ganttchart .bar-warning {
fill: #ffbb33; /*yellow*/
}
ganttchart .bar-succeeded {
fill: #33b5e5;
ganttchart .bar-successful {
fill: #669900; /*green*/
}
ganttchart .bar-killed {
fill: #ffbb33;
ganttchart .bar-unknown {
fill: #33b5e5; /*blue*/
/*fill: #B8B8B8; grey*/
}

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

@ -162,7 +162,7 @@
</hostprogressbar>
</td>
<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>
</button>
</td>
@ -175,7 +175,7 @@
</div>
<div class="modal-body" style="padding-top: 30px; padding-bottom: 20px;" >
Are you sure to delete
<strong>{{host.name}}</strong>?
<strong>{{host.hostname}}</strong>?
</div>
<div class="modal-footer">
<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 = [{
"startDate": new Date("Sun Dec 09 01:36:45 EST 2012"),
"endDate": new Date("Sun Dec 09 02:36:45 EST 2012"),
"name": "host-01",
"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": "host-05",
"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": "host-02",
"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": "host-01",
"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": "host-03",
"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": "host-01",
"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": "host-02",
"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": "host-03",
"status": "SUCCEEDED"
"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": "host-04",
"status": "SUCCEEDED"
"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": "host-05",
"status": "SUCCEEDED"
"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": "host-01",
"status": "SUCCEEDED"
"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": "host-04",
"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": "host-04",
"status": "SUCCEEDED"
"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": "host-01",
"status": "SUCCEEDED"
"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": "host-03",
"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": "host-02",
"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": "host-02",
"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": "host-01",
"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": "host-05",
"status": "SUCCEEDED"
"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": "host-03",
"status": "SUCCEEDED"
"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": "host-02",
"status": "SUCCEEDED"
"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": "host-04",
"status": "SUCCEEDED"
"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": "host-04",
"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": "host-02",
"status": "SUCCEEDED"
"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": "host-01",
"name": "os-controller",
"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 = {
"name": "cluster1",
"name": "cluster",
"children": [{
"name": "compute",
"state": "error",
"children": [{
"name": "host1",
"name": "os-compute1",
"state": "error",
"children": [{
"name": "service1"
@ -484,30 +484,19 @@ angular.module('compass.monitoring', [
"name": "service4"
}]
}, {
"name": "host2",
"name": "os-compute2",
"state": "error",
"children": [{
"name": "service1"
}, {
"name": "service2"
}]
}, {
"name": "host3",
"state": "error",
"children": [{
"name": "service1",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}]
}, {
"name": "storage",
"name": "controller",
"state": "ok",
"children": [{
"name": "host7",
"name": "os-controller",
"state": "ok",
"children": [{
"name": "service5",
@ -543,51 +532,101 @@ angular.module('compass.monitoring', [
"name": "network",
"state": "warning",
"children": [{
"name": "host10",
"state": "warning",
"children": []
}, {
"name": "host11",
"state": "warning",
"children": []
}]
}, {
"name": "controller",
"name": "os-network",
"state": "warning",
"children": [{
"name": "host12",
"state": "warning",
"children": []
"name": "service5",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "host13",
"name": "metric2"
}]
}, {
"name": "service6",
"state": "ok",
"children": [{
"name": "metric1"
}, {
"name": "metric2"
}]
}]
}]
}, {
"name": "image",
"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",
"state": "warning",
"children": [{
"name": "host14",
"children": []
}, {
"name": "host15",
"children": []
}]
}, {
"name": "image",
"name": "os-db-node",
"children": [{
"name": "service5",
"state": "ok",
"children": [{
"name": "host16",
"children": []
"name": "metric1"
}, {
"name": "host17",
"children": []
"name": "metric2"
}]
}, {
"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 = {
"name": "Compass Server",
"name": "compass-dc1",
"children": [{
"name": "switch1",
"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';

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

@ -13,7 +13,7 @@
<tab heading="Service View">
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>
</tabset>
</div>

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

@ -178,6 +178,10 @@ angular.module('compass.charts', [])
.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)
});
@ -192,7 +196,14 @@ angular.module('compass.charts', [])
return d.x;
})
.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("text-anchor", "middle")
@ -232,7 +243,15 @@ angular.module('compass.charts', [])
return x(d.x);
})
.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) {
return k * d.r > 20 ? 1 : 0;
@ -491,10 +510,10 @@ app.directive('ganttchart', function() {
var tasks = scope.data;
var hostnames = scope.hosts;
var taskStatus = {
"SUCCEEDED": "bar",
"SUCCESSFUL": "bar-successful",
"CRITICAL": "bar-failed",
"WARNING": "bar-running",
"UNKNOWN": "bar-killed"
"WARNING": "bar-warning",
"UNKNOWN": "bar-unknown"
};
tasks.sort(function(a, b) {