docs: improve extra-labels description (#1208)

* docs: improve `extra-labels` description

* Update README.md

* Update README.md

---------

Co-authored-by: TwiN <twin@linux.com>

.github/workflows/labeler.yml

@@ -32,7 +32,7 @@ jobs:
           if [[ $TITLE == *"alerting"* || $TITLE == *"provider"* || $TITLE == *"alert"* ]]; then
             gh issue edit "$NUMBER" --add-label "area/alerting"
           fi
-          if [[ $TITLE == *"(ui)"* $TITLE == *"ui:"* || ]]; then
+          if [[ $TITLE == *"(ui)"* || $TITLE == *"ui:"* ]]; then
             gh issue edit "$NUMBER" --add-label "area/ui"
           fi
           if [[ $TITLE == *"storage"* || $TITLE == *"postgres"* || $TITLE == *"sqlite"* ]]; then

README.md

@@ -1991,7 +1991,7 @@ See [examples/docker-compose-grafana-prometheus](.examples/docker-compose-grafan
 
 #### Custom Labels
 
-Added a Labels field to the Config and Endpoint structs to support key-value pairs for metrics. Updated the Prometheus metrics initialization to include dynamic labels from the configuration. See the example below:
+You can add custom labels to your endpoints’ Prometheus metrics by defining key–value pairs under the `extra-labels` field. For example:
 
 ```yaml
 endpoints:

web/app/src/components/AnnouncementBanner.vue

@@ -9,7 +9,7 @@
       <!-- Header -->
       <div 
         :class="[
-          'px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
+          'announcement-header px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
           isCollapsed ? 'rounded-lg' : 'rounded-t-lg border-b border-gray-200 dark:border-gray-600'
         ]"
         @click="toggleCollapsed"
@@ -34,7 +34,7 @@
       <!-- Timeline Content -->
       <div 
         v-if="!isCollapsed"
-        class="p-4  transition-all duration-200 rounded-b-lg"
+        class="announcement-content p-4 transition-all duration-200 rounded-b-lg"
       >
         <div class="relative">
           <!-- Announcements -->

web/app/src/components/EndpointCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <Card class="endpoint hover:shadow-lg transition-shadow cursor-pointer h-full flex flex-col">
+  <Card class="endpoint h-full flex flex-col transition hover:shadow-lg hover:scale-[1.01] dark:hover:border-gray-700">
     <CardHeader class="endpoint-header px-3 sm:px-6 pt-3 sm:pt-6 pb-2 space-y-0">
       <div class="flex items-start justify-between gap-2 sm:gap-3">
         <div class="flex-1 min-w-0 overflow-hidden">

web/app/src/views/Home.vue

@@ -280,26 +280,55 @@ const visiblePages = computed(() => {
 })
 
 const fetchData = async () => {
-  loading.value = true
+  // Don't show loading state on refresh to prevent UI flicker
+  const isInitialLoad = endpointStatuses.value.length === 0
+  if (isInitialLoad) {
+    loading.value = true
+  }
   try {
     const response = await fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=1&pageSize=100`, {
       credentials: 'include'
     })
-    
     if (response.status === 200) {
       const data = await response.json()
-      endpointStatuses.value = data
+      // If this is the initial load, just set the data
+      if (isInitialLoad) {
+        endpointStatuses.value = data
+      } else {
+        // Check if endpoints have been added or removed
+        const currentKeys = new Set(endpointStatuses.value.map(ep => ep.key))
+        const newKeys = new Set(data.map(ep => ep.key))
+        const hasAdditions = data.some(ep => !currentKeys.has(ep.key))
+        const hasRemovals = endpointStatuses.value.some(ep => !newKeys.has(ep.key))
+        if (hasAdditions || hasRemovals) {
+          // Endpoints have changed, reset the array to maintain proper order
+          endpointStatuses.value = data
+        } else {
+          // Only statuses/results have changed, update in place to preserve scroll
+          const endpointMap = new Map(data.map(ep => [ep.key, ep]))
+          endpointStatuses.value.forEach((endpoint, index) => {
+            const updated = endpointMap.get(endpoint.key)
+            if (updated) {
+              // Update in place to preserve Vue's reactivity and scroll position
+              Object.assign(endpointStatuses.value[index], updated)
+            }
+          })
+        }
+      }
     } else {
       console.error('[Home][fetchData] Error:', await response.text())
     }
   } catch (error) {
     console.error('[Home][fetchData] Error:', error)
   } finally {
-    loading.value = false
+    if (isInitialLoad) {
+      loading.value = false
+    }
   }
 }
 
 const refreshData = () => {
+  endpointStatuses.value = [];
   fetchData()
 }
 

web/static/js/chunk-vendors.js

@@ -137,7 +137,7 @@ const u=({name:e,iconNode:t,absoluteStrokeWidth:n,"absolute-stroke-width":s,stro
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const o=(0,r.Z)("log-in",[["path",{d:"m10 17 5-5-5-5",key:"1bsop3"}],["path",{d:"M15 12H3",key:"6jk70r"}],["path",{d:"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4",key:"u53s6r"}]])},104:function(e,t,n){n.d(t,{Z:function(){return o}});var r=n(264);
+ */const o=(0,r.Z)("log-in",[["path",{d:"m10 17 5-5-5-5",key:"1bsop3"}],["path",{d:"M15 12H3",key:"6jk70r"}],["path",{d:"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4",key:"u53s6r"}]])},507:function(e,t,n){n.d(t,{Z:function(){return o}});var r=n(264);
 /**
  * @license lucide-vue-next v0.539.0 - ISC
  *