conjur-asset-ui-beta 1.5.0 → 1.6.0

data/app/package.json

@@ -16,6 +16,8 @@
     "bootstrap": "^3.3.2",
     "collections": "^1.2.2",
     "d3": "^3.5.3",
+    "dagre": "^0.7.1",
+    "dagre-d3": "^0.4.2",
     "event-source-polyfill": "0.0.1",
     "fluxxor": "^1.5.2",
     "lodash": "^3.6.0",

data/app/src/actions.js

@@ -5,7 +5,8 @@ var ClientAudit = require('./clients/audit'),
     ClientList = require('./clients/list'),
     ClientSearch = require('./clients/search'),
     ClientMembers = require('./clients/members'),
-    ClientLayerMembers = require('./clients/layer_members');
+    ClientLayerMembers = require('./clients/layer_members'),
+    ClientGraph = require('./clients/graph');
 
 var constants = require('./constants');
 
@@ -15,8 +16,8 @@ module.exports = {
     },
 
     routes: {
-        transition(path, params) {
-            this.dispatch(constants.ROUTES.TRANSITION, {path: path, params: params});
+        transition(params) {
+            this.dispatch(constants.ROUTES.TRANSITION, {params: params});
         }
     },
 
@@ -154,6 +155,33 @@ module.exports = {
         }
     },
 
+    graph: {
+        load(kind, id) {
+            this.dispatch(constants.GRAPH.LOAD);
+
+            // this.dispatch(constants.GRAPH.LOAD_SUCCESS,
+            //               {kind: kind, id: id,
+            //                res: {body: {"graph":[{"parent":"conjur:group:foods","child":"conjur:host:ldap1"},{"parent":"conjur:group:vegetables","child":"conjur:host:ldap1"},{"parent":"conjur:user:foo","child":"conjur:host:ldap1"},{"parent":"conjur:user:bar","child":"conjur:host:ldap1"},{"parent":"conjur:group:foods","child":"conjur:group:vegetables"},{"parent":"conjur:host:ldap1","child":"conjur:user:admin"}]}}});
+
+            ClientGraph(
+                kind,
+                id,
+                (res) => {
+                    var payload = {kind: kind, id: id, res: res};
+
+                    this.dispatch(
+                        constants.GRAPH.LOAD_SUCCESS,
+                        payload
+                    );
+                },
+                (res) => {
+                    this.dispatch(constants.GRAPH.LOAD_FAIL, {id: id});
+                    // this.flux.actions.flashMessage(res.error.message);
+                }
+            );
+        }
+    },
+
     user: {
         load(id) {
             this.dispatch(constants.USER.LOAD, {id: id});
@@ -299,6 +327,30 @@ module.exports = {
                     });
             });
 
