Skip to content

Conversation

@shelldandy
Copy link
Contributor

@shelldandy shelldandy commented Jul 18, 2025

This PR adds plugin extension points to DataSource configuration components, enabling plugins to register custom actions and status links in the datasource configuration interface. The implementation focuses on providing entry points for drilldown apps and healthcheck interfaces.

image image

Introduces two new extension points: DataSourceConfigActions and DataSourceConfigStatus
Updates EditDataSourceActions and DataSourceTestingStatus components to consume plugin extensions

Overview

This specification defines the addition of plugin extension points to DataSource configuration components, allowing plugins to register custom actions and status links in the datasource configuration interface.

tl;dr We want to add more entry points for the drilldown apps, healthcheck to drilldown interface is added

Only limited to the following plugins:

'grafana-lokiexplore-app',
  'grafana-exploretraces-app',
  'grafana-metricsdrilldown-app',
  'grafana-pyroscope-app',
  'grafana-monitoring-app',
  'grafana-troubleshooting-app',

Supports: grafana/metrics-drilldown#424

…ents

- Add DataSourceConfigActions and DataSourceConfigStatus extension points
- Add PluginExtensionDataSourceConfigActionsContext and PluginExtensionDataSourceConfigStatusContext types
- Update EditDataSourceActions.tsx with plugin extension support and allowlist filtering
- Update DataSourceTestingStatus.tsx with dual extension point support (new + backward compatible)
- Create getDataSourceExtensionConfigs.tsx with example core extensions
- Update getCoreExtensionConfigurations.ts to include datasource extensions
- Implement grafana-owned plugin allowlist for security and quality control
- Support context-aware extensions based on datasource type and testing status
- Maintain backward compatibility with existing DataSourceConfigErrorStatus extension point
- Add proper TypeScript types and export them in index.ts

This enables grafana-owned plugins to provide contextual actions and status-specific integrations
within the datasource configuration workflow while maintaining security through plugin filtering.
- Add comprehensive implementation status section with completed features
- Document critical lessons learned during implementation:
  * Translation limitations in extension configurations
  * Plugin security through allowlist filtering
  * Extension registration timing constraints
  * TypeScript context type patterns
- Update implementation checklist with actual completion status
- Add detailed next steps and recommendations
- Include plugin development guidelines (do's and don'ts)
- Document architectural insights and patterns discovered
- Transform specs from theoretical design to practical implementation guide

This update serves as both historical record and developer guide for future
plugin extension work in Grafana.
- Add EditDataSourceActions.test.tsx with 12 tests covering:
  * Core Grafana actions functionality and permissions
  * Plugin extension rendering and interaction
  * Plugin allowlist filtering and security
  * Context passing and URL generation

- Add getDataSourceExtensionConfigs.test.tsx with 14 tests covering:
  * Core extension configurations for both extension points
  * Context filtering logic (datasource type, severity)
  * Error handling and graceful failures
  * Extension structure validation and type safety

Total: 26 tests passing, providing comprehensive coverage of the
DataSourceConfigActions and DataSourceConfigStatus extension points
implemented in previous commits.
- Mark unit testing phase as complete (26 tests added)
- Add comprehensive Test Implementation section documenting:
  * Test file details and coverage areas
  * Testing challenges and solutions discovered
  * Performance metrics and execution strategy
  * Command examples for running tests
- Update Success Metrics with concrete testing validation
- Update Next Steps to reflect testing completion
- Document new test files in Files Modified section

The plugin extensions implementation now has complete unit test
coverage for both DataSourceConfigActions and DataSourceConfigStatus
extension points with 26 passing tests.
@shelldandy shelldandy changed the title feat: datasource feat: Plugin Extensions for DataSource Configuration Components Jul 18, 2025
@shelldandy shelldandy self-assigned this Jul 18, 2025
The troubleshooting link extension was using an invalid path format
'/docs/troubleshooting/datasources' which caused console.error during
test execution. Updated to proper Grafana core extension path format
'/a/grafana/docs/troubleshooting/datasources' to comply with plugin
extension validation rules.
- Fix incorrect data-testid expectations to use proper e2e selectors
- Add contextSrv mock for hasAccessToExplore() dependency
- Create proper plugin links mock handling different extension points
- Update plugin link tests to use allowed plugin IDs
- Fix test logic to match actual component behavior for status/error links
- Add test coverage for non-allowed plugin filtering

