Panel.example.yaml

# Action not found
# Target: ensure the widget correctly handles missing action definition within "actions".
# Expected behavior: clicking the panel triggers an error notification ("The widget definition does not include an action ...").
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-no-action
  namespace: krateo-system
spec:
  widgetData:
    title: Missing Action Example (on click)
    clickActionId: click
    actions: {}
    items: []
  resourcesRefs:
    items: []
---
# Basic panel with title only
# Target: verify correct rendering of title text and base layout.
# Expected behavior: panel displays the title “Overview” with default style and no interactive behavior.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-basic
  namespace: krateo-system
spec:
  widgetData:
    title: Overview
    items: []
    actions: {}
  resourcesRefs:
    items: []
---
# Panel with icon and title
# Target: confirm correct alignment and rendering of icon with title.
# Expected behavior: icon appears to the left of the title with correct spacing and tooltip.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-with-icon
  namespace: krateo-system
spec:
  widgetData:
    title: System Status
    icon:
      name: fa-server
      color: green
    tooltip: Displays the current system status.
    items: []
    actions: {}
  resourcesRefs:
    items: []
---
# Panel with header sections
# Target: ensure proper rendering of left and right header text beneath the main title.
# Expected behavior: left and right aligned text display under the header section.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-with-header
  namespace: krateo-system
spec:
  widgetData:
    title: Node Information
    headerLeft: 'Last updated: 2025-06-10'
    headerRight: 'Status: Healthy'
    items: []
    actions: {}
  resourcesRefs:
    items: []
---
# Panel with tags and footer items
# Target: verify correct layout for tags and footer widgets.
# Expected behavior: panel footer shows tag list and embedded widgets from footer resource references.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-footer-tags
  namespace: krateo-system
spec:
  widgetData:
    title: Application Metrics
    tags:
      - frontend
      - production
      - v1.2.3
    footer:
      - resourceRefId: example-button-with-icon
    items: []
    actions: {}
  resourcesRefs:
    items:
      - id: example-button-with-icon
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-button-with-icon
        namespace: krateo-system
        resource: buttons
        verb: GET
---
# Panel with multiple child widgets
# Target: ensure correct rendering of multiple resource items in the body.
# Expected behavior: both child widgets are rendered sequentially inside the panel body.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-multiple-items
  namespace: krateo-system
spec:
  widgetData:
    title: Dashboard Summary
    items:
      - resourceRefId: example-piechart-full-fill
      - resourceRefId: example-table-basic
    actions: {}
  resourcesRefs:
    items:
      - id: example-piechart-full-fill
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-piechart-full-fill
        namespace: krateo-system
        resource: piecharts
        verb: GET
      - id: example-table-basic
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-table-basic
        namespace: krateo-system
        resource: tables
        verb: GET
---
# navigate action - Navigation to another page using `path`
# Target: trigger navigation to a static route (`/barchart`) when the panel is clicked.
# Expected behavior: clicking the panel redirects the user to `/barchart`.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-navigate-path
  namespace: krateo-system
spec:
  widgetData:
    title: Navigate to BarChart
    clickActionId: navigate-to-barchart
    items: []
    actions:
      navigate:
        - id: navigate-to-barchart
          path: /barchart
          type: navigate
  resourcesRefs:
    items: []
---
# navigate action - Navigation to another resource using `resourceRefId`
# Target: navigate to another dashboard resource identified by its ref ID.
# Expected behavior: clicking the panel triggers navigation to the target resource page.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-navigate-resource
  namespace: krateo-system
spec:
  widgetData:
    title: Navigate to Dashboard
    clickActionId: navigate-dashboard
    items: []
    actions:
      navigate:
        - id: navigate-dashboard
          type: navigate
          resourceRefId: dashboard-page
  resourcesRefs:
    items:
      - id: dashboard-page
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: dashboard-page
        namespace: krateo-system
        resource: pages
        verb: GET
---
# navigate action - Navigation to another resource using `resourceRefId` with URL path extension
# Target: navigate to another resource identified by its ref ID, setting a custom URL path prefix.
# Expected behavior: clicking the panel triggers navigation to the target resource page. The specified URL path prefix is displayed in the URL.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-navigate-resource-url-path-extension
  namespace: krateo-system
spec:
  widgetData:
    title: Navigate to Dashboard
    clickActionId: navigate-dashboard
    items: []
    actions:
      navigate:
        - id: navigate-dashboard
          type: navigate
          resourceRefId: dashboard-page
          resourceURLPathExtension: panel-dashboard
  resourcesRefs:
    items:
      - id: dashboard-page
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: dashboard-page
        namespace: krateo-system
        resource: pages
        verb: GET
