mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-08-21 14:54:43 +08:00
fix: resolve conflict
This commit is contained in:
minhhn3
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div v-if="! $root.isMobile" class="col-12 col-md-5 col-xl-4">
|
||||
<div v-if="!$root.isMobile" class="col-12 col-md-5 col-xl-4">
|
||||
<div>
|
||||
<router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,10 @@
|
||||
<h3>{{ $t("Down") }}</h3>
|
||||
<span class="num text-danger">{{ $root.stats.down }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("Maintenance") }}</h3>
|
||||
<span class="num text-maintenance">{{ $root.stats.maintenance }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>{{ $t("Unknown") }}</h3>
|
||||
<span class="num text-secondary">{{ $root.stats.unknown }}</span>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
|
||||
</div>
|
||||
<p class="url">
|
||||
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
|
||||
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ monitor.url }}</a>
|
||||
<span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
|
||||
<span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
|
||||
<span v-if="monitor.type === 'keyword'">
|
||||
@@ -20,18 +20,20 @@
|
||||
</p>
|
||||
|
||||
<div class="functions">
|
||||
<button v-if="monitor.active" class="btn btn-light" @click="pauseDialog">
|
||||
<font-awesome-icon icon="pause" /> {{ $t("Pause") }}
|
||||
</button>
|
||||
<button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
|
||||
<font-awesome-icon icon="play" /> {{ $t("Resume") }}
|
||||
</button>
|
||||
<router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">
|
||||
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="deleteDialog">
|
||||
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button v-if="monitor.active" class="btn btn-normal" @click="pauseDialog">
|
||||
<font-awesome-icon icon="pause" /> {{ $t("Pause") }}
|
||||
</button>
|
||||
<button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
|
||||
<font-awesome-icon icon="play" /> {{ $t("Resume") }}
|
||||
</button>
|
||||
<router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
|
||||
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="deleteDialog">
|
||||
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box">
|
||||
@@ -392,11 +394,6 @@ export default {
|
||||
@media (max-width: 550px) {
|
||||
.functions {
|
||||
text-align: center;
|
||||
|
||||
button, a {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ping-chart-wrapper {
|
||||
@@ -439,12 +436,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.functions {
|
||||
button, a {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-box {
|
||||
padding: 20px;
|
||||
margin-top: 25px;
|
||||
|
||||
534
src/pages/EditMaintenance.vue
Normal file
534
src/pages/EditMaintenance.vue
Normal file
@@ -0,0 +1,534 @@
|
||||
<template>
|
||||
<transition name="slide-fade" appear>
|
||||
<div>
|
||||
<h1 class="mb-3">{{ pageName }}</h1>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
<div class="col-xl-10">
|
||||
<!-- Title -->
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">{{ $t("Title") }}</label>
|
||||
<input
|
||||
id="name" v-model="maintenance.title" type="text" class="form-control"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="my-3">
|
||||
<label for="description" class="form-label">{{ $t("Description") }}</label>
|
||||
<textarea
|
||||
id="description" v-model="maintenance.description" class="form-control"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Affected Monitors -->
|
||||
<h2 class="mt-5">{{ $t("Affected Monitors") }}</h2>
|
||||
{{ $t("affectedMonitorsDescription") }}
|
||||
|
||||
<div class="my-3">
|
||||
<VueMultiselect
|
||||
id="affected_monitors"
|
||||
v-model="affectedMonitors"
|
||||
:options="affectedMonitorsOptions"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:clear-on-select="false"
|
||||
:preserve-search="true"
|
||||
:placeholder="$t('Pick Affected Monitors...')"
|
||||
:preselect-first="false"
|
||||
:max-height="600"
|
||||
:taggable="false"
|
||||
></VueMultiselect>
|
||||
</div>
|
||||
|
||||
<!-- Status pages to display maintenance info on -->
|
||||
<h2 class="mt-5">{{ $t("Status Pages") }}</h2>
|
||||
{{ $t("affectedStatusPages") }}
|
||||
|
||||
<div class="my-3">
|
||||
<!-- Show on all pages -->
|
||||
<div class="form-check mb-2">
|
||||
<input
|
||||
id="show-on-all-pages" v-model="showOnAllPages" class="form-check-input"
|
||||
type="checkbox"
|
||||
>
|
||||
<label class="form-check-label" for="show-powered-by">{{
|
||||
$t("All Status Pages")
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<div v-if="!showOnAllPages">
|
||||
<VueMultiselect
|
||||
id="selected_status_pages"
|
||||
v-model="selectedStatusPages"
|
||||
:options="selectedStatusPagesOptions"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:clear-on-select="false"
|
||||
:preserve-search="true"
|
||||
:placeholder="$t('Select status pages...')"
|
||||
:preselect-first="false"
|
||||
:max-height="600"
|
||||
:taggable="false"
|
||||
></VueMultiselect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-5">{{ $t("Date and Time") }}</h2>
|
||||
|
||||
<div>⚠️ {{ $t("warningTimezone") }}: <mark>{{ $root.info.serverTimezone }} ({{ $root.info.serverTimezoneOffset }})</mark></div>
|
||||
|
||||
<!-- Strategy -->
|
||||
<div class="my-3">
|
||||
<label for="strategy" class="form-label">{{ $t("Strategy") }}</label>
|
||||
<select id="strategy" v-model="maintenance.strategy" class="form-select">
|
||||
<option value="manual">{{ $t("strategyManual") }}</option>
|
||||
<option value="single">{{ $t("Single Maintenance Window") }}</option>
|
||||
<option value="recurring-interval">{{ $t("Recurring") }} - {{ $t("recurringInterval") }}</option>
|
||||
<option value="recurring-weekday">{{ $t("Recurring") }} - {{ $t("dayOfWeek") }}</option>
|
||||
<option value="recurring-day-of-month">{{ $t("Recurring") }} - {{ $t("dayOfMonth") }}</option>
|
||||
<option v-if="false" value="recurring-day-of-year">{{ $t("Recurring") }} - Day of Year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Single Maintenance Window -->
|
||||
<template v-if="maintenance.strategy === 'single'">
|
||||
<!-- DateTime Range -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">{{ $t("DateTime Range") }}</label>
|
||||
<Datepicker
|
||||
v-model="maintenance.dateRange"
|
||||
:dark="$root.isDark"
|
||||
range
|
||||
:monthChangeOnScroll="false"
|
||||
:minDate="minDate"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
modelType="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Recurring - Interval -->
|
||||
<template v-if="maintenance.strategy === 'recurring-interval'">
|
||||
<div class="my-3">
|
||||
<label for="interval-day" class="form-label">
|
||||
{{ $t("recurringInterval") }}
|
||||
|
||||
<template v-if="maintenance.intervalDay >= 1">
|
||||
({{
|
||||
$tc("recurringIntervalMessage", maintenance.intervalDay, [
|
||||
maintenance.intervalDay
|
||||
])
|
||||
}})
|
||||
</template>
|
||||
</label>
|
||||
<input id="interval-day" v-model="maintenance.intervalDay" type="number" class="form-control" required min="1" max="3650" step="1">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Recurring - Weekday -->
|
||||
<template v-if="maintenance.strategy === 'recurring-weekday'">
|
||||
<div class="my-3">
|
||||
<label for="interval-day" class="form-label">
|
||||
{{ $t("dayOfWeek") }}
|
||||
</label>
|
||||
|
||||
<!-- Weekday Picker -->
|
||||
<div class="weekday-picker">
|
||||
<div v-for="(weekday, index) in weekdays" :key="index">
|
||||
<label class="form-check-label" :for="weekday.id">{{ $t(weekday.langKey) }}</label>
|
||||
<div class="form-check-inline"><input :id="weekday.id" v-model="maintenance.weekdays" type="checkbox" :value="weekday.value" class="form-check-input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Recurring - Day of month -->
|
||||
<template v-if="maintenance.strategy === 'recurring-day-of-month'">
|
||||
<div class="my-3">
|
||||
<label for="interval-day" class="form-label">
|
||||
{{ $t("dayOfMonth") }}
|
||||
</label>
|
||||
|
||||
<!-- Day Picker -->
|
||||
<div class="day-picker">
|
||||
<div v-for="index in 31" :key="index">
|
||||
<label class="form-check-label" :for="'day' + index">{{ index }}</label>
|
||||
<div class="form-check-inline">
|
||||
<input :id="'day' + index" v-model="maintenance.daysOfMonth" type="checkbox" :value="index" class="form-check-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 mb-2">{{ $t("lastDay") }}</div>
|
||||
|
||||
<div v-for="(lastDay, index) in lastDays" :key="index" class="form-check">
|
||||
<input :id="lastDay.langKey" v-model="maintenance.daysOfMonth" type="checkbox" :value="lastDay.value" class="form-check-input">
|
||||
<label class="form-check-label" :for="lastDay.langKey">
|
||||
{{ $t(lastDay.langKey) }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- For any recurring types -->
|
||||
<template v-if="maintenance.strategy === 'recurring-interval' || maintenance.strategy === 'recurring-weekday' || maintenance.strategy === 'recurring-day-of-month'">
|
||||
<!-- Maintenance Time Window of a Day -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">{{ $t("Maintenance Time Window of a Day") }}</label>
|
||||
<Datepicker
|
||||
v-model="maintenance.timeRange"
|
||||
:dark="$root.isDark"
|
||||
timePicker
|
||||
disableTimeRangeValidation range
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Date Range -->
|
||||
<div class="my-3">
|
||||
<label class="form-label">{{ $t("Effective Date Range") }}</label>
|
||||
<Datepicker
|
||||
v-model="maintenance.dateRange"
|
||||
:dark="$root.isDark"
|
||||
range datePicker
|
||||
:monthChangeOnScroll="false"
|
||||
:minDate="minDate"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
modelType="yyyy-MM-dd HH:mm:ss"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="mt-4 mb-1">
|
||||
<button
|
||||
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ $t("Save") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { useToast } from "vue-toastification";
|
||||
import VueMultiselect from "vue-multiselect";
|
||||
import dayjs from "dayjs";
|
||||
import Datepicker from "@vuepic/vue-datepicker";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueMultiselect,
|
||||
Datepicker
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
processing: false,
|
||||
maintenance: {},
|
||||
affectedMonitors: [],
|
||||
affectedMonitorsOptions: [],
|
||||
showOnAllPages: false,
|
||||
selectedStatusPages: [],
|
||||
dark: (this.$root.theme === "dark"),
|
||||
neverEnd: false,
|
||||
minDate: this.$root.date(dayjs()) + " 00:00",
|
||||
lastDays: [
|
||||
{
|
||||
langKey: "lastDay1",
|
||||
value: "lastDay1",
|
||||
},
|
||||
{
|
||||
langKey: "lastDay2",
|
||||
value: "lastDay2",
|
||||
},
|
||||
{
|
||||
langKey: "lastDay3",
|
||||
value: "lastDay3",
|
||||
},
|
||||
{
|
||||
langKey: "lastDay4",
|
||||
value: "lastDay4",
|
||||
}
|
||||
],
|
||||
weekdays: [
|
||||
{
|
||||
id: "weekday1",
|
||||
langKey: "weekdayShortMon",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
id: "weekday2",
|
||||
langKey: "weekdayShortTue",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id: "weekday3",
|
||||
langKey: "weekdayShortWed",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
id: "weekday4",
|
||||
langKey: "weekdayShortThu",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
id: "weekday5",
|
||||
langKey: "weekdayShortFri",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
id: "weekday6",
|
||||
langKey: "weekdayShortSat",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
id: "weekday0",
|
||||
langKey: "weekdayShortSun",
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
selectedStatusPagesOptions() {
|
||||
return Object.values(this.$root.statusPageList).map(statusPage => {
|
||||
return {
|
||||
id: statusPage.id,
|
||||
name: statusPage.title
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
pageName() {
|
||||
return this.$t((this.isAdd) ? "Schedule Maintenance" : "Edit Maintenance");
|
||||
},
|
||||
|
||||
isAdd() {
|
||||
return this.$route.path === "/add-maintenance";
|
||||
},
|
||||
|
||||
isEdit() {
|
||||
return this.$route.path.startsWith("/maintenance/edit");
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
"$route.fullPath"() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
neverEnd(value) {
|
||||
if (value) {
|
||||
this.maintenance.recurringEndDate = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
|
||||
this.$root.getMonitorList((res) => {
|
||||
if (res.ok) {
|
||||
Object.values(this.$root.monitorList).map(monitor => {
|
||||
this.affectedMonitorsOptions.push({
|
||||
id: monitor.id,
|
||||
name: monitor.name,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.affectedMonitors = [];
|
||||
this.selectedStatusPages = [];
|
||||
|
||||
if (this.isAdd) {
|
||||
this.maintenance = {
|
||||
title: "",
|
||||
description: "",
|
||||
strategy: "single",
|
||||
active: 1,
|
||||
intervalDay: 1,
|
||||
dateRange: [ this.minDate ],
|
||||
timeRange: [{
|
||||
hours: 2,
|
||||
minutes: 0,
|
||||
}, {
|
||||
hours: 3,
|
||||
minutes: 0,
|
||||
}],
|
||||
weekdays: [],
|
||||
daysOfMonth: [],
|
||||
};
|
||||
} else if (this.isEdit) {
|
||||
this.$root.getSocket().emit("getMaintenance", this.$route.params.id, (res) => {
|
||||
if (res.ok) {
|
||||
this.maintenance = res.maintenance;
|
||||
|
||||
this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
|
||||
if (res.ok) {
|
||||
Object.values(res.monitors).map(monitor => {
|
||||
this.affectedMonitors.push(monitor);
|
||||
});
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
this.$root.getSocket().emit("getMaintenanceStatusPage", this.$route.params.id, (res) => {
|
||||
if (res.ok) {
|
||||
Object.values(res.statusPages).map(statusPage => {
|
||||
this.selectedStatusPages.push({
|
||||
id: statusPage.id,
|
||||
name: statusPage.title
|
||||
});
|
||||
});
|
||||
|
||||
this.showOnAllPages = Object.values(res.statusPages).length === this.selectedStatusPagesOptions.length;
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async submit() {
|
||||
this.processing = true;
|
||||
|
||||
if (this.affectedMonitors.length === 0) {
|
||||
toast.error(this.$t("atLeastOneMonitor"));
|
||||
return this.processing = false;
|
||||
}
|
||||
|
||||
if (this.isAdd) {
|
||||
this.$root.addMaintenance(this.maintenance, async (res) => {
|
||||
if (res.ok) {
|
||||
await this.addMonitorMaintenance(res.maintenanceID, async () => {
|
||||
await this.addMaintenanceStatusPage(res.maintenanceID, () => {
|
||||
toast.success(res.msg);
|
||||
this.processing = false;
|
||||
this.$root.getMaintenanceList();
|
||||
this.$router.push("/maintenance");
|
||||
});
|
||||
});
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
this.processing = false;
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
this.$root.getSocket().emit("editMaintenance", this.maintenance, async (res) => {
|
||||
if (res.ok) {
|
||||
await this.addMonitorMaintenance(res.maintenanceID, async () => {
|
||||
await this.addMaintenanceStatusPage(res.maintenanceID, () => {
|
||||
this.processing = false;
|
||||
this.$root.toastRes(res);
|
||||
this.init();
|
||||
this.$router.push("/maintenance");
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.processing = false;
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async addMonitorMaintenance(maintenanceID, callback) {
|
||||
await this.$root.addMonitorMaintenance(maintenanceID, this.affectedMonitors, async (res) => {
|
||||
if (!res.ok) {
|
||||
toast.error(res.msg);
|
||||
} else {
|
||||
this.$root.getMonitorList();
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
},
|
||||
|
||||
async addMaintenanceStatusPage(maintenanceID, callback) {
|
||||
await this.$root.addMaintenanceStatusPage(maintenanceID, (this.showOnAllPages) ? this.selectedStatusPagesOptions : this.selectedStatusPages, async (res) => {
|
||||
if (!res.ok) {
|
||||
toast.error(res.msg);
|
||||
} else {
|
||||
this.$root.getMaintenanceList();
|
||||
}
|
||||
|
||||
callback();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shadow-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.dark-calendar::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.weekday-picker {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.day-picker {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -106,8 +106,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Port -->
|
||||
<!-- For TCP Port / Steam / MQTT Type -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
|
||||
<!-- For TCP Port / Steam / MQTT / Radius Type -->
|
||||
<div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt' || monitor.type === 'radius'" class="my-3">
|
||||
<label for="port" class="form-label">{{ $t("Port") }}</label>
|
||||
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
|
||||
</div>
|
||||
@@ -708,9 +708,11 @@ message HealthCheckResponse {
|
||||
}
|
||||
|
||||
// Set default port for DNS if not already defined
|
||||
if (! this.monitor.port || this.monitor.port === "53") {
|
||||
if (! this.monitor.port || this.monitor.port === "53" || this.monitor.port === "1812") {
|
||||
if (this.monitor.type === "dns") {
|
||||
this.monitor.port = "53";
|
||||
} else if (this.monitor.type === "radius") {
|
||||
this.monitor.port = "1812";
|
||||
} else {
|
||||
this.monitor.port = undefined;
|
||||
}
|
||||
|
||||
161
src/pages/MaintenanceDetails.vue
Normal file
161
src/pages/MaintenanceDetails.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<transition name="slide-fade" appear>
|
||||
<div v-if="maintenance">
|
||||
<h1>{{ maintenance.title }}</h1>
|
||||
<p class="url">
|
||||
<span>{{ $t("Start") }}: {{ $root.datetimeMaintenance(maintenance.start_date) }}</span>
|
||||
<br>
|
||||
<span>{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenance.end_date) }}</span>
|
||||
</p>
|
||||
|
||||
<div class="functions" style="margin-top: 10px;">
|
||||
<router-link :to=" '/maintenance/edit/' + maintenance.id " class="btn btn-secondary">
|
||||
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="deleteDialog">
|
||||
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label for="description" class="form-label" style="margin-top: 20px;">{{ $t("Description") }}</label>
|
||||
<textarea id="description" v-model="maintenance.description" class="form-control" disabled></textarea>
|
||||
|
||||
<label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label>
|
||||
<br>
|
||||
<button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
|
||||
{{ monitor }}
|
||||
</button>
|
||||
<br />
|
||||
|
||||
<label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Show this Maintenance Message on which Status Pages") }}</label>
|
||||
<br>
|
||||
<button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
|
||||
{{ statusPage }}
|
||||
</button>
|
||||
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
|
||||
{{ $t("deleteMaintenanceMsg") }}
|
||||
</Confirm>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useToast } from "vue-toastification";
|
||||
const toast = useToast();
|
||||
import Confirm from "../components/Confirm.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Confirm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
affectedMonitors: [],
|
||||
selectedStatusPages: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
maintenance() {
|
||||
let id = this.$route.params.id;
|
||||
return this.$root.maintenanceList[id];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
|
||||
if (res.ok) {
|
||||
this.affectedMonitors = Object.values(res.monitors).map(monitor => monitor.name);
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
|
||||
this.$root.getSocket().emit("getMaintenanceStatusPage", this.$route.params.id, (res) => {
|
||||
if (res.ok) {
|
||||
this.selectedStatusPages = Object.values(res.statusPages).map(statusPage => statusPage.title);
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
deleteDialog() {
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
deleteMaintenance() {
|
||||
this.$root.deleteMaintenance(this.maintenance.id, (res) => {
|
||||
if (res.ok) {
|
||||
toast.success(res.msg);
|
||||
this.$router.push("/maintenance");
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.functions {
|
||||
text-align: center;
|
||||
|
||||
button, a {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.url {
|
||||
color: $primary;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.functions {
|
||||
button, a {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.btn-monitor {
|
||||
background-color: #5cdd8b;
|
||||
}
|
||||
|
||||
.dark .btn-monitor {
|
||||
color: #020b05 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
280
src/pages/ManageMaintenance.vue
Normal file
280
src/pages/ManageMaintenance.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<transition name="slide-fade" appear>
|
||||
<div>
|
||||
<h1 class="mb-3">
|
||||
{{ $t("Maintenance") }}
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<router-link to="/add-maintenance" class="btn btn-primary mb-3">
|
||||
<font-awesome-icon icon="plus" /> {{ $t("Schedule Maintenance") }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box">
|
||||
<span v-if="Object.keys(sortedMaintenanceList).length === 0" class="d-flex align-items-center justify-content-center my-3">
|
||||
{{ $t("No Maintenance") }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in sortedMaintenanceList"
|
||||
:key="index"
|
||||
class="item"
|
||||
:class="item.status"
|
||||
>
|
||||
<div class="left-part">
|
||||
<div
|
||||
class="circle"
|
||||
></div>
|
||||
<div class="info">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div v-if="false">{{ item.description }}</div>
|
||||
<div class="status">
|
||||
{{ $t("maintenanceStatus-" + item.status) }}
|
||||
</div>
|
||||
|
||||
<MaintenanceTime :maintenance="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<router-link v-if="false" :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button v-if="item.active" class="btn btn-normal" @click="pauseDialog(item.id)">
|
||||
<font-awesome-icon icon="pause" /> {{ $t("Pause") }}
|
||||
</button>
|
||||
|
||||
<button v-if="!item.active" class="btn btn-primary" @click="resumeMaintenance(item.id)">
|
||||
<font-awesome-icon icon="play" /> {{ $t("Resume") }}
|
||||
</button>
|
||||
|
||||
<router-link :to="'/maintenance/edit/' + item.id" class="btn btn-normal">
|
||||
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
|
||||
</router-link>
|
||||
|
||||
<button class="btn btn-danger" @click="deleteDialog(item.id)">
|
||||
<font-awesome-icon icon="trash" /> {{ $t("Delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3" style="font-size: 13px;">
|
||||
<a href="https://github.com/louislam/uptime-kuma/wiki/Maintenance" target="_blank">Learn More</a>
|
||||
</div>
|
||||
|
||||
<Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseMaintenance">
|
||||
{{ $t("pauseMaintenanceMsg") }}
|
||||
</Confirm>
|
||||
|
||||
<Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMaintenance">
|
||||
{{ $t("deleteMaintenanceMsg") }}
|
||||
</Confirm>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
import { getMaintenanceRelativeURL } from "../util.ts";
|
||||
import Confirm from "../components/Confirm.vue";
|
||||
import MaintenanceTime from "../components/MaintenanceTime.vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
const toast = useToast();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaintenanceTime,
|
||||
Confirm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedMaintenanceID: undefined,
|
||||
statusOrderList: {
|
||||
"under-maintenance": 1000,
|
||||
"scheduled": 900,
|
||||
"inactive": 800,
|
||||
"ended": 700,
|
||||
"unknown": 0,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sortedMaintenanceList() {
|
||||
let result = Object.values(this.$root.maintenanceList);
|
||||
|
||||
result.sort((m1, m2) => {
|
||||
if (this.statusOrderList[m1.status] === this.statusOrderList[m2.status]) {
|
||||
return m1.title.localeCompare(m2.title);
|
||||
} else {
|
||||
return this.statusOrderList[m1.status] < this.statusOrderList[m2.status];
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Get the correct URL for the icon
|
||||
* @param {string} icon Path for icon
|
||||
* @returns {string} Correctly formatted path including port numbers
|
||||
*/
|
||||
icon(icon) {
|
||||
if (icon === "/icon.svg") {
|
||||
return icon;
|
||||
} else {
|
||||
return getResBaseURL() + icon;
|
||||
}
|
||||
},
|
||||
|
||||
maintenanceURL(id) {
|
||||
return getMaintenanceRelativeURL(id);
|
||||
},
|
||||
|
||||
deleteDialog(maintenanceID) {
|
||||
this.selectedMaintenanceID = maintenanceID;
|
||||
this.$refs.confirmDelete.show();
|
||||
},
|
||||
|
||||
deleteMaintenance() {
|
||||
this.$root.deleteMaintenance(this.selectedMaintenanceID, (res) => {
|
||||
if (res.ok) {
|
||||
toast.success(res.msg);
|
||||
this.$router.push("/maintenance");
|
||||
} else {
|
||||
toast.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show dialog to confirm pause
|
||||
*/
|
||||
pauseDialog(maintenanceID) {
|
||||
this.selectedMaintenanceID = maintenanceID;
|
||||
this.$refs.confirmPause.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* Pause maintenance
|
||||
*/
|
||||
pauseMaintenance() {
|
||||
this.$root.getSocket().emit("pauseMaintenance", this.selectedMaintenanceID, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Resume maintenance
|
||||
*/
|
||||
resumeMaintenance(id) {
|
||||
this.$root.getSocket().emit("resumeMaintenance", id, (res) => {
|
||||
this.$root.toastRes(res);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/vars.scss";
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all ease-in-out 0.15s;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
min-height: 90px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-white;
|
||||
}
|
||||
|
||||
&.under-maintenance {
|
||||
background-color: rgba(23, 71, 245, 0.16);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(23, 71, 245, 0.3) !important;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: $maintenance;
|
||||
}
|
||||
}
|
||||
|
||||
&.scheduled {
|
||||
.circle {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
.circle {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.ended {
|
||||
.left-part {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.circle {
|
||||
background-color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
.circle {
|
||||
background-color: $dark-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.left-part {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.item {
|
||||
&:hover {
|
||||
background-color: $dark-bg2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<div class="form-container" data-cy="setup-form">
|
||||
<div class="form">
|
||||
<form @submit.prevent="submit">
|
||||
<div>
|
||||
@@ -23,21 +23,21 @@
|
||||
</div>
|
||||
|
||||
<div class="form-floating mt-3">
|
||||
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
|
||||
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required data-cy="username-input">
|
||||
<label for="floatingInput">{{ $t("Username") }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mt-3">
|
||||
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required>
|
||||
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required data-cy="password-input">
|
||||
<label for="floatingPassword">{{ $t("Password") }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mt-3">
|
||||
<input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required>
|
||||
<input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required data-cy="password-repeat-input">
|
||||
<label for="repeat">{{ $t("Repeat Password") }}</label>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
|
||||
<button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing" data-cy="submit-setup-form">
|
||||
{{ $t("Create") }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -218,12 +218,29 @@
|
||||
{{ $t("Degraded Service") }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="isMaintenance">
|
||||
<font-awesome-icon icon="wrench" class="status-maintenance" />
|
||||
{{ $t("maintenanceStatus-under-maintenance") }}
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<font-awesome-icon icon="question-circle" style="color: #efefef;" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Maintenance -->
|
||||
<template v-if="maintenanceList.length > 0">
|
||||
<div
|
||||
v-for="maintenance in maintenanceList" :key="maintenance.id"
|
||||
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"
|
||||
>
|
||||
<h4 class="alert-heading">{{ maintenance.title }}</h4>
|
||||
<div class="content">{{ maintenance.description }}</div>
|
||||
<MaintenanceTime :maintenance="maintenance" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Description -->
|
||||
<strong v-if="editMode">{{ $t("Description") }}:</strong>
|
||||
<Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
|
||||
@@ -265,7 +282,7 @@
|
||||
<Editable v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" />
|
||||
|
||||
<p v-if="config.showPoweredBy">
|
||||
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
||||
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -295,8 +312,9 @@ import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhe
|
||||
import { useToast } from "vue-toastification";
|
||||
import Confirm from "../components/Confirm.vue";
|
||||
import PublicGroupList from "../components/PublicGroupList.vue";
|
||||
import MaintenanceTime from "../components/MaintenanceTime.vue";
|
||||
import { getResBaseURL } from "../util-frontend";
|
||||
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
|
||||
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
@@ -316,6 +334,7 @@ export default {
|
||||
ImageCropUpload,
|
||||
Confirm,
|
||||
PrismEditor,
|
||||
MaintenanceTime,
|
||||
},
|
||||
|
||||
// Leave Page for vue route change
|
||||
@@ -356,6 +375,7 @@ export default {
|
||||
loadedData: false,
|
||||
baseURL: "",
|
||||
clickedEditButton: false,
|
||||
maintenanceList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -409,6 +429,10 @@ export default {
|
||||
return "bg-" + this.incident.style;
|
||||
},
|
||||
|
||||
maintenanceClass() {
|
||||
return "bg-maintenance";
|
||||
},
|
||||
|
||||
overallStatus() {
|
||||
|
||||
if (Object.keys(this.$root.publicLastHeartbeatList).length === 0) {
|
||||
@@ -421,7 +445,9 @@ export default {
|
||||
for (let id in this.$root.publicLastHeartbeatList) {
|
||||
let beat = this.$root.publicLastHeartbeatList[id];
|
||||
|
||||
if (beat.status === UP) {
|
||||
if (beat.status === MAINTENANCE) {
|
||||
return STATUS_PAGE_MAINTENANCE;
|
||||
} else if (beat.status === UP) {
|
||||
hasUp = true;
|
||||
} else {
|
||||
status = STATUS_PAGE_PARTIAL_DOWN;
|
||||
@@ -447,6 +473,10 @@ export default {
|
||||
return this.overallStatus === STATUS_PAGE_ALL_DOWN;
|
||||
},
|
||||
|
||||
isMaintenance() {
|
||||
return this.overallStatus === STATUS_PAGE_MAINTENANCE;
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
@@ -551,6 +581,7 @@ export default {
|
||||
}
|
||||
|
||||
this.incident = res.data.incident;
|
||||
this.maintenanceList = res.data.maintenanceList;
|
||||
this.$root.publicGroupList = res.data.publicGroupList;
|
||||
}).catch( function (error) {
|
||||
if (error.response.status === 404) {
|
||||
@@ -946,6 +977,24 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.maintenance-bg-info {
|
||||
color: $maintenance;
|
||||
}
|
||||
|
||||
.maintenance-icon {
|
||||
font-size: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dark .shadow-box {
|
||||
background-color: #0d1117;
|
||||
}
|
||||
|
||||
.status-maintenance {
|
||||
color: $maintenance;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
@@ -1007,4 +1056,10 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.bg-maintenance {
|
||||
.alert-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user