poc: [M3-9996, M3-10048] - Assigning alert definitions (beta) to a Linode during creation

packages/api-v4/.changeset/pr-12248-upcoming-features-1748955611165.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Beta ACLP alerts property to the `CreateLinodeRequest` type ([#12248](https://github.com/linode/manager/pull/12248))

packages/api-v4/src/cloudpulse/types.ts

@@ -349,3 +349,8 @@ export interface DeleteAlertPayload {
   alertId: number;
   serviceType: string;
 }
+
+export interface CloudPulseAlertsPayload {
+  system: number[];
+  user: number[];
+}

packages/api-v4/src/linodes/types.ts

@@ -1,3 +1,4 @@
+import type { CloudPulseAlertsPayload } from '../cloudpulse/types';
 import type { IPAddress, IPRange } from '../networking/types';
 import type { LinodePlacementGroupPayload } from '../placement-groups/types';
 import type { Region, RegionSite } from '../regions';
@@ -537,6 +538,10 @@ export interface CreateLinodePlacementGroupPayload {
 }
 
 export interface CreateLinodeRequest {
+  /**
+   * Beta Aclp alerts
+   */
+  alerts?: CloudPulseAlertsPayload | null;
   /**
    * A list of public SSH keys that will be automatically appended to the root user’s
    * `~/.ssh/authorized_keys`file when deploying from an Image.

packages/manager/.changeset/pr-12248-upcoming-features-1748955382171.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Assigning alert definitions to a Linode during creation ([#12248](https://github.com/linode/manager/pull/12248))

packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertInformationActionTable.tsx

@@ -21,7 +21,12 @@ import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { AlertConfirmationDialog } from '../AlertsLanding/AlertConfirmationDialog';
 import { AlertInformationActionRow } from './AlertInformationActionRow';
 
-import type { Alert, APIError, EntityAlertUpdatePayload } from '@linode/api-v4';
+import type {
+  Alert,
+  APIError,
+  CloudPulseAlertsPayload,
+  EntityAlertUpdatePayload,
+} from '@linode/api-v4';
 
 export interface AlertInformationActionTableProps {
   /**
@@ -36,19 +41,28 @@ export interface AlertInformationActionTableProps {
 
   /**
    * Id of the selected entity
+   * Only use in edit flow
    */
-  entityId: string;
+  entityId?: string;
 
   /**
    * Name of the selected entity
+   * Only use in edit flow
    */
-  entityName: string;
+  entityName?: string;
 
   /**
    * Error received from API
    */
   error?: APIError[] | null;
 
+  /**
+   * Called when an alert is toggled on or off.
+   * Only use in create flow.
+   * @param payload enabled alerts ids
+   */
+  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
+
   /**
    * Column name by which columns will be ordered by default
    */
@@ -67,10 +81,37 @@ export interface TableColumnHeader {
   label: string;
 }
 
+export interface AlertRowPropsOptions {
+  /**
+   * Enabled alerts payload
+   */
+  enabledAlerts: CloudPulseAlertsPayload;
+
+  /**
+   * Id of the entity
+   * Only use in edit flow.
+   */
+  entityId?: string;
+
+  /**
+   * Callback function to handle alert toggle
+   * Only use in create flow.
+   */
+  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
+}
+
 export const AlertInformationActionTable = (
   props: AlertInformationActionTableProps
 ) => {
-  const { alerts, columns, entityId, entityName, error, orderByColumn } = props;
+  const {
+    alerts,
+    columns,
+    entityId,
+    entityName,
+    error,
+    orderByColumn,
+    onToggleAlert,
+  } = props;
 
   const _error = error
     ? getAPIErrorOrDefault(error, 'Error while fetching the alerts')
@@ -79,16 +120,43 @@ export const AlertInformationActionTable = (
   const [selectedAlert, setSelectedAlert] = React.useState<Alert>({} as Alert);
   const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false);
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [enabledAlerts, setEnabledAlerts] =
+    React.useState<CloudPulseAlertsPayload>({
+      system: [],
+      user: [],
+    });
 
   const { mutateAsync: addEntity } = useAddEntityToAlert();
 
   const { mutateAsync: removeEntity } = useRemoveEntityFromAlert();
 
+  const getAlertRowProps = (alert: Alert, options: AlertRowPropsOptions) => {
+    const { entityId, enabledAlerts, onToggleAlert } = options;
+
+    // Ensure that at least one of entityId or onToggleAlert is provided
+    if (!(entityId || onToggleAlert)) {
+      return null;
+    }
+
+    const isEditMode = !!entityId;
+
+    const handleToggle = isEditMode
+      ? handleToggleEditFlow
+      : handleToggleCreateFlow;
+    const status = isEditMode
+      ? alert.entity_ids.includes(entityId)
+      : enabledAlerts[alert.type].includes(alert.id);
+
+    return { handleToggle, status };
+  };
+
   const handleCancel = () => {
     setIsDialogOpen(false);
   };
   const handleConfirm = React.useCallback(
     (alert: Alert, currentStatus: boolean) => {
+      if (entityId === undefined) return;
+
       const payload: EntityAlertUpdatePayload = {
         alert,
         entityId,
@@ -117,12 +185,31 @@ export const AlertInformationActionTable = (
     },
     [addEntity, enqueueSnackbar, entityId, entityName, removeEntity]
   );
-  const handleToggle = (alert: Alert) => {
+
+  const handleToggleEditFlow = (alert: Alert) => {
     setIsDialogOpen(true);
     setSelectedAlert(alert);
   };
 
-  const isEnabled = selectedAlert.entity_ids?.includes(entityId) ?? false;
+  const handleToggleCreateFlow = (alert: Alert) => {
+    if (!onToggleAlert) return;
+
+    setEnabledAlerts((prev: CloudPulseAlertsPayload) => {
+      const newPayload = { ...prev };
+      const index = newPayload[alert.type].indexOf(alert.id);
+      // If the alert is already in the payload, remove it, otherwise add it
+      if (index !== -1) {
+        newPayload[alert.type].splice(index, 1);
+      } else {
+        newPayload[alert.type].push(alert.id);
+      }
+
+      onToggleAlert(newPayload);
+      return newPayload;
+    });
+  };
+
+  const isEnabled = selectedAlert.entity_ids?.includes(entityId ?? '') ?? false;
 
   return (
     <>
@@ -170,14 +257,24 @@ export const AlertInformationActionTable = (
                         length={paginatedAndOrderedAlerts.length}
                         loading={false}
                       />
-                      {paginatedAndOrderedAlerts?.map((alert) => (
-                        <AlertInformationActionRow
-                          alert={alert}
-                          handleToggle={handleToggle}
-                          key={alert.id}
-                          status={alert.entity_ids.includes(entityId)}
-                        />
-                      ))}
+                      {paginatedAndOrderedAlerts?.map((alert) => {
+                        const rowProps = getAlertRowProps(alert, {
+                          enabledAlerts,
+                          entityId,
+                          onToggleAlert,
+                        });
+
+                        if (!rowProps) return null;
+
+                        return (
+                          <AlertInformationActionRow
+                            alert={alert}
+                            handleToggle={rowProps.handleToggle}
+                            key={alert.id}
+                            status={rowProps.status}
+                          />
+                        );
+                      })}
                     </TableBody>
                   </Table>
                 </Grid>

packages/manager/src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent.tsx

@@ -23,18 +23,28 @@ import {
 } from '../Utils/utils';
 import { AlertInformationActionTable } from './AlertInformationActionTable';
 
-import type { AlertDefinitionType } from '@linode/api-v4';
+import type {
+  AlertDefinitionType,
+  CloudPulseAlertsPayload,
+} from '@linode/api-v4';
 
 interface AlertReusableComponentProps {
   /**
    * Id for the selected entity
    */
-  entityId: string;
+  entityId?: string;
 
   /**
    * Name of the selected entity
    */
-  entityName: string;
+  entityName?: string;
+
+  /**
+   * Called when an alert is toggled on or off.
+   * Only use in create flow.
+   * @param payload enabled alerts ids
+   */
+  onToggleAlert?: (payload: CloudPulseAlertsPayload) => void;
 
   /**
    * Service type of selected entity
@@ -43,7 +53,7 @@ interface AlertReusableComponentProps {
 }
 
 export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
-  const { entityId, entityName, serviceType } = props;
+  const { entityId, entityName, onToggleAlert, serviceType } = props;
   const {
     data: alerts,
     error,
@@ -70,6 +80,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
   if (isLoading) {
     return <CircleProgress />;
   }
+
   return (
     <Paper>
       <Stack gap={3}>
@@ -125,6 +136,7 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
             entityId={entityId}
             entityName={entityName}
             error={error}
+            onToggleAlert={onToggleAlert}
             orderByColumn="Alert Name"
           />
         </Stack>

packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx

@@ -74,10 +74,9 @@ export const Actions = () => {
       <ApiAwarenessModal
         isOpen={isAPIAwarenessModalOpen}
         onClose={() => setIsAPIAwarenessModalOpen(false)}
-        payLoad={getLinodeCreatePayload(
-          structuredClone(getValues()),
-          isLinodeInterfacesEnabled
-        )}
+        payLoad={getLinodeCreatePayload(structuredClone(getValues()), {
+          isShowingNewNetworkingUI: isLinodeInterfacesEnabled,
+        })}
       />
     </Box>
   );

packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/Alerts/Alerts.tsx

@@ -1,17 +1,33 @@
 import { usePreferences } from '@linode/queries';
-import { Accordion, BetaChip, Notice } from '@linode/ui';
+import { Accordion, BetaChip } from '@linode/ui';
 import * as React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
 
+import { AlertReusableComponent } from 'src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent';
 import { AclpPreferenceToggle } from 'src/features/Linodes/AclpPreferenceToggle';
 import { LinodeSettingsAlertsPanel } from 'src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel';
 import { useFlags } from 'src/hooks/useFlags';
 
+import type { LinodeCreateFormValues } from '../../utilities';
+import type { CloudPulseAlertsPayload } from '@linode/api-v4';
+
 export const Alerts = () => {
   const flags = useFlags();
   const { data: isAclpAlertsPreferenceBeta } = usePreferences(
     (preferences) => preferences?.isAclpAlertsBeta
   );
 
+  const { control } = useFormContext<LinodeCreateFormValues>();
+  const { field } = useController({
+    control,
+    name: 'alerts',
+    defaultValue: { system: [], user: [] },
+  });
+
+  const handleToggleAlert = (updatedAlerts: CloudPulseAlertsPayload) => {
+    field.onChange(updatedAlerts);
+  };
+
   return (
     <Accordion
       detailProps={{ sx: { p: 0 } }}
@@ -26,7 +42,10 @@ export const Alerts = () => {
     >
       {flags.aclpIntegration && <AclpPreferenceToggle type="alerts" />}
       {flags.aclpIntegration && isAclpAlertsPreferenceBeta ? (
-        <Notice variant="info">ACLP Alerts coming soon...</Notice>
+        <AlertReusableComponent
+          onToggleAlert={handleToggleAlert}
+          serviceType="linode"
+        />
       ) : (
         <LinodeSettingsAlertsPanel />
       )}

packages/manager/src/features/Linodes/LinodeCreate/index.tsx

@@ -3,6 +3,7 @@ import {
   useCloneLinodeMutation,
   useCreateLinodeMutation,
   useMutateAccountAgreements,
+  usePreferences,
   useProfile,
 } from '@linode/queries';
 import { CircleProgress, Notice, Stack } from '@linode/ui';
@@ -23,6 +24,7 @@ import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
 import {
@@ -80,6 +82,12 @@ export const LinodeCreate = () => {
   const { data: profile } = useProfile();
   const { isLinodeCloneFirewallEnabled } = useIsLinodeCloneFirewallEnabled();
 
+  const { data: isAclpAlertsPreferenceBeta } = usePreferences(
+    (preferences) => preferences?.isAclpAlertsBeta
+  );
+
+  const flags = useFlags();
+
   const queryClient = useQueryClient();
 
   const form = useForm<LinodeCreateFormValues, LinodeCreateFormContext>({
@@ -124,7 +132,11 @@ export const LinodeCreate = () => {
   };
 
   const onSubmit: SubmitHandler<LinodeCreateFormValues> = async (values) => {
-    const payload = getLinodeCreatePayload(values, isLinodeInterfacesEnabled);
+    const payload = getLinodeCreatePayload(values, {
+      isShowingNewNetworkingUI: isLinodeInterfacesEnabled,
+      isAclpIntegration: flags.aclpIntegration,
+      isAclpAlertsPreferenceBeta,
+    });
 
     try {
       const linode =