feat(ui): New status page UI (#1198)

* feat(ui): New status page UI * docs: Rename labels to extra-labels * Fix domain expiration test * feat(ui): Add ui.default-sort-by and ui.default-filter-by * Change ui.header default value to Gatus * Re-use EndpointCard in Details.vue as well to avoid duplicate code * Fix flaky metrics test * Add subtle green color to "Gatus" * Remove duplicate title (tooltip is sufficient, no need for title on top of that) * Fix collapsed group user preferences * Update status page screenshots
2025-08-14 09:15:34 -04:00
parent 8d63462fcd
commit 440b732c71
54 changed files with 4251 additions and 2226 deletions
--- a/web/app/src/components/ui/select/Select.vue
+++ b/web/app/src/components/ui/select/Select.vue
@@ -0,0 +1,127 @@
+<template>
+  <div ref="selectRef" class="relative" :class="props.class">
+    <button
+      @click="toggleDropdown"
+      @keydown="handleKeyDown"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      :aria-label="selectedOption.label || props.placeholder"
+      class="flex h-9 sm:h-10 w-full items-center justify-between rounded-md border border-input bg-background px-2 sm:px-3 py-1.5 sm:py-2 text-xs sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <span class="truncate">{{ selectedOption.label }}</span>
+      <ChevronDown class="h-3 w-3 sm:h-4 sm:w-4 opacity-50 flex-shrink-0 ml-1" />
+    </button>
+    
+    <div
+      v-if="isOpen"
+      role="listbox"
+      class="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+    >
+      <div class="p-1">
+        <div
+          v-for="(option, index) in options"
+          :key="option.value"
+          @click="selectOption(option)"
+          :class="[
+            'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-6 sm:pl-8 pr-2 text-xs sm:text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+            index === focusedIndex && 'bg-accent text-accent-foreground'
+          ]"
+          role="option"
+          :aria-selected="modelValue === option.value"
+        >
+          <span class="absolute left-1.5 sm:left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <Check v-if="modelValue === option.value" class="h-3 w-3 sm:h-4 sm:w-4" />
+          </span>
+          {{ option.label }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/* eslint-disable no-undef */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ChevronDown, Check } from 'lucide-vue-next'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  options: { type: Array, required: true },
+  placeholder: { type: String, default: 'Select...' },
+  class: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+const selectRef = ref(null)
+const focusedIndex = ref(-1)
+
+const selectedOption = computed(() => {
+  return props.options.find(option => option.value === props.modelValue) || { label: props.placeholder, value: '' }
+})
+
+const selectOption = (option) => {
+  emit('update:modelValue', option.value)
+  isOpen.value = false
+}
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    // Set initial focus to selected option or first option
+    const selectedIdx = props.options.findIndex(opt => opt.value === props.modelValue)
+    focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0
+  } else {
+    focusedIndex.value = -1
+  }
+}
+
+const handleClickOutside = (event) => {
+  if (selectRef.value && !selectRef.value.contains(event.target)) {
+    isOpen.value = false
+    focusedIndex.value = -1
+  }
+}
+
+const handleKeyDown = (event) => {
+  if (!isOpen.value) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      toggleDropdown()
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      focusedIndex.value = Math.min(focusedIndex.value + 1, props.options.length - 1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusedIndex.value = Math.max(focusedIndex.value - 1, 0)
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      if (focusedIndex.value >= 0 && focusedIndex.value < props.options.length) {
+        selectOption(props.options[focusedIndex.value])
+      }
+      break
+    case 'Escape':
+      event.preventDefault()
+      isOpen.value = false
+      focusedIndex.value = -1
+      break
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>