conjur-asset-ui-beta 1.5.0 → 1.6.0

data/app/src/components/host/updaters.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react'),
+    take = require('lodash/array/take');
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'HostUpdaters',
+
+    propTypes: {
+        data: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            data: [],
+            isLoading: false
+        };
+    },
+
+    getInitialState() {
+        return {showAll: false};
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.setState({showAll: !this.state.showAll});
+    },
+
+    getItems() {
+        var items = this.props.data;
+
+        if (!this.state.showAll) {
+            items = take(items, 5);
+        }
+
+        return items.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            msg = this.state.showAll ? 'Show top 5' : 'See all',
+            empty = items.length === 0,
+            lessThan5 = items.length <= 5,
+            body = [(<h2>Updaters<Refresh show={this.props.isLoading} /></h2>)];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-host-updaters__list list-unstyled list-group">
+                {items}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There is no updaters</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-host-updaters__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-host-updaters">
+            {body}
+          </div>
+        );
+    }
+});

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

@@ -4,7 +4,6 @@ var React = require('react'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
     StoreWatchMixin = Fluxxor.StoreWatchMixin,
-    Router = require('react-router'),
     compact = require('lodash/array/compact');
 
 var TabbedArea = require('react-bootstrap/lib/TabbedArea');
@@ -13,34 +12,62 @@ var Annotations = require('../generic/annotations'),
     Breadcrumbs = require('../generic/breadcrumbs'),
     FoldableAuditSection = require('../generic/foldable_audit_section'),
     TabMixin = require('../generic/tab_mixin'),
+    RoleGraph = require('../graph/graph'),
     Refresh = require('../refresh/refresh');
 
 var AuditTable = require('../audit/table');
 
 var Activity = require('./activity'),
+    Updaters = require('./updaters'),
+    Executors = require('./executors'),
     Details = require('./details');
 
 module.exports = React.createClass({
     displayName: 'HostView',
 
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'host', 'resources'), Router.State, TabMixin],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'host', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('host', state.id);
+        actions.audit.loadForResource('host', state.id);
+        actions.host.load(state.id);
+        actions.resources.loadOne('host', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            id = unescape(this.getParams().id),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor('host', id),
             data = flux.store('host').getData(),
             resource = flux.store('resources').getResource('host', id);
 
         var ret =  {
+            id: id,
             loading: data.loading,
             host: data.host,
             owned: data.owned,
             roles: data.roles,
             owner: resource.data.owner,
             annotations: resource.data.annotations,
+            resource: resource.data,
             audit: audit.data,
-            resources: data.resources
+            resources: data.resources,
+            executors: data.executors,
+            updaters: data.updaters
         };
 
         ret.loading.audit = audit.loading;
@@ -77,6 +104,17 @@ module.exports = React.createClass({
             <hr />
             {FoldableAuditSection.warnings(this.state.audit, this.state.loading.audit)}
             <hr />
+            <div className="row">
+              <div className="col-md-6">
+                <Updaters data={this.state.updaters}
+                          isLoading={this.state.loading.updaters} />
+              </div>
+              <div className="col-md-6">
+                <Executors data={this.state.executors}
+                          isLoading={this.state.loading.executors} />
+              </div>
+            </div>
+            <hr />
             <div className="row">
               <div className="col-md-6">
                 <Details owner={this.state.owner}
@@ -94,20 +132,14 @@ module.exports = React.createClass({
               {tabs}
             </TabbedArea>
             <hr />
+            <RoleGraph height="400"
+                       kind="host"
+                       id={this.state.id} />
+            <hr />
             <AuditTable events={this.state.audit}
                         isLoading={this.state.loading.audit}
                         caption="Recent Activity" />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForRole('host', id);
-        actions.audit.loadForResource('host', id);
-        actions.host.load(id);
-        actions.resources.loadOne('host', id);
     }
 });

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

@@ -4,7 +4,6 @@ var React = require('react'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
     StoreWatchMixin = Fluxxor.StoreWatchMixin,
-    Router = require('react-router'),
     compact = require('lodash/array/compact');
 
 var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
@@ -15,6 +14,7 @@ var AuditTable = require('../audit/table'),
     RoleLink = require('../generic/role_link'),
     TabMixin = require('../generic/tab_mixin'),
     HostLink = require('../host/host_link'),
+    RoleGraph = require('../graph/graph'),
     utils = require('../../utils');
 
 var abstractRole = function(expected) {
@@ -31,22 +31,45 @@ var abstractRole = function(expected) {
 module.exports = React.createClass({
     displayName: 'LayerView',
 
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'layer', 'resources'), Router.State, TabMixin],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'layer', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('layer', state.id);
+        actions.audit.loadForResource('layer', state.id);
+        actions.layer.load(state.id);
+        actions.resources.loadOne('layer', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            id = unescape(this.getParams().id),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor('layer', id),
             data = flux.store('layer').getData(),
             resource = flux.store('resources').getResource('layer', id);
 
         var ret = {
+            id: id,
             loading: data.loading,
             layer: data.layer,
             owned: data.owned,
             roles: data.roles,
             owner: resource.data.owner,
             annotations: resource.data.annotations,
+            resource: resource.data,
             users: data.users,
             admins: data.admins,
             resources: data.resources,
@@ -164,17 +187,11 @@ module.exports = React.createClass({
             <TabbedArea defaultActiveKey="overview">
               {tabs}
             </TabbedArea>
+            <hr />
+            <RoleGraph height="400"
+                       kind="layer"
+                       id={this.state.id} />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForRole('layer', id);
-        actions.audit.loadForResource('layer', id);
-        actions.layer.load(id);
-        actions.resources.loadOne('layer', id);
     }
 });

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

@@ -4,7 +4,6 @@ var React = require('react'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
     StoreWatchMixin = Fluxxor.StoreWatchMixin,
-    Router = require('react-router'),
     compact = require('lodash/array/compact');
 
 var TabbedArea = require('react-bootstrap/lib/TabbedArea'),
@@ -17,17 +16,35 @@ var TabMixin = require('../generic/tab_mixin'),
 module.exports = React.createClass({
     displayName: 'PolicyView',
 
-    mixins: [FluxMixin, StoreWatchMixin('policy'), Router.State, TabMixin],
+    mixins: [FluxMixin, StoreWatchMixin('policy', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.policy.load(state.id);
+        actions.resources.loadOne('policy', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
+            id = flux.store('route').getParam('id'),
             data = flux.store('policy').getData(),
-            resource = flux.store('resources').getResource(
-                'policy',
-                unescape(this.getParams().id)
-            );
+            resource = flux.store('resources').getResource('policy', id);
 
         var ret = {
+            id: id,
             loading: data.loading,
             resource: resource.data,
             owner: resource.data.owner,
@@ -86,13 +103,5 @@ module.exports = React.createClass({
             </TabbedArea>
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.policy.load(id);
-        actions.resources.loadOne('policy', id);
     }
 });

data/app/src/components/search/search.js

@@ -15,15 +15,33 @@ var SearchGroup = require('./group'),
 module.exports = React.createClass({
     displayName: 'Search',
 
-    mixins: [FluxMixin, StoreWatchMixin('search'), Router.State],
+    mixins: [FluxMixin, StoreWatchMixin('search', 'route'), Router.State],
+
+    askForNewData(state) {
+        this.getFlux().actions.search(state.query);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.query !== nextState.query) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
-        var data = this.getFlux().store('search').getData();
+        var flux = this.getFlux(),
+            data = flux.store('search').getData(),
+            query = flux.store('route').getParam('query');
 
         return {
             loading: data.loading.results,
             results: data.results,
-            query: data.identifier
+            query: query
         };
     },
 
@@ -95,9 +113,5 @@ module.exports = React.createClass({
             </div>
           </div>
         );
-    },
-
-    componentDidMount() {
-        this.getFlux().actions.search(unescape(this.getParams().query));
     }
 });

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

@@ -75,17 +75,38 @@ 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-user-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
 
         return (
           <div className="b-user-activity">
             <h2>Activity<Refresh show={this.props.isLoading} /></h2>
-            <div className="b-user-activity__graph">
-              <Chart options={this.props.options}
-                     data={data} />
-            </div>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activity_body}
           </div>
         );
     }

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

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react'),
-    Router = require('react-router'),
     Fluxxor = require('fluxxor'),
     FluxMixin = Fluxxor.FluxMixin(React),
     StoreWatchMixin = Fluxxor.StoreWatchMixin,
@@ -16,6 +15,7 @@ var TabMixin = require('../generic/tab_mixin'),
     Annotations = require('../generic/annotations'),
     FoldableAuditSection = require('../generic/foldable_audit_section'),
     Refresh = require('../refresh/refresh'),
+    RoleGraph = require('../graph/graph'),
     utils = require('../../utils');
 
 var PubkeysTabContent = require('./pubkeys').PubkeysTabContent,
@@ -23,22 +23,45 @@ var PubkeysTabContent = require('./pubkeys').PubkeysTabContent,
     Activity = require('./activity');
 
 module.exports = React.createClass({
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'user', 'resources'), Router.State, TabMixin],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'user', 'resources', 'route'), TabMixin],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForRole('user', state.id);
+        actions.audit.loadForResource('user', state.id);
+        actions.user.load(state.id);
+        actions.resources.loadOne('user', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            id = unescape(this.getParams().id),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor('user', id),
             data = flux.store('user').getData(),
             resource = flux.store('resources').getResource('user', id);
 
         var ret = {
+            id: id,
             loading: data.loading,
             user: data.user,
             owned: data.owned,
             roles: data.roles,
             owner: resource.data.owner,
             annotations: resource.data.annotations,
+            resource: resource.data,
             pubkeys: data.pubkeys,
             audit: audit.data,
             resources: data.resources
@@ -104,20 +127,14 @@ module.exports = React.createClass({
               {tabs}
             </TabbedArea>
             <hr />
+            <RoleGraph height="400"
+                       kind="user"
+                       id={this.state.id} />
+            <hr />
             <AuditTable events={this.state.audit}
                         caption="Recent Activity"
                         isLoading={this.state.loading.audit} />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForRole('user', id);
-        actions.audit.loadForResource('user', id);
-        actions.user.load(id);
-        actions.resources.loadOne('user', id);
     }
 });

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

@@ -66,17 +66,38 @@ 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-variable-activity__graph">
+                  <Chart options={this.props.options}
+                         data={data} />
+                </div>
+            );
+        }
 
         return (
           <div className="b-variable-activity">
             <h2>Activity<Refresh show={this.props.isLoading} /></h2>
-            <div className="b-variable-activity__graph">
-              <Chart options={this.props.options}
-                     data={data} />
-            </div>
+            <a href="#" onClick={this.toggleActivity}>{msg}</a>
+            {activity_body}
           </div>
         );
     }

data/app/src/components/variable/fetchers.js

@@ -51,7 +51,7 @@ module.exports = React.createClass({
         var items = this.getItems(),
             msg = this.state.showAll ? 'Show top 5' : 'See all',
             empty = items.length === 0,
-            lessThan5 = items.length < 5,
+            lessThan5 = items.length <= 5,
             body = [(<h2>Fetchers<Refresh show={this.props.isLoading} /></h2>)];
 
         if (!empty) {

data/app/src/components/variable/updaters.js

@@ -51,7 +51,7 @@ module.exports = React.createClass({
         var items = this.getItems(),
             msg = this.state.showAll ? 'Show top 5' : 'See all',
             empty = items.length === 0,
-            lessThan5 = items.length < 5,
+            lessThan5 = items.length <= 5,
             body = [(<h2>Updaters<Refresh show={this.props.isLoading} /></h2>)];
 
         if (!empty) {

data/app/src/components/variable/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'),
@@ -20,16 +19,37 @@ var Activity = require('./activity'),
 module.exports = React.createClass({
     displayName: 'VariableView',
 
-    mixins: [FluxMixin, StoreWatchMixin('audit', 'variable', 'resources'), Router.State],
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'variable', 'resources', 'route')],
+
+    askForNewData(state) {
+        var actions = this.getFlux().actions;
+
+        actions.audit.loadForResource('variable', state.id);
+        actions.variable.load(state.id);
+        actions.resources.loadOne('variable', state.id);
+    },
+
+    componentDidMount() {
+        this.askForNewData(this.state);
+    },
+
+    componentWillUpdate(nextProps, nextState) {
+        if (this.state.id !== nextState.id) {
+            this.askForNewData(nextState);
+        }
+
+        return true;
+    },
 
     getStateFromFlux() {
         var flux = this.getFlux(),
-            id = unescape(this.getParams().id),
+            id = flux.store('route').getParam('id'),
             audit = flux.store('audit').getEventFor('variable', id),
             data = flux.store('variable').getData(),
             resource = flux.store('resources').getResource('variable', id);
 
         var ret = {
+            id: id,
             loading: data.loading,
             variable: data.variable,
             owner: resource.data.owner,
@@ -92,14 +112,5 @@ module.exports = React.createClass({
                         isLoading={this.state.loading.audit} />
           </div>
         );
-    },
-
-    componentDidMount() {
-        var actions = this.getFlux().actions,
-            id = unescape(this.getParams().id);
-
-        actions.audit.loadForResource('variable', id);
-        actions.variable.load(id);
-        actions.resources.loadOne('variable', id);
     }
 });

data/app/src/constants.js

@@ -7,9 +7,10 @@ var constants = {
     }
 };
 
-function addLoadConsts(prefix) {
+function addExtraConsts(prefix) {
     constants[prefix] = {};
 
+    constants[prefix].ASSET_TYPE = prefix.toLowerCase();
     constants[prefix].LOAD = prefix + '_LOAD';
     constants[prefix].LOAD_SUCCESS = prefix + '_LOAD_SUCCESS';
     constants[prefix].LOAD_FAIL = prefix + '_LOAD_FAIL';
@@ -21,6 +22,7 @@ function addLoadConsts(prefix) {
     'SEARCH',
     'RESOURCES',
     'RESOURCE',
+    'GRAPH',
 // ---------------
     'USER',
     'GROUP',
@@ -29,7 +31,7 @@ function addLoadConsts(prefix) {
     'VARIABLE',
     'POLICY'
 ].forEach((prefix) => {
-    addLoadConsts(prefix);
+    addExtraConsts(prefix);
 });
 
 module.exports = constants;