From f3f56141bf0d700b4e1039e1d6022bdadea421a7 Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Mon, 24 Nov 2025 10:57:13 +0200 Subject: [PATCH 1/4] PMM-14080: Lack of guidance on Fired Alerts to set up Alerting after install --- .../components/Alerts/Alerts.tsx | 9 +-- .../components/Alerts/AlertsEmptyState.tsx | 56 +++++++++++++++++++ 2 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx diff --git a/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx b/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx index 8a1bd2ecd8b1b..3762337395dee 100644 --- a/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx +++ b/public/app/percona/integrated-alerting/components/Alerts/Alerts.tsx @@ -6,7 +6,7 @@ import { Cell, Column, Row } from 'react-table'; import { OrgRole } from '@grafana/data'; import { config } from '@grafana/runtime'; -import { Icon, LinkButton, useStyles2 } from '@grafana/ui'; +import { LinkButton, useStyles2 } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import { useNavModel } from 'app/core/hooks/useNavModel'; import { alertmanagerApi } from 'app/features/alerting/unified/api/alertmanagerApi'; @@ -26,6 +26,7 @@ import { AlertDetails } from './AlertDetails/AlertDetails'; import { ACTIONS_COLUMN, DATA_INTERVAL, SILENCES_URL } from './Alerts.constants'; import { Messages as AlertMessages } from './Alerts.messages'; import { getStyles } from './Alerts.styles'; +import { AlertsEmptyState } from './AlertsEmptyState'; const { table: { columns }, @@ -170,11 +171,7 @@ export const Alerts: FC = () => { columns={columns} pendingRequest={amAlertsIsLoading} autoResetExpanded={false} - emptyMessage={ -

- No alerts detected -

- } + emptyMessage={} getCellProps={getCellProps} renderExpandedRow={renderSelectedSubRow} /> diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx new file mode 100644 index 0000000000000..b4d02416c594d --- /dev/null +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx @@ -0,0 +1,56 @@ +import { css } from '@emotion/css'; +import { FC } from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, TextLink, useStyles2 } from '@grafana/ui'; + +const getStyles = (theme: GrafanaTheme2) => ({ + container: css({ + textAlign: 'center', + maxWidth: '600px', + margin: '0 auto', + }), + heading: css({ + marginBottom: theme.spacing(2), + }), + paragraph: css({ + marginTop: theme.spacing(2), + fontSize: theme.typography.body.fontSize, + lineHeight: theme.typography.body.lineHeight, + color: theme.colors.text.secondary, + }), +}); + +export const AlertsEmptyState: FC = () => { + const styles = useStyles2(getStyles); + + return ( +
+

+ No alerts detected +

+

+ Use{' '} + + Alert rule templates + + , custom made by our database experts, for a faster start, and configure how you want to receive them at{' '} + + Alert rules + + . +

+

+ For more information please visit our{' '} + + Percona Alerting documentation page + + . +

+
+ ); +}; From 96dbe9102aefab46fb0091bd216d6fa8e0dbc1f7 Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Mon, 24 Nov 2025 11:17:26 +0200 Subject: [PATCH 2/4] PMM-14080: change text --- .../components/Alerts/AlertsEmptyState.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx index b4d02416c594d..35c72e2975d57 100644 --- a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx @@ -32,9 +32,9 @@ export const AlertsEmptyState: FC = () => {

Use{' '} - Alert rule templates - - , custom made by our database experts, for a faster start, and configure how you want to receive them at{' '} + Alert rule templates,{' '} + {' '} + custom made by our database experts, for a faster start, and configure how you want to receive them at{' '} Alert rules From 1295e6391d4dfa7e272399cbadcea115a6246169 Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Tue, 25 Nov 2025 12:43:41 +0200 Subject: [PATCH 3/4] PMM-14080: resolve comments from Matej --- .../Alerts/AlertsEmptyState.messages.ts | 9 +++++ .../Alerts/AlertsEmptyState.styles.ts | 22 +++++++++++ .../components/Alerts/AlertsEmptyState.tsx | 38 +++++-------------- 3 files changed, 40 insertions(+), 29 deletions(-) create mode 100644 public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts create mode 100644 public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts new file mode 100644 index 0000000000000..671a0ac54be61 --- /dev/null +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.messages.ts @@ -0,0 +1,9 @@ +export const Messages = { + heading: 'No alerts detected', + templateLink: 'Alert rule templates', + alertRulesLink: 'Alert rules', + firstParagraph: + 'custom made by our database experts, for a faster start, and configure how you want to receive them at', + secondParagraph: 'For more information please visit our', + documentationLink: 'Percona Alerting documentation page', +}; diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts new file mode 100644 index 0000000000000..af10d5f67e6e1 --- /dev/null +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts @@ -0,0 +1,22 @@ +import { css } from '@emotion/css'; + +import { GrafanaTheme2 } from '@grafana/data'; + +export const getStyles = (theme: GrafanaTheme2) => { + return { + container: css({ + textAlign: 'center', + maxWidth: '600px', + margin: '0 auto', + }), + heading: css({ + marginBottom: theme.spacing(2), + }), + paragraph: css({ + marginTop: theme.spacing(2), + fontSize: theme.typography.body.fontSize, + lineHeight: theme.typography.body.lineHeight, + color: theme.colors.text.secondary, + }), + }; +}; diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx index 35c72e2975d57..3839bc1bea4e2 100644 --- a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx @@ -1,25 +1,9 @@ -import { css } from '@emotion/css'; import { FC } from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; import { Icon, TextLink, useStyles2 } from '@grafana/ui'; -const getStyles = (theme: GrafanaTheme2) => ({ - container: css({ - textAlign: 'center', - maxWidth: '600px', - margin: '0 auto', - }), - heading: css({ - marginBottom: theme.spacing(2), - }), - paragraph: css({ - marginTop: theme.spacing(2), - fontSize: theme.typography.body.fontSize, - lineHeight: theme.typography.body.lineHeight, - color: theme.colors.text.secondary, - }), -}); +import { Messages } from './AlertsEmptyState.messages'; +import { getStyles } from './AlertsEmptyState.styles'; export const AlertsEmptyState: FC = () => { const styles = useStyles2(getStyles); @@ -27,27 +11,23 @@ export const AlertsEmptyState: FC = () => { return (

- No alerts detected + {Messages.heading}

Use{' '} - Alert rule templates,{' '} + {Messages.templateLink},{' '} {' '} - custom made by our database experts, for a faster start, and configure how you want to receive them at{' '} + {Messages.firstParagraph}{' '} - Alert rules + {Messages.alertRulesLink} .

- For more information please visit our{' '} - - Percona Alerting documentation page + {Messages.secondParagraph}{' '} + + {Messages.documentationLink} .

From a4572e533ed19f9b63253abe4411523b8ed8179c Mon Sep 17 00:00:00 2001 From: dmitri-saricev-3pillargloball Date: Tue, 25 Nov 2025 17:24:07 +0200 Subject: [PATCH 4/4] PMM-14080: change AlertsEmptyState --- .../Alerts/AlertsEmptyState.styles.ts | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts index af10d5f67e6e1..dd2e8f1818304 100644 --- a/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts +++ b/public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.styles.ts @@ -2,21 +2,19 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -export const getStyles = (theme: GrafanaTheme2) => { - return { - container: css({ - textAlign: 'center', - maxWidth: '600px', - margin: '0 auto', - }), - heading: css({ - marginBottom: theme.spacing(2), - }), - paragraph: css({ - marginTop: theme.spacing(2), - fontSize: theme.typography.body.fontSize, - lineHeight: theme.typography.body.lineHeight, - color: theme.colors.text.secondary, - }), - }; -}; +export const getStyles = (theme: GrafanaTheme2) => ({ + container: css({ + textAlign: 'center', + maxWidth: '600px', + margin: '0 auto', + }), + heading: css({ + marginBottom: theme.spacing(2), + }), + paragraph: css({ + marginTop: theme.spacing(2), + fontSize: theme.typography.body.fontSize, + lineHeight: theme.typography.body.lineHeight, + color: theme.colors.text.secondary, + }), +});