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.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 (
+    <div className={styles.container}>
+      <h1 className={styles.heading}>
+        <Icon name="check-circle" size="xxl" /> No alerts detected
+      </h1>
+      <p className={styles.paragraph}>
+        Use{' '}
+        <TextLink href="/alerting/alert-rule-templates" inline>
+          Alert rule templates,{' '}
+        </TextLink>{' '}
+        custom made by our database experts, for a faster start, and configure how you want to receive them at{' '}
+        <TextLink href="/alerting/list" inline>
+          Alert rules
+        </TextLink>
+        .
+      </p>
+      <p className={styles.paragraph}>
+        For more information please visit our{' '}
+        <TextLink
+          href="https://docs.percona.com/percona-monitoring-and-management/get-started/alerting.html"
+          external
+          inline
+        >
+          Percona Alerting documentation page
+        </TextLink>
+        .
+      </p>
+    </div>
+  );
+};