conjur-asset-ui-beta 1.5.0

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

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin,
+    Router = require('react-router'),
+    compact = require('lodash/array/compact');
+
+var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
+    TabPane = require('react-bootstrap/lib/TabPane');
+
+var TabMixin = require('../generic/tab_mixin'),
+    RoleLink = require('../generic/role_link'),
+    AuditTable = require('../audit/table');
+
+module.exports = React.createClass({
+    displayName: 'PolicyView',
+
+    mixins: [FluxMixin, StoreWatchMixin('policy'), Router.State, TabMixin],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            data = flux.store('policy').getData(),
+            resource = flux.store('resources').getResource(
+                'policy',
+                unescape(this.getParams().id)
+            );
+
+        var ret = {
+            loading: data.loading,
+            resource: resource.data,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            owned: data.owned,
+            roles: data.roles,
+            resources: data.resources
+        };
+
+        ret.loading.resource = resource.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        //TODO: policy loader
+        //TODO in CLI: why not save text of policy as an annotation?
+        var overviewTab = (
+          <TabPane eventKey="overview" tab="Overview">
+            <dl className="dl-horizontal">
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.state.owner} /></dd>
+            </dl>
+          </TabPane>
+        );
+
+        var permissionsTab = this.permissionsTab(this.state.resource.id),
+            membershipsTab = this.membershipsTab(this.state.resource.id),
+            annotationsTab = this.annotationsTab(),
+            ownedTab = this.ownedTab();
+
+        var auditTab = (
+          <TabPane eventKey="audit" tab="Recent Activity">
+            <div className="audit auditGroup">
+              <AuditTable roles={[this.state.resource.id]} tabview={true} />
+            </div>
+          </TabPane>
+        );
+
+        var tabs = compact([
+            overviewTab,
+            ownedTab,
+            membershipsTab,
+            permissionsTab,
+            annotationsTab,
+            auditTab
+        ]);
+
+        return (
+          <div className="policy">
+            <h2>Policy {this.state.resource.identifier}</h2>
+            <TabbedArea defaultActiveKey="overview">
+              {tabs}
+            </TabbedArea>
+          </div>
+        );
+    },
+
+    componentDidMount() {
+        var actions = this.getFlux().actions,
+            id = unescape(this.getParams().id);
+
+        actions.policy.load(id);
+        actions.resources.loadOne('policy', id);
+    }
+});

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+require('./refresh.less');
+
+module.exports = React.createClass({
+
+    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,45 @@
+'use strict';
+
+var React = require('react');
+
+var SearchGroupHeading = require('./group_heading'),
+    SearchResultItem = require('./result_item');
+
+module.exports = 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 @@
+'use strict';
+
+var React = require('react'),
+    capitalize = require('lodash/string/capitalize');
+
+var SearchGroupTitle = require('./group_title'),
+    utils = require('../../utils');
+
+module.exports = 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] = utils.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,38 @@
+'use strict';
+
+var React = require('react'),
+    capitalize = require('lodash/string/capitalize');
+
+var utils = require('../../utils');
+
+module.exports = 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] = utils.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,57 @@
+'use strict';
+
+var React = require('react');
+
+var ResourceLink = require('../generic/resource_link'),
+    RoleLink = require('../generic/role_link');
+
+module.exports = 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,103 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin,
+    Router = require('react-router'),
+    groupBy = require('lodash/collection/groupBy'),
+    map = require('lodash/collection/map');
+
+var SearchGroup = require('./group'),
+    SearchGroupTitle = require('./group_title'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'Search',
+
+    mixins: [FluxMixin, StoreWatchMixin('search'), Router.State],
+
+    getStateFromFlux() {
+        var data = this.getFlux().store('search').getData();
+
+        return {
+            loading: data.loading.results,
+            results: data.results,
+            query: data.identifier
+        };
+    },
+
+    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,
+            'key_pair': 7
+        };
+
+        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>
+        );
+    },
+
+    componentDidMount() {
+        this.getFlux().actions.search(unescape(this.getParams().query));
+    }
+});