conjur-asset-ui 1.3.0 → 1.3.1

data/public/js/views/group.js

@@ -1,61 +1,100 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-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">
+(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">
                 <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={this.props.data.group.ownerid}/></dd>
+                  <dd><RoleLink id={data.group.ownerid} /></dd>
                 </dl>
-           </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>
-    );
-  }
-});
+              </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,
+    _
+);

data/public/js/views/groups.js

@@ -1,22 +1,18 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var GroupBox = this.GroupBox = React.createClass({
-        /*getInitialState: function() {
-         return { currentNamespace: "", members: [] };
-         },*/
+    this.GroupBox = React.createClass({
         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,64 +1,95 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-var HostLink = React.createClass({
-  hostId : function() {
-    return this.props.data.split(':')[2];
-  },
+(function(conjur, React, ReactBootstrap, _) {
+    'use strict';
 
-  hostUrl: function() {
-    return "/ui/hosts/" + encodeURIComponent(this.hostId());
-  },
+    var TabbedArea = ReactBootstrap.TabbedArea,
+        TabPane = ReactBootstrap.TabPane,
+        Tab = conjur.views.mixins.Tab,
+        AuditBox = window.AuditBox,
+        RoleLink = conjur.views.RoleLink,
+        Time = conjur.views.Time;
 
-  render: function() {
-    return (
-      <a href={this.hostUrl()}>
-        {this.hostId()}
-      </a>
-    );
-  }
-});
+    this.HostLink = React.createClass({
+        hostId : function() {
+            return this.props.data.split(':')[2];
+        },
 
-var Host = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function(){
-    var host = this.props.data.host;
+        hostUrl: function() {
+            return '/ui/hosts/' + window.encodeURIComponent(this.hostId());
+        },
 
-    // TODO: control for 'enroll'
-    var overview_tab =
-            <TabPane key="overview" tab="Overview">
+        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">
                 <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 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 permissionsTab = this.permissionsTab(host.roleid),
+                membershipsTab = this.membershipsTab(host.roleid),
+                annotationsTab = this.annotationsTab(),
+                ownedTab = this.ownedTab();
 
-    var audit_tab =
-            <TabPane key="audit" tab="Recent Activity">
+            var auditTab = (
+              <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>;
+              </TabPane>
+            );
+
+            var tabs = _.compact([
+                overviewTab,
+                ownedTab,
+                membershipsTab,
+                permissionsTab,
+                annotationsTab,
+                auditTab
+            ]);
 
-    var tabs = _.compact([ overview_tab, owned_tab, memberships_tab,
-                          permissions_tab, annotations_tab, audit_tab
-                        ]);
+            return (
+              <div className="host">
+                <h2> Host {host.id} </h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+        }
+    });
 
-    return (
-      <div className="host">
-        <h2> Host {host.id} </h2>
-        <TabbedArea defaultActiveKey="overview">
-            {tabs}
-         </TabbedArea>
-      </div>
-    );
-  }
-})
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    ReactBootstrap,
+    _
+);

data/public/js/views/hosts.js

@@ -1,17 +1,13 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var HostBox = this.HostBox = React.createClass({
-        /*getInitialState: function() {
-         return { currentNamespace: "", members: [] };
-         },*/
+    this.HostBox = React.createClass({
         render: function() {
-            //<NamespaceFilter currentNamespace={this.props.currentNamespace}
-            //namespaces={this.props.data.namespaces} />
             return (
               <div className="hostBox">
                 <div className="hostList">

data/public/js/views/layer.js

@@ -1,92 +1,137 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-var Layer = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function() {
-    function abstractRole(expected) {
-      return function(role) {
-        var tokens = role.split(':');
-        var kind = tokens[1];
-        var abstractKinds = [ '@', 'layer' ];
-        var isAbstract = abstractKinds.indexOf(kind) !== -1;
-        return isAbstract === expected;
-      }
-    }
-
-    var layer = this.props.data.layer;
-
-    var hosts = layer.hosts.map(function (host) {
-      return <li className="list-group-item list-group-item-noborder">
-        <HostLink data={host} />
-      </li>
-    }.bind(this));
-    var admins = this.props.data.admins.filter(abstractRole(false)).map(function (role) {
-      return <li className="list-group-item list-group-item-noborder">
-                <RoleLink id={role}/>
-             </li>;
-    }.bind(this));
-    var users = this.props.data.users.filter(abstractRole(false)).map(function (role) {
-      return <li className="list-group-item list-group-item-noborder">
-                <RoleLink id={role}/>
-             </li>;
-    }.bind(this));
-
-
-    // TODO: controls to add/remove admins/users/hosts
-    var overview_tab =
-            <TabPane key="overview" tab="Overview">
-            <dl className="dl-horizontal">
-              <dt>Owner</dt>
-              <dd><RoleLink id={layer.ownerid}/></dd>
-              <dt>Created by</dt>
-              <dd><RoleLink id={layer.userid}/></dd>
-            </dl>
-            </TabPane>;
-    var admins_tab =
-            <TabPane key="admins" tab={get_tabname("Admins",admins)}>
-            <ul className="list-group">
-              {admins}
-            </ul>
-            </TabPane> ;
-    var users_tab =
-            <TabPane key="users" tab={ get_tabname("Users", users) } >
+(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,
+        HostLink = conjur.views.HostLink;
+
+    var abstractRole = function(expected) {
+        return function(role) {
+            var tokens = role.split(':'),
+                kind = tokens[1],
+                abstractKinds = ['@', 'layer'],
+                isAbstract = abstractKinds.indexOf(kind) !== -1;
+
+            return isAbstract === expected;
+        };
+    };
+
+    this.Layer = React.createClass({
+        mixins: [Tab],
+
+        render: function() {
+            var data = this.props.data;
+
+            var hosts = data.layer.hosts.map(function(host) {
+                return (
+                  <li className="list-group-item list-group-item-noborder">
+                    <HostLink data={host} />
+                  </li>
+                );
+            });
+
+            var admins = data.admins.filter(abstractRole(false)).map(function(role) {
+                return (
+                  <li className="list-group-item list-group-item-noborder">
+                    <RoleLink id={role}/>
+                  </li>
+                );
+            });
+
+            var users = data.users.filter(abstractRole(false)).map(function(role) {
+                return (
+                  <li className="list-group-item list-group-item-noborder">
+                    <RoleLink id={role}/>
+                  </li>
+                );
+            });
+
+            // TODO: controls to add/remove admins/users/hosts
+            var overviewTab = (
+              <TabPane key="overview" tab="Overview">
+                <dl className="dl-horizontal">
+                  <dt>Owner</dt>
+                  <dd><RoleLink id={data.layer.ownerid} /></dd>
+
+                  <dt>Created by</dt>
+                  <dd><RoleLink id={data.layer.userid} /></dd>
+                </dl>
+              </TabPane>
+            );
+
+            var adminsTab = (
+              <TabPane key="admins" tab={conjur.utils.getTabname('Admins', admins)}>
+                <ul className="list-group">
+                  {admins}
+                </ul>
+              </TabPane>
+            );
+
+            var usersTab = (
+              <TabPane key="users" tab={conjur.utils.getTabname('Users', users)}>
                 <ul className="list-group">
                   {users}
                 </ul>
-            </TabPane>;
-    var hosts_tab =
-            <TabPane key="hosts" tab={ get_tabname("Hosts", hosts) }  >
+              </TabPane>
+            );
+
+            var hostsTab = (
+              <TabPane key="hosts" tab={conjur.utils.getTabname('Hosts', hosts)}>
                 <ul className="list-group">
                   {hosts}
                 </ul>
-            </TabPane>;
-    var audit_tab=
-            <TabPane key="audit" tab="Recent Activity">
+              </TabPane>
+            );
+
+            var auditTab = (
+              <TabPane key="audit" tab="Recent Activity">
                 <div className="audit auditGroup">
-                  <AuditBox roles={[layer.roleid]} resources={[layer.resource_identifier]} tabview={true} />
+                  <AuditBox roles={[data.layer.roleid]}
+                            resources={[data.layer.resource_identifier]}
+                            tabview={true} />
                 </div>
-            </TabPane>;
-
-
-    var permissions_tab = this.permissions_tab(layer.roleid);
-    var memberships_tab = this.memberships_tab(layer.roleid);
-    var annotations_tab = this.annotations_tab();
-    var owned_tab       = this.owned_tab();
-
-    var tabs = _.compact( [overview_tab, admins_tab, users_tab, hosts_tab,
-                            owned_tab, memberships_tab, permissions_tab,
-                            annotations_tab,
-                            audit_tab
-                          ] );
-
-    return (
-      <div className="layer">
-        <h2>Layer {layer.id}</h2>
-
-        <TabbedArea defaultActiveKey="overview">
-            {tabs}
-        </TabbedArea>
-      </div>
-    );
-  }
-});
+              </TabPane>
+            );
+
+
+            var permissionsTab = this.permissionsTab(data.layer.roleid),
+                membershipsTab = this.membershipsTab(data.layer.roleid),
+                annotationsTab = this.annotationsTab(),
+                ownedTab = this.ownedTab();
+
+            var tabs = _.compact([
+                overviewTab,
+                adminsTab,
+                usersTab,
+                hostsTab,
+                ownedTab,
+                membershipsTab,
+                permissionsTab,
+                annotationsTab,
+                auditTab
+            ]);
+
+            return (
+              <div className="layer">
+                <h2>Layer {data.layer.id}</h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    ReactBootstrap,
+    _
+);

data/public/js/views/layers.js

@@ -1,17 +1,13 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var LayerBox = this.LayerBox = React.createClass({
-        /*  getInitialState: function() {
-         return { currentNamespace: "", members: [] };
-         }, */
+    this.LayerBox = React.createClass({
         render: function() {
-            // <NamespaceFilter currentNamespace={this.props.currentNamespace}
-            // namespaces={this.props.data.namespaces} />
             return (
               <div className="layerBox">
                 <div className="layerList">

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

@@ -1,15 +1,22 @@
+/* global conjur */
+
 (function(conjur) {
     'use strict';
 
-    conjur.views.mixins.Search = {
-        handleSubmit: function(e) {
+    this.Search = {
+        handleSubmit: function() {
             var search = this.refs.input.getDOMNode().value;
 
-            if (search && search.length != 0) {
-                conjur.app.router.navigate('/ui/search/' + encodeURIComponent(search), {trigger: true});
+            if (search && search.length !== 0) {
+                conjur.app.router.navigate('/ui/search/' + window.encodeURIComponent(search),
+                                           {trigger: true});
             }
 
             return false;
         }
     };
-})(conjur);
+
+}).bind(conjur.views.mixins)
+(
+    conjur
+);