conjur-asset-ui-beta 1.5.0

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+var RoleLink = require('../generic/role_link'),
+    Time = require('../generic/time'),
+    Refresh = require('../refresh/refresh');
+
+module.exports = React.createClass({
+    displayName: 'HostDetails',
+
+    render() {
+        // TODO: control for 'enroll'
+        return (
+          <div className="b-host-details">
+            <h2>Details<Refresh show={this.props.isLoading} /></h2>
+            <dl className="dl-horizontal">
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.props.owner}/></dd>
+
+              <dt>Created by</dt>
+              <dd><RoleLink id={this.props.host.userid}/></dd>
+
+              <dt>Created At</dt>
+              <dd><Time timestamp={this.props.host.created_at}/></dd>
+            </dl>
+         </div>
+        );
+    }
+});

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react'),
+    Link = require('react-router').Link;
+
+module.exports = React.createClass({
+    displayName: 'HostLink',
+
+    hostId() {
+        return this.props.data.split(':')[2];
+    },
+
+    render() {
+        return (
+          <Link to="host" params={{id: this.hostId}}>
+            {this.hostId()}
+          </Link>
+        );
+    }
+});

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var genericListFactory = require('../generic/list_factory');
+
+module.exports = genericListFactory('host', 'Hosts');

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

@@ -0,0 +1,113 @@
+'use strict';
+
+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');
+
+var Annotations = require('../generic/annotations'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    FoldableAuditSection = require('../generic/foldable_audit_section'),
+    TabMixin = require('../generic/tab_mixin'),
+    Refresh = require('../refresh/refresh');
+
+var AuditTable = require('../audit/table');
+
+var Activity = require('./activity'),
+    Details = require('./details');
+
+module.exports = React.createClass({
+    displayName: 'HostView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'host', 'resources'), Router.State, TabMixin],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            id = unescape(this.getParams().id),
+            audit = flux.store('audit').getEventFor('host', id),
+            data = flux.store('host').getData(),
+            resource = flux.store('resources').getResource('host', id);
+
+        var ret =  {
+            loading: data.loading,
+            host: data.host,
+            owned: data.owned,
+            roles: data.roles,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            audit: audit.data,
+            resources: data.resources
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var permissionsTab = this.permissionsTab(this.state.host.roleid),
+            membershipsTab = this.membershipsTab(this.state.host.roleid),
+            ownedTab = this.ownedTab();
+
+        var tabs = compact([
+            membershipsTab,
+            ownedTab,
+            permissionsTab
+        ]);
+
+        var elems = [
+            {url: '/ui/hosts', text: 'Hosts'},
+            {url: '', text: this.state.host.id},
+            {url: '', text: '(owned by ' + this.state.host.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-host">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <Activity audit={this.state.audit}
+                      roleid={this.state.host.roleid}
+                      isLoading={this.state.loading.audit} />
+            <hr />
+            {FoldableAuditSection.warnings(this.state.audit, this.state.loading.audit)}
+            <hr />
+            <div className="row">
+              <div className="col-md-6">
+                <Details owner={this.state.owner}
+                         host={this.state.host}
+                         isLoading={this.state.loading.owner || this.state.loading.host} />
+              </div>
+              <div className="col-md-6">
+                <h2>Annotations<Refresh show={false} /></h2>
+                <Annotations annotations={this.state.annotations} />
+              </div>
+            </div>
+            <hr/>
+            <h2>Other<Refresh show={this.state.loading.annotations} /></h2>
+            <TabbedArea>
+              {tabs}
+            </TabbedArea>
+            <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/list.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var genericListFactory = require('../generic/list_factory');
+
+module.exports = genericListFactory('layer', 'Layers');

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

@@ -0,0 +1,180 @@
+'use strict';
+
+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'),
+    TabPane = require('react-bootstrap/lib/TabPane');
+
+var AuditTable = require('../audit/table'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    RoleLink = require('../generic/role_link'),
+    TabMixin = require('../generic/tab_mixin'),
+    HostLink = require('../host/host_link'),
+    utils = require('../../utils');
+
+var abstractRole = function(expected) {
+    return function(role) {
+        var tokens = role.split(':'),
+            kind = tokens[1],
+            abstractKinds = ['@', 'layer'],
+            isAbstract = abstractKinds.indexOf(kind) !== -1;
+
+        return isAbstract === expected;
+    };
+};
+
+module.exports = React.createClass({
+    displayName: 'LayerView',
+
+    mixins: [FluxMixin, StoreWatchMixin('audit', 'layer', 'resources'), Router.State, TabMixin],
+
+    getStateFromFlux() {
+        var flux = this.getFlux(),
+            id = unescape(this.getParams().id),
+            audit = flux.store('audit').getEventFor('layer', id),
+            data = flux.store('layer').getData(),
+            resource = flux.store('resources').getResource('layer', id);
+
+        var ret = {
+            loading: data.loading,
+            layer: data.layer,
+            owned: data.owned,
+            roles: data.roles,
+            owner: resource.data.owner,
+            annotations: resource.data.annotations,
+            users: data.users,
+            admins: data.admins,
+            resources: data.resources,
+            audit: audit.data
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var hosts = this.state.layer.hosts.map(function(host) {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <HostLink data={host} />
+              </li>
+            );
+        });
+
+        var admins = this.state.admins.filter(abstractRole(false)).map(function(role) {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={role}/>
+              </li>
+            );
+        });
+
+        var users = this.state.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 eventKey="overview" tab="Overview">
+            <dl className="dl-horizontal">
+              <dt>Owner</dt>
+              <dd><RoleLink id={this.state.owner} /></dd>
+
+              <dt>Created by</dt>
+              <dd><RoleLink id={this.state.layer.userid} /></dd>
+            </dl>
+          </TabPane>
+        );
+
+        var adminsTab = (
+          <TabPane eventKey="admins" tab={utils.getTabname('Admins', admins)}>
+            <ul className="list-group">
+              {admins}
+            </ul>
+          </TabPane>
+        );
+
+        var usersTab = (
+          <TabPane eventKey="users" tab={utils.getTabname('Users', users)}>
+            <ul className="list-group">
+              {users}
+            </ul>
+          </TabPane>
+        );
+
+        var hostsTab = (
+          <TabPane eventKey="hosts" tab={utils.getTabname('Hosts', hosts)}>
+            <ul className="list-group">
+              {hosts}
+            </ul>
+          </TabPane>
+        );
+
+        var auditTab = (
+          <TabPane eventKey="audit" tab="Recent Activity">
+            <div className="audit auditGroup">
+              <AuditTable events={this.state.audit}
+                          caption=""
+                          isLoading={this.state.loading.audit} />
+            </div>
+          </TabPane>
+        );
+
+
+        var permissionsTab = this.permissionsTab(this.state.layer.roleid),
+            membershipsTab = this.membershipsTab(this.state.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.state.layer.id},
+            {url: '', text: '(owned by ' + this.state.layer.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-layer">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <h2>Layer {this.state.layer.id}</h2>
+            <TabbedArea defaultActiveKey="overview">
+              {tabs}
+            </TabbedArea>
+          </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/navbar/__tests__/navbar-test.js

@@ -0,0 +1,21 @@
+/* global jest, describe, it, expect */
+
+'use strict';
+
+jest.dontMock('../navbar');
+
+var React = require('react/addons'),
+    TestUtils = React.addons.TestUtils,
+    Navbar = require('../navbar');
+
+describe('app', () => {
+    it('default render', () => {
+        var component = TestUtils.renderIntoDocument(
+          <Navbar userId="userId" />
+        );
+
+        var element = TestUtils.findRenderedDOMComponentWithClass(component, 'container');
+
+        expect(element.getDOMNode()).toBe(true);
+    });
+});

data/app/src/components/navbar/nav_search_form.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react'),
+    Fluxxor = require('fluxxor'),
+    FluxMixin = Fluxxor.FluxMixin(React);
+
+module.exports = React.createClass({
+    displayName: 'NavSearchForm',
+
+    mixins: [FluxMixin],
+
+    render() {
+        return (
+          <form className="form-inline navbar-form"
+                role="search"
+                onSubmit={this.handleSubmit}>
+            <div className="form-group">
+              <input ref="input"
+                     type="text"
+                     className="form-control"
+                     placeholder="Search Conjur"></input>
+            </div>
+            <button type="submit"
+                    className="btn btn-default search-button">
+              Search
+            </button>
+          </form>
+        );
+    },
+
+    handleSubmit() {
+        var search = this.refs.input.getDOMNode().value;
+
+        if (search && search.length !== 0) {
+            this.getFlux().actions.routes
+                .transition('search', {'query': window.encodeURIComponent(search)});
+        }
+
+        return false;
+    }
+});

data/app/src/components/navbar/navbar.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+
+var DropdownButton = require('react-bootstrap/lib/DropdownButton'),
+    Navbar = require('react-bootstrap/lib/Navbar'),
+    Nav = require('react-bootstrap/lib/Nav'),
+    MenuItem = require('react-bootstrap/lib/MenuItem');
+
+var NavItemLink = require('react-router-bootstrap/lib/NavItemLink'),
+    MenuItemLink = require('react-router-bootstrap/lib/MenuItemLink');
+
+var NavSearchForm = require('./nav_search_form'),
+    RoleLink = require('../generic/role_link');
+
+module.exports = React.createClass({
+    displayName: 'Navbar',
+
+    render() {
+        var style = {
+            backgroundPositionY: '0.8em'
+        };
+
+        var listStyle = {
+            marginRight: '15px'
+        };
+
+        return (
+          <Navbar brand="Conjur">
+            <Nav eventKey={0}>
+              <NavItemLink to="dashboard">
+                Dashboard
+              </NavItemLink>
+              <DropdownButton eventKey={3} title="Directory">
+                <MenuItemLink to="users">
+                  Users
+                </MenuItemLink>
+                <MenuItemLink to="groups">
+                  Groups
+                </MenuItemLink>
+                <MenuItem divider />
+                <MenuItemLink to="hosts">
+                  Hosts
+                </MenuItemLink>
+                <MenuItemLink to="layers">
+                  Layers
+                </MenuItemLink>
+                <MenuItem divider />
+                <MenuItemLink to="variables">
+                  Variables
+                </MenuItemLink>
+                <MenuItemLink to="custom-types">
+                  Custom Types
+                </MenuItemLink>
+              </DropdownButton>
+              <NavItemLink to="policies">
+                Policies
+              </NavItemLink>
+            </Nav>
+            <Nav right eventKey={1} style={listStyle}>
+              <li>
+                <RoleLink id={this.props.userId} style={style} />
+              </li>
+              <li>
+                <NavSearchForm />
+              </li>
+            </Nav>
+          </Navbar>
+        );
+    }
+});