From efc8855f9e6a3ae050f0a83dbd3faa680ad91635 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Sat, 6 Jan 2024 05:06:14 +0800
Subject: [PATCH] Feat: Show monitor ID in Details

---
 src/pages/Details.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index e27bf063e9..7ddfb1b5ef 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -4,8 +4,11 @@
             <router-link v-if="group !== ''" :to="monitorURL(monitor.parent)"> {{ group }}</router-link>
             <h1> {{ monitor.name }}</h1>
             <p v-if="monitor.description">{{ monitor.description }}</p>
-            <div class="tags">
-                <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
+            <div class="d-flex">
+                <span class="me-2 my-1 monitor-id">ID: {{ monitor.id }}</span>
+                <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>
@@ -802,4 +805,8 @@ table {
     margin-left: 0 !important;
 }
 
+.monitor-id {
+    font-size: 0.8rem;
+}
+
 </style>