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:
parent
ae1bcda939
commit
436d0b3298
@ -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 "<code>echo f > /proc/sysrq-trigger</code>")
|
The OOM killer was manually triggered (e.g. with "<code>echo f > /proc/sysrq-trigger</code>")
|
||||||
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 "<span class="trigger_proc_name"></span>" (PID <span class="trigger_proc_pid"></span>)
|
The process "<span class="trigger_proc_name"></span>" (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 "<span class="killed_proc_name"></span>"
|
The process "<span class="killed_proc_name"></span>"
|
||||||
(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 ≥
|
The system memory is heavily fragmented, because all chunks with an order ≥
|
||||||
<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 ≥
|
The system memory is not heavily fragmented, because chunks with an order ≥
|
||||||
<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>
|
||||||
|
@ -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):
|
||||||
"""
|
"""
|
||||||
|
Loading…
Reference in New Issue
Block a user