PMM-12741 Add buttons & adjust templates page

percona · Feb 13, 2024 · 7560424 · 7560424
1 parent de169a3
commit 7560424
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 53 deletions.
diff --git a/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx b/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
@@ -47,13 +47,24 @@ export function MoreActionsRuleButtons({}: Props) {
   return (
     <>
       {(canCreateGrafanaRules || canCreateCloudRules) && (
+        <>
+        {/* @PERCONA */}
         <LinkButton
-          href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
-          icon="plus"
-          onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
-        >
-          New alert rule
-        </LinkButton>
+            href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
+            icon="plus"
+            onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+          >
+            New alert rule from template
+          </LinkButton>
+          <LinkButton
+            variant='secondary'
+            href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
+            icon="plus"
+            onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+          >
+            New alert rule
+          </LinkButton>
+        </>
       )}
 
       {!isEmpty(menuItems) && (

diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src/themes';
@@ -15,7 +15,17 @@ export const NoRulesSplash = () => {
     return (
       <div>
         <p>{"You haven't created any alert rules yet"}</p>
-        <Stack gap={1}>
+        <Stack gap={1} wrap='wrap'>
+          <div className={cx(styles.newRuleCard, styles.fullWidth)}>
+            <EmptyListCTA
+              title=""
+              buttonIcon="plus"
+              buttonLink={'alerting/new/alerting'}
+              buttonTitle="New alert rule from template"
+              onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+            />
+          </div>
+
           <div className={styles.newRuleCard}>
             <EmptyListCTA
               title=""
@@ -54,4 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
       height: 100%;
     }
   `,
+  fullWidth: css`
+    width: 100%;
+  `
 });
diff --git a/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts b/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts
@@ -42,7 +42,7 @@ export const Messages = {
     },
   },
   alertRuleTemplate: {
-    addAction: 'Add',
+    addAction: 'Add template',
     addSuccess: 'Alert rule template successfully added',
     addModal: {
       confirm: 'Add',

diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx
@@ -71,7 +71,6 @@ export const AlertRuleTemplate: FC = () => {
       {
         Header: nameColumn,
         accessor: 'summary',
-        width: '60%',
       },
       {
         Header: sourceColumn,
@@ -125,13 +124,7 @@ export const AlertRuleTemplate: FC = () => {
     <Page
       navModel={navModel}
       actions={
-        <Button
-          size="md"
-          icon="plus-square"
-          fill="text"
-          onClick={handleAddButton}
-          data-testid="alert-rule-template-add-modal-button"
-        >
+        <Button size="md" fill="text" onClick={handleAddButton} data-testid="alert-rule-template-add-modal-button">
           {Messages.alertRuleTemplate.addAction}
         </Button>
       }

diff --git a/.../components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts b/.../components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts
@@ -5,8 +5,8 @@ import { GrafanaTheme2 } from '@grafana/data';
 export const getStyles = ({ spacing }: GrafanaTheme2) => ({
   actionsWrapper: css`
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 10px
   `,
   button: css`
     margin-right: 0;

diff --git a/...erting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx b/...erting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx
@@ -1,8 +1,7 @@
 import { cx } from '@emotion/css';
 import React, { FC, useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
 
-import { IconButton, Tooltip, useStyles2 } from '@grafana/ui';
+import { IconButton, LinkButton, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { SourceDescription } from '../AlertRuleTemplate.types';
 import { DeleteRuleTemplateModal } from '../DeleteRuleTemplateModal/DeleteRuleTemplateModal';
@@ -23,41 +22,41 @@ export const AlertRuleTemplateActions: FC<AlertRuleTemplateActionsProps> = ({ te
   return (
     <div className={styles.actionsWrapper}>
       <Tooltip placement="top" content="Create alert rule from this template">
-        <Link
-          to={`/alerting/new?returnTo=%2Falerting%2Falert-rule-templates&template=${template.name}`}
-          className={styles.actionLink}
+        <LinkButton
+          icon="plus"
+          fill="text"
+          href={`/alerting/new?returnTo=%2Falerting%2Falert-rule-templates&template=${template.name}`}
+          data-testid="create-from-template-button"
         >
-          <IconButton
-            data-testid="create-from-template-button"
-            aria-label="Create from template"
-            name="plus"
-            size="lg"
-            className={styles.button}
-          />
-        </Link>
-      </Tooltip>
-      <Tooltip placement="top" content="Edit">
-        <IconButton
-          data-testid="edit-template-button"
-          aria-label="Edit template"
-          name="pen"
-          size="lg"
-          className={cx(styles.button, styles.editButton)}
-          disabled={isActionDisabled}
-          onClick={() => setEditModalVisible(true)}
-        />
-      </Tooltip>
-      <Tooltip placement="top" content="Delete">
-        <IconButton
-          data-testid="delete-template-button"
-          aria-label="Delete template"
-          name="times"
-          size="xl"
-          className={cx(styles.button)}
-          disabled={isActionDisabled}
-          onClick={() => setDeleteModalVisible(true)}
-        />
+          Create alert rule
+        </LinkButton>
       </Tooltip>
+      {!isActionDisabled && (
+        <>
+          <Tooltip placement="top" content="Edit">
+            <IconButton
+              data-testid="edit-template-button"
+              aria-label="Edit template"
+              name="pen"
+              size="lg"
+              className={cx(styles.button, styles.editButton)}
+              disabled={isActionDisabled}
+              onClick={() => setEditModalVisible(true)}
+            />
+          </Tooltip>
+          <Tooltip placement="top" content="Delete">
+            <IconButton
+              data-testid="delete-template-button"
+              aria-label="Delete template"
+              name="times"
+              size="xl"
+              className={cx(styles.button)}
+              disabled={isActionDisabled}
+              onClick={() => setDeleteModalVisible(true)}
+            />
+          </Tooltip>
+        </>
+      )}
       <EditAlertRuleTemplateModal
         yaml={yaml}
         name={name}