---
# navigate action - Navigation with confirmation prompt (`requireConfirmation: true`)
# Target: prevent accidental navigation by requiring explicit user confirmation.
# Expected behavior: before navigating, a confirmation dialog is shown; navigation proceeds only upon confirmation.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-navigate-confirm
  namespace: krateo-system
spec:
  widgetData:
    title: Navigate to Reports
    clickActionId: navigate-reports
    items: []
    actions:
      navigate:
        - id: navigate-reports
          path: /reports
          type: navigate
          requireConfirmation: true
  resourcesRefs:
    items: []
---
# navigate action - Navigation with loading indicator
# Target: provide visual feedback while navigation is being processed.
# Expected behavior: panel shows loading state during navigation.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-navigate-loading
  namespace: krateo-system
spec:
  widgetData:
    title: Navigate to BarChart with loading
    clickActionId: navigate-barchart
    items: []
    actions:
      navigate:
        - id: navigate-barchart
          path: /barchart
          type: navigate
          loading:
            display: true
  resourcesRefs:
    items: []
---
# openDrawer - default size
# Target: verify that a drawer opens using a defined resource reference.
# Expected behavior: drawer opens at default width and displays resource contents.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-drawer-default
  namespace: krateo-system
spec:
  widgetData:
    title: Open Drawer Default
    clickActionId: open-drawer-default
    items: []
    actions:
      openDrawer:
        - id: open-drawer-default
          type: openDrawer
          resourceRefId: example-markdown-basic
          size: default
          title: Default Drawer Example
  resourcesRefs:
    items:
      - id: example-markdown-basic
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-markdown-basic
        namespace: krateo-system
        resource: markdowns
        verb: GET
---
# openDrawer - large size
# Target: verify that a drawer opens in large mode.
# Expected behavior: a large-size drawer opens with the defined title and resource content.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-drawer-large
  namespace: krateo-system
spec:
  widgetData:
    title: Open Drawer Large
    clickActionId: open-drawer-large
    items: []
    actions:
      openDrawer:
        - id: open-drawer-large
          type: openDrawer
          resourceRefId: example-markdown-basic
          size: large
          title: Large Drawer Example
          loading:
            display: false
  resourcesRefs:
    items:
      - id: example-markdown-basic
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-markdown-basic
        namespace: krateo-system
        resource: markdowns
        verb: GET
---
# openModal - default size
# Target: ensure that a modal dialog can be opened and displays the referenced resource.
# Expected behavior: modal appears at the default width and loads the resource correctly.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-modal-default
  namespace: krateo-system
spec:
  widgetData:
    title: Open Modal Default
    clickActionId: open-modal-default
    items: []
    actions:
      openModal:
        - id: open-modal-default
          type: openModal
          resourceRefId: example-yamlviewer-simple-json
          title: Default Modal Example
          loading:
            display: true
          size: default
  resourcesRefs:
    items:
      - id: example-yamlviewer-simple-json
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-yamlviewer-simple-json
        namespace: krateo-system
        resource: yamlviewers
        verb: GET
---
# openModal - large size with confirmation
# Target: ensure that the modal opens only after user confirmation when `requireConfirmation` is enabled.
# Expected behavior: confirmation prompt appears; modal opens after acceptance.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-modal-large
  namespace: krateo-system
spec:
  widgetData:
    title: Open Modal Large Confirm
    clickActionId: open-modal-large-confirm
    items: []
    actions:
      openModal:
        - id: open-modal-large-confirm
          type: openModal
          resourceRefId: example-yamlviewer-simple-json
          title: Confirmed Large Modal Example
          size: large
          requireConfirmation: true
          loading:
            display: false
  resourcesRefs:
    items:
      - id: example-yamlviewer-simple-json
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-yamlviewer-simple-json
        namespace: krateo-system
        resource: yamlviewers
        verb: GET
---
# openModal - custom width
# Target: confirm that a modal can be displayed with a custom width setting.
# Expected behavior: modal expands to the defined custom width and shows the referenced resource.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-modal-custom
  namespace: krateo-system
spec:
  widgetData:
    title: Open Modal Custom Width
    clickActionId: open-modal-custom
    items: []
    actions:
      openModal:
        - id: open-modal-custom
          type: openModal
          resourceRefId: example-yamlviewer-simple-json
          title: Custom Width Modal Example
          size: custom
          customWidth: 30%
          loading:
            display: false
  resourcesRefs:
    items:
      - id: example-yamlviewer-simple-json
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-yamlviewer-simple-json
        namespace: krateo-system
        resource: yamlviewers
        verb: GET
