quick_setup: add check_types autocompleter

Co-authored by Moritz Kirschner

CMK-20036

Change-Id: I3bc04dccc489e4c642916d92b3954d3c88fb152d

cmk/gui/wato/pages/notifications/quick_setup.py

@@ -81,7 +81,6 @@
 from cmk.gui.wato.pages.notifications.quick_setup_types import (
     NotificationQuickSetupSpec,
 )
-from cmk.gui.watolib.check_mk_automations import get_check_information_cached
 from cmk.gui.watolib.configuration_entity.type_defs import ConfigEntityType
 from cmk.gui.watolib.groups_io import (
     load_host_group_information,
@@ -374,14 +373,6 @@ def _get_contact_group_users() -> list[tuple[UserId, str]]:
     )
 
 
-def _get_check_types() -> list[tuple[str, str]]:
-    return [
-        (str(cn), (str(cn) + " - " + c["title"])[:60])
-        for (cn, c) in get_check_information_cached().items()
-        if not cn.is_management_name()
-    ]
-
-
 def _get_service_levels_single_choice() -> Sequence[SingleChoiceElementExtended]:
     return [
         SingleChoiceElementExtended(
@@ -777,21 +768,17 @@ def _components() -> Sequence[Widget]:
                                         layout=MultipleChoiceExtendedLayout.dual_list,
                                     ),
                                 ),
-                                # TODO disabled until we found a solution to load on demand or faster
-                                # "check_type_plugin": DictElement(
-                                #    parameter_form=MultipleChoiceExtended(
-                                #        title=Title("Match check types"),
-                                #        elements=[
-                                #            MultipleChoiceElement(
-                                #                name=f"_{name}",  # TODO: Should probably use a formspec that doesn't limit the name to a python identifier.
-                                #                title=Title("%s") % title,
-                                #            )
-                                #            for name, title in _get_check_types()
-                                #        ],
-                                #        show_toggle_all=True,
-                                #        layout=MultipleChoiceExtendedLayout.dual_list,
-                                #    ),
-                                # ),
+                                "check_type_plugin": DictElement(
+                                    parameter_form=MultipleChoiceExtended(
+                                        title=Title("Match check types"),
+                                        elements=Autocompleter(
+                                            fetch_method="check_types_autocompleter",
+                                            data={"ident": "check_types", "params": {}},
+                                        ),
+                                        show_toggle_all=True,
+                                        layout=MultipleChoiceExtendedLayout.dual_list,
+                                    ),
+                                ),
                             },
                         ),
                     ),

packages/cmk-frontend-vue/src/form/components/forms/FormDualListChoice.vue

@@ -4,15 +4,18 @@ This file is part of Checkmk (https://checkmk.com). It is subject to the terms a
 conditions defined in the file COPYING, which is part of this source code package.
 -->
 <script setup lang="ts">
+import { type Ref } from 'vue'
 import { useValidation, type ValidationMessages } from '../utils/validation'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import CmkIcon from '@/components/CmkIcon.vue'
 import FormValidation from '@/form/components/FormValidation.vue'
 import type {
   DualListChoice,
   MultipleChoiceElement
 } from '@/form/components/vue_formspec_components'
 
 import { useId } from '@/form/utils'
+import { fetchData } from '../utils/autocompleter'
 
 const props = defineProps<{
   spec: DualListChoice
@@ -26,6 +29,23 @@ const [validation, value] = useValidation<string[]>(
   () => props.backendValidation
 )
 
+const localElements = ref<{ name: string; title: string }[]>(props.spec.elements)
+const loading: Ref<boolean> = ref(false) // Loading flag
+
+onMounted(() => {
+  if (!props.spec.autocompleter) {
+    return
+  }
+  loading.value = true
+  fetchData<{ choices: [string, string][] }>('', props.spec.autocompleter.data).then((result) => {
+    localElements.value = result['choices'].map(([id, title]) => ({
+      name: id,
+      title: title.length > 60 ? `${title.substring(0, 57)}...` : title
+    }))
+    loading.value = false
+  })
+})
+
 const searchInactive = ref('')
 const searchActive = ref('')
 
@@ -38,8 +58,7 @@ const items = computed(() => {
   const matchesSearch = (element: MultipleChoiceElement, search: string) => {
     return !search || element.title.toLowerCase().includes(search.toLowerCase())
   }
-
-  props.spec.elements.forEach((element) => {
+  localElements.value.forEach((element) => {
     if (value.value.includes(element.name)) {
       if (matchesSearch(element, searchActive.value)) {
         active.push(element)
@@ -50,7 +69,6 @@ const items = computed(() => {
       }
     }
   })
-
   return { active: active, inactive: inactive }
 })
 
@@ -99,17 +117,17 @@ function toggleAll(allActive: boolean) {
 
 const selectStyle = computed(() => {
   let maxLength = 1
-  props.spec.elements.forEach((element) => {
+  localElements.value.forEach((element) => {
     if (element.title.length > maxLength) {
       maxLength = element.title.length
     }
   })
 
   return {
     height:
-      props.spec.elements.length < 10
+      localElements.value.length < 10
         ? '200px'
-        : `${Math.min(props.spec.elements.length * 15, 400)}px`,
+        : `${Math.min(localElements.value.length * 15, 400)}px`,
     width: `${Math.max(20, Math.min(100, maxLength * 0.7))}em`,
     marginTop: '3px'
   }
@@ -140,14 +158,18 @@ const handleDoubleClickToRemoveItem = (elementName: string) => {
 
 <template>
   <div class="container">
+    <div v-if="loading" class="form-duallist-choice__loading">
+      <CmkIcon name="load-graph" variant="inline" size="xlarge" />
+      <span>{{ props.spec.i18n.autocompleter_loading }}</span>
+    </div>
     <table class="vue multiple_choice">
       <thead>
         <tr class="table-header">
           <td class="head">
             <div class="selected-info">
               <div class="title">{{ props.spec.i18n.available_options }}</div>
               <div>
-                {{ availableSelected.length }}/{{ props.spec.elements.length }}
+                {{ availableSelected.length }}/{{ localElements.length }}
                 {{ props.spec.i18n.selected }}
               </div>
             </div>
@@ -174,7 +196,7 @@ const handleDoubleClickToRemoveItem = (elementName: string) => {
             <div class="selected-info">
               <div class="title">{{ props.spec.i18n.selected_options }}</div>
               <div>
-                {{ activeSelected.length }}/{{ props.spec.elements.length }}
+                {{ activeSelected.length }}/{{ localElements.length }}
                 {{ props.spec.i18n.selected }}
               </div>
             </div>
@@ -276,6 +298,11 @@ const handleDoubleClickToRemoveItem = (elementName: string) => {
 </template>
 
 <style scoped>
+.form-duallist-choice__loading {
+  display: flex;
+  align-items: center;
+  padding-top: 12px;
+}
 .container {
   margin-right: 10px;
 }

packages/cmk-frontend-vue/src/form/components/utils/autocompleter.ts

@@ -13,7 +13,7 @@ interface AjaxResponse {
   severity: string
 }
 
-async function fetchData<OutputType>(
+export async function fetchData<OutputType>(
   value: unknown,
   data: Record<string, unknown>
 ): Promise<OutputType> {