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; font-size: 0.83em;
} }
.js-text--default-hide { .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 { .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 { .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; display: none;
} }
@ -387,7 +405,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<h3>Summary</h3> <h3>Summary</h3>
<div id="explanation"> <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> <p>
The OOM killer was automatically triggered to free memory, because the system couldn't satisfy the The OOM killer was automatically triggered to free memory, because the system couldn't satisfy the
memory request. memory request.
@ -395,7 +413,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
to satisfy the original memory request. to satisfy the original memory request.
</p> </p>
</div> </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> <p>
The OOM killer was manually triggered (e.g. with &quot;<code>echo f > /proc/sysrq-trigger</code>&quot;) 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 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. highest score.
</p> </p>
</div> </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> <p>
The system has <span class="system_total_ram_kb"></span> physical memory and 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> <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. (<span class="swap_used_kb"></span> out of <span class="swap_total_kb"></span>) swap space are in use.
</p> </p>
</div> </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> <p>
The system has <span class="system_total_ram_kb"></span> physical memory and no swap space. The system has <span class="system_total_ram_kb"></span> physical memory and no swap space.
<span class="system_total_used_percent"></span> <span class="system_total_used_percent"></span>
@ -421,7 +439,7 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
physical memory are in use. physical memory are in use.
</p> </p>
</div> </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> <p>
The process &quot;<span class="trigger_proc_name"></span>&quot; (PID <span class="trigger_proc_pid"></span>) 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 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. <span class="trigger_proc_requested_memory_pages_kb"></span> memory.
</p> </p>
</div> </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> <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 The request failed because after its fulfillment the free memory would be below the memory
low watermark. low watermark.
</span> </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. 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. The request failed because there is no free chunk in the current or higher order.
</span> </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. The request failed, but the reason is unknown.
</span> </span>
The memory shortage triggers the OOM process. The memory shortage triggers the OOM process.
@ -453,22 +471,22 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<p> <p>
The process &quot;<span class="killed_proc_name"></span>&quot; The process &quot;<span class="killed_proc_name"></span>&quot;
(PID <span class="killed_proc_pid"></span>) (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> with an OOM score of <span class="killed_proc_score"></span>
</span> </span>
has been terminated. It uses <span class="killed_proc_rss_percent"></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. (<span class="killed_proc_total_rss_kb"></span>) of the resident memory.
</p> </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> <p>
Dynamic memory allocation is used by both the kernel and all applications. This leads to memory Dynamic memory allocation is used by both the kernel and all applications. This leads to memory
fragmentation and is a common behavior. 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; 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 <span class="kconfig.PAGE_ALLOC_COSTLY_ORDER"></span> are in use. Allocation of larger contiguous
memory areas will fail. memory areas will fail.
</span> </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; 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 class="kconfig.PAGE_ALLOC_COSTLY_ORDER"></span> are freely available.
</span> </span>
@ -879,10 +897,10 @@ window.onerror = function (msg, url, lineNo, columnNo, errorObj) {
<td>Page size</td> <td>Page size</td>
<td class="page_size_kb text--align-right"></td> <td class="page_size_kb text--align-right"></td>
<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 Extracted from DMA zone buddyinfo
</span> </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 Guessed
</span> </span>
</td> </td>

View File

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