+            [
+                ClientMembers.c.MEMBERS_EXECUTE,
+                ClientMembers.c.MEMBERS_UPDATE
+            ].forEach((type) => {
+                this.dispatch(constants.HOST.LOAD, {id: id, type: type});
+
+                ClientMembers.fetch(
+                    constants.HOST.ASSET_TYPE,
+                    type,
+                    id,
+                    (res) => {
+                        var payload = {id: id, type: type, res: res};
+
+                        this.dispatch(
+                            constants.HOST.LOAD_SUCCESS,
+                            payload
+                        );
+                    },
+                    (res) => {
+                        this.dispatch(constants.HOST.LOAD_FAIL, {type: type});
+                        this.flux.actions.flashMessage(res.error.message);
+                    });
+            });
+
             this.dispatch(constants.HOST.LOAD, {id: id, type: 'RESOURCES'});
 
             ClientList.fetchResources(
@@ -425,6 +477,7 @@ module.exports = {
                 this.dispatch(constants.VARIABLE.LOAD, {id: id, type: type});
 
                 ClientMembers.fetch(
+                    constants.VARIABLE.ASSET_TYPE,
                     type,
                     id,
                     (res) => {

data/app/src/app.js

@@ -25,7 +25,8 @@ var AppStore = require('./stores/app_store'),
     RouteStore = require('./stores/route_store'),
     SearchStore = require('./stores/search_store'),
     AuditStore = require('./stores/audit_store'),
-    ResourcesStore = require('./stores/resources_store');
+    ResourcesStore = require('./stores/resources_store'),
+    GraphStore = require('./stores/graph_store');
 
 var UserStore = require('./stores/user_store'),
     GroupStore = require('./stores/group_store'),
@@ -38,10 +39,11 @@ var router = Router.create({routes: routes, location: Router.HistoryLocation});
 
 var stores = {
     AppStore: new AppStore(),
-    RouteStore: new RouteStore({router: router}),
+    route: new RouteStore(),
     search: new SearchStore(),
     audit: new AuditStore(),
     resources: new ResourcesStore(),
+    graph: new GraphStore(),
     user: new UserStore(),
     group: new GroupStore(),
     host: new HostStore(),
@@ -67,7 +69,9 @@ Promise.all([
         }
     })
 ]).then(() => {
-    router.run(function(Handler) {
+    router.run(function(Handler, state) {
+        flux.actions.routes.transition(state.params);
+
         React.render(
             <Handler flux={flux} />,
             document.getElementById('wrapper')

data/app/src/clients/graph.js

@@ -0,0 +1,24 @@
+/* global conjur */
+
+'use strict';
+
+var request = require('superagent');
+
+module.exports = function(kind, id, callback, errCallback) {
+    var defaultCallback = function(res) {
+        if (res.error) {
+            errCallback(res);
+        } else {
+            callback(res);
+        }
+    };
+
+    request
+        .get('/api/authz/' +
+             window.encodeURIComponent(conjur.app.configuration.account) +
+             '/roles?' +
+             window.encodeURIComponent('roles[]') +
+             '=' +
+             window.encodeURIComponent(conjur.app.configuration.account + ':' + kind + ':' + id))
+        .end(defaultCallback);
+};

data/app/src/clients/members.js

@@ -9,7 +9,7 @@ var c = module.exports.c = {
     MEMBERS_UPDATE: 'MEMBERS_UPDATE'
 };
 
-module.exports.fetch = function(type, id, callback, errCallback) {
+module.exports.fetch = function(asset_type, type, id, callback, errCallback) {
     var defaultCallback = function(res) {
         if (res.error) {
             errCallback(res);
@@ -30,8 +30,8 @@ module.exports.fetch = function(type, id, callback, errCallback) {
         .get('/api/authz/' +
              conjur.app.configuration.account +
              '/roles/allowed_to/' +
-             privilege +
-             '/variable/' +
+             privilege + '/' +
+             asset_type + '/' +
              window.encodeURIComponent(id))
         .end(defaultCallback);
 };

data/app/src/components/audit/table.js

@@ -94,6 +94,15 @@ module.exports = React.createClass({
                 }
             }
 
+            // hide new event role:index / all_roles , which is used by role graph only
+            if ((ev.kind === 'role') && (ev.action === 'index')) {
+                return false;
+            }
+
+            if ((ev.kind === 'role') && (ev.action === 'all_roles')) {
+                return false;
+            }
+
             return true;
         });
     }

data/app/src/components/custom/view.js

@@ -3,8 +3,7 @@
 var React = require('react'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
-    StoreWatchMixin = Fluxxor.StoreWatchMixin,
-    Router = require('react-router');
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
 
 var AuditTable = require('../audit/table'),
     Annotations = require('../generic/annotations'),
@@ -15,16 +14,38 @@ var AuditTable = require('../audit/table'),
 module.exports = React.createClass({
     displayName: 'CustomView',
 
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'resources'), Router.State],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'resources')],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForResource(state.kind, state.id);
+        actions.resources.loadOne(state.kind, state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if ((this.state.kind !== nextState.kind) ||
+            (this.state.id !== nextState.id)) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            kind = unescape(this.getParams().kind),
-            id = unescape(this.getParams().id),
+            kind = flux.store('route').getParam('kind'),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor(kind, id),
             resource = flux.store('resources').getResource(kind, id);
 
         return {
+            kind: kind,
+            id: id,
             loading: {
                 audit: audit.loading,
                 resource: resource.loading
@@ -58,14 +79,5 @@ module.exports = React.createClass({
                         isLoading={this.state.loading.audit} />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            kind = unescape(this.getParams().kind),
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForResource(kind, id);
-        actions.resources.loadOne(kind, id);
     }
 });

data/app/src/components/dashboard/activity.js

@@ -97,16 +97,36 @@ module.exports = React.createClass({
         return null;
     },
 
+    getInitialState() {
+        return {showActivity: false};
+    },
+    
+   toggleActivity(e) {
+        e.preventDefault();
+
+        this.setState({showActivity: !this.state.showActivity});
+    },
+
     render() {
         var data = this.getData(this.props.audit);
+        var activity_body = [];
+    
+        var msg = this.state.showActivity ? 'Hide' : 'Show graph';
+       
+        if (this.state.showActivity) {
+            activity_body.push(
+                <div className="b-dashboard-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
 
         return (
           <div className="b-dashboard-activity">
             <h2>Activity<Refresh show={this.props.isLoading} /></h2>
-            <div className="b-dashboard-activity__graph">
-              <Chart options={this.props.options}
-                     data={data} />
-            </div>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activity_body}
           </div>
         );
     }

data/app/src/components/generic/foldable_audit_section.js

@@ -58,6 +58,15 @@ var FoldableAuditSection = React.createClass({
             isLoading = isLoading || false;
 
             var filter = function(e) {
+                // hide new event role:index / all_roles , which is used by role graph only
+                if ((e.kind === 'role') && (e.action === 'index')) {
+                    return false;
+                }
+
+                if ((e.kind === 'role') && (e.action === 'all_roles')) {
+                    return false;
+                }
+
                 return (
                     e.hasOwnProperty('error') || e.allowed === false
                 );
@@ -79,6 +88,14 @@ var FoldableAuditSection = React.createClass({
             isLoading = isLoading || false;
 
             var filter = function(e) {
+                // hide new event role:index / all_roles , which is used by role graph only
+                if ((e.kind === 'role') && (e.action === 'index')) {
+                    return false;
+                }
+
+                if ((e.kind === 'role') && (e.action === 'all_roles')) {
+                    return false;
+                }
 
                 if (e.action === 'check') {
                     return false;

data/app/src/components/generic/role_link.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react'),
-    Link = require('react-router').Link,
+    Router = require('react-router'),
+    Link = Router.Link,
     includes = require('lodash/collection/includes');
 
 /** render a link to the role represented by this.props.id