mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-12-18 12:14:41 -05:00
Update Maintenance UI
This commit is contained in:
Louis Lam
parent
f61c1c47aa
commit
7853c2cc38
@ -22,6 +22,19 @@ textarea.form-control {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.bg-maintenance {
|
||||
color: white !important;
|
||||
background-color: $maintenance !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-maintenance {
|
||||
color: $maintenance !important;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-radius: 0.75rem;
|
||||
|
||||
@ -252,10 +265,6 @@ optgroup {
|
||||
color: $dark-font-color2;
|
||||
}
|
||||
|
||||
.bg-maintenance {
|
||||
background-color: $maintenance;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -10,17 +10,17 @@ export default {
|
||||
maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
|
||||
acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
|
||||
Maintenance: "Maintenance",
|
||||
"Monitors": "Monitors",
|
||||
"Schedule maintenance": "Schedule maintenance",
|
||||
"Affected Monitors": "Affected Monitors",
|
||||
"Pick Affected Monitors...": "Pick Affected Monitors...",
|
||||
"Start of maintenance": "Start of maintenance",
|
||||
"Expected end of maintenance": "Expected end of maintenance",
|
||||
"Show on all pages": "Show on all status pages",
|
||||
"All Status Pages": "All Status Pages",
|
||||
"Selected status pages": "Selected status pages",
|
||||
"Select status pages...": "Select status pages...",
|
||||
End: "End",
|
||||
affectedMonitorsDescription: "Select monitors that are affected by current maintenance",
|
||||
affectedStatusPages: "Show this maintenance message on selected status pages",
|
||||
atLeastOneMonitor: "Select at least one affected monitor",
|
||||
maintenanceInvalidDate: "Invalid maintenance end date entered",
|
||||
selectedStatusPagesDescription: "Select status pages to display maintenance info on",
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<form @submit.prevent="submit">
|
||||
<div class="shadow-box">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="col-xl-7">
|
||||
<!-- Title -->
|
||||
<div class="my-3">
|
||||
<label for="name" class="form-label">{{ $t("Title") }}</label>
|
||||
@ -24,9 +24,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Affected Monitors -->
|
||||
<div class="my-3">
|
||||
<label for="affected_monitors" class="form-label">{{ $t("Affected Monitors") }}</label>
|
||||
<h2 class="mt-5">{{ $t("Affected Monitors") }}</h2>
|
||||
{{ $t("affectedMonitorsDescription") }}
|
||||
|
||||
<div class="my-3">
|
||||
<VueMultiselect
|
||||
id="affected_monitors"
|
||||
v-model="affectedMonitors"
|
||||
@ -43,12 +44,46 @@
|
||||
:max-height="600"
|
||||
:taggable="false"
|
||||
></VueMultiselect>
|
||||
</div>
|
||||
|
||||
<div class="form-text">
|
||||
{{ $t("affectedMonitorsDescription") }}
|
||||
<!-- 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"
|
||||
:allow-empty="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("Effective Date Range") }}</h2>
|
||||
|
||||
<!-- Start Date Time -->
|
||||
<div class="my-3">
|
||||
<label for="start_date" class="form-label">{{ $t("Start Date") }}</label>
|
||||
@ -67,46 +102,7 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Show on all pages -->
|
||||
<div class="my-3 form-check">
|
||||
<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("Show this Maintenance Message on ALL Status Pages")
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<!-- Status pages to display maintenance info on -->
|
||||
<div v-if="!showOnAllPages" class="my-3">
|
||||
<label for="selected_status_pages" class="form-label">{{
|
||||
$t("Show this Maintenance Message on which Status Pages")
|
||||
}}</label>
|
||||
|
||||
<VueMultiselect
|
||||
id="selected_status_pages"
|
||||
v-model="selectedStatusPages"
|
||||
:options="selectedStatusPagesOptions"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:multiple="true"
|
||||
:allow-empty="false"
|
||||
: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 class="form-text">
|
||||
{{ $t("selectedStatusPagesDescription") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 mb-1">
|
||||
<div class="mt-4 mb-1">
|
||||
<button
|
||||
id="monitor-submit-btn" class="btn btn-primary" type="submit"
|
||||
:disabled="processing"
|
||||
@ -329,7 +325,7 @@ export default {
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 200px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.dark-calendar::-webkit-calendar-picker-indicator {
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<router-link :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
|
||||
<router-link v-if="false" :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
|
||||
<router-link :to="'/maintenance/edit/' + item.id" class="btn btn-secondary">
|
||||
<font-awesome-icon icon="edit" /> {{ $t("Edit") }}
|
||||
</router-link>
|
||||
|
||||
@ -199,14 +199,14 @@
|
||||
<template v-if="maintenance.length">
|
||||
<div
|
||||
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
|
||||
class="shadow-box alert mb-4 p-4 maintenance mt-4 position-relative" role="alert"
|
||||
class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"
|
||||
>
|
||||
<div class="item">
|
||||
<div class="row">
|
||||
<div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
|
||||
<font-awesome-icon
|
||||
icon="wrench"
|
||||
class="maintenance-icon maintenance-bg-info"
|
||||
class="maintenance-icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-11 col-md-11">
|
||||
@ -215,7 +215,6 @@
|
||||
|
||||
<div class="date mt-3">
|
||||
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
|
||||
({{ dateFromNow(maintenanceItem.start_date) }})<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -996,7 +995,7 @@ footer {
|
||||
}
|
||||
|
||||
.maintenance-icon {
|
||||
font-size: 30px;
|
||||
font-size: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user