All 10 tests now pass successfully.
…eTestingStatus test

- Replace any[] with PluginExtensionLink[] for statusLinks and errorLinks parameters
- Replace any with UsePluginLinksOptions for setPluginLinksHook callback parameter
- Add proper imports for PluginExtensionLink and UsePluginLinksOptions
- Improve type safety and IntelliSense support in tests
@shelldandy shelldandy requested a review from Copilot July 23, 2025 16:39
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds plugin extension points to DataSource configuration components, enabling plugins to register custom actions and status links in the datasource configuration interface. The implementation focuses on providing entry points for drilldown apps and healthcheck interfaces.

  • Introduces two new extension points: DataSourceConfigActions and DataSourceConfigStatus
  • Updates EditDataSourceActions and DataSourceTestingStatus components to consume plugin extensions
  • Includes comprehensive test coverage and example configurations for the new extension functionality

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
getCoreExtensionConfigurations.ts Integrates datasource extensions into core extension configuration
getDataSourceExtensionConfigs.tsx Provides example plugin extension configurations for datasource actions and status
getDataSourceExtensionConfigs.test.tsx Comprehensive test suite covering extension configuration behavior
EditDataSourceActions.tsx Adds plugin extension support with allowlist filtering for datasource actions
EditDataSourceActions.test.tsx Test coverage for plugin extension integration in datasource actions
DataSourceTestingStatus.tsx Extends status component to support both general and error-specific plugin links
DataSourceTestingStatus.test.tsx Updates existing tests and adds coverage for new plugin extension functionality
pluginExtensions.ts Defines new extension points and context types for datasource configuration
index.ts Exports new context types for external plugin consumption

@shelldandy shelldandy requested review from a team and leventebalogh July 23, 2025 16:56
@shelldandy shelldandy marked this pull request as ready for review July 23, 2025 17:02
@shelldandy shelldandy requested review from a team as code owners July 23, 2025 17:02
@shelldandy shelldandy requested review from joshhunt and removed request for a team July 23, 2025 17:02
@leventebalogh leventebalogh dismissed their stale review August 1, 2025 11:49

I think it's almost there! 👍 Left two small comments.

@tolzhabayev
Copy link
Contributor

tolzhabayev commented Aug 1, 2025

I would recommend adding it to Explore Data button -> drop down similar to how Explore -> Add button behaves. Instead of adding a new button.

SCR-20250801-mukx-2

…plugin contributions to datasource configuration pages
…ilable

- When hasActions is empty: shows normal Explore data and Build dashboard buttons
- When hasActions is not empty: converts Explore data to dropdown with angle-down icon
- First dropdown item: 'Open in Explore View'
- Following items: extension links
- Build dashboard button remains unchanged
- Maintains existing tracking functionality and internationalization
- Update tests to work with new Explore data dropdown that includes extensions
- Replace references to 'Extensions' button with 'Explore data' dropdown
- Add test for 'Open in Explore View' menu item in dropdown
- Verify correct behavior when extensions are present vs absent
- All 13 tests now passing
- Add test to verify explore action href when extensions are present
- Ensure both dropdown and direct link behaviors are tested
- Complete test coverage for new dropdown implementation
- Move extension links from inline definition to props for better reusability
- Add proper TypeScript support for PluginExtensionLink types
- Improve component architecture by separating concerns
- Add extensionLinks styling to getStyles function for consistency
- Support both real extension links and custom link rendering in success messages

This improves the component's flexibility while maintaining type safety.
Copy link
Contributor

@jackw jackw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚀

@shelldandy shelldandy enabled auto-merge (squash) August 6, 2025 16:16
@shelldandy shelldandy disabled auto-merge August 6, 2025 17:46
@shelldandy shelldandy enabled auto-merge (squash) August 7, 2025 14:28
@shelldandy shelldandy merged commit 696b1bc into main Aug 7, 2025
129 of 131 checks passed
@shelldandy shelldandy deleted the feat/healthcheck-2-gmd branch August 7, 2025 15:19
@shelldandy shelldandy modified the milestones: 12.1.x, 12.0.x, 12.2.x Aug 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants