Adding a visualization for authorities. (#338)
* Adding a visualization for authorities. * Fixing some lint. * Fixing some lint.
This commit is contained in:
kevgliss
parent
76037e8b3a
commit
be5dff8472
@ -8,7 +8,7 @@
|
||||
"eqeqeq": true,
|
||||
"immed": true,
|
||||
"indent": 2,
|
||||
"latedef": true,
|
||||
"latedef": false,
|
||||
"newcap": false,
|
||||
"noarg": true,
|
||||
"quotmark": "single",
|
||||
@ -22,6 +22,8 @@
|
||||
"angular": false,
|
||||
"moment": false,
|
||||
"toaster": false,
|
||||
"d3": false,
|
||||
"self": false,
|
||||
"_": false
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,7 +39,8 @@
|
||||
"angular-ui-switch": "~0.1.0",
|
||||
"angular-sanitize": "^1.5.0",
|
||||
"angular-file-saver": "~1.0.1",
|
||||
"angular-ui-select": "~0.17.1"
|
||||
"angular-ui-select": "~0.17.1",
|
||||
"d3": "^3.5.17"
|
||||
},
|
||||
"resolutions": {
|
||||
"moment": ">=2.8.0 <2.11.0",
|
||||
|
||||
@ -335,6 +335,31 @@ class CertificateAuthority(AuthenticatedResource):
|
||||
|
||||
return cert.authority
|
||||
|
||||
|
||||
class AuthorityVisualizations(AuthenticatedResource):
|
||||
def get(self, authority_id):
|
||||
"""
|
||||
{"name": "flare",
|
||||
"children": [
|
||||
{
|
||||
"name": "analytics",
|
||||
"children": [
|
||||
{
|
||||
"name": "cluster",
|
||||
"children": [
|
||||
{"name": "AgglomerativeCluster", "size": 3938},
|
||||
{"name": "CommunityStructure", "size": 3812},
|
||||
{"name": "HierarchicalCluster", "size": 6714},
|
||||
{"name": "MergeEdge", "size": 743}
|
||||
]
|
||||
}
|
||||
}
|
||||
]}
|
||||
"""
|
||||
authority = service.get(authority_id)
|
||||
return dict(name=authority.name, children=[{"name": c.name} for c in authority.certificates])
|
||||
|
||||
api.add_resource(AuthoritiesList, '/authorities', endpoint='authorities')
|
||||
api.add_resource(Authorities, '/authorities/<int:authority_id>', endpoint='authority')
|
||||
api.add_resource(AuthorityVisualizations, '/authorities/<int:authority_id>/visualize', endpoint='authority_visualizations')
|
||||
api.add_resource(CertificateAuthority, '/certificates/<int:certificate_id>/authority', endpoint='certificateAuthority')
|
||||
|
||||
155
lemur/static/app/angular/authorities/view/view.js
vendored
155
lemur/static/app/angular/authorities/view/view.js
vendored
@ -16,6 +16,161 @@ angular.module('lemur')
|
||||
});
|
||||
})
|
||||
|
||||
.directive('authorityVisualization', function () {
|
||||
// constants
|
||||
var margin = {top: 20, right: 120, bottom: 20, left: 120},
|
||||
width = 960 - margin.right - margin.left,
|
||||
height = 400 - margin.top - margin.bottom;
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
val: '=',
|
||||
grouped: '='
|
||||
},
|
||||
link: function (scope, element) {
|
||||
function update(source) {
|
||||
|
||||
// Compute the new tree layout.
|
||||
var nodes = tree.nodes(root).reverse(),
|
||||
links = tree.links(nodes);
|
||||
|
||||
// Normalize for fixed-depth.
|
||||
nodes.forEach(function(d) { d.y = d.depth * 180; });
|
||||
|
||||
// Update the nodes…
|
||||
var node = svg.selectAll('g.node')
|
||||
.data(nodes, function(d) { return d.id || (d.id = ++i); });
|
||||
|
||||
// Enter any new nodes at the parent's previous position.
|
||||
var nodeEnter = node.enter().append('g')
|
||||
.attr('class', 'node')
|
||||
.attr('transform', function() { return 'translate(' + source.y0 + ',' + source.x0 + ')'; })
|
||||
.on('click', click);
|
||||
|
||||
nodeEnter.append('circle')
|
||||
.attr('r', 1e-6)
|
||||
.style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
|
||||
|
||||
nodeEnter.append('text')
|
||||
.attr('x', function(d) { return d.children || d._children ? -10 : 10; })
|
||||
.attr('dy', '.35em')
|
||||
.attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
|
||||
.text(function(d) { return d.name; })
|
||||
.style('fill-opacity', 1e-6);
|
||||
|
||||
// Transition nodes to their new position.
|
||||
var nodeUpdate = node.transition()
|
||||
.duration(duration)
|
||||
.attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; });
|
||||
|
||||
nodeUpdate.select('circle')
|
||||
.attr('r', 4.5)
|
||||
.style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
|
||||
|
||||
nodeUpdate.select('text')
|
||||
.style('fill-opacity', 1);
|
||||
|
||||
// Transition exiting nodes to the parent's new position.
|
||||
var nodeExit = node.exit().transition()
|
||||
.duration(duration)
|
||||
.attr('transform', function() { return 'translate(' + source.y + ',' + source.x + ')'; })
|
||||
.remove();
|
||||
|
||||
nodeExit.select('circle')
|
||||
.attr('r', 1e-6);
|
||||
|
||||
nodeExit.select('text')
|
||||
.style('fill-opacity', 1e-6);
|
||||
|
||||
// Update the links…
|
||||
var link = svg.selectAll('path.link')
|
||||
.data(links, function(d) { return d.target.id; });
|
||||
|
||||
// Enter any new links at the parent's previous position.
|
||||
link.enter().insert('path', 'g')
|
||||
.attr('class', 'link')
|
||||
.attr('d', function() {
|
||||
var o = {x: source.x0, y: source.y0};
|
||||
return diagonal({source: o, target: o});
|
||||
});
|
||||
|
||||
// Transition links to their new position.
|
||||
link.transition()
|
||||
.duration(duration)
|
||||
.attr('d', diagonal);
|
||||
|
||||
// Transition exiting nodes to the parent's new position.
|
||||
link.exit().transition()
|
||||
.duration(duration)
|
||||
.attr('d', function() {
|
||||
var o = {x: source.x, y: source.y};
|
||||
return diagonal({source: o, target: o});
|
||||
})
|
||||
.remove();
|
||||
|
||||
// Stash the old positions for transition.
|
||||
nodes.forEach(function(d) {
|
||||
d.x0 = d.x;
|
||||
d.y0 = d.y;
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle children on click.
|
||||
function click(d) {
|
||||
if (d.children) {
|
||||
d._children = d.children;
|
||||
d.children = null;
|
||||
} else {
|
||||
d.children = d._children;
|
||||
d._children = null;
|
||||
}
|
||||
update(d);
|
||||
}
|
||||
|
||||
var i = 0,
|
||||
duration = 750,
|
||||
root;
|
||||
|
||||
var tree = d3.layout.tree()
|
||||
.size([height, width]);
|
||||
|
||||
var diagonal = d3.svg.diagonal()
|
||||
.projection(function(d) { return [d.y, d.x]; });
|
||||
|
||||
var svg = d3.select(element[0]).append('svg')
|
||||
.attr('width', width + margin.right + margin.left)
|
||||
.attr('height', height + margin.top + margin.bottom)
|
||||
.call(d3.behavior.zoom().on('zoom', function () {
|
||||
svg.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')');
|
||||
}))
|
||||
.append('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
scope.val.customGET('visualize').then(function (result) {
|
||||
root = result;
|
||||
root.x0 = height / 2;
|
||||
root.y0 = 0;
|
||||
|
||||
function collapse(d) {
|
||||
if (d.children) {
|
||||
d._children = d.children;
|
||||
d._children.forEach(collapse);
|
||||
d.children = null;
|
||||
}
|
||||
}
|
||||
|
||||
root.children.forEach(collapse);
|
||||
update(root);
|
||||
|
||||
});
|
||||
|
||||
d3.select(self.frameElement).style('height', '800px');
|
||||
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
.controller('AuthoritiesViewController', function ($scope, $q, $uibModal, $stateParams, AuthorityApi, AuthorityService, MomentService, ngTableParams, toaster) {
|
||||
$scope.filter = $stateParams;
|
||||
$scope.authoritiesTable = new ngTableParams({
|
||||
|
||||
@ -109,6 +109,14 @@
|
||||
</uib-tab-heading>
|
||||
<pre style="width: 100%">{{ authority.authorityCertificate.body }}</pre>
|
||||
</uib-tab>
|
||||
<uib-tab>
|
||||
<uib-tab-heading>
|
||||
Visualization
|
||||
</uib-tab-heading>
|
||||
<pre style="width: 100%">
|
||||
<authority-visualization val="authority"></authority-visualization>
|
||||
</pre>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -178,3 +178,23 @@ a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node circle {
|
||||
fill: #fff;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.node text {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
.link {
|
||||
fill: none;
|
||||
stroke: #ccc;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user