7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 13:40:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into karelkryda_master

Browse Source 
# Conflicts:
#	server/database.js
#	server/model/monitor.js
#	server/routers/api-router.js
#	server/server.js
#	src/components/HeartbeatBar.vue
#	src/components/MonitorList.vue
#	src/icon.js
#	src/layouts/Layout.vue
#	src/mixins/datetime.js
#	src/mixins/socket.js
#	src/router.js
#	src/util.js
This commit is contained in:
Louis Lam
2022-09-17 16:12:57 +08:00
parent fa777c5bc0 1c4e97439c
commit 90761cf831
161 changed files with 15369 additions and 8111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/HeartbeatBar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div ref="wrap" class="wrap" :style="wrapStyle">
<div class="hp-bar-big d-flex" :style="barStyle">
<div class="hp-bar-big" :style="barStyle">
<div
v-for="(beat, index) in shortBeatList"
:key="index"
@@ -8,11 +8,7 @@
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2), 'maintenance' : (beat.status === 3) }"
:style="beatStyle"
:title="getBeatTitle(beat)"
@mouseenter="toggleActivateSibling"
@mouseleave="toggleActivateSibling"
>
<div class="beat-inner" />
</div>
/>
</div>
</div>
</template>
@@ -21,14 +17,17 @@
export default {
props: {
/** Size of the heartbeat bar */
size: {
type: String,
default: "big",
},
/** ID of the monitor */
monitorId: {
type: Number,
required: true,
},
/** Array of the monitors heartbeats */
heartbeatList: {
type: Array,
default: null,
@@ -164,38 +163,23 @@ export default {
this.resize();
},
methods: {
/** Resize the heartbeat bar */
resize() {
if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
}
},
/**
* Get the title of the beat.
* Used as the hover tooltip on the heartbeat bar.
* @param {Object} beat Beat to get title from
* @returns {string}
*/
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");
}
}
},
};
</script>
@@ -211,10 +195,9 @@ 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;
@@ -228,27 +211,15 @@ export default {
background-color: $warning;
}
.beat-inner {
border-radius: $border-radius;
display: inline-block;
height: 100%;
width: 5px;
}
&.maintenance {
background-color: $maintenance;
}
&:not(.empty):hover {
transition: all ease 0.15s;
transition: all ease-in-out 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}
&.active-sibling {
transform: scale(1.15);
transition: all ease 0.15s;
}
}
}