conjur-asset-ui 1.4.2 → 1.6.0

data/app/src/components/graph/__tests__/edges-from-vertices-test.js

@@ -0,0 +1,48 @@
+/* global jest, describe, it, expect */
+"use strict";
+
+
+jest.dontMock('lodash');
+jest.dontMock('collections/set');
+jest.dontMock('../helpers');
+
+var {edgesFromVertices, __test__:{SingleVertex}} = require('../helpers');
+var Set = require('collections/set');
+
+describe('edgesFromVertices', ()=>{
+
+    var a = new SingleVertex('x:a'),
+        b = new SingleVertex('x:b'),
+        c = new SingleVertex('x:c'),
+        d = new SingleVertex('x:d');
+    a.addChild(b);
+    a.addChild(c);
+    b.addChild(d);
+    c.addChild(d);
+    var vertices = [a,b,c,d];
+
+    var edges = edgesFromVertices(vertices),
+        edgeSet = new Set(
+            edges,
+            (a,b) => a.parent === b.parent && a.child === b.child,
+            (a) => `${a.parent}->${a.child}`
+        ) ;
+
+
+    function expectEdge(parent, child){
+        expect(edgeSet.has({parent, child})).toBeTruthy();
+    }
+
+    it('has the expected edges', ()=>{
+        expectEdge('x:a', 'x:b');
+        expectEdge('x:a', 'x:c');
+        expectEdge('x:b', 'x:d');
+        expectEdge('x:c', 'x:d');
+    });
+
+    it('has the expected number of edges', ()=>{
+        expect(edges.length).toBe(4);
+    })
+
+
+});

data/app/src/components/graph/__tests__/new-vertex-set-test.js

@@ -0,0 +1,16 @@
+/* global jest, describe, it, expect */
+"use strict";
+jest.dontMock('../helpers');
+jest.dontMock('collections/set');
+var {newVertexSet} = require('../helpers').__test__;
+
+
+describe('newVertexSet', ()=>{
+    it('creates as set that is keyed by id', ()=>{
+        const s = newVertexSet();
+        s.add({id:'foo'});
+        s.add({id:'bar'});
+        s.add({id:'foo'});
+        expect(s.length).toBe(2);
+    });
+});

data/app/src/components/graph/__tests__/next-id-test.js

@@ -0,0 +1,27 @@
+/* global jest, describe, it, expect */
+"use strict";
+
+jest.dontMock('collections/set');
+jest.dontMock('../helpers');
+
+var {nextId} = require('../helpers').__test__;
+var Set = require('collections/set');
+
+describe('nextId', ()=> {
+    it('generates unique ids', ()=> {
+        var s = new Set();
+        for (let i = 0; i < 100; i++) {
+            s.add(nextId());
+        }
+        expect(s.length).toBe(100);
+    });
+
+    it('returns strings when no prefix is given', ()=>{
+        expect(typeof nextId()).toBe('string');
+    });
+
+    it('uses a prefix if given', ()=>{
+        expect(nextId('hello').indexOf('hello')).toBe(0);
+    });
+
+});

data/app/src/components/graph/__tests__/role-kind-from-id-test.js

@@ -0,0 +1,24 @@
+/* global jest, describe, it, expect */
+"use strict";
+
+jest.dontMock('../helpers');
+
+var {roleKindFromId} = require('../helpers').__test__;
+
+describe('roleKindFromId', () =>{
+    it('parses an id with 3 components correctly', () =>{
+        expect(roleKindFromId('companyname:user:bob')).toBe('user');
+    });
+
+    it('parses an id with more than three components correctly', ()=>{
+       expect(roleKindFromId('a:b:c:d')).toBe('b');
+    });
+
+    it('parses an id with 2 components correctly', ()=>{
+        expect(roleKindFromId('user:bob')).toBe('user');
+    });
+
+    it('returns the id unchanged when it has a single component', () =>{
+        expect(roleKindFromId('asdf')).toBe('asdf');
+    });
+});

data/app/src/components/graph/__tests__/vertices-from-edges-test.js

