feat: allow setting metric per SLA notification, so admins can set SLA alert per metric or just set to all if they want a notification to be sent for all metrics

- Make sla time fields (first response, next response, resolution) optional, only 1 field is required.

frontend/src/features/admin/sla/SLAForm.vue

@@ -109,16 +109,16 @@
                   {{
                     notification.type === 'warning' ? t('admin.sla.warning') : t('admin.sla.breach')
                   }}
-                  {{ t('admin.sla.notification') }}
+                  {{ t('globals.terms.alert').toLowerCase() }}
                 </div>
                 <p class="text-xs text-muted-foreground">
-                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach action' }}
+                  {{ notification.type === 'warning' ? 'Pre-breach alert' : 'Post-breach alert' }}
                 </p>
               </div>
             </div>
             <Button
               variant="ghost"
-              size="sm"
+              size="xs"
               @click.prevent="removeNotification(index)"
               class="opacity-70 hover:opacity-100 text-muted-foreground hover:text-foreground"
             >
@@ -142,16 +142,16 @@
                       {{ t('admin.sla.triggerTiming') }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
+                      <Select v-bind="componentField">
                         <SelectTrigger class="w-full">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
                           <SelectGroup>
-                            <SelectItem value="immediately" class="focus:bg-accent">
+                            <SelectItem value="immediately">
                               {{ t('admin.sla.immediatelyOnBreach') }}
                             </SelectItem>
-                            <SelectItem value="after" class="focus:bg-accent">
+                            <SelectItem value="after">
                               {{ t('admin.sla.afterSpecificDuration') }}
                             </SelectItem>
                           </SelectGroup>
@@ -172,7 +172,7 @@
                       }}
                     </FormLabel>
                     <FormControl>
-                      <Select v-bind="componentField" class="hover:border-foreground/30">
+                      <Select v-bind="componentField">
                         <SelectTrigger class="w-full">
                           <SelectValue :placeholder="t('admin.sla.selectDuration')" />
                         </SelectTrigger>
@@ -182,7 +182,6 @@
                               v-for="duration in delayDurations"
                               :key="duration"
                               :value="duration"
-                              class="focus:bg-accent"
                             >
                               {{ duration }}
                             </SelectItem>
@@ -205,7 +204,7 @@
                 <FormItem>
                   <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
                     <Users class="w-4 h-4 text-muted-foreground" />
-                    {{ t('admin.sla.notificationRecipients') }}
+                    {{ t('admin.sla.alertRecipients') }}
                   </FormLabel>
                   <FormControl>
                     <SelectTag
@@ -225,6 +224,39 @@
                 </FormItem>
               </FormField>
             </div>
+
+            <FormField :name="`notifications.${index}.metric`" v-slot="{ componentField }">
+              <FormItem>
+                <FormLabel class="flex items-center gap-1.5 text-sm font-medium">
+                  <SlidersHorizontal class="w-4 h-4 text-muted-foreground" />
+                  {{ t('admin.sla.metric') }}
+                </FormLabel>
+                <FormControl>
+                  <Select v-bind="componentField">
+                    <SelectTrigger class="w-full">
+                      <SelectValue :placeholder="t('admin.sla.selectMetric')" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="all">
+                          {{ t('admin.sla.metrics.all') }}
+                        </SelectItem>
+                        <SelectItem value="first_response">
+                          {{ t('admin.sla.firstResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="next_response">
+                          {{ t('admin.sla.nextResponseTime') }}
+                        </SelectItem>
+                        <SelectItem value="resolution">
+                          {{ t('admin.sla.resolutionTime') }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
           </div>
         </div>
       </div>
@@ -235,7 +267,7 @@
         class="flex flex-col items-center justify-center p-8 space-y-3 rounded-xl bg-muted/30 border border-dashed"
       >
         <Bell class="w-8 h-8 text-muted-foreground" />
-        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noNotificationsConfigured') }}</p>
+        <p class="text-sm text-muted-foreground">{{ t('admin.sla.noAlertsConfigured') }}</p>
       </div>
     </div>
 
@@ -251,7 +283,17 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { createFormSchema } from './formSchema'
 import { Button } from '@/components/ui/button'
-import { X, Plus, Timer, CircleAlert, Users, Clock, Hourglass, Bell } from 'lucide-vue-next'
+import {
+  X,
+  Plus,
+  Timer,
+  CircleAlert,
+  Users,
+  Clock,
+  Hourglass,
+  Bell,
+  SlidersHorizontal
+} from 'lucide-vue-next'
 import { useUsersStore } from '@/stores/users'
 import {
   FormControl,
@@ -343,7 +385,8 @@ const addNotification = (type) => {
     type: type,
     time_delay_type: type === 'warning' ? 'before' : 'immediately',
     time_delay: type === 'warning' ? '10m' : '',
-    recipients: []
+    recipients: [],
+    metric: 'all'
   })
   form.setFieldValue('notifications', notifications)
 }
@@ -364,6 +407,8 @@ watch(
 
     const transformedNotifications = (newValues.notifications || []).map((notification) => ({
       ...notification,
+      // Default value, notification applies to all metrics unless specified.
+      metric: notification.metric || 'all',
       time_delay_type:
         notification.type === 'warning'
           ? 'before'