ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-10-30 11:10:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update Maintenance UI

Browse source
This commit is contained in:
Louis Lam 2022-09-18 22:34:05 +08:00
parent f61c1c47aa
commit 7853c2cc38
5 changed files with 61 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/assets/app.scss
View file

@ -22,6 +22,19 @@ textarea.form-control {
width: 10px; width: 10px;
} }
.bg-maintenance {
color: white !important;
background-color: $maintenance !important;
}
.bg-dark {
color: white;
}
.text-maintenance {
color: $maintenance !important;
}
.list-group { .list-group {
border-radius: 0.75rem; border-radius: 0.75rem;
@ -252,10 +265,6 @@ optgroup {
color: $dark-font-color2; color: $dark-font-color2;
} }
.bg-maintenance {
background-color: $maintenance;
}
.btn-secondary { .btn-secondary {
color: white; color: white;
} }

4
src/languages/en.js
View file

@ -10,17 +10,17 @@ export default {
maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.", maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.", acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
Maintenance: "Maintenance", Maintenance: "Maintenance",
"Monitors": "Monitors",
"Schedule maintenance": "Schedule maintenance", "Schedule maintenance": "Schedule maintenance",
"Affected Monitors": "Affected Monitors", "Affected Monitors": "Affected Monitors",
"Pick Affected Monitors...": "Pick Affected Monitors...", "Pick Affected Monitors...": "Pick Affected Monitors...",
"Start of maintenance": "Start of maintenance", "Start of maintenance": "Start of maintenance",
"Expected end of maintenance": "Expected end 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", "Selected status pages": "Selected status pages",
"Select status pages...": "Select status pages...", "Select status pages...": "Select status pages...",
End: "End", End: "End",
affectedMonitorsDescription: "Select monitors that are affected by current maintenance", 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", atLeastOneMonitor: "Select at least one affected monitor",
maintenanceInvalidDate: "Invalid maintenance end date entered", maintenanceInvalidDate: "Invalid maintenance end date entered",
selectedStatusPagesDescription: "Select status pages to display maintenance info on", selectedStatusPagesDescription: "Select status pages to display maintenance info on",

88
src/pages/EditMaintenance.vue
View file

@ -5,7 +5,7 @@
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="shadow-box"> <div class="shadow-box">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-xl-7">
<!-- Title --> <!-- Title -->
<div class="my-3"> <div class="my-3">
<label for="name" class="form-label">{{ $t("Title") }}</label> <label for="name" class="form-label">{{ $t("Title") }}</label>
@ -24,9 +24,10 @@
</div> </div>
<!-- Affected Monitors --> <!-- Affected Monitors -->
<div class="my-3"> <h2 class="mt-5">{{ $t("Affected Monitors") }}</h2>
<label for="affected_monitors" class="form-label">{{ $t("Affected Monitors") }}</label> {{ $t("affectedMonitorsDescription") }}
<div class="my-3">
<VueMultiselect <VueMultiselect
id="affected_monitors" id="affected_monitors"
v-model="affectedMonitors" v-model="affectedMonitors"
@ -43,12 +44,46 @@
:max-height="600" :max-height="600"
:taggable="false" :taggable="false"
></VueMultiselect> ></VueMultiselect>
</div>
<div class="form-text"> <!-- Status pages to display maintenance info on -->
{{ $t("affectedMonitorsDescription") }} <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>
</div> </div>
<h2 class="mt-5">{{ $t("Effective Date Range") }}</h2>
<!-- Start Date Time --> <!-- Start Date Time -->
<div class="my-3"> <div class="my-3">
<label for="start_date" class="form-label">{{ $t("Start Date") }}</label> <label for="start_date" class="form-label">{{ $t("Start Date") }}</label>
@ -67,46 +102,7 @@
> >
</div> </div>
<!-- Show on all pages --> <div class="mt-4 mb-1">
<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">
<button <button
id="monitor-submit-btn" class="btn btn-primary" type="submit" id="monitor-submit-btn" class="btn btn-primary" type="submit"
:disabled="processing" :disabled="processing"
@ -329,7 +325,7 @@ export default {
} }
textarea { textarea {
min-height: 200px; min-height: 150px;
} }
.dark-calendar::-webkit-calendar-picker-indicator { .dark-calendar::-webkit-calendar-picker-indicator {

2
src/pages/ManageMaintenance.vue
View file

@ -33,7 +33,7 @@
</div> </div>
<div class="buttons"> <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"> <router-link :to="'/maintenance/edit/' + item.id" class="btn btn-secondary">
<font-awesome-icon icon="edit" /> {{ $t("Edit") }} <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
</router-link> </router-link>

7
src/pages/StatusPage.vue
View file

@ -199,14 +199,14 @@
<template v-if="maintenance.length"> <template v-if="maintenance.length">
<div <div
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id" 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="item">
<div class="row"> <div class="row">
<div class="col-1 col-md-1 d-flex justify-content-center align-items-center"> <div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
<font-awesome-icon <font-awesome-icon
icon="wrench" icon="wrench"
class="maintenance-icon maintenance-bg-info" class="maintenance-icon"
/> />
</div> </div>
<div class="col-11 col-md-11"> <div class="col-11 col-md-11">
@ -215,7 +215,6 @@
<div class="date mt-3"> <div class="date mt-3">
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
({{ dateFromNow(maintenanceItem.start_date) }})<br />
</div> </div>
</div> </div>
</div> </div>
@ -996,7 +995,7 @@ footer {
} }
.maintenance-icon { .maintenance-icon {
font-size: 30px; font-size: 35px;
vertical-align: middle; vertical-align: middle;
} }