diff --git a/packages/grafana-data/src/index.ts b/packages/grafana-data/src/index.ts index 79414124e0b..52ea12a2bfe 100644 --- a/packages/grafana-data/src/index.ts +++ b/packages/grafana-data/src/index.ts @@ -568,6 +568,7 @@ export type { FeatureToggles } from './types/featureToggles.gen'; export { PluginExtensionTypes, PluginExtensionPoints, + PluginExtensionExposedComponents, type PluginExtension, type PluginExtensionLink, type PluginExtensionComponent, @@ -588,6 +589,7 @@ export { type PluginExtensionAddedLinkConfig, type PluginExtensionAddedFunctionConfig, type PluginExtensionResourceAttributesContext, + type CentralAlertHistorySceneV1Props, } from './types/pluginExtensions'; export { type ScopeDashboardBindingSpec, diff --git a/packages/grafana-data/src/types/pluginExtensions.ts b/packages/grafana-data/src/types/pluginExtensions.ts index 788fd7b3135..ec0a2271b18 100644 --- a/packages/grafana-data/src/types/pluginExtensions.ts +++ b/packages/grafana-data/src/types/pluginExtensions.ts @@ -208,6 +208,11 @@ export enum PluginExtensionPoints { ExtensionSidebar = 'grafana/extension-sidebar/v0-alpha', } +// Extension Points available in plugins +export enum PluginExtensionExposedComponents { + CentralAlertHistorySceneV1 = 'grafana/central-alert-history-scene/v1', +} + export type PluginExtensionPanelContext = { pluginId: string; id: number; @@ -220,6 +225,12 @@ export type PluginExtensionPanelContext = { data?: PanelData; }; +export type CentralAlertHistorySceneV1Props = { + defaultLabelsFilter?: string; + defaultTimeRange?: { from: string; to: string }; + hideFilters?: boolean; +}; + export type PluginExtensionQueryEditorRowAdaptiveTelemetryV1Context = { /** An ordered list of lower-case [a-z]+ string identifiers to provide context clues of where this component is being embedded and how we might want to consider displaying it */ contextHints?: string[]; diff --git a/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx b/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx index 298073a7699..393a2a6ca97 100644 --- a/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx +++ b/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistoryScene.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { useEffect, useMemo } from 'react'; -import { GrafanaTheme2, VariableHide } from '@grafana/data'; +import { CentralAlertHistorySceneV1Props, GrafanaTheme2, VariableHide } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { CustomVariable, @@ -58,7 +58,14 @@ export const STATE_FILTER_FROM = 'STATE_FILTER_FROM'; * Both share time range and filter variable from the parent scene. */ -export const CentralAlertHistoryScene = () => { +export const CentralAlertHistoryScene = ({ + defaultLabelsFilter, + defaultTimeRange = { + from: 'now-1h', + to: 'now', + }, + hideFilters, +}: CentralAlertHistorySceneV1Props = {}) => { //track the loading of the central alert state history useEffect(() => { @@ -73,6 +80,7 @@ export const CentralAlertHistoryScene = () => { const labelsFilterVariable = new TextBoxVariable({ name: LABELS_FILTER, label: t('alerting.central-alert-history-scene.scene.labels-filter-variable.label.labels', 'Labels: '), + ...(defaultLabelsFilter && { value: defaultLabelsFilter }), }); //custom variable for filtering by the current state @@ -100,25 +108,24 @@ export const CentralAlertHistoryScene = () => { }); return new EmbeddedScene({ - controls: [ - new SceneReactObject({ - component: LabelFilter, - }), - new SceneReactObject({ - component: FilterInfo, - }), - new VariableValueSelectors({}), - new ClearFilterButtonScenesObject({}), - new SceneControlsSpacer(), - new SceneTimePicker({}), - new SceneRefreshPicker({}), - ], + controls: hideFilters + ? undefined + : [ + new SceneReactObject({ + component: LabelFilter, + }), + new SceneReactObject({ + component: FilterInfo, + }), + new VariableValueSelectors({}), + new ClearFilterButtonScenesObject({}), + new SceneControlsSpacer(), + new SceneTimePicker({}), + new SceneRefreshPicker({}), + ], // use default time range as from 1 hour ago to now, as the limit of the history api is 5000 events, // and using a wider time range might lead to showing gaps in the events list and the chart. - $timeRange: new SceneTimeRange({ - from: 'now-1h', - to: 'now', - }), + $timeRange: new SceneTimeRange(defaultTimeRange), $variables: new SceneVariableSet({ variables: [labelsFilterVariable, transitionsFromFilterVariable, transitionsToFilterVariable], }), @@ -132,7 +139,7 @@ export const CentralAlertHistoryScene = () => { ], }), }); - }, []); + }, [defaultLabelsFilter, defaultTimeRange, hideFilters]); // we need to call this to sync the url with the scene state const isUrlSyncInitialized = useUrlSync(scene); @@ -297,3 +304,5 @@ const getStyles = (theme: GrafanaTheme2) => { }), }; }; + +export default CentralAlertHistoryScene; diff --git a/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistorySceneExposedComponent.tsx b/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistorySceneExposedComponent.tsx new file mode 100644 index 00000000000..e948e8e3c03 --- /dev/null +++ b/public/app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistorySceneExposedComponent.tsx @@ -0,0 +1,13 @@ +import { Suspense, lazy } from 'react'; + +import { CentralAlertHistorySceneV1Props } from '@grafana/data'; + +const CentralAlertHistoryScene = lazy(() => import('./CentralAlertHistoryScene')); + +const CentralAlertHistorySceneExposedComponent = (props: CentralAlertHistorySceneV1Props) => ( + + + +); + +export default CentralAlertHistorySceneExposedComponent; diff --git a/public/app/features/plugins/extensions/registry/setup.ts b/public/app/features/plugins/extensions/registry/setup.ts index 91b7badc4eb..c4057e22c4b 100644 --- a/public/app/features/plugins/extensions/registry/setup.ts +++ b/public/app/features/plugins/extensions/registry/setup.ts @@ -1,3 +1,6 @@ +import { PluginExtensionExposedComponents } from '@grafana/data'; +import CentralAlertHistorySceneExposedComponent from 'app/features/alerting/unified/components/rules/central-state-history/CentralAlertHistorySceneExposedComponent'; + import { getCoreExtensionConfigurations } from '../getCoreExtensionConfigurations'; import { AddedComponentsRegistry } from './AddedComponentsRegistry'; @@ -17,8 +20,21 @@ export const pluginExtensionRegistries: PluginExtensionRegistries = { addedFunctionsRegistry, }; -// Registering core extensions +// Registering core extension links addedLinksRegistry.register({ pluginId: 'grafana', configs: getCoreExtensionConfigurations(), }); + +// Registering core exposed components +exposedComponentsRegistry.register({ + pluginId: 'grafana', + configs: [ + { + id: PluginExtensionExposedComponents.CentralAlertHistorySceneV1, + title: 'Central alert history scene', + description: 'Central alert history scene', + component: CentralAlertHistorySceneExposedComponent, + }, + ], +});