Feat: Show monitor ID in Details (#4331)

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

View File

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

View File

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

View File

@ -2,11 +2,19 @@
<transition name="slide-fade" appear>
<div v-if="monitor">
<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>
<div class="d-flex">
<div class="tags">
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
</div>
</div>
<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>
<span v-if="monitor.type === 'port'">TCP Port {{ monitor.hostname }}:{{ monitor.port }}</span>
@ -717,7 +725,7 @@ export default {
}
.word {
color: #aaa;
color: $secondary-text;
font-size: 14px;
}
@ -731,7 +739,7 @@ table {
.stats p {
font-size: 13px;
color: #aaa;
color: $secondary-text;
}
.stats {
@ -802,4 +810,20 @@ table {
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>

View File

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