Greptile Overview

Greptile Summary

This PR enables PromQL support for custom chart panels by modifying chart type validation, query type detection, and data structure handling across the dashboard panel system.

Key Changes

• Chart Selection: Added custom_chart to the list of allowed chart types when in PromQL mode
• Query Type Detection: Modified QueryTypeSelector to detect the actual queryType for custom charts instead of defaulting to custom-sql, enabling proper PromQL mode initialization
• Query Preservation: When switching to PromQL mode, custom chart queries are now preserved instead of being cleared (non-custom charts still get reset to line charts)
• Data Validation: Added custom_chart to the list of allowed chart types in panel validation logic
• Data Structure Handling: Added conditional data structure checking in convertPanelData.ts to handle both PromQL (data[0].result) and SQL (data[0]) data formats

Issue Found

• Missing optional chaining on PromQL data check in convertPanelData.ts:128 could cause runtime error if data[0] is undefined

Confidence Score: 4/5

• Safe to merge after fixing the optional chaining issue in convertPanelData.ts
• The implementation is sound and properly handles the addition of PromQL support for custom charts. The changes are well-targeted and preserve backwards compatibility. However, there's a missing optional chaining operator that could cause a runtime error in edge cases, which should be fixed before merging.
• web/src/utils/dashboard/convertPanelData.ts - missing optional chaining on data[0].result check

Important Files Changed

File Analysis

Sequence Diagram

sequenceDiagram
    participant User
    participant QueryTypeSelector
    participant ChartSelection
    participant PanelData
    participant convertPanelData
    participant CustomChart
    
    User->>QueryTypeSelector: Select PromQL mode
    QueryTypeSelector->>PanelData: Set queryType = "promql"
    QueryTypeSelector->>PanelData: Set customQuery = true
    
    alt Panel type is custom_chart
        QueryTypeSelector->>PanelData: Preserve existing query
    else Panel type is not custom_chart
        QueryTypeSelector->>PanelData: Clear query, set type = "line"
    end
    
    User->>ChartSelection: Select chart type
    Note over ChartSelection: custom_chart now allowed in PromQL mode
    ChartSelection->>PanelData: Update chart type
    
    User->>User: Execute query
    User->>convertPanelData: Process data
    
    alt queryType is promql
        convertPanelData->>convertPanelData: Check data[0].result.length
        convertPanelData->>CustomChart: Pass PromQL data structure
    else queryType is sql
        convertPanelData->>convertPanelData: Check data[0]?.length
        convertPanelData->>CustomChart: Pass SQL data structure
    end
    
    CustomChart->>User: Render custom chart

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}