feat: Add download size display to channel table

- Add "Download Size" column to channel map table showing per-channel package sizes
- Implement human-readable size formatting (B, kB, MB, GB, TB) in JavaScript
- Update ChannelData TypeScript interface to include size field
- Add responsive design (hidden on mobile screens)
- Include comprehensive unit tests for size display functionality

Addresses user need for bandwidth awareness on metered connections by showing
accurate download sizes for each channel, since different channels can have
different package sizes.

Fixes #1864

Author: gajeshbhat

static/js/public/snap-details/channelMap.ts

@@ -29,6 +29,7 @@ interface ChannelData {
   "released-at": string;
   risk: string;
   version: string;
+  size: number;
   channel?: string;
 }
 
@@ -517,6 +518,19 @@ class ChannelMap {
     el.innerHTML = tbody.join("");
   }
 
+  /**
+   * Format file size in human readable format
+   * @param {number} bytes - Size in bytes
+   * @returns {string} - Formatted size string
+   */
+  formatSize(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1000;
+    const sizes = ["B", "kB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  }
+
   /**
    * Prepare the channel map tables
    *
@@ -574,6 +588,7 @@ class ChannelMap {
           trackName,
           trackInfo["risk"],
           trackInfo["version"],
+          this.formatSize(trackInfo["size"]),
           trackInfo["released-at"],
           trackInfo["confinement"],
         ]);

templates/store/snap-details/_channel_map.html

@@ -97,7 +97,8 @@
               <tr>
                 <th>Channel</th>
                 <th>Version</th>
-                <th width="25%" class="u-hide--medium u-hide--small">Published</th>
+                <th width="18%" class="u-hide--medium u-hide--small">Download Size</th>
+                <th width="20%" class="u-hide--medium u-hide--small">Published</th>
                 <th width="12%"></th>
               </tr>
             </thead>
@@ -136,10 +137,11 @@
   </div>
 </script>
 <script type="text/template" id="channel-map-row-template" data-js="channel-map-row">
-  <tr class="${rowClass}" data-js="slide-install-instructions" data-channel="${row[0]}/${row[1]}" data-confinement="${row[4]}">
+  <tr class="${rowClass}" data-js="slide-install-instructions" data-channel="${row[0]}/${row[1]}" data-confinement="${row[5]}">
     <td>${row[0]}/${row[1]}</td>
     <td>${row[2]}</td>
     <td class="u-hide--medium u-hide--small">${row[3]}</td>
+    <td class="u-hide--medium u-hide--small">${row[4]}</td>
     <td class="u-align--center"><a href="#" class="p-channel-map__version-table-install">Install &rsaquo;</a></td>
   </tr>
 </script>

tests/store/tests_details.py

@@ -252,6 +252,77 @@ def test_user_not_connected(self):
         assert response.status_code == 200
         self.assert_context("is_users_snap", False)
 
+    @responses.activate
+    def test_package_size_in_channel_map(self):
+        """Test that package size is correctly included in channel map data"""
+        payload = {
+            "snap-id": "id",
+            "name": "test-snap",
+            "default-track": None,
+            "snap": {
+                "title": "Test Snap",
+                "summary": "This is a test snap",
+                "description": "this is a description",
+                "media": [],
+                "license": "MIT",
+                "publisher": {
+                    "display-name": "Test Publisher",
+                    "username": "testpub",
+                    "validation": True,
+                },
+                "categories": [{"name": "test"}],
+                "trending": False,
+                "unlisted": False,
+                "links": {},
+            },
+            "channel-map": [
+                {
+                    "channel": {
+                        "architecture": "amd64",
+                        "name": "stable",
+                        "risk": "stable",
+                        "track": "latest",
+                        "released-at": "2018-09-18T14:45:28.064633+00:00",
+                    },
+                    "created-at": "2018-09-18T14:45:28.064633+00:00",
+                    "version": "1.0",
+                    "confinement": "strict",
+                    "download": {"size": 52428800},  # 50 MB
+                }
+            ],
+        }
+
+        responses.add(
+            responses.Response(
+                method="GET", url=self.api_url, json=payload, status=200
+            )
+        )
+
+        metrics_url = "https://api.snapcraft.io/api/v1/snaps/metrics"
+        responses.add(
+            responses.Response(
+                method="POST", url=metrics_url, json={}, status=200
+            )
+        )
+
+        response = self.client.get(self.endpoint_url)
+
+        assert response.status_code == 200
+        # Check that channel_map contains size information
+        context = self.get_context_variable("channel_map")
+        self.assertIsNotNone(context)
+        # Check that size is included in the channel map data structure
+        self.assertIn("amd64", context)
+        self.assertIn("latest", context["amd64"])
+        channel_data = context["amd64"]["latest"][0]
+        self.assertEqual(channel_data["size"], 52428800)
+        # Check that the Download Size column header is in the HTML
+        expected_header = (
+            b'<th width="18%" class="u-hide--medium u-hide--small">'
+            b"Download Size</th>"
+        )
+        self.assertIn(expected_header, response.data)
+
     @responses.activate
     def test_user_connected_on_not_own_snap(self):
         payload = {