app/addons/activetasks/components.react.jsx - couchdb-fauxton - Git at Google

 // Licensed under the Apache License, Version 2.0 (the "License"); you may not
 // use this file except in compliance with the License. You may obtain a copy of
 // the License at
 //
 //   http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.

 define([
   'app',
   'api',
   'react',
   'addons/activetasks/stores',
   'addons/activetasks/resources',
   'addons/activetasks/actions',
   'addons/components/react-components.react',
   'addons/fauxton/components.react'
 ], function (app, FauxtonAPI, React, Stores, Resources, Actions, Components, ComponentsReact) {

   var activeTasksStore = Stores.activeTasksStore;
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

   var ActiveTasksController = React.createClass({

     getStoreState: function () {
       return {
         collection: activeTasksStore.getCollection(),
         searchTerm: activeTasksStore.getSearchTerm(),
         selectedRadio: activeTasksStore.getSelectedRadio(),

         sortByHeader: activeTasksStore.getSortByHeader(),
         headerIsAscending: activeTasksStore.getHeaderIsAscending(),

         setPolling: activeTasksStore.setPolling,
         clearPolling: activeTasksStore.clearPolling
       };
     },

     getInitialState: function () {
       return this.getStoreState();
     },

     componentDidMount: function () {
       this.state.setPolling();
       activeTasksStore.on('change', this.onChange, this);
     },

     componentWillUnmount: function () {
       this.state.clearPolling();
       activeTasksStore.off('change', this.onChange, this);
     },

     onChange: function () {
       this.setState(this.getStoreState());
     },

     setNewSearchTerm: function (searchTerm) {
       Actions.setSearchTerm(searchTerm);
     },

     switchTab: function (newRadioButton) {  //tabs buttons
       Actions.switchTab(newRadioButton);
     },

     tableHeaderOnClick: function (headerClicked) {
       Actions.sortByColumnHeader(headerClicked);
     },

     render: function () {
       var collection = this.state.collection;
       var searchTerm = this.state.searchTerm;
       var selectedRadio = this.state.selectedRadio;
       var sortByHeader = this.state.sortByHeader;
       var headerIsAscending = this.state.headerIsAscending;

       var setSearchTerm = this.setNewSearchTerm;
       var onTableHeaderClick = this.tableHeaderOnClick;

       return (
         <div id="active-tasks-page" className="scrollable">
           <div className="inner">
             <ActiveTasksFilterTabs
               searchTerm={searchTerm}
               selectedRadio={selectedRadio}
               onSearch={setSearchTerm}
               onRadioClick={this.switchTab}/>
             <ActiveTaskTable
               collection={collection}
               searchTerm={searchTerm}
               selectedRadio={selectedRadio}
               onTableHeaderClick={onTableHeaderClick}
               sortByHeader={sortByHeader}
               headerIsAscending={headerIsAscending} />
           </div>
         </div>
       );
     }
   });

   var ActiveTasksFilterTabs = React.createClass({
     getDefaultProps: function () {
       return {
         radioNames : [
           'All Tasks',
           'Replication',
           'Database Compaction',
           'Indexer',
           'View Compaction'
         ]
       };
     },

     checked: function (radioName) {
       return this.props.selectedRadio === radioName;
     },

     onRadioClick: function (e) {
       var radioName = e.target.value;
       this.props.onRadioClick(radioName);
     },

     createFilterTabs: function () {
       return (
         this.props.radioNames.map(function (radioName) {
           var checked = this.checked(radioName);
           var id = radioName.replace(' ', '-');
           var radioClassName = "radio-" + id;
           var radioClick = this.onRadioClick;
           var checkedClassName = checked ? 'active-tasks-checked' : '';

           return (
             <li className={"active-tasks-one-checkbox " + checkedClassName} key={radioName + "li"}>
               <input
                   className="toggle-filter-tab"
                   data-bypass="true"
                   id={id}
                   type="radio"
                   key ={radioName}
                   name="radio-button-active-task-filter-tray"
                   value={radioName}
                   checked={checked}
                   onChange={radioClick} />
               <label htmlFor={id} className="active-tasks-checkbox-label">
               {radioName}
               </label>
             </li>
           );
         }.bind(this))
       );
     },

     searchTermChange: function (e) {
       var searchTerm = e.target.value;
       this.props.onSearch(searchTerm);
     },

     render: function () {
       var filterTabs = this.createFilterTabs();
       return (
         <ul className="nav nav-tabs" id="active-tasks-filter-tabs">
           {filterTabs}
           <li>
             <input
               id="active-tasks-search-box"
               className="searchbox"
               type="text"
               name="search"
               placeholder="Search for databases..."
               value={this.props.searchTerm}
               onChange={this.searchTermChange} />
           </li>
         </ul>);
     }
   });

   var ActiveTaskTable = React.createClass({
     render: function () {
       var collection = this.props.collection;
       var selectedRadio = this.props.selectedRadio;
       var searchTerm = this.props.searchTerm;
       var sortByHeader = this.props.sortByHeader;
       var onTableHeaderClick = this.props.onTableHeaderClick;
       var headerIsAscending = this.props.headerIsAscending;

       return (
         <div id="dashboard-lower-content">
           <table id="active-tasks-table" className="table table-bordered table-striped active-tasks">
             <ActiveTasksTableHeader
               onTableHeaderClick={onTableHeaderClick}
               sortByHeader={sortByHeader}
               headerIsAscending={headerIsAscending}/>
             <ActiveTasksTableBody
               collection={collection}
               selectedRadio={selectedRadio}
               searchTerm={searchTerm}/>
           </table>
         </div>
       );
     }
   });

   var ActiveTasksTableHeader = React.createClass({
     getDefaultProps: function () {
       return {
         headerNames : [
           ['type', 'Type'],
           ['database', 'Database'],
           ['started-on', 'Started on'],
           ['updated-on', 'Updated on'],
           ['pid', 'PID'],
           ['progress', 'Status']
         ]
       };
     },

     createTableHeadingFields: function () {
       var onTableHeaderClick = this.props.onTableHeaderClick;
       var sortByHeader = this.props.sortByHeader;
       var headerIsAscending = this.props.headerIsAscending;
       return this.props.headerNames.map(function (header) {
         return <TableHeader
           headerName={header[0]}
           displayName={header[1]}
           key={header[0]}
           onTableHeaderClick={onTableHeaderClick}
           sortByHeader={sortByHeader}
           headerIsAscending={headerIsAscending} />;
       });
     },

     render: function () {
       return (
         <thead>
           <tr>{this.createTableHeadingFields()}</tr>
         </thead>
       );
     }
   });

   var TableHeader = React.createClass({
     arrow: function () {
       var sortBy = this.props.sortByHeader;
       var currentName = this.props.headerName;
       var headerIsAscending = this.props.headerIsAscending;
       var arrow = headerIsAscending ? 'icon icon-caret-up' : 'icon icon-caret-down';

       if (sortBy === currentName) {
         return <i className={arrow}></i>;
       }
     },

     onTableHeaderClick: function (e) {
       var headerSelected = e.target.value;
       this.props.onTableHeaderClick(headerSelected);
     },

     render: function () {
       var arrow = this.arrow();
       var th_class = 'header-field ' + this.props.headerName;

       return (
         <input
           type="radio"
           name="header-field"
           id={this.props.headerName}
           value={this.props.headerName}
           className="header-field radio"
           onChange={this.onTableHeaderClick}>
           <td className={th_class + " tableheader"} value={this.props.headerName}>
             <label
               className="header-field label-text active-tasks-header noselect"
               htmlFor={this.props.headerName}>
               {this.props.displayName} {arrow}
             </label>
           </td>
         </input>
       );
     }
   });

   var ActiveTasksTableBody = React.createClass({

     getStoreState: function () {
       return {
         filteredTable: activeTasksStore.getFilteredTable(this.props.collection)
       };
     },

     getInitialState: function () {
       return this.getStoreState();
     },

     componentWillReceiveProps: function (nextProps) {
       this.setState({
         filteredTable: activeTasksStore.getFilteredTable(this.props.collection)
       });
     },

     createRows: function () {
       var isThereASearchTerm = this.props.searchTerm.trim() === "";

       if (this.state.filteredTable.length === 0) {
         return isThereASearchTerm ? this.noActiveTasks() : this.noActiveTasksMatchFilter();
       }

       return _.map(this.state.filteredTable, function (item, key) {
         return <ActiveTaskTableBodyContents key={key} item={item} />;
       });
     },

     noActiveTasks: function () {
       var type = this.props.selectedRadio;
       if (type === "All Tasks") {
         type = "";
       }

       return (
         <tr className="no-matching-database-on-search">
           <td  colSpan="6">No active {type} tasks.</td>
         </tr>
       );
     },

     noActiveTasksMatchFilter: function () {
       var type = this.props.selectedRadio;
       if (type === "All Tasks") {
         type = "";
       }

       return (
         <tr className="no-matching-database-on-search">
           <td colSpan="6">No active {type} tasks match with filter: "{this.props.searchTerm}"</td>
         </tr>
       );
     },

     render: function () {
       return (
         <tbody className="js-tasks-go-here">
         {this.createRows()}
         </tbody>
       );
     }
   });

   var ActiveTaskTableBodyContents = React.createClass({
     getInfo: function (item) {
       return {
         type : item.type,
         objectField: activeTasksHelpers.getDatabaseFieldMessage(item),
         started_on: activeTasksHelpers.getTimeInfo(item.started_on),
         updated_on: activeTasksHelpers.getTimeInfo(item.updated_on),
         pid: item.pid.replace(/[<>]/g, ''),
         progress: activeTasksHelpers.getProgressMessage(item),
       };
     },

     multilineMessage: function (messageArray, optionalClassName) {

       if (!optionalClassName) {
         optionalClassName = '';
       }
       var cssClasses = 'multiline-active-tasks-message ' + optionalClassName;

       return messageArray.map(function (msgLine, iterator) {
         return <p key={iterator} className={cssClasses}>{msgLine}</p>;
       });
     },

     render: function () {
       var rowData =  this.getInfo(this.props.item);
       var objectFieldMsg = this.multilineMessage(rowData.objectField, 'to-from-database');
       var startedOnMsg = this.multilineMessage(rowData.started_on, 'time');
       var updatedOnMsg = this.multilineMessage(rowData.updated_on, 'time');
       var progressMsg = this.multilineMessage(rowData.progress);

       return (
         <tr>
           <td>{rowData.type}</td>
           <td>{objectFieldMsg}</td>
           <td>{startedOnMsg}</td>
           <td>{updatedOnMsg}</td>
           <td>{rowData.pid}</td>
           <td>{progressMsg}<ActiveTasksViewSourceSequence item={this.props.item}/></td>
         </tr>
       );
     }
   });

   var ActiveTasksViewSourceSequence = React.createClass({
     onTrayToggle: function (e) {
       e.preventDefault();
       this.refs.view_source_sequence_btn.toggle(function (shown) {
         if (shown) {
           React.findDOMNode(this.refs.view_source_sequence_btn).focus();
         }
       }.bind(this));
     },

     sequences: function (item) {
       if (_.isNumber(item) || _.isString(item)) {
         return <ComponentsReact.ClipboardWithTextField textToCopy={item} uniqueKey={item}/>;
       }

       if (_.isArray(item)) {
         return _.map(item, function (seq, i) {
             return <ComponentsReact.ClipboardWithTextField textToCopy={seq} uniqueKey={i + Math.random(100)} key={i}/>;
           });
       }

       return  <ComponentsReact.ClipboardWithTextField textToCopy="???" uniqueKey='unknownRevision'/>;
     },

     render: function () {

       if (_.has(this.props.item, 'source_seq')) {
         var sequences = this.sequences(this.props.item.source_seq);
         return (
           <div>
             Current source sequence:
             <a href="#"
               className="view-source-sequence-btn"
               onClick={this.onTrayToggle}
               data-bypass="true">
               View
             </a>
             <ComponentsReact.Tray ref="view_source_sequence_btn" className="view-source-sequence-tray">
               <span className="add-on">Source Sequence</span>
               {sequences}
             </ComponentsReact.Tray>
           </div>
         );
       }
       return null;
     }
   });

   var ActiveTasksPollingWidgetController = React.createClass({

     getStoreState: function () {
       return {
         pollingInterval:  activeTasksStore.getPollingInterval(),
         isLoading: activeTasksStore.isLoading()
       };
     },

     getInitialState: function () {
       return this.getStoreState();
     },

     componentDidMount: function () {
       activeTasksStore.on('change', this.onChange, this);
     },

     onChange: function () {
       if (this.isMounted()) {
         this.setState(this.getStoreState());
       }
     },

     pollingIntervalChange: function (event) {
       Actions.changePollingInterval(event.target.value);
     },

     getPluralForLabel: function () {
       return this.state.pollingInterval === "1" ? '' : 's';
     },

     createPollingWidget: function () {
       var pollingInterval = this.state.pollingInterval;
       var s = this.getPluralForLabel();
       var onChangeHandle = this.pollingIntervalChange;

       return (
         <ul className="polling-interval-widget">
           <li className="polling-interval-name">Polling interval
             <label className="polling-interval-time-label" htmlFor="polling-range">
               <span>{pollingInterval}</span> second{s}
             </label>
           </li>
           <li>
             <input
               id="polling-range"
               type="range"
               min="1"
               max="30"
               step="1"
               value={pollingInterval}
               onChange={onChangeHandle}/>
           </li>
         </ul>
       );
     },

     render: function () {
       var pollingWidget = this.createPollingWidget();
       var loadLines = null;

       if (this.state.isLoading || this.state.pollingInterval === "1") {
         // show loading lines constantly if the polling interval is
         // 1 second, so that the lines aren't choppy
         loadLines = <Components.LoadLines />;
       }

       return (
         <div className="active-tasks-loading-lines-container">
           <span className="active-tasks-loading-lines">
             {loadLines}
           </span>
           {pollingWidget}
         </div>
       );
     }
   });

   var activeTasksHelpers = {
     getTimeInfo: function (timeStamp) {
       var timeMessage = [
           app.helpers.formatDate(timeStamp),
           app.helpers.getDateFromNow(timeStamp)
         ];
       return timeMessage;
     },

     getDatabaseFieldMessage: function (item) {
       var type = item.type;
       var databaseFieldMessage = [];

       if (type === 'replication') {
         databaseFieldMessage.push('From: ' + item.source);
         databaseFieldMessage.push('To: ' + item.target);
       } else if (type === 'indexer') {
         databaseFieldMessage.push(item.database);
         databaseFieldMessage.push('(View: ' + item.design_document + ')');
       } else {
         databaseFieldMessage.push(item.database);
       }

       return databaseFieldMessage;
     },

     getProgressMessage: function (item) {
       var progressMessage = [];
       var type = item.type;

       if (_.has(item, 'progress')) {
         progressMessage.push('Progress: ' + item.progress + '%');
       }

       if (type === 'indexer') {
         progressMessage.push(
           'Processed ' + item.changes_done + ' of ' + item.total_changes + ' changes.'
         );
       } else if (type === 'replication') {
         progressMessage.push(item.docs_written + ' docs written.');

         if (_.has(item, 'changes_pending')) {
           progressMessage.push(item.changes_pending + ' pending changes.');
         }
       }

       if (_.has(item, 'changes_done')) {
         progressMessage.push(item.changes_done + ' Changes done.');
       }

       return progressMessage;
     },

     getSourceSequence: function (item) {
       return item.source_seq;
     }

   };

   return {
     ActiveTasksController: ActiveTasksController,
     ActiveTasksFilterTabs: ActiveTasksFilterTabs,

     ActiveTaskTable: ActiveTaskTable,
     ActiveTasksTableHeader: ActiveTasksTableHeader,
     TableHeader: TableHeader,
     ActiveTasksTableBody: ActiveTasksTableBody,
     ActiveTaskTableBodyContents: ActiveTaskTableBodyContents,
     ActiveTasksViewSourceSequence: ActiveTasksViewSourceSequence,

     ActiveTasksPollingWidgetController: ActiveTasksPollingWidgetController
   };

 });
	// Licensed under the Apache License, Version 2.0 (the "License"); you may not
	// use this file except in compliance with the License. You may obtain a copy of
	// the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
	// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
	// License for the specific language governing permissions and limitations under
	// the License.

	define([
	'app',
	'api',
	'react',
	'addons/activetasks/stores',
	'addons/activetasks/resources',
	'addons/activetasks/actions',
	'addons/components/react-components.react',
	'addons/fauxton/components.react'
	], function (app, FauxtonAPI, React, Stores, Resources, Actions, Components, ComponentsReact) {

	var activeTasksStore = Stores.activeTasksStore;
	var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

	var ActiveTasksController = React.createClass({

	getStoreState: function () {
	return {
	collection: activeTasksStore.getCollection(),
	searchTerm: activeTasksStore.getSearchTerm(),
	selectedRadio: activeTasksStore.getSelectedRadio(),

	sortByHeader: activeTasksStore.getSortByHeader(),
	headerIsAscending: activeTasksStore.getHeaderIsAscending(),

	setPolling: activeTasksStore.setPolling,
	clearPolling: activeTasksStore.clearPolling
	};
	},

	getInitialState: function () {
	return this.getStoreState();
	},

	componentDidMount: function () {
	this.state.setPolling();
	activeTasksStore.on('change', this.onChange, this);
	},

	componentWillUnmount: function () {
	this.state.clearPolling();
	activeTasksStore.off('change', this.onChange, this);
	},

	onChange: function () {
	this.setState(this.getStoreState());
	},

	setNewSearchTerm: function (searchTerm) {
	Actions.setSearchTerm(searchTerm);
	},

	switchTab: function (newRadioButton) { //tabs buttons
	Actions.switchTab(newRadioButton);
	},

	tableHeaderOnClick: function (headerClicked) {
	Actions.sortByColumnHeader(headerClicked);
	},

	render: function () {
	var collection = this.state.collection;
	var searchTerm = this.state.searchTerm;
	var selectedRadio = this.state.selectedRadio;
	var sortByHeader = this.state.sortByHeader;
	var headerIsAscending = this.state.headerIsAscending;

	var setSearchTerm = this.setNewSearchTerm;
	var onTableHeaderClick = this.tableHeaderOnClick;

	return (
	<div id="active-tasks-page" className="scrollable">
	<div className="inner">
	<ActiveTasksFilterTabs
	searchTerm={searchTerm}
	selectedRadio={selectedRadio}
	onSearch={setSearchTerm}
	onRadioClick={this.switchTab}/>
	<ActiveTaskTable
	collection={collection}
	searchTerm={searchTerm}
	selectedRadio={selectedRadio}
	onTableHeaderClick={onTableHeaderClick}
	sortByHeader={sortByHeader}
	headerIsAscending={headerIsAscending} />
	</div>
	</div>
	);
	}
	});

	var ActiveTasksFilterTabs = React.createClass({
	getDefaultProps: function () {
	return {
	radioNames : [
	'All Tasks',
	'Replication',
	'Database Compaction',
	'Indexer',
	'View Compaction'
	]
	};
	},

	checked: function (radioName) {
	return this.props.selectedRadio === radioName;
	},

	onRadioClick: function (e) {
	var radioName = e.target.value;
	this.props.onRadioClick(radioName);
	},

	createFilterTabs: function () {
	return (
	this.props.radioNames.map(function (radioName) {
	var checked = this.checked(radioName);
	var id = radioName.replace(' ', '-');
	var radioClassName = "radio-" + id;
	var radioClick = this.onRadioClick;
	var checkedClassName = checked ? 'active-tasks-checked' : '';

	return (
	<li className={"active-tasks-one-checkbox " + checkedClassName} key={radioName + "li"}>
	<input
	className="toggle-filter-tab"
	data-bypass="true"
	id={id}
	type="radio"
	key ={radioName}
	name="radio-button-active-task-filter-tray"
	value={radioName}
	checked={checked}
	onChange={radioClick} />
	<label htmlFor={id} className="active-tasks-checkbox-label">
	{radioName}
	</label>
	</li>
	);
	}.bind(this))
	);
	},

	searchTermChange: function (e) {
	var searchTerm = e.target.value;
	this.props.onSearch(searchTerm);
	},

	render: function () {
	var filterTabs = this.createFilterTabs();
	return (
	<ul className="nav nav-tabs" id="active-tasks-filter-tabs">
	{filterTabs}
	<li>
	<input
	id="active-tasks-search-box"
	className="searchbox"
	type="text"
	name="search"
	placeholder="Search for databases..."
	value={this.props.searchTerm}
	onChange={this.searchTermChange} />
	</li>
	</ul>);
	}
	});

	var ActiveTaskTable = React.createClass({
	render: function () {
	var collection = this.props.collection;
	var selectedRadio = this.props.selectedRadio;
	var searchTerm = this.props.searchTerm;
	var sortByHeader = this.props.sortByHeader;
	var onTableHeaderClick = this.props.onTableHeaderClick;
	var headerIsAscending = this.props.headerIsAscending;

	return (
	<div id="dashboard-lower-content">
	<table id="active-tasks-table" className="table table-bordered table-striped active-tasks">
	<ActiveTasksTableHeader
	onTableHeaderClick={onTableHeaderClick}
	sortByHeader={sortByHeader}
	headerIsAscending={headerIsAscending}/>
	<ActiveTasksTableBody
	collection={collection}
	selectedRadio={selectedRadio}
	searchTerm={searchTerm}/>
	</table>
	</div>
	);
	}
	});

	var ActiveTasksTableHeader = React.createClass({
	getDefaultProps: function () {
	return {
	headerNames : [
	['type', 'Type'],
	['database', 'Database'],
	['started-on', 'Started on'],
	['updated-on', 'Updated on'],
	['pid', 'PID'],
	['progress', 'Status']
	]
	};
	},

	createTableHeadingFields: function () {
	var onTableHeaderClick = this.props.onTableHeaderClick;
	var sortByHeader = this.props.sortByHeader;
	var headerIsAscending = this.props.headerIsAscending;
	return this.props.headerNames.map(function (header) {
	return <TableHeader
	headerName={header[0]}
	displayName={header[1]}
	key={header[0]}
	onTableHeaderClick={onTableHeaderClick}
	sortByHeader={sortByHeader}
	headerIsAscending={headerIsAscending} />;
	});
	},

	render: function () {
	return (
	<thead>
	<tr>{this.createTableHeadingFields()}</tr>
	</thead>
	);
	}
	});

	var TableHeader = React.createClass({
	arrow: function () {
	var sortBy = this.props.sortByHeader;
	var currentName = this.props.headerName;
	var headerIsAscending = this.props.headerIsAscending;
	var arrow = headerIsAscending ? 'icon icon-caret-up' : 'icon icon-caret-down';

	if (sortBy === currentName) {
	return <i className={arrow}></i>;
	}
	},

	onTableHeaderClick: function (e) {
	var headerSelected = e.target.value;
	this.props.onTableHeaderClick(headerSelected);
	},

	render: function () {
	var arrow = this.arrow();
	var th_class = 'header-field ' + this.props.headerName;

	return (
	<input
	type="radio"
	name="header-field"
	id={this.props.headerName}
	value={this.props.headerName}
	className="header-field radio"
	onChange={this.onTableHeaderClick}>
	<td className={th_class + " tableheader"} value={this.props.headerName}>
	<label
	className="header-field label-text active-tasks-header noselect"
	htmlFor={this.props.headerName}>
	{this.props.displayName} {arrow}
	</label>
	</td>
	</input>
	);
	}
	});

	var ActiveTasksTableBody = React.createClass({

	getStoreState: function () {
	return {
	filteredTable: activeTasksStore.getFilteredTable(this.props.collection)
	};
	},

	getInitialState: function () {
	return this.getStoreState();
	},

	componentWillReceiveProps: function (nextProps) {
	this.setState({
	filteredTable: activeTasksStore.getFilteredTable(this.props.collection)
	});
	},

	createRows: function () {
	var isThereASearchTerm = this.props.searchTerm.trim() === "";

	if (this.state.filteredTable.length === 0) {
	return isThereASearchTerm ? this.noActiveTasks() : this.noActiveTasksMatchFilter();
	}

	return _.map(this.state.filteredTable, function (item, key) {
	return <ActiveTaskTableBodyContents key={key} item={item} />;
	});
	},

	noActiveTasks: function () {
	var type = this.props.selectedRadio;
	if (type === "All Tasks") {
	type = "";
	}

	return (
	<tr className="no-matching-database-on-search">
	<td colSpan="6">No active {type} tasks.</td>
	</tr>
	);
	},

	noActiveTasksMatchFilter: function () {
	var type = this.props.selectedRadio;
	if (type === "All Tasks") {
	type = "";
	}

	return (
	<tr className="no-matching-database-on-search">
	<td colSpan="6">No active {type} tasks match with filter: "{this.props.searchTerm}"</td>
	</tr>
	);
	},

	render: function () {
	return (
	<tbody className="js-tasks-go-here">
	{this.createRows()}
	</tbody>
	);
	}
	});

	var ActiveTaskTableBodyContents = React.createClass({
	getInfo: function (item) {
	return {
	type : item.type,
	objectField: activeTasksHelpers.getDatabaseFieldMessage(item),
	started_on: activeTasksHelpers.getTimeInfo(item.started_on),
	updated_on: activeTasksHelpers.getTimeInfo(item.updated_on),
	pid: item.pid.replace(/[<>]/g, ''),
	progress: activeTasksHelpers.getProgressMessage(item),
	};
	},

	multilineMessage: function (messageArray, optionalClassName) {

	if (!optionalClassName) {
	optionalClassName = '';
	}
	var cssClasses = 'multiline-active-tasks-message ' + optionalClassName;

	return messageArray.map(function (msgLine, iterator) {
	return <p key={iterator} className={cssClasses}>{msgLine}</p>;
	});
	},

	render: function () {
	var rowData = this.getInfo(this.props.item);
	var objectFieldMsg = this.multilineMessage(rowData.objectField, 'to-from-database');
	var startedOnMsg = this.multilineMessage(rowData.started_on, 'time');
	var updatedOnMsg = this.multilineMessage(rowData.updated_on, 'time');
	var progressMsg = this.multilineMessage(rowData.progress);

	return (
	<tr>
	<td>{rowData.type}</td>
	<td>{objectFieldMsg}</td>
	<td>{startedOnMsg}</td>
	<td>{updatedOnMsg}</td>
	<td>{rowData.pid}</td>
	<td>{progressMsg}<ActiveTasksViewSourceSequence item={this.props.item}/></td>
	</tr>
	);
	}
	});

	var ActiveTasksViewSourceSequence = React.createClass({
	onTrayToggle: function (e) {
	e.preventDefault();
	this.refs.view_source_sequence_btn.toggle(function (shown) {
	if (shown) {
	React.findDOMNode(this.refs.view_source_sequence_btn).focus();
	}
	}.bind(this));
	},

	sequences: function (item) {
	if (_.isNumber(item) \|\| _.isString(item)) {
	return <ComponentsReact.ClipboardWithTextField textToCopy={item} uniqueKey={item}/>;
	}

	if (_.isArray(item)) {
	return _.map(item, function (seq, i) {
	return <ComponentsReact.ClipboardWithTextField textToCopy={seq} uniqueKey={i + Math.random(100)} key={i}/>;
	});
	}

	return <ComponentsReact.ClipboardWithTextField textToCopy="???" uniqueKey='unknownRevision'/>;
	},

	render: function () {

	if (_.has(this.props.item, 'source_seq')) {
	var sequences = this.sequences(this.props.item.source_seq);
	return (
	<div>
	Current source sequence:
	<a href="#"
	className="view-source-sequence-btn"
	onClick={this.onTrayToggle}
	data-bypass="true">
	View
	</a>
	<ComponentsReact.Tray ref="view_source_sequence_btn" className="view-source-sequence-tray">
	<span className="add-on">Source Sequence</span>
	{sequences}
	</ComponentsReact.Tray>
	</div>
	);
	}
	return null;
	}
	});

	var ActiveTasksPollingWidgetController = React.createClass({

	getStoreState: function () {
	return {
	pollingInterval: activeTasksStore.getPollingInterval(),
	isLoading: activeTasksStore.isLoading()
	};
	},

	getInitialState: function () {
	return this.getStoreState();
	},

	componentDidMount: function () {
	activeTasksStore.on('change', this.onChange, this);
	},

	onChange: function () {
	if (this.isMounted()) {
	this.setState(this.getStoreState());
	}
	},

	pollingIntervalChange: function (event) {
	Actions.changePollingInterval(event.target.value);
	},

	getPluralForLabel: function () {
	return this.state.pollingInterval === "1" ? '' : 's';
	},

	createPollingWidget: function () {
	var pollingInterval = this.state.pollingInterval;
	var s = this.getPluralForLabel();
	var onChangeHandle = this.pollingIntervalChange;

	return (
	<ul className="polling-interval-widget">
	<li className="polling-interval-name">Polling interval
	<label className="polling-interval-time-label" htmlFor="polling-range">
	<span>{pollingInterval}</span> second{s}
	</label>
	</li>
	<li>
	<input
	id="polling-range"
	type="range"
	min="1"
	max="30"
	step="1"
	value={pollingInterval}
	onChange={onChangeHandle}/>
	</li>
	</ul>
	);
	},

	render: function () {
	var pollingWidget = this.createPollingWidget();
	var loadLines = null;

	if (this.state.isLoading \|\| this.state.pollingInterval === "1") {
	// show loading lines constantly if the polling interval is
	// 1 second, so that the lines aren't choppy
	loadLines = <Components.LoadLines />;
	}

	return (
	<div className="active-tasks-loading-lines-container">
	<span className="active-tasks-loading-lines">
	{loadLines}
	</span>
	{pollingWidget}
	</div>
	);
	}
	});

	var activeTasksHelpers = {
	getTimeInfo: function (timeStamp) {
	var timeMessage = [
	app.helpers.formatDate(timeStamp),
	app.helpers.getDateFromNow(timeStamp)
	];
	return timeMessage;
	},

	getDatabaseFieldMessage: function (item) {
	var type = item.type;
	var databaseFieldMessage = [];

	if (type === 'replication') {
	databaseFieldMessage.push('From: ' + item.source);
	databaseFieldMessage.push('To: ' + item.target);
	} else if (type === 'indexer') {
	databaseFieldMessage.push(item.database);
	databaseFieldMessage.push('(View: ' + item.design_document + ')');
	} else {
	databaseFieldMessage.push(item.database);
	}

	return databaseFieldMessage;
	},

	getProgressMessage: function (item) {
	var progressMessage = [];
	var type = item.type;

	if (_.has(item, 'progress')) {
	progressMessage.push('Progress: ' + item.progress + '%');
	}

	if (type === 'indexer') {
	progressMessage.push(
	'Processed ' + item.changes_done + ' of ' + item.total_changes + ' changes.'
	);
	} else if (type === 'replication') {
	progressMessage.push(item.docs_written + ' docs written.');

	if (_.has(item, 'changes_pending')) {
	progressMessage.push(item.changes_pending + ' pending changes.');
	}
	}

	if (_.has(item, 'changes_done')) {
	progressMessage.push(item.changes_done + ' Changes done.');
	}

	return progressMessage;
	},

	getSourceSequence: function (item) {
	return item.source_seq;
	}

	};

	return {
	ActiveTasksController: ActiveTasksController,
	ActiveTasksFilterTabs: ActiveTasksFilterTabs,

	ActiveTaskTable: ActiveTaskTable,
	ActiveTasksTableHeader: ActiveTasksTableHeader,
	TableHeader: TableHeader,
	ActiveTasksTableBody: ActiveTasksTableBody,
	ActiveTaskTableBodyContents: ActiveTaskTableBodyContents,
	ActiveTasksViewSourceSequence: ActiveTasksViewSourceSequence,

	ActiveTasksPollingWidgetController: ActiveTasksPollingWidgetController
	};

	});