public/js/views/layer.js in conjur-asset-ui-1.3.0 vs public/js/views/layer.js in conjur-asset-ui-1.3.1
- old
+ new
@@ -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;
- }
- }
+(function(conjur, React, ReactBootstrap, _) {
+ 'use strict';
- var layer = this.props.data.layer;
+ var TabbedArea = ReactBootstrap.TabbedArea,
+ TabPane = ReactBootstrap.TabPane,
+ Tab = conjur.views.mixins.Tab,
+ AuditBox = window.AuditBox,
+ RoleLink = conjur.views.RoleLink,
+ HostLink = conjur.views.HostLink;
- 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));
+ var abstractRole = function(expected) {
+ return function(role) {
+ var tokens = role.split(':'),
+ kind = tokens[1],
+ abstractKinds = ['@', 'layer'],
+ isAbstract = abstractKinds.indexOf(kind) !== -1;
+ return isAbstract === expected;
+ };
+ };
- // 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) } >
+ 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>;
+ </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 permissionsTab = this.permissionsTab(data.layer.roleid),
+ membershipsTab = this.membershipsTab(data.layer.roleid),
+ annotationsTab = this.annotationsTab(),
+ ownedTab = this.ownedTab();
- var tabs = _.compact( [overview_tab, admins_tab, users_tab, hosts_tab,
- owned_tab, memberships_tab, permissions_tab,
- annotations_tab,
- audit_tab
- ] );
+ var tabs = _.compact([
+ overviewTab,
+ adminsTab,
+ usersTab,
+ hostsTab,
+ ownedTab,
+ membershipsTab,
+ permissionsTab,
+ annotationsTab,
+ auditTab
+ ]);
- return (
- <div className="layer">
- <h2>Layer {layer.id}</h2>
+ return (
+ <div className="layer">
+ <h2>Layer {data.layer.id}</h2>
+ <TabbedArea defaultActiveKey="overview">
+ {tabs}
+ </TabbedArea>
+ </div>
+ );
+ }
+ });
- <TabbedArea defaultActiveKey="overview">
- {tabs}
- </TabbedArea>
- </div>
- );
- }
-});
+}).bind(conjur.views)
+(
+ conjur,
+ React,
+ ReactBootstrap,
+ _
+);