Display task type in deployment history

Deployment task type attribute now is shown in deployment history table,
in deployment task popoer and pop-up.
Also, filter by deployment task type added to history controls.

Partial-Bug: #1626433

Change-Id: I4fbe8c47f50835fdcabc3d5502229dec355689c3

static/consts.js

@@ -76,6 +76,7 @@ export const DEPLOYMENT_TASK_ATTRIBUTES = [
   'task_name',
   'node_id',
   'status',
+  'type',
   'time_start',
   'time_end'
 ];

static/styles/main.less

@@ -5382,15 +5382,14 @@ input[type=range] {
       tbody tr td, thead th {
         padding: 5px 15px;
         text-align: left;
-        &:nth-child(2) {max-width: 250px;} // node column
-        &:nth-child(6) {text-align: center;} // task details column
+        &:nth-child(1), &:nth-child(2) {width: 210px; max-width: 210px;} // task name and node
+        &:nth-child(3) {width: 120px; max-width: 120px;} // task status
+        &:nth-child(1), &:nth-child(3) {.break-word;} // task name and status
+        &:nth-child(5), &:nth-child(6) {width: 170px;} // task start and end time
+        &:nth-child(7) {width: 80px; text-align: center;} // task details button
       }
       thead th {
         border-bottom-width: 1px;
-        &:nth-child(2) {width: 250px;} // node column
-        &:nth-child(3) {width: 150px;} // task status column
-        &:nth-child(4), &:nth-child(5) {width: 170px;} // task start and end time columns
-        &:nth-child(6) {width: 80px;} // task details button column
       }
       tbody tr:hover {
         background-color: @base-light-color;

static/tests/functional/test_deployment_history.js

@@ -151,9 +151,10 @@ registerSuite(() => {
         )
         .clickByCssSelector('.deployment-history-toolbar .btn-filters')
         .assertElementsExist(
-          '.filters .filter-by-task_name, .filters .filter-by-node_id, .filters .filter-by-status',
-          3,
-          'Three filters are presented: filter by Task Name, Node, and by Task Status'
+          '.filters .filter-by-task_name, .filters .filter-by-node_id,' +
+          '.filters .filter-by-status, .filters .filter-by-type',
+          4,
+          'Three filters are presented: filter by Task Name, Node, Task Status, and by Task Type'
         )
         .findAllByCssSelector('.history-table table tbody tr')
           .then((elements) => {

static/translations/core.json

@@ -385,12 +385,14 @@
                     "task_name_header": "Task",
                     "node_id_header": "Node",
                     "status_header": "Status",
+                    "type_header": "Type",
                     "time_start_header": "Started",
                     "time_end_header": "Finished",
                     "filter_by": "Filter By",
                     "filter_by_task_name": "Task Name",
                     "filter_by_node": "Node",
                     "filter_by_status": "Task Status",
+                    "filter_by_type": "Task Type",
                     "task_details": "Details",
                     "filter_tooltip": "Filter Tasks",
                     "no_tasks_matched_filters": "No tasks matched the applied filters.",
@@ -1025,10 +1027,11 @@
                     "title": "Deployment Task Details",
                     "task": {
                         "task_name": "Name",
+                        "node_id": "Node",
                         "status": "Status",
+                        "type": "Type",
                         "time_start": "Started",
-                        "time_end": "Finished",
-                        "node_id": "Node"
+                        "time_end": "Finished"
                     }
                 },
                 "nailgun_unavailability": {

static/views/cluster_page_tabs/deployment_history_component.js

@@ -40,7 +40,15 @@ var DeploymentHistory = React.createClass({
     };
   },
   getInitialState() {
-    var {deploymentHistory} = this.props;
+    var taskNames = [];
+    var taskNodes = [];
+    var taskTypes = [];
+    this.props.deploymentHistory.each((task) => {
+      taskNames.push(task.get('task_name'));
+      taskNodes.push(task.get('node_id'));
+      taskTypes.push(task.get('type'));
+    });
+
     return {
       viewMode: 'timeline',
       filters: [
@@ -48,15 +56,13 @@ var DeploymentHistory = React.createClass({
           name: 'task_name',
           label: i18n(ns + 'filter_by_task_name'),
           values: [],
-          options: _.map(_.uniq(deploymentHistory.map('task_name')).sort(),
-            (taskName) => ({name: taskName, title: taskName})
-          ),
+          options: _.map(_.uniq(taskNames).sort(), (name) => ({name, title: name})),
           addOptionsFilter: true
         }, {
           name: 'node_id',
           label: i18n(ns + 'filter_by_node'),
           values: [],
-          options: _.map(_.uniq(deploymentHistory.map('node_id')),
+          options: _.map(_.uniq(taskNodes),
             (nodeId) => ({name: nodeId, title: renderNodeName.call(this, nodeId, false)})
           ),
           addOptionsFilter: true
@@ -73,6 +79,12 @@ var DeploymentHistory = React.createClass({
               )
             })
           )
+        }, {
+          name: 'type',
+          label: i18n(ns + 'filter_by_type'),
+          values: [],
+          options: _.map(_.uniq(taskTypes).sort(), (type) => ({name: type, title: type})),
+          addOptionsFilter: true
         }
       ],
       millisecondsPerPixel: