conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,3 @@
+var genericListFactory = require('../generic/list_factory');
+
+export default genericListFactory('layer', 'Layers');

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

@@ -0,0 +1,197 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+import {compact} from 'lodash';
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+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'),
+    RoleGraph = require('../graph/graph');
+
+import {getTabname} from '../../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;
+    };
+};
+
+export default React.createClass({
+    displayName: 'LayerView',
+
+    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 = 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,
+            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={getTabname('Admins', admins)}>
+            <ul className="list-group">
+              {admins}
+            </ul>
+          </TabPane>
+        );
+
+        var usersTab = (
+          <TabPane eventKey="users" tab={getTabname('Users', users)}>
+            <ul className="list-group">
+              {users}
+            </ul>
+          </TabPane>
+        );
+
+        var hostsTab = (
+          <TabPane eventKey="hosts" tab={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>
+            <hr />
+            <RoleGraph height="400"
+                       kind="layer"
+                       id={this.state.id} />
+          </div>
+        );
+    }
+});

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');
+var TestUtils = React.addons.TestUtils;
+var 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,40 @@
+var React = require('react'),
+    Router = require('react-router'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React);
+
+export default React.createClass({
+    displayName: 'NavSearchForm',
+
+    mixins: [FluxMixin, Router.Navigation],
+
+    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.transitionTo('search', {query: window.encodeURIComponent(search)});
+        }
+
+        return false;
+    }
+});

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

@@ -0,0 +1,96 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+import {DropdownButton, Navbar, Nav, MenuItem} from 'react-bootstrap';
+import {SplitButton, Button} from 'react-bootstrap';
+
+var NavItemLink = require('react-router-bootstrap/lib/NavItemLink'),
+    MenuItemLink = require('react-router-bootstrap/lib/MenuItemLink');
+
+var NavSearchForm = require('./nav_search_form');
+
+var FluxMixin = Fluxxor.FluxMixin(React);
+
+export default React.createClass({
+    displayName: 'Navbar',
+
+    mixins: [FluxMixin],
+
+    contextTypes: {
+        router: React.PropTypes.func
+    },
+
+    handleClick(e) {
+        e.preventDefault();
+
+        this.context.router.transitionTo('user', {id: this.props.username});
+    },
+
+    render() {
+        const style = {marginTop: '8px'},
+              listStyle = {marginRight: '15px'};
+
+        var button = (
+            <Button title={`user ${this.props.username}`}
+                    style={style}
+                    onClick={this.handleClick}>
+                {`user ${this.props.username}`}
+            </Button>
+        );
+
+        if (this.getFlux().actions.getRManager().allowLogout) {
+            button = (
+                <SplitButton title={`user ${this.props.username}`}
+                             style={style}
+                             onClick={this.handleClick}>
+                    <MenuItemLink to="logout">
+                        Logout
+                    </MenuItemLink>
+                </SplitButton>
+            );
+        }
+
+        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={true} />
+                <MenuItemLink to="hosts">
+                  Hosts
+                </MenuItemLink>
+                <MenuItemLink to="layers">
+                  Layers
+                </MenuItemLink>
+                <MenuItem divider={true} />
+                <MenuItemLink to="variables">
+                  Variables
+                </MenuItemLink>
+                <MenuItemLink to="custom-types">
+                  Custom Types
+                </MenuItemLink>
+              </DropdownButton>
+              <NavItemLink to="policies">
+                Policies
+              </NavItemLink>
+            </Nav>
+            <Nav right={true} eventKey={1} style={listStyle}>
+                <li>
+                    {button}
+                </li>
+              <li>
+                <NavSearchForm />
+              </li>
+            </Nav>
+          </Navbar>
+        );
+    }
+});

data/app/src/components/notfound/notfound.js

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+
+import './notfound.less';
+
+export class NotFound extends Component {
+    render() {
+        return (
+          <div className="container-fluid b-notfound">
+            <div className="row b-notfound--row">
+              <div className="col-md-12">
+                <div className="error-template">
+                  <h1>
+                    Oops!
+                  </h1>
+                  <h2>
+                    404 Not Found
+                  </h2>
+                  <div className="error-details">
+                    Sorry, an error has occured, Requested page not found!
+                  </div>
+                  <div className="b-notfound--error-actions">
+                    <Link to="dashboard" className="btn btn-primary btn-lg">
+                      <span className="glyphicon glyphicon-home"></span> Take me to the dashboard
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+    }
+}
+
+NotFound.displayName = 'NotFound';

data/app/src/components/notfound/notfound.less

@@ -0,0 +1,21 @@
+.b-notfound {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    overflow: auto;
+    position: fixed;
+    background: #43525A;
+    color: white;
+}
+
+.b-notfound--row {
+    margin: 50px auto auto;
+    margin-top: 70px;
+    margin-left: 70px !important;
+}
+
+.b-notfound--error-actions {
+    margin-top: 10px;
+}

data/app/src/components/owned_resources/owned_resources.js

@@ -0,0 +1,84 @@
+var React = require('react');
+
+var OwnedResourcesBox = require('./owned_resources_box');
+
+var OwnedResourcesSummary = React.createClass({
+    displayName: 'OwnedResourcesSummary',
+
+    render() {
+        var expand = '';
+
+        if (this.props.length > 0) {
+            expand = (
+              <span>
+                <br/>
+                <span>
+                  <a onClick={this.props.handler}>Show all &raquo;</a>
+                </span>
+              </span>
+            );
+        }
+
+        var message = '';
+
+        if (this.props.length === 0) {
+            message = 'none';
+        } else {
+            message = '' + this.props.length + ' things';
+        }
+
+        return (
+          <div>
+            <span>
+              {message}
+            </span>
+            {expand}
+          </div>
+        );
+    }
+});
+
+export default React.createClass({
+    displayName: 'OwnedResources',
+
+    getInitialState() {
+        return {
+            expanded: false
+        };
+    },
+
+    toggle(e) {
+        e.preventDefault();
+
+        this.setState({expanded: !this.state.expanded});
+    },
+
+    render() {
+        var content = null;
+
+        if (this.state.expanded || this.props.tabview) {
+            content = (
+              <OwnedResourcesBox resources={this.props.owned}
+                                 handler={this.toggle}
+                                 tabview={this.props.tabview} />
+            );
+
+        } else {
+            content = (
+              <OwnedResourcesSummary length={this.props.owned.length}
+                                     handler={this.toggle} />
+            );
+        }
+
+        var ownedheader = this.props.tabview ? '': (<h3>Owned assets</h3>);
+
+        return (
+          <section className="owned row">
+            {ownedheader}
+            <div id="ownedDetails" className="col-xs-6">
+              {content}
+            </div>
+          </section>
+        );
+    }
+});