Show and hide elements reworked

Elements should be hidden by default and shown if necessary. This is a
constant behaviour with this change. It also prevents flickering when
the page is loaded and the JS set all defaults.
This commit is contained in:
Carsten Grohmann 2023-03-22 23:00:30 +01:00
parent ae1bcda939
commit 436d0b3298
2 changed files with 44 additions and 37 deletions

View File

@ -24,13 +24,31 @@ THIS PROGRAM COMES WITH NO WARRANTY
font-size: 0.83em;
}
.js-text--default-hide {
/* empty just used to hide elements in the default view */
/* empty - used with JS to hide elements in the default view
*
* OOMDisplay.set_html_defaults() hides all elements by
* adding "js-text--display-none" to classList.
*/
}
.js-text--default-show {
/* empty just used to show elements in the default view */
/* empty - used with JS to show elements in the default view
*
* OOMDisplay.set_html_defaults() shows all elements by
* removing "js-text--display-none" from classList.
*/
}
.js-text--display-none {
/* hide elements
*
* The visibility of elements will be toggled with JS.
* OOMAnalyser.show_elements(), OOMAnalyser.hide_elements() and
* OOMAnalyser.toggle_elements() are used to control the
* visibility.
*
* Set js-text--display-none to prevent flickering between loading
* the page and setting default values with
* OOMDisplay.set_html_defaults().
*/
display: none;
}
@ -387,7 +405,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<h3>Summary</h3>
<div id="explanation">
<div class="js-text--default-show js-oom-automatic--show">
<div class="js-text--default-hide js-text--display-none js-oom-automatic--show">
<p>
The OOM killer was automatically triggered to free memory, because the system couldn't satisfy the
memory request.
@ -395,7 +413,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
to satisfy the original memory request.
</p>
</div>
<div class="js-text--default-show js-oom-manual--show">
<div class="js-text--default-hide js-text--display-none js-oom-manual--show">
<p>
The OOM killer was manually triggered (e.g. with &quot;<code>echo f > /proc/sysrq-trigger</code>&quot;)
by a user with root privileges. There is no demand to free memory but the OOM killer started
@ -403,7 +421,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
highest score.
</p>
</div>
<div class="js-text--default-show js-swap-active--show">
<div class="js-text--default-hide js-text--display-none js-swap-active--show">
<p>
The system has <span class="system_total_ram_kb"></span> physical memory and
<span class="swap_total_kb"></span> swap space. That's <span class="system_total_ramswap_kb"></span>
@ -413,7 +431,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
(<span class="swap_used_kb"></span> out of <span class="swap_total_kb"></span>) swap space are in use.
</p>
</div>
<div class="js-text--default-show js-swap-inactive--show">
<div class="js-text--default-hide js-text--display-none js-swap-inactive--show">
<p>
The system has <span class="system_total_ram_kb"></span> physical memory and no swap space.
<span class="system_total_used_percent"></span>
@ -421,7 +439,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
physical memory are in use.
</p>
</div>
<div class="js-text--default-show js-oom-automatic--show">
<div class="js-text--default-hide js-text--display-none js-oom-automatic--show">
<p>
The process &quot;<span class="trigger_proc_name"></span>&quot; (PID <span class="trigger_proc_pid"></span>)
requested a memory chunk of order <span class="trigger_proc_order"></span> from the
@ -434,17 +452,17 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<span class="trigger_proc_requested_memory_pages_kb"></span> memory.
</p>
</div>
<div class="js-text--default-hide js-alloc-failure--show">
<div class="js-text--default-hide js-text--display-none js-alloc-failure--show">
<p>
<span class="js-text--default-hide js-alloc-failure-below-low-watermark--show">
<span class="js-text--default-hide js-text--display-none js-alloc-failure-below-low-watermark--show">
The request failed because after its fulfillment the free memory would be below the memory
low watermark.
</span>
<span class="js-text--default-hide js-alloc-failure-no-free-chunks--show">
<span class="js-text--default-hide js-text--display-none js-alloc-failure-no-free-chunks--show">
If this requirement were met, the free memory would still be above the low memory watermark.
The request failed because there is no free chunk in the current or higher order.
</span>
<span class="js-text--default-hide js-alloc-failure-unknown-reason-show">
<span class="js-text--default-hide js-text--display-none js-alloc-failure-unknown-reason-show">
The request failed, but the reason is unknown.
</span>
The memory shortage triggers the OOM process.
@ -453,22 +471,22 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<p>
The process &quot;<span class="killed_proc_name"></span>&quot;
(PID <span class="killed_proc_pid"></span>)
<span class="js-text--default-show js-killed-proc-score--show">
<span class="js-text--default-hide js-text--display-none js-killed-proc-score--show">
with an OOM score of <span class="killed_proc_score"></span>
</span>
has been terminated. It uses <span class="killed_proc_rss_percent"></span>
(<span class="killed_proc_total_rss_kb"></span>) of the resident memory.
</p>
<div class="js-text--default-hide js-memory-fragmentation--show">
<div class="js-text--default-hide js-text--display-none js-memory-fragmentation--show">
<p>
Dynamic memory allocation is used by both the kernel and all applications. This leads to memory
fragmentation and is a common behavior.
<span class="js-text--default-hide js-memory-heavy-fragmentation--show">
<span class="js-text--default-hide js-text--display-none js-memory-heavy-fragmentation--show">
The system memory is heavily fragmented, because all chunks with an order &ge;
<span class="kconfig.PAGE_ALLOC_COSTLY_ORDER"></span> are in use. Allocation of larger contiguous
memory areas will fail.
</span>
<span class="js-text--default-hide js-memory-no-heavy-fragmentation--show">
<span class="js-text--default-hide js-text--display-none js-memory-no-heavy-fragmentation--show">
The system memory is not heavily fragmented, because chunks with an order &ge;
<span class="kconfig.PAGE_ALLOC_COSTLY_ORDER"></span> are freely available.
</span>
@ -879,10 +897,10 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<td>Page size</td>
<td class="page_size_kb text--align-right"></td>
<td>
<span class="js-text--default-hide js-pagesize-determined--show">
<span class="js-text--default-hide js-text--display-none js-pagesize-determined--show">
Extracted from DMA zone buddyinfo
</span>
<span class="js-text--default-hide js-pagesize-guessed--show">
<span class="js-text--default-hide js-text--display-none js-pagesize-guessed--show">
Guessed
</span>
</td>