---
# openModal - fullscreen mode
# Target: verify that a modal can occupy the full viewport width when configured in fullscreen mode.
# Expected behavior: modal expands to fill the entire screen and displays its resource.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-open-modal-fullscreen
  namespace: krateo-system
spec:
  widgetData:
    title: Open Modal Fullscreen
    clickActionId: open-modal-fullscreen
    items: []
    actions:
      openModal:
        - id: open-modal-fullscreen
          type: openModal
          resourceRefId: example-yamlviewer-simple-json
          title: Fullscreen Modal Example
          size: fullscreen
          loading:
            display: false
  resourcesRefs:
    items:
      - id: example-yamlviewer-simple-json
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-yamlviewer-simple-json
        namespace: krateo-system
        resource: yamlviewers
        verb: GET
---
# externalNavigate — static URL, opens in new tab
# Target: clicking the panel opens an external URL in a new browser tab.
# Expected behavior: window.open is called with the static URL and target "_blank".
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-external-navigate-static
  namespace: krateo-system
spec:
  widgetData:
    title: Open Grafana
    clickActionId: open-grafana-panel
    items: []
    actions:
      externalNavigate:
        - id: open-grafana-panel
          type: externalNavigate
          url: https://grafana.example.com/dashboards
          target: _blank
  resourcesRefs:
    items: []
---
# externalNavigate — JQ-interpolated URL using widget metadata
# Target: the URL is built at click time using the widget's own metadata.
# JQ context: { json: customPayload, widget } — widget metadata is at .widget.metadata.
# Expected behavior: the JQ expression resolves the widget name and opens the constructed URL.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-external-navigate-jq
  namespace: krateo-system
spec:
  widgetData:
    title: View in Argo CD
    clickActionId: open-argocd-panel
    items: []
    actions:
      externalNavigate:
        - id: open-argocd-panel
          type: externalNavigate
          url: ${ "https://argocd.example.com/applications/" + .widget.metadata.name }
          target: _blank
  resourcesRefs:
    items: []
---
# refresh — companion table used to visually confirm that refresh actions re-fetch data
kind: Table
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-refresh-companion-table
  namespace: krateo-system
spec:
  widgetData:
    actions: {}
    allowedResources: []
    columns:
      - valueKey: name
        title: Name
      - valueKey: status
        title: Status
    data:
      - - valueKey: name
          kind: jsonSchemaType
          type: string
          stringValue: "service-alpha"
        - valueKey: status
          kind: jsonSchemaType
          type: string
          stringValue: "Running"
      - - valueKey: name
          kind: jsonSchemaType
          type: string
          stringValue: "service-beta"
        - valueKey: status
          kind: jsonSchemaType
          type: string
          stringValue: "Pending"
  resourcesRefs:
    items: []
---
# refresh — invalidate all cached queries on panel click
# Target: clicking the panel triggers a full TanStack Query cache invalidation.
# Expected behavior: all widgets on the page are re-fetched; the companion table below
# visibly enters a loading state before rendering again.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-refresh-all
  namespace: krateo-system
spec:
  widgetData:
    title: Refresh All Data
    clickActionId: refresh-all-panel
    items: []
    actions:
      refresh:
        - id: refresh-all-panel
          type: refresh
          loading:
            display: true
  resourcesRefs:
    items: []
---
# refresh — scoped invalidation via resourcesRefsIds
# Target: clicking the panel only re-fetches the companion table referenced by resourcesRefsIds.
# Expected behavior: only the companion table reloads; other widgets stay cached.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-refresh-by-resource-ref
  namespace: krateo-system
spec:
  widgetData:
    title: Refresh Companion Table
    clickActionId: refresh-by-resource-ref-panel
    items: []
    actions:
      refresh:
        - id: refresh-by-resource-ref-panel
          type: refresh
          resourcesRefsIds:
            - companion-table
          loading:
            display: true
  resourcesRefs:
    items:
      - id: companion-table
        apiVersion: widgets.templates.krateo.io/v1beta1
        name: example-panel-refresh-companion-table
        namespace: krateo-system
        resource: tables
        verb: GET
---
# refresh — kind-level invalidation via widgetKinds
# Target: clicking the panel re-fetches all Table widgets on the page.
# Expected behavior: the companion table below reloads; Panel and Button widgets stay cached.
kind: Panel
apiVersion: widgets.templates.krateo.io/v1beta1
metadata:
  name: example-panel-refresh-by-kind
  namespace: krateo-system
spec:
  widgetData:
    title: Refresh All Tables
    clickActionId: refresh-by-kind-panel
    items: []
    actions:
      refresh:
        - id: refresh-by-kind-panel
          type: refresh
          widgetKinds:
            - Table
          loading:
            display: true
  resourcesRefs:
    items: []