Fixed: Simplify categories in History Table

frontend/src/History/HistoryRow.css

@@ -4,30 +4,22 @@
   width: 120px;
 }
 
+.elapsedTime,
 .indexer {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
+.categories,
+.source,
+.date,
 .releaseGroup {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 110px;
 }
 
-.categories {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 110px;
-}
-
-.source {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 110px;
-}
-
 .details {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/History/HistoryRow.js

@@ -5,6 +5,7 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons } from 'Helpers/Props';
+import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import HistoryRowParameter from './HistoryRowParameter';
@@ -254,7 +255,10 @@ class HistoryRow extends Component {
                 >
                   {
                     data.categories ?
-                      data.categories :
+                      <CapabilitiesLabel
+                        capabilities={indexer.capabilities}
+                        categoryFilter={data.categories.split(',').map(Number)}
+                      /> :
                       null
                   }
                 </TableRowCell>
@@ -291,7 +295,7 @@ class HistoryRow extends Component {
               return (
                 <TableRowCell
                   key={name}
-                  className={styles.indexer}
+                  className={styles.elapsedTime}
                 >
                   {
                     data.elapsedTime ?
@@ -307,6 +311,7 @@ class HistoryRow extends Component {
                 <RelativeDateCellConnector
                   key={name}
                   date={date}
+                  className={styles.date}
                 />
               );
             }

frontend/src/History/HistoryRowParameter.css

@@ -11,6 +11,7 @@
 
 .info {
   padding: 0 4px;
+  white-space: nowrap;
 }
 
 .value {

frontend/src/Indexer/Index/Table/CapabilitiesLabel.js

@@ -3,16 +3,26 @@ import React from 'react';
 import Label from 'Components/Label';
 
 function CapabilitiesLabel(props) {
+  const {
+    categoryFilter
+  } = props;
+
   const {
     categories
   } = props.capabilities;
 
-  const filteredList = categories.filter((item) => item.id < 100000).map((item) => item.name).sort();
+  let filteredList = categories.filter((item) => item.id < 100000);
+
+  if (categoryFilter.length > 0) {
+    filteredList = filteredList.filter((item) => categoryFilter.includes(item.id));
+  }
+
+  const nameList = filteredList.map((item) => item.name).sort();
 
   return (
     <span>
       {
-        filteredList.map((category) => {
+        nameList.map((category) => {
           return (
             <Label key={category}>
               {category}
@@ -33,13 +43,15 @@ function CapabilitiesLabel(props) {
 }
 
 CapabilitiesLabel.propTypes = {
-  capabilities: PropTypes.object.isRequired
+  capabilities: PropTypes.object.isRequired,
+  categoryFilter: PropTypes.arrayOf(PropTypes.number).isRequired
 };
 
 CapabilitiesLabel.defaultProps = {
   capabilities: {
     categories: []
-  }
+  },
+  categoryFilter: []
 };
 
 export default CapabilitiesLabel;