conjur-asset-ui 1.4.2 → 1.6.0

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

@@ -0,0 +1,46 @@
+var React = require('react');
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'VariableDetails',
+
+    propTypes: {
+        variable: React.PropTypes.object,
+        owner: React.PropTypes.string,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            variable: {},
+            owner: '',
+            isLoading: false
+        };
+    },
+
+    render() {
+        return (
+          <div className="b-variable-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.variable.userid} /></dd>
+
+              <dt>MIME type</dt>
+              <dd>{this.props.variable.mime_type}</dd>
+
+              <dt>Kind</dt>
+              <dd>{this.props.variable.kind}</dd>
+
+              <dt>Versions</dt>
+              <dd>{this.props.variable.version_count}</dd>
+            </dl>
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,77 @@
+var React = require('react');
+
+import {take} from 'lodash';
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'VariableFetchers',
+
+    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() {
+        return this.props.data.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            itemsToDisplay = this.state.showAll ? items : take(items, 5),
+            msg = this.state.showAll ? 'Show top 5' : 'See all',
+            empty = items.length === 0,
+            lessThan5 = items.length <= 5,
+            body = [(<h2>Fetchers<Refresh show={this.props.isLoading} /></h2>)];
+
+        if (!empty) {
+            body.push(
+              <ul className="b-variable-fetchers__list list-unstyled list-group">
+                {itemsToDisplay}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There are no fetchers</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-variable-fetchers__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-variable-fetchers">
+            {body}
+          </div>
+        );
+    }
+});

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

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

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

@@ -0,0 +1,77 @@
+var React = require('react');
+
+import {take} from 'lodash';
+
+var RoleLink = require('../generic/role_link'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'VariableUpdaters',
+
+    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() {
+        return this.props.data.map((e) => {
+            return (
+              <li className="list-group-item list-group-item-noborder">
+                <RoleLink id={e} />
+              </li>
+            );
+        });
+    },
+
+    render() {
+        var items = this.getItems(),
+            itemsToDisplay = this.state.showAll ? items : take(items, 5),
+            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-variable-updaters__list list-unstyled list-group">
+                {itemsToDisplay}
+              </ul>
+            );
+        } else {
+            body.push(
+              <p>There are no updaters</p>
+            );
+        }
+
+        if (!lessThan5) {
+            body.push(
+              <div className="b-variable-updaters__toggle">
+                <a href="#" onClick={this.handleClick}>{msg}</a>
+              </div>
+            );
+        }
+
+        return (
+          <div className="b-variable-updaters">
+            {body}
+          </div>
+        );
+    }
+});

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

@@ -0,0 +1,115 @@
+var React = require('react'),
+    Fluxxor = require('fluxxor');
+
+var FluxMixin = Fluxxor.FluxMixin(React),
+    StoreWatchMixin = Fluxxor.StoreWatchMixin;
+
+var AuditTable = require('../audit/table'),
+    Annotations = require('../generic/annotations'),
+    Breadcrumbs = require('../generic/breadcrumbs'),
+    FoldableAuditSection = require('../generic/foldable_audit_section'),
+    Refresh = require('../refresh/refresh');
+
+var Activity = require('./activity'),
+    Updaters = require('./updaters'),
+    Fetchers = require('./fetchers'),
+    Details = require('./details');
+
+export default React.createClass({
+    displayName: 'VariableView',
+
+    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 = 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,
+            annotations: resource.data.annotations,
+            audit: audit.data,
+            fetchers: data.fetchers,
+            updaters: data.updaters
+        };
+
+        ret.loading.audit = audit.loading;
+        ret.loading.owner = resource.loading;
+        ret.loading.annotations = resource.loading;
+
+        return ret;
+    },
+
+    render() {
+        var elems = [
+            {url: '/ui/variables', text: 'Variables'},
+            {url: '', text: this.state.variable.id},
+            {url: '', text: '(owned by ' + this.state.variable.ownerid + ')'}
+        ];
+
+        return (
+          <div className="b-variable">
+            <Breadcrumbs elems={elems} />
+            <hr />
+            <Activity audit={this.state.audit}
+                      isLoading={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">
+                <Fetchers data={this.state.fetchers}
+                          isLoading={this.state.loading.fetchers} />
+              </div>
+            </div>
+            <hr />
+            {FoldableAuditSection.updates(this.state.audit, 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}
+                         variable={this.state.variable}
+                         isLoading={this.state.loading.variable || this.state.loading.owner} />
+              </div>
+              <div className="col-md-6">
+                <h2>Annotations<Refresh show={this.state.loading.annotations} /></h2>
+                <Annotations annotations={this.state.annotations} />
+              </div>
+            </div>
+            <hr />
+            <AuditTable events={this.state.audit}
+                        caption="Recent Activity"
+                        isLoading={this.state.loading.audit} />
+          </div>
+        );
+    }
+});

