feat: add alphabetical sorting with priority keys to alert source display (#654)
Sort keys in the alert details Source tab alphabetically while prioritizing timestamp and agent_name at the top and message at the bottom for improved readability and consistency.
oliver-oat committed
Feb 2, 2026 at 19:43 UTC
7e8f8328bfdc8cd3bd7806c601e845e87947b95f
1 file changed
+25
-1
frontend/src/components/incidentManagement/alerts/AlertAssetInfo.vue
+25
-1
@@ -105,7 +105,31 @@ const loading = ref(false)
105
const showAlertDetails = ref(false)
106
const alertDetails = ref<AlertDetails | null>(null)
107
const alertDetailsInfo = computed(() => _omit(alertDetails.value, ["_source"]))
108
-const alertDetailsSource = computed(() => alertDetails.value?._source)
108
+const alertDetailsSource = computed(() => {
109
+ if (!alertDetails.value?._source) return undefined
110
+
111
+ const source = alertDetails.value._source
112
+ const priorityKeys = ["timestamp", "agent_name"] // Keys to show first
113
+ const endKeys = ["message"] // Keys to show last
114
+
115
+ // Separate priority keys, end keys, and other keys
116
+ const existingPriorityKeys = priorityKeys.filter(key => key in source)
117
+ const existingEndKeys = endKeys.filter(key => key in source)
118
+ const otherKeys = Object.keys(source)
119
+ .filter(key => !priorityKeys.includes(key) && !endKeys.includes(key))
120
+ .sort() // Sort alphabetically
121
+
122
+ // Combine: priority keys first, then sorted other keys, then end keys
123
+ const sortedKeys = [...existingPriorityKeys, ...otherKeys, ...existingEndKeys]
124
+
125
+ // Create new object with sorted keys
126
+ const sortedSource: Record<string, any> = {}
127
+ sortedKeys.forEach(key => {
128
+ sortedSource[key] = source[key]
129
+ })
130
+
131
+ return sortedSource
132
+})
133
134
watch(showAlertDetails, val => {
135
if (val && !alertDetails.value) {