conjur-asset-ui-api 1.1.1 → 1.2.0

data/public/js/views/dashboard.js

@@ -3,9 +3,9 @@
 var DashboardSearchForm = React.createClass({
   mixins: [ SearchMixin ],
   
-  render: function(){
+  render: function() {
     return ( 
-    <form className="form-inline search" role="search" onSubmit={this.handleSubmit}>
+    <form id="dashboard-search" className="form-inline search" role="search" onSubmit={this.handleSubmit}>
       <div className="form-group">
         <input ref="input" type="text" className="form-control" placeholder="Search Conjur" value={this.props.searchText}>
         </input>
@@ -16,6 +16,31 @@ var DashboardSearchForm = React.createClass({
   }
 });
 
+var DashboardFrequent = React.createClass({
+  getInitialState: function() {
+    return {resources: [], loaded: false}
+  },
+
+  componentWillMount: function() {
+    $.get("/api/authz/" + conjurConfiguration.account + "/resources?owner=" + encodeURIComponent(userId), function(data) {
+      this.setState({resources: data, loaded: true});
+    }.bind(this));
+  },
+
+  render: function() {
+    var content;
+    if (this.state.loaded)
+      content = <OwnedResourcesBox resources={this.state.resources} />
+    else
+      content = <span>Loading...</span>
+    
+    return <section>
+      <h3>Owned assets</h3>
+      {content}
+    </section>;
+  }  
+});
+
 var Dashboard = React.createClass({
   render: function(){
     return (
@@ -23,10 +48,12 @@ var Dashboard = React.createClass({
         <div className="row">
           <DashboardSearchForm />
         </div>
-        <div className="summary">
-          <div className="row">
+        <div className="row summary">
+          <div className="col-xs-6">
+            <DashboardFrequent />
           </div>
-          <div className="row">
+          <div className="col-xs-6 audit">
+            <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
           </div>
         </div>
       </div>

data/public/js/views/group.js

@@ -22,7 +22,8 @@ var Group = React.createClass({
             </ul>
           </dd>
         </dl>
-        <Permissions role={group.roleid}/>
+        <OwnedResources owned={this.props.data.owned} /> 
+        <Permissions owned={this.props.data.owned} role={group.roleid}/>
         <div className="audit auditGroup">
           <AuditBox roles={[resourceId]} resources={[resourceId]}/>
         </div>

data/public/js/views/host.js

@@ -20,7 +20,7 @@ var HostLink = React.createClass({
 
 var Host = React.createClass({
   render: function(){
-    var host = this.props.data;
+    var host = this.props.data.host;
     return (
       <div className="host">
         <h2> Host {host.id} </h2>
@@ -30,7 +30,8 @@ var Host = React.createClass({
           <dt> Created At </dt>
           <dd> <Time timestamp={host.created_at}/> </dd>
         </dl>
-        <Permissions role={host.roleid}/>
+        <OwnedResources owned={this.props.data.owned} /> 
+        <Permissions owned={this.props.data.owned} role={host.roleid}/>
         <div className="audit auditHost">
           <AuditBox roles={[host.roleid]} resources={[host.resource_identifier]}/>
         </div>

data/public/js/views/layer.js

@@ -13,8 +13,7 @@ var Layer = React.createClass({
     }
     
     var layer = this.props.data.layer;
-    
-    
+       
     var hosts = layer.hosts.map(function (host) {
       return <li>
         <HostLink data={host} />
@@ -53,7 +52,8 @@ var Layer = React.createClass({
             </ul>
           </dd>
         </dl>
-        <Permissions role={layer.roleid}/>
+        <OwnedResources owned={this.props.data.owned} /> 
+        <Permissions owned={this.props.data.owned} role={layer.roleid}/>
         <div className="audit auditLayer">
           <AuditBox roles={[layer.roleid]} resources={[layer.resource_identifier]}/>
         </div>

data/public/js/views/owned.js

@@ -0,0 +1,77 @@
+/** @jsx React.DOM */
+
+var OwnedResourcesBox = React.createClass({
+  render: function() {
+    var items = this.props.resources.map(function(resource) {
+      return <li>
+          <ResourceLink data={resource} />
+        </li>
+    });
+    
+    return <div className="owned">
+      <div className="hide-all">
+        <a onClick={this.props.hideHandler}>Hide all &laquo;</a>
+      </div>
+      <ul>
+        {items}
+      </ul>
+    </div>
+  }
+});
+
+var OwnedResourcesSummary = 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>;
+    
+    var message = "";
+    if ( this.props.length === 0 )
+      message = "none";
+    else
+      message = "" + this.props.length + " things";
+    
+    return <div>
+      <span>
+        {message}
+      </span>
+      {expand}
+    </div>
+  }
+});
+
+var OwnedResources = React.createClass({
+  getInitialState: function() {
+    return { expand: false }
+  },
+  
+  expand: function(event) {
+    this.setState({expand: true})
+  },
+  
+  collapse: function(event) {
+    this.setState({expand: false})
+  },
+  
+  render: function() {
+    var owned = this.props.owned;
+    
+    var content = null;
+    if ( this.state.expand )
+      content = <OwnedResourcesBox resources={owned} hideHandler={this.collapse} />
+    else
+      content = <OwnedResourcesSummary length={owned.length} expandHandler={this.expand} />
+
+    return <section className="owned">
+      <h3>Owned assets</h3>
+      <div id="ownedDetails">
+        {content}
+      </div>
+    </section>;
+  }
+});

data/public/js/views/permissions.js

@@ -1,33 +1,9 @@
 /** @jsx React.DOM */
 
-// 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 Permissions = React.createClass({
-  getInitialState: function(){
-    return {resources: [], loaded: false}
-  },
-  
-  componentWillMount: function(){
-    $.get(this.url(), function(data){
-      this.setState({resources: data, loaded: true});
-    }.bind(this));
-  },
-  
-  render: function(){
-    
+var PermissionsTable = React.createClass({
+  render: function() {
     var rows = [];
-    var resources = _.sortBy(this.state.resources, function(r){
+    var resources = _.sortBy(this.props.resources, function(r){
       return r.id.split(':')[2];
     });
     resources.forEach(function(r){
@@ -56,11 +32,11 @@ var Permissions = React.createClass({
     });
     rows = _.flatten(rows);
 
-    console.log("rows", rows);
-
-    var contents;
-    if (this.state.loaded) {
-      contents = (<table>
+    return <div>
+      <div>
+        <a onClick={this.props.hideHandler}>Hide all &laquo;</a>
+      </div>
+      <table>
         <thead>
           <tr>
             <th> Resource </th>
@@ -71,17 +47,103 @@ var Permissions = React.createClass({
           </tr>
         </thead>
         <tbody> {rows} </tbody>
-      </table>);
-    }
+      </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: [], loaded: false, expand: false}
+  },
+
+  expand: function(event) {
+    this.setState({expand: true})
+  },
+  
+  collapse: function(event) {
+    this.setState({expand: false})
+  },
+  
+  componentWillMount: function() {
+    $.get(this.url(), function(data){
+      this.setPermissions(data);
+    }.bind(this));
+  },
+  
+  setPermissions: function(_resources) {
+    /**
+     * Filter out owned resources
+     */
+    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;
+    
+    this.setState({resources: resources, loaded: true});
+  },
+  
+  render: function(){
+    var content;
+    if (this.state.loaded) {
+      if ( this.state.expand )
+        content = <PermissionsTable resources={this.state.resources} hideHandler={this.collapse} />
+      else
+        content = <PermissionsSummary length={this.state.resources.length} expandHandler={this.expand} />
+    }
+    else {
+      content = <span>Loading...</span>
+    }
+    
     var cx = React.addons.classSet;
     var classes = cx({
       permissions: true,
       loading: !this.state.loaded
     });
     return <section className={classes}>
-      <h3>Permissions held by {this.props.role}</h3>
-      {contents}
+      <h3>Permissions held</h3>
+      <div id="permissionDetails">
+        {content}
+      </div>
     </section>;
   },
   

data/public/js/views/resource.js

@@ -9,6 +9,9 @@
 var ResourceLink = React.createClass({
   render: function(){
     var resourceId = this.props.data;
+    if ( resourceId.id )
+      resourceId = resourceId.id;
+    
     var tokens = resourceId.split(':');
     var kind = tokens[1];
     var id = tokens[tokens.length - 1];

data/public/js/views/user.js

@@ -2,8 +2,7 @@
 
 var User = React.createClass({
   render: function(){
-    var user = this.props.data;
-    console.log("render User data=", user);
+    var user = this.props.data.user;
     return (
       <div className="user">
         <h2> User {user.login} </h2>
@@ -11,12 +10,12 @@ var User = React.createClass({
           <dt> Owner </dt>
           <dd><RoleLink id={user.ownerid}/></dd>
         </dl>
-        <Permissions role={user.roleid}/>
+        <OwnedResources owned={this.props.data.owned} /> 
+        <Permissions owned={this.props.data.owned} role={user.roleid}/>
         <div className="audit auditGroup">
           <AuditBox roles={[user.roleid]} resources={[user.resource_identifier]}/>
         </div>
       </div>
-      
     );
   }
 });

data/spec/javascripts/support/jasmine.yml

@@ -0,0 +1,112 @@
+# src_files
+#
+# Return an array of filepaths relative to src_dir to include before jasmine specs.
+# Default: []
+#
+# EXAMPLE:
+#
+# src_files:
+#   - lib/source1.js
+#   - lib/source2.js
+#   - dist/**/*.js
+#
+src_files:
+  - public/js/**/*.js
+
+# stylesheets
+#
+# Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs.
+# Default: []
+#
+# EXAMPLE:
+#
+# stylesheets:
+#   - css/style.css
+#   - stylesheets/*.css
+#
+stylesheets:
+  - stylesheets/**/*.css
+
+# helpers
+#
+# Return an array of filepaths relative to spec_dir to include before jasmine specs.
+# Default: ["helpers/**/*.js"]
+#
+# EXAMPLE:
+#
+# helpers:
+#   - helpers/**/*.js
+#
+helpers:
+  - 'helpers/**/*.js'
+
+# spec_files
+#
+# Return an array of filepaths relative to spec_dir to include.
+# Default: ["**/*[sS]pec.js"]
+#
+# EXAMPLE:
+#
+# spec_files:
+#   - **/*[sS]pec.js
+#
+spec_files:
+  - '**/*[sS]pec.js'
+
+# src_dir
+#
+# Source directory path. Your src_files must be returned relative to this path. Will use root if left blank.
+# Default: project root
+#
+# EXAMPLE:
+#
+# src_dir: public
+#
+src_dir: public
+
+# spec_dir
+#
+# Spec directory path. Your spec_files must be returned relative to this path.
+# Default: spec/javascripts
+#
+# EXAMPLE:
+#
+# spec_dir: spec/javascripts
+#
+spec_dir:
+
+# spec_helper
+#
+# Ruby file that Jasmine server will require before starting.
+# Returned relative to your root path
+# Default spec/javascripts/support/jasmine_helper.rb
+#
+# EXAMPLE:
+#
+# spec_helper: spec/javascripts/support/jasmine_helper.rb
+#
+spec_helper: spec/javascripts/support/jasmine_helper.rb
+
+# boot_dir
+#
+# Boot directory path. Your boot_files must be returned relative to this path.
+# Default: Built in boot file
+#
+# EXAMPLE:
+#
+# boot_dir: spec/javascripts/support/boot
+#
+boot_dir:
+
+# boot_files
+#
+# Return an array of filepaths relative to boot_dir to include in order to boot Jasmine
+# Default: Built in boot file
+#
+# EXAMPLE
+#
+# boot_files:
+#   - '**/*.js'
+#
+boot_files:
+