public/js/views/layer.js in conjur-asset-ui-1.3.1 vs public/js/views/layer.js in conjur-asset-ui-1.3.2

- old
+ new

@@ -1,137 +1,92 @@ /** @jsx React.DOM */ -/* global conjur, React, ReactBootstrap, _ */ -(function(conjur, React, ReactBootstrap, _) { - 'use strict'; +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 TabbedArea = ReactBootstrap.TabbedArea, - TabPane = ReactBootstrap.TabPane, - Tab = conjur.views.mixins.Tab, - AuditBox = window.AuditBox, - RoleLink = conjur.views.RoleLink, - HostLink = conjur.views.HostLink; + var layer = this.props.data.layer; - var abstractRole = function(expected) { - return function(role) { - var tokens = role.split(':'), - kind = tokens[1], - abstractKinds = ['@', 'layer'], - isAbstract = abstractKinds.indexOf(kind) !== -1; + 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)); - 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)}> + // 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) } > <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 hostsTab = ( - <TabPane key="hosts" tab={conjur.utils.getTabname('Hosts', hosts)}> + </TabPane>; + var hosts_tab = + <TabPane key="hosts" tab={ get_tabname("Hosts", hosts) } > <ul className="list-group"> {hosts} </ul> - </TabPane> - ); - - var auditTab = ( - <TabPane key="audit" tab="Recent Activity"> + </TabPane>; + var audit_tab= + <TabPane key="audit" tab="Recent Activity"> <div className="audit auditGroup"> - <AuditBox roles={[data.layer.roleid]} - resources={[data.layer.resource_identifier]} - tabview={true} /> + <AuditBox roles={[layer.roleid]} resources={[layer.resource_identifier]} tabview={true} /> </div> - </TabPane> - ); + </TabPane>; - var permissionsTab = this.permissionsTab(data.layer.roleid), - membershipsTab = this.membershipsTab(data.layer.roleid), - annotationsTab = this.annotationsTab(), - ownedTab = this.ownedTab(); + 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([ - overviewTab, - adminsTab, - usersTab, - hostsTab, - ownedTab, - membershipsTab, - permissionsTab, - annotationsTab, - auditTab - ]); + 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 {data.layer.id}</h2> - <TabbedArea defaultActiveKey="overview"> - {tabs} - </TabbedArea> - </div> - ); - } - }); + return ( + <div className="layer"> + <h2>Layer {layer.id}</h2> -}).bind(conjur.views) -( - conjur, - React, - ReactBootstrap, - _ -); + <TabbedArea defaultActiveKey="overview"> + {tabs} + </TabbedArea> + </div> + ); + } +});