From 2bccae415f61fb9874432c382d5cc95a466e4bfb Mon Sep 17 00:00:00 2001
From: Nelson Chan <3271800+chakflying@users.noreply.github.com>
Date: Sun, 28 Jan 2024 18:15:29 +0800
Subject: [PATCH] Feat: Show monitor ID in Details (#4331)

---
 src/assets/vars.scss            |  1 +
 src/components/HeartbeatBar.vue |  2 +-
 src/pages/Details.vue           | 34 ++++++++++++++++++++++++++++-----
 src/pages/Settings.vue          |  2 +-
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/assets/vars.scss b/src/assets/vars.scss
index e48a6efb6..7250de140 100644
--- a/src/assets/vars.scss
+++ b/src/assets/vars.scss
@@ -4,6 +4,7 @@ $warning: #f8a306;
 $maintenance: #1747f5;
 $link-color: #111;
 $border-radius: 50rem;
+$secondary-text: #aaa;
 
 $highlight: #7ce8a4;
 $highlight-white: #e7faec;
diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 324641cd9..fc044fe54 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -309,7 +309,7 @@ export default {
 }
 
 .word {
-    color: #aaa;
+    color: $secondary-text;
     font-size: 12px;
 }
 
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index e27bf063e..1eb9a7f62 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -2,10 +2,18 @@
     <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="tags">
-                <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
+            <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>
@@ -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>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 359af4c6e..96bb1fee1 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -245,7 +245,7 @@ export default {
 }
 
 footer {
-    color: #aaa;
+    color: $secondary-text;
     font-size: 13px;
     margin-top: 20px;
     padding-bottom: 30px;