upcoming: [M3-7616] - Add Placement Groups Events and Notifications

packages/api-v4/.changeset/pr-10221-upcoming-features-1708967424029.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Placement Groups events and notifications ([#10221](https://github.com/linode/manager/pull/10221))

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

@@ -356,6 +356,12 @@ export type EventAction =
   | 'nodebalancer_delete'
   | 'nodebalancer_update'
   | 'password_reset'
+  | 'placement_group_assign'
+  | 'placement_group_created'
+  | 'placement_group_assigned'
+  | 'placement_group_unassigned'
+  | 'placement_group_updated'
+  | 'placement_group_deleted'
   | 'profile_update'
   | 'stackscript_create'
   | 'stackscript_delete'

packages/manager/.changeset/pr-10221-upcoming-features-1708967386991.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Placement Groups events and notifications ([#10221](https://github.com/linode/manager/pull/10221))

packages/manager/src/features/Events/EventRow.tsx

@@ -49,6 +49,7 @@ export interface RowProps {
     | 'domain'
     | 'linode'
     | 'nodebalancer'
+    | 'placement_group'
     | 'stackscript'
     | 'subnet'
     | 'volume'

packages/manager/src/features/Events/constants.ts

@@ -79,6 +79,12 @@ export const EVENT_ACTIONS: Event['action'][] = [
   'nodebalancer_delete',
   'nodebalancer_update',
   'password_reset',
+  'placement_group_assign',
+  'placement_group_created',
+  'placement_group_assigned',
+  'placement_group_unassigned',
+  'placement_group_updated',
+  'placement_group_deleted',
   'profile_update',
   'stackscript_create',
   'stackscript_delete',

packages/manager/src/features/Events/eventMessageGenerator.ts

@@ -699,6 +699,29 @@ export const eventMessageCreators: { [index: string]: CreatorsForStatus } = {
   payment_submitted: {
     notification: (e) => `A payment was successfully submitted.`,
   },
+  // This event action denotes when a Placement Group has been selected during the Linode Create flow.
+  placement_group_assign: {
+    notification: (e) => `Placement Group successfully assigned.`,
+  },
+  // This event action denotes an existing Linode instance has been assigned to an existing Placement Group.
+  placement_group_assigned: {
+    notification: (e) =>
+      `Linode ${e.secondary_entity?.label} has been assigned to Placement Group ${e.entity?.label}.`,
+  },
+  placement_group_created: {
+    notification: (e) =>
+      `Placement Group ${e.entity?.label} has been successfully created.`,
+  },
+  placement_group_deleted: {
+    notification: (e) => `Placement Group ${e.entity?.label} has been deleted.`,
+  },
+  placement_group_unassigned: {
+    notification: (e) =>
+      `Linode ${e.secondary_entity?.label} has been unassigned from Placement Group ${e.entity?.label}.`,
+  },
+  placement_group_updated: {
+    notification: (e) => `Placement Group ${e.entity?.label} has been updated.`,
+  },
   profile_update: {
     notification: (e) => `Your profile has been updated.`,
   },

packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx

@@ -1,4 +1,5 @@
 import { AFFINITY_TYPES } from '@linode/api-v4';
+import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -43,6 +44,7 @@ export const PlacementGroupsAssignLinodesDrawer = (
     data: allPlacementGroups,
     error: allPlacementGroupsError,
   } = useUnpaginatedPlacementGroupsQuery();
+  const { enqueueSnackbar } = useSnackbar();
 
   // We display a notice and disable inputs in case the user reaches this drawer somehow
   // (not supposed to happen as the "Assign Linode to Placement Group" button should be disabled
@@ -117,13 +119,18 @@ export const PlacementGroupsAssignLinodesDrawer = (
 
     try {
       await assignLinodes(payload);
+      const toastMessage = 'Linode successfully assigned';
+      enqueueSnackbar(toastMessage, {
+        variant: 'success',
+      });
       handleDrawerClose();
     } catch (error) {
       setGeneralError(
         error?.[0]?.reason
           ? error[0].reason
-          : 'An error occurred while assigning the Linode to the group'
+          : 'An error occurred while adding the Linode to the group'
       );
+      enqueueSnackbar(error[0]?.reason, { variant: 'error' });
     }
   };
 
@@ -171,7 +178,6 @@ export const PlacementGroupsAssignLinodesDrawer = (
               text="Only displaying Linodes that aren’t assigned to a Placement Group"
             />
           </Box>
-
           <ActionsPanel
             primaryButtonProps={{
               'data-testid': 'submit',

packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx

@@ -1,4 +1,5 @@
 import { AFFINITY_TYPES } from '@linode/api-v4';
+import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -53,6 +54,8 @@ export const PlacementGroupsDeleteModal = (props: Props) => {
     reset: resetUnassignLinodes,
   } = useUnassignLinodesFromPlacementGroup(selectedPlacementGroup?.id ?? -1);
 
+  const { enqueueSnackbar } = useSnackbar();
+
   const error = deletePlacementError || unassignLinodeError;
 
   React.useEffect(() => {
@@ -68,10 +71,18 @@ export const PlacementGroupsDeleteModal = (props: Props) => {
     };
 
     await unassignLinodes(payload);
+    const toastMessage = `Linode successfully unassigned`;
+    enqueueSnackbar(toastMessage, {
+      variant: 'success',
+    });
   };
 
   const onDelete = async () => {
     await deletePlacementGroup();
+    const toastMessage = `Placement Group successfully deleted.`;
+    enqueueSnackbar(toastMessage, {
+      variant: 'success',
+    });
     onClose();
   };
 

packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx

@@ -1,3 +1,4 @@
+import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -26,6 +27,9 @@ export const PlacementGroupsUnassignModal = (props: Props) => {
     isLoading,
     mutateAsync: unassignLinodes,
   } = useUnassignLinodesFromPlacementGroup(+placementGroupId ?? -1);
+
+  const { enqueueSnackbar } = useSnackbar();
+
   const { data: selectedLinode } = useLinodeQuery(
     +linodeId ?? -1,
     Boolean(linodeId)
@@ -37,6 +41,10 @@ export const PlacementGroupsUnassignModal = (props: Props) => {
 
   const onUnassign = async () => {
     await unassignLinodes(payload);
+    const toastMessage = 'Linode successfully unassigned';
+    enqueueSnackbar(toastMessage, {
+      variant: 'success',
+    });
     onClose();
   };
 

packages/manager/src/mocks/serverHandlers.ts

@@ -1609,12 +1609,35 @@ export const handlers = [
       percent_complete: 100,
       status: 'notification',
     });
+    const placementGroupCreateEvent = eventFactory.buildList(1, {
+      action: 'placement_group_created',
+      entity: { id: 999, label: 'PG-1', type: 'placement_group' },
+      message: 'Placement Group successfully created.',
+      percent_complete: 100,
+      status: 'notification',
+    });
+    const placementGroupAssignedEvent = eventFactory.buildList(1, {
+      action: 'placement_group_assigned',
+      entity: { id: 990, label: 'PG-2', type: 'placement_group' },
+      message: 'Placement Group successfully assigned.',
+      percent_complete: 100,
+      secondary_entity: {
+        id: 1,
+        label: 'My Config',
+        type: 'linode',
+        url: '/v4/linode/instances/1/configs/1',
+      },
+      status: 'notification',
+    });
+
     return res.once(
       ctx.json(
         makeResourcePage([
           ...events,
           ...dbEvents,
           ...oldEvents,
+          ...placementGroupAssignedEvent,
+          ...placementGroupCreateEvent,
           eventWithSpecialCharacters,
         ])
       )

packages/manager/src/utilities/getEventsActionLink.ts

@@ -106,6 +106,9 @@ export const getLinkForEvent = (action: EventAction, entity: Entity | null) => {
     case 'vpc':
       return `/vpcs/${id}`;
 
+    case 'placement_group':
+      return `/placement-groups/${id}`;
+
     default:
       return;
   }
@@ -139,6 +142,8 @@ export const getLinkTargets = (entity: Entity | null) => {
       return '/longview';
     case 'volume':
       return '/volumes';
+    case 'placement_group':
+      return `/placement-groups/${entity.id}`;
     default:
       return null;
   }