public/js/views/searchResults.js in conjur-asset-ui-1.3.1 vs public/js/views/searchResults.js in conjur-asset-ui-1.3.2
- old
+ new
@@ -1,212 +1,145 @@
/**@jsx React.DOM*/
-/* global conjur, React, jQuery, _ */
+var SearchGroupTitle = React.createClass({
+ render: function(){
+ return <span>{this.title()}</span>
+ },
-(function(conjur, React, $, _) {
- 'use strict';
+ 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 ResourceLink = conjur.views.ResourceLink,
- RoleLink = conjur.views.RoleLink;
+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 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 + ')';
+ }
+});
- title: function() {
- var words = this.props.data.kind.replace(/[-_]/, ' ').split(' ');
+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>;
+ },
- words[words.length - 1] = conjur.utils.pluralize(words[words.length - 1]);
+ commentText: function(){
+ var annots = this.annotationsMap();
+ return annots['description'] || "";
+ },
- return (
- words.map(_.str.capitalize).join(' ') + ' (' + this.props.data.items.length + ')'
- );
- }
- });
+ titleLink: function(){
+ var annots = this.annotationsMap();
+ return <ResourceLink data={this.props.data.id} text={annots['name']}/>
+ },
- 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 + ')'
- );
- }
+ 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 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>
- );
- },
+// 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>;
+ }
+});
- 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 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']
- // 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 groups = _.map(grouped,function(items, key){
+ var data = {items:items, kind: key}; // - prevent editor barfing
+ return <SearchGroup data={data}/>
});
-
- 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 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');
+SearchResults.search = function(search, container){
+ container = container || document.getElementById('content');
+ $.get(conjur.app.endpoints.authz("resources", {search: search.replace('-',' ')}), function(results){
- $.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,
- _
-);
+ var data = {search: search, results: results};
+ React.renderComponent(<SearchResults data={data}/>, container);
+ });
+}