Builded first draft
diff --git a/views/ngXosViews/developer/src/css/main.css b/views/ngXosViews/developer/src/css/main.css
index e69de29..7b15d7c 100644
--- a/views/ngXosViews/developer/src/css/main.css
+++ b/views/ngXosViews/developer/src/css/main.css
@@ -0,0 +1,18 @@
+#xosDeveloper .pie-legend li {
+ display: inline-block;
+ white-space: nowrap;
+ position: relative;
+ margin-bottom: 4px;
+ border-radius: 5px;
+ padding: 2px 8px 2px 28px;
+ font-size: smaller;
+ cursor: default; }
+
+#xosDeveloper .pie-legend-icon {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 5px; }
diff --git a/views/ngXosViews/developer/src/sass/main.scss b/views/ngXosViews/developer/src/sass/main.scss
index 702208f..043a334 100644
--- a/views/ngXosViews/developer/src/sass/main.scss
+++ b/views/ngXosViews/developer/src/sass/main.scss
@@ -1,5 +1,25 @@
@import '../../../../style/sass/lib/_variables.scss';
#xosDeveloper {
-
+
+ .pie-legend li {
+ display: inline-block;
+ white-space: nowrap;
+ position: relative;
+ margin-bottom: 4px;
+ border-radius: 5px;
+ padding: 2px 8px 2px 28px;
+ font-size: smaller;
+ cursor: default;
+ }
+
+ .pie-legend-icon {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ }
}
\ No newline at end of file
diff --git a/xos/core/xoslib/dashboards/xosDeveloper.html b/xos/core/xoslib/dashboards/xosDeveloper.html
index 9227acd..ee7a28b 100644
--- a/xos/core/xoslib/dashboards/xosDeveloper.html
+++ b/xos/core/xoslib/dashboards/xosDeveloper.html
@@ -1,32 +1,18 @@
-<script src="{{ STATIC_URL }}/js/vendor/underscore-min.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.wreqr.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.babysitter.js"></script>
-<script src="{{ STATIC_URL }}/js/vendor/backbone.marionette.js"></script>
+<!-- browserSync -->
+<!-- bower:css -->
+<!-- endbower -->
+<!-- endcss -->
+<!-- inject:css -->
+<link rel="stylesheet" href="/static/css/xosDeveloper.css">
+<!-- endinject -->
-<script src="{{ STATIC_URL }}/js/xoslib/xos-defaults.js"></script>
-<script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
-<script src="{{ STATIC_URL }}/js/xosDeveloper.js"></script>
-
-<link rel="stylesheet" type="text/css" href="{% static 'css/xosDeveloper.css' %}" media="all">
-
-<div id="developerView">
+<div ng-app="xos.developer" id="xosDeveloper" class="container-fluid">
+ <div ui-view></div>
</div>
-<script type="text/template" id="developer-slicetable-template">
- <thead>
- <tr class="developer-header">
- <th>Slice <span class="sort" id="sort-asc-name">▲</span><span class="sort" id="sort-desc-name">▼</span></th>
- <th>Privilege<span class="sort" id="sort-asc-sliceInfo.roles">▲</span><span class="sort" id="sort-desc-sliceInfo.roles">▼</span></th>
- <th>Number of Instances<span class="sort" id="sort-asc-sliceInfo.instanceCount">▲</span><span class="sort" id="sort-desc-sliceInfo.instanceCount">▼</span></th>
- <th>Number of Sites<span class="sort" id="sort-asc-sliceInfo.siteCount">▲</span><span class="sort" id="sort-desc-sliceInfo.siteCount">▼</span></th>
- </tr>
- </thead>
- <tbody>
- </tbody>
-</script>
-
-<script type="text/template" id="developer-slicedetail-template">
- <td><a href="http://{{request.get_host}}/admin/core/slice/<%= id %>/"><%= name %></a></td><td><%= sliceInfo.roles[0] %></td><td><%= sliceInfo.instanceCount %></td><td><%= sliceInfo.siteCount %></td>
-</script>
-
+<!-- bower:js -->
+<!-- endbower -->
+<!-- endjs -->
+<!-- inject:js -->
+<script src="/static/js/xosDeveloper.js"></script>
+<!-- endinject -->
\ No newline at end of file
diff --git a/xos/core/xoslib/static/css/xosDeveloper.css b/xos/core/xoslib/static/css/xosDeveloper.css
index 1bce877..459bc8a 100644
--- a/xos/core/xoslib/static/css/xosDeveloper.css
+++ b/xos/core/xoslib/static/css/xosDeveloper.css
@@ -1 +1,19 @@
-#developerView .sort { cursor: pointer; }
+#xosDeveloper .pie-legend li {
+ display: inline-block;
+ white-space: nowrap;
+ position: relative;
+ margin-bottom: 4px;
+ border-radius: 5px;
+ padding: 2px 8px 2px 28px;
+ font-size: smaller;
+ cursor: default;
+}
+
+#xosDeveloper .pie-legend-icon {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ border-radius: 5px; }
diff --git a/xos/core/xoslib/static/js/xosDeveloper.js b/xos/core/xoslib/static/js/xosDeveloper.js
index c1af537..784dd95 100644
--- a/xos/core/xoslib/static/js/xosDeveloper.js
+++ b/xos/core/xoslib/static/js/xosDeveloper.js
@@ -1,64 +1 @@
-/* eslint-disable guard-for-in, no-undef, space-before-blocks*/
-/* This is an example that uses xoslib + marionette to display the developer
- view.
-
- For an example that uses xoslib + datatables, see xosDeveloper_datatables.js
-*/
-
-DeveloperApp = new Marionette.Application();
-
-DeveloperApp.addRegions({
- mainRegion: '#developerView'
-});
-
-DeveloperApp.SliceDetailView = Marionette.ItemView.extend({
- template: '#developer-slicedetail-template',
- tagName: 'tr',
- className: 'developer_slicedetail'
-});
-
-DeveloperApp.SliceListView = Marionette.CompositeView.extend({
- tagName: 'table',
- className: 'table table-bordered table-striped',
- template: '#developer-slicetable-template',
- childView: DeveloperApp.SliceDetailView,
- childViewContainer: 'tbody',
-
- events: {'click .sort': 'changeSort'},
-
- initialize: function() {
- this.listenTo(this.collection, 'change', this._renderChildren);
- },
-
- changeSort: function(e) {
- parts = $(e.currentTarget).attr('id').split('-');
- order = parts[1];
- fieldName = parts[2];
- this.collection.sortVar = fieldName;
- this.collection.sortOrder = order;
- this.collection.sort();
- },
-
- attachHtml: function(compositeView, childView, index) {
- // The REST API will let admin users see everything. For the developer
- // view we still want to hide slices we are not members of.
- if(childView.model.get('sliceInfo').roles.length === 0) {
- return;
- }
- DeveloperApp.SliceListView.__super__.attachHtml(compositeView, childView, index);
- },
-});
-
-DeveloperApp.on('start', function() {
- var developerSliceListView = new DeveloperApp.SliceListView({
- collection: xos.slicesPlus
- });
-
- DeveloperApp.mainRegion.show(developerSliceListView);
- xos.slicesPlus.startPolling();
-});
-
-$(document).ready(function() {
- DeveloperApp.start();
-});
-
+"use strict";angular.module("xos.developer",["ngResource","ngCookies","ui.router","xos.helpers"]).config(["$stateProvider",function(e){e.state("developer",{url:"/",template:"<developer-dashboard></developer-dashboard>"})}]).config(["$httpProvider",function(e){e.interceptors.push("NoHyperlinks")}]).directive("developerDashboard",function(){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/developer-dashboard.tpl.html",controller:["$timeout","SlicesPlus","_",function(e,t,n){var r=this;this.instancePerSliceConfig={resource:"Instances",groupBy:"slice",legend:!0,labelFormatter:function(e){return e.map(function(e){return n.find(r.slices,{id:parseInt(e)}).name})}},this.instancePerSiteConfig={data:[],groupBy:"site",legend:!0},this.networkPerSliceConfig={data:[],groupBy:"name",legend:!0},this.tableConfig={columns:[{label:"Name",prop:"name"},{label:"Privileges",prop:"current_user_roles",type:"array"},{label:"Number of Instances (active / total)",type:"custom",formatter:function(e){return e.instance_total_ready+" / "+e.instance_total}},{label:"Total Instances per Sites",type:"object",prop:"instance_distribution"},{label:"Active Instances per Sites",type:"object",prop:"instance_distribution_ready"},{label:"Networks",type:"custom",formatter:function(e){return e.networks.length}}]},t.query().$promise.then(function(t){var s=n.reduce(t,function(e,t){if(t.networks.length>1)for(var n=0;n<t.networks.length;n++)e.push({id:t.id,name:t.name,network:t.networks[n]});else 1===t.networks.length&&e.push({id:t.id,name:t.name,network:t.networks[0]});return e},[]),i=n.reduce(t,function(e,t){return n.forEach(Object.keys(t.instance_distribution),function(n){for(var r=0;r<t.instance_distribution[n];r++)e.push({site:n,instance:r})}),e},[]);r.sites=Object.keys(n.groupBy(i,"site")),e(function(){r.instancePerSiteConfig.data=i,r.networkPerSliceConfig.data=s},0),r.slices=t})["catch"](function(e){throw new Error(e)})}]}}),angular.module("xos.developer").run(["$templateCache",function(e){e.put("templates/developer-dashboard.tpl.html",'<div class="row">\n <div ng-class="{\'col-sm-4\': vm.sites.length > 1, \'col-sm-6\': vm.sites.length <= 1}" class="text-center">\n <h3>Instances per Slice</h3>\n <xos-smart-pie ng-if="vm.slices" config="vm.instancePerSliceConfig"></xos-smart-pie>\n </div>\n <div ng-if="vm.sites.length > 1" class="col-sm-4 text-center">\n <h3>Instances per Site</h3>\n <xos-smart-pie ng-if="vm.instancePerSiteConfig.data.length > 0" config="vm.instancePerSiteConfig"></xos-smart-pie>\n </div>\n <div ng-class="{\'col-sm-4\': vm.sites.length > 1, \'col-sm-6\': vm.sites.length <= 1}" class="text-center">\n <h3>Network per Slice</h3>\n <xos-smart-pie ng-if="vm.networkPerSliceConfig.data.length > 0" config="vm.networkPerSliceConfig"></xos-smart-pie>\n </div>\n</div>\n\n<xos-table config="vm.tableConfig" data="vm.slices"></xos-table>')}]),angular.module("xos.developer").run(["$location",function(e){e.path("/")}]);
\ No newline at end of file