conjur-asset-ui 1.3.2 → 1.4.2

data/public/js/views/host.js

@@ -1,64 +1,200 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-var HostLink = React.createClass({
-  hostId : function() {
-    return this.props.data.split(':')[2];
-  },
-
-  hostUrl: function() {
-    return "/ui/hosts/" + encodeURIComponent(this.hostId());
-  },
-
-  render: function() {
-    return (
-      <a href={this.hostUrl()}>
-        {this.hostId()}
-      </a>
-    );
-  }
-});
-
-var Host = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function(){
-    var host = this.props.data.host;
-
-    // TODO: control for 'enroll'
-    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,
+        AnnotationsBox = conjur.views.AnnotationsBox,
+        Breadcrumbs = conjur.views.Breadcrumbs,
+        RoleLink = conjur.views.RoleLink,
+        Time = conjur.views.Time,
+        Chart = conjur.views.Chart,
+        ChartHelperMixin = conjur.views.ChartHelperMixin,
+        FoldableAuditSection = conjur.views.FoldableAuditSection;
+
+    this.HostLink = React.createClass({
+        hostId : function() {
+            return this.props.data.split(':')[2];
+        },
+
+        hostUrl: function() {
+            return '/ui/hosts/' + window.encodeURIComponent(this.hostId());
+        },
+
+        render: function() {
+            return (
+              <a href={this.hostUrl()}>
+                {this.hostId()}
+              </a>
+            );
+        }
+    });
+
+    var Activity = React.createClass({
+        mixins: [ChartHelperMixin],
+
+        getDefaultProps: function() {
+            return {
+                options: {
+                    legend: {
+                        logins: 'Logins to host',
+                        sudo: 'Sudo calls on host',
+                        reads: 'Secret reads by host',
+                        updates: 'Secret updates by host',
+                        warnings: 'Warnings'
+                    },
+                    axis: {
+                        y: {
+                            label: 'Value'
+                        }
+                    }
+                }
+            };
+        },
+
+        getDefaultItem: function() {
+            return {
+                logins: 0,
+                sudo: 0,
+                reads: 0,
+                updates: 0,
+                warnings: 0
+            };
+        },
+
+        getEventType: function(e) {
+            if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
+                if (e.action === 'sudo' && e.allowed === true) {
+                    return 'sudo';
+                }
+
+                if (e.action === 'login' && e.allowed === true) {
+                    return 'logins';
+                }
+            }
+
+            if (e.hasOwnProperty('error') || e.allowed === false) {
+                return 'warnings';
+            }
+
+            if (e.action === 'check' &&
+                e.hasOwnProperty('allowed') &&
+                e.allowed === true) {
+
+                if (e.hasOwnProperty('role') && e.role === this.props.roleid) {
+                    if (e.hasOwnProperty('resource') &&
+                        e.resource.split(':')[1] === 'variable') {
+
+                        if (e.privilege === 'update') {
+                            return 'updates';
+                        }
+
+                        if (e.privilege === 'execute') {
+                            return 'reads';
+                        }
+                    }
+                }
+            }
+
+            return null;
+        },
+
+        render: function() {
+            var data = this.getData(this.props.audit);
+
+            return (
+              <div className="b-host-activity">
+                <h2>Activity</h2>
+                <div className="b-host-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+              </div>
+            );
+        }
+    });
+
+    var Details = React.createClass({
+        render: function() {
+            // TODO: control for 'enroll'
+            return (
+              <div className="b-host-details">
+                <h2>Details</h2>
                 <dl className="dl-horizontal">
-                  <dt> Owner </dt>
-                  <dd> <RoleLink id={host.ownerid}/> </dd>
+                  <dt>Owner</dt>
+                  <dd><RoleLink id={this.props.owner}/></dd>
+
                   <dt>Created by</dt>
-                  <dd><RoleLink id={host.userid}/></dd>
-                  <dt> Created At </dt>
-                  <dd> <Time timestamp={host.created_at}/> </dd>
+                  <dd><RoleLink id={this.props.host.userid}/></dd>
+
+                  <dt>Created At</dt>
+                  <dd><Time timestamp={this.props.host.created_at}/></dd>
                 </dl>
-            </TabPane>;
+             </div>
+            );
+        }
+    });
+
+    this.Host = React.createClass({
+        mixins: [Tab],
 
-    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();
+        render: function() {
+            var host = this.props.data.host,
+                permissionsTab = this.permissionsTab(host.roleid),
+                membershipsTab = this.membershipsTab(host.roleid),
+                ownedTab = this.ownedTab();
 
-    var audit_tab =
-            <TabPane key="audit" tab="Recent Activity">
-                <div className="audit auditHost">
-                  <AuditBox roles={[host.roleid]} resources={[host.resource_identifier]} tabview={true}/>
+            var tabs = _.compact([
+                membershipsTab,
+                ownedTab,
+                permissionsTab
+            ]);
+
+            var elems = [
+                {url: '/ui/hosts', text: 'Hosts'},
+                {url: '', text: this.props.data.host.id},
+                {url: '', text: '(owned by ' + this.props.data.host.ownerid + ')'}
+            ];
+
+            return (
+              <div className="b-host">
+                <Breadcrumbs elems={elems} />
+                <hr />
+                <Activity audit={this.props.data.audit} roleid={host.roleid}/>
+                <hr />
+                {FoldableAuditSection.warnings(this.props.data.audit)}
+                <hr />
+                <div className="row">
+                  <div className="col-md-6">
+                    <Details owner={this.props.data.owner}
+                             host={host} />
+                  </div>
+                  <div className="col-md-6">
+                    <h2>Annotations</h2>
+                    <AnnotationsBox annotations={this.props.data.annotations} />
+                  </div>
                 </div>
-            </TabPane>;
-
-    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>
-    );
-  }
-})
+                <hr/>
+                <h2>Other</h2>
+                <TabbedArea>
+                  {tabs}
+                </TabbedArea>
+                <hr />
+                <AuditBox roles={[host.roleid]}
+                          resources={[host.resource_identifier]} />
+              </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,146 @@
 /** @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,
+        Breadcrumbs = conjur.views.Breadcrumbs,
+        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.owner} /></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
+            ]);
+
+            var elems = [
+                {url: '/ui/layers', text: 'Layers'},
+                {url: '', text: this.props.data.layer.id},
+                {url: '', text: '(owned by ' + this.props.data.layer.ownerid + ')'}
+            ];
+
+            return (
+              <div className="b-layer">
+                <Breadcrumbs elems={elems} />
+                <hr />
+                <h2>Layer {data.layer.id}</h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    ReactBootstrap,
+    _
+);