public/js/views/variable.js in conjur-asset-ui-1.3.1 vs public/js/views/variable.js in conjur-asset-ui-1.3.2
- old
+ new
@@ -1,251 +1,70 @@
/** @jsx React.DOM */
-/* global conjur, React, ReactBootstrap, _ */
-(function(conjur, React, ReactBootstrap, _) {
- 'use strict';
+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(':');
- 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});
- },
- 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">
+ var overview_tab =
+ <TabPane key="overview" tab="Overview">
+ <dl className="dl-horizontal">
<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>
- <div className="pull-right">
- <RevealerBox variable={this.props.data.variable} />
- </div>
- </TabPane>
- );
-
- var updatersTab = (
- <TabPane key="updaters" tab={conjur.utils.getTabname('Updaters', updaters)}>
+ </TabPane>;
+ var updaters_tab =
+ <TabPane key="updaters" tab={get_tabname("Updaters",updaters)}>
<ul className="list-group">
{updaters}
</ul>
- </TabPane>
- );
-
- var fetchersTab = (
- <TabPane key="fetchers" tab={conjur.utils.getTabname('Fetchers', fetchers)}>
+ </TabPane>;
+ var fetchers_tab =
+ <TabPane key="fetchers" tab={get_tabname("Fetchers",fetchers)}>
<ul className="list-group">
{fetchers}
</ul>
- </TabPane>
- );
+ </TabPane>;
+ var annotations_tab = this.annotations_tab();
- var annotationsTab = this.annotationsTab();
-
- var auditTab = (
- <TabPane key="audit" tab="Recent Activity">
+ var audit_tab =
+ <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
- ]);
- // <Breadcrumbs />
- // <hr />
- // <Activity />
- // <hr />
- // <Updaters />
- // <hr />
- // <Fetchers />
- // <hr />
- // <Updates />
- // <hr />
- // <Warnings />
- // <hr />
- // <br />
- // <br />
- // <br />
- // <br />
+ var tabs = _.compact([ overview_tab, updaters_tab, fetchers_tab,
+ annotations_tab, audit_tab ]);
- return (
- <div className="variable">
- <h2>Variable {this.props.data.variable.id}</h2>
- <TabbedArea defaultActiveKey="overview">
- {tabs}
- </TabbedArea>
- </div>
- );
- }
- });
-
-}).bind(conjur.views)
-(
- conjur,
- React,
- ReactBootstrap,
- _
-);
+ return (
+ <div className="variable">
+ <h2>Variable {this.props.data.variable.id}</h2>
+ <TabbedArea defaultActiveKey="overview">
+ {tabs}
+ </TabbedArea>
+ </div>
+ );
+ }
+});