conjur-asset-ui 1.3.0 → 1.3.1

data/public/js/views/permissions.js

@@ -1,188 +1,254 @@
 /** @jsx React.DOM */
-
-var PermissionsTable = React.createClass({
-  render: function() {
-    var rows = [];
-    var resources = _.sortBy(this.props.resources, function(r){
-      return r.id; // this way it will be sorting by (kind, id)
+/* global conjur, React, jQuery, _ */
+
+(function(conjur, React, $, _) {
+    'use strict';
+
+    var ResourceLink = conjur.views.ResourceLink,
+        RoleLink = conjur.views.RoleLink;
+
+    var PermissionsTable = this.PermissionsTable = React.createClass({
+        render: function() {
+            var rows = [];
+
+            var resources = _.sortBy(this.props.resources, function(r) {
+                return r.id; // this way it will be sorting by (kind, id)
+            });
+
+            resources.forEach(function(r) {
+                var rowspan = r.permissions.length + 1,
+                    parts = r.id.split(':'),
+                    kind = parts[1]; // ignore env?
+
+                var cells = [
+                    (<td rowSpan={rowspan}> <ResourceLink id={r.id}/> </td>),
+                    (<td rowSpan={rowspan}> {kind} </td>)
+                ];
+
+                if (rowspan === 1) {
+                    cells.push(<td colSpan="3"> full permissions </td>);
+                }
+
+                rows.push(
+                    (<tr key={r.id}>{cells}</tr>)
+                );
+
+                if (rowspan > 1) {
+                    rows.push(r.permissions.map(function(p) {
+                        return (
+                          <PermissionRow data={p}/>
+                        );
+                    }));
+                }
+
+            });
+
+            rows = _.flatten(rows);
+
+            var showhidelink = (
+              <div>
+                <a onClick={this.props.hideHandler}>Hide all &laquo;</a>
+              </div>
+            );
+
+            if (this.props.tabview) {
+                showhidelink = '';
+            }
+
+            if (rows.length === 0) {
+                return (
+                  <span>None</span>
+                );
+            }
+
+            return (
+              <div>
+                {showhidelink}
+                <table>
+                  <thead>
+                    <tr>
+                      <th> Resource </th>
+                      <th> Kind </th>
+                      <th> Privilege </th>
+                      <th> Can Grant? </th>
+                      <th> Granted By </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows}
+                  </tbody>
+                </table>
+              </div>
+            );
+        }
     });
-    resources.forEach(function(r){
-      var rowspan = r.permissions.length + 1;
-      var parts = r.id.split(":");
-      var id = parts[2];
-      var kind = parts[1]; // ignore env?
-      var cells = [
-        <td rowSpan={rowspan}> <ResourceLink id={r.id}/> </td>,
-        <td rowSpan={rowspan}> {kind} </td>
-      ];
-      if(rowspan == 1){
-        cells.push(<td colSpan="3"> full permissions </td>);
-      }
-
-      rows.push(
-        <tr key={r.id}>{cells}</tr>
-      );
-
-      if(rowspan > 1){
-        rows.push(r.permissions.map(function(p){
-          return <PermissionRow data={p}/>
-        }));
-      }
 
-    });
-    rows = _.flatten(rows);
-
-    var showhidelink = <div><a onClick={this.props.hideHandler}>Hide all &laquo;</a></div>;
-
-    if (this.props.tabview) {
-        showhidelink="";
-    }
-
-    if (rows.length==0) {
-        return <span>None</span>;
-    }
-
-    return <div>
-      {showhidelink}
-      <table>
-        <thead>
-          <tr>
-            <th> Resource </th>
-            <th> Kind </th>
-            <th> Privilege </th>
-            <th> Can Grant? </th>
-            <th> Granted By </th>
-          </tr>
-        </thead>
-        <tbody> {rows} </tbody>
-      </table>
-    </div>
-  }
-});
-
-
-// Renders a permission as a tr
-var PermissionRow = React.createClass({
-  render: function(){
-    var p = this.props.data;
-    return <tr>
-        <td> { p.privilege } </td>
-        <td> { p.grant_option ? "yes" : "no" }</td>
-        <td> <RoleLink id={p.grantor}/> </td>
-      </tr>;
-  }
-});
-
-var PermissionsSummary = React.createClass({
-  render: function() {
-    var expand = "";
-    if ( this.props.length > 0 )
-      expand = <span>
-          <br/>
-          <span>
-            <a  onClick={this.props.expandHandler}>Show all &raquo;</a>
-          </span>
-        </span>;
-
-    return <div>
-      <span>
-        {this.props.length} permissions
-      </span>
-      {expand}
-    </div>
-  }
-});
-
-var Permissions = React.createClass({
-  getInitialState: function() {
-    return {resources: null, loaded: false, expand: false}
-  },
-
-  expand: function(event) {
-    this.setState({expand: true})
-  },
-
-  collapse: function(event) {
-    this.setState({expand: false})
-  },
-
-  componentWillMount: function() { // shouldn't it be done in model??? otherwise it will re-load stuff on each re-rendering of parent block
-  	if ( this.props.roles ) {
-	    $.get(this.url(), function(data){
-	      this.setPermissions(data);
-	    }.bind(this));
-  	}
-  },
-
-  setPermissions: function(_resources) {
-    /**
-     * Filter out owned resources.
-     * Filter out permissions on resources which are not held by the current role.
-     */
-    var resources;
-
-    if ( this.props.owned ) {
-      var ownedIds = _.pluck(this.props.owned, 'id');
-      resources = _resources.filter(function(r) {
-        return !_.contains(ownedIds, r.id);
-      });
-    }
-    else
-      resources = _resources;
-
-    var roleSet = {};
-    this.props.roles.forEach(function(r) {
-    	roleSet[r] = r;
-    });
 
-    var cleanResources = resources.filter(function(item) {
-    	return item.id.split(':')[1] !== "secret"; // assets of 'secret' kind are internal
+    // Renders a permission as a tr
+    var PermissionRow = React.createClass({
+        render: function() {
+            var p = this.props.data;
+
+            return (
+              <tr>
+                <td>{p.privilege}</td>
+                <td>{p.grant_option ? 'yes' : 'no'}</td>
+                <td><RoleLink id={p.grantor}/></td>
+              </tr>
+            );
+        }
     });
 
-    cleanResources.forEach(function(resource) {
-    	var permissions = resource.permissions;
-    	var hasPermissions = [];
-    	permissions.forEach(function(permission) {
-      	if ( roleSet.hasOwnProperty(permission['role']) )
-      		hasPermissions.push(permission);
-    	});
-    	resource.permissions = hasPermissions;
+    var PermissionsSummary = React.createClass({
+        render: function() {
+            var expand = '';
+
+            if (this.props.length > 0) {
+                expand = (
+                  <span>
+                    <br/>
+                    <span>
+                      <a  onClick={this.props.expandHandler}>Show all &raquo;</a>
+                    </span>
+                  </span>
+                );
+            }
+
+            return (
+              <div>
+                <span>
+                  {this.props.length} permissions
+                </span>
+                {expand}
+              </div>
+            );
+        }
     });
 
-    this.setState({resources: cleanResources, loaded: true});
-  },
-
-  render: function(){
-    var content;
-    if (this.state.loaded) {
-      if ( this.state.expand || this.props.tabview )
-        content = <PermissionsTable resources={this.state.resources} hideHandler={this.collapse} tabview={this.props.tabview}/>
-      else
-        content = <PermissionsSummary length={this.state.resources.length} expandHandler={this.expand} />
-    }
-    else {
-    	if ( this.props.roles )
-    		content = <span>Loading...</span>
-  		else
-  			content = "You are not authorized to see these permissions";
-    }
-
-    var cx = React.addons.classSet;
-    var classes = cx({
-      permissions: true,
-      loading: !this.state.loaded
+    this.Permissions = React.createClass({
+        getInitialState: function() {
+            return {resources: null, loaded: false, expand: false};
+        },
+
+        expand: function() {
+            this.setState({expand: true});
+        },
+
+        collapse: function() {
+            this.setState({expand: false});
+        },
+
+        componentWillMount: function() {
+            // shouldn't it be done in model??? otherwise it will
+            //  re-load stuff on each re-rendering of parent block
+  	    if (this.props.roles) {
+	        $.get(this.url(), function(data) {
+	            this.setPermissions(data);
+	        }.bind(this));
+  	    }
+        },
+
+        setPermissions: function(_resources) {
+            /**
+             * Filter out owned resources.
+             * Filter out permissions on resources which are not held by the current role.
+             */
+            var resources;
+
+            if (this.props.owned) {
+                var ownedIds = _.pluck(this.props.owned, 'id');
+
+                resources = _resources.filter(function(r) {
+                    return !_.contains(ownedIds, r.id);
+                });
+            } else {
+                resources = _resources;
+            }
+
+            var roleSet = {};
+
+            this.props.roles.forEach(function(r) {
+    	        roleSet[r] = r;
+            });
+
+            var cleanResources = resources.filter(function(item) {
+                // assets of 'secret' kind are internal
+    	        return item.id.split(':')[1] !== 'secret';
+            });
+
+            cleanResources.forEach(function(resource) {
+    	        var permissions = resource.permissions,
+    	            hasPermissions = [];
+
+    	        permissions.forEach(function(permission) {
+      	            if (roleSet.hasOwnProperty(permission.role)) {
+      		        hasPermissions.push(permission);
+                    }
+    	        });
+
+    	        resource.permissions = hasPermissions;
+            });
+
+            this.setState({resources: cleanResources, loaded: true});
+        },
+
+        render: function() {
+            var content;
+
+            if (this.state.loaded) {
+                if (this.state.expand || this.props.tabview) {
+                    content = (
+                      <PermissionsTable resources={this.state.resources}
+                                        hideHandler={this.collapse}
+                                        tabview={this.props.tabview} />
+                    );
+                } else {
+                    content = (
+                      <PermissionsSummary length={this.state.resources.length}
+                                          expandHandler={this.expand} />
+                    );
+                }
+            } else {
+    	        if (this.props.roles) {
+    		    content = (
+                      <span>Loading...</span>
+                    );
+  		} else {
+  		    content = 'You are not authorized to see these permissions';
+                }
+            }
+
+            var cx = React.addons.classSet;
+
+            var classes = cx({
+                permissions: true,
+                loading: !this.state.loaded
+            });
+
+            var permissionsheader = this.props.tabview ? '' : (<h3>Permissions held</h3>);
+
+            return (
+              <section className={classes}>
+               {permissionsheader}
+               <div id="permissionDetails">
+                 {content}
+               </div>
+             </section>
+            );
+        },
+
+        url: function() {
+            return '/api/authz/' +
+                conjur.app.configuration.account +
+                '/resources?acting_as=' +
+                this.props.role;
+        }
     });
 
-    var permissionsheader = this.props.tabview ? "" : <h3>Permissions held</h3>;
-    return <section className={classes}>
-      {permissionsheader}
-      <div id="permissionDetails">
-        {content}
-      </div>
-    </section>;
-  },
-
-  url: function(){
-    return "/api/authz/" + conjur.app.configuration.account + "/resources?acting_as=" + this.props.role;
-  }
-})
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    jQuery,
+    _
+);

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={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">
                 <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,54 @@
 /** @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;
+
+            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,
+    _
+);