Feat: Show monitor ID in Details (#4331)

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;

src/components/HeartbeatBar.vue

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

src/pages/Details.vue

@@ -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>

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;