Skip to main content
Several Pastures pages include “Diagnose →” links that open the AI drawer with a pre-filled query, giving users one-click access to AI diagnostics for a specific issue.

​
Pages with Ask AI buttons

PageTriggerExample pre-filled query
AdvisoriesEach advisory card”Diagnose: etcd cluster has only 1 member”
Cluster IntelligenceEach detected issue”Diagnose: Longhorn replica count degraded”
MonitoringEach active alert”Diagnose: Node memory pressure on worker-03”
Harvester VMsVM error states”Diagnose: VM stuck in Starting state”

​
How it works

When a user clicks a “Diagnose →” link, the page dispatches a CustomEvent on the window object: 
window.dispatchEvent(
  new CustomEvent('pastures:drawer:open', {
    detail: { query: 'Diagnose: etcd cluster has only 1 member' },
  })
);
The AI drawer listens for this event. When received, it:
  1. Opens the drawer (if not already open)
  2. Pre-fills the input textarea with detail.query
  3. Automatically submits the query
This means the user sees the drawer open and immediately begin generating a diagnosis — no manual typing required.

​
Integration pattern

To add a “Diagnose →” button to any Pastures page, dispatch the event with the relevant diagnostic text: 
<template>
  <button @click="diagnose">Diagnose →</button>
</template>

<script setup lang="ts">
function diagnose() {
  window.dispatchEvent(
    new CustomEvent('pastures:drawer:open', {
      detail: { query: `Diagnose: ${issue.title}` },
    })
  );
}
</script>
The event-based pattern means any page — including custom pages added by contributors — can integrate with Pastures AI without importing drawer components directly.

​
Behavior details

  • If the drawer is already open, a new event replaces the current input and submits
  • The pre-filled query appears in the user’s message history as if they typed it
  • Context awareness still applies — if the user is on the Advisories page, page-specific suggestions remain available after the conversation