conjur-asset-ui 1.3.0

data/public/js/views/owned.js

@@ -0,0 +1,178 @@
+/** @jsx React.DOM */
+
+(function(conjur, _, React) {
+    'use strict';
+
+    var knownTypes = ['user', 'group', 'layer', 'host', 'variable', 'policy'];
+
+    var OwnedResourcesBox = this.OwnedResourcesBox = React.createClass({
+        getInitialState: function() {
+            return {
+                filter: ''
+            };
+        },
+
+        handleChange: function(e) {
+            e.preventDefault();
+
+            this.setState({filter: e.target.value});
+        },
+
+        render: function() {
+            var filters = [];
+
+            if (!this.props.resources) {
+                return (
+                  <span>None</span>
+                );
+            }
+
+            var items = this.props.resources
+                    .sort(function(a, b) {
+                        // TODO: sort by kind with custom weights, by id, by creation date
+                        // automatically gives sort by kind, id
+                        return a.id.toLowerCase().localeCompare(b.id.toLowerCase());
+                    }).map(function(resource) {
+                        var kind = resource.id.split(':')[1];
+                        filters.push(kind);
+
+                        if ((this.state.filter === '')
+                            || (this.state.filter != 'other' && this.state.filter === kind)
+                            || (this.state.filter === 'other' && _.intersection([kind], knownTypes).length === 0)) {
+                            return (
+                              <li className="list-group-item list-group-item-noborder">
+                                <ResourceLink data={resource} />
+                              </li>
+                            );
+                        }
+
+                        return '';
+                    }.bind(this));
+
+            var toggleButton = '';
+
+            if (!this.props.tabview) {
+                toggleButton = (
+                  <div className="hide-all">
+                    <a onClick={this.props.handler}>Hide all &laquo;</a>
+                  </div>
+                );
+            }
+
+            var filterSelect = '';
+
+            if (this.props.resources.length > 9 || this.state.filter != '') {
+                // TODO: sort, when done with previous TODO
+                filterSelect = _.intersection(_.uniq(filters, true), knownTypes).map(function(f) {
+                    return (
+                        <option value={f}>{_.str.capitalize(conjur.utils.pluralize(f))}</option>
+                    );
+                });
+
+                filterSelect = (
+                  <div className="form-group row">
+                    <div className="col-xs-3">
+                      <select className="form-control" type="select" ref="filter"
+                              value={this.state.filter} onChange={this.handleChange}>
+                        <option value="">Show all</option>
+                        {filterSelect}
+                        <option value="other">Other</option>
+                      </select>
+                    </div>
+                  </div>
+                );
+            }
+
+            return (
+              <div className="owned">
+                {toggleButton}
+                {filterSelect}
+                <ul className="list-group">{items}</ul>
+              </div>
+            );
+        }
+    });
+
+    var OwnedResourcesSummary = React.createClass({
+        render: function() {
+            var expand = '';
+
+            if (this.props.length > 0) {
+                expand = (
+                  <span>
+                    <br/>
+                    <span>
+                      <a onClick={this.props.handler}>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 = this.OwnedResources = React.createClass({
+        getInitialState: function() {
+            return {
+                expanded: false
+            };
+        },
+
+        toggle: function(e) {
+            e.preventDefault();
+
+            this.setState({expanded: !this.state.expanded});
+        },
+
+        render: function() {
+            var content = null;
+
+            if (this.state.expanded || this.props.tabview) {
+                content = (
+                  <OwnedResourcesBox resources={this.props.owned}
+                                     handler={this.toggle}
+                                     tabview={this.props.tabview} />
+                );
+
+            } else {
+                content = (
+                  <OwnedResourcesSummary length={this.props.owned.length}
+                                         handler={this.toggle} />
+                );
+            }
+
+            var ownedheader = this.props.tabview ? '': (<h3>Owned assets</h3>);
+
+            return (
+              <section className="owned row">
+                {ownedheader}
+                <div id="ownedDetails" className="col-xs-6">
+                  {content}
+                </div>
+              </section>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    _,
+    React
+);

data/public/js/views/permissions.js

@@ -0,0 +1,188 @@
+/** @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)
+    });
+    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
+    });
+
+    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;
+    });
+
+    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;
+  }
+})

data/public/js/views/policies.js

@@ -0,0 +1,28 @@
+/** @jsx React.DOM */
+
+(function(conjur, React) {
+    'use strict';
+
+    var GenericList = conjur.views.GenericList;
+
+    var PolicyBox = this.PolicyBox = React.createClass({
+        /*getInitialState: function() {
+         return { currentNamespace: "", members: [] };
+         },*/
+        render: function() {
+            return (
+              <div className="policyBox">
+                <div className="policyList">
+                  <h2>Policies</h2>
+                  <GenericList data={{kind: 'policies', members: this.props.data.members}} />
+                </div>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React
+);

data/public/js/views/policy.js

@@ -0,0 +1,43 @@
+/** @jsx React.DOM */
+
+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( [ 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

@@ -0,0 +1,39 @@
+/** @jsx React.DOM */
+
+/**
+ 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
+            }
+        }
+    } 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/role.js

@@ -0,0 +1,41 @@
+/** @jsx React.DOM */
+
+/** 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
+            }
+        }
+    } 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

@@ -0,0 +1,145 @@
+/**@jsx React.DOM*/
+
+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;
+    });
+    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];
+    });
+    // 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>
+    );
+  }
+});
+
+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);
+  });
+}

data/public/js/views/time.js

@@ -0,0 +1,14 @@
+/** @jsx React.DOM */
+  
+// render a <time> tag. props.timestamp should be a timestamp
+// that moment can parse, props.format should be one of the
+// format strings accepted by moment (optional).
+var Time = React.createClass({
+  render: function(){
+    var timestamp = this.props.timestamp;
+    var format = this.props.format || 'lll';
+    var m = moment(timestamp);
+    
+    return <time dateTime={m.format()}>{m.format(format)}</time>;
+  }
+})