conjur-asset-ui 1.4.2 → 1.6.0

data/app/src/components/flash/flash.less

@@ -0,0 +1,3 @@
+.alert {
+  font-size: 12px !important;
+}

data/app/src/components/generic/__tests__/time-test.js

@@ -0,0 +1,42 @@
+/* global jest, describe, it, expect */
+
+'use strict';
+
+jest.dontMock('../time');
+jest.dontMock('moment');
+
+var React = require('react/addons');
+var TestUtils = React.addons.TestUtils;
+var Time = require('../time').Time;
+
+describe('time', function() {
+    it('default render', function() {
+        var component = TestUtils.renderIntoDocument(
+            <Time timestamp="1" />
+        );
+
+        var element = TestUtils.findRenderedDOMComponentWithTag(component, 'time');
+
+        expect(element.getDOMNode().textContent).toEqual('Jan 1, 1970 3:00 AM');
+    });
+
+    it('time from now', function() {
+        var component = TestUtils.renderIntoDocument(
+            <Time timestamp="1" relative="time from now" />
+        );
+
+        var element = TestUtils.findRenderedDOMComponentWithTag(component, 'time');
+
+        expect(element.getDOMNode().textContent).toMatch(/years ago/);
+    });
+
+    it('calendar time', function() {
+        var component = TestUtils.renderIntoDocument(
+            <Time timestamp="1" relative="calendar time" />
+        );
+
+        var element = TestUtils.findRenderedDOMComponentWithTag(component, 'time');
+
+        expect(element.getDOMNode().textContent).toEqual('01/01/1970');
+    });
+});

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

@@ -0,0 +1,39 @@
+var React = require('react');
+
+export default React.createClass({
+    displayName: 'GenericAnnotations',
+
+    render() {
+        if (!this.props.annotations || this.props.annotations.length === 0) {
+            return (
+              <div>
+                <span>None</span>
+              </div>
+            );
+        }
+
+        // TODO: sort by date (optionally)
+        // TODO: table view
+        var annotationsList = [];
+
+        this.props.annotations.sort(function(a, b) {
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+        }).forEach(function(item) {
+            var itemName = item.name,
+                itemValue = item.value,
+                term = 'annotation_' + itemName + '_key',
+                description = 'annotation_' + itemName + '_value';
+
+            annotationsList.push(<dt key={term}>{itemName}</dt>);
+            annotationsList.push(<dd key={description}>{itemValue}</dd>);
+        });
+
+        return (
+          <div>
+            <dl className="annotations">
+              {annotationsList}
+            </dl>
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,57 @@
+var React = require('react');
+
+import {map} from 'lodash';
+
+var Breadcrumb = React.createClass({
+    displayName: 'Breadcrumb',
+
+    render() {
+        var className = '',
+            text;
+
+        if (this.props.active === true) {
+            className = 'active';
+            text = this.props.text;
+
+        } else if (this.props.extra === true) {
+            className = 'b-breadcrumb__extra';
+            text = this.props.text;
+        } else {
+            text = (<a href={this.props.url}>{this.props.text}</a>);
+        }
+
+        return (
+          <li className={className}>
+            {text}
+          </li>
+        );
+    }
+});
+
+export default React.createClass({
+    displayName: 'Breadcrumbs',
+
+    render() {
+        var items = map(this.props.elems || [], function(e, idx, coll) {
+            var length = coll.length - 1,
+                active = idx + 1 === length ? true : false,
+                extra = idx === length ? true : false;
+
+            return (
+              <Breadcrumb url={e.url}
+                          text={e.text}
+                          active={active}
+                          extra={extra}
+                          key={e.url + e.text} />
+            );
+        });
+
+        return (
+          <div className="b-breadcrumbs">
+            <ol className="breadcrumb">
+              {items}
+            </ol>
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,204 @@
+var React = require('react');
+
+import {filter, take, map} from 'lodash';
+
+var defaultNumberOfElements = 3;
+
+var AuditEntry = require('../audit/entry'),
+    ResourceLink = require('./resource_link'),
+    Time = require('./time'),
+    Refresh = require('../refresh/refresh');
+
+const getAuditEntry = e => <AuditEntry {...e} />;
+
+var FoldableAuditSection = React.createClass({
+    displayName: 'FoldableAuditSection',
+
+    statics: {
+        updates(audit, isLoading) {
+            var filterFn = 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={filterFn} getItem={getItem}
+                                      openMsg="See full updates history"
+                                      isLoading={isLoading || false} />
+            );
+        },
+
+        warnings(audit, isLoading) {
+            var filterFn = function(e) {
+                return (
+                    e.hasOwnProperty('error') || e.allowed === false
+                );
+            };
+
+            return (
+              <FoldableAuditSection audit={audit} title="Warnings"
+                                    filter={filterFn} getItem={getAuditEntry}
+                                    openMsg="See full warnings history"
+                                    isLoading={isLoading || false} />
+            );
+        },
+
+        changes(audit, isLoading) {
+            var filterFn = function(e) {
+                if (e.action === 'check') {
+                    return false;
+                }
+
+                if (e.kind === 'audit' || e.kind === 'annotation') {
+                    return false;
+                }
+
+                // anything else is permission change
+                return true;
+            };
+
+            return (
+              <FoldableAuditSection audit={audit} title="Recent permission model changes"
+                                    filter={filterFn} getItem={getAuditEntry}
+                                    openMsg="See full history of permission model changes"
+                                    isLoading={isLoading || false} />
+            );
+        }
+    },
+
+    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>
+        );
+    }
+});
+
+export default FoldableAuditSection;

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

@@ -0,0 +1,141 @@
+var React = require('react'),
+    Link = require('react-router').Link;
+
+import {sortBy, values} from 'lodash';
+
+var RoleLink = require('./role_link');
+
+var CustomTypeListItem = React.createClass({
+    displayName: '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({
+    displayName: '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>
+        );
+    }
+});
+
+export default 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>
+        );
+    }
+});