From 7caa30bc2ece852c0e2d40f762280db82dcde1ed Mon Sep 17 00:00:00 2001 From: Konrad Lalik Date: Mon, 22 Apr 2024 13:42:11 +0200 Subject: [PATCH] Alerting: Add plugins extension point to alerting home page (#85725) * Add basic extension point to alerting home page * Remove home page scenes app. Improve plugins styles * Remove unused code * Fix home page rendering when no plugins registered * Add row-based integrations component * Add missing margins * Rollback the Box component changes * Remove unused import --- .../src/types/pluginExtensions.ts | 1 + .../alerting/unified/home/GettingStarted.tsx | 29 +----- .../features/alerting/unified/home/Home.tsx | 96 ++++++++----------- .../unified/home/PluginIntegrations.tsx | 45 +++++++++ 4 files changed, 87 insertions(+), 84 deletions(-) create mode 100644 public/app/features/alerting/unified/home/PluginIntegrations.tsx diff --git a/packages/grafana-data/src/types/pluginExtensions.ts b/packages/grafana-data/src/types/pluginExtensions.ts index e7a26223c34..85a123754f8 100644 --- a/packages/grafana-data/src/types/pluginExtensions.ts +++ b/packages/grafana-data/src/types/pluginExtensions.ts @@ -116,6 +116,7 @@ export type PluginExtensionEventHelpers = { // Extension Points available in core Grafana export enum PluginExtensionPoints { AlertInstanceAction = 'grafana/alerting/instance/action', + AlertingHomePage = 'grafana/alerting/home', CommandPalette = 'grafana/commandpalette/action', DashboardPanelMenu = 'grafana/dashboard/panel/menu', DataSourceConfig = 'grafana/datasources/config', diff --git a/public/app/features/alerting/unified/home/GettingStarted.tsx b/public/app/features/alerting/unified/home/GettingStarted.tsx index 6415801a058..1087fda355c 100644 --- a/public/app/features/alerting/unified/home/GettingStarted.tsx +++ b/public/app/features/alerting/unified/home/GettingStarted.tsx @@ -3,23 +3,8 @@ import React from 'react'; import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; -import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, SceneReactObject } from '@grafana/scenes'; import { useStyles2, useTheme2, Stack, Text, TextLink } from '@grafana/ui'; -export const getOverviewScene = () => { - return new EmbeddedScene({ - body: new SceneFlexLayout({ - children: [ - new SceneFlexItem({ - body: new SceneReactObject({ - component: GettingStarted, - }), - }), - ], - }), - }); -}; - export default function GettingStarted() { const theme = useTheme2(); const styles = useStyles2(getWelcomePageStyles); @@ -110,9 +95,7 @@ export function WelcomeHeader({ className }: { className?: string }) { const styles = useStyles2(getWelcomeHeaderStyles); return ( -
-
Learn about problems in your systems moments after they occur
- + -
+ ); } const getWelcomeHeaderStyles = (theme: GrafanaTheme2) => ({ - welcomeHeaderWrapper: css({ - color: theme.colors.text.primary, - }), - subtitle: css({ - color: theme.colors.text.secondary, - paddingBottom: theme.spacing(2), - }), ctaContainer: css({ padding: theme.spacing(2), display: 'flex', @@ -195,6 +171,7 @@ function WelcomeCTABox({ title, description, href, hrefText }: WelcomeCTABoxProp const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({ container: css({ + color: theme.colors.text.primary, flex: 1, minWidth: '240px', display: 'grid', diff --git a/public/app/features/alerting/unified/home/Home.tsx b/public/app/features/alerting/unified/home/Home.tsx index c5656587529..d036a8e9f3a 100644 --- a/public/app/features/alerting/unified/home/Home.tsx +++ b/public/app/features/alerting/unified/home/Home.tsx @@ -1,74 +1,54 @@ import React, { useState } from 'react'; import { config } from '@grafana/runtime'; -import { SceneApp, SceneAppPage } from '@grafana/scenes'; -import { usePageNav } from 'app/core/components/Page/usePageNav'; -import { PluginPageContext, PluginPageContextType } from 'app/features/plugins/components/PluginPageContext'; +import { Box, Stack, Tab, TabContent, TabsBar } from '@grafana/ui'; +import { AlertingPageWrapper } from '../components/AlertingPageWrapper'; import { isLocalDevEnv, isOpenSourceEdition } from '../utils/misc'; -import { getOverviewScene, WelcomeHeader } from './GettingStarted'; +import GettingStarted, { WelcomeHeader } from './GettingStarted'; import { getInsightsScenes } from './Insights'; - -let homeApp: SceneApp | undefined; - -export function getHomeApp(insightsEnabled: boolean) { - if (homeApp) { - return homeApp; - } - - if (insightsEnabled) { - homeApp = new SceneApp({ - pages: [ - new SceneAppPage({ - title: 'Alerting', - subTitle: , - url: '/alerting', - hideFromBreadcrumbs: true, - tabs: [ - new SceneAppPage({ - title: 'Insights', - url: '/alerting/home/insights', - getScene: getInsightsScenes, - }), - new SceneAppPage({ - title: 'Get started', - url: '/alerting/home/overview', - getScene: getOverviewScene, - }), - ], - }), - ], - }); - } else { - homeApp = new SceneApp({ - pages: [ - new SceneAppPage({ - title: 'Alerting', - subTitle: , - url: '/alerting', - hideFromBreadcrumbs: true, - getScene: getOverviewScene, - }), - ], - }); - } - - return homeApp; -} +import { PluginIntegrations } from './PluginIntegrations'; export default function Home() { const insightsEnabled = (!isOpenSourceEdition() || isLocalDevEnv()) && Boolean(config.featureToggles.alertingInsights); - const appScene = getHomeApp(insightsEnabled); - - const sectionNav = usePageNav('alerting')!; - const [pluginContext] = useState({ sectionNav }); + const [activeTab, setActiveTab] = useState<'insights' | 'overview'>(insightsEnabled ? 'insights' : 'overview'); + const insightsScene = getInsightsScenes(); return ( - - - + + + + + + + + {insightsEnabled && ( + setActiveTab('insights')} + /> + )} + setActiveTab('overview')} + /> + + + {activeTab === 'insights' && } + {activeTab === 'overview' && } + + + ); } diff --git a/public/app/features/alerting/unified/home/PluginIntegrations.tsx b/public/app/features/alerting/unified/home/PluginIntegrations.tsx new file mode 100644 index 00000000000..a65b784211b --- /dev/null +++ b/public/app/features/alerting/unified/home/PluginIntegrations.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/css'; +import React from 'react'; + +import { PluginExtensionPoints } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data/'; +import { getPluginComponentExtensions } from '@grafana/runtime'; +import { Stack, Text } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui/'; + +export function PluginIntegrations() { + const styles = useStyles2(getStyles); + + const { extensions } = getPluginComponentExtensions({ + extensionPointId: PluginExtensionPoints.AlertingHomePage, + limitPerPlugin: 1, + }); + + if (extensions.length === 0) { + return null; + } + + return ( + + + Speed up your alerts creation now by using one of our tailored apps + + + {extensions.map((extension) => ( +
+ +
+ ))} + + + ); +} + +const getStyles = (theme: GrafanaTheme2) => ({ + box: css({ + padding: theme.spacing(2), + flex: 1, + backgroundColor: theme.colors.background.secondary, + maxWidth: '460px', + }), +});