conjur-asset-ui 1.4.2 → 1.6.0

data/app/src/components/refresh/refresh.js

@@ -0,0 +1,29 @@
+var React = require('react');
+
+require('./refresh.less');
+
+export default React.createClass({
+    displayName: 'Refresh',
+
+    propTypes: {
+        show: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            show: true
+        };
+    },
+
+    render() {
+        var style = {};
+
+        if (!this.props.show) {
+            style.display = 'none';
+        }
+
+        return (
+          <div className="b-refresh" style={style} />
+        );
+    }
+});

data/app/src/components/refresh/refresh.less

@@ -0,0 +1,15 @@
+.b-refresh {
+    background-image: url('/images/icon-service-dots.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: right center;
+    position: absolute;
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    -webkit-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -moz-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -ms-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -o-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+}

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

@@ -0,0 +1,43 @@
+var React = require('react');
+
+var SearchGroupHeading = require('./group_heading'),
+    SearchResultItem = require('./result_item');
+
+export default React.createClass({
+    displayName: 'SearchGroup',
+
+    propTypes: {
+        kind: React.PropTypes.string,
+        items: React.PropTypes.array
+    },
+
+    getDefaultProps() {
+        return {
+            kind: '',
+            items: []
+        };
+    },
+
+    render() {
+        var id = 'search-group-' + this.props.kind;
+
+        var items = this.props.items.map(function(r) {
+            return (
+              <SearchResultItem data={r}/>
+            );
+        });
+
+        return (
+          <div id={id} className="panel panel-default search-group">
+            <SearchGroupHeading kind={this.props.kind}
+                                items={this.props.items} />
+            <div id={'search-collapse-' + this.props.kind}
+                 className="panel-collapse collapse in">
+              <div className="panel-body">
+                {items}
+              </div>
+            </div>
+          </div>
+        );
+    }
+});

data/app/src/components/search/group_heading.js

@@ -0,0 +1,50 @@
+var React = require('react');
+
+import {capitalize} from 'lodash';
+
+var SearchGroupTitle = require('./group_title');
+
+import {pluralize} from '../../utils';
+
+export default React.createClass({
+    displayName: 'SearchGroupHeading',
+
+    propTypes: {
+        kind: React.PropTypes.string,
+        items: React.PropTypes.array
+    },
+
+    getDefaultProps() {
+        return {
+            kind: '',
+            items: []
+        };
+    },
+
+    render() {
+        var targetId = '#search-collapse-' + this.props.kind;
+
+        return (
+          <div className="panel-heading">
+            <h4 className="panel-title">
+              <a data-toggle="collapse"
+                 data-target={targetId}
+                 className={'group-heading' + this.props.kind}>
+                <SearchGroupTitle kind={this.props.kind}
+                                  items={this.props.items} />
+              </a>
+            </h4>
+          </div>
+        );
+    },
+
+    title() {
+        var words = this.props.kind.replace(/[-_]/, ' ').split(' ');
+
+        words[words.length - 1] = pluralize(words[words.length - 1]);
+
+        return (
+            words.map(capitalize).join(' ') + ' (' + this.props.items.length + ')'
+        );
+    }
+});

data/app/src/components/search/group_title.js

@@ -0,0 +1,37 @@
+var React = require('react');
+
+import {capitalize} from 'lodash';
+
+import {pluralize} from '../../utils';
+
+export default React.createClass({
+    displayName: 'SearchGroupTitle',
+
+    propTypes: {
+        kind: React.PropTypes.string,
+        items: React.PropTypes.array
+    },
+
+    getDefaultProps() {
+        return {
+            kind: '',
+            items: []
+        };
+    },
+
+    render() {
+        return (
+          <span>{this.title()}</span>
+        );
+    },
+
+    title() {
+        var words = this.props.kind.replace(/[-_]/, ' ').split(' ');
+
+        words[words.length - 1] = pluralize(words[words.length - 1]);
+
+        return (
+            words.map(capitalize).join(' ') + ' (' + this.props.items.length + ')'
+        );
+    }
+});

data/app/src/components/search/result_item.js

@@ -0,0 +1,55 @@
+var React = require('react');
+
+var ResourceLink = require('../generic/resource_link'),
+    RoleLink = require('../generic/role_link');
+
+export default React.createClass({
+    displayName: 'SearchResultItem',
+
+    render() {
+        return (
+          <div className="item">
+            <h4>{this.titleLink()}</h4>
+            <div className="details">
+              <strong> ID: </strong>
+              <ResourceLink id={this.props.data.id}
+                            noIcon="true" />
+              <strong> Owner: </strong>
+              <RoleLink id={this.props.data.owner}
+                        noIcon="true" />
+            </div>
+            <div className="comment">
+              {this.commentText()}
+            </div>
+          </div>
+        );
+    },
+
+    commentText() {
+        var annots = this.annotationsMap();
+
+        return annots.description || '';
+    },
+
+    titleLink() {
+        var annots = this.annotationsMap();
+
+        return (
+          <ResourceLink id={this.props.data.id} text={annots.name} />
+        );
+    },
+
+    annotationsMap() {
+        if (this._annotationsMap) {
+            return this._annotationsMap;
+        }
+
+        var map = this._annotationsMap = {};
+
+        (this.props.data.annotations || []).forEach(function(a) {
+            map[a.name] = a.value;
+        });
+
+        return map;
+    }
+});

data/app/src/components/search/search.js

@@ -0,0 +1,118 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    Router = require('react-router');
+
+import {groupBy, map} from 'lodash';
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var SearchGroup = require('./group'),
+    SearchGroupTitle = require('./group_title'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'Search',
+
+    mixins: [FluxMixin, StoreWatchMixin('search', 'route'), Router.State],
+
+    askForNewData(state) {
+        this.getFlux().actions.search(state.query);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.query !== nextState.query) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            data = flux.store('search').getData(),
+            query = flux.store('route').getParam('query');
+
+        return {
+            loading: data.loading.results,
+            results: data.results,
+            query: query
+        };
+    },
+
+    render() {
+        var results = this.state.results;
+
+        var grouped = groupBy(results, function(r) {
+            return r.id.split(':')[1];
+        });
+
+        // Don't care about these
+        delete grouped['environment-variables'];
+        delete grouped.notification;
+        delete grouped.queue;
+
+        var groups = map(grouped, function(items, key) {
+            return <SearchGroup kind={key} items={items} />;
+        });
+
+        var scores = {
+            policy: 1,
+            layer: 2,
+            group: 3,
+            host: 4,
+            user: 5,
+            variable: 6,
+            /*eslint-disable camelcase */
+            key_pair: 7
+            /*eslint-enable camelcase */
+        };
+
+        groups.sort(function(a, b) {
+            return (
+                (scores[a.props.kind] || 100) -
+                    (scores[b.props.kind] || 100)
+            );
+        });
+
+        var toc = groups.map(function(g) {
+            var gid = '#search-group-' + g.props.kind;
+
+            return (
+              <div className="toc-item">
+                <a href={gid}>
+                  <SearchGroupTitle kind={g.props.kind}
+                                    items={g.props.items} />
+                </a>
+              </div>
+            );
+        });
+
+        var heading;
+
+        if (this.state.loading) {
+            heading = 'Searching for "' + this.state.query + '"';
+        } else {
+            heading = 'Found ' + this.state.results.length +
+                ' resources matching "' + this.state.query + '"';
+        }
+
+        return (
+          <div id="searchResults">
+            <div className="searchResults">
+              <h3>{heading}<Refresh show={this.state.loading} /></h3>
+              <div className="search-results-toc">
+                {toc}
+              </div>
+              <div className="search-results">
+                {groups}
+              </div>
+            </div>
+          </div>
+        );
+    }
+});

data/app/src/components/user/activity.js

@@ -0,0 +1,112 @@
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'UserActivity',
+
+    mixins: [ChartHelperMixin],
+
+    getDefaultProps() {
+        return {
+            audit: [],
+            options: {
+                legend: {
+                    logins: 'Logins',
+                    sudo: 'Sudo calls',
+                    reads: 'Secret reads',
+                    updates: 'Secret updates',
+                    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';
+
+            } else 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';
+
+                    } else if (e.privilege === 'execute') {
+                        return 'reads';
+                    }
+                }
+            }
+        }
+
+        return null;
+    },
+
+    getInitialState() {
+        return {showActivity: false};
+    },
+
+    toggleActivity(e) {
+        e.preventDefault();
+
+        this.setState({showActivity: !this.state.showActivity});
+    },
+
+    render() {
+        var data = this.getData(this.props.audit);
+        var activityBody = [];
+
+        var msg = this.state.showActivity ? 'Hide' : 'Show graph';
+
+        if (this.state.showActivity) {
+            activityBody.push(
+                <div className="b-user-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
+
+        return (
+          <div className="b-user-activity">
+            <h2>Activity<Refresh show={this.props.isLoading} /></h2>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activityBody}
+          </div>
+        );
+    }
+});