Show runbook in alert detail view

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -324,6 +324,12 @@ export default {
             </div>
             <div class="gl-pl-2" data-testid="service">{{ alert.service }}</div>
           </div>
+          <div v-if="alert.runbook" class="gl-my-5 gl-display-flex">
+            <div class="bold gl-w-13 gl-text-right gl-pr-3">
+              {{ s__('AlertManagement|Runbook') }}:
+            </div>
+            <div class="gl-pl-2" data-testid="runbook">{{ alert.runbook }}</div>
+          </div>
           <template>
             <div v-if="alert.notes.nodes" class="issuable-discussion py-5">
               <ul class="notes main-notes-list timeline">

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

@@ -11,6 +11,7 @@ fragment AlertDetailItem on AlertManagementAlert {
   updatedAt
   endedAt
   details
+  runbook
   todos {
     nodes {
       id

changelogs/unreleased/sy-surface-runbook-in-alert.yml

+---
+title: Show runbook for alert in detail view
+merge_request: 39477
+author:
+type: added

locale/gitlab.pot

@@ -2174,6 +2174,9 @@ msgstr ""
 msgid "AlertManagement|Resolved"
 msgstr ""
 
+msgid "AlertManagement|Runbook"
+msgstr ""
+
 msgid "AlertManagement|Service"
 msgstr ""
 

spec/frontend/alert_management/components/alert_details_spec.js

@@ -118,6 +118,8 @@ describe('AlertDetails', () => {
         ${'monitoringTool'} | ${undefined}    | ${false}
         ${'service'}        | ${'Prometheus'} | ${true}
         ${'service'}        | ${undefined}    | ${false}
+        ${'runbook'}        | ${undefined}    | ${false}
+        ${'runbook'}        | ${'run.com'}    | ${true}
       `(`$desc`, ({ field, data, isShown }) => {
         beforeEach(() => {
           mountComponent({ data: { alert: { ...mockAlert, [field]: data } } });