conjur-asset-ui 1.4.2 → 1.6.0

data/app/src/components/generic/list_factory.js

@@ -0,0 +1,41 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var GenericList = require('./list'),
+    Refresh = require('../refresh/refresh');
+
+export default function listFactory(kind, title) {
+    return React.createClass({
+        displayName: title + 'List',
+
+        mixins: [FluxMixin, StoreWatchMixin('resources')],
+
+        getStateFromFlux() {
+            var resources = this.getFlux().store('resources').getResources(kind);
+
+            return {
+                loading: resources.loading,
+                error: resources.error,
+                resources: resources.data
+            };
+        },
+
+        render() {
+            return (
+              <div className="variableBox">
+                <div className="variableList">
+                  <h2>{title}<Refresh show={this.state.loading} /></h2>
+                  <GenericList data={{kind: kind, members: this.state.resources}} />
+                </div>
+              </div>
+            );
+        },
+
+        componentDidMount() {
+            this.getFlux().actions.resources.load(kind);
+        }
+    });
+}

data/app/src/components/generic/resource_link.js

@@ -0,0 +1,64 @@
+var React = require('react'),
+    Link = require('react-router').Link;
+
+import {includes} from 'lodash';
+
+/**
+ Renders a link to the resource with id given by this.props.data.
+
+ Includes a slick little icon for the following kinds:
+ TODO which kinds?
+ **/
+export default React.createClass({
+    displayName: 'ResourceLink',
+
+    knownTypes: ['user', 'group', 'layer', 'host', 'variable', 'policy'],
+
+    render() {
+        var resourceId = this.props.id;
+
+        // guard against misuse such as https://github.com/conjurinc/conjur-asset-ui/issues/78
+        if (typeof resourceId === 'undefined') {
+            return (
+              <em>undefined</em>
+            );
+        }
+
+        var tokens = resourceId.split(':'),
+            kind = tokens[1],
+            id = tokens[tokens.length - 1],
+            text = this.props.text || id;
+
+        var resourceIsKnown = includes(this.knownTypes, kind),
+            classes = ['resource-link'];
+
+        if (!this.props.noIcon) {
+            if (resourceIsKnown) {
+                classes.push(kind);
+            } else {
+                classes.push('abstract');
+
+                if (text === id) {
+                    text = [kind, text].join(':'); // prepend kind to id
+                }
+            }
+        } else if (text === id) {
+            text = [kind, text].join(':'); // prepend kind to id
+        }
+
+        if (resourceIsKnown) {
+            return (
+              <Link to={kind} params={{id: window.encodeURIComponent(id)}}
+                    className={classes.join(' ')}>
+                {text}
+              </Link>
+            );
+        } else {
+            return (
+              <a href="#" className={classes.join(' ')}>
+                {text}
+              </a>
+            );
+        }
+    }
+});

data/app/src/components/generic/role_link.js

@@ -0,0 +1,66 @@
+var React = require('react'),
+    Router = require('react-router');
+
+import {includes} from 'lodash';
+
+var Link = Router.Link;
+
+/** render a link to the role represented by this.props.id
+ Example: <RoleLink id='ci:user:jon'/>
+ */
+export default React.createClass({
+    displayName: 'RoleLink',
+
+    knownTypes: ['user', 'group', 'layer', 'host', 'policy'],
+
+    render() {
+        // guard against misuse such as https://github.com/conjurinc/conjur-asset-ui/issues/78
+        if (typeof this.props.id === 'undefined') {
+            return (
+              <em>undefined</em>
+            );
+        }
+
+        var tokens = this.props.id.split(':'),
+            kind = tokens[1],
+            id = tokens[tokens.length-1];
+
+        if (tokens.length === 1) { // just username
+            kind = 'user';
+            id = tokens[0];
+        }
+
+        var kindIsKnown = includes(this.knownTypes, kind),
+            text = id,
+            classes = ['role-link'];
+
+        if (!this.props.noIcon) {
+            if (kindIsKnown) {
+                classes.push(kind);
+            } else {
+                classes.push('abstract'); // we have no picture for abstract role yet
+
+                if (text === id) {
+                    text = [kind, text].join(':'); // prepend kind to id
+                }
+            }
+        } else if (text === id) {
+            text = [kind, text].join(':'); // prepend kind to id
+        }
+
+        if (kindIsKnown) {
+            return (
+              <Link to={kind} params={{id: window.encodeURIComponent(id)}}
+                    className={classes.join(' ')} style={this.props.style}>
+                {text}
+              </Link>
+            );
+        } else {
+            return (
+              <a href="#" className={classes.join(' ')} style={this.props.style}>
+                {text}
+              </a>
+            );
+        }
+    }
+});

