conjur-asset-ui-beta 1.5.0

data/app/src/components/owned_resources/owned_resources.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+
+var OwnedResourcesBox = require('./owned_resources_box');
+
+var OwnedResourcesSummary = React.createClass({
+    displayName: 'OwnedResourcesSummary',
+
+    render() {
+        var expand = '';
+
+        if (this.props.length > 0) {
+            expand = (
+              <span>
+                <br/>
+                <span>
+                  <a onClick={this.props.handler}>Show all &raquo;</a>
+                </span>
+              </span>
+            );
+        }
+
+        var message = '';
+
+        if (this.props.length === 0) {
+            message = 'none';
+        } else {
+            message = '' + this.props.length + ' things';
+        }
+
+        return (
+          <div>
+            <span>
+              {message}
+            </span>
+            {expand}
+          </div>
+        );
+    }
+});
+
+module.exports = React.createClass({
+    displayName: 'OwnedResources',
+
+    getInitialState() {
+        return {
+            expanded: false
+        };
+    },
+
+    toggle(e) {
+        e.preventDefault();
+
+        this.setState({expanded: !this.state.expanded});
+    },
+
+    render() {
+        var content = null;
+
+        if (this.state.expanded || this.props.tabview) {
+            content = (
+              <OwnedResourcesBox resources={this.props.owned}
+                                 handler={this.toggle}
+                                 tabview={this.props.tabview} />
+            );
+
+        } else {
+            content = (
+              <OwnedResourcesSummary length={this.props.owned.length}
+                                     handler={this.toggle} />
+            );
+        }
+
+        var ownedheader = this.props.tabview ? '': (<h3>Owned assets</h3>);
+
+        return (
+          <section className="owned row">
+            {ownedheader}
+            <div id="ownedDetails" className="col-xs-6">
+              {content}
+            </div>
+          </section>
+        );
+    }
+});

data/app/src/components/owned_resources/owned_resources_box.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var React = require('react');
+
+var utils = require('../../utils');
+
+var intersection = require('lodash/array/intersection'),
+    uniq = require('lodash/array/uniq'),
+    capitalize = require('lodash/string/capitalize');
+
+var ResourceLink = require('../generic/resource_link');
+
+var knownTypes = ['user', 'group', 'layer', 'host', 'variable', 'policy'];
+
+module.exports = React.createClass({
+    displayName: 'OwnedResourcesBox',
+
+    getInitialState() {
+        return {
+            filter: ''
+        };
+    },
+
+    handleChange(e) {
+        e.preventDefault();
+
+        this.setState({filter: e.target.value});
+    },
+
+    render() {
+        var filters = [];
+
+        if (!this.props.resources) {
+            return (
+              <span>None</span>
+            );
+        }
+
+        var items = this.props.resources
+                .sort(function(a, b) {
+                    // TODO: sort by kind with custom weights, by id, by creation date
+                    // automatically gives sort by kind, id
+                    return a.id.toLowerCase().localeCompare(b.id.toLowerCase());
+                }).map(function(resource) {
+                    var kind = resource.id.split(':')[1];
+
+                    filters.push(kind);
+
+                    if ((this.state.filter === '') ||
+                        (this.state.filter !== 'other' && this.state.filter === kind) ||
+                        (this.state.filter === 'other' &&
+                         intersection([kind], knownTypes).length === 0)) {
+
+                        return (
+                          <li className="list-group-item list-group-item-noborder">
+                            <ResourceLink id={resource.id} />
+                          </li>
+                        );
+                    }
+
+                    return '';
+                }.bind(this));
+
+        var toggleButton = '';
+
+        if (!this.props.tabview) {
+            toggleButton = (
+              <div className="hide-all">
+                <a onClick={this.props.handler}>Hide all &laquo;</a>
+              </div>
+            );
+        }
+
+        var filterSelect = '';
+
+        if (this.props.resources.length > 9 || this.state.filter !== '') {
+            // TODO: sort, when done with previous TODO
+            filterSelect = intersection(uniq(filters, true), knownTypes).map(function(f) {
+                return (
+                    <option value={f}>{capitalize(utils.pluralize(f))}</option>
+                );
+            });
+
+            filterSelect = (
+              <div className="form-group row">
+                <div className="col-xs-3">
+                  <select className="form-control" type="select" ref="filter"
+                          value={this.state.filter} onChange={this.handleChange}>
+                    <option value="">Show all</option>
+                    {filterSelect}
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+              </div>
+            );
+        }
+
+        return (
+          <div className="owned">
+            {toggleButton}
+            {filterSelect}
+            <ul className="list-group">{items}</ul>
+          </div>
+        );
+    }
+});

data/app/src/components/permissions/permissions.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var React = require('react'),
+    cx = require('react/lib/cx');
+
+var filter = require('lodash/collection/filter');
+
+var pluck = require('lodash/collection/pluck'),
+    includes = require('lodash/collection/includes');
+
+var PermissionsTable = require('./permissions_table');
+
+var PermissionsSummary = React.createClass({
+    displayName: 'PermissionsSummary',
+
+    render() {
+        var expand = '';
+
+        if (this.props.length > 0) {
+            expand = (
+              <span>
+                <br/>
+                <span>
+                  <a  onClick={this.props.expandHandler}>Show all &raquo;</a>
+                </span>
+              </span>
+            );
+        }
+
+        return (
+          <div>
+            <span>
+              {this.props.length} permissions
+            </span>
+            {expand}
+          </div>
+        );
+    }
+});
+
+module.exports = React.createClass({
+    displayName: 'Permissions',
+
+    getDefaultProps() {
+        return {
+            resources: [],
+            roles: []
+        };
+    },
+
+    getInitialState() {
+        return {
+            expand: false
+        };
+    },
+
+    expand() {
+        this.setState({expand: true});
+    },
+
+    collapse() {
+        this.setState({expand: false});
+    },
+
+    setPermissions(_resources) {
+        /**
+         * Filter out owned resources.
+         * Filter out permissions on resources which are not held by the current role.
+         */
+        var resources;
+
+        if (this.props.owned) {
+            var ownedIds = pluck(this.props.owned, 'id');
+
+            resources = filter(_resources, function(r) {
+                return ! includes(ownedIds, r.id);
+            });
+        } else {
+            resources = _resources;
+        }
+
+        var roleSet = {};
+
+        this.props.roles.forEach(function(r) {
+            roleSet[r] = r;
+        });
+
+        var cleanResources = filter(resources, function(item) {
+            // assets of 'secret' kind are internal
+            return item.id.split(':')[1] !== 'secret';
+        });
+
+        cleanResources.forEach(function(resource) {
+            var permissions = resource.permissions,
+                hasPermissions = [];
+
+            permissions.forEach(function(permission) {
+                if (roleSet.hasOwnProperty(permission.role)) {
+                    hasPermissions.push(permission);
+                }
+            });
+
+            resource.permissions = hasPermissions;
+        });
+
+        return cleanResources;
+    },
+
+    render() {
+        var resources = this.setPermissions(this.props.resources);
+
+        var content;
+
+        if (this.state.expand || this.props.tabview) {
+            content = (
+              <PermissionsTable resources={resources}
+                                hideHandler={this.collapse}
+                                tabview={this.props.tabview} />
+            );
+        } else {
+            content = (
+              <PermissionsSummary length={this.state.resources.length}
+                                  expandHandler={this.expand} />
+            );
+        }
+
+        var classes = cx({
+            permissions: true,
+            loading: false
+        });
+
+        var permissionsheader = this.props.tabview ? '' : (<h3>Permissions held</h3>);
+
+        return (
+          <section className={classes}>
+           {permissionsheader}
+           <div id="permissionDetails">
+             {content}
+           </div>
+         </section>
+        );
+    }
+});

data/app/src/components/permissions/permissions_table.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var React = require('react');
+
+var ResourceLink = require('../generic/resource_link'),
+    RoleLink = require('../generic/role_link');
+
+var sortBy = require('lodash/collection/sortBy'),
+    flatten = require('lodash/array/flatten');
+
+// Renders a permission as a tr
+var PermissionRow = React.createClass({
+    displayName: 'PermissionRow',
+
+    render() {
+        var p = this.props.data;
+
+        return (
+          <tr>
+            <td>{p.privilege}</td>
+            <td>{p.grant_option ? 'yes' : 'no'}</td>
+            <td><RoleLink id={p.grantor}/></td>
+          </tr>
+        );
+    }
+});
+
+module.exports = React.createClass({
+    displayName: 'PermissionsTable',
+
+    render() {
+        var rows = [];
+
+        var resources = sortBy(this.props.resources, function(r) {
+            return r.id; // this way it will be sorting by (kind, id)
+        });
+
+        resources.forEach(function(r) {
+            var rowspan = r.permissions.length + 1,
+                parts = r.id.split(':'),
+                kind = parts[1]; // ignore env?
+
+            var cells = [
+                (<td rowSpan={rowspan}> <ResourceLink id={r.id}/> </td>),
+                (<td rowSpan={rowspan}> {kind} </td>)
+            ];
+
+            if (rowspan === 1) {
+                cells.push(<td colSpan="3"> full permissions </td>);
+            }
+
+            rows.push(
+                (<tr key={r.id}>{cells}</tr>)
+            );
+
+            if (rowspan > 1) {
+                rows.push(r.permissions.map(function(p) {
+                    return (
+                      <PermissionRow data={p} />
+                    );
+                }));
+            }
+
+        });
+
+        rows = flatten(rows);
+
+        var showhidelink = (
+          <div>
+            <a onClick={this.props.hideHandler}>Hide all &laquo;</a>
+          </div>
+        );
+
+        if (this.props.tabview) {
+            showhidelink = '';
+        }
+
+        if (rows.length === 0) {
+            return (
+              <span>None</span>
+            );
+        }
+
+        return (
+          <div>
+            {showhidelink}
+            <table>
+              <thead>
+                <tr>
+                  <th> Resource </th>
+                  <th> Kind </th>
+                  <th> Privilege </th>
+                  <th> Can Grant? </th>
+                  <th> Granted By </th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows}
+              </tbody>
+            </table>
+          </div>
+        );
+    }
+});

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

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