conjur-asset-ui-beta 1.5.0

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

@@ -0,0 +1,252 @@
+'use strict';
+
+var React = require('react'),
+    filter = require('lodash/collection/filter'),
+    take = require('lodash/array/take'),
+    map = require('lodash/collection/map'),
+    includes = require('lodash/collection/includes'),
+    isString = require('lodash/lang/isString');
+
+var defaultNumberOfElements = 3;
+
+// TODO: refactor to avoid this copypaste from audit.js
+var knownRolsourceTypes = ['user', 'group', 'host', 'layer', 'policy'];
+
+var AuditEntry = require('../audit/entry'),
+    ResourceLink = require('./resource_link'),
+    Time = require('./time'),
+    Refresh = require('../refresh/refresh');
+
+var FoldableAuditSection = React.createClass({
+    displayName: 'FoldableAuditSection',
+
+    statics: {
+        updates(audit, isLoading) {
+            isLoading = isLoading || false;
+
+            var filter = function(e) {
+                return (
+                    e.action === 'check' && e.privilege === 'update' &&
+                        !(e.hasOwnProperty('error') ||
+                          e.allowed === false)
+                );
+            };
+
+            var getItem = function(e) {
+                var user = [
+                    (<Time timestamp={e.timestamp} relative="time from now" />),
+                    (<ResourceLink id={e.user} />)
+                ];
+
+                if (e.user !== e.acting_as) {
+                    user.push(' acting as ');
+                    user.push(<ResourceLink id={e.acting_as} />);
+                }
+
+                return user;
+            };
+
+            return (
+                <FoldableAuditSection audit={audit} title="Updates"
+                                      filter={filter} getItem={getItem}
+                                      openMsg="See full updates history"
+                                      isLoading={isLoading} />
+            );
+        },
+
+        warnings(audit, isLoading) {
+            isLoading = isLoading || false;
+
+            var filter = function(e) {
+                return (
+                    e.hasOwnProperty('error') || e.allowed === false
+                );
+            };
+
+            var getItem = function(e) {
+                return AuditEntry(e);
+            };
+
+            return (
+              <FoldableAuditSection audit={audit} title="Warnings"
+                                    filter={filter} getItem={getItem}
+                                    openMsg="See full warnings history"
+                                    isLoading={isLoading} />
+            );
+        },
+
+        changes(audit, isLoading) {
+            isLoading = isLoading || false;
+
+            var filter = function(e) {
+
+                if (e.action === 'check') {
+                    return false;
+                }
+
+                if (e.kind === 'audit' || e.kind === 'annotation') {
+                    return false;
+                }
+
+                // TODO: refactor code to avoid copypaste from audit.js
+                // remove internal resources creation
+                if (isString(e.role) && (e.role.split(':')[1] === '@')) {
+                    return false;
+                }
+
+                if (isString(e.resource) && (e.resource.split(':')[1] === '@')) {
+                    return false;
+                }
+
+                if (isString(e.resource) && (e.resource.split(':')[1] === 'secret')) {
+                    return false;
+                }
+
+                if (isString(e.grantee) && (e.grantee.split(':')[1] === '@')) {
+                    return false;
+                }
+
+                // hide automated creation of roles corresponding to resources of known type
+                if ((e.kind === 'role') && (e.action === 'create')) {
+                    var rolekind = e.role.split(':')[1];
+
+                    if (includes(knownRolsourceTypes, rolekind)) {
+                        return false;
+                    }
+                }
+
+                // anything else is permission change
+                return true;
+            };
+
+            var getItem = function(e) {
+                return AuditEntry(e);
+            };
+
+            return (
+              <FoldableAuditSection audit={audit} title="Recent permission model changes"
+                                    filter={filter} getItem={getItem}
+                                    openMsg="See full history of permission model changes"
+                                    isLoading={isLoading} />
+            );
+        }
+    },
+
+    propTypes: {
+        audit: React.PropTypes.arrayOf(React.PropTypes.object),
+        filter: React.PropTypes.func,
+        getItem: React.PropTypes.func,
+        howMuch: React.PropTypes.number,
+        title: React.PropTypes.string,
+        openMsg: React.PropTypes.string,
+        isLoading: React.PropTypes.bool
+    },
+
+    defaultFilter(e) {
+        return typeof e === 'object';
+    },
+
+    defaultGetItem(e) {
+        return e.id;
+    },
+
+    getDefaultProps() {
+        return {
+            audit: [],
+            filter: this.defaultFilter,
+            getItem: this.defaultGetItem,
+            howMuch: defaultNumberOfElements,
+            title: 'Audit Section',
+            openMsg: 'See full history',
+            isLoading: false
+        };
+    },
+
+    getInitialState() {
+        return {showAll: false};
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.setState({showAll: !this.state.showAll});
+    },
+
+    reverseChronology(a, b) {
+        if (a.timestamp < b.timestamp) {
+            return 1;
+        } else if (a.timestamp > b.timestamp) {
+            return -1;
+        } else {
+            return 0;
+        }
+    },
+
+    getItems() {
+        var items = filter(this.props.audit,
+                           this.props.filter)
+                .sort(this.reverseChronology),
+            className = [
+                'b-audit-section__item',
+                'list-group-item',
+                'list-group-item-noborder'
+            ].join(' ');
+
+        if (!this.state.showAll) {
+            items = take(items, this.props.howMuch);
+        }
+
+        return map(items, function(e) {
+            return (
+              <li className={className}
+                  key={'audit-entry-' + e.id}>
+                {this.props.getItem(e)}
+              </li>
+            );
+        }.bind(this));
+    },
+
+    render() {
+        var items = this.getItems(),
+            msg = this.state.showAll ?
+                'Show only top ' + (this.props.howMuch) :
+                this.props.openMsg,
+            empty = items.length === 0,
+            lessThan = items.length < (this.props.howMuch),
+            body = [
+              <h2 key="title">
+                {this.props.title}<Refresh show={this.props.isLoading} />
+              </h2>
+            ];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-audit-section__list list-unstyled list-group"
+                  key="list">
+                {items}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p key="info">There is no history records available</p>
+            );
+        }
+
+        if (!lessThan) {
+            body.push(
+              <div className="b-audit-section__toggle"
+                   key="toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-audit-section">
+            {body}
+          </div>
+        );
+    }
+});
+
+module.exports = FoldableAuditSection;

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

