conjur-asset-ui 1.3.0 → 1.3.1

data/public/js/views/user.js

@@ -1,20 +1,133 @@
 /** @jsx React.DOM */
+/* global conjur, _, React, ReactBootstrap */
 
-//var ReactBootstrap=root.ReactBootstrap;
-var TabbedArea = ReactBootstrap.TabbedArea;
-var TabPane    = ReactBootstrap.TabPane;
-
-var User = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function(){
-   var user = this.props.data.user;
-
-   // TODO: refactor
-   // TODO: show public keys
-   // TODO: actions menu (e.g. 'upload public key', 'add annotation')
-   // TODO: memberships panel
-   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;
+
+    var PubkeyItem = React.createClass({
+        render: function() {
+            return (
+              <div className="b-pubkey">
+                <div className="b-pubkey__logo">
+                  <span className="badge">{this.props.pubkey[0]}</span>
+                </div>
+                <ul className="b-pubkey__list list-unstyled">
+                  <li className="b-pubkey__name">
+                    {this.props.pubkey[2]}
+                  </li>
+                  <li className="b-pubkey__fingerprint">
+                    {/* TODO: key fingerprint */}
+                  </li>
+                  <li className="b-pubkey__info">
+                    {/* TODO: When added, when last time used */}
+                  </li>
+                </ul>
+                <div className="b-pubkeys__actions">
+                  {/* TODO: Action buttons */}
+                </div>
+              </div>
+            );
+        }
+    });
+
+    var PubkeysList = React.createClass({
+        render: function() {
+            var login = this.props.login;
+
+            var pubkeysList = this.props.pubkeys.map(function(k, idx, coll) {
+                var tokens = k.split(' ');
+
+                console.log(arguments);
+
+                var className = 'b-pubkeys__item list-group-item list-group-item-noborder';
+
+                if (idx + 1 !== coll.length) {
+                    className = className + ' b-pubkeys__item--headline';
+                }
+
+                return (
+                  <li className={className}>
+                    <PubkeyItem pubkey={tokens} />
+                  </li>
+                );
+            });
+
+            return (
+              <div className="b-pubkeys">
+                <PubkeysHelp>
+                  This is list of SSH public keys associated with user {login}.
+                </PubkeysHelp>
+                <ul className="b-pubkeys__list">
+                  {pubkeysList}
+                </ul>
+              </div>
+            );
+        }
+    });
+
+    var PubkeysHelp = React.createClass({
+        render: function() {
+            var ret;
+
+            if (React.Children.count(this.props.children) > 0) {
+                ret = (
+                  <p className="b-pubkeys__help">
+                    {this.props.children}
+                  </p>
+                );
+            } else {
+                var login = this.props.login;
+
+                ret = (
+                  <p className="b-pubkeys__help">
+                    User {login} have not any pubkey. Use follow command to create one:
+                    <pre>$ conjur pubkeys add {login} @id_{login}.pub</pre>
+                  </p>
+                );
+            }
+
+            return ret;
+        }
+    });
+
+    var PubkeysTabContent = React.createClass({
+        render: function() {
+            var body;
+
+            if (this.props.pubkeys.length > 0) {
+                body = (
+                  <PubkeysList login={this.props.login} pubkeys={this.props.pubkeys} />
+                );
+            } else {
+                body = (
+                  <div className="b-pubkeys">
+                    <PubkeysHelp login={this.props.login} />
+                  </div>
+                );
+            }
+
+            return body;
+        }
+    });
+
+    this.User = React.createClass({
+        mixins: [Tab],
+
+        render: function() {
+            var user = this.props.data.user;
+
+            // TODO: refactor
+            // TODO: show public keys
+            // TODO: actions menu (e.g. 'upload public key', 'add annotation')
+            // TODO: memberships panel
+            var overviewTab = (
+              <TabPane key="overview" tab="Overview">
                 <dl className="dl-horizontal">
                   <dt>Created by</dt>
                   <dd><RoleLink id={user.userid}/></dd>
@@ -23,46 +136,56 @@ var User = React.createClass({
                   <dt>Uidnumber</dt>
                   <dd>{user.uidnumber}</dd>
                 </dl>
-            </TabPane>;
+              </TabPane>
+            );
 
-    var audit_tab=
-            <TabPane key="audit" tab="Recent Activity">
+            var auditTab = (
+              <TabPane key="audit" tab="Recent Activity">
                 <div className="audit auditUser">
-                  <AuditBox roles={[user.roleid]} resources={[user.resource_identifier]} tabview={true}/>
+                  <AuditBox roles={[user.roleid]}
+                            resources={[user.resource_identifier]}
+                            tabview={true} />
                 </div>
-            </TabPane>;
-
-    var pubkeys_list = this.props.data.pubkeys.map(function(k) {
-    	var tokens = k.split(" ");
-			return <li className="list-group-item list-group-item-noborder">
-				<span className="badge">{tokens[0]}</span>
-				{tokens[tokens.length-1]}
-			</li>
-		});
-    var pubkeys_tab = <TabPane key="pubkeys" tab={get_tabname("Public Keys", this.props.data.pubkeys)}>
-		  <div className="pubkeys pubkeysUser">
-		  	<ul className="list-group">
-		  		{pubkeys_list}
-		  	</ul>
-		  </div>
-		</TabPane>;
-
-    var permissions_tab = this.permissions_tab(user.roleid);
-    var memberships_tab = this.memberships_tab(user.roleid);
-    var annotations_tab = this.annotations_tab();
-    var owned_tab       = this.owned_tab();
-
-    var tabs=_.compact([overview_tab, owned_tab, memberships_tab,
-                        permissions_tab, annotations_tab, pubkeys_tab, audit_tab]);
-
-
-    return (
-      <div className="user">
-        <h2> User {user.login} </h2>
-        <TabbedArea defaultActiveKey="overview">
-            {tabs}
-        </TabbedArea>
-      </div>
-    );
-  }
-});
+              </TabPane>
+            );
+
+            var pubkeysTab = (
+              <TabPane key="pubkeys"
+                       tab={conjur.utils.getTabname('Public Keys', this.props.data.pubkeys)}>
+                <PubkeysTabContent login={user.login} pubkeys={this.props.data.pubkeys} />
+              </TabPane>
+            );
+
+            var permissionsTab = this.permissionsTab(user.roleid);
+            var membershipsTab = this.membershipsTab(user.roleid);
+            var annotationsTab = this.annotationsTab();
+            var ownedTab = this.ownedTab();
+
+            var tabs = _.compact([
+                overviewTab,
+                ownedTab,
+                membershipsTab,
+                permissionsTab,
+                annotationsTab,
+                pubkeysTab,
+                auditTab
+            ]);
+
+            return (
+              <div className="user">
+                <h2>User {user.login}</h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+          }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    _,
+    React,
+    ReactBootstrap
+);

data/public/js/views/users.js

@@ -1,18 +1,13 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var UserBox = this.UserBox = React.createClass({
-        // no more external manipulation of state
-        //getInitialState: function() {
-        //  return { currentNamespace: "", members: [] };
-        //},
+    this.UserBox = React.createClass({
         render: function() {
-            // <NamespaceFilter currentNamespace={this.props.currentNamespace}
-            // namespaces={this.props.data.namespaces} />
             return (
               <div className="userBox">
                 <div className="userList">

data/public/js/views/variable.js

@@ -1,70 +1,251 @@
 /** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
 
-var Variable = React.createClass({
-  mixins: [conjur.views.mixins.Tab],
-  render: function() {
-    var updaters = this.props.data.updaters.map(function (member) {
-      return <li className="list-group-item list-group-item-noborder">
-        <RoleLink id={member} />
-      </li>
-    }.bind(this));
-    var fetchers = this.props.data.fetchers.map(function (member) {
-      return <li className="list-group-item list-group-item-noborder">
-        <RoleLink id={member} />
-      </li>
-    }.bind(this));
-    var resourceId = [ conjur.app.configuration.account, 'variable', this.props.data.variable.id ].join(':');
+(function(conjur, React, ReactBootstrap, _) {
+    'use strict';
 
+    var TabbedArea = ReactBootstrap.TabbedArea,
+        TabPane = ReactBootstrap.TabPane,
+        Tab = conjur.views.mixins.Tab,
+        RoleLink = conjur.views.RoleLink,
+        AuditBox = window.AuditBox;
 
+    var RevealerBox = React.createClass({
+        getInitialState: function() {
+            return {revealed: false};
+        },
 
+        handleClick: function() {
+            this.setState({revealed: !this.state.revealed});
+        },
 
-    var overview_tab =
-            <TabPane key="overview" tab="Overview">
-                <dl className="dl-horizontal">
+        render: function() {
+            var valToShow = this.state.revealed ? 'SECRET HERE!' : 'Show Value';
+
+            return (
+              <div className="revealer well well-sm" onClick={this.handleClick}>
+                {valToShow}
+              </div>
+            );
+        }
+    });
+
+    var Breadcrumb = React.createClass({
+        render: function() {
+            return (
+              <div className="b-breadcrumb">
+
+              </div>
+            );
+        }
+    });
+
+    var Breadcrumbs = React.createClass({
+        render: function() {
+            return (
+                <div className="b-breadcrumbs">
+                  <Breadcrumb />
+                </div>
+            );
+        }
+    });
+
+    var Activity = React.createClass({
+        getInitialState: function() {
+            var data = this.getData();
+
+            return {
+                data: data,
+                options: {
+                    legend: {
+                        close: 'Closed',
+                        sread: 'Suc. read',
+                        supdate: 'Suc. update',
+                        fread: 'Failed read',
+                        fupdate: 'Failed update'
+                    },
+                    axis: {
+                        y: {
+                            label: 'Value'
+                        }
+                    }
+                }
+            };
+        },
+
+        getData: function() {
+            return [];
+        },
+
+        render: function() {
+            return (
+              <div className="b-variable-activity">
+                <h2>Activity</h2>
+                <div className="b-variable-activity__graph">
+                  <Chart options={this.state.options}
+                         data={this.state.data} />
+                </div>
+              </div>
+            );
+        }
+    });
+
+    var Updaters = React.createClass({
+        render: function() {
+            return (
+              <div className="b-variable-updaters">
+                <h2>Updaters</h2>
+              </div>
+            );
+        }
+    });
+
+    var Fetchers = React.createClass({
+        render: function() {
+            return (
+              <div className="b-variable-fetchers">
+                <h2>Fetchers</h2>
+              </div>
+            );
+        }
+    });
+
+    var Updates = React.createClass({
+        render: function() {
+            return (
+              <div className="b-variable-updates">
+                <h2>Updates</h2>
+              </div>
+            );
+        }
+    });
+
+    var Warnings = React.createClass({
+        render: function() {
+            return (
+              <div className="b-variable-warnings">
+                <h2>Warnings</h2>
+              </div>
+            );
+        }
+    });
+
+    this.Variable = React.createClass({
+        mixins: [Tab],
+
+        render: function() {
+            var updaters = this.props.data.updaters.map(function(member) {
+                return (
+                  <li className="list-group-item list-group-item-noborder">
+                    <RoleLink id={member} />
+                  </li>
+                );
+            });
+
+            var fetchers = this.props.data.fetchers.map(function(member) {
+                return (
+                  <li className="list-group-item list-group-item-noborder">
+                    <RoleLink id={member} />
+                  </li>
+                );
+            });
+
+            var resourceId = [
+                conjur.app.configuration.account,
+                'variable',
+                this.props.data.variable.id
+            ].join(':');
+
+            var overviewTab = (
+              <TabPane key="overview" tab="Overview">
+                <dl className="dl-horizontal pull-left">
                   <dt>Owner</dt>
-                  <dd><RoleLink id={this.props.data.variable.ownerid}/></dd>
+                  <dd><RoleLink id={this.props.data.variable.ownerid} /></dd>
+
                   <dt>Created by</dt>
-                  <dd><RoleLink id={this.props.data.variable.userid}/></dd>
+                  <dd><RoleLink id={this.props.data.variable.userid} /></dd>
+
                   <dt>MIME type</dt>
                   <dd>{this.props.data.variable.mime_type}</dd>
+
                   <dt>Kind</dt>
                   <dd>{this.props.data.variable.kind}</dd>
+
                   <dt>Versions</dt>
                   <dd>{this.props.data.variable.version_count}</dd>
                 </dl>
-            </TabPane>;
-    var updaters_tab =
-            <TabPane key="updaters" tab={get_tabname("Updaters",updaters)}>
+                <div className="pull-right">
+                  <RevealerBox variable={this.props.data.variable} />
+                </div>
+              </TabPane>
+            );
+
+            var updatersTab = (
+              <TabPane key="updaters" tab={conjur.utils.getTabname('Updaters', updaters)}>
                 <ul className="list-group">
                   {updaters}
                 </ul>
-            </TabPane>;
-    var fetchers_tab =
-            <TabPane key="fetchers" tab={get_tabname("Fetchers",fetchers)}>
+              </TabPane>
+            );
+
+            var fetchersTab = (
+              <TabPane key="fetchers" tab={conjur.utils.getTabname('Fetchers', fetchers)}>
                 <ul className="list-group">
                   {fetchers}
                 </ul>
-            </TabPane>;
-    var  annotations_tab =  this.annotations_tab();
+              </TabPane>
+            );
 
-    var audit_tab =
-            <TabPane key="audit" tab="Recent Activity">
+            var annotationsTab = this.annotationsTab();
+
+            var auditTab = (
+              <TabPane key="audit" tab="Recent Activity">
                 <div className="audit auditHost">
                   <AuditBox resources={[resourceId]} tabview={true}/>
                 </div>
-            </TabPane>;
-
-
-    var tabs = _.compact([ overview_tab, updaters_tab, fetchers_tab,
-                            annotations_tab, audit_tab ]);
-
-    return (
-      <div className="variable">
-        <h2>Variable {this.props.data.variable.id}</h2>
-        <TabbedArea defaultActiveKey="overview">
-            {tabs}
-        </TabbedArea>
-      </div>
-    );
-  }
-});
+              </TabPane>
+            );
+
+            var tabs = _.compact([
+                overviewTab,
+                updatersTab,
+                fetchersTab,
+                annotationsTab,
+                auditTab
+            ]);
+
+                // <Breadcrumbs />
+                // <hr />
+                // <Activity />
+                // <hr />
+                // <Updaters />
+                // <hr />
+                // <Fetchers />
+                // <hr />
+                // <Updates />
+                // <hr />
+                // <Warnings />
+                // <hr />
+                // <br />
+                // <br />
+                // <br />
+                // <br />
+
+            return (
+              <div className="variable">
+                <h2>Variable {this.props.data.variable.id}</h2>
+                <TabbedArea defaultActiveKey="overview">
+                  {tabs}
+                </TabbedArea>
+              </div>
+            );
+        }
+    });
+
+}).bind(conjur.views)
+(
+    conjur,
+    React,
+    ReactBootstrap,
+    _
+);

data/public/js/views/variables.js

@@ -1,20 +1,16 @@
 /** @jsx React.DOM */
+/* global conjur, React */
 
 (function(conjur, React) {
     'use strict';
 
     var GenericList = conjur.views.GenericList;
 
-    var VariableBox = this.VariableBox = React.createClass({
-        // getInitialState: function() {
-        //     return { currentNamespace: "", members: [] };
-        // },
+    this.VariableBox = React.createClass({
         render: function() {
-            // <NamespaceFilter currentNamespace={this.props.currentNamespace}
-            // namespaces={this.props.data.namespaces} />
             return (
-              <div className="groupBox">
-                <div className="groupList">
+              <div className="variableBox">
+                <div className="variableList">
                   <h2>Variables</h2>
                   <GenericList data={{kind: 'variables', members: this.props.data.members}} />
                 </div>