View File

@ -4154,7 +4154,7 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
def __init__(self):
self.oom = None
self.set_HTML_defaults()
self.set_html_defaults()
self.update_toc()
element = document.getElementById("version")
@ -4308,17 +4308,18 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
else:
element.innerHTML = self.svg_array_updown
def set_HTML_defaults(self):
def set_html_defaults(self):
"""Reset the HTML document but don't clean elements"""
# show all hidden elements in the result table
show_elements("table .js-text--display-none")
# hide all elements marked to be hidden by default
hide_elements(".js-text--default-hide")
# show all elements marked to be shown by default
show_elements(".js-text--default-show")
# show hidden rows
show_elements("table .js-text--display-none")
# clear notification box
element = document.getElementById("notify_box")
while element.firstChild:
@ -4362,7 +4363,7 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
def reset_form(self):
document.getElementById("textarea_oom").value = ""
self.set_HTML_defaults()
self.set_html_defaults()
self.update_toc()
def toggle_oom(self, show=False):
@ -4383,7 +4384,7 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
self.oom = OOMEntity(self.load_from_form())
# set defaults and clear notifications
self.set_HTML_defaults()
self.set_html_defaults()
analyser = OOMAnalyser(self.oom)
success = analyser.analyse()
@ -4441,8 +4442,6 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
):
show_elements(".js-alloc-failure--show")
show_elements(".js-alloc-failure-unknown-reason-show")
else:
hide_elements(".js-alloc-failure--show")
def _show_memory_fragmentation(self):
"""Show details about memory fragmentation"""
@ -4451,19 +4450,15 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
show_elements(".js-memory-fragmentation--show")
if self.oom_result.mem_fragmented:
show_elements(".js-memory-heavy-fragmentation--show")
hide_elements(".js-memory-no-heavy-fragmentation--show")
else:
hide_elements(".js-memory-heavy-fragmentation--show")
show_elements(".js-memory-no-heavy-fragmentation--show")
def _show_page_size(self):
"""Show page size"""
if self.oom_result.details.get("_page_size_guessed", True):
hide_elements(".js-pagesize-determined--show")
show_elements(".js-pagesize-guessed--show")
else:
show_elements(".js-pagesize-determined--show")
hide_elements(".js-pagesize-guessed--show")
def _show_ram_usage(self):
"""Generate RAM usage diagram"""
@ -4512,9 +4507,7 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
elem_svg_swap = document.getElementById("svg_swap")
elem_svg_swap.appendChild(svg_swap)
show_elements(".js-swap-active--show")
hide_elements(".js-swap-inactive--show")
else:
hide_elements(".js-swap-active--show")
show_elements(".js-swap-inactive--show")
def _show_items(self):
@ -4522,11 +4515,9 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
hide_element("input")
show_element("analysis")
if self.oom_result.oom_type == OOMEntityType.manual:
hide_elements(".js-oom-automatic--show")
show_elements(".js-oom-manual--show")
else:
show_elements(".js-oom-automatic--show")
hide_elements(".js-oom-manual--show")
for item in self.oom_result.details.keys():
# ignore internal items
@ -4538,8 +4529,6 @@ Out of memory: Killed process 651 (unattended-upgr) total-vm:108020kB, anon-rss:
# since KernelConfig_5_0.EXTRACT_PATTERN_OVERLAY_50['Process killed by OOM']
if "killed_proc_score" in self.oom_result.details:
show_elements(".js-killed-proc-score--show")
else:
hide_elements(".js-killed-proc-score--show")
def sort_pstable(self, column_number):
"""