conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,30 @@
+var React = require('react');
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'UserDetails',
+
+    render: function() {
+        // TODO: refactor
+        // TODO: show public keys
+        // TODO: actions menu (e.g. 'upload public key', 'add annotation')
+        // TODO: memberships panel
+        return (
+          <div className="b-user-details">
+            <h2>Details<Refresh show={this.props.isLoading} /></h2>
+            <dl className="dl-horizontal">
+              <dt>Created by</dt>
+              <dd><RoleLink id={this.props.user.userid}/></dd>
+
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.props.owner}/></dd>
+
+              <dt>Uidnumber</dt>
+              <dd>{this.props.user.uidnumber}</dd>
+            </dl>
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,3 @@
+var genericListFactory = require('../generic/list_factory');
+
+export default genericListFactory('user', 'Users');

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

@@ -0,0 +1,118 @@
+var React = require('react');
+
+require('./pubkeys.less');
+
+var PubkeyItem = React.createClass({
+    displayName: 'PubkeyItem',
+
+    render: function() {
+        return (
+          <div className="b-pubkey">
+            <div className="b-pubkey__logo">
+              <span className="badge">{this.props.pubkey[0]}</span>
+            </div>
+            <ul className="b-pubkey__list list-unstyled">
+              <li className="b-pubkey__name">
+                {this.props.pubkey[2]}
+              </li>
+              <li className="b-pubkey__fingerprint">
+                {/* TODO: key fingerprint */}
+              </li>
+              <li className="b-pubkey__info">
+                {/* TODO: When added, when last time used */}
+              </li>
+            </ul>
+            <div className="b-pubkeys__actions">
+              {/* TODO: Action buttons */}
+            </div>
+          </div>
+        );
+    }
+});
+
+var PubkeysHelp = React.createClass({
+    displayName: 'PubkeysHelp',
+
+    render: function() {
+        var ret;
+
+        if (React.Children.count(this.props.children) > 0) {
+            ret = (
+              <p className="b-pubkeys__help">
+                {this.props.children}
+              </p>
+            );
+        } else {
+            var login = this.props.login;
+
+            ret = (
+              <p className="b-pubkeys__help">
+                There are no pubkeys registered for this user yet.
+                Use following command to upload one from a file:
+                <pre>$ conjur pubkeys add {login} @userkeyfile.pub</pre>
+              </p>
+            );
+        }
+
+        return ret;
+    }
+});
+
+var PubkeysList = React.createClass({
+    displayName: 'PubkeysList',
+
+    render: function() {
+        var login = this.props.login;
+
+        var pubkeysList = this.props.pubkeys.map(function(k, idx, coll) {
+            var tokens = k.split(' ');
+
+            var className = 'b-pubkeys__item list-group-item list-group-item-noborder';
+
+            if (idx + 1 !== coll.length) {
+                className += ' b-pubkeys__item--headline';
+            }
+
+            return (
+              <li className={className}>
+                <PubkeyItem pubkey={tokens} />
+              </li>
+            );
+        });
+
+        return (
+          <div className="b-pubkeys">
+            <PubkeysHelp>
+              This is list of SSH public keys associated with user {login}.
+            </PubkeysHelp>
+            <ul className="b-pubkeys__list">
+              {pubkeysList}
+            </ul>
+          </div>
+        );
+    }
+});
+
+export default React.createClass({
+    render: function() {
+        var body;
+
+        if (this.props.isLoading) {
+            body = (
+              <p>Loading...</p>
+            );
+        } else if (this.props.pubkeys.length > 0) {
+            body = (
+              <PubkeysList login={this.props.login} pubkeys={this.props.pubkeys} />
+            );
+        } else {
+            body = (
+              <div className="b-pubkeys">
+                <PubkeysHelp login={this.props.login} />
+              </div>
+            );
+        }
+
+        return body;
+    }
+});

data/app/src/components/user/pubkeys.less

@@ -0,0 +1,56 @@
+/* -Pubkeys-------------------------- */
+
+.b-pubkeys {
+
+}
+
+.b-pubkeys__help {
+
+}
+
+.b-pubkeys__list {
+    padding-top: 10px;
+}
+
+.b-pubkeys__item {
+
+}
+
+.b-pubkeys__item--headline {
+    margin-bottom: 1px;
+    box-shadow: 0 2px 1px -2px gray;
+}
+
+.b-pubkey {
+    margin-right: 55px;
+    height: 20px;
+}
+
+.b-pubkey__logo {
+    display: inline-block;
+    width: 70px;
+}
+
+.b-pubkey__list {
+    display: inline-block;
+}
+
+.b-pubkey__name {
+
+}
+
+.b-pubkey__fingerprint {
+
+}
+
+.b-pubkey__info {
+
+}
+
+.b-pubkey__actions {
+    display: inline-block;
+}
+
+.b-chart-demo {
+    height: 300px;
+}

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

@@ -0,0 +1,143 @@
+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'),
+    AuditTable = require('../audit/table'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    Annotations = require('../generic/annotations'),
+    FoldableAuditSection = require('../generic/foldable_audit_section'),
+    Refresh = require('../refresh/refresh'),
+    RoleGraph = require('../graph/graph');
+
+import {getTabname} from '../../utils';
+
+var PubkeysTabContent = require('./pubkeys'),
+    Details = require('./details'),
+    Activity = require('./activity');
+
+export default React.createClass({
+    displayName: 'UserView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'user', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('user', state.id);
+        actions.audit.loadForResource('user', state.id);
+        actions.user.load(state.id);
+        actions.resources.loadOne('user', 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'),
+            audit = flux.store('audit').getEventFor('user', id),
+            data = flux.store('user').getData(),
+            resource = flux.store('resources').getResource('user', id);
+
+        var ret = {
+            id: id,
+            loading: data.loading,
+            user: data.user,
+            owned: data.owned,
+            roles: data.roles,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            resource: resource.data,
+            pubkeys: data.pubkeys,
+            audit: audit.data,
+            resources: data.resources
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var pubkeysTab = (
+          <TabPane eventKey="pubkeys"
+                   tab={getTabname('Public Keys', this.state.pubkeys)}>
+            <PubkeysTabContent login={this.state.user.login}
+                               pubkeys={this.state.pubkeys} />
+          </TabPane>
+        );
+
+        var permissionsTab = this.permissionsTab(this.state.user.roleid),
+            membershipsTab = this.membershipsTab(this.state.user.roleid),
+            ownedTab = this.ownedTab();
+
+        var tabs = compact([
+            pubkeysTab,
+            ownedTab,
+            membershipsTab,
+            permissionsTab
+        ]);
+
+        var elems = [
+            {url: '/ui/users', text: 'Users'},
+            {url: '', text: this.state.user.login},
+            {url: '', text: '(owned by ' + this.state.user.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-user">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <Activity audit={this.state.audit}
+                      roleid={this.state.user.roleid}
+                      isLoading={this.state.loading.user || this.state.loading.audit} />
+            <hr />
+            {FoldableAuditSection.warnings(this.state.audit, this.state.loading.audit)}
+            <hr />
+            <div className="row">
+              <div className="col-md-6">
+                <Details owner={this.state.owner}
+                         user={this.state.user}
+                         isLoading={this.state.loading.user || this.state.loading.owner} />
+              </div>
+              <div className="col-md-6">
+                <h2>Annotations<Refresh show={this.state.loading.annotations} /></h2>
+                <Annotations annotations={this.state.annotations} />
+              </div>
+            </div>
+            <hr />
+            <h2>Other</h2>
+            <TabbedArea>
+              {tabs}
+            </TabbedArea>
+            <hr />
+            <RoleGraph height="400"
+                       kind="user"
+                       id={this.state.id} />
+            <hr />
+            <AuditTable events={this.state.audit}
+                        caption="Recent Activity"
+                        isLoading={this.state.loading.audit} />
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,101 @@
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'VariableActivity',
+
+    mixins: [ChartHelperMixin],
+
+    propTypes: {
+        audit: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            audit: [],
+            isLoading: false,
+            options: {
+                legend: {
+                    sread: 'Successful reads',
+                    supdate: 'Successful updates',
+                    fread: 'Failed reads',
+                    fupdate: 'Failed updates'
+                },
+                axis: {
+                    y: {
+                        label: 'Value'
+                    }
+                }
+            }
+        };
+    },
+
+    getDefaultItem() {
+        return {
+            sread: 0,
+            supdate: 0,
+            fread: 0,
+            fupdate: 0
+        };
+    },
+
+    getEventType(e) {
+        if (e.action === 'check') {
+            if (e.hasOwnProperty('error') || e.allowed === false) {
+                if (e.privilege === 'execute') {
+                    return 'fread';
+                } else if (e.privilege === 'update') {
+                    return 'fupdate';
+                }
+            }
+
+            if (!e.hasOwnProperty('error') && e.allowed !== false) {
+                if (e.privilege === 'execute') {
+                    return 'sread';
+                } else if (e.privilege === 'update') {
+                    return 'supdate';
+                }
+            }
+        }
+
+        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-variable-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
+
+        return (
+          <div className="b-variable-activity">
+            <h2>Activity<Refresh show={this.props.isLoading} /></h2>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activityBody}
+          </div>
+        );
+    }
+});