conjur-asset-ui 1.3.2 → 1.4.2

data/public/js/views/policies.js

@@ -1,14 +1,12 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var PolicyBox = this.PolicyBox = React.createClass({
-        /*getInitialState: function() {
-         return { currentNamespace: "", members: [] };
-         },*/
+    this.PolicyBox = React.createClass({
         render: function() {
             return (
               <div className="policyBox">

data/public/js/views/policy.js

@@ -1,43 +1,70 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-var Policy = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function() {
-    var policy = this.props.data.policy;
-    var id = policy.id.split(':')[2];
-
-    //TODO: policy loader
-    //TODO in CLI: why not save text of policy as an annotation?
-    var overview_tab =
-            <TabPane key="overview" tab="Overview">
-            <dl className="dl-horizontal">
-              <dt>Owner</dt>
-              <dd><RoleLink id={policy.id}/></dd>
-            </dl>
-            </TabPane>;
-
-    var permissions_tab = this.permissions_tab(policy.id);
-    var memberships_tab = this.memberships_tab(policy.id);
-    var annotations_tab = this.annotations_tab();
-    var owned_tab       = this.owned_tab();
-
-    var audit_tab =
-            <TabPane key="audit" tab="Recent Activity">
+(function(conjur, React, ReactBootstrap, _) {
+    'use strict';
+
+    var TabbedArea = ReactBootstrap.TabbedArea,
+        TabPane = ReactBootstrap.TabPane,
+        Tab = conjur.views.mixins.Tab,
+        RoleLink = conjur.views.RoleLink,
+        AuditBox = window.AuditBox;
+
+    this.Policy = React.createClass({
+        mixins: [Tab],
+
+        render: function() {
+            var policy = this.props.data.policy,
+                id = policy.id.split(':')[2];
+
+            //TODO: policy loader
+            //TODO in CLI: why not save text of policy as an annotation?
+            var overviewTab = (
+              <TabPane key="overview" tab="Overview">
+                <dl className="dl-horizontal">
+                  <dt>Owner</dt>
+                  <dd><RoleLink id={this.props.data.owner}/></dd>
+                </dl>
+              </TabPane>
+            );
+
+            var permissionsTab = this.permissionsTab(policy.id),
+                membershipsTab = this.membershipsTab(policy.id),
+                annotationsTab = this.annotationsTab(),
+                ownedTab = this.ownedTab();
+
+            var auditTab = (
+              <TabPane key="audit" tab="Recent Activity">
                 <div className="audit auditGroup">
                   <AuditBox roles={[policy.id]} tabview={true} />
                 </div>
-            </TabPane>;
-    var tabs = _.compact( [ overview_tab, owned_tab, memberships_tab, permissions_tab,
-                            annotations_tab, audit_tab
-                          ] );
-
-    return (
-      <div className="policy">
-        <h2>Policy {id}</h2>
-        <TabbedArea defaultActiveKey="overview">
-            {tabs}
-        </TabbedArea>
-      </div>
-    );
-  }
-});
+              </TabPane>
+            );
+
+            var tabs = _.compact([
+                overviewTab,
+                ownedTab,
+                membershipsTab,
+                permissionsTab,
+                annotationsTab,
+                auditTab
+            ]);
+
+            return (
+              <div className="policy">
+                <h2>Policy {id}</h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    ReactBootstrap,
+    _
+);

data/public/js/views/resource.js

@@ -1,39 +1,59 @@
 /** @jsx React.DOM */
+/* global conjur, React, _ */
 
-/**
- Renders a link to the resource with id given by this.props.data.
-
- Includes a slick little icon for the following kinds:
-  TODO which kinds?
-**/
-var ResourceLink = React.createClass({
-  render: function(){
-    var resourceId = this.props.id || this.props.data.id || this.props.data;
-
-    var tokens = resourceId.split(':');
-    var kind = tokens[1];
-    var id = tokens[tokens.length - 1];
-    var text = this.props.text || id;
-
-    var known_types=['user','group','layer','host','variable','policy'];
-    var resource_is_known = _.contains(known_types, kind);
-
-    // we shouldn't build links to for unsupported resources
-    var href = "/ui/" + conjur.utils.pluralize(kind) + "/" + encodeURIComponent(id);
-    var classes = [ 'resource-link' ];
-    if( !this.props.noIcon ) {
-        if (resource_is_known) {
-    	    classes.push(kind);
-        } else {
-            classes.push('abstract');
-            if (text==id) {
-                text=[kind,text].join(":"); // prepend kind to id
+(function(conjur, React, _) {
+    'use strict';
+
+    /**
+     Renders a link to the resource with id given by this.props.data.
+
+     Includes a slick little icon for the following kinds:
+     TODO which kinds?
+     **/
+    this.ResourceLink = React.createClass({
+        render: function() {
+            var resourceId = this.props.id || this.props.data.id || this.props.data;
+
+            // guard against misuse such as https://github.com/conjurinc/conjur-asset-ui/issues/78
+            if (resourceId === undefined) {
+                return React.DOM.em({}, 'undefined');
+            }
+
+            var tokens = resourceId.split(':'),
+                kind = tokens[1],
+                id = tokens[tokens.length - 1],
+                text = this.props.text || id;
+
+            var knownTypes = ['user', 'group', 'layer', 'host', 'variable', 'policy'],
+                resourceIsKnown = _.contains(knownTypes, kind);
+
+            // we shouldn't build links to for unsupported resources
+            var href = '/ui/' + conjur.utils.pluralize(kind) + '/' + window.encodeURIComponent(id);
+            var classes = ['resource-link'];
+
+            if (!this.props.noIcon) {
+                if (resourceIsKnown) {
+    	            classes.push(kind);
+                } else {
+                    classes.push('abstract');
+
+                    if (text === id) {
+                        text = [kind, text].join(':'); // prepend kind to id
+                    }
+                }
+            } else if (text === id) {
+                text = [kind, text].join(':'); // prepend kind to id
             }
+
+            return (
+              <a className={classes.join(' ')} href={href}>{text}</a>
+            );
         }
-    } else if (text==id) {
-        text=[kind,text].join(":"); // prepend kind to id
-    }
+    });
 
-    return <a className={classes.join(' ')} href={href}>{text}</a>
-  }
-});
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    _
+);

data/public/js/views/role.js

@@ -1,41 +1,63 @@
 /** @jsx React.DOM */
+/* global conjur, React, _ */
 
-/** render a link to the role represented by this.props.id
-   Example: <RoleLink id="ci:user:jon"/>
-*/
-var RoleLink = React.createClass({
-  render: function() {
-    var tokens = this.props.id.split(":");
-    var kind = tokens[1];
-    var id = tokens[tokens.length-1];
-    if (tokens.length==1) { // just username
-        kind="user";
-        id=tokens[0];
-    }
-
-    // TODO: shouldn't point to unknown types
-    var href = "/ui/" + conjur.utils.pluralize(kind) + "/" + encodeURIComponent(id);
-    var classes = ["role-link"];
-
-    var known_types=['user','group','layer','host','policy'];
-    var kind_is_known = _.contains(known_types, kind);
-    var text = id;
-
-    if( !this.props.noIcon ) {
-        if (kind_is_known) {
-    	    classes.push(kind);
-        } else {
-            classes.push('abstract');       // we have no picture for abstract role yet
-            if (text==id) {
-                text=[kind,text].join(":"); // prepend kind to id
+(function(conjur, React, _) {
+    'use strict';
+
+    /** render a link to the role represented by this.props.id
+     Example: <RoleLink id='ci:user:jon'/>
+     */
+    this.RoleLink = React.createClass({
+        render: function() {
+            // guard against misuse such as https://github.com/conjurinc/conjur-asset-ui/issues/78
+            if (this.props.id === undefined) {
+                return React.DOM.em({}, 'undefined');
+            }
+
+            var tokens = this.props.id.split(':'),
+                kind = tokens[1],
+                id = tokens[tokens.length-1],
+                href,
+                classes = ['role-link'],
+                knownTypes = ['user', 'group', 'layer', 'host', 'policy'],
+                kindIsKnown,
+                text;
+
+            if (tokens.length === 1) { // just username
+                kind = 'user';
+                id = tokens[0];
+            }
+
+            // TODO: shouldn't point to unknown types
+            href = '/ui/' + conjur.utils.pluralize(kind) + '/' + window.encodeURIComponent(id);
+            kindIsKnown = _.contains(knownTypes, kind);
+            text = id;
+
+            if (!this.props.noIcon) {
+                if (kindIsKnown) {
+    	            classes.push(kind);
+                } else {
+                    classes.push('abstract'); // we have no picture for abstract role yet
+
+                    if (text === id) {
+                        text = [kind, text].join(':'); // prepend kind to id
+                    }
+                }
+            } else if (text === id) {
+                text = [kind, text].join(':'); // prepend kind to id
             }
+
+            return (
+              <a className={classes.join(' ')} href={href}>
+                {text}
+              </a>
+            );
         }
-    } else if (text==id) {
-        text=[kind,text].join(":"); // prepend kind to id
-    }
-
-    return <a className={classes.join(' ')} href={href}>
-        {text}
-      </a>;
-  }
-});
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    _
+);

data/public/js/views/searchResults.js

@@ -1,145 +1,212 @@
 /**@jsx React.DOM*/
+/* global conjur, React, jQuery, _ */
 
-var SearchGroupTitle = React.createClass({
-  render: function(){
-     return <span>{this.title()}</span>
-  },
-
-  title: function(){
-    var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
-    words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
-    return words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')';
-  }
-});
-
-var SearchGroupHeading = React.createClass({
-  render: function(){
-    var targetId = "#search-collapse-" + this.props.data.kind;
-    return <div className="panel-heading">
-      <h4 className="panel-title">
-        <a data-toggle="collapse" data-target={targetId}
-          className={'group-heading' + this.props.data.kind}>
-          <SearchGroupTitle data={this.props.data} />
-       </a>
-     </h4>
-   </div>;
-  },
-
-  title: function(){
-    var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
-    words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
-    return words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')';
-  }
-});
-
-var SearchResultItem = React.createClass({
-  render: function(){
-    return <div className="item">
-      <h4> { this.titleLink() } </h4>
-      <div className="details">
-        <strong> ID: </strong> <ResourceLink data={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: function(){
-    var annots = this.annotationsMap();
-    return annots['description'] || "";
-  },
-
-  titleLink: function(){
-    var annots = this.annotationsMap();
-    return <ResourceLink data={this.props.data.id} text={annots['name']}/>
-  },
-
-  annotationsMap: function(){
-    if(this._annotationsMap) return this._annotationsMap;
-    var map = this._annotationsMap = {};
-    (this.props.data.annotations || []).forEach(function(a){
-      map[a.name] = a.value;
+
+(function(conjur, React, $, _) {
+    'use strict';
+
+    var ResourceLink = conjur.views.ResourceLink,
+        RoleLink = conjur.views.RoleLink;
+
+    var SearchGroupTitle = React.createClass({
+        render: function() {
+            return (
+              <span>{this.title()}</span>
+            );
+        },
+
+        title: function() {
+            var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
+
+            words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
+
+            return (
+                words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
+            );
+        }
     });
-    return map;
-  }
-});
-
-// accepts props like data: { kind:"", items:[] }
-var SearchGroup = React.createClass({
-  render: function(){
-    var id = "search-group-" + this.props.data.kind;
-    var items = this.props.data.items.map(function(r){
-      return <SearchResultItem data={r}/>
-    })
-    return <div id={id} className="panel panel-default search-group">
-      <SearchGroupHeading data={this.props.data}/>
-      <div id={"search-collapse-" + this.props.data.kind} className="panel-collapse collapse in">
-        <div className="panel-body">
-          {items}
-        </div>
-      </div>
-   </div>;
-  }
-});
-
-var SearchResults = React.createClass({
-  render: function() {
-    var results = this.props.data.results;
-    var grouped = _.groupBy(results, function(r){
-      return r.id.split(':')[1];
+
+    var SearchGroupHeading = React.createClass({
+        render: function() {
+            var targetId = '#search-collapse-' + this.props.data.kind;
+
+            return (
+              <div className="panel-heading">
+                <h4 className="panel-title">
+                  <a data-toggle="collapse"
+                     data-target={targetId}
+                     className={'group-heading' + this.props.data.kind}>
+                    <SearchGroupTitle data={this.props.data} />
+                  </a>
+                </h4>
+              </div>
+            );
+        },
+
+        title: function() {
+            var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
+
+            words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
+
+            return (
+                words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
+            );
+        }
     });
-    // Don't care about these
-    delete grouped['environment-variables']
-    delete grouped['notification']
-    delete grouped['queue']
-
-    var groups = _.map(grouped,function(items, key){
-      var data = {items:items, kind: key}; // - prevent editor barfing
-      return <SearchGroup data={data}/>
+
+    var SearchResultItem = React.createClass({
+        render: function() {
+            return (
+              <div className="item">
+                <h4>{this.titleLink()}</h4>
+                <div className="details">
+                  <strong> ID: </strong> <ResourceLink data={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: function() {
+            var annots = this.annotationsMap();
+
+            return annots.description || '';
+        },
+
+        titleLink: function(){
+            var annots = this.annotationsMap();
+
+            return (
+              <ResourceLink data={this.props.data.id} text={annots.name} />
+            );
+        },
+
+        annotationsMap: function(){
+            if (this._annotationsMap) {
+                return this._annotationsMap;
+            }
+
+            var map = this._annotationsMap = {};
+
+            (this.props.data.annotations || []).forEach(function(a) {
+                map[a.name] = a.value;
+            });
+
+            return map;
+        }
     });
-    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.data.kind] || 100 ) - ( scores[b.props.data.kind] || 100 );
+
+    // accepts props like data: { kind:"", items:[] }
+    var SearchGroup = React.createClass({
+        render: function() {
+            var id = 'search-group-' + this.props.data.kind;
+
+            var items = this.props.data.items.map(function(r) {
+                return (
+                  <SearchResultItem data={r}/>
+                );
+            });
+
+            return (
+              <div id={id} className="panel panel-default search-group">
+                <SearchGroupHeading data={this.props.data}/>
+                <div id={'search-collapse-' + this.props.data.kind}
+                     className="panel-collapse collapse in">
+                  <div className="panel-body">
+                    {items}
+                  </div>
+                </div>
+              </div>
+            );
+        }
     });
-    var toc = groups.map(function(g) {
-      var gid = "#search-group-" + g.props.data.kind;
-      return <div className="toc-item">
-          <a href={gid}><SearchGroupTitle data={g.props.data} /></a>
-        </div>
+
+    var SearchResults = this.SearchResults = React.createClass({
+        render: function() {
+            var results = this.props.data.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) {
+                var data = {items: items, kind: key}; // - prevent editor barfing
+                return <SearchGroup data={data}/>;
+            });
+
+            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.data.kind] || 100) -
+                        (scores[b.props.data.kind] || 100)
+                );
+            });
+
+            var toc = groups.map(function(g) {
+                var gid = '#search-group-' + g.props.data.kind;
+
+                return (
+                  <div className="toc-item">
+                    <a href={gid}><SearchGroupTitle data={g.props.data} /></a>
+                  </div>
+                );
+            });
+
+            var heading = 'Found ' + this.props.data.results.length +
+                    ' resources matching "' + this.props.data.search + '"';
+
+            return (
+              <div id="searchResults">
+                <div className="searchResults">
+                  <h3> { heading } </h3>
+                  <div className="search-results-toc">
+                    {toc}
+                  </div>
+                  <div className="search-results">
+                    {groups}
+                  </div>
+                </div>
+              </div>
+            );
+        }
     });
-    var heading = "Found " + this.props.data.results.length +
-      " resources matching \"" + this.props.data.search + "\"";
-    return (
-      <div id="searchResults">
-        <div className="searchResults">
-          <h3> { heading } </h3>
-          <div className="search-results-toc">
-            {toc}
-          </div>
-          <div className="search-results">
-            {groups}
-          </div>
-        </div>
-      </div>
-    );
-  }
-});
-
-SearchResults.search = function(search, container){
-  container = container || document.getElementById('content');
-  $.get(conjur.app.endpoints.authz("resources", {search: search.replace('-',' ')}), function(results){
-
-    var data = {search: search, results: results};
-    React.renderComponent(<SearchResults data={data}/>, container);
-  });
-}
+
+    SearchResults.search = function(search, container) {
+        container = container || document.getElementById('content');
+
+        $.get(
+            conjur.app.endpoints.authz('resources', {search: search.replace('-',' ')}),
+            function(results) {
+                var data = {search: search, results: results};
+                React.renderComponent(<SearchResults data={data}/>, container);
+            }
+        );
+    };
+
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    jQuery,
+    _
+);