conjur-asset-ui-beta 1.5.0

data/app/src/components/chart/chart_helper_mixin.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var d3 = require('d3'),
+    forEach = require('lodash/collection/forEach');
+
+var oneDay = 86400000;
+
+module.exports = {
+    getData(audit) {
+        var values = {},
+            min,
+            max,
+            self = this;
+
+        forEach(audit, function(e) {
+            var date,
+                type,
+                value;
+
+            if (typeof e.timestamp === 'string') {
+                date = d3.time.hour(new Date(e.timestamp));
+            }
+
+            type = self.getEventType(e);
+
+            if (date instanceof Date && typeof type === 'string')  {
+                value = values[date.toString()];
+
+                if (typeof value === 'undefined') {
+                    value = self.getDefaultItem();
+                    value.date = date;
+                }
+
+                value[type] = value[type] + 1;
+
+                values[date.toString()] = value;
+
+                if (typeof max === 'undefined') {
+                    max = date;
+                }
+
+                if (typeof min === 'undefined') {
+                    min = date;
+                }
+
+                if (date > max) {
+                    max = date;
+                }
+
+                if (date < min) {
+                    min = date;
+                }
+            }
+        });
+
+        var x = max - min;
+
+        if (x < oneDay) {
+            var delta = Math.round((86400000 - x) / 2);
+
+            min = new Date(min.getTime() - delta);
+            max = new Date(max.getTime() + delta);
+        }
+
+        return d3.time.scale()
+            .domain([min, max])
+            .ticks(d3.time.hours, 1)
+            .map(function(date) {
+                var d = values[date.toString()] || self.getDefaultItem();
+
+                d.date = date;
+
+                return d;
+            })
+            .sort(function(a, b) {
+                return a.date - b.date;
+            });
+    }
+};

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var genericListFactory = require('../generic/list_factory');
+
+module.exports = genericListFactory('custom-type', 'Custom Types');

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

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin,
+    Router = require('react-router');
+
+var AuditTable = require('../audit/table'),
+    Annotations = require('../generic/annotations'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    FoldableAuditSection = require('../generic/foldable_audit_section'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'CustomView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'resources'), Router.State],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            kind = unescape(this.getParams().kind),
+            id = unescape(this.getParams().id),
+            audit = flux.store('audit').getEventFor(kind, id),
+            resource = flux.store('resources').getResource(kind, id);
+
+        return {
+            loading: {
+                audit: audit.loading,
+                resource: resource.loading
+            },
+            error: {
+                resource: resource.error
+            },
+            audit: audit.data,
+            resource: resource.data
+        };
+    },
+
+    render() {
+        var elems = [
+            {url: '/ui/custom-types', text: 'Custom Types'},
+            {url: '', text: this.state.resource.id},
+            {url: '', text: '(owned by ' + this.state.resource.owner + ')'}
+        ];
+
+        return (
+          <div className="b-variable">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <h2>Custom Type {this.state.resource.kind}:{this.state.resource.identifier}</h2>
+            <hr/>
+            <h2>Annotations<Refresh show={this.state.loading.resource} /></h2>
+            <Annotations annotations={this.state.resource.annotations} />
+            <hr />
+            <AuditTable events={this.state.audit}
+                        caption="Recent Activity"
+                        isLoading={this.state.loading.audit} />
+          </div>
+        );
+    },
+
+    componentDidMount() {
+        var actions = this.getFlux().actions,
+            kind = unescape(this.getParams().kind),
+            id = unescape(this.getParams().id);
+
+        actions.audit.loadForResource(kind, id);
+        actions.resources.loadOne(kind, id);
+    }
+});

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

@@ -0,0 +1,113 @@
+'use strict';
+
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'DashboardActivity',
+
+    mixins: [ChartHelperMixin],
+
+    getDefaultProps() {
+        return {
+            options: {
+                legend: {
+                    slogins: 'Logins',
+                    ssudo: 'Sudo calls',
+                    sreads: 'Secret reads',
+                    supdates: 'Secret updates',
+                    fsudo: 'Sudo failures',
+                    freads: 'Secret read failures',
+                    fupdates: 'Secret update failures',
+                    fother: 'Other failures'
+                },
+                axis: {
+                    y: {
+                        label: 'Value'
+                    }
+                }
+            }
+        };
+    },
+
+    getDefaultItem() {
+        return {
+            slogins: 0,
+            ssudo: 0,
+            fsudo: 0,
+            sreads: 0,
+            freads: 0,
+            supdates: 0,
+            fupdates: 0,
+            fother: 0
+        };
+    },
+
+    getEventType(e) {
+        if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
+            if (e.allowed === true) {
+                if (e.action === 'sudo') {
+                    return 'ssudo';
+                }
+
+                if (e.action === 'login') {
+                    return 'slogins';
+                }
+            }
+
+            if (e.allowed === false) {
+                if (e.action === 'sudo') {
+                    return 'fsudo';
+                }
+            }
+        }
+
+        if ((e.action === 'check') &&
+            e.hasOwnProperty('resource') &&
+            e.resource.split(':')[1] === 'variable') {
+
+            if (e.hasOwnProperty('error') || e.allowed === false) {
+                if (e.privilege === 'execute') {
+                    return 'freads';
+                }
+
+                if (e.privilege === 'update') {
+                    return 'fupdates';
+                }
+            }
+
+            if (!e.hasOwnProperty('error') && e.allowed !== false) {
+                if (e.privilege === 'execute') {
+                    return 'sreads';
+                }
+
+                if (e.privilege === 'update') {
+                    return 'supdates';
+                }
+            }
+        }
+
+        if (e.hasOwnProperty('error') || e.allowed === false) {
+            return 'fother';
+        }
+
+        return null;
+    },
+
+    render() {
+        var data = this.getData(this.props.audit);
+
+        return (
+          <div className="b-dashboard-activity">
+            <h2>Activity<Refresh show={this.props.isLoading} /></h2>
+            <div className="b-dashboard-activity__graph">
+              <Chart options={this.props.options}
+                     data={data} />
+            </div>
+          </div>
+        );
+    }
+});

data/app/src/components/dashboard/dashboard.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var AuditTable = require('../audit/table'),
+    FoldableAuditSection = require('../generic/foldable_audit_section');
+
+var Activity = require('./activity');
+
+module.exports = React.createClass({
+    displayName: 'Dashboard',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit')],
+
+    getStateFromFlux() {
+        var audit = this.getFlux().store('audit').getAllEvents();
+
+        return {
+            audit: audit.data,
+            loading: audit.loading
+        };
+    },
+
+    render() {
+        return (
+          <div className="b-dashboard">
+            <Activity audit={this.state.audit}
+                      isLoading={this.state.loading} />
+            <hr />
+            {FoldableAuditSection.warnings(this.state.audit, this.state.loading)}
+            <hr />
+            {FoldableAuditSection.changes(this.state.audit, this.state.loading)}
+            <hr />
+            <AuditTable events={this.state.audit}
+                        caption="Recent activity"
+                        isLoading={this.state.loading} />
+          </div>
+        );
+    },
+
+    componentDidMount() {
+        this.getFlux().actions.audit.loadAll();
+    }
+});

data/app/src/components/flash/flash.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'Flash',
+
+    render() {
+        return (
+          <div className="alert alert-danger alert-dismissable">
+            <button type="button" className="close" aria-hidden="true"
+                    onClick={this.props.handleClose}>×</button>
+            <span className="text">{this.props.msg}</span>
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,43 @@
+/* global jest, describe, it, expect */
+
+'use strict';
+
+jest.dontMock('../time');
+jest.dontMock('moment');
+
+var React = require('react/addons'),
+    TestUtils = React.addons.TestUtils,
+    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,41 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = 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,59 @@
+'use strict';
+
+var React = require('react');
+
+var map = require('lodash/collection/map');
+
+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>
+        );
+    }
+});
+
+module.exports = 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>
+        );
+    }
+});