conjur-asset-ui 1.4.2 → 1.6.0

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/graph/helpers.js

@@ -0,0 +1,368 @@
+'use strict';
+
+var _ = require('lodash');
+import Set from 'collections/set';
+
+/**
+ * Returns the 'kind' part of a Conjur id like
+ * "kind:id" or "account:kind:id".  Returns the id unchanged
+ * when it isn't in this format (useful for tests and such).
+ * @param id {String}
+ * @returns {String}
+ */
+function roleKindFromId(id) {
+    let parts = id.split(':', 3);
+    if (parts.length === 2) {
+        return parts[0];
+    } else if (parts.length === 3) {
+        return parts[1];
+    } else {
+        return id;
+    }
+}
+
+/**
+ * Create a new collection capable of storing vertices.
+ */
+function newVertexSet() {
+    return new Set(
+        null,                    // values
+        (a, b) => a.id === b.id, // equals
+        (a) => a.id              // hash
+    );
+}
+
+/**
+ * Return a new id with the given prefix
+ */
+var nextId = (function () {
+    var id = 1;
+    return function (prefix = '') {
+        return prefix + (id++);
+    }
+})();
+
+/**
+ * Base class for vertices of an adjacency list representation
+ * of a graph.
+ */
+class BaseVertex {
+    constructor(id) {
+        this.id = id;
+        this.roleKind = roleKindFromId(id);
+        this.in = newVertexSet();
+        this.out = newVertexSet();
+    }
+
+    // Poor mans polymorphism -- it'd be cool to have a toNodeAttributes here,
+    // but that seems too highly coupled to the UI code.  As it stands, the UI code
+    // decides how to create node attributes by checking this property.
+    isSingle() {
+        throw new Error('isSingle is abstract');
+    }
+
+    /**
+     * Return true if this vertex is connected to any others.
+     * @return {boolean}
+     */
+    isConnected() {
+        return this.in.length != 0 || this.out.length != 0;
+    }
+
+
+    /**
+     * Connects an outbound edge from `this` to `child`.  This method
+     * also creates the inbound edge from `child` to `this`, and is idempotent.
+     * @param child {BaseVertex}
+     */
+    addChild(child) {
+        if(child === undefined){
+            console.error('tried adding undefined child to ' + this.toString());
+            return;
+        }
+        child.in.add(this);
+        this.out.add(child);
+    }
+
+
+    /**
+     * Connects an outbound edge from `parent` to `this`.  This method
+     * also creates the inbound edge from `this` to `parent`, and is idempotent.
+     * @param parent {BaseVertex}
+     */
+    addParent(parent) {
+        if(parent === undefined){
+            console.error('tried adding undefined parent to ' + this.toString());
+            return;
+        }
+        parent.out.add(this);
+        this.in.add(parent);
+    }
+
+    /**
+     * The inverse of `addChild`.
+     * @param child {BaseVertex}
+     */
+    removeChild(child) {
+        this.out.delete(child);
+        child.in.delete(this);
+    }
+
+    /**
+     * The inverse of `addParent`
+     * @param parent {BaseVertex}
+     */
+    removeParent(parent) {
+        parent.out.delete(this);
+        this.in.delete(parent);
+    }
+
+    /**
+     * Disconnect this vertex from all adjacent vertices.
+     */
+    unlink() {
+        // work on copies because we'll be modifying both.
+        var parents = this.in.toArray(),
+            children = this.out.toArray();
+        parents.forEach((p) => p.removeChild(this));
+        children.forEach((c) => c.removeParent(this));
+        // we have to do this to avoid a weird case when a list of
+        // vertices is being unlinked in an arbitrary order.
+        this.in.clear();
+        this.out.clear();
+    }
+
+    /**
+     * During collapse and expand operations, we need a simple way to
+     * replace connections to single vertices that have been collapsed into
+     * multi vertices to those multi vertices.  We do this by constructing
+     * a map from vertex ids to the actual vertex that will represent that
+     * id in the final collapsed or expanded graph.
+     *
+     * @param idToActual {{String: BaseVertex}}
+     */
+    reconnectWith(idToActual){
+        var parentIds = _.map(this.in.toArray(), (v) => v.id),
+            childIds = _.map(this.out.toArray(), (v) => v.id);
+        this.in.clear();
+        this.out.clear();
+        parentIds.forEach((pId) => this.addParent(idToActual[pId]));
+        childIds.forEach((cId) => this.addChild(idToActual[cId]));
+    }
+
+    // abstract and no op.  Called to start collapsing
+    unlinkMembers() {
+        /* NOOP */
+    }
+
+    // called to finish collapsing -- no op in the base class
+    replaceMembers() {
+        /** NOOP */
+    }
+
+    /**
+     * Two vertices are the same if their in and out are the same
+     * and they have the same role kind.
+     * @param other {BaseVertex}
+     * @return {boolean}
+     */
+    equivalent(other) {
+        return this.roleKind === other.roleKind &&
+            this.in.equals(other.in) &&
+            this.out.equals(other.out);
+    }
+}
+
+
+/**
+ * A vertex representing a single Conjur resource.
+ */
+class SingleVertex extends BaseVertex {
+    constructor(id) {
+        super(id);
+    }
+
+    isSingle() {
+        return true;
+    }
+
+    toString() {
+        return `V[${this.id}: in:${this.in.length} out:${this.out.length}]`;
+    }
+}
+
+/**
+ * A vertex representing a set of equivalent Conjur resources.
+ */
+class MultiVertex extends BaseVertex {
+    constructor(members) {
+        const initialMember = members[0];
+
+        super(nextId('mv-' + initialMember.roleKind + '-'));
+        this.roleKind = initialMember.roleKind;
+
+        // Don't connect to these vertices yet
+        this.pendingIn = initialMember.in.toArray();
+        this.pendingOut = initialMember.out.toArray();
+
+
+        // Our members.
+        this.members = newVertexSet();
+        this.members.addEach(members);
+    }
+
+    isSingle() {
+        return false;
+    }
+
+    /**
+     * Something very wrong is happening if this is called.  Log the
+     * error and return false.
+     * @param o {BaseVertex}
+     * @returns {boolean}
+     */
+    equivalent(o) {
+        console.error(`called equivalent(${o.toString()} on MultiVertex ${this.toString()}`);
+        return false;
+    }
+
+    reconnectWith(idToActual){
+        var parentIds = _.map(this.pendingIn, (v) => v.id),
+            childIds = _.map(this.pendingOut, (v) => v.id);
+        this.in.clear();
+        this.out.clear();
+        parentIds.forEach((pId) => {
+            var p = idToActual[pId];
+            this.addParent(p)
+        });
+        childIds.forEach((cId) => {
+            var c = idToActual[cId];
+            this.addChild(c)
+        });
+    }
+
+    unlinkMembers() {
+        // disconnect all of our members from the graph
+        this.members.forEach((m) => m.unlink());
+        this.unlink();
+    }
+
+    replaceMembers() {
+        this.pendingIn.forEach((a) => a.addChild(this));
+        this.pendingOut.forEach((a) => a.addParent(this));
+    }
+
+    toString(){
+        var {roleKind, pendingIn, pendingOut, members:{length}} = this;
+        return `MV[${this.id}: ${length} ${roleKind}s in: ${this.in.length} out: ${this.out.length}]`
+    }
+}
+
+export function normalizeEdges(edges, invert=false) {
+    return edges.map(
+        (e) => {
+            if(_.isArray(e)){
+                e = {parent: e[0], child: e[1]};
+            }
+            return invert ? {parent: e.child, child: e.parent}
+                : e;
+        }
+    );
+}
+
+export function verticesFromEdges(edges, invert=false) {
+    edges = normalizeEdges(edges, invert);
+    var vs = {};
+    var vertex = (id) => {
+        return vs[id] || (vs[id] = new SingleVertex(id));
+    };
+    edges.forEach(
+        ({parent, child}) => {
+            const p = vertex(parent),
+                c = vertex(child);
+            p.addChild(c); // connects both.
+        }
+    );
+    return Object.values(vs);
+}
+
+export function edgesFromVertices(vertices) {
+    var edges = newEdgeSet();
+    vertices.forEach(
+        (v) => {
+            v.in.forEach(
+                (i) => edges.add({parent: i.id, child: v.id})
+            );
+            v.out.forEach(
+                (o) => edges.add({parent: v.id, child: o.id})
+            );
+        }
+    );
+
+    return edges.toArray();
+}
+
+export function collapse(vertices, cutoff = 10) {
+
+    // initially, everything is actually itself.
+    var idToActual = {};
+    vertices.forEach((v) => idToActual[v.id] = v);
+
+    var collapsed = [];
+    vertices.forEach(
+        (v) => {
+            var equiv = _.find(collapsed, (vs) => vs[0].equivalent(v));
+            if (!equiv) {
+                equiv = [v];
+                collapsed.push(equiv);
+            } else {
+                equiv.push(v);
+            }
+        }
+    );
+
+    function createMulti(vs){
+        var m = new MultiVertex(vs);
+        // replace the 'actual' for this id with 'm'.
+        vs.forEach(({id}) => idToActual[id] = m);
+        return m;
+    }
+
+    var result = _.reduce(
+            collapsed,
+            (accum, o) => o.length <= cutoff ? accum.concat(o) : accum.concat([createMulti(o)]),
+            []
+        );
+
+    // Now we can replace in/out edges with their actual vertex.
+    var survivors = newVertexSet();
+    survivors.addEach(Object.values(idToActual));
+
+
+    survivors.forEach(
+        (v) => {
+            v.reconnectWith(idToActual);
+        }
+    );
+
+    return survivors.toArray();
+}
+
+export function newEdgeSet(){
+    return new Set(null, // members
+        (a, b) => a.parent == b.parent && a.child == b.child, // equals
+        (a) => `${a.parent}->${a.child}` // hash
+    );
+}
+
+export function isInternal(roleid) {
+    return roleid.indexOf('@') >= 0;
+}
+
+export var __test__ = {
+    roleKindFromId,
+    newVertexSet,
+    MultiVertex,
+    SingleVertex,
+    nextId
+};

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

