From 875f2786b912663497d0825aade369be8a380813 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Mon, 2 Dec 2024 15:47:56 +0530 Subject: [PATCH 01/11] upcoming: [DI-22217] - Added AlertListing component With Table headers, Table rows and added the GET api endpoint and mockServer for fetching alert definitions --- packages/api-v4/src/cloudpulse/alerts.ts | 17 ++- packages/api-v4/src/cloudpulse/types.ts | 2 +- .../src/assets/icons/entityIcons/alert.svg | 23 ++++ .../AlertsLanding/AlertsDefinitionLanding.tsx | 12 +- .../Alerts/AlertsListing/AlertActionMenu.tsx | 36 ++++++ .../Alerts/AlertsListing/AlertListing.tsx | 108 ++++++++++++++++++ .../AlertsListing/AlertTableRow.test.tsx | 35 ++++++ .../Alerts/AlertsListing/AlertTableRow.tsx | 46 ++++++++ packages/manager/src/mocks/serverHandlers.ts | 28 ++++- .../manager/src/queries/cloudpulse/alerts.ts | 23 +++- .../manager/src/queries/cloudpulse/queries.ts | 13 ++- .../src/queries/cloudpulse/requests.ts | 16 +++ 12 files changed, 343 insertions(+), 16 deletions(-) create mode 100644 packages/manager/src/assets/icons/entityIcons/alert.svg create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx create mode 100644 packages/manager/src/queries/cloudpulse/requests.ts diff --git a/packages/api-v4/src/cloudpulse/alerts.ts b/packages/api-v4/src/cloudpulse/alerts.ts index 3c6f909b9db..a33a23b99cf 100644 --- a/packages/api-v4/src/cloudpulse/alerts.ts +++ b/packages/api-v4/src/cloudpulse/alerts.ts @@ -1,7 +1,14 @@ import { createAlertDefinitionSchema } from '@linode/validation'; -import Request, { setURL, setMethod, setData } from '../request'; +import Request, { + setURL, + setMethod, + setData, + setParams, + setXFilter, +} from '../request'; import { Alert, AlertServiceType, CreateAlertDefinitionPayload } from './types'; import { BETA_API_ROOT as API_ROOT } from 'src/constants'; +import { Params, Filter, ResourcePage } from 'src/types'; export const createAlertDefinition = ( data: CreateAlertDefinitionPayload, @@ -16,3 +23,11 @@ export const createAlertDefinition = ( setMethod('POST'), setData(data, createAlertDefinitionSchema) ); + +export const getAlertDefinitions = (params?: Params, filters?: Filter) => + Request>( + setURL(`${API_ROOT}/monitor/alert-definitions`), + setMethod('GET'), + setParams(params), + setXFilter(filters) + ); diff --git a/packages/api-v4/src/cloudpulse/types.ts b/packages/api-v4/src/cloudpulse/types.ts index 4b64bf16c30..54059d7c93e 100644 --- a/packages/api-v4/src/cloudpulse/types.ts +++ b/packages/api-v4/src/cloudpulse/types.ts @@ -3,7 +3,7 @@ export type MetricAggregationType = 'avg' | 'sum' | 'min' | 'max' | 'count'; export type MetricOperatorType = 'eq' | 'gt' | 'lt' | 'gte' | 'lte'; export type AlertServiceType = 'linode' | 'dbaas'; type DimensionFilterOperatorType = 'eq' | 'neq' | 'startswith' | 'endswith'; -export type AlertDefinitionType = 'default' | 'custom'; +export type AlertDefinitionType = 'system' | 'user'; export type AlertStatusType = 'enabled' | 'disabled'; export interface Dashboard { id: number; diff --git a/packages/manager/src/assets/icons/entityIcons/alert.svg b/packages/manager/src/assets/icons/entityIcons/alert.svg new file mode 100644 index 00000000000..e2612eec1d3 --- /dev/null +++ b/packages/manager/src/assets/icons/entityIcons/alert.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx index 352ded4e3e2..3ea14fdd7c9 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx @@ -1,14 +1,14 @@ -import { Paper, Typography } from '@linode/ui'; import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; +import { AlertListing } from '../AlertsListing/AlertListing'; import { CreateAlertDefinition } from '../CreateAlert/CreateAlertDefinition'; export const AlertDefinitionLanding = () => { return ( } exact path="/monitor/alerts/definitions" /> @@ -19,11 +19,3 @@ export const AlertDefinitionLanding = () => { ); }; - -const AlertDefinition = () => { - return ( - - Alert Definition - - ); -}; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx new file mode 100644 index 00000000000..251ec42e248 --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; + +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; + +import type { AlertDefinitionType } from '@linode/api-v4'; + +export interface ActionHandlers { + // These handlers will be enhanced based on the alert type and actions required + /* + * Callback for delete action + */ + handleDelete: () => void; + + /* + * Callback for show details action + */ + handleDetails: () => void; +} + +export interface AlertActionMenuProps { + /* + * Type of the alert + */ + alertType?: AlertDefinitionType; + /* + * Handlers for alert actions like delete, show details etc., + */ + handlers?: ActionHandlers; +} + +/* +The handlers and alertType are made optional only temporarily, they will be enabled but they are dependent on another feature which will be part of next PR +*/ +export const AlertActionMenu = () => { + return ; +}; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx new file mode 100644 index 00000000000..3c011a8b5a9 --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx @@ -0,0 +1,108 @@ +import { CircleProgress, Paper } from '@linode/ui'; +import { Grid } from '@mui/material'; +import React from 'react'; + +import AlertIcon from 'src/assets/icons/entityIcons/alert.svg'; +import { Table } from 'src/components/Table'; +import { TableBody } from 'src/components/TableBody'; +import { TableCell } from 'src/components/TableCell'; +import { TableHead } from 'src/components/TableHead'; +import { TableRow } from 'src/components/TableRow'; +import { TableSortCell } from 'src/components/TableSortCell'; +import { StyledPlaceholder } from 'src/features/StackScripts/StackScriptBase/StackScriptBase.styles'; +import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts'; + +import { AlertTableRow } from './AlertTableRow'; + +export const AlertListing = () => { + // These are dummy order and handlers, will replace them in the next PR + const order = 'asc'; + const handleOrderChange = () => { + return 'asc'; + }; + const { data: alerts, isError, isLoading } = useAllAlertDefinitionsQuery(); + if (isError || alerts?.length === 0) { + return ( + + + + + + ); + } + if (isLoading) { + return ; + } + return ( + + + + + + Alert Name + + { + 'asc'; + }} + active={true} + direction={order} + label="serviceType" + size="small" + > + Service Type + + + Severity + + + Status + + + Last Modified + + + Created By + + + + + + {alerts?.map((alert) => ( + + ))} + +
+ + ); +}; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx new file mode 100644 index 00000000000..39af86aeef4 --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; + +import { alertFactory } from 'src/factories/cloudpulse/alerts'; +import { capitalize } from 'src/utilities/capitalize'; +import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers'; + +import { alertSeverityOptions } from '../constants'; +import { AlertTableRow } from './AlertTableRow'; + +describe('Alert Row', () => { + it('should render an alert row', async () => { + const alert = alertFactory.build(); + const renderedAlert = ; + const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); + expect(getByText(alert.label)).toBeVisible(); + }); + it('should render the severity field with its label not value', async () => { + const severityValue = 0; + const alert = alertFactory.build({ severity: severityValue }); + const renderedAlert = ; + const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); + const severity = alertSeverityOptions.find( + (option) => option.value === severityValue + )?.label; + expect(getByText(severity!)).toBeVisible; + }); + it('should render the status field in green color if status is enabled', () => { + const statusValue = 'enabled'; + const alert = alertFactory.build({ status: statusValue }); + const renderedAlert = ; + const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); + const statusElement = getByText(capitalize(statusValue)); + expect(getComputedStyle(statusElement).color).toBe('rgb(50, 205, 50)'); + }); +}); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx new file mode 100644 index 00000000000..5f05c6c3bbf --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx @@ -0,0 +1,46 @@ +import { Typography } from '@linode/ui'; +import * as React from 'react'; + +import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; +import { TableCell } from 'src/components/TableCell'; +import { TableRow } from 'src/components/TableRow'; +import { capitalize } from 'src/utilities/capitalize'; + +import { alertSeverityOptions } from '../constants'; +import { AlertActionMenu } from './AlertActionMenu'; + +import type { Alert } from '@linode/api-v4'; + +interface Props { + alert: Alert; +} + +export const AlertTableRow = React.memo((props: Props) => { + const { alert } = props; + const { created_by, id, label, service_type, status, updated } = alert; + const alertSeverity = alertSeverityOptions.find( + (option) => option.value === alert.severity + ); + return ( + + {label} + {service_type} + {alertSeverity?.label} + + + {capitalize(status)} + + + + + + {created_by} + + {/* handlers are supposed to be passed to this AlertActionMenu, + it is dependent on other feature and will added as that feature in the next PR + */} + + + + ); +}); diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index f0df0bde8e2..88c33b8d5d8 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -2346,7 +2346,7 @@ export const handlers = [ http.post( '*/monitor/services/:service_type/alert-definitions', async ({ request }) => { - const types: AlertDefinitionType[] = ['custom', 'default']; + const types: AlertDefinitionType[] = ['system', 'user']; const status: AlertStatusType[] = ['enabled', 'disabled']; const severity: AlertSeverityType[] = [0, 1, 2, 3]; const users = ['user1', 'user2', 'user3']; @@ -2365,6 +2365,32 @@ export const handlers = [ return HttpResponse.json(response); } ), + http.get('*/monitor/alert-definitions', async ({ request }) => { + const customAlerts = alertFactory.buildList(2, { + severity: 0, + type: 'user', + }); + const customAlertsWithServiceType = alertFactory.buildList(2, { + service_type: 'dbaas', + severity: 1, + type: 'user', + }); + const defaultAlerts = alertFactory.buildList(1, { type: 'system' }); + const defaultAlertsWithServiceType = alertFactory.buildList(1, { + service_type: 'dbaas', + severity: 3, + type: 'system', + }); + const alerts = [ + ...defaultAlerts, + ...alertFactory.buildList(3, { status: 'disabled' }), + ...customAlerts, + ...defaultAlertsWithServiceType, + ...alertFactory.buildList(3), + ...customAlertsWithServiceType, + ]; + return HttpResponse.json(makeResourcePage(alerts)); + }), http.get('*/monitor/services', () => { const response: ServiceTypesList = { data: [ diff --git a/packages/manager/src/queries/cloudpulse/alerts.ts b/packages/manager/src/queries/cloudpulse/alerts.ts index 0da27a07093..a744f80d719 100644 --- a/packages/manager/src/queries/cloudpulse/alerts.ts +++ b/packages/manager/src/queries/cloudpulse/alerts.ts @@ -1,6 +1,12 @@ import { createAlertDefinition } from '@linode/api-v4/lib/cloudpulse'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { + keepPreviousData, + useMutation, + useQuery, + useQueryClient, +} from '@tanstack/react-query'; +import { queryPresets } from '../base'; import { queryFactory } from './queries'; import type { @@ -8,7 +14,7 @@ import type { AlertServiceType, CreateAlertDefinitionPayload, } from '@linode/api-v4/lib/cloudpulse'; -import type { APIError } from '@linode/api-v4/lib/types'; +import type { APIError, Filter, Params } from '@linode/api-v4/lib/types'; export const useCreateAlertDefinition = (serviceType: AlertServiceType) => { const queryClient = useQueryClient(); @@ -19,3 +25,16 @@ export const useCreateAlertDefinition = (serviceType: AlertServiceType) => { }, }); }; + +export const useAllAlertDefinitionsQuery = ( + params?: Params, + filter?: Filter, + enabled: boolean = true +) => { + return useQuery({ + ...queryFactory.alerts._ctx.all(params, filter), + ...queryPresets.longLived, + enabled, + placeholderData: keepPreviousData, + }); +}; diff --git a/packages/manager/src/queries/cloudpulse/queries.ts b/packages/manager/src/queries/cloudpulse/queries.ts index dc9205f0ad4..84b469b4dcd 100644 --- a/packages/manager/src/queries/cloudpulse/queries.ts +++ b/packages/manager/src/queries/cloudpulse/queries.ts @@ -11,6 +11,7 @@ import { databaseQueries } from '../databases/databases'; import { getAllLinodesRequest } from '../linodes/requests'; import { volumeQueries } from '../volumes/volumes'; import { fetchCloudPulseMetrics } from './metrics'; +import { getAllAlertsRequest } from './requests'; import type { CloudPulseMetricsRequest, @@ -22,10 +23,20 @@ import type { const key = 'Clousepulse'; export const queryFactory = createQueryKeys(key, { - alerts: { + alert: { + // contextQueries: { // This query key is a placeholder , it will be updated once the relevant queries are added queryKey: null, }, + alerts: { + contextQueries: { + all: (params: Params = {}, filter: Filter = {}) => ({ + queryFn: () => getAllAlertsRequest(params, filter), + queryKey: [params, filter], + }), + }, + queryKey: null, + }, dashboardById: (dashboardId: number) => ({ queryFn: () => getDashboardById(dashboardId), queryKey: [dashboardId], diff --git a/packages/manager/src/queries/cloudpulse/requests.ts b/packages/manager/src/queries/cloudpulse/requests.ts new file mode 100644 index 00000000000..148b9f0bdd4 --- /dev/null +++ b/packages/manager/src/queries/cloudpulse/requests.ts @@ -0,0 +1,16 @@ +import { getAlertDefinitions } from '@linode/api-v4'; + +import { getAll } from 'src/utilities/getAll'; + +import type { Alert, Filter, Params } from '@linode/api-v4'; + +export const getAllAlertsRequest = ( + passedParams: Params = {}, + passedFilter: Filter = {} +) => + getAll((params, filter) => + getAlertDefinitions( + { ...params, ...passedParams }, + { ...filter, ...passedFilter } + ) + )().then((data) => data.data); From 65c0a6d36262335b7ad86205cdcbcdc07be65b91 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:26:08 +0530 Subject: [PATCH 02/11] upcoming : [DI-22217] - Added the TableRowError and TableRowLoading for the AlertListing Table and minor changes --- .../src/factories/cloudpulse/alerts.ts | 2 +- .../AlertsListing/AlertListing.test.tsx | 49 +++++++++++++++++++ .../Alerts/AlertsListing/AlertListing.tsx | 16 ++++-- .../AlertsListing/AlertTableRow.test.tsx | 2 + .../Alerts/AlertsListing/AlertTableRow.tsx | 15 ++++-- 5 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx diff --git a/packages/manager/src/factories/cloudpulse/alerts.ts b/packages/manager/src/factories/cloudpulse/alerts.ts index a0bc2b6edf7..4a7bb721854 100644 --- a/packages/manager/src/factories/cloudpulse/alerts.ts +++ b/packages/manager/src/factories/cloudpulse/alerts.ts @@ -22,7 +22,7 @@ export const alertFactory = Factory.Sync.makeFactory({ polling_interval_seconds: 0, trigger_occurrences: 0, }, - type: 'default', + type: 'user', updated: new Date().toISOString(), updated_by: 'user1', }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx new file mode 100644 index 00000000000..2733d5b0f19 --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; + +import { alertFactory } from 'src/factories/cloudpulse/alerts'; +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { AlertListing } from './AlertListing'; + +const queryMocks = vi.hoisted(() => ({ + useAllAlertDefinitionsQuery: vi.fn().mockReturnValue({}), +})); + +vi.mock('src/queries/cloudpulse/alerts', async () => { + const actual = await vi.importActual('src/queries/cloudpulse/alerts'); + return { + ...actual, + useAllAlertDefinitionsQuery: queryMocks.useAllAlertDefinitionsQuery, + }; +}); + +const mockResponse = alertFactory.buildList(3); + +describe('Alert Listing', () => { + it('should render the error message', async () => { + queryMocks.useAllAlertDefinitionsQuery.mockReturnValue({ + data: undefined, + error: 'an error happened', + isError: true, + isLoading: false, + }); + const { getAllByText } = renderWithTheme(); + getAllByText('Error in fetching the alerts.'); + }); + + it('should render the alert landing table with items', async () => { + queryMocks.useAllAlertDefinitionsQuery.mockReturnValue({ + data: mockResponse, + isError: false, + isLoading: false, + status: 'success', + }); + const { getAllByText } = renderWithTheme(); + getAllByText('Alert Name'); + getAllByText('Service Type'); + getAllByText('Severity'); + getAllByText('Status'); + getAllByText('Last Modified'); + getAllByText('Created By'); + }); +}); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx index 3c011a8b5a9..0b8d033fd88 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx @@ -1,4 +1,4 @@ -import { CircleProgress, Paper } from '@linode/ui'; +import { Paper } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; @@ -8,6 +8,8 @@ import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; +import { TableRowError } from 'src/components/TableRowError/TableRowError'; +import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading'; import { TableSortCell } from 'src/components/TableSortCell'; import { StyledPlaceholder } from 'src/features/StackScripts/StackScriptBase/StackScriptBase.styles'; import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts'; @@ -21,7 +23,7 @@ export const AlertListing = () => { return 'asc'; }; const { data: alerts, isError, isLoading } = useAllAlertDefinitionsQuery(); - if (isError || alerts?.length === 0) { + if (alerts?.length === 0) { return ( @@ -34,9 +36,6 @@ export const AlertListing = () => { ); } - if (isLoading) { - return ; - } return ( @@ -98,6 +97,13 @@ export const AlertListing = () => { + {isError === true && ( + + )} + {isLoading === true && } {alerts?.map((alert) => ( ))} diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx index 39af86aeef4..8f32d7e9daf 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx @@ -14,6 +14,7 @@ describe('Alert Row', () => { const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); expect(getByText(alert.label)).toBeVisible(); }); + it('should render the severity field with its label not value', async () => { const severityValue = 0; const alert = alertFactory.build({ severity: severityValue }); @@ -24,6 +25,7 @@ describe('Alert Row', () => { )?.label; expect(getByText(severity!)).toBeVisible; }); + it('should render the status field in green color if status is enabled', () => { const statusValue = 'enabled'; const alert = alertFactory.build({ status: statusValue }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx index 5f05c6c3bbf..5aef5d46d0f 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx @@ -12,15 +12,20 @@ import { AlertActionMenu } from './AlertActionMenu'; import type { Alert } from '@linode/api-v4'; interface Props { + /** + * alert details used by the component to fill the row details + */ alert: Alert; } -export const AlertTableRow = React.memo((props: Props) => { +export const AlertTableRow = (props: Props) => { const { alert } = props; const { created_by, id, label, service_type, status, updated } = alert; - const alertSeverity = alertSeverityOptions.find( - (option) => option.value === alert.severity - ); + const alertSeverity = React.useMemo(() => { + return alertSeverityOptions.find( + (option) => option.value === alert.severity + ); + }, [alert.severity]); return ( {label} @@ -43,4 +48,4 @@ export const AlertTableRow = React.memo((props: Props) => { ); -}); +}; From 80389f597a4ff0552d83254db4bb2527e9fa96a4 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Mon, 2 Dec 2024 18:45:33 +0530 Subject: [PATCH 03/11] upcoming: [DI-22217] - Added changesets --- packages/api-v4/.changeset/pr-11346-changed-1733145182722.md | 5 +++++ packages/manager/.changeset/pr-11346-added-1733145106911.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 packages/api-v4/.changeset/pr-11346-changed-1733145182722.md create mode 100644 packages/manager/.changeset/pr-11346-added-1733145106911.md diff --git a/packages/api-v4/.changeset/pr-11346-changed-1733145182722.md b/packages/api-v4/.changeset/pr-11346-changed-1733145182722.md new file mode 100644 index 00000000000..7f6129d47ae --- /dev/null +++ b/packages/api-v4/.changeset/pr-11346-changed-1733145182722.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Changed +--- + +Type of `AlertDefinitionType` to `'system'|'user'` ([#11346](https://github.com/linode/manager/pull/11346)) diff --git a/packages/manager/.changeset/pr-11346-added-1733145106911.md b/packages/manager/.changeset/pr-11346-added-1733145106911.md new file mode 100644 index 00000000000..b6384f26c30 --- /dev/null +++ b/packages/manager/.changeset/pr-11346-added-1733145106911.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +AlertListing component and AlertTableRow component with UT ([#11346](https://github.com/linode/manager/pull/11346)) From 34acc0a7bdc6bcde966f517ee366730d56fbef73 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Mon, 2 Dec 2024 22:32:53 +0530 Subject: [PATCH 04/11] upcoming: [DI-22217] - Review changes: Improving AlertListing test cases, unabbreviated UT to Unit Tests in changeset --- .../pr-11346-added-1733145106911.md | 2 +- .../AlertsListing/AlertListing.test.tsx | 34 +++++++++++++++---- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/manager/.changeset/pr-11346-added-1733145106911.md b/packages/manager/.changeset/pr-11346-added-1733145106911.md index b6384f26c30..6b4d5327cef 100644 --- a/packages/manager/.changeset/pr-11346-added-1733145106911.md +++ b/packages/manager/.changeset/pr-11346-added-1733145106911.md @@ -2,4 +2,4 @@ "@linode/manager": Added --- -AlertListing component and AlertTableRow component with UT ([#11346](https://github.com/linode/manager/pull/11346)) +AlertListing component and AlertTableRow component with Unit Tests ([#11346](https://github.com/linode/manager/pull/11346)) diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx index 2733d5b0f19..5d40e913594 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx @@ -1,3 +1,4 @@ +import { screen, waitFor } from '@testing-library/react'; import * as React from 'react'; import { alertFactory } from 'src/factories/cloudpulse/alerts'; @@ -38,12 +39,31 @@ describe('Alert Listing', () => { isLoading: false, status: 'success', }); - const { getAllByText } = renderWithTheme(); - getAllByText('Alert Name'); - getAllByText('Service Type'); - getAllByText('Severity'); - getAllByText('Status'); - getAllByText('Last Modified'); - getAllByText('Created By'); + const { getByText } = renderWithTheme(); + await waitFor(() => expect(getByText('Alert Name')).toBeInTheDocument()); + await waitFor(() => expect(getByText('Service Type')).toBeInTheDocument()); + await waitFor(() => expect(getByText('Status')).toBeInTheDocument()); + await waitFor(() => expect(getByText('Last Modified')).toBeInTheDocument()); + await waitFor(() => expect(getByText('Created By')).toBeInTheDocument()); + }); + + it('should render the alert row', async () => { + queryMocks.useAllAlertDefinitionsQuery.mockReturnValue({ + data: mockResponse, + isError: false, + isLoading: false, + status: 'success', + }); + + const { getByText } = renderWithTheme(); + await waitFor(() => + expect(getByText(mockResponse[0].label)).toBeInTheDocument() + ); + await waitFor(() => + expect(getByText(mockResponse[1].label)).toBeInTheDocument() + ); + await waitFor(() => + expect(getByText(mockResponse[2].label)).toBeInTheDocument() + ); }); }); From af30200631f55985f7dd371d3387db8897c685a8 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Tue, 3 Dec 2024 10:54:18 +0530 Subject: [PATCH 05/11] upcoming: [DI-22217] - Removed unused import --- .../CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx index 5d40e913594..205fcec9e4e 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx @@ -1,4 +1,4 @@ -import { screen, waitFor } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import * as React from 'react'; import { alertFactory } from 'src/factories/cloudpulse/alerts'; From 57665038f5c44c3e05c0e6f0b29726771ca60fd0 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Wed, 4 Dec 2024 19:12:20 +0530 Subject: [PATCH 06/11] upcoming: [DI-22217] - Review changes: Removed redundant checks, removed waitFor in the unit tests and removed Severity column, removed the Placeholder Icon for Alerts Landing empty state --- packages/api-v4/src/cloudpulse/alerts.ts | 4 ++-- .../src/assets/icons/entityIcons/alert.svg | 23 ------------------- .../AlertsLanding/AlertsDefinitionLanding.tsx | 4 ++-- .../Alerts/AlertsListing/AlertActionMenu.tsx | 14 +++++------ .../AlertsListing/AlertListing.test.tsx | 23 +++++++------------ .../Alerts/AlertsListing/AlertListing.tsx | 20 ++++------------ .../AlertsListing/AlertTableRow.test.tsx | 16 ++++--------- .../Alerts/AlertsListing/AlertTableRow.tsx | 7 ------ 8 files changed, 28 insertions(+), 83 deletions(-) delete mode 100644 packages/manager/src/assets/icons/entityIcons/alert.svg diff --git a/packages/api-v4/src/cloudpulse/alerts.ts b/packages/api-v4/src/cloudpulse/alerts.ts index a33a23b99cf..586be5fbd20 100644 --- a/packages/api-v4/src/cloudpulse/alerts.ts +++ b/packages/api-v4/src/cloudpulse/alerts.ts @@ -7,8 +7,8 @@ import Request, { setXFilter, } from '../request'; import { Alert, AlertServiceType, CreateAlertDefinitionPayload } from './types'; -import { BETA_API_ROOT as API_ROOT } from 'src/constants'; -import { Params, Filter, ResourcePage } from 'src/types'; +import { BETA_API_ROOT as API_ROOT } from '../constants'; +import { Params, Filter, ResourcePage } from '../types'; export const createAlertDefinition = ( data: CreateAlertDefinitionPayload, diff --git a/packages/manager/src/assets/icons/entityIcons/alert.svg b/packages/manager/src/assets/icons/entityIcons/alert.svg deleted file mode 100644 index e2612eec1d3..00000000000 --- a/packages/manager/src/assets/icons/entityIcons/alert.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx index 3ea14fdd7c9..0f037732ece 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx @@ -8,12 +8,12 @@ export const AlertDefinitionLanding = () => { return ( } + component={AlertListing} exact path="/monitor/alerts/definitions" /> } + component={CreateAlertDefinition} path="/monitor/alerts/definitions/create" /> diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx index 251ec42e248..8e379ba3a08 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertActionMenu.tsx @@ -6,31 +6,31 @@ import type { AlertDefinitionType } from '@linode/api-v4'; export interface ActionHandlers { // These handlers will be enhanced based on the alert type and actions required - /* + /** * Callback for delete action */ handleDelete: () => void; - /* + /** * Callback for show details action */ handleDetails: () => void; } export interface AlertActionMenuProps { - /* + /** * Type of the alert */ alertType?: AlertDefinitionType; - /* + /** * Handlers for alert actions like delete, show details etc., */ handlers?: ActionHandlers; } -/* -The handlers and alertType are made optional only temporarily, they will be enabled but they are dependent on another feature which will be part of next PR -*/ +/** + * The handlers and alertType are made optional only temporarily, they will be enabled but they are dependent on another feature which will be part of next PR + */ export const AlertActionMenu = () => { return ; }; diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx index 205fcec9e4e..e0e2bf18e41 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.test.tsx @@ -1,4 +1,3 @@ -import { waitFor } from '@testing-library/react'; import * as React from 'react'; import { alertFactory } from 'src/factories/cloudpulse/alerts'; @@ -40,11 +39,11 @@ describe('Alert Listing', () => { status: 'success', }); const { getByText } = renderWithTheme(); - await waitFor(() => expect(getByText('Alert Name')).toBeInTheDocument()); - await waitFor(() => expect(getByText('Service Type')).toBeInTheDocument()); - await waitFor(() => expect(getByText('Status')).toBeInTheDocument()); - await waitFor(() => expect(getByText('Last Modified')).toBeInTheDocument()); - await waitFor(() => expect(getByText('Created By')).toBeInTheDocument()); + expect(getByText('Alert Name')).toBeInTheDocument(); + expect(getByText('Service')).toBeInTheDocument(); + expect(getByText('Status')).toBeInTheDocument(); + expect(getByText('Last Modified')).toBeInTheDocument(); + expect(getByText('Created By')).toBeInTheDocument(); }); it('should render the alert row', async () => { @@ -56,14 +55,8 @@ describe('Alert Listing', () => { }); const { getByText } = renderWithTheme(); - await waitFor(() => - expect(getByText(mockResponse[0].label)).toBeInTheDocument() - ); - await waitFor(() => - expect(getByText(mockResponse[1].label)).toBeInTheDocument() - ); - await waitFor(() => - expect(getByText(mockResponse[2].label)).toBeInTheDocument() - ); + expect(getByText(mockResponse[0].label)).toBeInTheDocument(); + expect(getByText(mockResponse[1].label)).toBeInTheDocument(); + expect(getByText(mockResponse[2].label)).toBeInTheDocument(); }); }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx index 0b8d033fd88..f7105d00e48 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx @@ -2,7 +2,6 @@ import { Paper } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; -import AlertIcon from 'src/assets/icons/entityIcons/alert.svg'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; @@ -17,7 +16,7 @@ import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts'; import { AlertTableRow } from './AlertTableRow'; export const AlertListing = () => { - // These are dummy order and handlers, will replace them in the next PR + // These are dummy order value and handleOrder methods, will replace them in the next PR const order = 'asc'; const handleOrderChange = () => { return 'asc'; @@ -28,7 +27,6 @@ export const AlertListing = () => { @@ -55,18 +53,10 @@ export const AlertListing = () => { }} active={true} direction={order} - label="serviceType" + label="service" size="small" > - Service Type - - - Severity + Service { - {isError === true && ( + {isError && ( )} - {isLoading === true && } + {isLoading && } {alerts?.map((alert) => ( ))} diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx index 8f32d7e9daf..b8f538c3e72 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx @@ -4,7 +4,6 @@ import { alertFactory } from 'src/factories/cloudpulse/alerts'; import { capitalize } from 'src/utilities/capitalize'; import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers'; -import { alertSeverityOptions } from '../constants'; import { AlertTableRow } from './AlertTableRow'; describe('Alert Row', () => { @@ -15,17 +14,10 @@ describe('Alert Row', () => { expect(getByText(alert.label)).toBeVisible(); }); - it('should render the severity field with its label not value', async () => { - const severityValue = 0; - const alert = alertFactory.build({ severity: severityValue }); - const renderedAlert = ; - const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); - const severity = alertSeverityOptions.find( - (option) => option.value === severityValue - )?.label; - expect(getByText(severity!)).toBeVisible; - }); - + /** + * As of now the styling for the status 'enabled' is decided, in the future if they decide on the + other styles possible status values, will update them and test them accordingly. + */ it('should render the status field in green color if status is enabled', () => { const statusValue = 'enabled'; const alert = alertFactory.build({ status: statusValue }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx index 5aef5d46d0f..9e119238ac8 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx @@ -6,7 +6,6 @@ import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { capitalize } from 'src/utilities/capitalize'; -import { alertSeverityOptions } from '../constants'; import { AlertActionMenu } from './AlertActionMenu'; import type { Alert } from '@linode/api-v4'; @@ -21,16 +20,10 @@ interface Props { export const AlertTableRow = (props: Props) => { const { alert } = props; const { created_by, id, label, service_type, status, updated } = alert; - const alertSeverity = React.useMemo(() => { - return alertSeverityOptions.find( - (option) => option.value === alert.severity - ); - }, [alert.severity]); return ( {label} {service_type} - {alertSeverity?.label} {capitalize(status)} From 07fb774c2e7700bbaa089475f13ca0484578b018 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Wed, 4 Dec 2024 23:30:11 +0530 Subject: [PATCH 07/11] upcoming: [DI-22217] - Restructured the alert queries --- packages/manager/src/queries/cloudpulse/queries.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/queries/cloudpulse/queries.ts b/packages/manager/src/queries/cloudpulse/queries.ts index 84b469b4dcd..41f280bf37d 100644 --- a/packages/manager/src/queries/cloudpulse/queries.ts +++ b/packages/manager/src/queries/cloudpulse/queries.ts @@ -23,13 +23,12 @@ import type { const key = 'Clousepulse'; export const queryFactory = createQueryKeys(key, { - alert: { - // contextQueries: { - // This query key is a placeholder , it will be updated once the relevant queries are added - queryKey: null, - }, alerts: { contextQueries: { + alert: { + // This query key is a placeholder , it will be updated once the relevant queries are added + queryKey: null, + }, all: (params: Params = {}, filter: Filter = {}) => ({ queryFn: () => getAllAlertsRequest(params, filter), queryKey: [params, filter], From 0e44318a93d3dad5f27d4504a1db05acccf61781 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Thu, 5 Dec 2024 21:28:40 +0530 Subject: [PATCH 08/11] upcoming: [DI-22217] - Review changes: Added a TableRowLabelMap for the TableHead Row, Replaced referencing colors directly and used theme styling for colors --- .../Alerts/AlertsListing/AlertListing.tsx | 58 +++++-------------- .../Alerts/AlertsListing/AlertTableRow.tsx | 10 +++- .../Alerts/AlertsListing/constants.ts | 22 +++++++ 3 files changed, 45 insertions(+), 45 deletions(-) create mode 100644 packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx index f7105d00e48..cdeee1703ae 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx @@ -14,6 +14,7 @@ import { StyledPlaceholder } from 'src/features/StackScripts/StackScriptBase/Sta import { useAllAlertDefinitionsQuery } from 'src/queries/cloudpulse/alerts'; import { AlertTableRow } from './AlertTableRow'; +import { AlertListingTableLabelMap } from './constants'; export const AlertListing = () => { // These are dummy order value and handleOrder methods, will replace them in the next PR @@ -39,50 +40,19 @@ export const AlertListing = () => {
- - Alert Name - - { - 'asc'; - }} - active={true} - direction={order} - label="service" - size="small" - > - Service - - - Status - - - Last Modified - - - Created By - + {AlertListingTableLabelMap.map((value, idx) => { + return ( + + {value.colName} + + ); + })} diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx index 9e119238ac8..f94fc0ad3d4 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx @@ -9,6 +9,7 @@ import { capitalize } from 'src/utilities/capitalize'; import { AlertActionMenu } from './AlertActionMenu'; import type { Alert } from '@linode/api-v4'; +import { useTheme } from '@mui/material'; interface Props { /** @@ -20,12 +21,19 @@ interface Props { export const AlertTableRow = (props: Props) => { const { alert } = props; const { created_by, id, label, service_type, status, updated } = alert; + const theme = useTheme(); return ( {label} {service_type} - + {capitalize(status)} diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts new file mode 100644 index 00000000000..5dd71994c12 --- /dev/null +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts @@ -0,0 +1,22 @@ +export const AlertListingTableLabelMap = [ + { + colName: 'AlertName', + label: 'alertName', + }, + { + colName: 'Service', + label: 'service', + }, + { + colName: 'Status', + label: 'status', + }, + { + colName: 'Last Modified', + label: 'lastModified', + }, + { + colName: 'Created By', + label: 'createdBy', + }, +]; From 22c408ce1bd3d312cffd5b8b2b0c43e919a5d66f Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Thu, 5 Dec 2024 21:29:52 +0530 Subject: [PATCH 09/11] upcoming: [DI-22217] - fixed eslint error --- .../features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx index f94fc0ad3d4..ec6dac7b024 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.tsx @@ -1,4 +1,5 @@ import { Typography } from '@linode/ui'; +import { useTheme } from '@mui/material'; import * as React from 'react'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; @@ -9,7 +10,6 @@ import { capitalize } from 'src/utilities/capitalize'; import { AlertActionMenu } from './AlertActionMenu'; import type { Alert } from '@linode/api-v4'; -import { useTheme } from '@mui/material'; interface Props { /** From b610948600230128b654ab6a52f392e164c25672 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Thu, 5 Dec 2024 21:56:50 +0530 Subject: [PATCH 10/11] upcoming: [DI-22217] - Minor styling changes and fixed failing tests --- .../CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx | 2 +- .../src/features/CloudPulse/Alerts/AlertsListing/constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx index b8f538c3e72..232b12e801a 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertTableRow.test.tsx @@ -24,6 +24,6 @@ describe('Alert Row', () => { const renderedAlert = ; const { getByText } = renderWithTheme(wrapWithTableBody(renderedAlert)); const statusElement = getByText(capitalize(statusValue)); - expect(getComputedStyle(statusElement).color).toBe('rgb(50, 205, 50)'); + expect(getComputedStyle(statusElement).color).toBe('rgb(0, 176, 80)'); }); }); diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts index 5dd71994c12..057155cffb4 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts @@ -1,6 +1,6 @@ export const AlertListingTableLabelMap = [ { - colName: 'AlertName', + colName: 'Alert Name', label: 'alertName', }, { From 087f86ae32cd72b7939d4bd3475a105f3ab0c4f3 Mon Sep 17 00:00:00 2001 From: santoshp210-akamai <159890961+santoshp210-akamai@users.noreply.github.com> Date: Fri, 6 Dec 2024 11:37:30 +0530 Subject: [PATCH 11/11] upcoming: [DI-22217] - minor changes: changed the key when mapping over AlertListingTableLabelMap, used shorthand --- .../Alerts/AlertsListing/AlertListing.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx index cdeee1703ae..f2684332333 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListing.tsx @@ -40,19 +40,17 @@ export const AlertListing = () => {
- {AlertListingTableLabelMap.map((value, idx) => { - return ( - - {value.colName} - - ); - })} + {AlertListingTableLabelMap.map((value) => ( + + {value.colName} + + ))}