conjur-asset-ui 1.3.0 → 1.3.1

data/public/js/views/role.js

@@ -1,41 +1,56 @@
 /** @jsx React.DOM */
+/* global conjur, React, _ */
 
-/** 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
+(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];
             }
+
+            // 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>
+            );
         }
-    } 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,
+    _
+);

data/public/js/views/searchResults.js

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

data/public/js/views/time.js

@@ -1,14 +1,27 @@
 /** @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>;
-  }
-})
+/* global conjur, React, moment */
+
+(function(conjur, React, moment) {
+    'use strict';
+
+    // 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).
+    this.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>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    moment
+);