Merge "Add filters to deployment history timeline"

static/views/cluster_page_tabs/deployment_history_component.js

@@ -138,8 +138,8 @@ var DeploymentHistory = React.createClass({
     this.setState({filters});
   },
   render() {
-    var {viewMode, filters, millisecondsPerPixel} = this.state;
-    var {deploymentHistory, transaction, timelineIntervalWidth} = this.props;
+    var {viewMode, millisecondsPerPixel} = this.state;
+    var {transaction, timelineIntervalWidth} = this.props;
     var [timelineTimeStart, timelineTimeEnd] = this.getTimelineTimeInterval();
 
     // interval should be equal at least 1 second
@@ -164,7 +164,7 @@ var DeploymentHistory = React.createClass({
                 'deploymentHistory', 'cluster', 'nodes', 'nodeNetworkGroups',
                 'width', 'timelineIntervalWidth', 'timelineRowHeight'
               )}
-              {... _.pick(this.state, 'millisecondsPerPixel')}
+              {... _.pick(this.state, 'millisecondsPerPixel', 'filters')}
               nodeTimelineContainerWidth={this.getNodeTimelineContainerWidth()}
               timeStart={timelineTimeStart}
               timeEnd={timelineTimeEnd}
@@ -174,11 +174,7 @@ var DeploymentHistory = React.createClass({
           {viewMode === 'table' &&
             <DeploymentHistoryTable
               {... _.pick(this.props, 'cluster', 'nodes', 'nodeNetworkGroups', 'deploymentHistory')}
-              deploymentTasks={deploymentHistory.filter((task) =>
-                _.every(filters, ({name, values}) =>
-                  !values.length || _.includes(values, task.get(name))
-                )
-              )}
+              {... _.pick(this.state, 'filters')}
             />
           }
         </div>
@@ -245,19 +241,17 @@ var DeploymentHistoryManagementPanel = React.createClass({
                 })}
               </div>
             </div>
-            {viewMode === 'table' &&
-              <Tooltip wrap text={i18n(ns + 'filter_tooltip')}>
-                <button
-                  onClick={this.toggleFilters}
-                  className={utils.classNames({
-                    'btn btn-default pull-left btn-filters': true,
-                    active: areFiltersVisible
-                  })}
-                >
-                  <i className='glyphicon glyphicon-filter' />
-                </button>
-              </Tooltip>
-            }
+            <Tooltip wrap text={i18n(ns + 'filter_tooltip')}>
+              <button
+                onClick={this.toggleFilters}
+                className={utils.classNames({
+                  'btn btn-default pull-left btn-filters': true,
+                  active: areFiltersVisible
+                })}
+              >
+                <i className='glyphicon glyphicon-filter' />
+              </button>
+            </Tooltip>
             {viewMode === 'timeline' &&
               <div className='zoom-controls pull-right'>
                 <div className='btn-group'>
@@ -291,7 +285,7 @@ var DeploymentHistoryManagementPanel = React.createClass({
               showProgressBar='inline'
             />
           </div>
-          {viewMode === 'table' && areFiltersVisible && (
+          {areFiltersVisible && (
             <div className='filters col-xs-12'>
               <div className='well clearfix'>
                 <div className='well-heading'>
@@ -319,7 +313,7 @@ var DeploymentHistoryManagementPanel = React.createClass({
             </div>
           )}
         </div>
-        {viewMode === 'table' && !areFiltersVisible && areFiltersApplied &&
+        {!areFiltersVisible && areFiltersApplied &&
           <div className='active-sorters-filters'>
             <div className='active-filters row' onClick={this.toggleFilters}>
               <strong className='col-xs-1'>{i18n(ns + 'filter_by')}</strong>
@@ -511,15 +505,21 @@ var DeploymentHistoryTimeline = React.createClass({
   },
   render() {
     var {
-      nodes, deploymentHistory, timeStart, timeEnd, isRunning,
+      nodes, deploymentHistory, timeStart, timeEnd, isRunning, filters,
       nodeTimelineContainerWidth, width, timelineIntervalWidth, timelineRowHeight
     } = this.props;
 
+    var appliedFilters = _.filter(filters, ({values}) => values.length);
+    var filteredNodes = (_.find(appliedFilters, {name: 'node_id'}) || {}).values || [];
+
     var nodeIds = [];
     var nodeOffsets = {};
     deploymentHistory.each((task) => {
       var nodeId = task.get('node_id');
-      if (_.has(nodeOffsets, nodeId)) return;
+      if (
+        filteredNodes.length && !_.includes(filteredNodes, nodeId) ||
+        _.has(nodeOffsets, nodeId)
+      ) return;
       nodeOffsets[nodeId] = nodeIds.length;
       nodeIds.push(nodeId);
     });
@@ -572,6 +572,10 @@ var DeploymentHistoryTimeline = React.createClass({
                 {deploymentHistory.map((task) => {
                   if (!_.includes(['ready', 'error', 'running'], task.get('status'))) return null;
 
+                  if (
+                    _.some(appliedFilters, ({name, values}) => !_.includes(values, task.get(name)))
+                  ) return null;
+
                   var taskTimeStart = task.get('time_start') ?
                     parseISO8601Date(task.get('time_start')) : 0;
                   var taskTimeEnd = task.get('time_end') ?
@@ -609,7 +613,11 @@ var DeploymentHistoryTimeline = React.createClass({
 
 var DeploymentHistoryTable = React.createClass({
   render() {
-    var {deploymentTasks, deploymentHistory} = this.props;
+    var {deploymentHistory, filters} = this.props;
+    var deploymentTasks = deploymentHistory.filter((task) =>
+      _.every(filters, ({name, values}) => !values.length || _.includes(values, task.get(name)))
+    );
+
     return (
       <div className='history-table col-xs-12'>
         {deploymentTasks.length ?

static/views/cluster_page_tabs/history_tab.js

@@ -247,9 +247,12 @@ HistoryTab = React.createClass({
                   <div className='col-xs-2 transaction-summary-label'>
                     {i18n(ns + 'transaction_attributes.message')}
                   </div>
-                  <div className='col-xs-10 transaction-summary-value message'>
-                    {activeTransaction.get('message')}
-                  </div>
+                  <div
+                    className='col-xs-10 transaction-summary-value message'
+                    dangerouslySetInnerHTML={{
+                      __html: utils.urlify(activeTransaction.escape('message'))
+                    }}
+                  />
                 </div>
               </div>
               {!_.isNull(deploymentHistory) &&