@@ -0,0 +1,3 @@
+var genericListFactory = require('../generic/list_factory');
+
+export default genericListFactory('group', 'Groups');

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

@@ -0,0 +1,153 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
+    TabPane = require('react-bootstrap/lib/TabPane');
+
+var TabMixin = require('../generic/tab_mixin'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    RoleLink = require('../generic/role_link'),
+    RoleGraph = require('../graph/graph');
+
+import {getTabname} from '../../utils';
+
+var AuditTable = require('../audit/table');
+
+import {compact, map} from 'lodash';
+
+export default React.createClass({
+    displayName: 'GroupView',
+
+    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 = 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
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var members = map(this.state.members, function(member) {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={member.member} />
+              </li>
+            );
+        });
+
+        // TODO: refactor (common code should go to mixins)
+        // TODO: memberships
+        // TODO: controls for members management
+        var overviewTab = (
+          <TabPane eventKey="overview" tab="Overview">
+            <dl className="dl-horizontal">
+              <dt>Created by</dt>
+              <dd><RoleLink id={this.state.group.userid} /></dd>
+
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.state.owner} /></dd>
+            </dl>
+          </TabPane>
+        );
+
+        var membersTab = (
+          <TabPane eventKey="members" tab={getTabname('Members', members)}>
+            <ul className="list-group">
+              {members}
+            </ul>
+          </TabPane>
+        );
+
+        var ownedTab = this.ownedTab(),
+            membershipsTab = this.membershipsTab(this.state.group.roleid),
+            permissionsTab = this.permissionsTab(this.state.group.roleid),
+            annotationsTab = this.annotationsTab();
+
+        var auditTab = (
+          <TabPane eventKey="audit" tab="Recent Activity">
+            <div className="audit auditGroup">
+              <AuditTable events={this.state.audit}
+                          caption=""
+                          isLoading={this.state.loading.audit} />
+            </div>
+          </TabPane>
+        );
+
+        var tabs = compact([
+            overviewTab,
+            membersTab,
+            ownedTab,
+            membershipsTab,
+            permissionsTab,
+            annotationsTab,
+            auditTab
+        ]);
+
+        var elems = [
+            {url: '/ui/groups', text: 'Groups'},
+            {url: '', text: this.state.group.id},
+            {url: '', text: '(owned by ' + this.state.group.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-group">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <h2>Group {this.state.group.id}</h2>
+            <TabbedArea defaultActiveKey="overview">
+              {tabs}
+            </TabbedArea>
+            <hr />
+            <RoleGraph height="400"
+                       kind="group"
+                       id={this.state.id} />
+          </div>
+        );
+    }
+});