mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-06-19 18:56:48 +02:00
Fix the warning and error
This commit is contained in:
Marshu
parent
f9bef48658
commit
d6bfd9b952
2 changed files with 170 additions and 116 deletions
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div v-if="group && group.monitorList && group.monitorList.length > 1" class="sort-dropdown">
|
||||
<div class="dropdown">
|
||||
<button :id="'sortDropdown' + groupIndex" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button"
|
||||
<button
|
||||
:id="'sortDropdown' + groupIndex"
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary dropdown-toggle sort-button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
:aria-label="$t('Sort options')"
|
||||
:title="$t('Sort options')">
|
||||
:title="$t('Sort options')"
|
||||
>
|
||||
<div class="sort-arrows">
|
||||
<font-awesome-icon
|
||||
icon="arrow-down"
|
||||
|
|
@ -25,9 +29,13 @@
|
|||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end sort-menu" :aria-labelledby="'sortDropdown' + groupIndex">
|
||||
<li>
|
||||
<button class="dropdown-item sort-item" type="button" @click="setSort('status')"
|
||||
<button
|
||||
class="dropdown-item sort-item"
|
||||
type="button"
|
||||
:aria-label="$t('Sort by status')"
|
||||
:title="$t('Sort by status')">
|
||||
:title="$t('Sort by status')"
|
||||
@click="setSort('status')"
|
||||
>
|
||||
<div class="sort-item-content">
|
||||
<span>{{ $t("Status") }}</span>
|
||||
<span v-if="getSortKey() === 'status'" class="sort-indicators">
|
||||
|
|
@ -40,9 +48,13 @@
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item sort-item" type="button" @click="setSort('name')"
|
||||
<button
|
||||
class="dropdown-item sort-item"
|
||||
type="button"
|
||||
:aria-label="$t('Sort by name')"
|
||||
:title="$t('Sort by name')">
|
||||
:title="$t('Sort by name')"
|
||||
@click="setSort('name')"
|
||||
>
|
||||
<div class="sort-item-content">
|
||||
<span>{{ $t("Name") }}</span>
|
||||
<span v-if="getSortKey() === 'name'" class="sort-indicators">
|
||||
|
|
@ -55,9 +67,13 @@
|
|||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="dropdown-item sort-item" type="button" @click="setSort('uptime')"
|
||||
<button
|
||||
class="dropdown-item sort-item"
|
||||
type="button"
|
||||
:aria-label="$t('Sort by uptime')"
|
||||
:title="$t('Sort by uptime')">
|
||||
:title="$t('Sort by uptime')"
|
||||
@click="setSort('uptime')"
|
||||
>
|
||||
<div class="sort-item-content">
|
||||
<span>{{ $t("Uptime") }}</span>
|
||||
<span v-if="getSortKey() === 'uptime'" class="sort-indicators">
|
||||
|
|
@ -70,9 +86,13 @@
|
|||
</button>
|
||||
</li>
|
||||
<li v-if="showCertificateExpiry">
|
||||
<button class="dropdown-item sort-item" type="button" @click="setSort('cert')"
|
||||
<button
|
||||
class="dropdown-item sort-item"
|
||||
type="button"
|
||||
:aria-label="$t('Sort by certificate expiry')"
|
||||
:title="$t('Sort by certificate expiry')">
|
||||
:title="$t('Sort by certificate expiry')"
|
||||
@click="setSort('cert')"
|
||||
>
|
||||
<div class="sort-item-content">
|
||||
<span>{{ $t("Cert Exp.") }}</span>
|
||||
<span v-if="getSortKey() === 'cert'" class="sort-indicators">
|
||||
|
|
@ -109,6 +129,7 @@ export default {
|
|||
default: false,
|
||||
}
|
||||
},
|
||||
emits: [ "update-group" ],
|
||||
computed: {
|
||||
/**
|
||||
* Parse sort settings from URL query parameters
|
||||
|
|
@ -117,13 +138,16 @@ export default {
|
|||
sortSettingsFromURL() {
|
||||
const sortSettings = {};
|
||||
if (this.$route && this.$route.query) {
|
||||
for (const [key, value] of Object.entries(this.$route.query)) {
|
||||
if (key.startsWith('sort_') && typeof value === 'string') {
|
||||
const groupId = key.replace('sort_', '');
|
||||
const [sortKey, direction] = value.split('_');
|
||||
if (sortKey && ['status', 'name', 'uptime', 'cert'].includes(sortKey) &&
|
||||
direction && ['asc', 'desc'].includes(direction)) {
|
||||
sortSettings[groupId] = { sortKey, direction };
|
||||
for (const [ key, value ] of Object.entries(this.$route.query)) {
|
||||
if (key.startsWith("sort_") && typeof value === "string") {
|
||||
const groupId = key.replace("sort_", "");
|
||||
const [ sortKey, direction ] = value.split("_");
|
||||
if (sortKey && [ "status", "name", "uptime", "cert" ].includes(sortKey) &&
|
||||
direction && [ "asc", "desc" ].includes(direction)) {
|
||||
sortSettings[ groupId ] = {
|
||||
sortKey,
|
||||
direction
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -153,18 +177,20 @@ export default {
|
|||
handler(newSortSettings) {
|
||||
if (this.group) {
|
||||
const groupId = this.getGroupIdentifier();
|
||||
const urlSetting = newSortSettings[groupId];
|
||||
const urlSetting = newSortSettings[ groupId ];
|
||||
|
||||
if (urlSetting) {
|
||||
this.group.sortKey = urlSetting.sortKey;
|
||||
this.group.sortDirection = urlSetting.direction;
|
||||
this.updateGroup({
|
||||
sortKey: urlSetting.sortKey,
|
||||
sortDirection: urlSetting.direction
|
||||
});
|
||||
} else {
|
||||
// Set defaults if not in URL
|
||||
if (this.group.sortKey === undefined) {
|
||||
this.group.sortKey = "status";
|
||||
this.updateGroup({ sortKey: "status" });
|
||||
}
|
||||
if (this.group.sortDirection === undefined) {
|
||||
this.group.sortDirection = "asc";
|
||||
this.updateGroup({ sortDirection: "asc" });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,6 +210,15 @@ export default {
|
|||
return this.group.sortKey || "status";
|
||||
},
|
||||
|
||||
/**
|
||||
* Update group properties by emitting to parent
|
||||
* @param {object} updates - object with properties to update
|
||||
* @returns {void}
|
||||
*/
|
||||
updateGroup(updates) {
|
||||
this.$emit("update-group", this.groupIndex, updates);
|
||||
},
|
||||
|
||||
/**
|
||||
* Set group sort key and direction, then apply sorting
|
||||
* @param {string} key - sort key ('status', 'name', 'uptime', 'cert')
|
||||
|
|
@ -191,10 +226,14 @@ export default {
|
|||
*/
|
||||
setSort(key) {
|
||||
if (this.group.sortKey === key) {
|
||||
this.group.sortDirection = this.group.sortDirection === "asc" ? "desc" : "asc";
|
||||
this.updateGroup({
|
||||
sortDirection: this.group.sortDirection === "asc" ? "desc" : "asc"
|
||||
});
|
||||
} else {
|
||||
this.group.sortKey = key;
|
||||
this.group.sortDirection = "asc";
|
||||
this.updateGroup({
|
||||
sortKey: key,
|
||||
sortDirection: "asc"
|
||||
});
|
||||
}
|
||||
|
||||
this.applySort();
|
||||
|
|
@ -206,15 +245,17 @@ export default {
|
|||
* @returns {void}
|
||||
*/
|
||||
updateRouterQuery() {
|
||||
if (!this.$router) return;
|
||||
if (!this.$router) {
|
||||
return;
|
||||
}
|
||||
|
||||
const query = { ...this.$route.query };
|
||||
const groupId = this.getGroupIdentifier();
|
||||
|
||||
if (this.group.sortKey && this.group.sortDirection) {
|
||||
query[`sort_${groupId}`] = `${this.group.sortKey}_${this.group.sortDirection}`;
|
||||
query[ `sort_${ groupId }` ] = `${ this.group.sortKey }_${ this.group.sortDirection }`;
|
||||
} else {
|
||||
delete query[`sort_${groupId}`];
|
||||
delete query[ `sort_${ groupId }` ];
|
||||
}
|
||||
|
||||
this.$router.push({ query }).catch(() => {});
|
||||
|
|
@ -232,7 +273,8 @@ export default {
|
|||
const sortKey = this.group.sortKey || "status";
|
||||
const sortDirection = this.group.sortDirection || "desc";
|
||||
|
||||
this.group.monitorList.sort((a, b) => {
|
||||
this.updateGroup({
|
||||
monitorList: [ ...this.group.monitorList ].sort((a, b) => {
|
||||
if (!a || !b) {
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -249,7 +291,7 @@ export default {
|
|||
}
|
||||
|
||||
const hbList = this.$root.heartbeatList || {};
|
||||
const hbArr = hbList[monitor.id];
|
||||
const hbArr = hbList[ monitor.id ];
|
||||
if (hbArr && hbArr.length > 0) {
|
||||
const lastStatus = hbArr.at(-1).status;
|
||||
if (lastStatus === 0) {
|
||||
|
|
@ -276,8 +318,8 @@ export default {
|
|||
} else if (sortKey === "uptime") {
|
||||
// Sort by uptime
|
||||
const uptimeList = this.$root.uptimeList || {};
|
||||
const uptimeA = a.id ? parseFloat(uptimeList[`${a.id}_24`]) || 0 : 0;
|
||||
const uptimeB = b.id ? parseFloat(uptimeList[`${b.id}_24`]) || 0 : 0;
|
||||
const uptimeA = a.id ? parseFloat(uptimeList[ `${ a.id }_24` ]) || 0 : 0;
|
||||
const uptimeB = b.id ? parseFloat(uptimeList[ `${ b.id }_24` ]) || 0 : 0;
|
||||
valueA = uptimeA;
|
||||
valueB = uptimeB;
|
||||
} else if (sortKey === "cert") {
|
||||
|
|
@ -298,6 +340,7 @@ export default {
|
|||
} else {
|
||||
return sortDirection === "asc" ? comparison : (comparison * -1);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -313,7 +356,7 @@ export default {
|
|||
return cleanName;
|
||||
}
|
||||
// Fallback to ID or index
|
||||
return this.group.id ? `group${this.group.id}` : `group${this.groupIndex}`;
|
||||
return this.group.id ? `group${ this.group.id }` : `group${ this.groupIndex }`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
:group="group.element"
|
||||
:group-index="group.index"
|
||||
:show-certificate-expiry="showCertificateExpiry"
|
||||
@update-group="updateGroup"
|
||||
/>
|
||||
</h2>
|
||||
|
||||
|
|
@ -206,6 +207,16 @@ export default {
|
|||
return "#DC2626";
|
||||
},
|
||||
|
||||
/**
|
||||
* Update group properties
|
||||
* @param {number} groupIndex Index of group to update
|
||||
* @param {object} updates Object with properties to update
|
||||
* @returns {void}
|
||||
*/
|
||||
updateGroup(groupIndex, updates) {
|
||||
Object.assign(this.$root.publicGroupList[groupIndex], updates);
|
||||
},
|
||||
|
||||
/**
|
||||
* Get unique identifier for a group
|
||||
* @param {object} group object
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue