simplify overengineered aggregated fetches

This commit is contained in:
Doruk 2025-06-14 02:34:29 +02:00
parent e1cf10d6c8
commit c0f09d9273
3 changed files with 2 additions and 65 deletions

View file

@ -29,7 +29,6 @@
<script>
import dayjs from "dayjs";
import axios from "axios";
export default {
props: {
@ -52,11 +51,6 @@ export default {
heartbeatBarRange: {
type: String,
default: "auto",
},
/** Status page slug for API calls */
statusPageSlug: {
type: String,
default: null,
}
},
data() {
@ -67,7 +61,6 @@ export default {
beatHoverAreaPadding: 4,
move: false,
maxBeat: -1,
aggregatedBeatData: null, // Store fetched data for aggregated mode
};
},
computed: {
@ -78,10 +71,6 @@ export default {
*/
beatList() {
if (this.heartbeatList === null) {
// In aggregated mode (non-auto), use fetched data if available
if (this.heartbeatBarRange && this.heartbeatBarRange !== "auto" && this.aggregatedBeatData) {
return this.aggregatedBeatData;
}
return this.$root.heartbeatList[this.monitorId];
} else {
return this.heartbeatList;
@ -355,19 +344,6 @@ export default {
},
deep: true,
},
heartbeatBarRange: {
handler(newRange, oldRange) {
if (newRange && newRange !== "auto" && this.heartbeatList === null) {
// Fetch data for aggregated mode when range changes
this.fetchAggregatedData();
} else if (newRange === "auto") {
// Clear cached data when switching back to auto
this.aggregatedBeatData = null;
}
},
immediate: true,
},
},
unmounted() {
window.removeEventListener("resize", this.resize);
@ -436,40 +412,6 @@ export default {
return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
},
/**
* Fetch heartbeat data for aggregated mode
* @returns {void}
*/
async fetchAggregatedData() {
// Use provided slug or extract from route
let slug = this.statusPageSlug || "default";
if (!slug || slug === "default") {
// Try to get slug from route params
if (this.$route && this.$route.params && this.$route.params.slug) {
slug = this.$route.params.slug;
} else {
// Try to extract from URL path
const path = window.location.pathname;
const match = path.match(/\/status\/([^\/]+)/);
if (match) {
slug = match[1];
}
}
}
try {
const response = await axios.get(`/api/status-page/heartbeat/${slug}`);
if (response.data.heartbeatList && response.data.heartbeatList[this.monitorId]) {
this.aggregatedBeatData = response.data.heartbeatList[this.monitorId];
}
} catch (error) {
console.warn(`Failed to fetch aggregated heartbeat data for slug "${slug}":`, error);
// Fall back to WebSocket data
this.aggregatedBeatData = null;
}
},
},
};
</script>

View file

@ -73,7 +73,7 @@
</div>
</div>
<div :key="$root.userHeartbeatBar" class="col-6">
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" :heartbeat-bar-range="heartbeatBarRange" :status-page-slug="statusPageSlug" />
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" :heartbeat-bar-range="heartbeatBarRange" />
</div>
</div>
</div>
@ -119,11 +119,6 @@ export default {
heartbeatBarRange: {
type: String,
default: "auto",
},
/** Status page slug */
statusPageSlug: {
type: String,
default: "default",
}
},
data() {

View file

@ -347,7 +347,7 @@
👀 {{ $t("statusPageNothing") }}
</div>
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :heartbeat-bar-range="config.heartbeatBarRange" :status-page-slug="slug" />
<PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" :show-certificate-expiry="config.showCertificateExpiry" :heartbeat-bar-range="config.heartbeatBarRange" />
</div>
<footer class="mt-5 mb-4">