conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,78 @@
+var d3 = require('d3');
+
+import {forEach} from 'lodash';
+
+var oneDay = 86400000;
+
+export default {
+    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] += 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,3 @@
+var genericListFactory = require('../generic/list_factory');
+
+export default genericListFactory('custom-type', 'Custom Types');

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

@@ -0,0 +1,81 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var AuditTable = require('../audit/table'),
+    Annotations = require('../generic/annotations'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'CustomView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'resources')],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForResource(state.kind, state.id);
+        actions.resources.loadOne(state.kind, state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if ((this.state.kind !== nextState.kind) ||
+            (this.state.id !== nextState.id)) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            kind = flux.store('route').getParam('kind'),
+            id = flux.store('route').getParam('id'),
+            audit = flux.store('audit').getEventFor(kind, id),
+            resource = flux.store('resources').getResource(kind, id);
+
+        return {
+            kind: kind,
+            id: id,
+            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>
+        );
+    }
+});

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

@@ -0,0 +1,144 @@
+var React = require('react');
+
+var Chart = require('../chart/chart'),
+    ChartHelperMixin = require('../chart/chart_helper_mixin'),
+    Refresh = require('../refresh/refresh');
+
+export default 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
+        };
+    },
+
+    _getEventTypeSsh(e) {
+        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';
+            }
+        }
+
+        return null;
+    },
+
+    _getEventTypeVariabe(e) {
+        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';
+            }
+        }
+
+        return null;
+    },
+
+    getEventType(e) {
+        let ret = null;
+
+        if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
+            ret = this._getEventTypeSsh(e);
+        }
+
+        if ((e.action === 'check') &&
+            e.hasOwnProperty('resource') &&
+            e.resource.split(':')[1] === 'variable') {
+            ret = this._getEventTypeVariabe(e);
+        }
+
+        if (e.hasOwnProperty('error') || e.allowed === false) {
+            ret = 'fother';
+        }
+
+        return ret;
+    },
+
+    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-dashboard-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
+
+        return (
+          <div className="b-dashboard-activity">
+            <h2>Activity<Refresh show={this.props.isLoading} /></h2>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activityBody}
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,46 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var AuditTable = require('../audit/table'),
+    FoldableAuditSection = require('../generic/foldable_audit_section');
+
+var Activity = require('./activity');
+
+export default 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,98 @@
+import React from 'react';
+import {FluxMixin, StoreWatchMixin} from 'fluxxor';
+import _ from 'lodash';
+
+import './flash.less';
+
+export default React.createClass({
+    displayName: 'Flash',
+
+    mixins: [FluxMixin(React), StoreWatchMixin('app')],
+
+    getInitialState() {
+        return {
+            hover: false
+        };
+    },
+
+    getStateFromFlux() {
+        return this.getFlux().store('app').getState();
+    },
+
+    handleClose() {
+        this.getFlux().actions.flashMessageClear();
+    },
+
+    onMouseOver() {
+        this.setState({
+            hover: true
+        });
+    },
+
+    onMouseOut() {
+        this.setState({
+            hover: false
+        });
+    },
+
+    setTimeout() {
+        this.clearTimeout();
+        this.timeout = window.setTimeout(this.handleClose, 10000);
+    },
+
+    clearTimeout() {
+        window.clearTimeout(this.timeout);
+    },
+
+    shouldComponentUpdate(nextProps, nextState) {
+        let shouldUpdate = false,
+            msgsWasAdded = false;
+
+        if (nextState.flashMsgs.length === 0) {
+            this.clearTimeout();
+            shouldUpdate = true;
+        }
+
+        if (nextState.flashMsgs.length > this.state.flashMsgs.length) {
+            shouldUpdate = true;
+            msgsWasAdded = true;
+        }
+
+        if (nextState.hover === true) {
+            this.clearTimeout();
+        }
+
+        if ((nextState.hover === false && this.state.hover === true) ||
+            msgsWasAdded) {
+            this.setTimeout();
+        }
+
+        return shouldUpdate;
+    },
+
+    componentWillUnmount() {
+        window.clearTimeout(this.timeout);
+    },
+
+    render() {
+        let msgs = _.chain(this.state.flashMsgs)
+                .pluck('msg')
+                .map((msg) => {
+                    return <div className="text" key={_.escape(msg)}>{msg}</div>;
+                })
+                .value();
+
+        if (msgs.length > 0) {
+            return (
+              <div className="alert alert-danger alert-dismissable"
+                   onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                <button type="button" className="close" aria-hidden="true"
+                        onClick={this.handleClose}>×</button>
+                    {msgs}
+              </div>
+            );
+        } else {
+            return null;
+        }
+    }
+});