Adding layout to the topology panel
Change-Id: I9a57172625f778872f39db3828181998d21bb30d
This commit is contained in:
Alon
Alon Heller
parent
039151beb9
commit
6879a80e1a
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzAlarms', hzAlarms);
|
||||
|
||||
function hzAlarms() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/components/alarms/alarms.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="vitrage-alarms">
|
||||
<h1>Alarms</h1>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-alarms {
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzInformation', hzInformation);
|
||||
|
||||
function hzInformation() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/components/information/information.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="vitrage-information">
|
||||
<h1>Information</h1>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-information {
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzStacks', hzStacks);
|
||||
|
||||
function hzStacks() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/components/stacks/stacks.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="vitrage-stacks">
|
||||
<h1>Stacks</h1>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-stacks {
|
||||
|
||||
}
|
||||
@ -1,90 +1,102 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('sunburst', sunburst);
|
||||
.directive('hzSunburst', hzSunburst);
|
||||
|
||||
function sunburst() {
|
||||
function hzSunburst() {
|
||||
var directive = {
|
||||
link: link,
|
||||
scope: {
|
||||
name: '@'
|
||||
},
|
||||
templateUrl: STATIC_URL+'dashboard/project/components/sunburst/sunburst.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
var width = 960,
|
||||
height = 700,
|
||||
radius = Math.min(width, height) / 2;
|
||||
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
|
||||
var color = d3.scale.category20c();
|
||||
|
||||
var svg = d3.select("#canvas").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
|
||||
|
||||
var partition = d3.layout.partition()
|
||||
.value(function (d) {
|
||||
return d.size;
|
||||
});
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function (d) {
|
||||
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
|
||||
})
|
||||
.endAngle(function (d) {
|
||||
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
|
||||
})
|
||||
.innerRadius(function (d) {
|
||||
return Math.max(0, y(d.y));
|
||||
})
|
||||
.outerRadius(function (d) {
|
||||
return Math.max(0, y(d.y + d.dy));
|
||||
});
|
||||
|
||||
d3.json("/static/dashboard/project/topology/graph.json", function (error, root) {
|
||||
if (error) throw error;
|
||||
|
||||
var path = svg.selectAll("path")
|
||||
.data(partition.nodes(root))
|
||||
.enter().append("path")
|
||||
.attr("d", arc)
|
||||
.style("fill", function (d) {
|
||||
return color((d.children ? d : d.parent).name);
|
||||
})
|
||||
.on("click", click);
|
||||
|
||||
function click(d) {
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween(d));
|
||||
}
|
||||
// We have to init the d3 after the div element has dynamic id
|
||||
scope.$watch('name', function(newValue, oldValue) {
|
||||
init();
|
||||
});
|
||||
|
||||
d3.select(self.frameElement).style("height", height + "px");
|
||||
function init() {
|
||||
var width = 500,
|
||||
height = 500,
|
||||
radius = Math.min(width, height) / 2;
|
||||
|
||||
// Interpolate the scales!
|
||||
function arcTween(d) {
|
||||
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
|
||||
yd = d3.interpolate(y.domain(), [d.y, 1]),
|
||||
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
|
||||
return function (d, i) {
|
||||
return i
|
||||
? function (t) {
|
||||
return arc(d);
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
|
||||
var color = d3.scale.category20c();
|
||||
|
||||
var svg = d3.select('#' + scope.name).append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.append('g')
|
||||
.attr('transform', 'translate(' + width / 2 + ',' + (height / 2 + 10) + ')');
|
||||
|
||||
var partition = d3.layout.partition()
|
||||
.value(function (d) {
|
||||
return d.size;
|
||||
});
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function (d) {
|
||||
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
|
||||
})
|
||||
.endAngle(function (d) {
|
||||
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
|
||||
})
|
||||
.innerRadius(function (d) {
|
||||
return Math.max(0, y(d.y));
|
||||
})
|
||||
.outerRadius(function (d) {
|
||||
return Math.max(0, y(d.y + d.dy));
|
||||
});
|
||||
|
||||
d3.json('/static/dashboard/project/topology/graph.json', function (error, root) {
|
||||
if (error) throw error;
|
||||
|
||||
var path = svg.selectAll('path')
|
||||
.data(partition.nodes(root))
|
||||
.enter().append('path')
|
||||
.attr('d', arc)
|
||||
.style('fill', function (d) {
|
||||
return color((d.children ? d : d.parent).name);
|
||||
})
|
||||
.on('click', click);
|
||||
|
||||
function click(d) {
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween('d', arcTween(d));
|
||||
}
|
||||
: function (t) {
|
||||
x.domain(xd(t));
|
||||
y.domain(yd(t)).range(yr(t));
|
||||
return arc(d);
|
||||
});
|
||||
|
||||
d3.select(self.frameElement).style('height', height + 'px');
|
||||
|
||||
// Interpolate the scales!
|
||||
function arcTween(d) {
|
||||
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
|
||||
yd = d3.interpolate(y.domain(), [d.y, 1]),
|
||||
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
|
||||
return function (d, i) {
|
||||
return i
|
||||
? function (t) {
|
||||
return arc(d);
|
||||
}
|
||||
: function (t) {
|
||||
x.domain(xd(t));
|
||||
y.domain(yd(t)).range(yr(t));
|
||||
return arc(d);
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="vitrage-sunburst">
|
||||
<div id="canvas"></div>
|
||||
<div id="{{name}}"></div>
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzVms', hzVms);
|
||||
|
||||
function hzVms() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/components/vms/vms.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<div class="vitrage-vms">
|
||||
<h1>VMs</h1>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-vms {
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzCompute', hzCompute);
|
||||
|
||||
function hzCompute() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/layout/main/compute/compute.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="vitrage-compute container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<hz-information></hz-information>
|
||||
<hz-stacks></hz-stacks>
|
||||
<hz-alarms></hz-alarms>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<hz-sunburst name="compute"></hz-sunburst>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-compute {
|
||||
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.controller('MainController', MainController);
|
||||
|
||||
MainController.$inject = ['$scope', 'vitrageTopologySrv'];
|
||||
|
||||
function MainController($scope, vitrageTopologySrv) {
|
||||
$scope.STATIC_URL = STATIC_URL;
|
||||
var srv = vitrageTopologySrv;
|
||||
}
|
||||
|
||||
})();
|
||||
@ -0,0 +1,32 @@
|
||||
<div class="vitrage-main" ng-controller="MainController as main">
|
||||
<tabset>
|
||||
<tab>
|
||||
<tab-heading>
|
||||
<!-- TODO: I18N -->
|
||||
<i class="fa fa-desktop"></i> Compute
|
||||
</tab-heading>
|
||||
<div>
|
||||
<hz-compute></hz-compute>
|
||||
</div>
|
||||
|
||||
</tab>
|
||||
|
||||
<tab>
|
||||
<tab-heading>
|
||||
<!-- TODO: I18N -->
|
||||
<i class="fa fa-database"></i> Storage
|
||||
</tab-heading>
|
||||
<div>
|
||||
<hz-storage></hz-storage>
|
||||
</div>
|
||||
</tab>
|
||||
|
||||
<tab>
|
||||
<tab-heading>
|
||||
<!-- TODO: I18N -->
|
||||
<i class="fa fa-globe"></i> Network
|
||||
</tab-heading>
|
||||
<hz-network></hz-network>
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-main {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzNetwork', hzNetwork);
|
||||
|
||||
function hzNetwork() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/layout/main/network/network.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="vitrage-network">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<hz-information></hz-information>
|
||||
<hz-stacks></hz-stacks>
|
||||
<hz-vms></hz-vms>
|
||||
<hz-alarms></hz-alarms>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<hz-sunburst sunburst name="network-sunburst"></hz-sunburst>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-network {
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.directive('hzStorage', hzStorage);
|
||||
|
||||
function hzStorage() {
|
||||
var directive = {
|
||||
link: link,
|
||||
templateUrl: STATIC_URL + 'dashboard/project/layout/main/storage/storage.html',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="vitrage-storage">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<hz-information></hz-information>
|
||||
<hz-stacks></hz-stacks>
|
||||
<hz-vms></hz-vms>
|
||||
<hz-alarms></hz-alarms>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<hz-sunburst sunburst name="storage-sunburst"></hz-sunburst>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.vitrage-storage {
|
||||
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('horizon.dashboard.project.vitrage')
|
||||
.controller('SystemHealthController', SystemHealthController);
|
||||
|
||||
SystemHealthController.$inject = ['$scope', 'vitrageTopologySrv'];
|
||||
|
||||
function SystemHealthController($scope, vitrageTopologySrv) {
|
||||
$scope.STATIC_URL = STATIC_URL;
|
||||
var srv = vitrageTopologySrv;
|
||||
}
|
||||
|
||||
})();
|
||||
@ -1,3 +0,0 @@
|
||||
<div class="vitrage-system-health" ng-controller="SystemHealthController as systemHealth">
|
||||
<sunburst></sunburst>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
.vitrage-system-health {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
angular.module('horizon.dashboard.project.vitrage',[]);
|
||||
angular.module('horizon.dashboard.project.vitrage',['ui.bootstrap']);
|
||||
|
||||
})();
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
{% block main %}
|
||||
|
||||
<div ng-cloak ng-init='init({{ TOPOLOGY_VITRAGE_SETTINGS }})'>
|
||||
<ng-include src="'{{STATIC_URL}}dashboard/project/layout/system-health.html'"></ng-include>
|
||||
<ng-include src="'{{STATIC_URL}}dashboard/project/layout/main/main.html'"></ng-include>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user