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; $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;

View file

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

View file

@ -2,10 +2,18 @@
<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="tags"> <div class="d-flex">
<Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" /> <div class="tags">
<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>
@ -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>

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;