data/app/src/components/generic/tab_mixin.js

@@ -0,0 +1,146 @@
+var React = require('react');
+
+var TabPane = require('react-bootstrap/lib/TabPane');
+
+var OwnedResources = require('../owned_resources/owned_resources'),
+    RoleLink = require('./role_link'),
+    Annotations = require('./annotations'),
+    Permissions = require('../permissions/permissions');
+
+import {getTabname} from '../../utils';
+import {includes} from 'lodash';
+
+// we can't create custom TabPanes as components,
+// because they won't be recognized by TabbedArea as tabs
+// that's why we just generalize their constructors
+export default {
+    containsOwnedItems() {
+        return (
+            this.state.owned &&
+                this.state.owned.length &&
+                this.state.owned.length > 0
+        );
+    },
+
+    ownedIds() {
+        if (this.containsOwnedItems()) {
+            return this.state.owned.map(function(ownedItem) {
+                return ownedItem.id;
+            });
+        }
+
+        return [];
+    },
+
+    ownedTab() {
+        if (this.containsOwnedItems()) {
+            var result = (
+              <TabPane eventKey="owned"
+                       tab={getTabname('Owned resources', this.state.owned)}>
+                <OwnedResources owned={this.state.owned} tabview={true} />
+              </TabPane>
+            );
+
+            return result;
+        }
+
+        return null;
+    },
+
+    containsNontrivialRoles() {
+        return (
+            this.state.roles &&
+                this.state.roles.length &&
+                this.state.roles.length > 1
+        );
+    },
+
+    externalRoles(ownId) {
+        if (!this.containsNontrivialRoles()) {
+            return [];
+        }
+
+        var ownedIds = this.ownedIds();
+
+        return this.state.roles.filter(function(roleid) {
+            // do not show themself
+            return roleid !== ownId;
+        }).filter(function(roleid) {
+            // do not show internal roles
+            return roleid.split(':')[1] !== '@';
+        }).filter(function(roleid) {
+            // do not show owned groups
+            return !includes(ownedIds, roleid);
+        });
+    },
+
+    membershipsTab(ownId) {
+        if (!this.containsNontrivialRoles()) {
+            return null;
+        }
+
+        var membershipLinks = this.externalRoles(ownId)
+                .sort(function(a, b) {
+                    return a.toLowerCase().localeCompare(b.toLowerCase());
+                })
+                .map(function(roleid) {
+                    return (
+                      <li className="list-group-item list-group-item-noborder">
+                        <RoleLink id={roleid} />
+                      </li>
+                    );
+                });
+
+        if (membershipLinks.length === 0) {
+            return null;
+        }
+
+        var result = (
+          <TabPane eventKey="memberships"
+                   tab={getTabname('Explicit memberships', membershipLinks)}>
+            <ul className="list-group">
+              {membershipLinks}
+            </ul>
+          </TabPane>
+        );
+
+        return result;
+    },
+
+    containsAnnotations() {
+        return (
+            this.state.annotations &&
+                this.state.annotations.length &&
+                this.state.annotations.length > 0
+        );
+    },
+
+    annotationsTab() {
+        if (!this.containsAnnotations()) {
+            return null;
+        }
+
+        var result = (
+          <TabPane eventKey="annotations"
+                   tab={getTabname('Annotations', this.state.annotations)}>
+            <Annotations annotations={this.state.annotations} />
+          </TabPane>
+        );
+
+        return result;
+    },
+
+    permissionsTab(roleid) {
+        var result = (
+          <TabPane eventKey="permissions" tab="Permissions held">
+            <Permissions owned={this.state.owned}
+                         roles={this.state.roles}
+                         role={roleid}
+                         resources={this.state.resources}
+                         tabview={true} />
+          </TabPane>
+        );
+
+        return result;
+    }
+};

data/app/src/components/generic/time.js

