Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhance logs page + update test utils

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-02-28 15:10:56 +01:00
parent 375b31e84c
commit 5f2a284587
7 changed files with 73 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/static/css/dashboard.css
View file

File diff suppressed because one or more lines are too long

11
src/ui/static/js/logs.js
View file

@ -188,6 +188,8 @@ class FetchLogs {
this.logListContainer = document.querySelector(
`[data-${this.prefix}-list]`,
);
this.noRunLogEl = document.querySelector("[data-logs-no-run]");
this.logsCard = document.querySelector("[data-logs-card]");
this.submitDate = document.querySelector("button[data-submit-date]");
this.submitLive = document.querySelector("button[data-submit-live]");
@ -372,6 +374,8 @@ class FetchLogs {
this.logListContainer.appendChild(logContainer);
});
this.showLogRunEls();
//force scroll when no live update
const logListEl = document.querySelector(`[data-${this.prefix}-list]`);
logListEl.scrollTop = logListEl.scrollHeight;
@ -404,6 +408,8 @@ class FetchLogs {
this.logListContainer.appendChild(logContainer);
});
this.showLogRunEls();
//if live update, refetch to last update every defined delay
if (this.submitLive.getAttribute("data-submit-live") === "yes") {
setTimeout(() => {
@ -411,6 +417,11 @@ class FetchLogs {
}, this.updateDelay);
}
}
showLogRunEls() {
this.noRunLogEl.classList.add("hidden");
this.logsCard.classList.remove("hidden");
}
}
class Filter {

2
src/ui/templates/head.html vendored
View file

@ -32,7 +32,7 @@
<link rel="stylesheet" type="text/css" href="./css/flatpickr.css" />
<link rel="stylesheet" type="text/css" href="./css/flatpickr.dark.css" />
<script defer src="./js/utils/flatpickr.js" nonce="{{ script_nonce }}"></script>
<script defer src="./js/logs.js" nonce="{{ script_nonce }}"></script>
<script type="module" src="./js/logs.js" nonce="{{ script_nonce }}"></script>
<link rel="stylesheet"
type="text/css"
href="./css/datepicker-foundation.css" />

62
src/ui/templates/logs.html vendored
View file

@ -11,7 +11,7 @@
Select instance
</h5>
<button data-logs-setting-select="instances"
class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
class="max-w-[300px] disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500">
<span id="logs-instance"
data-name="logs-instance"
data-logs-setting-select-text="instances">
@ -42,7 +42,7 @@
<button data-logs-setting-select-dropdown-btn="instances"
value="{{ instance.name }}"
data-_type="{{ instance._type }}"
class="{% if loop.index == 1 %} border-t rounded-t {% endif %} {% if loop.index == loop.length %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 bg-white text-gray-700 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300">
class="{% if loop.first %}dark:bg-primary bg-primary text-gray-300 border-t rounded-t {% else %} bg-white {% endif %} {% if loop.last %}rounded-b{% endif %} border-b border-l border-r border-gray-300 dark:hover:brightness-90 hover:brightness-90 my-0 relative py-2 px-3 text-left align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:text-gray-300">
{{ instance.name }}
</button>
{% endfor %}
@ -50,6 +50,7 @@
<!-- end dropdown-->
</div>
<!-- end select instance -->
<h5 class="col-span-12 mb-1 mt-2 text-[1.1rem] font-bold dark:text-white/90">Date options</h5>
<!-- from date input -->
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
@ -98,24 +99,11 @@
</div>
</div>
<!-- end to date input -->
<!-- refresh delay input -->
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
Update delay (in seconds)
</h5>
<input type="number"
id="update-delay"
name="update-delay"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="2"
data-pattern="(.*?)"
required />
</div>
<!-- end refresh delay input -->
<h5 class="col-span-12 mb-1 mt-2 text-[1.1rem] font-bold dark:text-white/90">Live options</h5>
<!-- refresh inp -->
<div class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3">
<div class="flex flex-col relative col-span-12 sm:col-span-6 3xl:col-span-3">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
Live update
Listen live
</h5>
<div data-checkbox-handler="live-update" class="relative mb-7 md:mb-0">
<input id="live-update"
@ -136,6 +124,22 @@
</div>
</div>
<!-- end refresh inp-->
<!-- refresh delay input -->
<div class="flex flex-col relative col-span-12 sm:col-span-6">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
Update delay (in seconds)
</h5>
<input type="number"
id="update-delay"
name="update-delay"
class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
placeholder="default 2"
data-pattern="(.*?)"
required />
</div>
<!-- end refresh delay input -->
<div class="col-span-12 w-full justify-center flex mt-2">
<button data-submit-date
id="submit-data"
@ -183,7 +187,7 @@
{% for filter in filters %}
{% if filter['type'] == 'input' %}
<!-- search inpt-->
<div class="flex flex-col relative col-span-12 md:col-span-6">
<div class="flex flex-col relative col-span-12">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
{{ filter['name'] }}
</h5>
@ -200,7 +204,7 @@
{% endif %}
{% if filter['type'] == 'select' %}
<!-- select -->
<div class="flex flex-col relative col-span-12 md:col-span-6">
<div class="flex flex-col relative col-span-12">
<h5 class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300">
{{ filter['name'] }}
</h5>
@ -242,7 +246,23 @@
</div>
</div>
<!-- end filter -->
<div class="w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<div data-logs-no-run
class="w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words">
<div class="col-span-12 flex flex-col justify-center items-center h-fit">
<svg xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="mb-2 w-8 h-8 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM10.5 7.5v6m3-3h-6" />
</svg>
<h5 class="font-bold dark:text-white/90 mx-2 text-white">No logs to show</h5>
</div>
</div>
<div data-logs-card class="hidden w-full overflow-hidden grid grid-cols-12 max-h-100 sm:max-h-125 col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
<div class="col-span-12">
<h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">LOGS</h5>
</div>

2
src/ui/templates/plugins.html vendored
View file

@ -186,7 +186,7 @@
{% endif %}
{% if plugin['type'] == "pro" %}
<a {% if not is_pro_version %}target="_blank" rel="noopener"{% endif %}
aria-label="plugin page link"
aria-label="pro plugin"
class="hover:-translate-y-px mx-1 -translate-y-0.5"
href="{% if not is_pro_version %}https://panel.bunkerweb.io/{% else %}javascript:void(0){% endif %}">
<svg class="h-6 w-6 dark:brightness-90"

15
src/ui/templates/settings_plugins.html vendored
View file

@ -22,6 +22,21 @@
</svg>
</a>
{% endif %}
{% if plugin['type'] == "pro" %}
<a {% if not is_pro_version %}target="_blank" rel="noopener"{% endif %}
aria-label="pro plugin"
class="hover:-translate-y-px mx-1 -translate-y-0.5"
href="{% if not is_pro_version %}https://panel.bunkerweb.io/{% else %}javascript:void(0){% endif %}">
<svg class="h-6 w-6 dark:brightness-90"
viewBox="0 0 48 46"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="fill-yellow-500" d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z" fill="#1C274C" />
<path class="fill-yellow-500" d="M21.2803 45.5H26.7198C33.8098 45.5 37.3545 45.5 39.7198 43.383C40.7523 42.4588 41.4057 40.793 41.8775 38.625H6.1224C6.59413 40.793 7.24783 42.4588 8.2802 43.383C10.6454 45.5 14.1903 45.5 21.2803 45.5Z" fill="#1C274C" />
</svg>
</a>
{% endif %}
</div>
<div class="transition duration-300 ease-in-out dark:opacity-90 ml-2 text-sm mb-2 dark:text-gray-400">
{{ plugin['description'] }}

4
tests/ui/utils.py
View file

@ -171,7 +171,9 @@ def verify_select_filters(driver, page_name: str, filter_items: list):
# Get a select filter, change value and click to get no match
# Verify that elements are all hidden
# If not return false, else reset and send true
check_result = driver.execute_script(f"""const select{item['id']} = document.querySelector("[data-{page_name}-setting-select-dropdown-btn='{item["id"]}'][value='{item["value"]}']'); if(!select{item['id']}) return false; select{item['id']}.setAttribute('value', '{item["update_value"]}');select{item['id']}.click(); const select{item['id']}Match = document.querySelectorAll("[data-{page_name}-list-item][class*='hidden']");if (select{item['id']}Match.length === 0) return false;select{item['id']}.setAttribute('value', '{item["value"]}');select{item['id']}.click();return true;""")
check_result = driver.execute_script(
f"""const select{item['id']} = document.querySelector("[data-{page_name}-setting-select-dropdown-btn='{item["id"]}'][value='{item["value"]}']');""" + "if(!select{item['id']}) { return false };" + f"""select{item['id']}.setAttribute('value', '{item["update_value"]}');select{item['id']}.click(); const select{item['id']}Match = document.querySelectorAll("[data-{page_name}-list-item][class*='hidden']");""" + "if (select{item['id']}Match.length === 0) { return false };" + f"""select{item['id']}.setAttribute('value', '{item["value"]}');select{item['id']}.click();return true;"""
)
if not check_result:
log_error(f"The {item['name']} filter is not working, exiting ...")