@@ -0,0 +1,72 @@
+/* global jest, describe, it, expect */
+"use strict";
+
+
+jest.dontMock('lodash');
+jest.dontMock('collections/set');
+jest.dontMock('../helpers');
+
+var {verticesFromEdges} = require('../helpers');
+var {reduce} = require('lodash');
+
+
+describe('verticesFromEdges', ()=> {
+    /*
+     x:c
+     |
+     v
+     x:a
+     /     |
+     x:b    x:d
+     \     /
+     x:e
+     */
+    var edges = [
+        ['x:a', 'x:b'],
+        ['x:c', 'x:a'],
+        ['x:a', 'x:d'],
+        ['x:d', 'x:e'],
+        ['x:b', 'x:e']
+    ];
+
+    var vertices = verticesFromEdges(edges);
+
+
+    var idToVertex = reduce(vertices,
+        (o, v) => {
+            o[v.id] = v;
+            return o;
+        },
+        {}
+    );
+
+    function expectStructure(vertexId, expectedInIds, expectedOutIds){
+        var vertex = idToVertex[vertexId];
+        expect(vertex.in.length).toBe(expectedInIds.length);
+        expectedInIds.forEach(
+            (vId) => {
+                let v = idToVertex[vId];
+                expect(vertex.in.has(v)).toBeTruthy();
+            }
+        );
+        expectedOutIds.forEach(
+            (vId) => {
+                let v = idToVertex[vId];
+                expect(vertex.out.has(v)).toBeTruthy();
+            }
+        );
+    }
+
+    it('makes 5 vertices', ()=> {
+        expect(vertices.length).toBe(5);
+    });
+
+    it('creates the correct structure', () => {
+        expectStructure('x:c', [], ['x:a']);
+        expectStructure('x:a', ['x:c'], ['x:b', 'x:d']);
+        expectStructure('x:b', ['x:a'], ['x:e']);
+        expectStructure('x:d', ['x:a'], ['x:e']);
+        expectStructure('x:e', ['x:b', 'x:d'], []);
+    });
+
+});

data/app/src/components/graph/graph.js

@@ -0,0 +1,449 @@
+"use strict";
+
+require('./graph.less');
+
+var React = require('react'),
+    Router = require('react-router'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin,
+    dagre = require('dagre-d3'),
+    d3 = require('d3');
+
+import {forEach, flatten, unique, chain, merge} from 'lodash';
+import {verticesFromEdges, isInternal, collapse,
+        edgesFromVertices, newEdgeSet} from './helpers';
+var Set = require('collections/set');
+
+var RoleLink = require('../generic/role_link');
+
+function Node(type, props) {
+    merge(this, props, {type: type});
+}
+
+// helpers
+function _translate(x,y) {
+    return 'translate(' + x + ',' + y + ')';
+}
+
+function _findParent(elt, predicate) {
+    while (elt && !predicate(elt)) {
+        elt = elt.parentElement;
+    }
+
+    if (!elt) {
+        throw new Error('couldn\'t find parent');
+    }
+
+    return elt;
+}
+
+
+
+/**
+ * Displays a digraph representing a role tree.  Usage:
+ *
+ * <RoleGraph margin={...} ref='roleGraph'/>
+ *
+ * ...
+ *
+ * // show a graph, which should be an array of {parent, child} objects.
+ * this.refs.roleGraph.setState({graph: res.graph})
+ */
+var RoleGraph = React.createClass({
+    mixins: [Router.State, Router.Navigation],
+
+    /*
+     * React Lifecycle methods
+     */
+    render() {
+        return (
+          <div className="role-graph-container"></div>
+        );
+    },
+
+    getDefaultProps() {
+        return {
+            defaultOptions: {
+                margin: {
+                    top: 20,
+                    right: 20,
+                    bottom: 20,
+                    left: 20
+                }
+            }
+        };
+    },
+
+    getInitialState() {
+        return {
+            ready: false
+        };
+    },
+
+    componentDidMount() {
+        this.ctx = {};
+        this.el = this.getDOMNode();
+        this._propsToState(this.props);
+    },
+
+    componentWillReceiveProps(nextProps) {
+        this._propsToState(nextProps);
+    },
+
+    componentDidUpdate() {
+        if (this.state.ready === false) {
+            return;
+        }
+
+        if (this.ctx.svg === undefined) {
+            this._create();
+        }
+
+        if (this.state.graph !== undefined) {
+            this._update();
+        }
+    },
+
+    /**
+     * Internal methods
+     */
+
+    /**
+     * Create non-data bound components.  May be called whenever state.ready is true
+     * @private
+     */
+    _create() {
+        this.ctx.svg = d3.select(this.el)
+            .append('svg')
+            .attr('class', 'role-graph-svg');
+        this.ctx.inner = this.ctx.svg.append('g');
+    },
+
+    /**
+     *  Render the graph represented by this.state.graph.  This may be
+     *  called whenever this.state.graph is defined.  this.state.graph
+     *  must be an array of {child:'child-id', parent:'parent-id'}
+     *  objects.
+     *
+     * @private
+     */
+    _update() {
+        var svg = this.ctx.svg;
+        var graph = this._prepareD3Graph();
+        var inner = this.ctx.inner;
+        var render = new dagre.render();
+        render(inner, graph);
+
+        // Move and resize the SVG to match the width and height of
+        // the graph.  Here, we use this.state.margin to compute the
+        // position of the <g/> element containing the graph within the
+        // root <svg> element, and the size of both the container and
+        // the svg.
+
+        var margin = this.state.margin;
+        var gWidth  = graph.graph().width,
+            gHeight = graph.graph().height;
+
+        // total width/height are gWidth/gHeight + margin
+        var totalHeight = gHeight + margin.top + margin.bottom;
+        var totalWidth  = gWidth  + margin.left  + margin.right;
+
+        var svgSize = this._computeSvgSize(gWidth, gHeight);
+
+        // resize the svg
+        svg.attr('height', svgSize.height)
+            .attr('width', svgSize.width);
+
+        // resize the inner <g> and translate it to the top left point of the
+        // margin.
+        inner.attr('height', gHeight)
+            .attr('width', gWidth)
+            .attr('transform',_translate(margin.left, margin.top));
+
+        // Set up zoom support
+        var zoom = d3.behavior.zoom().on('zoom', function() {
+            inner.attr('transform', 'translate(' + d3.event.translate + ')' +
+                       'scale(' + d3.event.scale + ')');
+        });
+
+        // scale to initial scale
+        zoom.scale(svgSize.scale)
+            .translate([(svgSize.width - gWidth * svgSize.scale) / 2, (svgSize.height - gHeight * svgSize.scale) / 2]) // center it
+            .event(svg);
+        svg.call(zoom);
+    },
+
+    /**
+     * Return width and height attributes that will fit in our element (or fit the
+     * graph if our element isn't specifying a width and height), and a scale
+     * to apply to the graph to fit it in the svg, based on the given graph
+     * width and height.
+     * @param graphWidth Width, in pixels, of the graph
+     * @param graphHeight Height, in pixels, of the graph
+     * @return {{width:number, height: number, scale: number}}
+     *
+     * @private
+     */
+
+    _computeSvgSize(graphWidth, graphHeight) {
+        var eltWidth = +this.el.offsetWidth,
+            eltHeight = +this.el.offsetHeight,
+            width = graphWidth,
+            height = graphHeight;
+
+        if (!isNaN(eltWidth) && eltWidth !== 0) {
+            width = Math.min(graphWidth, eltWidth);
+        }
+
+        if (!isNaN(eltHeight) && eltHeight !== 0) {
+            height = Math.min(graphHeight, eltHeight);
+        }
+
+        if (this.props.width) {
+            width = Math.max(this.props.width, width);
+        }
+
+        if (this.props.height) {
+            height = Math.max(this.props.height, height);
+        }
+
+        var scale = Math.min(width, height) / Math.max(graphWidth, graphHeight);
+
+        if (scale > 1) {
+            scale *= .9; // leave some room at the edges when the graph is smaller than the element.
+        }
+
+        return {width: width, height: height, scale: scale};
+    },
+
+    // creates an HTML role-link for the role.
+    _createRoleLabel(roleid) {
+        return React.withContext(this.context, function() {
+            var roleLink = <RoleLink id={roleid} simple={true} />;
+            return React.renderToString(roleLink);
+        });
+    },
+
+    /**
+     * Build a graphlib Graph object from the graph data returned by
+     * the conjur api.
+     *
+     * TODO this method is getting kinda big!
+     *
+     * May be called whenever this.state.graph is defined.
+     * @returns {degreD3.graphlib.Graph}
+     * @private
+     */
+    _prepareD3Graph() {
+        // throw something helpful if we're called in a bad state.
+        if(!this.state.graph){
+            throw new Error("_prepareD3Graph called without state.graph");
+        }
+
+        var {graph, invertGraph, roleid} = this.state;
+        const invert = invertGraph === undefined ? true : invertGraph;
+
+        var vertices = verticesFromEdges(graph, invert);
+
+
+
+        // remove internal roles from the graph,
+        // unless the role being shown is internal (presently this is
+        // impossible in the UI, but we might as well check in case this changes.
+        if (!isInternal(roleid)) {
+            vertices.forEach((v) => {
+                if(isInternal(v.id)) v.unlink();
+            });
+            vertices = _.filter(vertices, (v) => v.isConnected());
+        }
+
+
+        // Collapse big sets of equivalent vertices.
+        vertices = collapse(vertices,
+            this.props.collapseCutoff);
+
+
+        // graph properties go here
+        var dagreGraph = this.graph = new dagre.graphlib.Graph().setGraph({});
+
+        // keep track of edges we've added
+        var edgeSet = newEdgeSet();
+
+        // and vertex ids
+        var vertexIdSet = new Set();
+
+        // add an edge idempotently
+        var addEdge = (parent, child) => {
+            if(edgeSet.add({parent, child})){
+                dagreGraph.setEdge(parent.id, child.id,
+                    this._makeEdgeProps(parent, child));
+            }
+        };
+
+        // add a vertex idempotently
+        var addVertex = (v)=> {
+            if(vertexIdSet.add(v.id)){
+                dagreGraph.setNode(v.id, this._makeNodeProps(v));
+                v.in.forEach((p) => addEdge(p, v));
+                v.out.forEach((c) => addEdge(v, c));
+            }
+        };
+
+        vertices.forEach(addVertex);
+
+
+        var selfNode = dagreGraph.node(this.state.roleid);
+
+        if (selfNode === undefined) {
+            console.error("current role isn't in graph?");
+        }else{
+            selfNode['class'] = 'current-role';
+        }
+
+        return dagreGraph;
+    },
+
+    _makeNodeProps(vertex){
+        if(vertex.isSingle()){
+            return this._makeSingleNodeProps(vertex);
+        }else{
+            return this._makeMultiNodeProps(vertex);
+        }
+    },
+
+    _makeSingleNodeProps(vertex){
+        var html = React.withContext(this.context,
+            ()=> React.renderToString(<RoleLink id={vertex.id}/>));
+        return {label: html, labelType: 'html'};
+    },
+
+    _makeMultiNodeProps(vertex){
+        const count = vertex.members.length,
+              roleKind = vertex.roleKind,
+              label = `${count} identical ${roleKind}s`;
+        return {label};
+    },
+
+    _makeEdgeProps(fromVertex, toVertex){
+        return {}; // Add fanciness for edges here.
+    },
+
+    /**
+     * Transfer some props to our state, and determine whether we're ready to
+     * call _create.
+     * @param props contains a 'margin' object.
+     * @private
+     */
+    _propsToState(props) {
+        var margin = props.margin ? props.margin : this.props.defaultOptions.margin;
+
+        var state = {
+            ready: margin !== undefined && this.props.roleid !== undefined,
+            margin: margin,
+            invertGraph: this.props.invertGraph,
+            roleid: this.props.roleid
+        };
+
+        if (props.graph !== undefined) {
+            state.graph = props.graph;
+        }
+
+        this.setState(state);
+    }
+
+
+});
+
+export default React.createClass({
+    displayName: 'RoleGraph',
+
+    mixins: [FluxMixin, StoreWatchMixin('graph')],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            graph = flux.store('graph').getGraph(this.props.kind, this.props.id);
+
+        return graph;
+    },
+
+    render() {
+        if (this.state.error) {
+            return null;
+        }
+
+        if (this.state.loading) {
+            return (
+              <div className="rg-container">
+                <h2>Role Graph</h2>
+                Loading
+              </div>
+            );
+        }
+
+        if (this.state.data.length === 0) {
+            return (
+              <div className="rg-container">
+                <h2>Role Graph</h2>
+                No data exists
+              </div>
+            );
+        }
+
+        return this._renderGraph();
+    },
+
+    componentDidMount() {
+        var actions = this.getFlux().actions;
+
+        actions.graph.load(this.props.kind, this.props.id);
+    },
+
+    _renderGraph() {
+        var size = this._computeGraphSize(),
+            invert = this.props.invertGraph === undefined ? true : this.props.invertGraph,
+            roleid = window.decodeURIComponent(this.getFlux().actions.getFullId(this.props.kind, this.props.id));
+
+        return (
+          <div className="rg-container loaded">
+            <h2>Role Graph</h2>
+            <RoleGraph graph={this.state.data}
+                       width={size.width}
+                       height={size.height}
+                       roleid={roleid}
+                       invertGraph={invert} />
+          </div>
+        );
+    },
+
+    _computeGraphSize() {
+        var el = this.getDOMNode(),
+            width = this.props.width,
+            height = this.props.height;
+
+        if (isNaN(width)) {
+            width = +el.offsetWidth;
+        }
+
+        if (isNaN(height)) {
+            height = +el.offsetHeight;
+        }
+
+        if (isNaN(width) || isNaN(height)) {
+            throw new Error('can\'t determine width and height.  ' +
+                            'Perhaps you should set width and height props on your RoleGraphContainer.');
+        }
+
+        // we can set height ourselves but width should be computed from the parent.
+        if (width == 0) {
+            width = _findParent(el, function(e) {
+                return e.offsetWidth !== 0;
+            }).offsetWidth; // _findParent is a partial function, if no such parent exists it will throw an Error.
+        }
+
+        return {
+            width: width,
+            height: height
+        };
+    }
+});