mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-09-19 23:37:39 -07:00
Merge d403dd453a
into cd5644d6d2
This commit is contained in:
commit
7d88b73e01
1949
package-lock.json
generated
1949
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -191,6 +191,7 @@
|
||||||
"stylelint-config-standard": "~25.0.0",
|
"stylelint-config-standard": "~25.0.0",
|
||||||
"terser": "~5.15.0",
|
"terser": "~5.15.0",
|
||||||
"test": "~3.3.0",
|
"test": "~3.3.0",
|
||||||
|
"tippy.js": "^6.3.7",
|
||||||
"typescript": "~4.4.4",
|
"typescript": "~4.4.4",
|
||||||
"v-pagination-3": "~0.1.7",
|
"v-pagination-3": "~0.1.7",
|
||||||
"vite": "~5.2.8",
|
"vite": "~5.2.8",
|
||||||
|
@ -207,6 +208,7 @@
|
||||||
"vue-qrcode": "~1.0.0",
|
"vue-qrcode": "~1.0.0",
|
||||||
"vue-router": "~4.2.5",
|
"vue-router": "~4.2.5",
|
||||||
"vue-toastification": "~2.0.0-rc.5",
|
"vue-toastification": "~2.0.0-rc.5",
|
||||||
|
"vue3-calendar-heatmap": "^2.0.5",
|
||||||
"vuedraggable": "~4.1.0",
|
"vuedraggable": "~4.1.0",
|
||||||
"wait-on": "^7.2.0",
|
"wait-on": "^7.2.0",
|
||||||
"whatwg-url": "~12.0.1"
|
"whatwg-url": "~12.0.1"
|
||||||
|
|
|
@ -76,20 +76,32 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
|
||||||
]);
|
]);
|
||||||
|
|
||||||
for (let monitorID of monitorIDList) {
|
for (let monitorID of monitorIDList) {
|
||||||
|
// Calculating the percentage of uptime per day with the status count to show full year data
|
||||||
let list = await R.getAll(`
|
let list = await R.getAll(`
|
||||||
SELECT * FROM heartbeat
|
SELECT
|
||||||
|
strftime('%Y-%m-%d', time) AS day,
|
||||||
|
(COUNT(CASE WHEN status = 1 THEN 1 END) * 100.0) / COUNT(status) AS percentage,
|
||||||
|
(
|
||||||
|
SELECT status
|
||||||
|
FROM heartbeat AS sub
|
||||||
|
WHERE strftime('%Y-%m-%d', sub.time) = strftime('%Y-%m-%d', main.time)
|
||||||
|
GROUP BY status
|
||||||
|
ORDER BY COUNT(*) DESC
|
||||||
|
LIMIT 1
|
||||||
|
) as status
|
||||||
|
FROM heartbeat as main
|
||||||
WHERE monitor_id = ?
|
WHERE monitor_id = ?
|
||||||
ORDER BY time DESC
|
GROUP BY day
|
||||||
LIMIT 50
|
ORDER BY day DESC
|
||||||
|
LIMIT 365
|
||||||
`, [
|
`, [
|
||||||
monitorID,
|
monitorID,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
list = R.convertToBeans("heartbeat", list);
|
heartbeatList[monitorID] = list;
|
||||||
heartbeatList[monitorID] = list.reverse().map(row => row.toPublicJSON());
|
|
||||||
|
|
||||||
const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
|
const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
|
||||||
uptimeList[`${monitorID}_24`] = uptimeCalculator.get24Hour().uptime;
|
uptimeList[`${monitorID}_1y`] = uptimeCalculator.get1Year().uptime;
|
||||||
}
|
}
|
||||||
|
|
||||||
response.json({
|
response.json({
|
||||||
|
|
|
@ -162,6 +162,16 @@ optgroup {
|
||||||
background-color: #161B22;
|
background-color: #161B22;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-tippy-root] {
|
||||||
|
color: #333;
|
||||||
|
font-size: small;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 2px 2px 2px #333;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-outline-normal {
|
.btn-outline-normal {
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border: 1px solid #ced4da;
|
border: 1px solid #ced4da;
|
||||||
|
|
|
@ -266,10 +266,8 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../assets/vars.scss";
|
@import "../assets/vars.scss";
|
||||||
|
|
||||||
.wrap {
|
.heat-map {
|
||||||
overflow: hidden;
|
font-size: x-small;
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hp-bar-big {
|
.hp-bar-big {
|
||||||
|
|
104
src/components/HeartbeatBarStatus.vue
Normal file
104
src/components/HeartbeatBarStatus.vue
Normal file
|
@ -0,0 +1,104 @@
|
||||||
|
<template>
|
||||||
|
<div ref="wrap">
|
||||||
|
<div class="hp-bar-big">
|
||||||
|
<CalendarHeatmap
|
||||||
|
:style="{ fill: 'var(--dark-font-color2)', fontSize: 'xx-small' }"
|
||||||
|
class="heatmap" :values="values" :end-date="endDate" no-data-text="Unknown" tooltip-unit="%"
|
||||||
|
:range-color="['aliceblue', 'var(--danger)', 'var(--warning)', 'var(--warning)', 'var(--highlight)', 'var(--primary)']"
|
||||||
|
:display-legend="false"
|
||||||
|
round="3"
|
||||||
|
:max="100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { CalendarHeatmap } from "vue3-calendar-heatmap";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { CalendarHeatmap },
|
||||||
|
props: {
|
||||||
|
/** ID of the monitor */
|
||||||
|
monitorId: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// Getting the values in form of percentage
|
||||||
|
values() {
|
||||||
|
const data = this.$root.heartbeatList[this.monitorId]?.map(({ day, percentage }) => ({ date: day,
|
||||||
|
count: percentage.toFixed(1) }));
|
||||||
|
return data || [];
|
||||||
|
},
|
||||||
|
|
||||||
|
endDate() {
|
||||||
|
const date = dayjs().format("YYYY-MM-DD");
|
||||||
|
return date;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
window.removeEventListener("resize", this.resize);
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
if (this.heartbeatList === null) {
|
||||||
|
if (!(this.monitorId in this.$root.heartbeatList)) {
|
||||||
|
this.$root.heartbeatList[this.monitorId] = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("resize", this.resize);
|
||||||
|
this.resize();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resize() {
|
||||||
|
if (this.$refs.wrap) {
|
||||||
|
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../assets/vars.scss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--highlight-white: #{$highlight-white};
|
||||||
|
--danger: #{$danger};
|
||||||
|
--warning: #{$warning};
|
||||||
|
--warning2: #ffc100;
|
||||||
|
--highlight: #{$highlight};
|
||||||
|
--primary: #{$primary};
|
||||||
|
--dark-font-color2: #{$dark-font-color2};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* stylelint-disable */
|
||||||
|
// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case
|
||||||
|
.vch__legend {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hp-bar-big {
|
||||||
|
padding: 10px;
|
||||||
|
overflow: visible;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heatmap {
|
||||||
|
rect.vch__day__square {
|
||||||
|
stroke: none !important;
|
||||||
|
stroke-width: 0 !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* stylelint-enable */
|
||||||
|
</style>
|
|
@ -33,12 +33,12 @@
|
||||||
<template #item="monitor">
|
<template #item="monitor">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-9 col-md-8 small-padding">
|
<div class="col-3 col-md-4 small-padding">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
|
<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)" />
|
<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" />
|
<Uptime style="vertical-align: top;" :monitor="monitor.element" type="1y" :pill="true" />
|
||||||
<a
|
<a
|
||||||
v-if="showLink(monitor)"
|
v-if="showLink(monitor)"
|
||||||
:href="monitor.element.url"
|
:href="monitor.element.url"
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
>
|
>
|
||||||
{{ monitor.element.name }}
|
{{ monitor.element.name }}
|
||||||
</a>
|
</a>
|
||||||
<p v-else class="item-name"> {{ monitor.element.name }} </p>
|
<p v-else class="item-name" style="white-space: initial;"> {{ monitor.element.name }} </p>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
title="Setting"
|
title="Setting"
|
||||||
|
@ -70,8 +70,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
|
<div :key="$root.userHeartbeatBar" class="col-9 col-md-8">
|
||||||
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
|
<HeartbeatBarStatus :monitor-id="monitor.element.id" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -87,7 +87,7 @@
|
||||||
<script>
|
<script>
|
||||||
import MonitorSettingDialog from "./MonitorSettingDialog.vue";
|
import MonitorSettingDialog from "./MonitorSettingDialog.vue";
|
||||||
import Draggable from "vuedraggable";
|
import Draggable from "vuedraggable";
|
||||||
import HeartbeatBar from "./HeartbeatBar.vue";
|
import HeartbeatBarStatus from "./HeartbeatBarStatus.vue";
|
||||||
import Uptime from "./Uptime.vue";
|
import Uptime from "./Uptime.vue";
|
||||||
import Tag from "./Tag.vue";
|
import Tag from "./Tag.vue";
|
||||||
|
|
||||||
|
@ -95,7 +95,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
MonitorSettingDialog,
|
MonitorSettingDialog,
|
||||||
Draggable,
|
Draggable,
|
||||||
HeartbeatBar,
|
HeartbeatBarStatus,
|
||||||
Uptime,
|
Uptime,
|
||||||
Tag,
|
Tag,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue