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

Feat: Show monitor ID in Details (#4331)

Browse source
This commit is contained in:
Nelson Chan 2024-01-28 18:15:29 +08:00 committed by GitHub
parent 538f83205d
commit 2bccae415f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/assets/vars.scss
View file

@ -4,6 +4,7 @@ $warning: #f8a306;
$maintenance: #1747f5; $maintenance: #1747f5;
$link-color: #111; $link-color: #111;
$border-radius: 50rem; $border-radius: 50rem;
$secondary-text: #aaa;
$highlight: #7ce8a4; $highlight: #7ce8a4;
$highlight-white: #e7faec; $highlight-white: #e7faec;

2
src/components/HeartbeatBar.vue
View file

@ -309,7 +309,7 @@ export default {
} }
.word { .word {
color: #aaa; color: $secondary-text;
font-size: 12px; font-size: 12px;
} }

30
src/pages/Details.vue
View file

@ -2,11 +2,19 @@
<transition name="slide-fade" appear> <transition name="slide-fade" appear>
<div v-if="monitor"> <div v-if="monitor">
<router-link v-if="group !== ''" :to="monitorURL(monitor.parent)"> {{ group }}</router-link> <router-link v-if="group !== ''" :to="monitorURL(monitor.parent)"> {{ group }}</router-link>
<h1> {{ monitor.name }}</h1> <h1>
{{ monitor.name }}
<div class="monitor-id">
<div class="hash">#</div>
<div>{{ monitor.id }}</div>
</div>
</h1>
<p v-if="monitor.description">{{ monitor.description }}</p> <p v-if="monitor.description">{{ monitor.description }}</p>
<div class="d-flex">
<div class="tags"> <div class="tags">
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" /> <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
</div> </div>
</div>
<p class="url"> <p class="url">
<a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'mp-health' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a> <a v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'mp-health' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ filterPassword(monitor.url) }}</a>
<span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span> <span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span>
@ -717,7 +725,7 @@ export default {
} }
.word { .word {
color: #aaa; color: $secondary-text;
font-size: 14px; font-size: 14px;
} }
@ -731,7 +739,7 @@ table {
.stats p { .stats p {
font-size: 13px; font-size: 13px;
color: #aaa; color: $secondary-text;
} }
.stats { .stats {
@ -802,4 +810,20 @@ table {
margin-left: 0 !important; margin-left: 0 !important;
} }
.monitor-id {
display: inline-flex;
font-size: 0.7em;
margin-left: 0.3em;
color: $secondary-text;
flex-direction: row;
flex-wrap: nowrap;
.hash {
user-select: none;
}
.dark & {
opacity: 0.7;
}
}
</style> </style>

2
src/pages/Settings.vue
View file

@ -245,7 +245,7 @@ export default {
} }
footer { footer {
color: #aaa; color: $secondary-text;
font-size: 13px; font-size: 13px;
margin-top: 20px; margin-top: 20px;
padding-bottom: 30px; padding-bottom: 30px;