feat(monitor): explain a service with AI

The service slide-in now offers "Explain with AI" as an ai variant
button. It hands the shown service to the AiExplainButtonApp, which
the cloud edition mounts on the page and which owns the conversation.

The feature ships in the cloud edition only: monitor code keeps a
no-op AiExplain that the cloud registration fills in, so every other
edition renders no button.

CMK-37516

Change-Id: I90a418bb53f93cb44f98e54acc212928ab10c66b

Author: otAAAh

cmk/gui/monitor/services/_ai_explain.py

@@ -0,0 +1,36 @@
+#!/usr/bin/env python3
+# Copyright (C) 2026 Checkmk GmbH - License: GNU General Public License v2
+# This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
+# conditions defined in the file COPYING, which is part of this source code package.
+from collections.abc import Callable
+
+
+class AiExplain:
+    """Entry point for the cloud edition's "Explain with AI" feature.
+
+    The service slide-in offers the explanation, but the feature itself ships in
+    the cloud edition only. The cloud registration supplies the two callables
+    below; every other edition keeps the no-op default and renders no button.
+    """
+
+    def __init__(self) -> None:
+        self._is_enabled: Callable[[], bool] = lambda: False
+        self._render_listener: Callable[[], None] = lambda: None
+
+    def register(
+        self,
+        is_enabled: Callable[[], bool],
+        render_listener: Callable[[], None],
+    ) -> None:
+        self._is_enabled = is_enabled
+        self._render_listener = render_listener
+
+    def is_enabled(self) -> bool:
+        return self._is_enabled()
+
+    def render_listener(self) -> None:
+        if self._is_enabled():
+            self._render_listener()
+
+
+ai_explain = AiExplain()

cmk/gui/monitor/services/_pages/_monitor_host_services.py

@@ -14,6 +14,7 @@
 from cmk.gui.logged_in import user
 from cmk.gui.main_menu import main_menu_registry
 from cmk.gui.monitor.command import MonitorCommands
+from cmk.gui.monitor.services._ai_explain import ai_explain
 from cmk.gui.page_menu import PageMenu
 from cmk.gui.pages import Page, PageContext
 from cmk.gui.pagetypes import PagetypeTopics
@@ -72,6 +73,7 @@ def page(self, ctx: PageContext) -> None:
                     may_ignore_hard_limit=user.may("general.ignore_hard_limit"),
                     host=hostname,
                     site=site_id,
+                    ai_explain=ai_explain.is_enabled(),
                     actions=self._permitted_actions(),
                     legacy_view_button=MonitoringPageLinkButton(
                         url=makeuri_contextless(
@@ -85,6 +87,8 @@ def page(self, ctx: PageContext) -> None:
             ),
         )
 
+        ai_explain.render_listener()
+
         html.footer()
 
 

packages/cmk-frontend-vue/src/monitoring/host-services/HostServicesApp.vue

