You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
uptime-kuma/src/pages/ManageMaintenance.vue

304 lines
8.6 KiB

<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">
2 years ago
{{ $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>
2 years ago
<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>
2 years ago
<div class="btn-group" role="group">
2 years ago
<button v-if="item.active" class="btn btn-normal" @click="pauseDialog(item.id)">
<font-awesome-icon icon="pause" /> {{ $t("Pause") }}
</button>
2 years ago
<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>
2 years ago
<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;
}
},
/**
* Get maintenance URL
* @param {number} id
* @returns {string} Relative URL
*/
maintenanceURL(id) {
return getMaintenanceRelativeURL(id);
},
/**
* Show delete confirmation
* @param {number} maintenanceID
*/
deleteDialog(maintenanceID) {
this.selectedMaintenanceID = maintenanceID;
this.$refs.confirmDelete.show();
},
/** Delete maintenance after showing confirmation dialog */
deleteMaintenance() {
this.$root.deleteMaintenance(this.selectedMaintenanceID, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/maintenance");
} else {
toast.error(res.msg);
}
});
},
2 years ago
/**
* Show dialog to confirm pause
*/
2 years ago
pauseDialog(maintenanceID) {
this.selectedMaintenanceID = maintenanceID;
2 years ago
this.$refs.confirmPause.show();
},
/**
* Pause maintenance
*/
pauseMaintenance() {
2 years ago
this.$root.getSocket().emit("pauseMaintenance", this.selectedMaintenanceID, (res) => {
2 years ago
this.$root.toastRes(res);
});
},
/**
* Resume maintenance
*/
2 years ago
resumeMaintenance(id) {
this.$root.getSocket().emit("resumeMaintenance", id, (res) => {
2 years ago
this.$root.toastRes(res);
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.mobile {
.item {
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
}
.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;
2 years ago
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;
}
2 years ago
.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;
}
2 years ago
.status {
font-size: 14px;
}
}
}
.buttons {
display: flex;
gap: 8px;
flex-direction: row-reverse;
.btn-group {
width: 310px;
}
}
}
.dark {
.item {
&:hover {
background-color: $dark-bg2;
}
}
}
</style>