conjur-asset-ui-beta 1.5.0 → 1.6.0

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

@@ -0,0 +1,421 @@
+'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'),
+    forEach = require('lodash/collection/forEach');
+
+var RoleLink = require('../generic/role_link');
+
+// 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;
+}
+
+function _normalizeGraph(graph, invert) {
+    var result = [];
+
+    graph.forEach(function(edge) {
+        var parent = edge.parent || edge[0],
+            child  = edge.child  || edge[1];
+
+        var newEdge = invert ? {child: parent, parent: child} : {parent: parent, child: child};
+
+        result.push(newEdge);
+    });
+
+    return result;
+}
+
+function _isInternal(roleid) {
+    return roleid.indexOf('@') >= 0;
+}
+
+/**
+ * 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.renderComponentToString(roleLink);
+        });
+    },
+
+    /**
+     * Build a graphlib Graph object from the graph data returned by
+     * the conjur api.
+     *
+     * May be called whenever this.state.graph is defined.
+     * @returns {degreD3.graphlib.Graph}
+     * @private
+     */
+    _prepareD3Graph() {
+        var self = this,
+            gr = this.state.graph,
+            invert = this.state.invertGraph == undefined ? true : this.state.invertGraph;
+
+        gr = _normalizeGraph(gr, 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(this.state.roleid)) {
+            gr = gr.filter(function(edge) {
+                return !(_isInternal(edge.parent) || _isInternal(edge.child));
+            });
+        }
+
+        // graph properties go here
+        var graph = this.graph = new dagre.graphlib.Graph().setGraph({});
+
+        var nodeSet = {},
+            edgeSet = {};
+
+        function put(members, id) {
+            if (members[id]) {
+                return false;
+            }
+
+            members[id] = true;
+            return true;
+        }
+
+        function addNode(node) {
+            if (put(nodeSet, node)) {
+                graph.setNode(node, {
+                    label: self._createRoleLabel(node),
+                    labelType: 'html'
+                });
+            }
+        }
+
+        function addEdge(edge) {
+            var parent = edge.parent,
+                child = edge.child,
+                edgeId = parent + '' + child; // poor mans hash code :-(
+
+            addNode(parent);
+            addNode(child);
+
+            if (put(edgeSet, edgeId)) {
+                // edge properties defined here
+                graph.setEdge(parent, child,{});
+            }
+        }
+
+        forEach(gr, addEdge);
+
+        var selfNode = graph.node(this.state.roleid);
+
+        if (selfNode !== undefined) {
+            selfNode['class'] = 'current-role';
+        }
+
+        return graph;
+    },
+
+    /**
+     * 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);
+    }
+});
+
+module.exports = 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.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 = conjur.app.configuration.account + ':' + 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
+        };
+    }
+});

data/app/src/components/graph/graph.less

@@ -0,0 +1,39 @@
+// MUST BE done in BEM style!!
+
+.role-graph {
+    height: 300px;
+}
+
+.role-graph-svg {
+    border: 1px solid #CCC;
+}
+
+.rg-container {
+    width: 100%;
+}
+
+.rg-container .loaded {
+    min-height: 500px;
+}
+
+/** SVG role graph styles **/
+.node rect {
+    stroke: #333;
+    fill: #fff;
+}
+
+svg .label {
+    font-weight: normal;
+    height: auto;
+    width: auto;
+}
+
+.edgePath path {
+    stroke: #333;
+    fill: #333;
+    stroke-width: 1.5px;
+}
+
+g.current-role > rect {
+    fill: #7F7;
+}

data/app/src/components/group/view.js

@@ -3,8 +3,7 @@
 var React = require('react'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
-    StoreWatchMixin = Fluxxor.StoreWatchMixin,
-    Router = require('react-router');
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
 
 var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
     TabPane = require('react-bootstrap/lib/TabPane');
@@ -12,6 +11,7 @@ var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
 var TabMixin = require('../generic/tab_mixin'),
     Breadcrumbs = require('../generic/breadcrumbs'),
     RoleLink = require('../generic/role_link'),
+    RoleGraph = require('../graph/graph'),
     utils = require('../../utils');
 
 var AuditTable = require('../audit/table');
@@ -22,22 +22,45 @@ var compact = require('lodash/array/compact'),
 module.exports = React.createClass({
     displayName: 'GroupView',
 
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'group', 'resources'), Router.State, TabMixin],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'group', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('group', state.id);
+        actions.audit.loadForResource('group', state.id);
+        actions.group.load(state.id);
+        actions.resources.loadOne('group', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            id = unescape(this.getParams().id),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor('group', id),
             data = flux.store('group').getData(),
             resource = flux.store('resources').getResource('group', id);
 
         var ret = {
+            id: id,
             loading: data.loading,
             group: data.group,
             owned: data.owned,
             roles: data.roles,
             owner: resource.data.owner,
             annotations: resource.data.annotations,
+            resource: resource.data,
             members: data.members,
             resources: data.resources,
             audit: audit.data
@@ -121,17 +144,11 @@ module.exports = React.createClass({
             <TabbedArea defaultActiveKey="overview">
               {tabs}
             </TabbedArea>
+            <hr />
+            <RoleGraph height="400"
+                       kind="group"
+                       id={this.state.id} />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForRole('group', id);
-        actions.audit.loadForResource('group', id);
-        actions.group.load(id);
-        actions.resources.loadOne('group', id);
     }
 });

data/app/src/components/host/activity.js

@@ -76,17 +76,37 @@ module.exports = React.createClass({
 
         return null;
     },
+    
+    getInitialState() {
+        return {showActivity: false};
+    },
+   
+    toggleActivity(e) {
+        e.preventDefault();
+
+        this.setState({showActivity: !this.state.showActivity});
+    },
 
     render() {
         var data = this.getData(this.props.audit);
+        var activity_body = [];
+    
+        var msg = this.state.showActivity ? 'Hide' : 'Show graph';
+       
+        if (this.state.showActivity) {
+            activity_body.push(
+                <div className="b-host-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
 
         return (
           <div className="b-host-activity">
             <h2>Activity<Refresh show={this.props.isLoading} /></h2>
-            <div className="b-host-activity__graph">
-              <Chart options={this.props.options}
-                     data={data} />
-            </div>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activity_body}
           </div>
         );
     }

data/app/src/components/host/executors.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react'),
+    take = require('lodash/array/take');
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'HostExecutors',
+
+    propTypes: {
+        data: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            data: [],
+            isLoading: false
+        };
+    },
+
+    getInitialState() {
+        return {showAll: false};
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.setState({showAll: !this.state.showAll});
+    },
+
+    getItems() {
+        var items = this.props.data;
+
+        if (!this.state.showAll) {
+            items = take(items, 5);
+        }
+
+        return items.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            msg = this.state.showAll ? 'Show top 5' : 'See all',
+            empty = items.length === 0,
+            lessThan5 = items.length <= 5,
+            body = [(<h2>Executors<Refresh show={this.props.isLoading} /></h2>)];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-host-executors__list list-unstyled list-group">
+                {items}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There is no executors</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-host-executors__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-host-executors">
+            {body}
+          </div>
+        );
+    }
+});