searchResults.js in conjur-asset-ui-1.3.1

- old
+ new
@@ -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 + ')';
-  }
-});
+(function(conjur, React, $, _) {
+    'use strict';
 
-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>;
-  },
+    var ResourceLink = conjur.views.ResourceLink,
+        RoleLink = conjur.views.RoleLink;
 
-  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 SearchGroupTitle = React.createClass({
+        render: function() {
+            return (
+              <span>{this.title()}</span>
+            );
+        },
 
-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>;
-  },
+        title: function() {
+            var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
 
-  commentText: function(){
-    var annots = this.annotationsMap();
-    return annots['description'] || "";
-  },
+            words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
 
-  titleLink: function(){
-    var annots = this.annotationsMap();
-    return <ResourceLink data={this.props.data.id} text={annots['name']}/>
-  },
+            return (
+                words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
+            );
+        }
+    });
 
-  annotationsMap: function(){
-    if(this._annotationsMap) return this._annotationsMap;
-    var map = this._annotationsMap = {};
-    (this.props.data.annotations || []).forEach(function(a){
-      map[a.name] = a.value;
+    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 + ')'
+            );
+        }
     });
-    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 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>
+            );
+        },
 
-var SearchResults = React.createClass({
-  render: function() {
-    var results = this.props.data.results;
-    var grouped = _.groupBy(results, function(r){
-      return r.id.split(':')[1];
+        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;
+        }
     });
-    // 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}/>
+    // 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 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 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 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){
+    SearchResults.search = function(search, container) {
+        container = container || document.getElementById('content');
 
-    var data = {search: search, results: results};
-    React.renderComponent(<SearchResults data={data}/>, container);
-  });
-}
+        $.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,
+    _
+);