Added ;

structure - work in progress

Change-Id: I4e7171f9886c1878742d35660b905d89747f481f

.jshintrc

@@ -0,0 +1,29 @@
+{
+  "browser": true,
+  "esnext": true,
+  "predef": ["angular", "horizon", "$"],
+  "globalstrict": true,
+  "quotmark": true,
+  "smarttabs": true,
+  "strict": false,
+  "trailing": true,
+  "undef": true,
+  "unused": true,
+  "bitwise": true,
+  "boss": true,
+  "curly": true,
+  "eqeqeq": false,
+  "eqnull": true,
+  "evil": false,
+  "forin": true,
+  "immed": true,
+  "latedef": true,
+  "laxbreak": true,
+  "loopfunc": true,
+  "newcap": true,
+  "noarg": true,
+  "noempty": true,
+  "nonew": true,
+  "supernew": true,
+  "validthis": true
+}

vitragedashboard/static/dashboard/project/components/sunburst/sunburst.directive.js

@@ -0,0 +1,90 @@
+angular
+    .module('horizon.dashboard.project.vitrage')
+    .directive('sunburst', sunburst);
+
+function sunburst() {
+    var directive = {
+        link: link,
+        templateUrl: '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));
+            }
+        });
+
+        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);
+                };
+            };
+        }
+    }
+}

vitragedashboard/static/dashboard/project/components/sunburst/sunburst.html

@@ -0,0 +1,3 @@
+<div class="vitrage-sunburst">
+    <div id="canvas"></div>
+</div>

vitragedashboard/static/dashboard/project/components/sunburst/sunburst.scss

@@ -0,0 +1,3 @@
+.vitrage-sunburst {
+
+}

vitragedashboard/static/dashboard/project/components/sunburst/sunburst.test.js

@@ -0,0 +1 @@
+// TODO...

vitragedashboard/static/dashboard/project/layout/system-health.controller.js

@@ -0,0 +1,15 @@
+(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;
+    }
+
+})();

vitragedashboard/static/dashboard/project/layout/system-health.html

@@ -0,0 +1,3 @@
+<div class="vitrage-system-health" ng-controller="SystemHealthController as systemHealth">
+    <sunburst></sunburst>
+</div>

vitragedashboard/static/dashboard/project/layout/system-health.scss

@@ -0,0 +1,3 @@
+.vitrage-system-health {
+  margin-bottom: 4px;
+}

vitragedashboard/static/dashboard/project/services/vitrage_topology.service.js

@@ -1,7 +1,3 @@
-/**
- * Created by oetrog on 11/17/15.
- */
-
 (function(){
 'use strict';
 

vitragedashboard/static/dashboard/project/topology/main_panel.html

@@ -1,3 +0,0 @@
-<div style="margin-bottom: 4px;">
-    Hello World
-</div>

vitragedashboard/static/dashboard/project/topology/vitrage_topology.controller.js

@@ -1,19 +0,0 @@
-/**
- * Created by oetrog on 11/17/15.
- */
-
-(function(){
-'use strict';
-
-    angular
-        .module('horizon.dashboard.project.vitrage')
-        .controller('vitrageTopologyCtrl',VitrageTopologyCtrl);
-
-        VitrageTopologyCtrl.$inject = ['$scope','vitrageTopologySrv'];
-
-        function VitrageTopologyCtrl($scope,vitrageTopologySrv){
-            $scope.STATIC_URL = STATIC_URL;
-            var srv = vitrageTopologySrv;
-        }
-
-})();

vitragedashboard/static/dashboard/project/vitrage.module.js

@@ -1,10 +1,6 @@
-/**
- * Created by oetrog on 11/17/15.
- */
-
 (function(){
 'use strict';
 
-    angular.module('horizon.dashboard.project.vitrage',[])
+    angular.module('horizon.dashboard.project.vitrage',[]);
 
 })();

vitragedashboard/templates/topology/index.html

@@ -3,13 +3,13 @@
 {% block title %}{% trans "Topology" %}{% endblock %}
 
 {% block page_header %}
-{% include "horizon/common/_page_header.html" with title=_("Topology") %}
+<hz-page-header header="Topology Vitrage" description="Topology Vitrage Desc"></hz-page-header>
 {% endblock page_header %}
 
 {% block main %}
 
-<div ng-cloak ng-controller="vitrageTopologyCtrl" ng-init='init({{ TOPOLOGY_VITRAGE_SETTINGS }})'>
+<div ng-cloak ng-init='init({{ TOPOLOGY_VITRAGE_SETTINGS }})'>
-    <ng-include src="'{{STATIC_URL}}dashboard/project/topology/main_panel.html'"></ng-include>
+    <ng-include src="'{{STATIC_URL}}dashboard/project/layout/system-health.html'"></ng-include>
 </div>
 {% endblock %}