public/js/views/variable.js in conjur-asset-ui-1.3.0 vs public/js/views/variable.js in conjur-asset-ui-1.3.1
- old
+ new
@@ -1,70 +1,251 @@
/** @jsx React.DOM */
+/* global conjur, React, ReactBootstrap, _ */
-var Variable = React.createClass({
- mixins: [conjur.views.mixins.Tab],
- render: function() {
- var updaters = this.props.data.updaters.map(function (member) {
- return <li className="list-group-item list-group-item-noborder">
- <RoleLink id={member} />
- </li>
- }.bind(this));
- var fetchers = this.props.data.fetchers.map(function (member) {
- return <li className="list-group-item list-group-item-noborder">
- <RoleLink id={member} />
- </li>
- }.bind(this));
- var resourceId = [ conjur.app.configuration.account, 'variable', this.props.data.variable.id ].join(':');
+(function(conjur, React, ReactBootstrap, _) {
+ 'use strict';
+ var TabbedArea = ReactBootstrap.TabbedArea,
+ TabPane = ReactBootstrap.TabPane,
+ Tab = conjur.views.mixins.Tab,
+ RoleLink = conjur.views.RoleLink,
+ AuditBox = window.AuditBox;
+ var RevealerBox = React.createClass({
+ getInitialState: function() {
+ return {revealed: false};
+ },
+ handleClick: function() {
+ this.setState({revealed: !this.state.revealed});
+ },
- var overview_tab =
- <TabPane key="overview" tab="Overview">
- <dl className="dl-horizontal">
+ render: function() {
+ var valToShow = this.state.revealed ? 'SECRET HERE!' : 'Show Value';
+
+ return (
+ <div className="revealer well well-sm" onClick={this.handleClick}>
+ {valToShow}
+ </div>
+ );
+ }
+ });
+
+ var Breadcrumb = React.createClass({
+ render: function() {
+ return (
+ <div className="b-breadcrumb">
+
+ </div>
+ );
+ }
+ });
+
+ var Breadcrumbs = React.createClass({
+ render: function() {
+ return (
+ <div className="b-breadcrumbs">
+ <Breadcrumb />
+ </div>
+ );
+ }
+ });
+
+ var Activity = React.createClass({
+ getInitialState: function() {
+ var data = this.getData();
+
+ return {
+ data: data,
+ options: {
+ legend: {
+ close: 'Closed',
+ sread: 'Suc. read',
+ supdate: 'Suc. update',
+ fread: 'Failed read',
+ fupdate: 'Failed update'
+ },
+ axis: {
+ y: {
+ label: 'Value'
+ }
+ }
+ }
+ };
+ },
+
+ getData: function() {
+ return [];
+ },
+
+ render: function() {
+ return (
+ <div className="b-variable-activity">
+ <h2>Activity</h2>
+ <div className="b-variable-activity__graph">
+ <Chart options={this.state.options}
+ data={this.state.data} />
+ </div>
+ </div>
+ );
+ }
+ });
+
+ var Updaters = React.createClass({
+ render: function() {
+ return (
+ <div className="b-variable-updaters">
+ <h2>Updaters</h2>
+ </div>
+ );
+ }
+ });
+
+ var Fetchers = React.createClass({
+ render: function() {
+ return (
+ <div className="b-variable-fetchers">
+ <h2>Fetchers</h2>
+ </div>
+ );
+ }
+ });
+
+ var Updates = React.createClass({
+ render: function() {
+ return (
+ <div className="b-variable-updates">
+ <h2>Updates</h2>
+ </div>
+ );
+ }
+ });
+
+ var Warnings = React.createClass({
+ render: function() {
+ return (
+ <div className="b-variable-warnings">
+ <h2>Warnings</h2>
+ </div>
+ );
+ }
+ });
+
+ this.Variable = React.createClass({
+ mixins: [Tab],
+
+ render: function() {
+ var updaters = this.props.data.updaters.map(function(member) {
+ return (
+ <li className="list-group-item list-group-item-noborder">
+ <RoleLink id={member} />
+ </li>
+ );
+ });
+
+ var fetchers = this.props.data.fetchers.map(function(member) {
+ return (
+ <li className="list-group-item list-group-item-noborder">
+ <RoleLink id={member} />
+ </li>
+ );
+ });
+
+ var resourceId = [
+ conjur.app.configuration.account,
+ 'variable',
+ this.props.data.variable.id
+ ].join(':');
+
+ var overviewTab = (
+ <TabPane key="overview" tab="Overview">
+ <dl className="dl-horizontal pull-left">
<dt>Owner</dt>
- <dd><RoleLink id={this.props.data.variable.ownerid}/></dd>
+ <dd><RoleLink id={this.props.data.variable.ownerid} /></dd>
+
<dt>Created by</dt>
- <dd><RoleLink id={this.props.data.variable.userid}/></dd>
+ <dd><RoleLink id={this.props.data.variable.userid} /></dd>
+
<dt>MIME type</dt>
<dd>{this.props.data.variable.mime_type}</dd>
+
<dt>Kind</dt>
<dd>{this.props.data.variable.kind}</dd>
+
<dt>Versions</dt>
<dd>{this.props.data.variable.version_count}</dd>
</dl>
- </TabPane>;
- var updaters_tab =
- <TabPane key="updaters" tab={get_tabname("Updaters",updaters)}>
+ <div className="pull-right">
+ <RevealerBox variable={this.props.data.variable} />
+ </div>
+ </TabPane>
+ );
+
+ var updatersTab = (
+ <TabPane key="updaters" tab={conjur.utils.getTabname('Updaters', updaters)}>
<ul className="list-group">
{updaters}
</ul>
- </TabPane>;
- var fetchers_tab =
- <TabPane key="fetchers" tab={get_tabname("Fetchers",fetchers)}>
+ </TabPane>
+ );
+
+ var fetchersTab = (
+ <TabPane key="fetchers" tab={conjur.utils.getTabname('Fetchers', fetchers)}>
<ul className="list-group">
{fetchers}
</ul>
- </TabPane>;
- var annotations_tab = this.annotations_tab();
+ </TabPane>
+ );
- var audit_tab =
- <TabPane key="audit" tab="Recent Activity">
+ var annotationsTab = this.annotationsTab();
+
+ var auditTab = (
+ <TabPane key="audit" tab="Recent Activity">
<div className="audit auditHost">
<AuditBox resources={[resourceId]} tabview={true}/>
</div>
- </TabPane>;
+ </TabPane>
+ );
+ var tabs = _.compact([
+ overviewTab,
+ updatersTab,
+ fetchersTab,
+ annotationsTab,
+ auditTab
+ ]);
- var tabs = _.compact([ overview_tab, updaters_tab, fetchers_tab,
- annotations_tab, audit_tab ]);
+ // <Breadcrumbs />
+ // <hr />
+ // <Activity />
+ // <hr />
+ // <Updaters />
+ // <hr />
+ // <Fetchers />
+ // <hr />
+ // <Updates />
+ // <hr />
+ // <Warnings />
+ // <hr />
+ // <br />
+ // <br />
+ // <br />
+ // <br />
- return (
- <div className="variable">
- <h2>Variable {this.props.data.variable.id}</h2>
- <TabbedArea defaultActiveKey="overview">
- {tabs}
- </TabbedArea>
- </div>
- );
- }
-});
+ return (
+ <div className="variable">
+ <h2>Variable {this.props.data.variable.id}</h2>
+ <TabbedArea defaultActiveKey="overview">
+ {tabs}
+ </TabbedArea>
+ </div>
+ );
+ }
+ });
+
+}).bind(conjur.views)
+(
+ conjur,
+ React,
+ ReactBootstrap,
+ _
+);