conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,111 @@
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'HostActivity',
+
+    mixins: [ChartHelperMixin],
+
+    getDefaultProps() {
+        return {
+            options: {
+                legend: {
+                    logins: 'Logins to host',
+                    sudo: 'Sudo calls on host',
+                    reads: 'Secret reads by host',
+                    updates: 'Secret updates by host',
+                    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';
+            }
+
+            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';
+                    }
+
+                    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-host-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
+
+        return (
+          <div className="b-host-activity">
+            <h2>Activity<Refresh show={this.props.isLoading} /></h2>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activityBody}
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,28 @@
+var React = require('react');
+
+var RoleLink = require('../generic/role_link'),
+    Time = require('../generic/time'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'HostDetails',
+
+    // TODO: control for 'enroll'
+    render() {
+        return (
+          <div className="b-host-details">
+            <h2>Details<Refresh show={this.props.isLoading} /></h2>
+            <dl className="dl-horizontal">
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.props.owner}/></dd>
+
+              <dt>Created by</dt>
+              <dd><RoleLink id={this.props.host.userid}/></dd>
+
+              <dt>Created At</dt>
+              <dd><Time timestamp={this.props.host.created_at}/></dd>
+            </dl>
+         </div>
+        );
+    }
+});

data/app/src/components/host/executors.js

@@ -0,0 +1,77 @@
+var React = require('react');
+
+import {take} from 'lodash';
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'HostExecutors',
+
+    propTypes: {
+        data: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            data: [],
+            isLoading: false
+        };
+    },
+
+    getInitialState() {
+        return {showAll: false};
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.setState({showAll: !this.state.showAll});
+    },
+
+    getItems() {
+        return this.props.data.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            itemsToDisplay = this.state.showAll ? items : take(items, 5),
+            msg = this.state.showAll ? 'Show top 5' : 'See all',
+            empty = items.length === 0,
+            lessThan5 = items.length <= 5,
+            body = [(<h2>Executors<Refresh show={this.props.isLoading} /></h2>)];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-host-executors__list list-unstyled list-group">
+                {itemsToDisplay}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There are no executors</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-host-executors__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-host-executors">
+            {body}
+          </div>
+        );
+    }
+});

data/app/src/components/host/host_link.js

@@ -0,0 +1,18 @@
+var React = require('react'),
+    Link = require('react-router').Link;
+
+export default React.createClass({
+    displayName: 'HostLink',
+
+    hostId() {
+        return this.props.data.split(':')[2];
+    },
+
+    render() {
+        return (
+          <Link to="host" params={{id: this.hostId}}>
+            {this.hostId()}
+          </Link>
+        );
+    }
+});

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

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

data/app/src/components/host/updaters.js

@@ -0,0 +1,77 @@
+var React = require('react');
+
+import {take} from 'lodash';
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'HostUpdaters',
+
+    propTypes: {
+        data: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            data: [],
+            isLoading: false
+        };
+    },
+
+    getInitialState() {
+        return {showAll: false};
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.setState({showAll: !this.state.showAll});
+    },
+
+    getItems() {
+        return this.props.data.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            itemsToDisplay = this.state.showAll ? items : take(items, 5),
+            msg = this.state.showAll ? 'Show top 5' : 'See all',
+            empty = items.length === 0,
+            lessThan5 = items.length <= 5,
+            body = [(<h2>Updaters<Refresh show={this.props.isLoading} /></h2>)];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-host-updaters__list list-unstyled list-group">
+                {itemsToDisplay}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There are no updaters</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-host-updaters__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-host-updaters">
+            {body}
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,145 @@
+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');
+
+var Annotations = require('../generic/annotations'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    FoldableAuditSection = require('../generic/foldable_audit_section'),
+    TabMixin = require('../generic/tab_mixin'),
+    RoleGraph = require('../graph/graph'),
+    Refresh = require('../refresh/refresh');
+
+var AuditTable = require('../audit/table');
+
+var Activity = require('./activity'),
+    Updaters = require('./updaters'),
+    Executors = require('./executors'),
+    Details = require('./details');
+
+export default React.createClass({
+    displayName: 'HostView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'host', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('host', state.id);
+        actions.audit.loadForResource('host', state.id);
+        actions.host.load(state.id);
+        actions.resources.loadOne('host', 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('host', id),
+            data = flux.store('host').getData(),
+            resource = flux.store('resources').getResource('host', id);
+
+        var ret = {
+            id: id,
+            loading: data.loading,
+            host: data.host,
+            owned: data.owned,
+            roles: data.roles,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            resource: resource.data,
+            audit: audit.data,
+            resources: data.resources,
+            executors: data.executors,
+            updaters: data.updaters
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var permissionsTab = this.permissionsTab(this.state.host.roleid),
+            membershipsTab = this.membershipsTab(this.state.host.roleid),
+            ownedTab = this.ownedTab();
+
+        var tabs = compact([
+            membershipsTab,
+            ownedTab,
+            permissionsTab
+        ]);
+
+        var elems = [
+            {url: '/ui/hosts', text: 'Hosts'},
+            {url: '', text: this.state.host.id},
+            {url: '', text: '(owned by ' + this.state.host.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-host">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <Activity audit={this.state.audit}
+                      roleid={this.state.host.roleid}
+                      isLoading={this.state.loading.audit} />
+            <hr />
+            {FoldableAuditSection.warnings(this.state.audit, this.state.loading.audit)}
+            <hr />
+            <div className="row">
+              <div className="col-md-6">
+                <Updaters data={this.state.updaters}
+                          isLoading={this.state.loading.updaters} />
+              </div>
+              <div className="col-md-6">
+                <Executors data={this.state.executors}
+                          isLoading={this.state.loading.executors} />
+              </div>
+            </div>
+            <hr />
+            <div className="row">
+              <div className="col-md-6">
+                <Details owner={this.state.owner}
+                         host={this.state.host}
+                         isLoading={this.state.loading.owner || this.state.loading.host} />
+              </div>
+              <div className="col-md-6">
+                <h2>Annotations<Refresh show={false} /></h2>
+                <Annotations annotations={this.state.annotations} />
+              </div>
+            </div>
+            <hr/>
+            <h2>Other<Refresh show={this.state.loading.annotations} /></h2>
+            <TabbedArea>
+              {tabs}
+            </TabbedArea>
+            <hr />
+            <RoleGraph height="400"
+                       kind="host"
+                       id={this.state.id} />
+            <hr />
+            <AuditTable events={this.state.audit}
+                        isLoading={this.state.loading.audit}
+                        caption="Recent Activity" />
+          </div>
+        );
+    }
+});