Add hosts field to alert detail table

app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql

@@ -10,6 +10,7 @@ fragment AlertDetailItem on AlertManagementAlert {
   description
   updatedAt
   endedAt
+  hosts
   details
   runbook
   todos {

app/assets/javascripts/issue_show/components/incidents/graphql/queries/get_alert.graphql

@@ -13,6 +13,7 @@ query getAlert($iid: String!, $fullPath: ID!) {
         service
         description
         endedAt
+        hosts
         details
       }
     }

app/assets/javascripts/vue_shared/components/alert_details_table.vue

@@ -23,6 +23,7 @@ const allowedFields = [
   'endedAt',
   'details',
   'environment',
+  'hosts',
 ];
 
 const isAllowed = fieldName => allowedFields.includes(fieldName);

changelogs/unreleased/tr-add-detail-fields-to-table.yml

+---
+title: Add hosts field to alert detail table
+merge_request: 43087
+author:
+type: changed

spec/frontend/vue_shared/components/alert_details_table_spec.js

@@ -14,6 +14,7 @@ const mockAlert = {
   assignees: { nodes: [] },
   notes: { nodes: [] },
   todos: { nodes: [] },
+  hosts: ['host1', 'host2'],
   __typename: 'AlertManagementAlert',
 };
 
@@ -83,6 +84,7 @@ describe('AlertDetails', () => {
         expect(findTableField(fields, 'Severity').exists()).toBe(true);
         expect(findTableField(fields, 'Status').exists()).toBe(true);
         expect(findTableField(fields, 'Environment').exists()).toBe(true);
+        expect(findTableField(fields, 'Hosts').exists()).toBe(true);
       });
 
       it('should not show disallowed alert fields', () => {