mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
refactor(templates): Bootstrap's components instead of the panel's own CSS for capacity, steps and disclosures
The fork's own rules in webvirtcloud.css redid what Bootstrap 5.3 has: - the capacity bars (.cap-*) are Bootstrap progress bars: the memory a .progress-stacked of running VMs' memory and shut-off VMs' (at half opacity), each segment a progressbar with its amount as its value text; the pool bars a thin .progress. The line where the host's memory ends goes: the share above the bar says it, red when over; - the status dot (.compute-dot) is a rounded-circle, the big figures (.compute-ratio) fs-4, the Computes table's cell padding py-3; - the steps of creating a VM (.create-steps) are a breadcrumb with "›" as its divider; - the XML and Advanced disclosures (.disclosure with a turning chevron) are Bootstrap accordions; - the chosen volumes and networks (.row-list) are list-unstyled, their names text-break; - a chart's container is position-relative by utility; its height stays. Dead rules go too: .netIN, .netOUT, .diskRD, .diskWR, .input-xs and .bottom-bar-margin had no users.
This commit is contained in:
catborise
parent
2f5e3ccf62
commit
c1e30aeb7f
11 changed files with 75 additions and 180 deletions
|
|
@ -1,11 +1,18 @@
|
|||
{% load i18n %}
|
||||
{# the memory a host has given its VMs: given, from views.shown_capacity #}
|
||||
<div class="compute-ratio {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
|
||||
<div class="fs-4 lh-sm {% if given.bar.over %}text-danger{% elif given.memory_percent > 90 %}text-warning-emphasis{% endif %}">{{ given.memory_percent }} %</div>
|
||||
<div class="small text-body-secondary mb-1">{{ given.assigned.all|filesizeformat }} / {{ given.memory|filesizeformat }}</div>
|
||||
<div class="cap-bar" role="img" aria-label="{% blocktrans with percent=given.memory_percent %}{{ percent }}% of the host's memory given{% endblocktrans %}"
|
||||
title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start. Line: the host's memory." %}">
|
||||
<div class="cap-running {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.running|stringformat:".1f" }}%"></div>
|
||||
<div class="cap-stopped {% if given.bar.over %}bg-danger{% endif %}" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"></div>
|
||||
<div class="cap-host" style="left: {{ given.bar.host|stringformat:".1f" }}%"></div>
|
||||
{# running VMs' memory, then shut-off VMs', on a scale that holds the host's memory or all given, whichever is larger #}
|
||||
<div class="progress-stacked" style="--bs-progress-height: 0.6rem;" title="{% trans "Dark: running VMs. Light: shut-off VMs, which take their memory again when they start." %}">
|
||||
<div class="progress" role="progressbar" style="width: {{ given.bar.running|stringformat:".1f" }}%"
|
||||
aria-label="{% trans "Memory of running VMs" %}" aria-valuenow="{{ given.bar.running|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
|
||||
aria-valuetext="{% blocktrans with running=given.assigned.running|filesizeformat memory=given.memory|filesizeformat %}{{ running }} of the host's {{ memory }}{% endblocktrans %}">
|
||||
<div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %}"></div>
|
||||
</div>
|
||||
<div class="progress" role="progressbar" style="width: {{ given.bar.stopped|stringformat:".1f" }}%"
|
||||
aria-label="{% trans "Memory of shut-off VMs" %}" aria-valuenow="{{ given.bar.stopped|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100"
|
||||
aria-valuetext="{% blocktrans with stopped=given.assigned.stopped|filesizeformat memory=given.memory|filesizeformat %}{{ stopped }} of the host's {{ memory }}{% endblocktrans %}">
|
||||
<div class="progress-bar {% if given.bar.over %}bg-danger{% else %}bg-primary{% endif %} bg-opacity-50"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small text-body-secondary mt-1">{% blocktrans with running=given.assigned.running|filesizeformat %}{{ running }} running{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% load i18n %}
|
||||
{# the vCPUs a host has given its VMs: given, what its list cell and its overview show #}
|
||||
<div class="compute-ratio {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
|
||||
<div class="fs-4 lh-sm {% if given.ratio > 4 %}text-danger{% elif given.ratio > 2 %}text-warning-emphasis{% endif %}">{{ given.ratio|floatformat:1 }}:1</div>
|
||||
<div class="small text-body-secondary">{% blocktrans count counter=given.vcpus.all %}{{ counter }} vCPU{% plural %}{{ counter }} vCPUs{% endblocktrans %} {% blocktrans count counter=given.cpus %}on {{ counter }} CPU{% plural %}on {{ counter }} CPUs{% endblocktrans %}</div>
|
||||
<div class="small text-body-secondary">{% blocktrans with running=given.vcpus.running %}{{ running }} running{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<div class="col-lg-12">
|
||||
{# position-relative: the hidden status texts are positioned within it, not the page #}
|
||||
<div class="table-responsive position-relative">
|
||||
<table class="table align-middle compute-list" data-sortable>
|
||||
<table class="table align-middle" data-sortable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{% trans "Host" %}</th>
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
{% for compute in computes %}
|
||||
{% with given=compute.shown_capacity %}
|
||||
<tr>
|
||||
<td>
|
||||
<td class="py-3">
|
||||
<div class="d-flex align-items-baseline gap-2">
|
||||
{% if compute.status is True %}
|
||||
<span class="compute-dot bg-success" title="{% trans "Connected" %}"></span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" title="{% trans "Connected" %}" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">{% trans "Connected" %}</span>
|
||||
{% else %}
|
||||
<span class="compute-dot bg-danger" title="{% trans "Not Connected" %}"></span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" title="{% trans "Not Connected" %}" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">{% trans "Not Connected" %}</span>
|
||||
{% endif %}
|
||||
<span class="fw-semibold">{{ compute.name }}</span>
|
||||
|
|
@ -54,19 +54,19 @@
|
|||
{% endif %}
|
||||
</td>
|
||||
{% if given %}
|
||||
<td data-sort="{{ given.ratio|stringformat:".2f" }}">
|
||||
<td class="py-3" data-sort="{{ given.ratio|stringformat:".2f" }}">
|
||||
{% include "computes/capacity_vcpus.html" %}
|
||||
</td>
|
||||
<td data-sort="{{ given.memory_percent }}" class="compute-memory">
|
||||
<td class="py-3" data-sort="{{ given.memory_percent }}">
|
||||
{% include "computes/capacity_memory.html" %}
|
||||
</td>
|
||||
<td class="compute-storage">
|
||||
<td class="py-3">
|
||||
{% include "computes/capacity_storage.html" %}
|
||||
</td>
|
||||
{% else %}
|
||||
<td colspan="3" class="small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
|
||||
<td colspan="3" class="py-3 small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
|
||||
{% endif %}
|
||||
<td class="text-end">
|
||||
<td class="py-3 text-end">
|
||||
<div class="btn-group">
|
||||
{# a host the panel cannot reach opens too: its page says why #}
|
||||
<a class="btn {% if compute.status is True %}btn-success{% else %}btn-light{% endif %}" title="{% trans "Overview" %}" href="{% url 'overview' compute.id %}">{% bs_icon 'eye-fill' %}</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{% load i18n %}
|
||||
<div class="small">{{ pool.name }}</div>
|
||||
<div class="cap-bar cap-thin my-1" role="img" aria-label="{% blocktrans with name=pool.name percent=pool.used_percent|floatformat:0 %}{{ name }} {{ percent }}% used{% endblocktrans %}">
|
||||
<div class="cap-running {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
|
||||
<div class="progress my-1" role="progressbar" style="--bs-progress-height: 0.3rem;"
|
||||
aria-label="{% blocktrans with name=pool.name %}{{ name }} used{% endblocktrans %}" aria-valuenow="{{ pool.used_percent|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar {% if pool.used_percent > 90 %}bg-danger{% elif pool.used_percent > 75 %}bg-warning{% endif %}" style="width: {{ pool.used_percent|stringformat:".1f" }}%"></div>
|
||||
</div>
|
||||
<div class="small text-body-secondary">{% blocktrans with free=pool.free|filesizeformat size=pool.size|filesizeformat %}{{ free }} free of {{ size }}{% endblocktrans %}</div>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
<div id="host_status" class="d-flex flex-wrap align-items-baseline column-gap-3 text-body-secondary mb-3">
|
||||
<span>
|
||||
{% if connected %}
|
||||
<span class="compute-dot bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" aria-hidden="true"></span> <span class="text-body">{% trans "Connected" %}</span>
|
||||
{% else %}
|
||||
<span class="compute-dot bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
|
||||
<span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" aria-hidden="true"></span> <span class="text-body">{% trans "Not connected" %}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text-break">{{ compute.hostname }}</span>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'server' %} {% trans "VMs" %}</div>
|
||||
<div class="card-body">
|
||||
<div class="compute-ratio">{{ given.vm_count }}</div>
|
||||
<div class="fs-4 lh-sm">{{ given.vm_count }}</div>
|
||||
<div class="small text-body-secondary">
|
||||
{% blocktrans with running=given.vms.running shutoff=given.vms.shutoff %}{{ running }} running, {{ shutoff }} shut off{% endblocktrans %}{% if given.vms.paused %}, {% blocktrans with paused=given.vms.paused %}{{ paused }} paused{% endblocktrans %}{% endif %}{% if given.vms.other %}, {% blocktrans with other=given.vms.other %}{{ other }} other{% endblocktrans %}{% endif %}
|
||||
</div>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'memory' %} {% trans "Memory" %}</div>
|
||||
<div class="card-body compute-memory">
|
||||
<div class="card-body">
|
||||
{% include "computes/capacity_memory.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="col">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</div>
|
||||
<div class="card-body compute-storage">
|
||||
<div class="card-body">
|
||||
{% include "computes/capacity_storage.html" %}
|
||||
<a class="small" href="{% url 'storages' compute.id %}">{% trans "Storages" %} →</a>
|
||||
</div>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<span>{% bs_icon 'speedometer2' %} {% trans "CPU in use" %}</span> <span id="cpu_now" class="fw-semibold">–</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU in use, recent readings" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
<span>{% bs_icon 'memory' %} {% trans "Memory in use" %}</span> <span id="mem_now" class="fw-semibold">–</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory in use, recent readings" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@ def shown_capacity(compute):
|
|||
be read."""
|
||||
given = compute.capacity
|
||||
if given:
|
||||
# the memory bar: running and shut-off VMs' memory, and a mark at the
|
||||
# host's memory, on a scale that holds whichever is larger
|
||||
# the memory bar: running and shut-off VMs' memory, on a scale that
|
||||
# holds the host's memory or all given, whichever is larger
|
||||
assigned, memory = given["assigned"], given["memory"]
|
||||
assigned["stopped"] = assigned["all"] - assigned["running"]
|
||||
scale = max(assigned["all"], memory) or 1
|
||||
given["bar"] = {"running": assigned["running"] * 100 / scale,
|
||||
"stopped": (assigned["all"] - assigned["running"]) * 100 / scale,
|
||||
"host": memory * 100 / scale, "over": assigned["all"] > memory}
|
||||
given["bar"] = {"running": assigned["running"] * 100 / scale, "stopped": assigned["stopped"] * 100 / scale,
|
||||
"over": assigned["all"] > memory}
|
||||
given["memory_percent"] = round(assigned["all"] * 100 / memory) if memory else 0
|
||||
given["vm_count"] = sum(given["vms"].values())
|
||||
# the default pool (else the first) shows; the others (a host may
|
||||
|
|
|
|||
|
|
@ -44,16 +44,16 @@
|
|||
<button class="btn btn-primary" type="button" id="next" disabled>{% trans "Next" %}</button>
|
||||
</div>
|
||||
|
||||
<section class="card mb-3" aria-labelledby="xml-heading">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title mb-0" id="xml-heading">
|
||||
<button class="btn p-0 border-0 text-body fw-medium w-100 text-start focus-ring disclosure" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
|
||||
<section class="accordion mb-3" aria-labelledby="xml-heading">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="xml-heading">
|
||||
<button class="accordion-button{% if not xml_error %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
|
||||
aria-expanded="{% if xml_error %}true{% else %}false{% endif %}" aria-controls="from-xml">
|
||||
{% bs_icon 'chevron-down' %} {% trans "Or define it from XML" %}
|
||||
{% trans "Or define it from XML" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div class="collapse{% if xml_error %} show{% endif %}" id="from-xml">
|
||||
<form method="post" class="pt-3" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
|
||||
<div class="accordion-collapse collapse{% if xml_error %} show{% endif %}" id="from-xml">
|
||||
<form method="post" class="accordion-body" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
|
||||
{% if xml_error %}<div class="alert alert-danger form-errors" role="alert">{{ xml_error }}</div>{% endif %}
|
||||
<input type="hidden" name="dom_xml" value="{{ xml }}">
|
||||
<div class="xmlheight mb-3"><textarea id="editor" aria-label="{% trans "Domain XML" %}">{{ xml }}</textarea></div>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@
|
|||
/* the chosen card by its border only: the Bootswatch dark themes keep light "subtle" backgrounds */
|
||||
.source-option:has(input:checked) { border-color: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary); }
|
||||
.source-option:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
|
||||
.row-list { list-style: none; padding-left: 0; }
|
||||
.row-list li { overflow-wrap: anywhere; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -171,7 +169,7 @@
|
|||
{% field_error vm_form.images "image-control" %}
|
||||
</div>
|
||||
</div>
|
||||
<ul id="img-list" class="row-list mt-2 mb-0" aria-label="{% trans "Chosen volumes" %}"></ul>
|
||||
<ul id="img-list" class="list-unstyled mt-2 mb-0" aria-label="{% trans "Chosen volumes" %}"></ul>
|
||||
<template id="disk-row">
|
||||
<li class="d-flex flex-wrap align-items-center gap-2 py-1">
|
||||
<span class="row-label font-monospace"></span>
|
||||
|
|
@ -181,7 +179,7 @@
|
|||
<select class="form-select form-select-sm w-auto disk-bus" aria-label="{% trans "Bus" %}">
|
||||
{% for bus in disk_buses %}<option value="{{ bus }}"{% if bus == default_bus %} selected{% endif %}>{% trans bus %}</option>{% endfor %}
|
||||
</select>
|
||||
<span class="row-item"></span>
|
||||
<span class="row-item text-break"></span>
|
||||
<button type="button" class="btn btn-sm btn-link ms-auto row-remove" aria-label="{% trans "Remove" %}">{% bs_icon 'x-lg' %}</button>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -232,11 +230,11 @@
|
|||
{% field_error vm_form.networks "network-control" %}
|
||||
<input id="networks" type="hidden" name="networks" value="">
|
||||
<input id="vm_mac" type="hidden" name="mac" value="">
|
||||
<ul id="net-list" class="row-list mt-2 mb-0" aria-label="{% trans "Network interfaces" %}"></ul>
|
||||
<ul id="net-list" class="list-unstyled mt-2 mb-0" aria-label="{% trans "Network interfaces" %}"></ul>
|
||||
<template id="network-row">
|
||||
<li class="d-flex flex-wrap align-items-center gap-2 py-1">
|
||||
<span class="row-label font-monospace"></span>
|
||||
<span class="row-item"></span>
|
||||
<span class="row-item text-break"></span>
|
||||
<input type="text" class="form-control form-control-sm w-auto font-monospace" maxlength="17" size="17" required
|
||||
autocomplete="off" autocapitalize="none" spellcheck="false"
|
||||
pattern="[a-fA-F0-9:]+" aria-label="{% trans "MAC address" %}">
|
||||
|
|
@ -247,16 +245,17 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card mb-3" aria-labelledby="advanced-heading">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title mb-0" id="advanced-heading">
|
||||
<button class="btn p-0 border-0 text-body fw-medium w-100 text-start focus-ring disclosure" type="button" data-bs-toggle="collapse" data-bs-target="#advanced"
|
||||
<section class="accordion mb-3" aria-labelledby="advanced-heading">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="advanced-heading">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#advanced"
|
||||
aria-expanded="false" aria-controls="advanced">
|
||||
{% bs_icon 'chevron-down' %} {% trans "Advanced" %}
|
||||
{% trans "Advanced" %}
|
||||
</button>
|
||||
</h2>
|
||||
<div class="collapse" id="advanced">
|
||||
<div class="row g-3 pt-3">
|
||||
<div class="accordion-collapse collapse" id="advanced">
|
||||
<div class="accordion-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="vm_cache_mode" class="form-label">{% trans "Disk cache mode" %}</label>
|
||||
<select id="vm_cache_mode" class="form-select{{ vm_form.cache_mode|invalid }}" name="cache_mode"{% error_attrs vm_form.cache_mode "vm_cache_mode" %}>
|
||||
|
|
@ -342,6 +341,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
{% load i18n %}
|
||||
{# The steps of creating a VM; step is the current one (1-3), a done step links back to it. #}
|
||||
<nav aria-label="{% trans "Create a VM" %}">
|
||||
<ol class="create-steps list-unstyled d-flex flex-wrap gap-2 small mb-3">
|
||||
<nav aria-label="{% trans "Create a VM" %}" style="--bs-breadcrumb-divider: '›';">
|
||||
<ol class="breadcrumb small mb-3">
|
||||
{% if step == 1 %}
|
||||
<li class="fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
|
||||
<li class="breadcrumb-item fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
|
||||
{% else %}
|
||||
<li><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
|
||||
<li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
|
||||
{% endif %}
|
||||
{% if step == 2 %}
|
||||
<li class="fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
|
||||
<li class="breadcrumb-item fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
|
||||
{% elif step == 3 %}
|
||||
<li><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
|
||||
<li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
|
||||
{% else %}
|
||||
<li class="text-body-secondary">2. {% trans "Machine" %}</li>
|
||||
<li class="breadcrumb-item text-body-secondary">2. {% trans "Machine" %}</li>
|
||||
{% endif %}
|
||||
{% if step == 3 %}
|
||||
<li class="breadcrumb-item fw-semibold" aria-current="step">3. {% trans "Details" %}</li>
|
||||
{% else %}
|
||||
<li class="breadcrumb-item text-body-secondary">3. {% trans "Details" %}</li>
|
||||
{% endif %}
|
||||
<li{% if step == 3 %} class="fw-semibold" aria-current="step"{% else %} class="text-body-secondary"{% endif %}>3. {% trans "Details" %}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Usage" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Usage" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1 card border-danger">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "Memory Usage" %}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="memChart" role="img" aria-label="{% trans "Memory Usage" %}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
{% for net in instance.networks %}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="netEth{{ forloop.counter0 }}Chart" role="img" aria-label="{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="netEth{{ forloop.counter0 }}Chart" role="img" aria-label="{% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart"><canvas id="blk{{ disk.dev }}Chart" role="img" aria-label="{% trans "Disk I/O device" %}: {{ disk.dev }}"></canvas></div>
|
||||
<div class="chart position-relative"><canvas id="blk{{ disk.dev }}Chart" role="img" aria-label="{% trans "Disk I/O device" %}: {{ disk.dev }}"></canvas></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -33,18 +33,6 @@ body {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
/* a disclosure's chevron points up while its section is open */
|
||||
.disclosure[aria-expanded="true"] .bi-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* the steps of creating a VM: the separator is drawn, not a list item */
|
||||
.create-steps li + li::before {
|
||||
content: "›";
|
||||
margin-right: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.xmlheight {
|
||||
height: 364px;
|
||||
}
|
||||
|
|
@ -137,43 +125,11 @@ p {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* a live chart (static/js/charts.js) fills the width of its card */
|
||||
/* a live chart (static/js/charts.js) fills the width of its card at this height */
|
||||
.chart {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.netIN {
|
||||
border-color: rgb(83, 191, 189);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.netOUT {
|
||||
border-color: rgb(151, 187, 205);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.diskRD {
|
||||
border-color: rgb(190, 195, 205);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.diskWR {
|
||||
border-color: rgb(249, 134, 33);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
.keyselect {
|
||||
display: inline;
|
||||
min-width: 250px;
|
||||
|
|
@ -197,10 +153,6 @@ p {
|
|||
background-color:#000099;
|
||||
}
|
||||
|
||||
.bottom-bar-margin {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
/* make dropdowns show on hover */
|
||||
@media only screen and (min-width: 768px) {
|
||||
.dropdown:hover .dropdown-menu {
|
||||
|
|
@ -215,72 +167,3 @@ p {
|
|||
a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.input-xs {
|
||||
height: 22px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* the Computes list: what each host has given its VMs */
|
||||
.compute-list td {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.compute-dot {
|
||||
display: inline-block;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.compute-ratio {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.compute-memory {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.compute-storage {
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
/* a bar of given capacity: running VMs solid, shut-off VMs faint, and a
|
||||
mark where the host's own capacity ends */
|
||||
.cap-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
.cap-bar.cap-thin {
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
.cap-running {
|
||||
background: var(--bs-primary);
|
||||
border-radius: 0.3rem 0 0 0.3rem;
|
||||
}
|
||||
|
||||
.cap-stopped {
|
||||
background: var(--bs-primary);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.cap-host {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
bottom: -0.2rem;
|
||||
width: 2px;
|
||||
margin-left: -1px;
|
||||
background: var(--bs-body-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue