Merge remote-tracking branch 'origin/master' into fix-1448-discord-service-url

This commit is contained in:
Louis Lam 2022-05-14 14:37:12 +08:00
commit 8ede6d888f
6 changed files with 52 additions and 15 deletions

View file

@ -182,7 +182,7 @@ class Monitor extends BeanModel {
// undefined if not https
let tlsInfo = undefined;
if (!previousBeat) {
if (!previousBeat || this.type === "push") {
previousBeat = await R.findOne("heartbeat", " monitor_id = ? ORDER BY time DESC", [
this.id,
]);
@ -377,9 +377,6 @@ class Monitor extends BeanModel {
log.debug("monitor", "heartbeatCount" + heartbeatCount + " " + time);
if (heartbeatCount <= 0) {
// Fix #922, since previous heartbeat could be inserted by api, it should get from database
previousBeat = await Monitor.getPreviousHeartbeat(this.id);
throw new Error("No heartbeat in the time window");
} else {
// No need to insert successful heartbeat for push type, so end here

View file

@ -367,7 +367,7 @@ textarea.form-control {
.item {
display: block;
text-decoration: none;
padding: 13px 15px 10px 15px;
padding: 15px;
border-radius: 10px;
transition: all ease-in-out 0.15s;

View file

@ -1,6 +1,6 @@
<template>
<div ref="wrap" class="wrap" :style="wrapStyle">
<div class="hp-bar-big" :style="barStyle">
<div class="hp-bar-big d-flex" :style="barStyle">
<div
v-for="(beat, index) in shortBeatList"
:key="index"
@ -8,7 +8,11 @@
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
:style="beatStyle"
:title="getBeatTitle(beat)"
/>
@mouseenter="toggleActivateSibling"
@mouseleave="toggleActivateSibling"
>
<div class="beat-inner" />
</div>
</div>
</div>
</template>
@ -168,6 +172,29 @@ export default {
getBeatTitle(beat) {
return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
},
// Toggling the activeSibling class on hover over the current hover item
toggleActivateSibling(e) {
// Variable definition
const element = e.target;
const previous = element.previousSibling;
const next = element.nextSibling;
// Return if the hovered element has empty class
if (element.classList.contains("empty")) {
return;
}
// Check if Previous Sibling is heartbar element and doesn't have the empty class
if (previous.children && !previous.classList.contains("empty")) {
previous.classList.toggle("active-sibling");
}
// Check if Next Sibling is heartbar element and doesn't have the empty class
if (next.children && !next.classList.contains("empty")) {
next.classList.toggle("active-sibling");
}
}
},
};
@ -184,9 +211,10 @@ export default {
.hp-bar-big {
.beat {
display: inline-block;
background-color: $primary;
border-radius: $border-radius;
display: inline-block;
transition: all ease 0.6s;
&.empty {
background-color: aliceblue;
@ -200,11 +228,23 @@ export default {
background-color: $warning;
}
.beat-inner {
border-radius: $border-radius;
display: inline-block;
height: 100%;
width: 5px;
}
&:not(.empty):hover {
transition: all ease-in-out 0.15s;
transition: all ease 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}
&.active-sibling {
transform: scale(1.15);
transition: all ease 0.15s;
}
}
}

View file

@ -33,19 +33,19 @@
<template #item="monitor">
<div class="item">
<div class="row">
<div class="col-9 col-md-8 small-padding">
<div class="info">
<div class="col-9 col-md-8 small-padding d-flex align-items-center flex-wrap">
<div class="info d-flex align-items-center gap-3 w-100">
<font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
<font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
<Uptime :monitor="monitor.element" type="24" :pill="true" />
{{ monitor.element.name }}
</div>
<div v-if="showTags" class="tags">
<div v-if="showTags && monitor.element.tags.length > 0" class="tags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4 d-flex align-items-center">
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
</div>
</div>