conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,101 @@
+var React = require('react');
+
+import {pluralize} from '../../utils';
+import {intersection, uniq, capitalize} from 'lodash';
+
+var ResourceLink = require('../generic/resource_link');
+
+var knownTypes = ['user', 'group', 'layer', 'host', 'variable', 'policy'];
+
+export default 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(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,138 @@
+var React = require('react'),
+    cx = require('react/lib/cx');
+
+import {filter, pluck, includes} from 'lodash';
+
+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>
+        );
+    }
+});
+
+export default 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,101 @@
+var React = require('react');
+
+var ResourceLink = require('../generic/resource_link'),
+    RoleLink = require('../generic/role_link');
+
+import {sortBy, flatten} from 'lodash';
+
+// 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>
+        );
+    }
+});
+
+export default 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,3 @@
+var genericListFactory = require('../generic/list_factory');
+
+export default genericListFactory('policy', 'Policies');

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

@@ -0,0 +1,107 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+import {compact} from 'lodash';
+
+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'),
+    RoleLink = require('../generic/role_link'),
+    AuditTable = require('../audit/table');
+
+export default React.createClass({
+    displayName: 'PolicyView',
+
+    mixins: [FluxMixin, StoreWatchMixin('policy', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.policy.load(state.id);
+        actions.resources.loadOne('policy', 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'),
+            data = flux.store('policy').getData(),
+            resource = flux.store('resources').getResource('policy', id);
+
+        var ret = {
+            id: id,
+            loading: data.loading,
+            resource: resource.data,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            owned: data.owned,
+            roles: data.roles,
+            resources: data.resources
+        };
+
+        ret.loading.resource = resource.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        //TODO: policy loader
+        //TODO in CLI: why not save text of policy as an annotation?
+        var overviewTab = (
+          <TabPane eventKey="overview" tab="Overview">
+            <dl className="dl-horizontal">
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.state.owner} /></dd>
+            </dl>
+          </TabPane>
+        );
+
+        var permissionsTab = this.permissionsTab(this.state.resource.id),
+            membershipsTab = this.membershipsTab(this.state.resource.id),
+            annotationsTab = this.annotationsTab(),
+            ownedTab = this.ownedTab();
+
+        var auditTab = (
+          <TabPane eventKey="audit" tab="Recent Activity">
+            <div className="audit auditGroup">
+              <AuditTable roles={[this.state.resource.id]} tabview={true} />
+            </div>
+          </TabPane>
+        );
+
+        var tabs = compact([
+            overviewTab,
+            ownedTab,
+            membershipsTab,
+            permissionsTab,
+            annotationsTab,
+            auditTab
+        ]);
+
+        return (
+          <div className="policy">
+            <h2>Policy {this.state.resource.identifier}</h2>
+            <TabbedArea defaultActiveKey="overview">
+              {tabs}
+            </TabbedArea>
+          </div>
+        );
+    }
+});