j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 11:16:47 +00:00
Code Issues Projects Releases Wiki Activity

refactor(computes): the host pages share one section nav

Browse source 
Eleven host pages (overview, instances, storages, networks, interfaces,
nwfilters, secrets and their item pages) each carried their own copy of
the links to the host's sections, as a breadcrumb: the sections are
siblings, not a path, and on a phone the separators were left at the
start of wrapped lines. The item pages marked no section at all.

computes/host_nav.html is the one nav, labelled "Host sections": pills
that wrap, the page's section marked active, with aria-current="page"
on the section's own page and "true" on an item of it.
This commit is contained in:
catborise 2026-10-27 14:14:37 +03:00
parent e6a6b7f3cf
commit 86c708ed68
13 changed files with 64 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

28
computes/templates/computes/host_nav.html Normal file
View file

@ -0,0 +1,28 @@
{% load i18n %}
{% load bootstrap_icons %}
{# The host's sections. section: the one this page belongs to; detail: the page is an item of it (a pool, a network), not the section's own page #}
<nav class="mb-3" aria-label="{% trans "Host sections" %}">
<ul class="nav nav-pills flex-wrap gap-1">
<li class="nav-item">
<a class="nav-link{% if section == "overview" %} active{% endif %}" href="{% url 'overview' compute.id %}"{% if section == "overview" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "instances" %} active{% endif %}" href="{% url 'instances' compute.id %}"{% if section == "instances" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "storages" %} active{% endif %}" href="{% url 'storages' compute.id %}"{% if section == "storages" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "networks" %} active{% endif %}" href="{% url 'networks' compute.id %}"{% if section == "networks" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "interfaces" %} active{% endif %}" href="{% url 'interfaces' compute.id %}"{% if section == "interfaces" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "nwfilters" %} active{% endif %}" href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "virtsecrets" %} active{% endif %}" href="{% url 'virtsecrets' compute.id %}"{% if section == "virtsecrets" %} aria-current="{{ detail|yesno:"true,page" }}"{% endif %}>{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ul>
</nav>

26
computes/templates/computes/instances.html
View file

@ -20,31 +20,7 @@
<div id="job-panel" aria-live="polite"></div>
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'server' %} {% trans "Instances" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="instances" %}
</div>
</div>
<div class="row">

26
computes/templates/overview.html
View file

@ -9,31 +9,7 @@
{% block content %}
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item" aria-current="page">
<span class="fw-bold">{% bs_icon 'laptop' %} {% trans "Overview" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="overview" %}
</div>
<div class="shadow-sm">

25
computes/tests/test_host_nav.py Normal file
View file

@ -0,0 +1,25 @@
"""The host pages' shared section links."""
from django.template.loader import render_to_string
from django.test import TestCase
from lxml import html
from computes.models import Compute
class HostNavTestCase(TestCase):
def setUp(self):
self.compute = Compute.objects.create(name="c", hostname="192.0.2.1", login="u", password="p", type=1)
def links(self, **context):
nav = html.fromstring(render_to_string("computes/host_nav.html", {"compute": self.compute, **context}))
return {link.text_content().strip(): (link.get("class"), link.get("aria-current")) for link in nav.iter("a")}
def test_the_section_s_own_page_is_the_current_page(self):
links = self.links(section="storages")
self.assertEqual(len(links), 7)
self.assertEqual(links["Storages"], ("nav-link active", "page"))
self.assertEqual(links["Overview"], ("nav-link", None))
def test_an_item_of_a_section_marks_the_section_without_being_its_page(self):
self.assertEqual(self.links(section="networks", detail=True)["Networks"], ("nav-link active", "true"))

24
interfaces/templates/interface.html
View file

@ -9,29 +9,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
{% include "computes/host_nav.html" with section="interfaces" detail=True %}
</div>
</div>

26
interfaces/templates/interfaces.html
View file

@ -14,31 +14,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="interfaces" %}
</div>
</div>

24
networks/templates/network.html
View file

@ -10,29 +10,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
{% include "computes/host_nav.html" with section="networks" detail=True %}
</div>
</div>

26
networks/templates/networks.html
View file

@ -11,31 +11,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="networks" %}
</div>
</div>

24
nwfilters/templates/nwfilter.html
View file

@ -10,29 +10,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
{% include "computes/host_nav.html" with section="nwfilters" detail=True %}
</div>
</div>

26
nwfilters/templates/nwfilters.html
View file

@ -15,31 +15,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'filter' %} {% trans "NWFilters" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="nwfilters" %}
</div>
</div>

24
storages/templates/storage.html
View file

@ -14,29 +14,7 @@
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
{% include "computes/host_nav.html" with section="storages" detail=True %}
</div>
</div>
<div class="row">

26
storages/templates/storages.html
View file

@ -11,31 +11,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</span>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="storages" %}
</div>
</div>

26
virtsecrets/templates/secrets.html
View file

@ -14,31 +14,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
<a href="{% url 'overview' compute.id %}">{% bs_icon 'laptop' %} {% trans "Overview" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
</li>
<li class="breadcrumb-item">
<a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
</li>
<li class="breadcrumb-item">
<span class="fw-bold">{% bs_icon 'key' %} {% trans "Secrets" %}</span>
</li>
</ol>
</nav>
{% include "computes/host_nav.html" with section="virtsecrets" %}
</div>
</div>