change: [M3-9742] - Add dedicated Alerts tab on Linode details page

packages/manager/.changeset/pr-12013-changed-1744375580329.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Added
+---
+
+Dedicated `Alerts` tab on Linode details page ([#12013](https://github.com/linode/manager/pull/12013))

packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts

@@ -129,7 +129,6 @@ describe('delete linode', () => {
       // Check elements in setting tab
       cy.findByText('Linode Label').should('be.visible');
       cy.findByText('Reset Root Password').should('be.visible');
-      cy.findByText('Notification Thresholds').should('be.visible');
       cy.findByText('Shutdown Watchdog').should('be.visible');
       cy.findByText('Delete Linode').should('be.visible');
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeAlerts/LinodeAlerts.tsx

@@ -0,0 +1,20 @@
+import { useGrants } from '@linode/queries';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { LinodeSettingsAlertsPanel } from '../LinodeSettings/LinodeSettingsAlertsPanel';
+
+const LinodeAlerts = () => {
+  const { linodeId } = useParams<{ linodeId: string }>();
+  const id = Number(linodeId);
+  const { data: grants } = useGrants();
+
+  const isReadOnly =
+    grants !== undefined &&
+    grants?.linode.find((grant) => grant.id === id)?.permissions ===
+      'read_only';
+
+  return <LinodeSettingsAlertsPanel isReadOnly={isReadOnly} linodeId={id} />;
+};
+
+export default LinodeAlerts;

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettings.tsx

@@ -1,9 +1,7 @@
+import { useGrants } from '@linode/queries';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { useGrants } from '@linode/queries';
-
-import { LinodeSettingsAlertsPanel } from './LinodeSettingsAlertsPanel';
 import { LinodeSettingsDeletePanel } from './LinodeSettingsDeletePanel';
 import { LinodeSettingsLabelPanel } from './LinodeSettingsLabelPanel';
 import { LinodeSettingsPasswordPanel } from './LinodeSettingsPasswordPanel';
@@ -24,7 +22,6 @@ const LinodeSettings = () => {
     <>
       <LinodeSettingsLabelPanel isReadOnly={isReadOnly} linodeId={id} />
       <LinodeSettingsPasswordPanel isReadOnly={isReadOnly} linodeId={id} />
-      <LinodeSettingsAlertsPanel isReadOnly={isReadOnly} linodeId={id} />
       <LinodeWatchdogPanel isReadOnly={isReadOnly} linodeId={id} />
       <LinodeSettingsDeletePanel isReadOnly={isReadOnly} linodeId={id} />
     </>

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx

@@ -76,8 +76,7 @@ export const LinodeSettingsAlertsPanel = (props: Props) => {
 
   const alertSections = [
     {
-      copy:
-        'Average CPU usage over 2 hours exceeding this value triggers this alert.',
+      copy: 'Average CPU usage over 2 hours exceeding this value triggers this alert.',
       endAdornment: '%',
       error: hasErrorFor('alerts.cpu'),
       hidden: isBareMetalInstance,
@@ -103,8 +102,7 @@ export const LinodeSettingsAlertsPanel = (props: Props) => {
       value: formik.values.cpu,
     },
     {
-      copy:
-        'Average Disk I/O ops/sec over 2 hours exceeding this value triggers this alert.',
+      copy: 'Average Disk I/O ops/sec over 2 hours exceeding this value triggers this alert.',
       endAdornment: 'IOPS',
       error: hasErrorFor('alerts.io'),
       hidden: isBareMetalInstance,
@@ -225,7 +223,7 @@ export const LinodeSettingsAlertsPanel = (props: Props) => {
     <Accordion
       actions={renderExpansionActions}
       defaultExpanded
-      heading="Notification Thresholds"
+      heading="Alerts"
     >
       {generalError && <Notice variant="error">{generalError}</Notice>}
       {alertSections.map((p, idx) => (

packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx

@@ -33,6 +33,7 @@ const LinodeBackup = React.lazy(() => import('./LinodeBackup/LinodeBackups'));
 const LinodeActivity = React.lazy(
   () => import('./LinodeActivity/LinodeActivity')
 );
+const LinodeAlerts = React.lazy(() => import('./LinodeAlerts/LinodeAlerts'));
 const LinodeSettings = React.lazy(
   () => import('./LinodeSettings/LinodeSettings')
 );
@@ -80,6 +81,10 @@ const LinodesDetailNavigation = () => {
       routeName: `${url}/activity`,
       title: 'Activity Feed',
     },
+    {
+      routeName: `${url}/alerts`,
+      title: 'Alerts',
+    },
     {
       routeName: `${url}/settings`,
       title: 'Settings',
@@ -165,6 +170,9 @@ const LinodesDetailNavigation = () => {
               <SafeTabPanel index={idx++}>
                 <LinodeActivity />
               </SafeTabPanel>
+              <SafeTabPanel index={idx++}>
+                <LinodeAlerts />
+              </SafeTabPanel>
               <SafeTabPanel index={idx++}>
                 <LinodeSettings />
               </SafeTabPanel>