Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-10 23:40:50 -04:00
Code Issues Projects Releases Packages Wiki Activity

A complete maintenance planning system has been created

Browse source
This commit is contained in:
Karel Krýda 2022-01-23 15:22:00 +01:00
parent c3c4db52ec
commit 0d3414c6d6
32 changed files with 1121 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

247
src/pages/EditMaintenance.vue Normal file
View file

@ -0,0 +1,247 @@
<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-md-6">
<h2 class="mb-2">{{ $t("General") }}</h2>
<!-- Title -->
<div class="my-3">
<label for="name" class="form-label">{{ $t("Title") }}</label>
<input id="name" v-model="maintenance.title" type="text" class="form-control"
:placeholder="titlePlaceholder" 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"
:placeholder="descriptionPlaceholder"></textarea>
</div>
<!-- Affected Monitors -->
<div class="my-3">
<label for="affected_monitors" class="form-label">{{ $t("Affected Monitors") }}</label>
<VueMultiselect
id="affected_monitors"
v-model="affectedMonitors"
:options="affectedMonitorsOptions"
track-by="id"
label="name"
:multiple="true"
:allow-empty="false"
: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 class="form-text">
{{ $t("affectedMonitorsDescription") }}
</div>
</div>
<!-- Start Date Time -->
<div class="my-3">
<label for="start_date" class="form-label">{{ $t("Start of maintenance") }}</label>
<input :type="'datetime-local'" id="start_date" v-model="maintenance.start_date"
class="form-control" :class="{'darkCalendar': dark }" required>
</div>
<!-- End Date Time -->
<div class="my-3">
<label for="end_date" class="form-label">{{ $t("Expected end of maintenance") }}</label>
<input :type="'datetime-local'" id="end_date" v-model="maintenance.end_date"
class="form-control" :class="{'darkCalendar': dark }" required>
</div>
<div class="mt-5 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 CopyableInput from "../components/CopyableInput.vue";
import {useToast} from "vue-toastification";
import VueMultiselect from "vue-multiselect";
const toast = useToast();
export default {
components: {
CopyableInput,
VueMultiselect,
},
data() {
return {
processing: false,
maintenance: {},
affectedMonitors: [],
affectedMonitorsOptions: [],
dark: (this.$root.theme === "dark"),
};
},
computed: {
pageName() {
return this.$t((this.isAdd) ? "Schedule maintenance" : "Edit");
},
isAdd() {
return this.$route.path === "/addMaintenance";
},
isEdit() {
return this.$route.path.startsWith("/editMaintenance");
},
titlePlaceholder() {
return this.$t("Network infrastructure maintenance");
},
descriptionPlaceholder() {
return this.$t("Example: Network infrastructure maintenance is underway which will affect some of our services.");
}
},
watch: {
"$route.fullPath"() {
this.init();
}
},
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 = [];
if (this.isAdd) {
this.maintenance = {
title: "",
description: "",
start_date: "",
end_date: "",
};
} 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);
}
});
} else {
toast.error(res.msg);
}
});
}
},
async submit() {
this.processing = true;
if (this.affectedMonitors.length === 0) {
toast.error(this.$t("Select at least one affected monitor"));
return this.processing = false;
}
if (this.isAdd) {
this.$root.addMaintenance(this.maintenance, async (res) => {
if (res.ok) {
await this.addMonitorMaintenance(res.maintenanceID, () => {
toast.success(res.msg);
this.processing = false;
this.$root.getMaintenanceList();
this.$router.push("/dashboard/maintenance/" + res.maintenanceID);
});
} 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, () => {
this.processing = false;
this.$root.toastRes(res);
this.init();
});
}
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();
});
},
},
};
</script>
<style lang="scss" scoped>
.shadow-box {
padding: 20px;
}
textarea {
min-height: 200px;
}
.darkCalendar::-webkit-calendar-picker-indicator {
filter: invert(1);
}
</style>