conjur-asset-ui 1.3.1 → 1.3.2

data/public/js/views/policies.js

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

data/public/js/views/policy.js

@@ -1,70 +1,43 @@
 /** @jsx React.DOM */
-/* global conjur, React, ReactBootstrap, _ */
 
-(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={policy.id}/></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">
+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">
                 <div className="audit auditGroup">
                   <AuditBox roles={[policy.id]} tabview={true} />
                 </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,
-    _
-);
+            </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>
+    );
+  }
+});

data/public/js/views/resource.js

@@ -1,54 +1,39 @@
 /** @jsx React.DOM */
-/* global conjur, React, _ */
 
-(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;
-
-            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
+/**
+ 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
             }
-
-            return (
-              <a className={classes.join(' ')} href={href}>{text}</a>
-            );
         }
-    });
+    } else if (text==id) {
+        text=[kind,text].join(":"); // prepend kind to id
+    }
 
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    _
-);
+    return <a className={classes.join(' ')} href={href}>{text}</a>
+  }
+});

data/public/js/views/role.js

@@ -1,56 +1,41 @@
 /** @jsx React.DOM */
-/* global conjur, React, _ */
 
-(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() {
-            var tokens = this.props.id.split(':'),
-                kind = tokens[1],
-                id = tokens[tokens.length-1];
-
-            if (tokens.length === 1) { // just username
-                kind = 'user';
-                id = tokens[0];
+/** 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
             }
-
-            // TODO: shouldn't point to unknown types
-            var href = '/ui/' + conjur.utils.pluralize(kind) + '/' + window.encodeURIComponent(id);
-
-            var classes = ['role-link'],
-                knownTypes = ['user','group','layer','host','policy'],
-                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>
-            );
         }
-    });
-
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    _
-);
+    } else if (text==id) {
+        text=[kind,text].join(":"); // prepend kind to id
+    }
+
+    return <a className={classes.join(' ')} href={href}>
+        {text}
+      </a>;
+  }
+});

data/public/js/views/searchResults.js

@@ -1,212 +1,145 @@
 /**@jsx React.DOM*/
-/* global conjur, React, jQuery, _ */
 
-
-(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 + ')'
-            );
-        }
+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;
     });
-
-    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 + ')'
-            );
-        }
+    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 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;
-        }
+    // 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}/>
     });
-
-    // 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 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 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 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>
     });
-
-    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,
-    _
-);
+    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);
+  });
+}