@@ -0,0 +1,32 @@
+var React = require('react'),
+    moment = require('moment');
+
+// render a <time> tag. props.timestamp should be a timestamp
+// that moment can parse, props.format should be one of the
+// format strings accepted by moment (optional).
+export default React.createClass({
+    displayName: 'Time',
+
+    render() {
+        var timestamp = this.props.timestamp,
+            tsFormat = this.props.tsFormat || '',
+            format = this.props.format || 'lll',
+            m = moment(timestamp, tsFormat),
+            date;
+
+        switch (this.props.relative) {
+        case 'time from now':
+            date = m.fromNow();
+            break;
+        case 'calendar time':
+            date = m.calendar();
+            break;
+        default:
+            date = m.format(format);
+        }
+
+        return (
+          <time dateTime={m.format()}>{date}</time>
+        );
+    }
+});

data/app/src/components/graph/__tests__/collapse-test.js

@@ -0,0 +1,133 @@
+/* global jest, describe, it, expect */
+"use strict";
+
+
+jest.dontMock('lodash');
+jest.dontMock('collections/set');
+jest.dontMock('../helpers');
+
+var {find} = require('lodash');
+var Set = require('collections/set');
+var {collapse, edgesFromVertices, __test__:{SingleVertex}} = require('../helpers');
+
+/*
+    The graph has the following structure:
+
+    user:admin -> group:a group:b group:c group:d user:a user:b layer:e
+    group:a, group:b, group:c -> user:c, user:d
+    group:d -> user:e
+    user:c, user:d -> user:e
+
+    When collapsed it should look like
+
+    user:admin -> [3 groups (a,b,c)], group:d, [2 users (a,b)], layer:e
+    [3 groups(a,b,c)] -> [2 users(c,d)]
+    [2 users(c,d)] -> user:e
+    group:d -> user:e
+
+ */
+
+
+// helpers
+function shouldContain(set_, predicate){
+    expect(find(set_.toArray(), predicate)).toBe(true);
+}
+
+function shouldHaveChild(vertex, predicate){
+    shouldContain(vertex.out, predicate);
+}
+
+function shouldHaveParent(vertex, predicate){
+    shouldContain(vertex.in, predicate);
+}
+
+function shouldContainMultis(set_, idLists){
+    idLists.forEach(
+        (idList) => {
+            expect(find(set_.toArray(),
+                (v) => {
+                    if(v.isSingle()) return false;
+                    return v.members.equals(new Set(idList));
+                }
+            )).toBeTruthy()
+        }
+    );
+}
+
+function shouldContainSingles(set_, ids){
+    ids.forEach(
+        (id) => {
+            expect(set_.has(new SingleVertex(id))).toBeTruthy();
+        }
+    )
+}
+
+class GraphBuilder {
+    constructor(){
+        this._vs = {}; // maps id to vertex
+    }
+
+    connect(parentIds, childIds){
+        parentIds = typeof parentIds === 'string' ? [parentIds] : parentIds;
+        childIds = typeof childIds === 'string' ? [childIds] : childIds;
+        parentIds.forEach(
+            (pId) => {
+                var p = this._vertex(pId);
+                childIds.forEach(
+                    (cId) => {
+                        p.addChild(this._vertex(cId));
+                    }
+                );
+            }
+        );
+        return this;
+    }
+
+    vertices(){
+        return Object.values(this._vs);
+    }
+
+    edges(){
+        return edgesFromVertices(this.vertices());
+    }
+
+    _vertex(id){
+        return this._vs[id] || (this._vs[id] = new SingleVertex(id));
+    }
+}
+
+
+describe("collapsing a simple graph", ()=>{
+    var initialGraph = new GraphBuilder()
+        .connect('user:admin', ['group:a', 'group:b', 'group:c', 'group:d',
+            'user:a',  'user:b',
+            'layer:e'])
+        .connect(['group:a', 'group:b', 'group:c'], ['user:c', 'user:d'])
+        .connect('group:d', 'user:e')
+        .connect(['user:c', 'user:d'], 'user:e')
+        .vertices();
+
+    var collapsed = collapse(initialGraph, 1);
+})
+
+
+//console.dir(collapsed.map((v) => v.toString()));
+//collapsed.forEach(
+//    (v) => {
+//        console.log('v = ' + v.toString());
+//        console.log('   in: ');
+//        v.in.forEach(
+//            (vIn) => {
+//                console.log('       ' + vIn.toString())
+//            }
+//        );
+//        console.log('   out: ');
+//        v.out.forEach(
+//            (vOut) => {
+//                console.log('       ' + vOut.toString())
+//            }
+//        );
+//        console.log('-----------------');
+//        console.log('');
+//    }
+//);