New: Add backup size information

Closes #957

(cherry picked from commit 78aeda1a2cc217c367c5c3c6fd281c101b28413c)

frontend/src/System/Backup/BackupRow.js

@@ -8,6 +8,7 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
+import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 import RestoreBackupModalConnector from './RestoreBackupModalConnector';
 import styles from './BackupRow.css';
@@ -65,6 +66,7 @@ class BackupRow extends Component {
       type,
       name,
       path,
+      size,
       time
     } = this.props;
 
@@ -104,6 +106,10 @@ class BackupRow extends Component {
           </Link>
         </TableRowCell>
 
+        <TableRowCell>
+          {formatBytes(size)}
+        </TableRowCell>
+
         <RelativeDateCellConnector
           date={time}
         />
@@ -147,6 +153,7 @@ BackupRow.propTypes = {
   type: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
   time: PropTypes.string.isRequired,
   onDeleteBackupPress: PropTypes.func.isRequired
 };

frontend/src/System/Backup/Backups.js

@@ -23,6 +23,11 @@ const columns = [
     label: translate('Name'),
     isVisible: true
   },
+  {
+    name: 'size',
+    label: 'Size',
+    isVisible: true
+  },
   {
     name: 'time',
     label: translate('Time'),
@@ -127,6 +132,7 @@ class Backups extends Component {
                         type,
                         name,
                         path,
+                        size,
                         time
                       } = item;
 
@@ -137,6 +143,7 @@ class Backups extends Component {
                           type={type}
                           name={name}
                           path={path}
+                          size={size}
                           time={time}
                           onDeleteBackupPress={onDeleteBackupPress}
                         />