PMM-14080: Lack of guidance on Fired Alerts to set up Alerting after install

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={
-              <h1>
-                <Icon name="check-circle" size="xxl" /> No alerts detected
-              </h1>
-            }
+            emptyMessage={<AlertsEmptyState />}
             getCellProps={getCellProps}
             renderExpandedRow={renderSelectedSubRow}
           />

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',
+};

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,
+    }),
+  };
+};

public/app/percona/integrated-alerting/components/Alerts/AlertsEmptyState.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import { Icon, TextLink, useStyles2 } from '@grafana/ui';
+
+import { Messages } from './AlertsEmptyState.messages';
+import { getStyles } from './AlertsEmptyState.styles';
+
+export const AlertsEmptyState: FC = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.heading}>
+        <Icon name="check-circle" size="xxl" /> {Messages.heading}
+      </h1>
+      <p className={styles.paragraph}>
+        Use{' '}
+        <TextLink href="/alerting/alert-rule-templates" inline>
+          {Messages.templateLink},{' '}
+        </TextLink>{' '}
+        {Messages.firstParagraph}{' '}
+        <TextLink href="/alerting/list" inline>
+          {Messages.alertRulesLink}
+        </TextLink>
+        .
+      </p>
+      <p className={styles.paragraph}>
+        {Messages.secondParagraph}{' '}
+        <TextLink href="https://per.co.na/alerting" external inline>
+          {Messages.documentationLink}
+        </TextLink>
+        .
+      </p>
+    </div>
+  );
+};