self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 08:48:45 +02:00
Code Issues Actions 5 Releases Activity

show tags in monitor select list under status page : change select UI from normal select to vue-multiselect

Browse Source
This commit is contained in:
titanventura 2023-02-26 16:26:09 +05:30
parent b91c526d2e
commit db6b863445
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/StatusPage.vue
View File

@ -276,9 +276,23 @@
<div class="mt-3">
<div v-if="allMonitorList.length > 0 && loadedData">
<label>{{ $t("Add a monitor") }}:</label>
<select v-model="selectedMonitor" class="form-control">
<option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
</select>
<VueMultiselect
v-model="selectedMonitor"
:options="allMonitorList"
:multiple="false"
:searchable="true"
:placeholder="$t('Select')"
label="name"
trackBy="name"
>
<template #option="{ option }">
<div
class="d-inline-flex"
>
<span>{{ option.name }} <Tag v-for="tag in option.tags" :key="tag" :item="tag" :size="'sm'" /></span>
</div>
</template>
</VueMultiselect>
</div>
<div v-else class="text-center">
{{ $t("No monitors available.") }} <router-link to="/add">{{ $t("Add one") }}</router-link>
@ -339,6 +353,8 @@ 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_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
import Tag from "../components/Tag.vue";
import VueMultiselect from "vue-multiselect";
const toast = useToast();
@ -359,6 +375,8 @@ export default {
Confirm,
PrismEditor,
MaintenanceTime,
Tag,
VueMultiselect
},
// Leave Page for vue route change