data/app/src/constants.js

@@ -0,0 +1,36 @@
+var constants = {
+    FLASH_MESSAGE: 'FLASH_MESSAGE',
+    FLASH_MESSAGE_CLEAR: 'FLASH_MESSAGE_CLEAR',
+    ROUTES: {
+        TRANSITION: 'TRANSITION'
+    }
+};
+
+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';
+}
+
+[
+    'AUDIT',
+    'DASHBOARD',
+    'SEARCH',
+    'RESOURCES',
+    'RESOURCE',
+    'GRAPH',
+// ---------------
+    'USER',
+    'GROUP',
+    'HOST',
+    'LAYER',
+    'VARIABLE',
+    'POLICY'
+].forEach((prefix) => {
+    addExtraConsts(prefix);
+});
+
+export default constants;

data/app/src/pages/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Conjur UI</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
+
+    <script src="/js/pace.js"></script>
+    <link href="/js/styles.css" rel="stylesheet">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+
+    <script src="/js/vendor.bundle.js"></script>
+    <script src="/js/app.js"></script>
+  </head>
+  <body>
+    <div id="wrapper">
+
+    </div>
+  </body>
+</html>

data/app/src/routes.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Route, DefaultRoute, NotFoundRoute} from 'react-router';
+
+import App from './components/app/app';
+import Wrapper from './components/app/wrapper';
+import {NotFound} from './components/notfound/notfound';
+import {Login} from './components/auth/login';
+import {Logout} from './components/auth/logout';
+import Dashboard from './components/dashboard/dashboard';
+import Search from './components/search/search';
+
+import UserList from './components/user/list';
+import UserView from './components/user/view';
+import GroupList from './components/group/list';
+import GroupView from './components/group/view';
+import HostList from './components/host/list';
+import HostView from './components/host/view';
+import LayerList from './components/layer/list';
+import LayerView from './components/layer/view';
+import VariableList from './components/variable/list';
+import VariableView from './components/variable/view';
+import PolicyList from './components/policy/list';
+import PolicyView from './components/policy/view';
+import CustomList from './components/custom/list';
+import CustomView from './components/custom/view';
+
+export default ([
+  <Route handler={Wrapper}>
+    <Route path="/ui/?" handler={App}>
+      <Route name="dashboard" path="/ui/?" handler={Dashboard} />
+
+      <Route name="users" path="/ui/users/?" handler={UserList} />
+      <Route name="user" path="/ui/users/:id/?" handler={UserView} />
+
+      <Route name="groups" path="/ui/groups/?" handler={GroupList} />
+      <Route name="group" path="/ui/groups/:id/?" handler={GroupView} />
+
+      <Route name="hosts" path="/ui/hosts/?" handler={HostList} />
+      <Route name="host" path="/ui/hosts/:id/?" handler={HostView} />
+
+      <Route name="layers" path="/ui/layers/?" handler={LayerList} />
+      <Route name="layer" path="/ui/layers/:id/?" handler={LayerView} />
+
+      <Route name="variables" path="/ui/variables/?" handler={VariableList} />
+      <Route name="variable" path="/ui/variables/:id/?" handler={VariableView} />
+
+      <Route name="policies" path="/ui/policies/?" handler={PolicyList} />
+      <Route name="policy" path="/ui/policies/:id/?" handler={PolicyView} />
+
+      <Route name="custom-types" path="/ui/custom-types/?" handler={CustomList} />
+      <Route name="custom-type" path="/ui/custom-type/:kind/:id/?" handler={CustomView} />
+
+      <Route name="search" path="/ui/search/:query/?" handler={Search} />
+
+      <DefaultRoute handler={Dashboard} />
+    </Route>
+
+    <Route name="login" path="/ui/login/?" handler={Login} />
+
+    <Route name="logout" path="/ui/logout/?" handler={Logout} />
+
+    <NotFoundRoute handler={NotFound} />
+  </Route>
+]);