conjur-asset-ui 1.3.2 → 1.4.2

data/public/js/views/dashboard.js

@@ -1,67 +1,146 @@
 /**@jsx React.DOM*/
+/* global conjur, React, jQuery */
 
-var DashboardSearchForm = React.createClass({
-  mixins: [ 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 DashboardFrequent = React.createClass({
-  getInitialState: function() {
-    return {resources: [], loaded: false}
-  },
-
-  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));
-  },
-
-  render: function() {
-    var content,
-        OwnedResourcesBox = conjur.views.OwnedResourcesBox;
-
-    if (this.state.loaded)
-      content = <OwnedResourcesBox resources={this.state.resources} />
-    else
-      content = <span>Loading...</span>
-
-    return <section>
-      <h3>Owned assets</h3>
-      {content}
-    </section>;
-  }
-});
-
-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>
-    );
-  }
-});
+(function(conjur, React, $) {
+    'use strict';
+
+    var Chart = conjur.views.Chart,
+        ChartHelperMixin = conjur.views.ChartHelperMixin,
+        FoldableAuditSection = conjur.views.FoldableAuditSection;
+
+    var Activity = React.createClass({
+        mixins: [ChartHelperMixin],
+
+        getDefaultProps: function() {
+            return {
+                options: {
+                    legend: {
+                        slogins: 'Logins',
+                        ssudo: 'Sudo calls',
+                        sreads: 'Secret reads',
+                        supdates: 'Secret updates',
+                        fsudo: 'Sudo failures',
+                        freads: 'Secret read failures',
+                        fupdates: 'Secret update failures',
+                        fother: 'Other failures'
+                    },
+                    axis: {
+                        y: {
+                            label: 'Value'
+                        }
+                    }
+                }
+            };
+        },
+
+        getDefaultItem: function() {
+            return {
+                slogins: 0,
+                ssudo: 0,
+                fsudo: 0,
+                sreads: 0,
+                freads: 0,
+                supdates: 0,
+                fupdates: 0,
+                fother: 0
+            };
+        },
+
+        getEventType: function(e) {
+            if (e.hasOwnProperty('facility') && e.facility === 'ssh') {
+                if (e.allowed === true) {
+                    if (e.action === 'sudo') {
+                        return 'ssudo';
+                    }
+
+                    if (e.action === 'login') {
+                        return 'slogins';
+                    }
+                }
+
+                if (e.allowed === false) {
+                    if (e.action === 'sudo') {
+                        return 'fsudo';
+                    }
+                }
+            }
+
+            if ((e.action === 'check') && e.hasOwnProperty('resource') && e.resource.split(':')[1] === 'variable') {
+                if (e.hasOwnProperty('error') || e.allowed === false) {
+                    if (e.privilege === 'execute') {
+                        return 'freads';
+                    }
+
+                    if (e.privilege === 'update') {
+                        return 'fupdates';
+                    }
+                }
+
+                if (!e.hasOwnProperty('error') && e.allowed !== false) {
+                    if (e.privilege === 'execute') {
+                        return 'sreads';
+                    }
+
+                    if (e.privilege === 'update') {
+                        return 'supdates';
+                    }
+                }
+            }
+
+            if (e.hasOwnProperty('error') || e.allowed === false) {
+                return 'fother';
+            }
+
+            return null;
+        },
+
+        render: function() {
+            var data = this.getData(this.props.audit);
+
+            return (
+              <div className="b-dashboard-activity">
+                <h2>Activity</h2>
+                <div className="b-dashboard-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+              </div>
+            );
+        }
+    });
+
+    this.Dashboard = React.createClass({
+        getInitialState: function() {
+            return {audit: []};
+        },
+
+        componentWillMount: function() {
+            $.get('/api/audit/all',
+                  function(data) {
+                      this.setState({audit: data});
+                  }.bind(this));
+        },
+
+        render: function() {
+            return (
+              <div className="b-dashboard">
+                <Activity audit={this.state.audit} />
+                <hr />
+                {FoldableAuditSection.warnings(this.state.audit)}
+                <hr />
+                {FoldableAuditSection.changes(this.state.audit)}
+                <hr />
+                <AuditTable src="/api/audit/all"
+                            caption="Recent activity"
+                            />
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    jQuery
+);

data/public/js/views/generic.js

@@ -1,14 +1,17 @@
 /** @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>
@@ -25,7 +28,7 @@
         }
     });
 
-    var GenericList = this.GenericList = React.createClass({
+    this.GenericList = React.createClass({
         getInitialState: function() {
             return {
                 sort: {
@@ -53,7 +56,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;
                 }
 
@@ -74,7 +77,10 @@
             });
 
             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(
@@ -111,5 +117,6 @@
 }).bind(conjur.views)
 (
     conjur,
-    React
+    React,
+    _
 );

data/public/js/views/group.js

@@ -1,61 +1,109 @@
 /** @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,
+        Breadcrumbs = conjur.views.Breadcrumbs,
+        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.owner} /></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
+            ]);
+
+            var elems = [
+                {url: '/ui/groups', text: 'Groups'},
+                {url: '', text: this.props.data.group.id},
+                {url: '', text: '(owned by ' + this.props.data.group.ownerid + ')'}
+            ];
+
+            return (
+              <div className="b-group">
+                <Breadcrumbs elems={elems} />
+                <hr />
+                <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>
             );