feat(tables): tables sort with tablesort, the grouped VM list within each host

sortable.js 0.8.0 (abandoned since 2014) sorted only a table's first
body: in the grouped VM list the first host's row moved among its VMs
and the other hosts never sorted, and memory sorted as text ("1024 MB"
before "512 MB"). tablesort 5.7.1 sorts each table body on its own and
keeps a row marked data-sort-method="none" in place, so hosts stay in
name order with their row on top and their VMs sort below it. Memory,
vCPUs and volume sizes sort by their numbers (data-sort). Headers are
reachable by keyboard and carry aria-sort.

base.html loads tablesort for every table marked data-sortable; the
per-page sortable includes and sortable-theme-bootstrap.css go, so these
tables take the theme's table style like the others. The grouped list's
row numbers go (meaningless once sorted). The VM owners and VM logs
tables were marked sortable but never loaded the script; they stay
unsorted.

instances/tests/test_index.py

@@ -2,13 +2,11 @@
 
 from unittest.mock import PropertyMock, patch
 
-from appsettings.models import AppSettings
 from computes.models import Compute
 from django.contrib.auth import get_user_model
 from django.test import TestCase
 from django.urls import reverse
 from instances.models import Instance
-from lxml import html
 
 
 class InstancesIndexTests(TestCase):
@@ -44,10 +42,3 @@ class InstancesIndexTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertNotContains(response, "test4")
         self.assertEqual(list(response.context["computes"][0].instance_set.all()), [])
-
-    def test_the_grouped_list_without_computes_has_a_table_body(self):
-        # sortable.js reads the first tbody's rows: without one it throws and leaves the table unsortable
-        AppSettings.objects.filter(key="VIEW_INSTANCES_LIST_STYLE").update(value="grouped")
-        self.client.force_login(get_user_model().objects.create_superuser("grouped-admin", "g@example.com", "pw"))
-        page = html.fromstring(self.client.get(reverse("instances:index")).content)
-        self.assertEqual(len(page.xpath("//table[@data-sortable]/tbody")), 1)

instances/tests/test_states.py

@@ -127,6 +127,10 @@ class StateTests(TestCase):
         self.assertEqual(options, ["All states", *LABELS.values(), "Unknown"])
         marks = page.xpath("//tbody[@data-host='st']//tr//@data-state")
         self.assertEqual(marks, list(LABELS.values()))
+        # the host row stays on top of its VMs; memory and vCPUs sort as numbers
+        rows = page.xpath("//tbody[@data-host='st']/tr")
+        self.assertEqual(rows[0].get("data-sort-method"), "none")
+        self.assertEqual([r.xpath("td[@data-sort]/@data-sort") for r in rows[1:2]], [["2", "2097152"]])
 
 
 class DetailStateTests(TestCase):