conjur-asset-ui 1.3.1 → 1.3.2

data/public/js/views/dashboard.js

@@ -1,103 +1,67 @@
 /**@jsx React.DOM*/
-/* global conjur, React, jQuery */
 
-(function(conjur, React, $) {
-    'use strict';
+var DashboardSearchForm = React.createClass({
+  mixins: [ conjur.views.mixins.Search ],
 
-    var OwnedResourcesBox = conjur.views.OwnedResourcesBox,
-        Search = conjur.views.mixins.Search;
+  render: function() {
+    return (
+    <form id="dashboard-search" className="form-inline search" role="search" onSubmit={this.handleSubmit}>
+      <div className="form-group">
+        <input ref="input" type="text" className="form-control" placeholder="Search Conjur" value={this.props.searchText}>
+        </input>
+       </div>
+      <button type="submit" className="btn btn-default search-button">Search</button>
+    </form>
+    );
+  }
+});
 
-    var DashboardSearchForm = React.createClass({
-        mixins: [Search],
+var DashboardFrequent = React.createClass({
+  getInitialState: function() {
+    return {resources: [], loaded: false}
+  },
 
-        render: function() {
-            return (
-              <form id="dashboard-search"
-                    className="form-inline search"
-                    role="search"
-                    onSubmit={this.handleSubmit}>
-                <div className="form-group">
-                  <input ref="input"
-                         type="text"
-                         className="form-control"
-                         placeholder="Search Conjur"
-                         value={this.props.searchText} />
-                </div>
-                <button type="submit" className="btn btn-default search-button">
-                  Search
-                </button>
-              </form>
-            );
-        }
-    });
+  componentWillMount: function() {
+    $.get("/api/authz/" + conjur.app.configuration.account + "/resources?owner=" + encodeURIComponent(conjur.app.userId), function(data) {
+      var filtered_data = data.filter( function(item) {
+                   return item.id.split(':')[1]!="secret"; // assets of 'secret' kind are internal
+                });
+      this.setState({resources: filtered_data, loaded: true});
+    }.bind(this));
+  },
 
-    var DashboardFrequent = React.createClass({
-        getInitialState: function() {
-            return {resources: [], loaded: false};
-        },
+  render: function() {
+    var content,
+        OwnedResourcesBox = conjur.views.OwnedResourcesBox;
 
-        componentWillMount: function() {
-            $.get('/api/authz/' +
-                  conjur.app.configuration.account +
-                  '/resources?owner=' +
-                  encodeURIComponent(conjur.app.userId),
-                  function(data) {
-                      var filteredData = data.filter(function(item) {
-                          // assets of 'secret' kind are internal
-                          return item.id.split(':')[1] !== 'secret';
-                      });
+    if (this.state.loaded)
+      content = <OwnedResourcesBox resources={this.state.resources} />
+    else
+      content = <span>Loading...</span>
 
-                      this.setState({resources: filteredData, loaded: true});
-                  }.bind(this));
-        },
+    return <section>
+      <h3>Owned assets</h3>
+      {content}
+    </section>;
+  }
+});
 
-        render: function() {
-            var content;
-
-            if (this.state.loaded) {
-                content = (
-                  <OwnedResourcesBox resources={this.state.resources} />
-                );
-            } else {
-                content = (
-                  <span>Loading...</span>
-                );
-            }
-
-            return (
-              <section>
-                <h3>Owned assets</h3>
-                {content}
-              </section>
-            );
-        }
-    });
-
-    this.Dashboard = React.createClass({
-        render: function() {
-            var AuditTable = window.AuditTable;
-
-            return (
-              <div className="dashboard">
-                <div className="row">
-                  <DashboardSearchForm />
-                </div>
-                <div className="row summary">
-                  <div className="col-xs-6">
-                    <DashboardFrequent />
-                  </div>
-                  <div className="col-xs-6 audit">
-                    <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
-                  </div>
-                </div>
-              </div>
-            );
-        }
-    });
-
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    jQuery
-);
+var Dashboard = React.createClass({
+  render: function(){
+    return (
+      <div className="dashboard">
+        <div className="row">
+          <DashboardSearchForm />
+        </div>
+        <div className="row summary">
+          <div className="col-xs-6">
+            <DashboardFrequent />
+          </div>
+          <div className="col-xs-6 audit">
+            <AuditTable src={'/api/audit/all'} caption={'Recent activity'} compact={true}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

data/public/js/views/generic.js

@@ -1,17 +1,14 @@
 /** @jsx React.DOM */
-/* global conjur, React, _ */
 
-(function(conjur, React, _) {
+(function(conjur, React) {
     'use strict';
 
-    var RoleLink = conjur.views.RoleLink;
-
     var GenericListItem = React.createClass({
         render: function() {
-            var recordUrl = '/ui/' +
-                    this.props.data.kind +
-                    '/' +
-                    window.encodeURIComponent(this.props.data.record.identifier);
+            var recordUrl = '/ui/'
+                    + this.props.data.kind
+                    + '/'
+                    + window.encodeURIComponent(this.props.data.record.identifier);
 
             return (
               <tr>
@@ -28,7 +25,7 @@
         }
     });
 
-    this.GenericList = React.createClass({
+    var GenericList = this.GenericList = React.createClass({
         getInitialState: function() {
             return {
                 sort: {
@@ -56,7 +53,7 @@
 
                 var order = (this.state.sort.order === 'asc') ? 'desc' : 'asc';
 
-                if (this.state.sort.column !== column) {
+                if (this.state.sort.column != column) {
                     order = this.state.columns[column].defaultSortOrder;
                 }
 
@@ -77,10 +74,7 @@
             });
 
             items = _.sortBy(items, this.state.sort.column);
-
-            if (this.state.sort.order === 'desc') {
-                items.reverse();
-            }
+            if (this.state.sort.order === 'desc') items.reverse();
 
             var rows = items.map(function (o) {
                 var componentName = _.str.capitalize(
@@ -117,6 +111,5 @@
 }).bind(conjur.views)
 (
     conjur,
-    React,
-    _
+    React
 );

data/public/js/views/group.js

@@ -1,100 +1,61 @@
 /** @jsx React.DOM */
-/* global conjur, React, ReactBootstrap, _ */
 
-(function(conjur, React, ReactBootstrap, _) {
-    'use strict';
-
-    var TabbedArea = ReactBootstrap.TabbedArea,
-        TabPane = ReactBootstrap.TabPane,
-        Tab = conjur.views.mixins.Tab,
-        AuditBox = window.AuditBox,
-        RoleLink = conjur.views.RoleLink;
-
-    this.Group = React.createClass({
-        mixins: [Tab],
-
-        render: function() {
-            var data = this.props.data;
-
-            var members = data.members.map(function(member) {
-                return (
-                  <li className="list-group-item list-group-item-noborder">
-                    <RoleLink id={member.member} />
-                  </li>
-                );
-            });
-
-            var resourceId = [
-                conjur.app.configuration.account,
-                'group',
-                data.group.id
-            ].join(':');
-
-            var group = data.group;
-
-            // TODO: refactor (common code should go to mixins)
-            // TODO: memberships
-            // TODO: controls for members management
-            var overviewTab =(
-              <TabPane key="overview" tab="Overview">
+var Group = React.createClass({
+  mixins: [conjur.views.mixins.Tab],
+  render: function() {
+    var members = this.props.data.members.map(function (member) {
+      return <li className="list-group-item list-group-item-noborder">
+        <RoleLink id={member.member} />
+      </li>
+    }.bind(this));
+    var resourceId = [ conjur.app.configuration.account, 'group', this.props.data.group.id ].join(':')
+    var group = this.props.data.group;
+
+
+    // TODO: refactor (common code should go to mixins)
+    // TODO: memberships
+    // TODO: controls for members management
+    var overview_tab =
+            <TabPane key="overview" tab="Overview">
                 <dl className="dl-horizontal">
                   <dt>Created by</dt>
-                  <dd><RoleLink id={group.userid} /></dd>
-
+                  <dd><RoleLink id={group.userid}/></dd>
                   <dt>Owner</dt>
-                  <dd><RoleLink id={data.group.ownerid} /></dd>
+                  <dd><RoleLink id={this.props.data.group.ownerid}/></dd>
                 </dl>
-              </TabPane>
-            );
-
-            var membersTab = (
-              <TabPane key="members" tab={conjur.utils.getTabname('Members', members)}>
-                <ul className="list-group">
-                  {members}
-                </ul>
-              </TabPane>
-            );
-
-            var ownedTab = this.ownedTab(),
-                membershipsTab = this.membershipsTab(group.roleid),
-                permissionsTab = this.permissionsTab(group.roleid),
-                annotationsTab = this.annotationsTab();
-
-            var auditTab = (
-              <TabPane key="audit" tab="Recent Activity">
-                <div className="audit auditGroup">
-                  <AuditBox roles={[resourceId]}
-                            resources={[resourceId]}
-                            tabview={true} />
-                </div>
-              </TabPane>
-            );
-
-            var tabs = _.compact([
-                overviewTab,
-                membersTab,
-                ownedTab,
-                membershipsTab,
-                permissionsTab,
-                annotationsTab,
-                auditTab
-            ]);
-
-            return (
-              <div className="group">
-                <h2>Group {data.group.id}</h2>
-                <TabbedArea defaultActiveKey="overview">
-                  {tabs}
-                </TabbedArea>
-              </div>
-            );
-        }
-    });
-
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    ReactBootstrap,
-    _
-);
+           </TabPane>;
+    var members_tab =
+           <TabPane key="members" tab={get_tabname("Members",members)}>
+            <ul className="list-group">
+              {members}
+            </ul>
+           </TabPane>;
+    var owned_tab =  this.owned_tab();
+    var memberships_tab = this.memberships_tab(group.roleid);
+    var permissions_tab = this.permissions_tab(group.roleid);
+    var annotations_tab = this.annotations_tab();
+
+    var audit_tab =
+          <TabPane key="audit" tab="Recent Activity">
+            <div className="audit auditGroup">
+              <AuditBox roles={[resourceId]} resources={[resourceId]} tabview={true}/>
+            </div>
+          </TabPane>;
+
+            <TabPane key="annotations" tab={get_tabname("Annotations",this.props.data.annotations)}>
+                <AnnotationsBox annotations={this.props.data.annotations}/>
+            </TabPane>;
+
+    var tabs = _.compact([overview_tab, members_tab, owned_tab, memberships_tab,
+                          permissions_tab, annotations_tab, audit_tab]);
+
+    return (
+      <div className="group">
+        <h2>Group {this.props.data.group.id}</h2>
+        <TabbedArea defaultActiveKey="overview">
+           {tabs}
+        </TabbedArea>
+      </div>
+    );
+  }
+});

data/public/js/views/groups.js

@@ -1,18 +1,22 @@
 /** @jsx React.DOM */
-/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    this.GroupBox = React.createClass({
+    var GroupBox = this.GroupBox = React.createClass({
+        /*getInitialState: function() {
+         return { currentNamespace: "", members: [] };
+         },*/
         render: function() {
+            //<NamespaceFilter currentNamespace={this.props.currentNamespace}
+            // namespaces={this.props.data.namespaces} />
             return (
               <div className="groupBox">
                 <div className="groupList">
                   <h2>Groups</h2>
-                  <GenericList data={{kind: 'groups', members: this.props.data.members}} />
+                  <GenericList data={{kind: "groups", members: this.props.data.members}} />
                 </div>
               </div>
             );

data/public/js/views/host.js

@@ -1,95 +1,64 @@
 /** @jsx React.DOM */
-/* global conjur, React, ReactBootstrap, _ */
 
-(function(conjur, React, ReactBootstrap, _) {
-    'use strict';
+var HostLink = React.createClass({
+  hostId : function() {
+    return this.props.data.split(':')[2];
+  },
 
-    var TabbedArea = ReactBootstrap.TabbedArea,
-        TabPane = ReactBootstrap.TabPane,
-        Tab = conjur.views.mixins.Tab,
-        AuditBox = window.AuditBox,
-        RoleLink = conjur.views.RoleLink,
-        Time = conjur.views.Time;
+  hostUrl: function() {
+    return "/ui/hosts/" + encodeURIComponent(this.hostId());
+  },
 
-    this.HostLink = React.createClass({
-        hostId : function() {
-            return this.props.data.split(':')[2];
-        },
+  render: function() {
+    return (
+      <a href={this.hostUrl()}>
+        {this.hostId()}
+      </a>
+    );
+  }
+});
 
-        hostUrl: function() {
-            return '/ui/hosts/' + window.encodeURIComponent(this.hostId());
-        },
+var Host = React.createClass({
+  mixins: [conjur.views.mixins.Tab],
+  render: function(){
+    var host = this.props.data.host;
 
-        render: function() {
-            return (
-              <a href={this.hostUrl()}>
-                {this.hostId()}
-              </a>
-            );
-        }
-    });
-
-    this.Host = React.createClass({
-        mixins: [Tab],
-
-        render: function() {
-            var host = this.props.data.host;
-
-            // TODO: control for 'enroll'
-            var overviewTab = (
-              <TabPane key="overview" tab="Overview">
+    // TODO: control for 'enroll'
+    var overview_tab =
+            <TabPane key="overview" tab="Overview">
                 <dl className="dl-horizontal">
                   <dt> Owner </dt>
                   <dd> <RoleLink id={host.ownerid}/> </dd>
-
                   <dt>Created by</dt>
                   <dd><RoleLink id={host.userid}/></dd>
-
                   <dt> Created At </dt>
                   <dd> <Time timestamp={host.created_at}/> </dd>
                 </dl>
-              </TabPane>
-            );
+            </TabPane>;
 
-            var permissionsTab = this.permissionsTab(host.roleid),
-                membershipsTab = this.membershipsTab(host.roleid),
-                annotationsTab = this.annotationsTab(),
-                ownedTab = this.ownedTab();
+    var permissions_tab = this.permissions_tab(host.roleid);
+    var memberships_tab = this.memberships_tab(host.roleid);
+    var annotations_tab = this.annotations_tab();
+    var owned_tab       = this.owned_tab();
 
-            var auditTab = (
-              <TabPane key="audit" tab="Recent Activity">
+    var audit_tab =
+            <TabPane key="audit" tab="Recent Activity">
                 <div className="audit auditHost">
-                  <AuditBox roles={[host.roleid]}
-                            resources={[host.resource_identifier]}
-                            tabview={true} />
+                  <AuditBox roles={[host.roleid]} resources={[host.resource_identifier]} tabview={true}/>
                 </div>
-              </TabPane>
-            );
-
-            var tabs = _.compact([
-                overviewTab,
-                ownedTab,
-                membershipsTab,
-                permissionsTab,
-                annotationsTab,
-                auditTab
-            ]);
+            </TabPane>;
 
-            return (
-              <div className="host">
-                <h2> Host {host.id} </h2>
-                <TabbedArea defaultActiveKey="overview">
-                  {tabs}
-                </TabbedArea>
-              </div>
-            );
-        }
-    });
+    var tabs = _.compact([ overview_tab, owned_tab, memberships_tab,
+                          permissions_tab, annotations_tab, audit_tab
+                        ]);
 
-}).bind(conjur.views)
-(
-    conjur,
-    React,
-    ReactBootstrap,
-    _
-);
+    return (
+      <div className="host">
+        <h2> Host {host.id} </h2>
+        <TabbedArea defaultActiveKey="overview">
+            {tabs}
+         </TabbedArea>
+      </div>
+    );
+  }
+})