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

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

@@ -9,6 +9,7 @@ import type {
   UpgradeToLinodeInterfaceSchema,
 } from '@linode/validation';
 import type { MaintenancePolicyId } from 'src/account';
+import type { Alert } from 'src/cloudpulse';
 import type { VPCIP } from 'src/vpcs';
 import type { InferType } from 'yup';
 
@@ -162,6 +163,11 @@ export interface LinodeIPsResponseIPV6 {
   slaac: IPAddress;
 }
 
+export interface LinodeAclpAlertsPayload {
+  system: Alert['id'][];
+  user: Alert['id'][];
+}
+
 export type LinodeStatus =
   | 'booting'
   | 'cloning'
@@ -537,6 +543,10 @@ export interface CreateLinodePlacementGroupPayload {
 }
 
 export interface CreateLinodeRequest {
+  /**
+   * Beta Aclp alerts
+   */
+  alerts?: LinodeAclpAlertsPayload | 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-12236-upcoming-features-1747395107850.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add beta ACLP contextual alerts to the Alerts tab on the Linode details page ([#12236](https://github.com/linode/manager/pull/12236))

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

@@ -0,0 +1,173 @@
+import { Box } from '@linode/ui';
+import { Grid, TableBody, TableHead } from '@mui/material';
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+
+import OrderBy from 'src/components/OrderBy';
+import Paginate from 'src/components/Paginate';
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableCell } from 'src/components/TableCell';
+import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper';
+import { TableRow } from 'src/components/TableRow';
+import { TableSortCell } from 'src/components/TableSortCell';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
+
+import { AlertInformationActionRow } from './AlertInformationActionRow';
+
+import type { Alert, APIError, LinodeAclpAlertsPayload } from '@linode/api-v4';
+import type { LinodeCreateFormValues } from 'src/features/Linodes/LinodeCreate/utilities';
+
+export interface AlertInfoActionTableCreateFlowProps {
+  /**
+   * List of alerts to be displayed
+   */
+  alerts: Alert[];
+
+  /**
+   * List of table headers for each column
+   */
+  columns: TableColumnHeader[];
+
+  /**
+   * Error received from API
+   */
+  error?: APIError[] | null;
+
+  /**
+   * Column name by which columns will be ordered by default
+   */
+  orderByColumn: string;
+}
+
+export interface TableColumnHeader {
+  /**
+   * Name of the column to be displayed
+   */
+  columnName: string;
+
+  /**
+   * Corresponding key name in the alert object for which this column is
+   */
+  label: string;
+}
+
+export const AlertInfoActionTableCreateFlow = (
+  props: AlertInfoActionTableCreateFlowProps
+) => {
+  const { alerts, columns, error, orderByColumn } = props;
+
+  const _error = error
+    ? getAPIErrorOrDefault(error, 'Error while fetching the alerts')
+    : undefined;
+
+  const generateInitialAlertsPayload = (alerts: Alert[]) => {
+    const initialPayload: LinodeAclpAlertsPayload = { system: [], user: [] };
+    alerts.forEach((alert) => {
+      if (alert.type === 'system') {
+        initialPayload.system.push(alert.id);
+      } else if (alert.type === 'user') {
+        initialPayload.user.push(alert.id);
+      }
+    });
+    return initialPayload;
+  };
+
+  const initialPayload = generateInitialAlertsPayload(alerts);
+
+  const { control } = useFormContext<LinodeCreateFormValues>();
+  const { field } = useController({
+    control,
+    name: 'alerts',
+    defaultValue: initialPayload,
+  });
+
+  const handleToggleCreateFlow = (alert: Alert) => {
+    const alerts = field.value;
+    const currentAlertIds = alerts?.[alert.type] || [];
+    const updatedAlerts = { ...alerts };
+
+    if (currentAlertIds?.includes(alert.id)) {
+      // Disable the alert (remove from the list)
+      updatedAlerts[alert.type] = currentAlertIds.filter(
+        (id) => id !== alert.id
+      );
+    } else {
+      // Enable the alert (add to the list)
+      updatedAlerts[alert.type] = [...currentAlertIds, alert.id];
+    }
+
+    field.onChange(updatedAlerts);
+  };
+
+  return (
+    <OrderBy data={alerts} order="asc" orderBy={orderByColumn}>
+      {({ data: orderedData, handleOrderChange, order, orderBy }) => (
+        <Paginate data={orderedData}>
+          {({
+            count,
+            data: paginatedAndOrderedAlerts,
+            handlePageChange,
+            handlePageSizeChange,
+            page,
+            pageSize,
+          }) => (
+            <Box>
+              <Grid>
+                <Table
+                  colCount={columns.length + 1}
+                  data-testid="alert-table"
+                  size="small"
+                >
+                  <TableHead>
+                    <TableRow>
+                      <TableCell actionCell />
+                      {columns.map(({ columnName, label }) => {
+                        return (
+                          <TableSortCell
+                            active={orderBy === label}
+                            data-qa-header={label}
+                            data-qa-sorting={label}
+                            direction={order}
+                            handleClick={handleOrderChange}
+                            key={label}
+                            label={label}
+                          >
+                            {columnName}
+                          </TableSortCell>
+                        );
+                      })}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    <TableContentWrapper
+                      error={_error}
+                      length={paginatedAndOrderedAlerts.length}
+                      loading={false}
+                    />
+                    {paginatedAndOrderedAlerts?.map((alert) => (
+                      <AlertInformationActionRow
+                        alert={alert}
+                        handleToggle={handleToggleCreateFlow}
+                        key={alert.id}
+                        status={field.value?.[alert.type].includes(alert.id)}
+                      />
+                    ))}
+                  </TableBody>
+                </Table>
+              </Grid>
+              <PaginationFooter
+                count={count}
+                eventCategory="Alert Definitions Table"
+                handlePageChange={handlePageChange}
+                handleSizeChange={handlePageSizeChange}
+                page={page}
+                pageSize={pageSize}
+              />
+            </Box>
+          )}
+        </Paginate>
+      )}
+    </OrderBy>
+  );
+};

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

@@ -20,6 +20,7 @@ import {
   convertAlertsToTypeSet,
   filterAlertsByStatusAndType,
 } from '../Utils/utils';
+import { AlertInfoActionTableCreateFlow } from './AlertInfoActionTableCreateFlow';
 import { AlertInformationActionTable } from './AlertInformationActionTable';
 
 import type { AlertDefinitionType } from '@linode/api-v4';
@@ -118,14 +119,23 @@ export const AlertReusableComponent = (props: AlertReusableComponentProps) => {
             />
           </Box>
 
-          <AlertInformationActionTable
-            alerts={filteredAlerts}
-            columns={AlertContextualViewTableHeaderMap}
-            entityId={entityId}
-            entityName={entityName}
-            error={error}
-            orderByColumn="Alert Name"
-          />
+          {entityId ? (
+            <AlertInformationActionTable
+              alerts={filteredAlerts}
+              columns={AlertContextualViewTableHeaderMap}
+              entityId={entityId}
+              entityName={entityName}
+              error={error}
+              orderByColumn="Alert Name"
+            />
+          ) : (
+            <AlertInfoActionTableCreateFlow
+              alerts={filteredAlerts}
+              columns={AlertContextualViewTableHeaderMap}
+              error={error}
+              orderByColumn="Alert Name"
+            />
+          )}
         </Stack>
       </Stack>
     </Paper>

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/Alerts/Alerts.tsx

@@ -0,0 +1,33 @@
+import { usePreferences } from '@linode/queries';
+import { Box } from '@linode/ui';
+import * as React from 'react';
+
+import { AlertReusableComponent } from 'src/features/CloudPulse/Alerts/ContextualView/AlertReusableComponent';
+import { useFlags } from 'src/hooks/useFlags';
+
+import { AclpPreferenceToggle } from '../../LinodesDetail/AclpPreferenceToggle';
+import { LinodeSettingsAlertsPanel } from '../../LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel';
+
+export const Alerts = () => {
+  const flags = useFlags();
+  const { data: isAclpAlertsPreferenceBeta } = usePreferences(
+    (preferences) => preferences?.isAclpAlertsBeta
+  );
+
+  return (
+    <Box>
+      {flags.aclpIntegration && <AclpPreferenceToggle type="alerts" />}
+      {flags.aclpIntegration && isAclpAlertsPreferenceBeta ? (
+        <AlertReusableComponent
+          entityId={''}
+          entityName={''}
+          serviceType="linode"
+        />
+      ) : (
+        <LinodeSettingsAlertsPanel isCreateFlow />
+      )}
+    </Box>
+  );
+};
+
+export default Alerts;

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 {
@@ -36,6 +38,7 @@ import {
 
 import { Actions } from './Actions';
 import { Addons } from './Addons/Addons';
+import Alerts from './Alerts/Alerts';
 import { Details } from './Details/Details';
 import { LinodeCreateError } from './Error';
 import { EUAgreement } from './EUAgreement';
@@ -79,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>({
@@ -123,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 =
@@ -262,6 +275,7 @@ export const LinodeCreate = () => {
           )}
           <UserData />
           {isLinodeInterfacesEnabled && <Networking />}
+          <Alerts />
           <Addons />
           <EUAgreement />
           <Summary />

packages/manager/src/features/Linodes/LinodeCreate/utilities.test.tsx

@@ -54,15 +54,19 @@ describe('getLinodeCreatePayload', () => {
   it('should return a basic payload', () => {
     const values = createLinodeRequestFactory.build() as LinodeCreateFormValues;
 
-    expect(getLinodeCreatePayload(values, false)).toEqual(values);
+    expect(
+      getLinodeCreatePayload(values, { isShowingNewNetworkingUI: false })
+    ).toEqual(values);
   });
 
   it('should base64 encode metadata', () => {
     const values = createLinodeRequestFactory.build({
       metadata: { user_data: userData },
     }) as LinodeCreateFormValues;
 
-    expect(getLinodeCreatePayload(values, false)).toEqual({
+    expect(
+      getLinodeCreatePayload(values, { isShowingNewNetworkingUI: false })
+    ).toEqual({
       ...values,
       metadata: { user_data: base64UserData },
     });
@@ -73,7 +77,9 @@ describe('getLinodeCreatePayload', () => {
       placement_group: {},
     }) as LinodeCreateFormValues;
 
-    expect(getLinodeCreatePayload(values, false)).toEqual({
+    expect(
+      getLinodeCreatePayload(values, { isShowingNewNetworkingUI: false })
+    ).toEqual({
       ...values,
       placement_group: undefined,
     });