conjur-asset-ui-beta 1.5.0

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react'),
+    Link = require('react-router').Link,
+    includes = require('lodash/collection/includes');
+
+/** render a link to the role represented by this.props.id
+ Example: <RoleLink id='ci:user:jon'/>
+ */
+module.exports = 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 (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,148 @@
+'use strict';
+
+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'),
+    utils = require('../../utils');
+
+var includes = require('lodash/collection/includes');
+
+// 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
+module.exports = {
+    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={utils.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={utils.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={utils.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,34 @@
+'use strict';
+
+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).
+module.exports = 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/group/list.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var genericListFactory = require('../generic/list_factory');
+
+module.exports = genericListFactory('group', 'Groups');

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin,
+    Router = require('react-router');
+
+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'),
+    utils = require('../../utils');
+
+var AuditTable = require('../audit/table');
+
+var compact = require('lodash/array/compact'),
+    map = require('lodash/collection/map');
+
+module.exports = React.createClass({
+    displayName: 'GroupView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'group', 'resources'), Router.State, TabMixin],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            id = unescape(this.getParams().id),
+            audit = flux.store('audit').getEventFor('group', id),
+            data = flux.store('group').getData(),
+            resource = flux.store('resources').getResource('group', id);
+
+        var ret = {
+            loading: data.loading,
+            group: data.group,
+            owned: data.owned,
+            roles: data.roles,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            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={utils.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>
+          </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

@@ -0,0 +1,93 @@
+'use strict';
+
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'HostActivity',
+
+    mixins: [ChartHelperMixin],
+
+    getDefaultProps() {
+        return {
+            options: {
+                legend: {
+                    logins: 'Logins to host',
+                    sudo: 'Sudo calls on host',
+                    reads: 'Secret reads by host',
+                    updates: 'Secret updates by host',
+                    warnings: 'Warnings'
+                },
+                axis: {
+                    y: {
+                        label: 'Value'
+                    }
+                }
+            }
+        };
+    },
+
+    getDefaultItem() {
+        return {
+            logins: 0,
+            sudo: 0,
+            reads: 0,
+            updates: 0,
+            warnings: 0
+        };
+    },
+
+    getEventType(e) {
+        if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
+            if (e.action === 'sudo' && e.allowed === true) {
+                return 'sudo';
+            }
+
+            if (e.action === 'login' && e.allowed === true) {
+                return 'logins';
+            }
+        }
+
+        if (e.hasOwnProperty('error') || e.allowed === false) {
+            return 'warnings';
+        }
+
+        if (e.action === 'check' &&
+            e.hasOwnProperty('allowed') &&
+            e.allowed === true) {
+
+            if (e.hasOwnProperty('role') && e.role === this.props.roleid) {
+                if (e.hasOwnProperty('resource') &&
+                    e.resource.split(':')[1] === 'variable') {
+
+                    if (e.privilege === 'update') {
+                        return 'updates';
+                    }
+
+                    if (e.privilege === 'execute') {
+                        return 'reads';
+                    }
+                }
+            }
+        }
+
+        return null;
+    },
+
+    render() {
+        var data = this.getData(this.props.audit);
+
+        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>
+          </div>
+        );
+    }
+});