@@ -0,0 +1,144 @@
+'use strict';
+
+var React = require('react'),
+    Link = require('react-router').Link,
+    sortBy = require('lodash/collection/sortBy'),
+    capitalize = require('lodash/string/capitalize'),
+    values = require('lodash/object/values');
+
+var RoleLink = require('./role_link');
+
+var CustomTypeListItem = React.createClass({
+    display: 'CustomTypeListItem',
+
+    render() {
+        var kind = window.encodeURIComponent(this.props.data.record.kind),
+            id = window.encodeURIComponent(this.props.data.record.identifier),
+            label = this.props.data.record.kind + ':' + this.props.data.record.identifier;
+
+        return (
+          <tr>
+            <td className="id">
+              <Link to={this.props.data.kind}
+                    params={{kind: kind, id: id}}>
+                {label}
+              </Link>
+            </td>
+            <td className="ownerId">
+              <RoleLink id={this.props.data.record.ownerid || this.props.data.record.owner} />
+            </td>
+          </tr>
+        );
+    }
+});
+
+var GenericListItem = React.createClass({
+    display: 'GenericListItem',
+
+    render() {
+        return (
+          <tr>
+            <td className="id">
+              <Link to={this.props.data.kind}
+                    params={{id: window.encodeURIComponent(this.props.data.record.identifier)}}>
+                {this.props.data.record.identifier}
+              </Link>
+            </td>
+            <td className="ownerId">
+              <RoleLink id={this.props.data.record.ownerid || this.props.data.record.owner} />
+            </td>
+          </tr>
+        );
+    }
+});
+
+module.exports = React.createClass({
+    displayName: 'GenericList',
+
+    getInitialState() {
+        return {
+            sort: {
+                column: this.props.defaultColumn || 'id',
+                order: this.props.defaultOrder || 'asc'
+            },
+            columns: this.props.columns || {
+                id: {
+                    id: 'id',
+                    name: 'Id',
+                    defaultSortOrder: 'desc'
+                },
+                owner: {
+                    id: 'owner',
+                    name: 'Owner',
+                    defaultSortOrder: 'desc'
+                }
+            }
+        };
+    },
+
+    sortColumn(column) {
+        return function(e) {
+            e.preventDefault();
+
+            var order = (this.state.sort.order === 'asc') ? 'desc' : 'asc';
+
+            if (this.state.sort.column !== column) {
+                order = this.state.columns[column].defaultSortOrder;
+            }
+
+            this.setState({sort: {column: column, order: order}});
+        }.bind(this);
+    },
+
+    sortClass(column) {
+        var order = (this.state.sort.order === 'asc') ?
+                'glyphicon glyphicon-chevron-up' : 'glyphicon glyphicon-chevron-down';
+
+        return (this.state.sort.column === column) ? order : '';
+    },
+
+    render() {
+        var items = this.props.data.members.map(function(o) {
+            return o;
+        });
+
+        items = sortBy(items, this.state.sort.column);
+
+        if (this.state.sort.order === 'desc') {
+            items.reverse();
+        }
+
+        var rows = items.map(function (o) {
+            if (this.props.data.kind === 'custom-type') {
+              return (
+                <CustomTypeListItem data={{kind: this.props.data.kind, record: o}} key={o.id} />
+              );
+            }
+
+            return (
+              <GenericListItem data={{kind: this.props.data.kind, record: o}} key={o.id} />
+            );
+        }.bind(this));
+
+        var columns = values(this.state.columns).map(function(c) {
+            return (
+              <th onClick={this.sortColumn(c.id)} key={c.id} >
+                {c.name}<span className={'header ' + this.sortClass(c.id)} />
+              </th>
+            );
+        }, this);
+
+        return (
+          <table className={this.props.data.kind + 'List'}>
+            <thead>
+              <tr>
+                {columns}
+              </tr>
+            </thead>
+            <tbody>
+              {rows}
+            </tbody>
+          </table>
+        );
+    }
+});

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var GenericList = require('./list'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = function(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,65 @@
+'use strict';
+
+var React = require('react'),
+    Link = require('react-router').Link,
+    includes = require('lodash/collection/includes');
+
+/**
+ 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?
+ **/
+ module.exports = 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 (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>
+             );
+         }
+     }
+});