[DockerHubBridge] Display compressed image size in items (#3279)

* [DockerHubBridge] Display compressed image size in items

* [DockerHubBridge] lint

* [DockerHubBridge] Use format_bytes()

bridges/DockerHubBridge.php

@@ -93,7 +93,7 @@ class DockerHubBridge extends BridgeAbstract
 <Strong>Last pushed</strong><br>
 <p>{$lastPushed}</p>
 <Strong>Images</strong><br>
-{$this->getImages($result)}
+{$this->getImagesTable($result)}
 EOD;
 
             $this->items[] = $item;
@@ -187,25 +187,37 @@ EOD;
         return $url . '/tags/?&name=' . $name;
     }
 
-    private function getImages($result)
+    private function getImagesTable($result)
     {
-        $html = <<<EOD
-<table style="width:300px;"><thead><tr><th>Digest</th><th>OS/architecture</th></tr></thead></tbody>
-EOD;
+        $data = '';
 
         foreach ($result->images as $image) {
             $layersUrl = $this->getLayerUrl($result->name, $image->digest);
             $id = $this->getShortDigestId($image->digest);
-
-            $html .= <<<EOD
-			<tr>
-				<td><a href="{$layersUrl}">{$id}</a></td>
-				<td>{$image->os}/{$image->architecture}</td>
-			</tr>
+            $size = format_bytes($image->size);
+            $data .= <<<EOD
+            <tr>
+                <td><a href="{$layersUrl}">{$id}</a></td>
+                <td>{$image->os}/{$image->architecture}</td>
+                <td>{$size}</td>
+            </tr>
 EOD;
         }
 
-        return $html . '</tbody></table>';
+        return <<<EOD
+<table style="width:400px;">
+    <thead>
+        <tr style="text-align: left;">
+            <th>Digest</th>
+            <th>OS/architecture</th>
+            <th>Compressed Size</th>
+        </tr>
+    </thead>
+    </tbody>
+        {$data}
+    </tbody>
+</table>
+EOD;
     }
 
     private function getShortDigestId($digest)