conjur-asset-ui-api 1.1.0

data/public/js/views/layers.js

@@ -0,0 +1,18 @@
+/** @jsx React.DOM */
+
+var LayerBox = React.createClass({
+  getInitialState: function() {
+    return { currentNamespace: "", members: [] };
+  },
+  render: function() {
+    return (
+      <div className="layerBox">
+        <NamespaceFilter currentNamespace={this.state.currentNamespace} namespaces={this.props.data.namespaces} />
+        <div className="layerList">
+          <h2>Layers</h2>
+          <GenericList data={{kind: "layers", members: this.state.members}} />
+        </div>
+      </div>
+    );
+  }
+});

data/public/js/views/mixins/search.js

@@ -0,0 +1,9 @@
+var SearchMixin = {
+  handleSubmit: function(e){
+    var search = this.refs.input.getDOMNode().value;
+    if(search && search.length != 0){
+      router.navigate("/ui/search/" + encodeURIComponent(search), {trigger: true});
+    }
+    return false;
+  }
+};

data/public/js/views/namespaces.js

@@ -0,0 +1,40 @@
+/** @jsx React.DOM */
+
+var NamespaceFilter = React.createClass({
+  render: function() {
+    return(
+      <div className="namespaceList">
+        <h2>Namespace filter:</h2>
+        { this.transferPropsTo(<NamespaceList />) }
+      </div>
+    );
+  }
+});
+
+var NamespaceListItem = React.createClass({
+  render: function() {
+    return (
+      <option value={this.props.id}>{this.props.id}</option>
+    );
+  }
+});
+
+var NamespaceList = React.createClass({
+  handleChange: function(e) {
+    var value = e.target.options[e.target.selectedIndex].value;
+    updateNamespace(value);
+  },
+  render: function() {
+    var namespaces = this.props.namespaces.map(function (namespace) {
+      return <NamespaceListItem id={namespace}/>;
+    }).sort();
+    return (
+      <div>
+        <select onChange={this.handleChange} value={this.props.currentNamespace}>
+          <option value="" />
+          {namespaces}
+        </select>
+      </div>
+    );
+  }
+});

data/public/js/views/navSearch.js

@@ -0,0 +1,16 @@
+/**@jsx React.DOM*/
+
+var NavSearchForm = React.createClass({
+  mixins: [ SearchMixin ],
+  
+  render: function(){
+    return ( 
+    <form className="form-inline navbar-form" role="search" onSubmit={this.handleSubmit}>
+      <div className="form-group">
+        <input ref="input" type="text" className="form-control" placeholder="Search Conjur"></input>
+       </div>
+      <button type="submit" className="btn btn-default search-button">Search</button>
+    </form>
+    );
+  }
+});

data/public/js/views/permissions.js

@@ -0,0 +1,91 @@
+/** @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 rows = [];
+    var resources = _.sortBy(this.state.resources, function(r){
+      return r.id.split(':')[2];
+    });
+    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 data={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);
+
+    console.log("rows", rows);
+
+    var contents;
+    if (this.state.loaded) {
+      contents = (<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>);
+    }
+
+    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}
+    </section>;
+  },
+  
+  url: function(){
+    return "/api/authz/" + conjurConfiguration.account + "/resources?acting_as=" + this.props.role;
+  }
+})

data/public/js/views/policies.js

@@ -0,0 +1,17 @@
+/** @jsx React.DOM */
+
+var 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.state.members}} />
+        </div>
+      </div>
+    );
+  }
+});

data/public/js/views/policy.js

@@ -0,0 +1,23 @@
+/** @jsx React.DOM */
+
+var Policy = React.createClass({
+  render: function() {
+    var id = this.props.policy.id.split(':')[2];
+    
+    return (
+      <div className="variable">
+        <h2>Policy {id}</h2>
+        <dl>
+          <dt>Owner</dt>
+          <dd><RoleLink id={this.props.policy.id}/></dd>
+        </dl>
+
+        <Permissions role={this.props.policy.id}/>
+
+        <div className="audit auditPolicy">
+          <AuditBox roles={[this.props.policy.id]} />
+        </div>
+      </div>
+    );
+  }
+});

data/public/js/views/resource.js

@@ -0,0 +1,23 @@
+/** @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.data;
+    var tokens = resourceId.split(':');
+    var kind = tokens[1];
+    var id = tokens[tokens.length - 1];
+    var text = this.props.text || id;
+    var href = "/ui/" + pluralize(kind) + "/" + encodeURIComponent(id);
+    var classes = ['resource-link'];
+    if(!this.props.noIcon){
+      classes.push(kind);
+    }
+    return <a className={classes.join(' ')} href={href}>{text}</a>
+  }
+});

data/public/js/views/role.js

@@ -0,0 +1,18 @@
+/** @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];
+    var href = "/ui/" + pluralize(kind) + "/" + encodeURIComponent(id);
+    var classes = ['role-link'];
+    if(!this.props.noIcon) classes.push(kind)
+    return <a className={classes.join(' ')} href={href}>
+        {id}
+      </a>;
+  }
+});

data/public/js/views/searchResults.js

@@ -0,0 +1,146 @@
+/**@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] = 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] = 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':   0,
+      'layer':    1,
+      'group':    2,
+      'host':     3,
+      'user':     4,
+      'variable': 5,
+      'key_pair': 6
+    };
+    
+    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(endpoints.authz("resources", {search: search}), 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>;
+  }
+})

data/public/js/views/user.js

@@ -0,0 +1,22 @@
+/** @jsx React.DOM */
+
+var User = React.createClass({
+  render: function(){
+    var user = this.props.data;
+    console.log("render User data=", user);
+    return (
+      <div className="user">
+        <h2> User {user.login} </h2>
+        <dl>
+          <dt> Owner </dt>
+          <dd><RoleLink id={user.ownerid}/></dd>
+        </dl>
+        <Permissions role={user.roleid}/>
+        <div className="audit auditGroup">
+          <AuditBox roles={[user.roleid]} resources={[user.resource_identifier]}/>
+        </div>
+      </div>
+      
+    );
+  }
+});