mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-27 16:54:04 +00:00
Feat: Show elapsed time in HeartbeatBar (#3219)
* Feat: Show elapsed time in HeartbeatBar * Chore: Fix lint * Feat: Fix calculation & improve efficiency * Fix: Fix getting tolerance in statusPage * Chore: Improve comments & apply suggestions * Optional elapsed time --------- Co-authored-by: Louis Lam <louislam@users.noreply.github.com>
This commit is contained in:
Nelson Chan
GitHub
parent
ceb5708bfd
commit
ced576feba
5 changed files with 162 additions and 7 deletions
|
|
@ -5,15 +5,24 @@
|
|||
v-for="(beat, index) in shortBeatList"
|
||||
:key="index"
|
||||
class="beat"
|
||||
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2), 'maintenance' : (beat.status === 3) }"
|
||||
:class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
|
||||
:style="beatStyle"
|
||||
:title="getBeatTitle(beat)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
|
||||
class="d-flex justify-content-between align-items-center word" :style="timeStyle"
|
||||
>
|
||||
<div>{{ timeSinceFirstBeat }} ago</div>
|
||||
<div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
|
||||
<div>{{ timeSinceLastBeat }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -56,8 +65,30 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates the amount of beats of padding needed to fill the length of shortBeatList.
|
||||
*
|
||||
* @return {number} The amount of beats of padding needed to fill the length of shortBeatList.
|
||||
*/
|
||||
numPadding() {
|
||||
if (!this.beatList) {
|
||||
return 0;
|
||||
}
|
||||
let num = this.beatList.length - this.maxBeat;
|
||||
|
||||
if (this.move) {
|
||||
num = num - 1;
|
||||
}
|
||||
|
||||
if (num > 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return -1 * num;
|
||||
},
|
||||
|
||||
shortBeatList() {
|
||||
if (! this.beatList) {
|
||||
if (!this.beatList) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
|
@ -115,6 +146,53 @@ export default {
|
|||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the style object for positioning the time element.
|
||||
* @return {Object} The style object containing the CSS properties for positioning the time element.
|
||||
*/
|
||||
timeStyle() {
|
||||
return {
|
||||
"margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px",
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates the time elapsed since the first valid beat.
|
||||
*
|
||||
* @return {string} The time elapsed in minutes or hours.
|
||||
*/
|
||||
timeSinceFirstBeat() {
|
||||
const firstValidBeat = this.shortBeatList.at(this.numPadding);
|
||||
const minutes = dayjs().diff(dayjs.utc(firstValidBeat?.time), "minutes");
|
||||
if (minutes > 60) {
|
||||
return (minutes / 60).toFixed(0) + "h";
|
||||
} else {
|
||||
return minutes + "m";
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates the elapsed time since the last valid beat was registered.
|
||||
*
|
||||
* @return {string} The elapsed time in a minutes, hours or "now".
|
||||
*/
|
||||
timeSinceLastBeat() {
|
||||
const lastValidBeat = this.shortBeatList.at(-1);
|
||||
const seconds = dayjs().diff(dayjs.utc(lastValidBeat?.time), "seconds");
|
||||
|
||||
let tolerance = 60 * 2; // default for when monitorList not available
|
||||
if (this.$root.monitorList[this.monitorId] != null) {
|
||||
tolerance = this.$root.monitorList[this.monitorId].interval * 2;
|
||||
}
|
||||
|
||||
if (seconds < tolerance) {
|
||||
return "now";
|
||||
} else if (seconds < 60 * 60) {
|
||||
return (seconds / 60).toFixed(0) + "m ago";
|
||||
} else {
|
||||
return (seconds / 60 / 60).toFixed(0) + "h ago";
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
beatList: {
|
||||
|
|
@ -133,14 +211,14 @@ export default {
|
|||
},
|
||||
beforeMount() {
|
||||
if (this.heartbeatList === null) {
|
||||
if (! (this.monitorId in this.$root.heartbeatList)) {
|
||||
if (!(this.monitorId in this.$root.heartbeatList)) {
|
||||
this.$root.heartbeatList[this.monitorId] = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.size === "small") {
|
||||
if (this.size !== "big") {
|
||||
this.beatWidth = 5;
|
||||
this.beatHeight = 16;
|
||||
this.beatMargin = 2;
|
||||
|
|
@ -151,11 +229,11 @@ export default {
|
|||
const actualWidth = this.beatWidth * window.devicePixelRatio;
|
||||
const actualMargin = this.beatMargin * window.devicePixelRatio;
|
||||
|
||||
if (! Number.isInteger(actualWidth)) {
|
||||
if (!Number.isInteger(actualWidth)) {
|
||||
this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
|
||||
}
|
||||
|
||||
if (! Number.isInteger(actualMargin)) {
|
||||
if (!Number.isInteger(actualMargin)) {
|
||||
this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
|
||||
}
|
||||
|
||||
|
|
@ -229,4 +307,21 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.word {
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.connecting-line {
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
background-color: #ededed;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-top: 2px;
|
||||
|
||||
.dark & {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
|
||||
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
|
||||
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -112,6 +112,53 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="my-4">
|
||||
<label class="form-label">{{ $t("styleElapsedTime") }}</label>
|
||||
<div>
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
id="styleElapsedTimeShowNoLine"
|
||||
v-model="$root.styleElapsedTime"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="styleElapsedTime"
|
||||
autocomplete="off"
|
||||
value="no-line"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
|
||||
{{ $t("styleElapsedTimeShowNoLine") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="styleElapsedTimeShowWithLine"
|
||||
v-model="$root.styleElapsedTime"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="styleElapsedTime"
|
||||
autocomplete="off"
|
||||
value="with-line"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
|
||||
{{ $t("styleElapsedTimeShowWithLine") }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="styleElapsedTimeNone"
|
||||
v-model="$root.styleElapsedTime"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="styleElapsedTime"
|
||||
autocomplete="off"
|
||||
value="none"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="styleElapsedTimeNone">
|
||||
{{ $t("None") }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -87,6 +87,9 @@
|
|||
"Dark": "Dark",
|
||||
"Auto": "Auto",
|
||||
"Theme - Heartbeat Bar": "Theme - Heartbeat Bar",
|
||||
"styleElapsedTime": "Elapsed time under the heartbeat bar",
|
||||
"styleElapsedTimeShowNoLine": "Show (No Line)",
|
||||
"styleElapsedTimeShowWithLine": "Show (With Line)",
|
||||
"Normal": "Normal",
|
||||
"Bottom": "Bottom",
|
||||
"None": "None",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export default {
|
|||
system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
|
||||
userTheme: localStorage.theme,
|
||||
userHeartbeatBar: localStorage.heartbeatBarTheme,
|
||||
styleElapsedTime: localStorage.styleElapsedTime,
|
||||
statusPageTheme: "light",
|
||||
forceStatusPageTheme: false,
|
||||
path: "",
|
||||
|
|
@ -22,6 +23,11 @@ export default {
|
|||
this.userHeartbeatBar = "normal";
|
||||
}
|
||||
|
||||
// Default Elapsed Time Style
|
||||
if (!this.styleElapsedTime) {
|
||||
this.styleElapsedTime = "no-line";
|
||||
}
|
||||
|
||||
document.body.classList.add(this.theme);
|
||||
this.updateThemeColorMeta();
|
||||
},
|
||||
|
|
@ -68,6 +74,10 @@ export default {
|
|||
localStorage.theme = to;
|
||||
},
|
||||
|
||||
styleElapsedTime(to, from) {
|
||||
localStorage.styleElapsedTime = to;
|
||||
},
|
||||
|
||||
theme(to, from) {
|
||||
document.body.classList.remove(from);
|
||||
document.body.classList.add(this.theme);
|
||||
|
|
|
|||
Loading…
Reference in a new issue