@@ -151,7 +151,12 @@ function onActionPerformed(result: ActionFeedbackResult): void {
         <HostServicesRow :row="row" :table-row="tableRow" @open="openSlideIn" />
       </template>
     </MonitoringSplitPane>
-    <ServiceSlideIn :service="slideInService" :host="host" @close="closeSlideIn" />
+    <ServiceSlideIn
+      :service="slideInService"
+      :host="host"
+      :ai-explain="props.ai_explain ?? false"
+      @close="closeSlideIn"
+    />
   </div>
 </template>
 

packages/cmk-frontend-vue/src/monitoring/host-services/components/ServiceSlideIn.vue

@@ -12,15 +12,21 @@ import { HostServicesApi } from '@/monitoring/host-services/api/services'
 import type { HostRef, HostServiceEntry, ServiceOverview } from '@/monitoring/shared/api/types'
 import type { CellAction } from '@/monitoring/shared/components/cell/ActionButtons.vue'
 
+import ServiceAiExplainButton from './slide-in/ServiceAiExplainButton.vue'
 import ServiceOverviewSkeleton from './slide-in/ServiceOverviewSkeleton.vue'
 import ServiceOverviewTab from './slide-in/ServiceOverviewTab.vue'
 import ServiceSlideInHeader from './slide-in/ServiceSlideInHeader.vue'
 
-const props = defineProps<{
-  /** The service to detail. `null` keeps the slide-in closed. */
-  service: HostServiceEntry | null
-  host: HostRef
-}>()
+const props = withDefaults(
+  defineProps<{
+    /** The service to detail. `null` keeps the slide-in closed. */
+    service: HostServiceEntry | null
+    host: HostRef
+    /** Offer the cloud edition's "Explain with AI" action. */
+    aiExplain?: boolean
+  }>(),
+  { aiExplain: false }
+)
 
 const emit = defineEmits<{
   (event: 'close'): void
@@ -114,6 +120,7 @@ const tabs = computed<SlideInTab[]>(() => {
         :modes="overview?.modes ?? []"
         :actions="inlineActions"
       />
+      <ServiceAiExplainButton v-if="aiExplain && overview" :overview="overview" />
     </template>
   </CmkSlideInTabbed>
 </template>

packages/cmk-frontend-vue/src/monitoring/host-services/components/slide-in/ServiceAiExplainButton.vue

@@ -0,0 +1,54 @@
+<!--
+Copyright (C) 2026 Checkmk GmbH - License: GNU General Public License v2
+This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
+conditions defined in the file COPYING, which is part of this source code package.
+-->
+<script setup lang="ts">
+import type { ExplainThisIssueData } from 'cmk-shared-typing/typescript/ai_button'
+import CmkButton from 'cmk-ui-library/components/CmkButton'
+import usei18n from 'cmk-ui-library/lib/i18n'
+
+import type { ServiceOverview } from '@/monitoring/shared/api/types'
+
+const { _t } = usei18n()
+
+const props = defineProps<{
+  overview: ServiceOverview
+}>()
+
+const SERVICE_STATES: Record<ServiceOverview['state'], ExplainThisIssueData['service_state']> = {
+  OK: 'OK',
+  WARN: 'Warning',
+  CRIT: 'Critical',
+  UNKNOWN: 'Unknown'
+}
+
+const HOST_STATES: Record<ServiceOverview['host_state'], ExplainThisIssueData['host_state']> = {
+  UP: 'Up',
+  DOWN: 'Down',
+  UNREACHABLE: 'Unreachable'
+}
+
+function explainThis(): void {
+  const detail: ExplainThisIssueData = {
+    host_name: props.overview.host_name,
+    service_name: props.overview.name,
+    service_state: SERVICE_STATES[props.overview.state],
+    host_state: HOST_STATES[props.overview.host_state]
+  }
+  document.dispatchEvent(new CustomEvent('cmk-ai-explain-button', { detail }))
+}
+
+defineExpose({ explainThis })
+</script>
+
+<template>
+  <CmkButton
+    variant="ai"
+    :icon="{ name: 'sparkle' }"
+    data-testid="service-ai-explain-button"
+    @click="explainThis"
+  >
+    {{ _t('Explain with AI') }}
+  </CmkButton>
+</template>

packages/cmk-frontend-vue/tests/monitoring/host-services/components/ServiceSlideIn.test.ts

@@ -5,6 +5,7 @@
  */
 import userEvent from '@testing-library/user-event'
 import { render, screen } from '@testing-library/vue'
+import type { ExplainThisIssueData } from 'cmk-shared-typing/typescript/ai_button'
 import client from 'cmk-ui-library/lib/rest-api-client/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -195,6 +196,45 @@ describe('ServiceSlideIn', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('offers no AI explanation outside the cloud edition', async () => {
+    render(ServiceSlideIn, { props: { service: makeService(), host: HOST } })
+    await screen.findByText('Service details')
+
+    expect(screen.queryByTestId('service-ai-explain-button')).not.toBeInTheDocument()
+  })
+
+  it('asks the AI app to explain the shown service', async () => {
+    const explainRequests: ExplainThisIssueData[] = []
+    const listener = (event: Event) => {
+      explainRequests.push((event as CustomEvent<ExplainThisIssueData>).detail)
+    }
+    document.addEventListener('cmk-ai-explain-button', listener)
+    render(ServiceSlideIn, {
+      props: { service: makeService(), host: HOST, aiExplain: true }
+    })
+
+    await userEvent.click(await screen.findByTestId('service-ai-explain-button'))
+    document.removeEventListener('cmk-ai-explain-button', listener)
+
+    expect(explainRequests).toEqual([
+      {
+        host_name: 'web-server-01',
+        service_name: 'CPU load',
+        service_state: 'OK',
+        host_state: 'Up'
+      }
+    ])
+  })
+
+  it('waits for the overview before offering the AI explanation', () => {
+    vi.spyOn(client, 'GET').mockReturnValue(new Promise(() => {}) as never)
+    render(ServiceSlideIn, {
+      props: { service: makeService(), host: HOST, aiExplain: true }
+    })
+
+    expect(screen.queryByTestId('service-ai-explain-button')).not.toBeInTheDocument()
+  })
+
   it('emits close when the close button is used', async () => {
     const { emitted } = render(ServiceSlideIn, { props: { service: makeService(), host: HOST } })
     await screen.findByText('Service details')

packages/cmk-shared-typing/source/monitoring/host_services.json

@@ -10,6 +10,10 @@
     },
     "site": {
       "type": "string"
+    },
+    "ai_explain": {
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["host", "site"]