From be5d96c3c9f8f6215d15c0edb687f35cd51dcb6f Mon Sep 17 00:00:00 2001
From: Nikhil Agrawal <165884194+nikhagra-akamai@users.noreply.github.com>
Date: Thu, 6 Feb 2025 05:33:12 +0530
Subject: [PATCH 01/57] upcoming: [DI-23083] - Migrated
CloudPulseTimeRangeSelect to DateTimeRangePicker (#11573)
* upcoming: [DI-20931] - Replaced CloudPulseTimeRange with date time range picker
* upcoming: [DI-20931] - Added preference capability to date time range picker
* upcoming: [DI-20931] - Added date range picker support in contextual view
* upcoming: [DI-20931] - Updated test cases
* upcoming: [DI-20933] - Added default timezone value
* upcoming: [DI-20933] - Added disabled state for timezone
* upcoming: [DI-20933] - Added relative time duration in metric request for preset value
* upcoming: [DI-20933] - Removed widget time duration from metric request
* upcoming: [DI-20933] - Updated value to be saved in preferences
* upcoming: [DI-20933] - Updated ifelse ladder to switch statement
* upcoming: [DI-20933] - Updated contextual view
* upcoming: [DI-20933] - Moved common methods to utils file
* upcoming: [DI-20933] - Renamed type name
* upcoming: [DI-20933] - Renamed disabledTimeZone to disableTimeZone
* upcoming: [DI-20933] - Code refactoring
* upcoming: [DI-20933] - Removed unused variabled
* upcoming: [DI-20933] - Updatef failing test cases
* upcoming: [DI-20931] - Updated logic to retain date time value for previous preset selected
* upcoming: [DI-20931] - Updated metrics call logic
* upcoming: [DI-20933] - Removed unused variable
* upcoming: [DI-20933] - Added 1 hour in preset
* upcoming: [DI-20933] - bug fix for 1 hour preset
* upcoming: [DI-20933] - Updated failing test cases
* upcoming: [DI-20932] - Made input readonly for time range picker
* upcoming: [DI-20932] - Added qa id
* upcoiming: [DI-20931] - Added default start & end date for undefined default value
* upcoming: [DI-23187] - Changed end date for this month preset option
* upcoming: [DI-23186] - Changed format of date in date picker
* upcoming: [DI-20931] - Set 0 seconds to selected date
* upcoming: [DI-20931] - Set seconds value to 0 in default value
* upcoming: [DI-20931] - Set seconds value to 0 in default value
* upcoming: [DI-20931] - Updated test cases
* upcoming: [DI-20931] - Updated logic to set 0 seconds
* upcoming: [DI-20931] - updated logic to set 0 for seconds
* upcoming: [DI-20931] - Added support for multiple screen resolution
* upcoming: [DI-23083] - Added changeset
* upcoming: [DI-20931] - Added test cases
* upcoming: [DI-23083
] - Removed read-only from time picker
* upcoming: [DI-23083] - Added styling for MuiOutlinedInput in light & dark theme ts file
* added changeset
* upcoming: [DI-23083] - Update function parameters
* upcoming: [DI-23083] - Updated timezone value in date picker input field
---
...r-11573-upcoming-features-1738066060175.md | 5 +
packages/api-v4/src/cloudpulse/types.ts | 10 +-
...r-11573-upcoming-features-1738066869988.md | 5 +
.../components/DatePicker/DateTimePicker.tsx | 44 +++++---
.../DatePicker/DateTimeRangePicker.test.tsx | 82 ++++++++------
.../DatePicker/DateTimeRangePicker.tsx | 29 +++--
.../Dashboard/CloudPulseDashboard.tsx | 4 +-
.../Dashboard/CloudPulseDashboardLanding.tsx | 11 +-
.../CloudPulseDashboardWithFilters.tsx | 63 ++++++-----
.../Overview/GlobalFilters.test.tsx | 2 +-
.../CloudPulse/Overview/GlobalFilters.tsx | 104 +++++++++---------
.../Utils/CloudPulseDateTimePickerUtils.ts | 22 ++++
.../Utils/CloudPulseWidgetUtils.test.ts | 16 +++
.../CloudPulse/Utils/CloudPulseWidgetUtils.ts | 39 ++++++-
.../CloudPulse/Utils/FilterBuilder.test.ts | 18 ++-
.../CloudPulse/Utils/FilterBuilder.ts | 5 +-
.../ReusableDashboardFilterUtils.test.ts | 19 +++-
.../Utils/ReusableDashboardFilterUtils.ts | 7 +-
.../Widget/CloudPulseWidget.test.tsx | 7 +-
.../CloudPulse/Widget/CloudPulseWidget.tsx | 17 ++-
.../Widget/CloudPulseWidgetRenderer.tsx | 6 +-
.../shared/CloudPulseDateTimeRangePicker.tsx | 86 +++++++++++++++
.../DatabaseMonitor/DatabaseMonitor.test.tsx | 4 +-
...r-11573-upcoming-features-1738670291812.md | 5 +
packages/ui/src/foundations/themes/dark.ts | 50 +++++++++
packages/ui/src/foundations/themes/light.ts | 65 +++++++++++
26 files changed, 550 insertions(+), 175 deletions(-)
create mode 100644 packages/api-v4/.changeset/pr-11573-upcoming-features-1738066060175.md
create mode 100644 packages/manager/.changeset/pr-11573-upcoming-features-1738066869988.md
create mode 100644 packages/manager/src/features/CloudPulse/Utils/CloudPulseDateTimePickerUtils.ts
create mode 100644 packages/manager/src/features/CloudPulse/shared/CloudPulseDateTimeRangePicker.tsx
create mode 100644 packages/ui/.changeset/pr-11573-upcoming-features-1738670291812.md
diff --git a/packages/api-v4/.changeset/pr-11573-upcoming-features-1738066060175.md b/packages/api-v4/.changeset/pr-11573-upcoming-features-1738066060175.md
new file mode 100644
index 00000000000..24df680cbb9
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-11573-upcoming-features-1738066060175.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `DateTimeWithPreset` type in cloudpulse types ([#11573](https://github.com/linode/manager/pull/11573))
diff --git a/packages/api-v4/src/cloudpulse/types.ts b/packages/api-v4/src/cloudpulse/types.ts
index 7a43d6c192d..f7fcfd321d5 100644
--- a/packages/api-v4/src/cloudpulse/types.ts
+++ b/packages/api-v4/src/cloudpulse/types.ts
@@ -48,6 +48,12 @@ export interface TimeDuration {
value: number;
}
+export interface DateTimeWithPreset {
+ end: string;
+ start: string;
+ preset?: string;
+}
+
export interface Widgets {
label: string;
metric: string;
@@ -80,6 +86,7 @@ export type FilterValue =
| string[]
| number[]
| WidgetFilterValue
+ | DateTimeWithPreset
| undefined;
type WidgetFilterValue = { [key: string]: AclpWidget };
@@ -125,7 +132,8 @@ export interface CloudPulseMetricsRequest {
filters?: Filters[];
aggregate_function: string;
group_by: string;
- relative_time_duration: TimeDuration;
+ relative_time_duration: TimeDuration | undefined;
+ absolute_time_duration: DateTimeWithPreset | undefined;
time_granularity: TimeGranularity | undefined;
entity_ids: number[];
}
diff --git a/packages/manager/.changeset/pr-11573-upcoming-features-1738066869988.md b/packages/manager/.changeset/pr-11573-upcoming-features-1738066869988.md
new file mode 100644
index 00000000000..850bd5ca780
--- /dev/null
+++ b/packages/manager/.changeset/pr-11573-upcoming-features-1738066869988.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Replace `CloudPulseTimeRangeSelect` with `CloudPulseDateTimeRangePicker`, Change metric request body to use `absolute_time_duration` for custom date and `relative_time_duration` for presets, add `1hr` preset option in `DateTimeRangePicker`, Change time select input field to `read-only` in `DateTimePicker ([#11573](https://github.com/linode/manager/pull/11573))
diff --git a/packages/manager/src/components/DatePicker/DateTimePicker.tsx b/packages/manager/src/components/DatePicker/DateTimePicker.tsx
index 1cee4f53b99..e5be1d318b9 100644
--- a/packages/manager/src/components/DatePicker/DateTimePicker.tsx
+++ b/packages/manager/src/components/DatePicker/DateTimePicker.tsx
@@ -1,5 +1,5 @@
-import { Divider } from '@linode/ui';
import { InputAdornment, TextField } from '@linode/ui';
+import { Divider } from '@linode/ui';
import { Box } from '@linode/ui';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import { Grid, Popover } from '@mui/material';
@@ -9,11 +9,11 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import React, { useEffect, useState } from 'react';
+import { timezones } from 'src/assets/timezones/timezones';
import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
import { TimeZoneSelect } from './TimeZoneSelect';
-import type { TextFieldProps } from '@linode/ui';
import type { SxProps, Theme } from '@mui/material/styles';
import type { DateCalendarProps } from '@mui/x-date-pickers/DateCalendar';
import type { DateTime } from 'luxon';
@@ -97,11 +97,6 @@ export const DateTimePicker = ({
timeZoneSelectProps.value || null
);
- const TimePickerFieldProps: TextFieldProps = {
- label: timeSelectProps?.label ?? 'Select Time',
- noMarginTop: true,
- };
-
const handleDateChange = (newDate: DateTime | null) => {
setSelectedDateTime((prev) =>
newDate
@@ -114,7 +109,7 @@ export const DateTimePicker = ({
};
const handleTimeChange = (newTime: DateTime | null) => {
- if (newTime) {
+ if (newTime && !newTime.invalidReason) {
setSelectedDateTime((prev) =>
prev ? prev.set({ hour: newTime.hour, minute: newTime.minute }) : prev
);
@@ -177,9 +172,9 @@ export const DateTimePicker = ({
}}
value={
selectedDateTime
- ? `${selectedDateTime.toFormat(format)}${
- selectedTimeZone ? ` (${selectedTimeZone})` : ''
- }`
+ ? `${selectedDateTime.toFormat(format)}${generateTimeZone(
+ selectedTimeZone
+ )}`
: ''
}
errorText={errorText}
@@ -235,8 +230,7 @@ export const DateTimePicker = ({
({
'& .MuiPickersLayout-contentWrapper': {
@@ -267,10 +262,13 @@ export const DateTimePicker = ({
},
}),
},
- textField: TimePickerFieldProps,
}}
+ sx={{
+ marginTop: 0,
+ }}
+ data-qa-time="time-picker"
+ label={timeSelectProps?.label || 'Select Time'}
onChange={handleTimeChange}
- slots={{ textField: TextField }}
value={selectedDateTime || null}
/>
@@ -307,3 +305,19 @@ export const DateTimePicker = ({
);
};
+
+const generateTimeZone = (selectedTimezone: null | string): string => {
+ const offset = timezones.find((zone) => zone.name === selectedTimezone)
+ ?.offset;
+ if (!offset) {
+ return '';
+ }
+ const minutes = (Math.abs(offset * 60) % 60).toLocaleString(undefined, {
+ minimumIntegerDigits: 2,
+ useGrouping: false,
+ });
+ const hours = Math.floor(Math.abs(offset));
+ const isPositive = Math.abs(offset) === offset ? '+' : '-';
+
+ return ` (GMT${isPositive}${hours}:${minutes})`;
+};
diff --git a/packages/manager/src/components/DatePicker/DateTimeRangePicker.test.tsx b/packages/manager/src/components/DatePicker/DateTimeRangePicker.test.tsx
index 1011c755345..9d83f98c726 100644
--- a/packages/manager/src/components/DatePicker/DateTimeRangePicker.test.tsx
+++ b/packages/manager/src/components/DatePicker/DateTimeRangePicker.test.tsx
@@ -52,22 +52,24 @@ describe('DateTimeRangePicker Component', () => {
vi.setSystemTime(vi.getRealSystemTime());
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Open start date picker
await userEvent.click(screen.getByLabelText('Start Date and Time'));
await userEvent.click(screen.getByRole('gridcell', { name: '10' }));
await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
-
- const expectedStartTime = DateTime.fromObject({
- day: 10,
- month: DateTime.now().month,
- year: DateTime.now().year,
- }).toISO();
+ const expectedStartTime = now
+ .set({
+ day: 10,
+ month: now.month,
+ year: now.year,
+ })
+ .minus({ minutes: 30 })
+ .toISO();
// Check if the onChange function is called with the expected value
expect(onChangeMock).toHaveBeenCalledWith({
- end: null,
+ end: now.toISO(),
preset: 'custom_range',
start: expectedStartTime,
timeZone: null,
@@ -97,17 +99,21 @@ describe('DateTimeRangePicker Component', () => {
presetsProps: { ...Props.presetsProps },
};
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Set the end date-time to the 15th
const endDateField = screen.getByLabelText('End Date and Time');
await userEvent.click(endDateField);
- await userEvent.click(screen.getByRole('gridcell', { name: '15' }));
+ await userEvent.click(
+ screen.getByRole('gridcell', { name: now.day.toString() })
+ );
await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
// Set the start date-time to the 10th (which is earlier than the end date-time)
const startDateField = screen.getByLabelText('Start Date and Time');
await userEvent.click(startDateField);
- await userEvent.click(screen.getByRole('gridcell', { name: '20' })); // Invalid date
+ await userEvent.click(
+ screen.getByRole('gridcell', { name: (now.day + 1).toString() })
+ ); // Invalid date
await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
// Confirm the error message is displayed
@@ -133,17 +139,21 @@ describe('DateTimeRangePicker Component', () => {
},
};
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Set the end date-time to the 15th
const endDateField = screen.getByLabelText('End Date and Time');
await userEvent.click(endDateField);
- await userEvent.click(screen.getByRole('gridcell', { name: '15' }));
+ await userEvent.click(
+ screen.getByRole('gridcell', { name: now.day.toString() })
+ );
await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
// Set the start date-time to the 20th (which is earlier than the end date-time)
const startDateField = screen.getByLabelText('Start Date and Time');
await userEvent.click(startDateField);
- await userEvent.click(screen.getByRole('gridcell', { name: '20' })); // Invalid date
+ await userEvent.click(
+ screen.getByRole('gridcell', { name: (now.day + 1).toString() })
+ ); // Invalid date
await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
// Confirm the custom error message is displayed for the start date
@@ -152,7 +162,7 @@ describe('DateTimeRangePicker Component', () => {
it('should set the date range for the last 24 hours when the "Last 24 Hours" preset is selected', async () => {
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Open the presets dropdown
const presetsDropdown = screen.getByLabelText('Date Presets');
await userEvent.click(presetsDropdown);
@@ -162,8 +172,8 @@ describe('DateTimeRangePicker Component', () => {
await userEvent.click(last24HoursOption);
// Expected start and end dates in ISO format
- const expectedStartDateISO = DateTime.now().minus({ hours: 24 }).toISO(); // 2024-12-17T00:28:27.071-06:00
- const expectedEndDateISO = DateTime.now().toISO(); // 2024-12-18T00:28:27.071-06:00
+ const expectedStartDateISO = now.minus({ hours: 24 }).toISO(); // 2024-12-17T00:28:27.071-06:00
+ const expectedEndDateISO = now.toISO(); // 2024-12-18T00:28:27.071-06:00
// Verify onChangeMock was called with correct ISO strings
expect(onChangeMock).toHaveBeenCalledWith({
@@ -179,7 +189,7 @@ describe('DateTimeRangePicker Component', () => {
it('should set the date range for the last 7 days when the "Last 7 Days" preset is selected', async () => {
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Open the presets dropdown
const presetsDropdown = screen.getByLabelText('Date Presets');
await userEvent.click(presetsDropdown);
@@ -189,8 +199,8 @@ describe('DateTimeRangePicker Component', () => {
await userEvent.click(last7DaysOption);
// Expected start and end dates in ISO format
- const expectedStartDateISO = DateTime.now().minus({ days: 7 }).toISO();
- const expectedEndDateISO = DateTime.now().toISO();
+ const expectedStartDateISO = now.minus({ days: 7 }).toISO();
+ const expectedEndDateISO = now.toISO();
// Verify that onChange is called with the correct date range
expect(onChangeMock).toHaveBeenCalledWith({
@@ -206,7 +216,7 @@ describe('DateTimeRangePicker Component', () => {
it('should set the date range for the last 30 days when the "Last 30 Days" preset is selected', async () => {
renderWithTheme();
-
+ const now = DateTime.now().set({ second: 0 });
// Open the presets dropdown
const presetsDropdown = screen.getByLabelText('Date Presets');
await userEvent.click(presetsDropdown);
@@ -216,8 +226,8 @@ describe('DateTimeRangePicker Component', () => {
await userEvent.click(last30DaysOption);
// Expected start and end dates in ISO format
- const expectedStartDateISO = DateTime.now().minus({ days: 30 }).toISO();
- const expectedEndDateISO = DateTime.now().toISO();
+ const expectedStartDateISO = now.minus({ days: 30 }).toISO();
+ const expectedEndDateISO = now.toISO();
// Verify that onChange is called with the correct date range
expect(onChangeMock).toHaveBeenCalledWith({
@@ -233,7 +243,7 @@ describe('DateTimeRangePicker Component', () => {
it('should set the date range for this month when the "This Month" preset is selected', async () => {
renderWithTheme();
-
+ const now = DateTime.now();
// Open the presets dropdown
const presetsDropdown = screen.getByLabelText('Date Presets');
await userEvent.click(presetsDropdown);
@@ -243,8 +253,8 @@ describe('DateTimeRangePicker Component', () => {
await userEvent.click(thisMonthOption);
// Expected start and end dates in ISO format
- const expectedStartDateISO = DateTime.now().startOf('month').toISO();
- const expectedEndDateISO = DateTime.now().endOf('month').toISO();
+ const expectedStartDateISO = now.startOf('month').toISO();
+ const expectedEndDateISO = now.toISO();
// Verify that onChange is called with the correct date range
expect(onChangeMock).toHaveBeenCalledWith({
@@ -269,7 +279,7 @@ describe('DateTimeRangePicker Component', () => {
const lastMonthOption = screen.getByText('Last Month');
await userEvent.click(lastMonthOption);
- const lastMonth = DateTime.now().minus({ months: 1 });
+ const lastMonth = DateTime.now().set({ second: 0 }).minus({ months: 1 });
// Expected start and end dates in ISO format
const expectedStartDateISO = lastMonth.startOf('month').toISO();
@@ -287,8 +297,14 @@ describe('DateTimeRangePicker Component', () => {
).not.toBeInTheDocument();
});
- it('should display the date range fields with empty values when the "Custom Range" preset is selected', async () => {
- renderWithTheme();
+ it('should display the date range fields with 30 min difference values when the "Custom Range" preset is selected', async () => {
+ const timezone = 'Asia/Kolkata';
+ renderWithTheme(
+
+ );
// Open the presets dropdown
const presetsDropdown = screen.getByLabelText('Date Presets');
@@ -297,14 +313,18 @@ describe('DateTimeRangePicker Component', () => {
// Select the "Custom Range" option
const customRange = screen.getByText('Custom');
await userEvent.click(customRange);
+ const format = 'yyyy-MM-dd HH:mm';
+ const now = DateTime.now().set({ second: 0 });
+ const start = now.minus({ minutes: 30 });
// Verify the input fields display the correct values
expect(
screen.getByRole('textbox', { name: 'Start Date and Time' })
- ).toHaveValue('');
+ ).toHaveValue(`${start.toFormat(format)} (GMT+5:30)`);
+
expect(
screen.getByRole('textbox', { name: 'End Date and Time' })
- ).toHaveValue('');
+ ).toHaveValue(`${now.toFormat(format)} (GMT+5:30)`);
expect(screen.getByRole('button', { name: 'Presets' })).toBeInTheDocument();
// Set start date-time to the 15th
diff --git a/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx b/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx
index a83aab1206e..3baadbce7bb 100644
--- a/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx
+++ b/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx
@@ -72,6 +72,7 @@ export interface DateTimeRangePickerProps {
}
type DatePresetType =
+ | '1hour'
| '7days'
| '12hours'
| '24hours'
@@ -83,6 +84,7 @@ type DatePresetType =
const presetsOptions: { label: string; value: DatePresetType }[] = [
{ label: 'Last 30 Minutes', value: '30minutes' },
+ { label: 'Last 1 Hour', value: '1hour' },
{ label: 'Last 12 Hours', value: '12hours' },
{ label: 'Last 24 Hours', value: '24hours' },
{ label: 'Last 7 Days', value: '7days' },
@@ -121,12 +123,12 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
} = {},
sx,
} = props;
-
const [startDateTime, setStartDateTime] = useState(
- startDateTimeValue
+ startDateTimeValue ??
+ DateTime.now().set({ second: 0 }).minus({ minutes: 30 })
);
const [endDateTime, setEndDateTime] = useState(
- endDateTimeValue
+ endDateTimeValue ?? DateTime.now().set({ second: 0 })
);
const [presetValue, setPresetValue] = useState<
| {
@@ -164,7 +166,7 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
};
const handlePresetSelection = (value: DatePresetType) => {
- const now = DateTime.now();
+ const now = DateTime.now().set({ second: 0 });
let newStartDateTime: DateTime | null = null;
let newEndDateTime: DateTime | null = now;
@@ -172,6 +174,9 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
case '30minutes':
newStartDateTime = now.minus({ minutes: 30 });
break;
+ case '1hour':
+ newStartDateTime = now.minus({ hours: 1 });
+ break;
case '12hours':
newStartDateTime = now.minus({ hours: 12 });
break;
@@ -185,24 +190,25 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
newStartDateTime = now.minus({ days: 30 });
break;
case 'this_month':
- newStartDateTime = now.startOf('month');
- newEndDateTime = now.endOf('month');
+ newEndDateTime = DateTime.now();
+ newStartDateTime = newEndDateTime.startOf('month');
break;
case 'last_month':
- const lastMonth = now.minus({ months: 1 });
+ const lastMonth = DateTime.now().minus({ months: 1 });
newStartDateTime = lastMonth.startOf('month');
newEndDateTime = lastMonth.endOf('month');
break;
+
case 'custom_range':
- newStartDateTime = null;
- newEndDateTime = null;
+ newStartDateTime = startDateTime;
+ newEndDateTime = endDateTime;
break;
default:
return;
}
setStartDateTime(newStartDateTime);
- setEndDateTime(newEndDateTime);
+ setEndDateTime(newEndDateTime?.set({ second: 0 }) ?? null);
setPresetValue(
presetsOptions.find((option) => option.value === value) ??
presetsOptions[0]
@@ -247,7 +253,6 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
});
}
};
-
return (
{showPresets ? (
@@ -257,8 +262,8 @@ export const DateTimeRangePicker = (props: DateTimeRangePickerProps) => {
handlePresetSelection(selection.value as DatePresetType);
}
}}
- data-qa-preset="preset-select"
data-testid="preset-select"
+ data-qa-preset="preset-select"
disableClearable
fullWidth
label={presetsLabel}
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
index 4aa133e65cd..9a77d27fb44 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
@@ -14,7 +14,7 @@ import { useAclpPreference } from '../Utils/UserPreference';
import { RenderWidgets } from '../Widget/CloudPulseWidgetRenderer';
import type { CloudPulseMetricsAdditionalFilters } from '../Widget/CloudPulseWidget';
-import type { JWETokenPayLoad, TimeDuration } from '@linode/api-v4';
+import type { DateTimeWithPreset, JWETokenPayLoad } from '@linode/api-v4';
export interface DashboardProperties {
/**
@@ -30,7 +30,7 @@ export interface DashboardProperties {
/**
* time duration to fetch the metrics data in this widget
*/
- duration: TimeDuration;
+ duration: DateTimeWithPreset;
/**
* optional timestamp to pass as react query param to forcefully re-fetch data
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
index 238f81c6189..a2d4574955e 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -4,9 +4,10 @@ import * as React from 'react';
import { GlobalFilters } from '../Overview/GlobalFilters';
import { CloudPulseAppliedFilterRenderer } from '../shared/CloudPulseAppliedFilterRenderer';
+import { defaultTimeDuration } from '../Utils/CloudPulseDateTimePickerUtils';
import { CloudPulseDashboardRenderer } from './CloudPulseDashboardRenderer';
-import type { Dashboard, TimeDuration } from '@linode/api-v4';
+import type { Dashboard, DateTimeWithPreset } from '@linode/api-v4';
export type FilterValueType = number | number[] | string | string[] | undefined;
@@ -19,7 +20,7 @@ export interface DashboardProp {
filterValue: {
[key: string]: FilterValueType;
};
- timeDuration?: TimeDuration;
+ timeDuration?: DateTimeWithPreset;
}
export const CloudPulseDashboardLanding = () => {
@@ -28,7 +29,9 @@ export const CloudPulseDashboardLanding = () => {
label: {},
});
- const [timeDuration, setTimeDuration] = React.useState();
+ const [timeDuration, setTimeDuration] = React.useState(
+ defaultTimeDuration()
+ );
const [dashboard, setDashboard] = React.useState();
@@ -66,7 +69,7 @@ export const CloudPulseDashboardLanding = () => {
}); // clear the filter values on dashboard change
}, []);
const onTimeDurationChange = React.useCallback(
- (timeDurationObj: TimeDuration) => {
+ (timeDurationObj: DateTimeWithPreset) => {
setTimeDuration(timeDurationObj);
},
[]
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
index d91391163e7..92aed1b6c40 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
@@ -8,8 +8,12 @@ import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboar
import { CloudPulseAppliedFilterRenderer } from '../shared/CloudPulseAppliedFilterRenderer';
import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder';
import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect';
+import { CloudPulseDateTimeRangePicker } from '../shared/CloudPulseDateTimeRangePicker';
import { CloudPulseErrorPlaceholder } from '../shared/CloudPulseErrorPlaceholder';
-import { CloudPulseTimeRangeSelect } from '../shared/CloudPulseTimeRangeSelect';
+import {
+ convertToGmt,
+ defaultTimeDuration,
+} from '../Utils/CloudPulseDateTimePickerUtils';
import { FILTER_CONFIG } from '../Utils/FilterConfig';
import {
checkIfFilterBuilderNeeded,
@@ -19,7 +23,7 @@ import {
import { CloudPulseDashboard } from './CloudPulseDashboard';
import type { FilterData, FilterValueType } from './CloudPulseDashboardLanding';
-import type { TimeDuration } from '@linode/api-v4';
+import type { DateTimeWithPreset } from '@linode/api-v4';
export interface CloudPulseDashboardWithFiltersProp {
/**
@@ -44,10 +48,9 @@ export const CloudPulseDashboardWithFilters = React.memo(
label: {},
});
- const [timeDuration, setTimeDuration] = React.useState({
- unit: 'min',
- value: 30,
- });
+ const [timeDuration, setTimeDuration] = React.useState(
+ defaultTimeDuration()
+ );
const [showAppliedFilters, setShowAppliedFilters] = React.useState(
false
@@ -76,8 +79,12 @@ export const CloudPulseDashboardWithFilters = React.memo(
);
const handleTimeRangeChange = React.useCallback(
- (timeDuration: TimeDuration) => {
- setTimeDuration(timeDuration);
+ (timeDuration: DateTimeWithPreset) => {
+ setTimeDuration({
+ ...timeDuration,
+ end: convertToGmt(timeDuration.end),
+ start: convertToGmt(timeDuration.start),
+ });
},
[]
);
@@ -126,27 +133,27 @@ export const CloudPulseDashboardWithFilters = React.memo(
}}
>
-
-
-
-
-
-
-
-
+
+
+
+
+
diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx
index d1591390f97..9625cf0e3bb 100644
--- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.test.tsx
@@ -8,7 +8,7 @@ const mockHandleAnyFilterChange = vi.fn();
const mockHandleDashboardChange = vi.fn();
const mockHandleTimeDurationChange = vi.fn();
const mockHandleToggleAppliedFilter = vi.fn();
-const timeRangeSelectId = 'cloudpulse-time-duration';
+const timeRangeSelectId = 'preset-select';
const setup = () => {
return renderWithTheme(
{
>();
const handleTimeRangeChange = React.useCallback(
- (
- timerDuration: TimeDuration,
- timeDurationValue: string = 'Auto',
- savePref: boolean = false
- ) => {
+ (timeDuration: DateTimeWithPreset, savePref: boolean = false) => {
if (savePref) {
- updatePreferences({ [TIME_DURATION]: timeDurationValue });
+ updatePreferences({ [TIME_DURATION]: timeDuration });
}
- handleTimeDurationChange(timerDuration);
+ handleTimeDurationChange({
+ ...timeDuration,
+ end: convertToGmt(timeDuration.end),
+ start: convertToGmt(timeDuration.start),
+ });
},
[]
);
@@ -94,45 +95,50 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
{selectedDashboard && (
diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseDateTimePickerUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseDateTimePickerUtils.ts
new file mode 100644
index 00000000000..033d602d9af
--- /dev/null
+++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseDateTimePickerUtils.ts
@@ -0,0 +1,22 @@
+import { DateTime } from 'luxon';
+
+import type { DateTimeWithPreset } from '@linode/api-v4';
+
+export const defaultTimeDuration = (): DateTimeWithPreset => {
+ const date = DateTime.now().set({ second: 0 }).setZone('GMT');
+
+ const start = convertToGmt(date.minus({ minutes: 30 }).toISO() ?? '');
+ const end = convertToGmt(date.toISO() ?? '');
+
+ return {
+ end,
+ preset: '30minutes',
+ start,
+ };
+};
+
+export const convertToGmt = (date: string): string => {
+ const dateObject = DateTime.fromISO(date);
+ const updatedDate = dateObject.setZone('GMT');
+ return updatedDate.toISO()?.split('.')[0] + 'Z';
+};
diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts
index 0d1985230b3..c9a40edf80f 100644
--- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.test.ts
@@ -5,6 +5,7 @@ import {
generateMaxUnit,
getDimensionName,
getLabelName,
+ getTimeDurationFromPreset,
mapResourceIdToName,
} from './CloudPulseWidgetUtils';
@@ -235,3 +236,18 @@ it('test mapResourceIdToName method', () => {
expect(mapResourceIdToName('999', resources)).toBe('999');
expect(mapResourceIdToName(undefined, resources)).toBe('');
});
+
+describe('getTimeDurationFromPreset method', () => {
+ it('should return correct time duration for 24hours preset', () => {
+ const result = getTimeDurationFromPreset('24hours');
+ expect(result).toStrictEqual({
+ unit: 'hr',
+ value: 24,
+ });
+ });
+
+ it('shoult return undefined of invalid preset', () => {
+ const result = getTimeDurationFromPreset('15min');
+ expect(result).toBe(undefined);
+ });
+});
diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
index f565b7ae272..a53c42e4c9a 100644
--- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
@@ -18,6 +18,7 @@ import type {
CloudPulseMetricsList,
CloudPulseMetricsRequest,
CloudPulseMetricsResponse,
+ DateTimeWithPreset,
TimeDuration,
Widgets,
} from '@linode/api-v4';
@@ -100,7 +101,7 @@ interface MetricRequestProps {
/**
* time duration for the metrics data
*/
- duration: TimeDuration;
+ duration: DateTimeWithPreset;
/**
* entity ids selected by user
@@ -287,7 +288,15 @@ export const getCloudPulseMetricRequest = (
props: MetricRequestProps
): CloudPulseMetricsRequest => {
const { duration, entityIds, resources, widget } = props;
+ const preset = duration.preset;
+
return {
+ absolute_time_duration:
+ preset !== 'custom_range' &&
+ preset !== 'this_month' &&
+ preset !== 'last_month'
+ ? undefined
+ : { end: duration.end, start: duration.start },
aggregate_function: widget.aggregate_function,
entity_ids: resources
? entityIds.map((id) => parseInt(id, 10))
@@ -295,7 +304,7 @@ export const getCloudPulseMetricRequest = (
filters: undefined,
group_by: widget.group_by,
metric: widget.metric,
- relative_time_duration: duration ?? widget.time_duration,
+ relative_time_duration: getTimeDurationFromPreset(preset),
time_granularity:
widget.time_granularity.unit === 'Auto'
? undefined
@@ -373,3 +382,29 @@ export const getAutocompleteWidgetStyles = (theme: Theme) => ({
width: '90px',
},
});
+
+/**
+ *
+ * @param preset preset for time duration to get the corresponding time duration object
+ * @returns time duration object for the label
+ */
+export const getTimeDurationFromPreset = (
+ preset?: string
+): TimeDuration | undefined => {
+ switch (preset) {
+ case '30minutes':
+ return { unit: 'min', value: 30 };
+ case '1hour':
+ return { unit: 'hr', value: 1 };
+ case '24hours':
+ return { unit: 'hr', value: 24 };
+ case '12hours':
+ return { unit: 'hr', value: 12 };
+ case '7days':
+ return { unit: 'days', value: 7 };
+ case '30days':
+ return { unit: 'days', value: 30 };
+ default:
+ return undefined;
+ }
+};
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
index 2152fa05488..37940ce169e 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
@@ -1,8 +1,9 @@
+import { DateTime } from 'luxon';
+
import { dashboardFactory } from 'src/factories';
import { databaseQueries } from 'src/queries/databases/databases';
import { RESOURCES } from './constants';
-import { deepEqual, getFilters } from './FilterBuilder';
import {
buildXFilter,
checkIfAllMandatoryFiltersAreSelected,
@@ -14,6 +15,7 @@ import {
getResourcesProperties,
getTimeDurationProperties,
} from './FilterBuilder';
+import { deepEqual, getFilters } from './FilterBuilder';
import { FILTER_CONFIG } from './FilterConfig';
import { CloudPulseSelectTypes } from './models';
@@ -198,11 +200,15 @@ it('test checkIfAllMandatoryFiltersAreSelected method', () => {
);
expect(resourceSelectionConfig).toBeDefined();
-
+ const now = DateTime.now();
let result = checkIfAllMandatoryFiltersAreSelected({
dashboard: mockDashboard,
filterValue: { region: 'us-east', resource_id: ['1', '2'] },
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: {
+ end: now.toISO(),
+ preset: '30minutes',
+ start: now.minus({ minutes: 30 }).toISO(),
+ },
});
expect(result).toEqual(true);
@@ -210,7 +216,11 @@ it('test checkIfAllMandatoryFiltersAreSelected method', () => {
result = checkIfAllMandatoryFiltersAreSelected({
dashboard: mockDashboard,
filterValue: { region: 'us-east' },
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: {
+ end: now.toISO(),
+ preset: '30minutes',
+ start: now.minus({ minutes: 30 }).toISO(),
+ },
});
expect(result).toEqual(false);
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
index f3460a97b88..122135e4102 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
@@ -25,6 +25,7 @@ import type { CloudPulseServiceTypeFilters } from './models';
import type {
AclpConfig,
Dashboard,
+ DateTimeWithPreset,
Filter,
Filters,
TimeDuration,
@@ -45,7 +46,7 @@ interface CloudPulseMandatoryFilterCheckProps {
filterValue: {
[key: string]: FilterValueType;
};
- timeDuration: TimeDuration | undefined;
+ timeDuration: DateTimeWithPreset | undefined;
}
/**
* This function helps in building the properties needed for tags selection component
@@ -65,8 +66,8 @@ export const getTagsProperties = (
return {
defaultValue: preferences?.[TAGS],
handleTagsChange,
- optional: props.config.configuration.isOptional,
label,
+ optional: props.config.configuration.isOptional,
placeholder,
resourceType: dashboard.service_type,
savePreferences: !isServiceAnalyticsIntegration,
diff --git a/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.test.ts b/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.test.ts
index 56b4e1e060f..cc933eae00c 100644
--- a/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.test.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.test.ts
@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon';
+
import { dashboardFactory } from 'src/factories';
import {
@@ -9,7 +11,9 @@ import {
} from './ReusableDashboardFilterUtils';
const mockDashboard = dashboardFactory.build();
-
+const end = DateTime.now();
+const start = end.minus({ minutes: 30 });
+const preset = '30minutes';
it('test getDashboardProperties method', () => {
const result = getDashboardProperties({
dashboardObj: mockDashboard,
@@ -29,12 +33,15 @@ it('test checkMandatoryFiltersSelected method for time duration and resource', (
resource: 0,
});
expect(result).toBe(false);
-
result = checkMandatoryFiltersSelected({
dashboardObj: mockDashboard,
filterValue: { region: 'us-east' },
resource: 1,
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: {
+ end: end.toISO(),
+ preset,
+ start: start.toISO(),
+ },
});
expect(result).toBe(true);
@@ -52,7 +59,7 @@ it('test checkMandatoryFiltersSelected method for time duration and resource', (
dashboardObj: mockDashboard,
filterValue: { region: 'us-east' },
resource: 0, // here resource is 0, so it should return false
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: { end: end.toISO(), preset, start: start.toISO() },
});
expect(result).toBe(false);
@@ -64,7 +71,7 @@ it('test checkMandatoryFiltersSelected method for role', () => {
dashboardObj: { ...mockDashboard, service_type: 'dbaas' },
filterValue: { region: 'us-east' }, // here role is missing
resource: 1,
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: { end: end.toISO(), preset, start: start.toISO() },
});
expect(result).toBe(false);
@@ -73,7 +80,7 @@ it('test checkMandatoryFiltersSelected method for role', () => {
dashboardObj: { ...mockDashboard, service_type: 'dbaas' },
filterValue: { node_type: 'primary', region: 'us-east' },
resource: 1,
- timeDuration: { unit: 'min', value: 30 },
+ timeDuration: { end: end.toISO(), preset, start: start.toISO() },
});
expect(result).toBe(true);
diff --git a/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.ts b/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.ts
index e6f28fc5341..790d1083050 100644
--- a/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/ReusableDashboardFilterUtils.ts
@@ -1,9 +1,10 @@
+import { defaultTimeDuration } from './CloudPulseDateTimePickerUtils';
import { FILTER_CONFIG } from './FilterConfig';
import type { DashboardProperties } from '../Dashboard/CloudPulseDashboard';
import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
import type { CloudPulseMetricsAdditionalFilters } from '../Widget/CloudPulseWidget';
-import type { Dashboard, TimeDuration } from '@linode/api-v4';
+import type { Dashboard, DateTimeWithPreset } from '@linode/api-v4';
/**
* This interface is used to get method parameters for this utility
@@ -24,7 +25,7 @@ interface ReusableDashboardFilterUtilProps {
/**
* The selected time duration
*/
- timeDuration?: TimeDuration;
+ timeDuration?: DateTimeWithPreset;
}
/**
@@ -42,7 +43,7 @@ export const getDashboardProperties = (
resource,
}),
dashboardId: dashboardObj.id,
- duration: timeDuration ?? { unit: 'min', value: 30 },
+ duration: timeDuration ?? defaultTimeDuration(),
resources: [String(resource)],
savePref: false,
};
diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.test.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.test.tsx
index 476ad9997ac..faac2e496ae 100644
--- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.test.tsx
@@ -1,4 +1,5 @@
import userEvent from '@testing-library/user-event';
+import { DateTime } from 'luxon';
import React from 'react';
import {
@@ -25,7 +26,11 @@ const props: CloudPulseWidgetProperties = {
scrape_interval: '2m',
unit: 'percent',
},
- duration: { unit: 'min', value: 30 },
+ duration: {
+ end: DateTime.now().toISO(),
+ preset: '30minutes',
+ start: DateTime.now().minus({ minutes: 30 }).toISO(),
+ },
entityIds: ['1', '2'],
isJweTokenFetching: false,
resources: [
diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
index e71e19e68f1..20631af0a1f 100644
--- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
@@ -23,12 +23,8 @@ import { ZoomIcon } from './components/Zoomer';
import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
import type { CloudPulseResources } from '../shared/CloudPulseResourcesSelect';
-import type { Widgets } from '@linode/api-v4';
-import type {
- MetricDefinition,
- TimeDuration,
- TimeGranularity,
-} from '@linode/api-v4';
+import type { DateTimeWithPreset, Widgets } from '@linode/api-v4';
+import type { MetricDefinition, TimeGranularity } from '@linode/api-v4';
import type { DataSet } from 'src/components/AreaChart/AreaChart';
import type {
AreaProps,
@@ -61,7 +57,7 @@ export interface CloudPulseWidgetProperties {
/**
* time duration to fetch the metrics data in this widget
*/
- duration: TimeDuration;
+ duration: DateTimeWithPreset;
/**
* entity ids selected by user to show metrics for
@@ -269,9 +265,10 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
}
const metricsApiCallError = error?.[0]?.reason;
-
- const tickFormat =
- duration.unit === 'min' || duration.unit === 'hr' ? 'hh:mm a' : 'LLL dd';
+ const start = DateTime.fromISO(duration.start, { zone: 'GMT' });
+ const end = DateTime.fromISO(duration.end, { zone: 'GMT' });
+ const hours = end.diff(start, 'hours').hours;
+ const tickFormat = hours <= 24 ? 'hh:mm a' : 'LLL dd';
return (
diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidgetRenderer.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidgetRenderer.tsx
index 167d6aa80b8..eb429ed4a0f 100644
--- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidgetRenderer.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidgetRenderer.tsx
@@ -19,17 +19,17 @@ import type {
import type {
AclpConfig,
Dashboard,
+ DateTimeWithPreset,
JWEToken,
MetricDefinition,
ResourcePage,
- TimeDuration,
Widgets,
} from '@linode/api-v4';
interface WidgetProps {
additionalFilters?: CloudPulseMetricsAdditionalFilters[];
dashboard?: Dashboard | undefined;
- duration: TimeDuration;
+ duration: DateTimeWithPreset;
isJweTokenFetching: boolean;
jweToken?: JWEToken | undefined;
manualRefreshTimeStamp?: number;
@@ -171,7 +171,7 @@ export const RenderWidgets = React.memo(
/>
);
} else {
- return ;
+ return ;
}
})}
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDateTimeRangePicker.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDateTimeRangePicker.tsx
new file mode 100644
index 00000000000..c4209d1711e
--- /dev/null
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDateTimeRangePicker.tsx
@@ -0,0 +1,86 @@
+import { DateTime } from 'luxon';
+import React from 'react';
+
+import { DateTimeRangePicker } from 'src/components/DatePicker/DateTimeRangePicker';
+import { useProfile } from 'src/queries/profile/profile';
+
+import type { DateTimeWithPreset, FilterValue } from '@linode/api-v4';
+
+interface CloudPulseDateTimeRangePickerProps {
+ defaultValue?: Partial;
+
+ handleStatsChange: (
+ timeDuration: DateTimeWithPreset,
+ savePref?: boolean
+ ) => void;
+ savePreferences?: boolean;
+}
+
+export const CloudPulseDateTimeRangePicker = React.memo(
+ (props: CloudPulseDateTimeRangePickerProps) => {
+ const { defaultValue, handleStatsChange, savePreferences } = props;
+ const { data: profile } = useProfile();
+ const timezone = profile?.timezone ?? DateTime.local().zoneName;
+ const defaultSelected = defaultValue as DateTimeWithPreset;
+ React.useEffect(() => {
+ if (defaultSelected) {
+ handleStatsChange(defaultSelected);
+ }
+ }, []);
+
+ const handleDateChange = (params: {
+ end: null | string;
+ preset?: string;
+ start: null | string;
+ timezone?: null | string;
+ }) => {
+ const { end, preset, start } = params;
+ if (!end || !start || !preset) {
+ return;
+ }
+ handleStatsChange(
+ {
+ end,
+ preset,
+ start,
+ },
+ savePreferences
+ );
+ };
+
+ const end = defaultSelected?.start
+ ? DateTime.fromISO(defaultSelected?.end, { zone: timezone })
+ : undefined;
+ const start = defaultSelected?.end
+ ? DateTime.fromISO(defaultSelected?.start, { zone: timezone })
+ : end;
+
+ return (
+
+ );
+ }
+);
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx
index ec6c413ebb5..33e546b35cc 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseMonitor/DatabaseMonitor.test.tsx
@@ -1,7 +1,9 @@
import { waitForElementToBeRemoved } from '@testing-library/react';
import * as React from 'react';
+
import { databaseFactory } from 'src/factories';
import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
import { DatabaseMonitor } from './DatabaseMonitor';
const loadingTestId = 'circle-progress';
@@ -24,6 +26,6 @@ describe('database monitor', () => {
);
expect(getByTestId(loadingTestId)).toBeInTheDocument();
await waitForElementToBeRemoved(getByTestId(loadingTestId));
- expect(getByTestId('cloudpulse-time-duration')).toBeInTheDocument();
+ expect(getByTestId('preset-select')).toBeInTheDocument();
});
});
diff --git a/packages/ui/.changeset/pr-11573-upcoming-features-1738670291812.md b/packages/ui/.changeset/pr-11573-upcoming-features-1738670291812.md
new file mode 100644
index 00000000000..84496cffec6
--- /dev/null
+++ b/packages/ui/.changeset/pr-11573-upcoming-features-1738670291812.md
@@ -0,0 +1,5 @@
+---
+"@linode/ui": Upcoming Features
+---
+
+Add `MuiOutlinedInput` styling in `dark.ts` and `light.ts` ([#11573](https://github.com/linode/manager/pull/11573))
diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
index 17b6c889ca7..47dece3f17e 100644
--- a/packages/ui/src/foundations/themes/dark.ts
+++ b/packages/ui/src/foundations/themes/dark.ts
@@ -629,6 +629,56 @@ export const darkTheme: ThemeOptions = {
selected: {},
},
},
+ MuiOutlinedInput: {
+ styleOverrides: {
+ input: {
+ '&.Mui-disabled': {
+ WebkitTextFillColor: 'unset !important',
+ },
+ },
+ root: {
+ '& svg': {
+ color: TextField.Default.InfoIcon,
+ },
+ '&.Mui-disabled': {
+ '& svg': {
+ color: TextField.Disabled.InfoIcon,
+ },
+ backgroundColor: TextField.Disabled.Background,
+ borderColor: TextField.Disabled.Border,
+ color: TextField.Disabled.Text,
+ },
+ '&.Mui-error': {
+ '& svg': {
+ color: TextField.Error.Icon,
+ },
+ backgroundColor: TextField.Error.Background,
+ borderColor: TextField.Error.Border,
+ color: TextField.Error.Text,
+ },
+ '&.Mui-focused': {
+ '& svg': {
+ color: TextField.Focus.Icon,
+ },
+ backgroundColor: TextField.Focus.Background,
+ borderColor: TextField.Focus.Border,
+ boxShadow: `0 0 2px 1px ${Color.Neutrals[100]}`,
+ color: TextField.Focus.Text,
+ },
+ '&.Mui-hover': {
+ '& svg': {
+ color: TextField.Hover.Icon,
+ },
+ backgroundColor: TextField.Hover.Background,
+ borderColor: TextField.Hover.Border,
+ color: TextField.Hover.Text,
+ },
+ backgroundColor: TextField.Default.Background,
+ borderColor: TextField.Default.Border,
+ color: TextField.Filled.Text,
+ },
+ },
+ },
MuiPaper: {
styleOverrides: {
outlined: {
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index bb3a0eb4d46..79d25a6875b 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -1052,6 +1052,71 @@ export const lightTheme: ThemeOptions = {
selected: {},
},
},
+ MuiOutlinedInput: {
+ styleOverrides: {
+ input: {
+ '&::placeholder': {
+ color: Color.Neutrals[50],
+ },
+ boxSizing: 'border-box',
+ [breakpoints.only('xs')]: {
+ fontSize: '1rem',
+ },
+ fontSize: '0.9rem',
+ padding: 8,
+ },
+ root: {
+ '& .MuiInputAdornment-root': {
+ margin: 0,
+ },
+ '& fieldset': {
+ border: 'none',
+ },
+ '& svg': {
+ '&:hover': {
+ color: Color.Brand[60],
+ },
+ color: primaryColors.main,
+ fontSize: 18,
+ },
+ '&.Mui-disabled': {
+ backgroundColor: Color.Neutrals[5],
+ borderColor: Color.Neutrals[40],
+ color: 'rgba(0, 0, 0, 0.75)',
+ input: {
+ cursor: 'not-allowed',
+ },
+ opacity: 0.5,
+ },
+ '&.Mui-error': {
+ borderColor: Interaction.Border.Error,
+ },
+ '&.Mui-focused': {
+ '& .select-option-icon': {
+ paddingLeft: `30px !important`,
+ },
+ borderColor: primaryColors.main,
+ boxShadow: `0 0 2px 1px ${Color.Neutrals[30]}`,
+ },
+ '&.affirmative': {
+ borderColor: Color.Green[70],
+ },
+ alignItems: 'center',
+ backgroundColor: Color.Neutrals.White,
+ border: `1px solid ${Color.Neutrals[40]}`,
+ boxSizing: 'border-box',
+ [breakpoints.down('xs')]: {
+ maxWidth: '100%',
+ width: '100%',
+ },
+ color: primaryColors.text,
+ lineHeight: 1,
+ maxWidth: inputMaxWidth,
+ minHeight: 34,
+ transition: 'border-color 225ms ease-in-out',
+ },
+ },
+ },
MuiPaper: {
styleOverrides: {
outlined: {
From 8914a3b2a55288f1bbeb1f8eee6f910d1851d9e4 Mon Sep 17 00:00:00 2001
From: agorthi-akamai
Date: Thu, 6 Feb 2025 09:34:03 +0530
Subject: [PATCH 02/57] test: [DI-22613] - ACLP: Automate Resource Details and
Notification Changes with enhanced test coverage (#11596)
* adding resource and add chanel
* adding resource and add chanel
* adding resource and add chanel
* DI-22613:Automate Resource Details and Notification Changes
* DI-22613:Automate Resource Details and Notification Changes
* add change set
* Address review feedback
---
.../pr-11596-tests-1738650165686.md | 5 +
.../cloudpulse/alert-show-details.spec.ts | 169 +++++++++++++++---
.../cypress/support/intercepts/cloudpulse.ts | 25 ++-
.../Alerts/AlertsDetail/AlertDetail.tsx | 2 +
4 files changed, 179 insertions(+), 22 deletions(-)
create mode 100644 packages/manager/.changeset/pr-11596-tests-1738650165686.md
diff --git a/packages/manager/.changeset/pr-11596-tests-1738650165686.md b/packages/manager/.changeset/pr-11596-tests-1738650165686.md
new file mode 100644
index 00000000000..65d90d41447
--- /dev/null
+++ b/packages/manager/.changeset/pr-11596-tests-1738650165686.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+ACLP: Automate Resource Details and Notification Changes with enhanced test coverage ([#11596](https://github.com/linode/manager/pull/11596))
diff --git a/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
index ff6a37eeb12..58a7607778d 100644
--- a/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
+++ b/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
@@ -1,7 +1,7 @@
/**
- * @file Integration Tests for the CloudPulse DBaaS Alerts Show Detail Page.
+ * @file Integration Tests for the CloudPulse Alerts Show Detail Page.
*
- * This file contains Cypress tests that validate the display and content of the DBaaS Alerts Show Detail Page in the CloudPulse application.
+ * This file contains Cypress tests that validate the display and content of the Alerts Show Detail Page in the CloudPulse application.
* It ensures that all alert details, criteria, and resource information are displayed correctly.
*/
import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
@@ -9,12 +9,15 @@ import {
accountFactory,
alertFactory,
alertRulesFactory,
+ databaseFactory,
+ notificationChannelFactory,
regionFactory,
} from 'src/factories';
import { mockGetAccount } from 'support/intercepts/account';
import type { Flags } from 'src/featureFlags';
import {
+ mockGetAlertChannels,
mockGetAlertDefinitions,
mockGetAllAlertDefinitions,
} from 'support/intercepts/cloudpulse';
@@ -27,15 +30,39 @@ import {
aggregationTypeMap,
} from 'support/constants/alert';
import { ui } from 'support/ui';
+import { Database } from '@linode/api-v4';
+import { mockGetDatabases } from 'support/intercepts/databases';
const flags: Partial = { aclp: { enabled: true, beta: true } };
const mockAccount = accountFactory.build();
+const regions = [
+ regionFactory.build({
+ capabilities: ['Managed Databases'],
+ id: 'us-ord',
+ label: 'Chicago, IL',
+ country: 'us',
+ }),
+ regionFactory.build({
+ capabilities: ['Managed Databases'],
+ id: 'us-east',
+ label: 'Newark',
+ country: 'us',
+ }),
+];
+
+const databases: Database[] = databaseFactory.buildList(5).map((db, index) => ({
+ ...db,
+ type: 'MySQL',
+ region: regions[index % regions.length].id,
+ engine: 'mysql',
+}));
+
const alertDetails = alertFactory.build({
service_type: 'dbaas',
severity: 1,
status: 'enabled',
type: 'system',
- entity_ids: ['1', '2'],
+ entity_ids: databases.slice(0, 4).map((db) => db.id.toString()),
rule_criteria: { rules: alertRulesFactory.buildList(2) },
});
const {
@@ -49,24 +76,23 @@ const {
updated,
} = alertDetails;
const { rules } = rule_criteria;
-const regions = [
- regionFactory.build({
- capabilities: ['Managed Databases'],
- id: 'us-ord',
- label: 'Chicago, IL',
- }),
- regionFactory.build({
- capabilities: ['Managed Databases'],
- id: 'us-east',
- label: 'US, Newark',
- }),
-];
+const notificationChannels = notificationChannelFactory.build();
+const verifyRowOrder = (expectedIds: string[]) => {
+ cy.get('[data-qa-alert-row]').then(($rows) => {
+ const alertRowIds = $rows
+ .map((index, row) => row.getAttribute('data-qa-alert-row'))
+ .get();
+ expectedIds.forEach((expectedId, index) => {
+ expect(alertRowIds[index]).to.equal(expectedId);
+ });
+ });
+};
/**
- * Integration tests for the CloudPulse DBaaS Alerts Detail Page, ensuring that the alert details, criteria, and resource information are correctly displayed and validated, including various fields like name, description, status, severity, and trigger conditions.
+ * Integration tests for the CloudPulse Alerts Detail Page, ensuring that the alert details, criteria, and resource information are correctly displayed and validated, including various fields like name, description, status, severity, and trigger conditions.
*/
-describe('Integration Tests for Dbaas Alert Show Detail Page', () => {
+describe('Integration Tests for Alert Show Detail Page', () => {
beforeEach(() => {
mockAppendFeatureFlags(flags);
mockGetAccount(mockAccount);
@@ -75,6 +101,8 @@ describe('Integration Tests for Dbaas Alert Show Detail Page', () => {
mockGetAlertDefinitions(service_type, id, alertDetails).as(
'getDBaaSAlertDefinitions'
);
+ mockGetDatabases(databases).as('getMockedDbaasDatabases');
+ mockGetAlertChannels([notificationChannels]);
});
it('navigates to the Show Details page from the list page', () => {
@@ -106,6 +134,7 @@ describe('Integration Tests for Dbaas Alert Show Detail Page', () => {
cy.visitWithLogin(
`/monitor/alerts/definitions/detail/${service_type}/${id}`
);
+ cy.wait(['@getDBaaSAlertDefinitions', '@getMockedDbaasDatabases']);
// Validating contents of Overview Section
cy.get('[data-qa-section="Overview"]').within(() => {
@@ -121,10 +150,9 @@ describe('Integration Tests for Dbaas Alert Show Detail Page', () => {
cy.findByText('Status:').should('be.visible');
cy.findByText('Enabled').should('be.visible');
- cy.get('[data-qa-item="Severity"]').within(() => {
- cy.findByText('Severity:').should('be.visible');
- cy.findByText(severityMap[severity]).should('be.visible');
- });
+ cy.findByText('Severity:').should('be.visible');
+ cy.findByText(severityMap[severity]).should('be.visible');
+
// Validate Service field
cy.findByText('Service:').should('be.visible');
cy.findByText('Databases').should('be.visible');
@@ -235,5 +263,104 @@ describe('Integration Tests for Dbaas Alert Show Detail Page', () => {
.should('be.visible')
.should('have.text', 'consecutive occurrences.');
});
+ // Validate the Resources section (Resource and Region columns)
+ cy.get('[data-qa-section="Resources"]').within(() => {
+ ui.heading
+ .findByText('resource')
+ .scrollIntoView()
+ .should('be.visible')
+ .should('have.text', 'Resource');
+
+ ui.heading
+ .findByText('region')
+ .should('be.visible')
+ .should('have.text', 'Region');
+
+ cy.findByPlaceholderText('Search for a Region or Resource').should(
+ 'be.visible'
+ );
+
+ cy.findByPlaceholderText('Select Regions').should('be.visible');
+
+ cy.get('[data-qa-alert-row]').should('have.length', 4);
+
+ // Validate resource-region mapping for each row in the table
+
+ const regionMap = new Map(regions.map((r) => [r.id, r.label]));
+
+ cy.get('[data-qa-alert-row]')
+ .should('have.length', 4)
+ .each((row, index) => {
+ const db = databases[index];
+ const rowNumber = index + 1;
+ const regionLabel = regionMap.get(db.region) || 'Unknown Region';
+
+ cy.wrap(row).within(() => {
+ cy.get(`[data-qa-alert-cell="${rowNumber}_resource"]`).should(
+ 'have.text',
+ db.label
+ );
+
+ cy.get(`[data-qa-alert-cell="${rowNumber}_region"]`).should(
+ 'have.text',
+ `US, ${regionLabel} (${db.region})`
+ );
+ });
+ });
+
+ // Sorting by Resource and Region columns
+ ui.heading.findByText('resource').should('be.visible').click();
+ verifyRowOrder(['4', '3', '2', '1']);
+
+ ui.heading.findByText('resource').should('be.visible').click();
+ verifyRowOrder(['1', '2', '3', '4']);
+
+ ui.heading.findByText('region').should('be.visible').click();
+ verifyRowOrder(['2', '4', '1', '3']);
+
+ ui.heading.findByText('region').should('be.visible').click();
+ verifyRowOrder(['1', '3', '2', '4']);
+
+ // Search by Resource
+ cy.findByPlaceholderText('Search for a Region or Resource')
+ .should('be.visible')
+ .type(databases[0].label);
+
+ cy.get('[data-qa-alert-table="true"]')
+ .find('[data-qa-alert-row]')
+ .should('have.length', 1);
+
+ cy.findByText(databases[0].label).should('be.visible');
+ [1, 2, 3].forEach((i) =>
+ cy.findByText(databases[i].label).should('not.exist')
+ );
+
+ // Search by region
+ cy.findByPlaceholderText('Search for a Region or Resource').clear();
+
+ ui.regionSelect.find().click().type(`${regions[0].label}{enter}`);
+ ui.regionSelect.find().click();
+
+ cy.get('[data-qa-alert-table="true"]')
+ .find('[data-qa-alert-row]')
+ .should('have.length', 2);
+
+ [0, 2].forEach((i) =>
+ cy.get(`[data-qa-alert-cell="${i}_region"]`).should('not.exist')
+ );
+ [1, 3].forEach((i) =>
+ cy.get(`[data-qa-alert-cell="${i}_region"]`).should('be.visible')
+ );
+ });
+ // Validate Notification Channels Section
+ cy.get('[data-qa-section="Notification Channels"]').within(() => {
+ cy.findByText('Type:').should('be.visible');
+ cy.findByText('Email').should('be.visible');
+ cy.findByText('Channel:').should('be.visible');
+ cy.findByText('Channel-1').should('be.visible');
+ cy.findByText('To:').should('be.visible');
+ cy.findByText('test@test.com').should('be.visible');
+ cy.findByText('test2@test.com').should('be.visible');
+ });
});
});
diff --git a/packages/manager/cypress/support/intercepts/cloudpulse.ts b/packages/manager/cypress/support/intercepts/cloudpulse.ts
index c3bece04795..fd0ad181814 100644
--- a/packages/manager/cypress/support/intercepts/cloudpulse.ts
+++ b/packages/manager/cypress/support/intercepts/cloudpulse.ts
@@ -10,7 +10,7 @@ import { paginateResponse } from 'support/util/paginate';
import { randomString } from 'support/util/random';
import { makeResponse } from 'support/util/response';
-import type { Alert } from '@linode/api-v4';
+import type { Alert, NotificationChannel } from '@linode/api-v4';
import type {
CloudPulseMetricsResponse,
Dashboard,
@@ -307,3 +307,26 @@ export const mockGetAllAlertDefinitions = (
paginateResponse(alert)
);
};
+
+/**
+ * Mocks the API response for retrieving all alert channels from the monitoring service.
+ * This function intercepts a GET request to fetch alert channels and returns a mock
+ * response, simulating the behavior of the real API by providing a list of alert channels.
+ *
+ * The mock response is created using the provided `channel` object, allowing the test
+ * to simulate various scenarios with different alert channel configurations.
+ *
+ * @param {NotificationChannel} channel - An object representing the notification channel to mock as the response.
+ * This should represent the alert channel being fetched by the API.
+ *
+ * @returns {Cypress.Chainable} - A Cypress chainable object that represents the intercepted request.
+ */
+export const mockGetAlertChannels = (
+ channel: NotificationChannel[]
+): Cypress.Chainable => {
+ return cy.intercept(
+ 'GET',
+ apiMatcher('/monitor/alert-channels*'),
+ paginateResponse(channel)
+ );
+};
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
index 9e7c723b3e4..553dc126cfc 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
@@ -121,6 +121,7 @@ export const AlertDetail = () => {
...getAlertBoxStyles(theme),
overflow: 'auto',
}}
+ data-qa-section="Resources"
>
{
...getAlertBoxStyles(theme),
overflow: 'auto',
}}
+ data-qa-section="Notification Channels"
>
id)}
From c14b95b9683fb9cbb35239c44f3b371a739af15d Mon Sep 17 00:00:00 2001
From: Ankita
Date: Thu, 6 Feb 2025 10:31:37 +0530
Subject: [PATCH 03/57] upcoming: [DI-22941] - Update dependency and order for
tags (#11615)
* upcoming: [DI-22941] - Update dependency and order for tags
* upcoming: [DI-22941] - Type fix
* upcoming: [DI-22941] - Xfilter update
* upcoming: [DI-22941] - Small revert
* upcoming: [DI-22941] - Preferences fix
* upcoming: [DI-22941] - PR comment
* upcoming: [DI-22941] - Mock enhancement
* upcoming: [DI-22941]: Preferences fix for resources
* upcoming: [DI-22941] - UT fix
* upcoming: [DI-22941] - Linting fix
* upcoming: [DI-22941] - Comments
* upcoming: [DI-22941] - Comments
* upcoming: [DI-22941] - Comments
* upcoming: [DI-22941] - Comments
* upcoming: [DI-22941] - UT fix
* upcoming: [DI-22941] - Add changeset
* upcoming: [DI-22941] - PR comment - improve quality of unit test
* upcoming: [DI-22941] - PR comment - improve comment
---------
Co-authored-by: vmangalr
---
...r-11615-upcoming-features-1738754714037.md | 5 ++
.../CloudPulse/Utils/FilterBuilder.test.ts | 90 +++++++++++++++++++
.../CloudPulse/Utils/FilterBuilder.ts | 32 ++++++-
.../features/CloudPulse/Utils/FilterConfig.ts | 23 ++---
.../CloudPulseDashboardFilterBuilder.tsx | 3 +
.../shared/CloudPulseResourcesSelect.tsx | 4 +
.../shared/CloudPulseTagsFilter.test.tsx | 79 +++++++++-------
.../shared/CloudPulseTagsFilter.tsx | 57 +++++++-----
packages/manager/src/mocks/serverHandlers.ts | 12 +++
9 files changed, 238 insertions(+), 67 deletions(-)
create mode 100644 packages/manager/.changeset/pr-11615-upcoming-features-1738754714037.md
diff --git a/packages/manager/.changeset/pr-11615-upcoming-features-1738754714037.md b/packages/manager/.changeset/pr-11615-upcoming-features-1738754714037.md
new file mode 100644
index 00000000000..e0be2fc553b
--- /dev/null
+++ b/packages/manager/.changeset/pr-11615-upcoming-features-1738754714037.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Tags dependency and filtering based on Region in CloudPulse ([#11615](https://github.com/linode/manager/pull/11615))
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
index 37940ce169e..36048768e50 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.test.ts
@@ -13,6 +13,7 @@ import {
getMetricsCallCustomFilters,
getRegionProperties,
getResourcesProperties,
+ getTagsProperties,
getTimeDurationProperties,
} from './FilterBuilder';
import { deepEqual, getFilters } from './FilterBuilder';
@@ -52,6 +53,38 @@ it('test getRegionProperties method', () => {
}
});
+it('test getTagsProperties', () => {
+ const tagsConfig = linodeConfig?.filters.find(
+ (filterObj) => filterObj.name === 'Tags'
+ );
+
+ expect(tagsConfig).toBeDefined();
+
+ if (tagsConfig) {
+ const {
+ disabled,
+ handleTagsChange,
+ label,
+ region,
+ resourceType,
+ } = getTagsProperties(
+ {
+ config: tagsConfig,
+ dashboard: mockDashboard,
+ dependentFilters: { region: 'us-east' },
+ isServiceAnalyticsIntegration: true,
+ },
+ vi.fn()
+ );
+ const { name } = tagsConfig.configuration;
+ expect(handleTagsChange).toBeDefined();
+ expect(disabled).toEqual(false);
+ expect(label).toEqual(name);
+ expect(region).toEqual('us-east');
+ expect(resourceType).toEqual('linode');
+ }
+});
+
it('test getTimeDuratonProperties method', () => {
const timeDurationConfig = linodeConfig?.filters.find(
({ name }) => name === 'Time Range'
@@ -145,6 +178,46 @@ it('test getResourceSelectionProperties method with disabled true', () => {
}
});
+describe('checkIfWeNeedToDisableFilterByFilterKey', () => {
+ // resources filter has region as mandatory and tags as an optional filter, this should reflect in the dependent filters
+ it('should enable filter when dependent filter region is provided', () => {
+ const result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'resource_id',
+ { region: 'us-east' },
+ mockDashboard
+ );
+ expect(result).toEqual(false);
+ });
+
+ it('should disable filter when dependent filter region is undefined', () => {
+ const result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'resource_id',
+ { region: undefined },
+ mockDashboard
+ );
+ expect(result).toEqual(true);
+ });
+
+ it('should disable filter when no dependent filters are provided', () => {
+ const result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'resource_id',
+ {},
+ mockDashboard
+ );
+ expect(result).toEqual(true);
+ });
+
+ it('should disable filter when required dependent filter is undefined in dependent filters but defined in preferences', () => {
+ const result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'resource_id',
+ { region: 'us-east', tags: undefined },
+ mockDashboard,
+ { region: 'us-east', tags: ['tag-1'] } // tags are defined in preferences which confirms that this optional filter was selected
+ );
+ expect(result).toEqual(true);
+ });
+});
+
it('test checkIfWeNeedToDisableFilterByFilterKey method all cases', () => {
let result = checkIfWeNeedToDisableFilterByFilterKey(
'resource_id',
@@ -169,6 +242,23 @@ it('test checkIfWeNeedToDisableFilterByFilterKey method all cases', () => {
);
expect(result).toEqual(true);
+
+ result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'resource_id',
+ { region: 'us-east', tags: undefined },
+ mockDashboard,
+ { ['region']: 'us-east', ['tags']: ['tag-1'] }
+ );
+
+ expect(result).toEqual(true); // disabled is true as tags are not updated in dependent filters
+
+ result = checkIfWeNeedToDisableFilterByFilterKey(
+ 'tags',
+ { region: undefined },
+ mockDashboard
+ );
+
+ expect(result).toEqual(true);
});
it('test buildXfilter method', () => {
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
index 122135e4102..1506b679bac 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts
@@ -54,6 +54,7 @@ interface CloudPulseMandatoryFilterCheckProps {
* @param config - accepts a CloudPulseServiceTypeFilters of tag key
* @param handleTagsChange - the callback when we select new tag
* @param dashboard - the selected dashboard's service type
+ * @param dependentFilters - tags are dependent on region filter, we need this for disabling the tags selection component
* @param isServiceAnalyticsIntegration - only if this is false, we need to save preferences , else no need
* @returns CloudPulseTagSelectProps
*/
@@ -61,14 +62,26 @@ export const getTagsProperties = (
props: CloudPulseFilterProperties,
handleTagsChange: (tags: CloudPulseTags[], savePref?: boolean) => void
): CloudPulseTagsSelectProps => {
- const { name: label, placeholder } = props.config.configuration;
- const { dashboard, isServiceAnalyticsIntegration, preferences } = props;
+ const { filterKey, name: label, placeholder } = props.config.configuration;
+ const {
+ dashboard,
+ dependentFilters,
+ isServiceAnalyticsIntegration,
+ preferences,
+ } = props;
return {
defaultValue: preferences?.[TAGS],
+ disabled: checkIfWeNeedToDisableFilterByFilterKey(
+ filterKey,
+ dependentFilters ?? {},
+ dashboard,
+ preferences
+ ),
handleTagsChange,
label,
optional: props.config.configuration.isOptional,
placeholder,
+ region: dependentFilters?.[REGION],
resourceType: dashboard.service_type,
savePreferences: !isServiceAnalyticsIntegration,
};
@@ -133,7 +146,8 @@ export const getResourcesProperties = (
disabled: checkIfWeNeedToDisableFilterByFilterKey(
filterKey,
dependentFilters ?? {},
- dashboard
+ dashboard,
+ preferences
),
handleResourcesSelection: handleResourceChange,
label,
@@ -282,7 +296,8 @@ export const checkIfWeNeedToDisableFilterByFilterKey = (
dependentFilters: {
[key: string]: FilterValueType | TimeDuration;
},
- dashboard: Dashboard
+ dashboard: Dashboard,
+ preferences?: AclpConfig
): boolean | undefined => {
if (dashboard?.service_type) {
const serviceTypeConfig = FILTER_CONFIG.get(dashboard.service_type);
@@ -304,6 +319,15 @@ export const checkIfWeNeedToDisableFilterByFilterKey = (
return filter.configuration.dependency?.some((dependent) => {
const dependentFilter = dependentFilters[dependent];
+ if (
+ preferences &&
+ preferences[dependent] &&
+ (!dependentFilter ||
+ (Array.isArray(dependentFilter) && dependentFilter.length === 0))
+ ) {
+ return true; // Since filters are set one by one, disabled will be true until the values that are defined inside the preferences are populated in the dependent filters as well
+ }
+
return (
!optionalFilters.has(dependent) &&
(!dependentFilter ||
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
index 3ac7cf87bdc..62c1d5dca2c 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
@@ -11,30 +11,31 @@ export const LINODE_CONFIG: Readonly = {
filters: [
{
configuration: {
- filterKey: 'tags',
+ filterKey: 'region',
filterType: 'string',
isFilterable: false,
isMetricsFilter: false,
- isMultiSelect: true,
- isOptional: true,
- name: 'Tags',
+ name: 'Region',
neededInServicePage: false,
- placeholder: 'Select Tags',
- priority: 4,
+ priority: 1,
},
- name: 'Tags',
+ name: 'Region',
},
{
configuration: {
- filterKey: 'region',
+ dependency: ['region'],
+ filterKey: 'tags',
filterType: 'string',
isFilterable: false,
isMetricsFilter: false,
- name: 'Region',
+ isMultiSelect: true,
+ isOptional: true,
+ name: 'Tags',
neededInServicePage: false,
- priority: 1,
+ placeholder: 'Select Tags',
+ priority: 4,
},
- name: 'Region',
+ name: 'Tags',
},
{
configuration: {
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
index cf9d91f0dd7..c7479590091 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
@@ -138,6 +138,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
selectedTags,
savePref,
{
+ [RESOURCE_ID]: undefined,
[TAGS]: selectedTags,
}
);
@@ -171,6 +172,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
const updatedPreferenceData = {
[REGION]: region,
[RESOURCES]: undefined,
+ [TAGS]: undefined,
};
emitFilterChangeByFilterKey(
REGION,
@@ -209,6 +211,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
{
config,
dashboard,
+ dependentFilters: dependentFilterReference.current,
isServiceAnalyticsIntegration,
preferences,
},
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
index b6dee07b2cb..9aebcec1d62 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
@@ -102,6 +102,10 @@ export const CloudPulseResourcesSelect = React.memo(
// Once the data is loaded, set the state variable with value stored in preferences
React.useEffect(() => {
+ if (disabled && !selectedResources) {
+ return;
+ }
+ // To save default values, go through side effects if disabled is false
if (resources && savePreferences && !selectedResources) {
const defaultResources =
defaultValue && Array.isArray(defaultValue)
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.test.tsx
index d4cd45f2468..34c77706bf2 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.test.tsx
@@ -6,8 +6,18 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
import { CloudPulseTagsSelect } from './CloudPulseTagsFilter';
+import type { CloudPulseTagsSelectProps } from './CloudPulseTagsFilter';
import type { useAllLinodesQuery } from 'src/queries/linodes/linodes';
+const props: CloudPulseTagsSelectProps = {
+ disabled: false,
+ handleTagsChange: vi.fn(),
+ label: 'Tags',
+ optional: true,
+ region: 'us-east',
+ resourceType: 'linode',
+};
+
const queryMocks = vi.hoisted(() => ({
useAllLinodesQuery: vi.fn().mockReturnValue({}),
}));
@@ -20,7 +30,6 @@ vi.mock('src/queries/linodes/linodes', async () => {
};
});
-const mockTagsHandler = vi.fn();
const SELECT_ALL = 'Select All';
const ARIA_SELECTED = 'aria-selected';
const LABEL_SUBTITLE = 'Tags (optional)';
@@ -41,37 +50,55 @@ describe('CloudPulseTagsSelect component tests', () => {
getByLabelText,
getByPlaceholderText,
getByTestId,
- } = renderWithTheme(
-
- );
+ } = renderWithTheme();
expect(getByTestId('tags-select')).toBeInTheDocument();
expect(getByLabelText(LABEL_SUBTITLE)).toBeInTheDocument();
expect(getByPlaceholderText('Select Tags')).toBeInTheDocument();
});
+ it('should render a disabled Tags Select component when disabled is true or region is undefined', () => {
+ queryMocks.useAllLinodesQuery.mockReturnValue({
+ data: linodeFactory.buildList(2),
+ isError: false,
+ isLoading: false,
+ status: 'success',
+ });
+ const { getByRole } = renderWithTheme(
+
+ );
+
+ expect(getByRole('button', { name: 'Open' })).toBeDisabled();
+ });
+
it('should render a Tags Select component with error message on api call failure', () => {
queryMocks.useAllLinodesQuery.mockReturnValue({
data: undefined,
isError: true,
isLoading: false,
} as ReturnType);
- const { getByText } = renderWithTheme(
-
- );
+ const { getByText } = renderWithTheme();
expect(getByText('Failed to fetch Tags.'));
});
- it('should select multiple tags', async () => {
+ it('should render a Tags Select component with tags filtered based on the selected region', async () => {
+ const user = userEvent.setup();
+
+ queryMocks.useAllLinodesQuery.mockReturnValue({
+ data: [],
+ isError: false,
+ isLoading: false,
+ status: 'success',
+ });
+ const { getByRole, queryAllByRole } = renderWithTheme(
+
+ );
+ await user.click(getByRole('button', { name: 'Open' }));
+ const options = queryAllByRole('option');
+ expect(options).toHaveLength(0); // no tags for the selected region
+ });
+
+ it('should select multiple tags from the tags filtered based on the selected region', async () => {
const user = userEvent.setup();
queryMocks.useAllLinodesQuery.mockReturnValue({
@@ -83,12 +110,7 @@ describe('CloudPulseTagsSelect component tests', () => {
status: 'success',
});
const { getByLabelText, getByRole } = renderWithTheme(
-
+
);
await user.click(getByRole('button', { name: 'Open' }));
await user.click(getByRole('option', { name: 'tag-2' }));
@@ -122,12 +144,7 @@ describe('CloudPulseTagsSelect component tests', () => {
status: 'success',
});
const { getByLabelText, getByRole } = renderWithTheme(
-
+
);
await user.click(getByRole('button', { name: 'Open' }));
await user.click(getByRole('option', { name: SELECT_ALL }));
@@ -156,10 +173,8 @@ describe('CloudPulseTagsSelect component tests', () => {
const { getByRole } = renderWithTheme(
);
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.tsx
index e5bfe1fb9eb..17dc6359939 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTagsFilter.tsx
@@ -4,6 +4,7 @@ import React from 'react';
import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
import { themes } from 'src/utilities/theme';
+import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
import type { FilterValue, Linode } from '@linode/api-v4';
export interface CloudPulseTags {
@@ -17,6 +18,7 @@ export interface CloudPulseTagsSelectProps {
label: string;
optional?: boolean;
placeholder?: string;
+ region: FilterValueType;
resourceType: string | undefined;
savePreferences?: boolean;
}
@@ -25,48 +27,63 @@ export const CloudPulseTagsSelect = React.memo(
(props: CloudPulseTagsSelectProps) => {
const {
defaultValue,
+ disabled,
handleTagsChange,
label,
optional,
placeholder,
+ region,
resourceType,
savePreferences,
} = props;
- const { data: linodes, isError, isLoading } = useAllLinodesQuery();
+ const regionFilter = region ? (region as string) : undefined;
+ const { data: linodesByRegion, isError, isLoading } = useAllLinodesQuery(
+ {},
+ { region: regionFilter },
+ !disabled && Boolean(region && resourceType)
+ );
+
// fetch all linode instances, consume the associated tags
const tags = React.useMemo(() => {
- if (!linodes) {
- return [];
+ if (!linodesByRegion) {
+ return undefined;
}
+
return Array.from(
- new Set(linodes.flatMap((linode: Linode) => linode.tags))
+ new Set(linodesByRegion.flatMap((linode: Linode) => linode.tags))
)
.sort()
.map((tag) => ({ label: tag })) as CloudPulseTags[];
- }, [linodes]);
+ }, [linodesByRegion]);
const [selectedTags, setSelectedTags] = React.useState();
const isAutocompleteOpen = React.useRef(false); // Ref to track the open state of Autocomplete
React.useEffect(() => {
- if (!tags || !savePreferences) {
- setSelectedTags([]);
- handleTagsChange([]);
+ if (disabled && !selectedTags) {
return;
}
- const defaultTags =
- defaultValue && Array.isArray(defaultValue)
- ? defaultValue.map((tag) => String(tag))
- : [];
- const filteredTags = tags.filter((tag) =>
- defaultTags.includes(String(tag.label))
- );
- handleTagsChange(filteredTags);
- setSelectedTags(filteredTags);
+ // To save default values, go through side effects if disabled is false
+ if (!tags || !savePreferences || selectedTags) {
+ if (selectedTags) {
+ setSelectedTags([]);
+ handleTagsChange([]);
+ }
+ } else {
+ const defaultTags =
+ defaultValue && Array.isArray(defaultValue)
+ ? defaultValue.map((tag) => String(tag))
+ : [];
+ const filteredTags = tags.filter((tag) =>
+ defaultTags.includes(String(tag.label))
+ );
+ handleTagsChange(filteredTags);
+ setSelectedTags(filteredTags);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [tags, resourceType]);
+ }, [tags, resourceType, region, disabled]);
return (
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index cfc65d826e7..4a96a2ec512 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -687,6 +687,11 @@ export const handlers = [
label: 'linode_with_no_tags',
region: 'us-central',
}),
+ linodeFactory.build({
+ label: 'linode_with_tag_test4',
+ region: 'us-east',
+ tags: ['test4'],
+ }),
linodeFactory.build({
label: 'eu-linode',
region: 'eu-west',
@@ -704,6 +709,7 @@ export const handlers = [
const headers = JSON.parse(request.headers.get('x-filter') || '{}');
const orFilters = headers['+or'];
const andFilters = headers['+and'];
+ const regionFilter = headers.region;
let filteredLinodes = linodes; // Default to the original linodes in case no filters are applied
@@ -730,6 +736,12 @@ export const handlers = [
});
}
+ if (regionFilter) {
+ filteredLinodes = filteredLinodes.filter((linode) => {
+ return linode.region === regionFilter;
+ });
+ }
+
return HttpResponse.json(makeResourcePage(filteredLinodes));
}
return HttpResponse.json(makeResourcePage(linodes));
From 03462e7fa88f2609f78e8f741d7a65de3555f361 Mon Sep 17 00:00:00 2001
From: subsingh-akamai
Date: Thu, 6 Feb 2025 11:10:40 +0530
Subject: [PATCH 04/57] test: [M3-8914] - POC: Centralized Locators for Linode
Page in Cypress UI Automation Framework (#11594)
* Added centralized locators for test e2e/core/linodes/smoke-linode-landing-table.spec.ts
---
.../pr-11594-tests-1738582940572.md | 5 +
.../smoke-linode-landing-table.spec.ts | 221 ++++++++----------
.../support/ui/locators/common-locators.ts | 37 +++
.../support/ui/locators/linode-locators.ts | 63 +++++
.../manager/cypress/support/ui/main-search.ts | 4 +-
5 files changed, 207 insertions(+), 123 deletions(-)
create mode 100644 packages/manager/.changeset/pr-11594-tests-1738582940572.md
create mode 100644 packages/manager/cypress/support/ui/locators/common-locators.ts
create mode 100644 packages/manager/cypress/support/ui/locators/linode-locators.ts
diff --git a/packages/manager/.changeset/pr-11594-tests-1738582940572.md b/packages/manager/.changeset/pr-11594-tests-1738582940572.md
new file mode 100644
index 00000000000..89c5a9b363b
--- /dev/null
+++ b/packages/manager/.changeset/pr-11594-tests-1738582940572.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+POC: Centralized Locators for Linode Page in Cypress UI Automation Framework ([#11594](https://github.com/linode/manager/pull/11594))
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
index 3b34d6f8f4e..4f1db9bad3e 100644
--- a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
@@ -20,6 +20,8 @@ import {
mockGetProfileGrants,
} from 'support/intercepts/profile';
import { randomLabel } from 'support/util/random';
+import * as commonLocators from 'support/ui/locators/common-locators';
+import * as linodeLocators from 'support/ui/locators/linode-locators';
const mockLinodes = new Array(5).fill(null).map(
(_item: null, index: number): Linode => {
@@ -77,68 +79,37 @@ describe('linode landing checks', () => {
});
it('checks the landing page side menu items', () => {
- cy.get('[title="Akamai - Dashboard"][href="/dashboard"]').should(
- 'be.visible'
- );
- cy.get('[data-testid="menu-item-Linodes"][href="/linodes"]').should(
- 'be.visible'
- );
- cy.get('[data-testid="menu-item-Volumes"][href="/volumes"]').should(
- 'be.visible'
- );
- cy.get(
- '[data-testid="menu-item-NodeBalancers"][href="/nodebalancers"]'
- ).should('be.visible');
- cy.get('[data-testid="menu-item-Firewalls"][href="/firewalls"]').should(
- 'be.visible'
- );
- cy.get(
- '[data-testid="menu-item-StackScripts"][href="/stackscripts"]'
- ).should('be.visible');
- cy.get('[data-testid="menu-item-Images"][href="/images"]').should(
- 'be.visible'
- );
- cy.get('[data-testid="menu-item-Domains"][href="/domains"]').should(
- 'be.visible'
- );
- cy.get(
- '[data-testid="menu-item-Kubernetes"][href="/kubernetes/clusters"]'
- ).should('be.visible');
- cy.get(
- '[data-testid="menu-item-Object Storage"][href="/object-storage/buckets"]'
- ).should('be.visible');
- cy.get('[data-testid="menu-item-Longview"][href="/longview"]').should(
- 'be.visible'
- );
- cy.get(
- '[data-testid="menu-item-Marketplace"][href="/linodes/create?type=One-Click"]'
- ).should('be.visible');
- cy.get('[data-testid="menu-item-Account"][href="/account"]').should(
- 'be.visible'
- );
- cy.get('[data-testid="menu-item-Help & Support"][href="/support"]').should(
- 'be.visible'
- );
+ cy.findByTitle('Akamai - Dashboard').should('be.visible');
+ cy.findByTestId('menu-item-Linodes').should('be.visible');
+ cy.findByTestId('menu-item-Volumes').should('be.visible');
+ cy.findByTestId('menu-item-NodeBalancers').should('be.visible');
+ cy.findByTestId('menu-item-Firewalls').should('be.visible');
+ cy.findByTestId('menu-item-StackScripts').should('be.visible');
+ cy.findByTestId('menu-item-Images').should('be.visible');
+ cy.findByTestId('menu-item-Domains').should('be.visible');
+ cy.findByTestId('menu-item-Kubernetes').should('be.visible');
+ cy.findByTestId('menu-item-Object Storage').should('be.visible');
+ cy.findByTestId('menu-item-Longview').should('be.visible');
+ cy.findByTestId('menu-item-Marketplace').should('be.visible');
+ cy.findByTestId('menu-item-Account').should('be.visible');
+ cy.findByTestId('menu-item-Help & Support').should('be.visible');
});
it('checks the landing top menu items', () => {
cy.wait('@getProfile').then((xhr) => {
const username = xhr.response?.body.username;
- cy.get('[aria-label="open menu"]')
- .should('be.visible')
- .should('be.visible');
- cy.get('[data-qa-add-new-menu-button="true"]')
- .should('be.visible')
- .should('be.visible');
- cy.get('[data-qa-search-icon="true"]')
- .should('be.visible')
- .should('be.visible');
+ cy.get(commonLocators.topMenuItemsLocator.toggleSideMenuButton).should(
+ 'be.visible'
+ );
+ cy.get(commonLocators.topMenuItemsLocator.addNewMenuButton).should(
+ 'be.visible'
+ );
+ cy.get(commonLocators.topMenuItemsLocator.searchIcon).should(
+ 'be.visible'
+ );
ui.mainSearch.find().should('be.visible');
- cy.findByLabelText('Help & Support')
- .should('be.visible')
- .should('be.enabled')
- .click();
+ cy.findByLabelText('Help & Support').should('be.enabled').click();
cy.url().should('endWith', '/support');
cy.go('back');
@@ -150,8 +121,10 @@ describe('linode landing checks', () => {
.should('be.visible')
.should('be.enabled');
- cy.get('[aria-label="Notifications"]').should('be.visible');
- cy.get('[data-testid="nav-group-profile"]')
+ cy.get(commonLocators.topMenuItemsLocator.notificationsButton).should(
+ 'be.visible'
+ );
+ cy.findByTestId('nav-group-profile')
.should('be.visible')
.within(() => {
cy.findByText(username).should('be.visible');
@@ -160,10 +133,8 @@ describe('linode landing checks', () => {
});
it('checks the landing labels and buttons', () => {
- cy.get('h1[data-qa-header="Linodes"]').should('be.visible');
- cy.get('a[aria-label="Docs - link opens in a new tab"]').should(
- 'be.visible'
- );
+ cy.get(linodeLocators.nonEmptyLinodePage.linodesLabel).should('be.visible');
+ cy.get(linodeLocators.nonEmptyLinodePage.docsLink).should('be.visible');
cy.findByText('Create Linode').should('be.visible');
});
@@ -181,7 +152,7 @@ describe('linode landing checks', () => {
).label;
const checkFirstRow = (label: string) => {
- cy.get('tr[data-qa-loading="true"]')
+ cy.get(linodeLocators.listOfLinodesTableBody.rows)
.should('be.visible')
.first()
.within(() => {
@@ -189,7 +160,7 @@ describe('linode landing checks', () => {
});
};
const checkLastRow = (label: string) => {
- cy.get('tr[data-qa-loading="true"]')
+ cy.get(linodeLocators.listOfLinodesTableBody.rows)
.should('be.visible')
.last()
.within(() => {
@@ -199,25 +170,28 @@ describe('linode landing checks', () => {
checkFirstRow(firstLinodeLabel);
checkLastRow(lastLinodeLabel);
- cy.get('[aria-label="Sort by label"]').click();
+ cy.get(linodeLocators.listOfLinodesTableHeader.labelSortButton).click();
checkFirstRow(lastLinodeLabel);
checkLastRow(firstLinodeLabel);
- cy.get('[aria-label="Sort by region"]').click();
+ // Region sorting ascending order
+ cy.get(linodeLocators.listOfLinodesTableHeader.regionSortButton).click();
checkFirstRow(firstRegionLabel);
checkLastRow(lastRegionLabel);
- cy.get('[aria-label="Sort by region"]').click();
+
+ // Region sorting descending order
+ cy.get(linodeLocators.listOfLinodesTableHeader.regionSortButton).click();
checkFirstRow(lastRegionLabel);
checkLastRow(firstRegionLabel);
});
it('checks the create menu dropdown items', () => {
- cy.get('[data-qa-add-new-menu-button="true"]').click();
+ cy.get(commonLocators.topMenuItemsLocator.addNewMenuButton).click();
- cy.get('[aria-labelledby="create-menu"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.createMenu)
.should('be.visible')
.within(() => {
- cy.get('[href="/linodes/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.linodesLink)
.should('be.visible')
.within(() => {
cy.findByText('Linode').should('be.visible');
@@ -226,7 +200,7 @@ describe('linode landing checks', () => {
);
});
- cy.get('[href="/volumes/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.volumesLink)
.should('be.visible')
.within(() => {
cy.findByText('Volume').should('be.visible');
@@ -235,7 +209,7 @@ describe('linode landing checks', () => {
);
});
- cy.get('[href="/nodebalancers/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.nodeBalancersLink)
.should('be.visible')
.within(() => {
cy.findByText('NodeBalancer').should('be.visible');
@@ -244,7 +218,7 @@ describe('linode landing checks', () => {
);
});
- cy.get('[href="/firewalls/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.firewallsLink)
.should('be.visible')
.within(() => {
cy.findByText('Firewall').should('be.visible');
@@ -253,23 +227,14 @@ describe('linode landing checks', () => {
);
});
- cy.get('[href="/firewalls/create"]')
- .should('be.visible')
- .within(() => {
- cy.findByText('Firewall').should('be.visible');
- cy.findByText('Control network access to your Linodes').should(
- 'be.visible'
- );
- });
-
- cy.get('[href="/domains/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.domainsLink)
.should('be.visible')
.within(() => {
cy.findByText('Domain').should('be.visible');
cy.findByText('Manage your DNS records').should('be.visible');
});
- cy.get('[href="/kubernetes/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.kubernetesLink)
.should('be.visible')
.within(() => {
cy.findByText('Kubernetes').should('be.visible');
@@ -278,14 +243,14 @@ describe('linode landing checks', () => {
);
});
- cy.get('[href="/object-storage/buckets/create"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.bucketsLink)
.should('be.visible')
.within(() => {
cy.findByText('Bucket').should('be.visible');
cy.findByText('S3-compatible object storage').should('be.visible');
});
- cy.get('[href="/linodes/create?type=One-Click"]')
+ cy.get(commonLocators.topMenuCreateItemsLocator.marketplaceOneClickLink)
.should('be.visible')
.within(() => {
cy.findByText('Marketplace').should('be.visible');
@@ -298,29 +263,29 @@ describe('linode landing checks', () => {
const label = linodeLabel(1);
const ip = mockLinodes[0].ipv4[0];
- cy.get('[aria-label="Sort by label"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.labelSortButton)
.should('be.visible')
.within(() => {
cy.findByText('Label').should('be.visible');
});
- cy.get('[aria-label="Sort by _statusPriority"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.statusPrioritySortButton)
.should('be.visible')
.within(() => {
cy.findByText('Status').should('be.visible');
});
- cy.get('[aria-label="Sort by type"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.typeSortButton)
.should('be.visible')
.within(() => {
cy.findByText('Plan').should('be.visible');
});
- cy.get('[aria-label="Sort by ipv4[0]"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.ipv4SortButton)
.should('be.visible')
.within(() => {
cy.findByText('Public IP Address').should('be.visible');
});
- cy.get(`tr[data-qa-linode="${label}"]`)
+ cy.get(linodeLocators.listOfLinodesTableBody.rowByLabel(label))
.should('be.visible')
.within(() => {
ui.button
@@ -328,13 +293,13 @@ describe('linode landing checks', () => {
.should('be.visible')
.realHover()
.then(() => {
- cy.get(`[aria-label="Copy ${ip} to clipboard"]`).should(
- 'be.visible'
- );
+ cy.get(
+ linodeLocators.listOfLinodesTableBody.ipClipboardCopyButton(ip)
+ ).should('be.visible');
});
- cy.get(`[aria-label="Action menu for Linode ${label}"]`).should(
- 'be.visible'
- );
+ cy.get(
+ linodeLocators.listOfLinodesTableBody.linodeActionMenu(label)
+ ).should('be.visible');
});
});
@@ -368,12 +333,14 @@ describe('linode landing checks', () => {
cy.wait('@getLinodes');
// Check 'Group by Tag' button works as expected that can be visible, enabled and clickable
- cy.get('[aria-label="Toggle group by tag"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.toggleGroupByTagButton)
.should('be.visible')
.should('be.enabled')
.click();
- cy.get('[data-qa-tag-header="even"]').should('be.visible');
- cy.get('[data-qa-tag-header="even"]').within(() => {
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.evenTag).should(
+ 'be.visible'
+ );
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.evenTag).within(() => {
mockLinodes.forEach((linode) => {
if (linode.tags.includes('even')) {
cy.findByText(linode.label).should('be.visible');
@@ -383,8 +350,10 @@ describe('linode landing checks', () => {
});
});
- cy.get('[data-qa-tag-header="odd"]').should('be.visible');
- cy.get('[data-qa-tag-header="odd"]').within(() => {
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.oddTag).should(
+ 'be.visible'
+ );
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.oddTag).within(() => {
mockLinodes.forEach((linode) => {
if (linode.tags.includes('odd')) {
cy.findByText(linode.label).should('be.visible');
@@ -394,21 +363,29 @@ describe('linode landing checks', () => {
});
});
- cy.get('[data-qa-tag-header="nums"]').should('be.visible');
- cy.get('[data-qa-tag-header="nums"]').within(() => {
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.numTag).should(
+ 'be.visible'
+ );
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.numTag).within(() => {
mockLinodes.forEach((linode) => {
cy.findByText(linode.label).should('be.visible');
});
});
// The linode landing table will resume when ungroup the tag.
- cy.get('[aria-label="Toggle group by tag"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.toggleGroupByTagButton)
.should('be.visible')
.should('be.enabled')
.click();
- cy.get('[data-qa-tag-header="even"]').should('not.exist');
- cy.get('[data-qa-tag-header="odd"]').should('not.exist');
- cy.get('[data-qa-tag-header="nums"]').should('not.exist');
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.evenTag).should(
+ 'not.exist'
+ );
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.oddTag).should(
+ 'not.exist'
+ );
+ cy.get(linodeLocators.listOfLinodesTableTagsBody.numTag).should(
+ 'not.exist'
+ );
mockLinodes.forEach((linode) => {
cy.findByText(linode.label).should('be.visible');
});
@@ -432,7 +409,7 @@ describe('linode landing checks', () => {
cy.wait(['@getLinodes', '@getUserPreferences']);
// Check 'Summary View' button works as expected that can be visiable, enabled and clickable
- cy.get('[aria-label="Toggle display"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.toggleDisplayButton)
.should('be.visible')
.should('be.enabled')
.click();
@@ -455,7 +432,7 @@ describe('linode landing checks', () => {
});
// Toggle the 'List View' button to check the display of table items are back to the original view.
- cy.get('[aria-label="Toggle display"]')
+ cy.get(linodeLocators.listOfLinodesTableHeader.toggleDisplayButton)
.should('be.visible')
.should('be.enabled')
.click();
@@ -484,11 +461,11 @@ describe('linode landing checks for empty state', () => {
cy.url().should('endWith', routes.linodeLanding);
// Aliases created for accessing child elements during assertions
- cy.get('div[data-qa-placeholder-container="resources-section"]').as(
+ cy.get(linodeLocators.emptyLinodePage.resourcesContainer).as(
'resourcesSection'
);
cy.get('@resourcesSection')
- .get('h1[data-qa-header]')
+ .get(linodeLocators.emptyLinodePage.resourcesHeader1)
.contains('Linodes')
.as('linodesHeader');
@@ -517,15 +494,15 @@ describe('linode landing checks for empty state', () => {
.and('be.enabled');
// Assert that List of Liondes table does not exist
- cy.get('table[aria-label="List of Linodes"]').should('not.exist');
+ cy.get(linodeLocators.nonEmptyLinodePage.listOfLinodesTable).should(
+ 'not.exist'
+ );
// Assert that Docs link does not exist
- cy.get(
- 'a[aria-label="Docs - link opens in a new tab"][data-testid="external-link"]'
- ).should('not.exist');
+ cy.get(linodeLocators.nonEmptyLinodePage.docsLink).should('not.exist');
// Assert that Download CSV button does not exist
- cy.get('span[data-testid="loadingIcon"]')
+ cy.get(linodeLocators.nonEmptyLinodePage.downloadCsvButton)
.contains('Download CSV')
.should('not.exist');
});
@@ -644,24 +621,24 @@ describe('linode landing checks for non-empty state with restricted user', () =>
.should('be.visible');
// Assert that List of Liondes table exist
- cy.get('table[aria-label="List of Linodes"]').should('exist');
+ cy.get(linodeLocators.nonEmptyLinodePage.listOfLinodesTable).should(
+ 'exist'
+ );
// Assert that Docs link exist
- cy.get(
- 'a[aria-label="Docs - link opens in a new tab"][data-testid="external-link"]'
- ).should('exist');
+ cy.get(linodeLocators.nonEmptyLinodePage.docsLink).should('exist');
// Assert that the correct number of Linode entries are present in the table
cy.get('@mockLinodes').then((mockLinodes) => {
// Assert that the correct number of Linode entries are present in the table
- cy.get('table[aria-label="List of Linodes"] tbody tr').should(
+ cy.get(linodeLocators.listOfLinodesTableBody.rows).should(
'have.length',
mockLinodes.length
);
// Assert that each Linode entry is present in the table
mockLinodes.forEach((linode) => {
- cy.get('table[aria-label="List of Linodes"] tbody tr').should(
+ cy.get(linodeLocators.listOfLinodesTableBody.rows).should(
'contain',
linode.label
);
diff --git a/packages/manager/cypress/support/ui/locators/common-locators.ts b/packages/manager/cypress/support/ui/locators/common-locators.ts
new file mode 100644
index 00000000000..ab507eeb3e5
--- /dev/null
+++ b/packages/manager/cypress/support/ui/locators/common-locators.ts
@@ -0,0 +1,37 @@
+// This file contains locators that are common to multiple pages in the Manager.
+
+/** Top menu items. */
+export const topMenuItemsLocator = {
+ /** Top menu create button. */
+ addNewMenuButton: '[data-qa-add-new-menu-button="true"]',
+ /** Top menu notifications button. */
+ notificationsButton: '[aria-label="Notifications"]',
+ /** Top menu search icon. */
+ searchIcon: '[data-qa-search-icon="true"]',
+ /** Top menu search field. */
+ searchInput: '[data-qa-main-search]',
+ /** Top menu navigation toggle. */
+ toggleSideMenuButton: '[aria-label="open menu"]',
+};
+
+/** Top menu create dropdown items. */
+export const topMenuCreateItemsLocator = {
+ /** Top menu create dropdown items Buckets Link. */
+ bucketsLink: '[href="/object-storage/buckets/create"]',
+ /** Top menu create dropdown. */
+ createMenu: '[aria-labelledby="create-menu"]',
+ /** Top menu create dropdown items Domains Link. */
+ domainsLink: '[href="/domains/create"]',
+ /** Top menu create dropdown items Firewalls Link. */
+ firewallsLink: '[href="/firewalls/create"]',
+ /** Top menu create dropdown items Kubernetes Link. */
+ kubernetesLink: '[href="/kubernetes/create"]',
+ /** Top menu create dropdown items Linodes Link. */
+ linodesLink: '[href="/linodes/create"]',
+ /** Top menu create dropdown items Marketplace(One-Click) Link. */
+ marketplaceOneClickLink: '[href="/linodes/create?type=One-Click"]',
+ /** Top menu create dropdown items NodeBalancers Link. */
+ nodeBalancersLink: '[href="/nodebalancers/create"]',
+ /** Top menu create dropdown items Volumes Link. */
+ volumesLink: '[href="/volumes/create"]',
+};
diff --git a/packages/manager/cypress/support/ui/locators/linode-locators.ts b/packages/manager/cypress/support/ui/locators/linode-locators.ts
new file mode 100644
index 00000000000..bb29e5716e8
--- /dev/null
+++ b/packages/manager/cypress/support/ui/locators/linode-locators.ts
@@ -0,0 +1,63 @@
+// This file contains locators for the Linode page in the Manager.
+
+/** Empty Linode landing page. */
+export const emptyLinodePage = {
+ /** Empty Linode landing page Resources container. */
+ resourcesContainer: 'div[data-qa-placeholder-container="resources-section"]',
+ /** Empty Linode landing page Resources Header(H1). */
+ resourcesHeader1: 'h1[data-qa-header]',
+};
+
+/** Non-Empty Linode landing page. */
+export const nonEmptyLinodePage = {
+ /** Non-Empty Linode landing page Docs link. */
+ docsLink: 'a[aria-label="Docs - link opens in a new tab"]',
+ /** Non-Empty Linode landing page Download CSV button. */
+ downloadCsvButton: 'span[data-testid="loadingIcon"]',
+ /** Non-Empty Linode landing page Linodes label header. */
+ linodesLabel: 'h1[data-qa-header="Linodes"]',
+ /** Non-Empty Linode landing page Linodes table. */
+ listOfLinodesTable: 'table[aria-label="List of Linodes"]',
+};
+
+/** Linode table header. */
+export const listOfLinodesTableHeader = {
+ /** Linode table header sort by ip button. */
+ ipv4SortButton: '[aria-label="Sort by ipv4[0]',
+ /** Linode table header sort by label button. */
+ labelSortButton: '[aria-label="Sort by label"]',
+ /** Linode table header sort by region button. */
+ regionSortButton: '[aria-label="Sort by region"]',
+ /** Linode table header sort by _statusPriority button. */
+ statusPrioritySortButton: '[aria-label="Sort by _statusPriority"]',
+ /** Linode table header toggle display button. */
+ toggleDisplayButton: '[aria-label="Toggle display"]',
+ /** Linode table header toggle group by tag button. */
+ toggleGroupByTagButton: '[aria-label="Toggle group by tag"]',
+ /** Linode table header sort by type button. */
+ typeSortButton: '[aria-label="Sort by type"]',
+};
+
+/** Linode table body. */
+export const listOfLinodesTableBody = {
+ /** Linode table body ip copy button which takes ip as a parameter. */
+ ipClipboardCopyButton: (ip: string) =>
+ `[aria-label="Copy ${ip} to clipboard"]`,
+ /** Linode table body action menu which takes label as a parameter. */
+ linodeActionMenu: (label: string) =>
+ `[aria-label="Action menu for Linode ${label}"]`,
+ /** Linode table body get Row by label which takes label as a parameter. */
+ rowByLabel: (label: string) => `tr[data-qa-linode="${label}"]`,
+ /** Linode table body row. */
+ rows: 'table[aria-label="List of Linodes"] tbody tr',
+};
+
+/** Linode table tags. */
+export const listOfLinodesTableTagsBody = {
+ /** Linode table even tags. */
+ evenTag: '[data-qa-tag-header="even"]',
+ /** Linode table nums tags. */
+ numTag: '[data-qa-tag-header="nums"]',
+ /** Linode table odd tags. */
+ oddTag: '[data-qa-tag-header="odd"]',
+};
diff --git a/packages/manager/cypress/support/ui/main-search.ts b/packages/manager/cypress/support/ui/main-search.ts
index 7b4fbae2bec..4ba5e24fbf2 100644
--- a/packages/manager/cypress/support/ui/main-search.ts
+++ b/packages/manager/cypress/support/ui/main-search.ts
@@ -1,3 +1,5 @@
+import * as commonLocators from 'support/ui/locators/common-locators';
+
/**
* Drawer UI element.
*
@@ -11,6 +13,6 @@ export const mainSearch = {
* @returns Cypress chainable.
*/
find: (): Cypress.Chainable => {
- return cy.get('[data-qa-main-search]');
+ return cy.get(commonLocators.topMenuItemsLocator.searchInput);
},
};
From bbf396df76b869fa12acb575adafbfa526578967 Mon Sep 17 00:00:00 2001
From: santoshp210-akamai
<159890961+santoshp210-akamai@users.noreply.github.com>
Date: Thu, 6 Feb 2025 17:10:01 +0530
Subject: [PATCH 05/57] upcoming: [DI-23237] - Alerting bug fixes (#11610)
* upcoming: [DI-23237] - Alerting UI bug fixes
* upcoming: [DI-23237] - Add changesets
* upcoming: [DI-23316] - Review changes
* upcoming: [DI-23316] - Avoiding nested await
---
...r-11610-upcoming-features-1738690472155.md | 5 ++++
packages/api-v4/src/cloudpulse/services.ts | 20 ++++++++++++---
packages/api-v4/src/cloudpulse/types.ts | 9 ++++---
...r-11610-upcoming-features-1738690296967.md | 5 ++++
.../cloudpulse/alert-show-details.spec.ts | 4 +--
.../src/factories/cloudpulse/alerts.ts | 12 ++++-----
packages/manager/src/factories/dashboards.ts | 3 ++-
.../Alerts/AlertsDetail/AlertDetail.tsx | 2 +-
.../AlertsDetail/AlertDetailCriteria.test.tsx | 2 +-
.../AlertDetailNotification.test.tsx | 6 ++---
.../AlertsDetail/AlertDetailNotification.tsx | 2 +-
.../RenderAlertsMetricsAndDimensions.tsx | 5 ++--
.../Alerts/AlertsListing/AlertListTable.tsx | 7 +++++-
.../CreateAlert/CreateAlertDefinition.tsx | 2 +-
.../Criteria/DimensionFilter.test.tsx | 1 +
.../Criteria/DimensionFilterField.test.tsx | 25 ++++++++++++++-----
.../Criteria/DimensionFilterField.tsx | 23 ++++++++++-------
.../CreateAlert/Criteria/Metric.test.tsx | 7 ++++--
.../Alerts/CreateAlert/Criteria/Metric.tsx | 21 +++++++++-------
.../Criteria/MetricCriteria.test.tsx | 2 ++
.../CreateAlert/Criteria/MetricCriteria.tsx | 6 +++--
.../CloudPulse/Alerts/CreateAlert/types.ts | 4 +--
.../Alerts/CreateAlert/utilities.ts | 8 ++++--
.../features/CloudPulse/Alerts/constants.ts | 18 +++++--------
.../Widget/CloudPulseWidget.test.tsx | 1 +
.../manager/src/queries/cloudpulse/queries.ts | 9 +++++--
.../src/queries/cloudpulse/services.ts | 8 ++++--
packages/validation/src/cloudpulse.schema.ts | 2 +-
28 files changed, 143 insertions(+), 76 deletions(-)
create mode 100644 packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md
create mode 100644 packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md
diff --git a/packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md b/packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md
new file mode 100644
index 00000000000..a05ab1b1b32
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-11610-upcoming-features-1738690472155.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+changed attribute names in NotificationChannel,MetricCriteria types to reflect the latest API specification ([#11610](https://github.com/linode/manager/pull/11610))
diff --git a/packages/api-v4/src/cloudpulse/services.ts b/packages/api-v4/src/cloudpulse/services.ts
index 902cb2ec4a2..bab5c965a99 100644
--- a/packages/api-v4/src/cloudpulse/services.ts
+++ b/packages/api-v4/src/cloudpulse/services.ts
@@ -1,21 +1,33 @@
import { BETA_API_ROOT as API_ROOT } from 'src/constants';
-import Request, { setData, setMethod, setURL } from '../request';
+import Request, {
+ setData,
+ setMethod,
+ setParams,
+ setURL,
+ setXFilter,
+} from '../request';
import {
JWEToken,
JWETokenPayLoad,
MetricDefinition,
ServiceTypesList,
} from './types';
-import { ResourcePage } from 'src/types';
+import { Filter, Params, ResourcePage } from 'src/types';
-export const getMetricDefinitionsByServiceType = (serviceType: string) => {
+export const getMetricDefinitionsByServiceType = (
+ serviceType: string,
+ params?: Params,
+ filters?: Filter
+) => {
return Request>(
setURL(
`${API_ROOT}/monitor/services/${encodeURIComponent(
serviceType
)}/metric-definitions`
),
- setMethod('GET')
+ 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 f7fcfd321d5..4d5c27d82ce 100644
--- a/packages/api-v4/src/cloudpulse/types.ts
+++ b/packages/api-v4/src/cloudpulse/types.ts
@@ -111,6 +111,7 @@ export interface MetricDefinition {
scrape_interval: string;
available_aggregate_functions: string[];
dimensions: Dimension[];
+ is_alertable: boolean;
}
export interface Dimension {
@@ -180,7 +181,7 @@ export interface CreateAlertDefinitionPayload {
}
export interface MetricCriteria {
metric: string;
- aggregation_type: MetricAggregationType;
+ aggregate_function: MetricAggregationType;
operator: MetricOperatorType;
threshold: number;
dimension_filters?: DimensionFilter[];
@@ -222,11 +223,11 @@ export interface Alert {
rules: AlertDefinitionMetricCriteria[];
};
trigger_conditions: TriggerCondition;
- channels: {
- id: string;
+ alert_channels: {
+ id: number;
label: string;
url: string;
- type: 'channel';
+ type: 'alert-channel';
}[];
created_by: string;
updated_by: string;
diff --git a/packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md b/packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md
new file mode 100644
index 00000000000..05a8e3ab7ac
--- /dev/null
+++ b/packages/manager/.changeset/pr-11610-upcoming-features-1738690296967.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Modified setValue method for the `DimensionFilterField`, `Metric` components. Capitalized the Dimension Filter values in ShowDetails and Create features ([#11610](https://github.com/linode/manager/pull/11610))
diff --git a/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
index 58a7607778d..2febd83fe46 100644
--- a/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
+++ b/packages/manager/cypress/e2e/core/cloudpulse/alert-show-details.spec.ts
@@ -181,10 +181,10 @@ describe('Integration Tests for Alert Show Detail Page', () => {
.eq(index)
.within(() => {
cy.get(
- `[data-qa-chip="${aggregationTypeMap[rule.aggregation_type]}"]`
+ `[data-qa-chip="${aggregationTypeMap[rule.aggregate_function]}"]`
)
.should('be.visible')
- .should('have.text', aggregationTypeMap[rule.aggregation_type]);
+ .should('have.text', aggregationTypeMap[rule.aggregate_function]);
cy.get(`[data-qa-chip="${rule.label}"]`)
.should('be.visible')
diff --git a/packages/manager/src/factories/cloudpulse/alerts.ts b/packages/manager/src/factories/cloudpulse/alerts.ts
index cebee47bf9f..47b6cf58060 100644
--- a/packages/manager/src/factories/cloudpulse/alerts.ts
+++ b/packages/manager/src/factories/cloudpulse/alerts.ts
@@ -17,7 +17,7 @@ export const alertDimensionsFactory = Factory.Sync.makeFactory(
{
- aggregation_type: 'avg',
+ aggregate_function: 'avg',
dimension_filters: alertDimensionsFactory.buildList(1),
label: 'CPU Usage',
metric: 'cpu_usage',
@@ -28,17 +28,17 @@ export const alertRulesFactory = Factory.Sync.makeFactory({
- channels: [
+ alert_channels: [
{
- id: '1',
+ id: 1,
label: 'sample1',
- type: 'channel',
+ type: 'alert-channel',
url: '',
},
{
- id: '2',
+ id: 2,
label: 'sample2',
- type: 'channel',
+ type: 'alert-channel',
url: '',
},
],
diff --git a/packages/manager/src/factories/dashboards.ts b/packages/manager/src/factories/dashboards.ts
index c02bf807d92..3b1b4504f82 100644
--- a/packages/manager/src/factories/dashboards.ts
+++ b/packages/manager/src/factories/dashboards.ts
@@ -1,10 +1,10 @@
import Factory from 'src/factories/factoryProxy';
import type {
- MetricDefinition,
CloudPulseMetricsResponse,
CloudPulseMetricsResponseData,
Dashboard,
+ MetricDefinition,
Widgets,
} from '@linode/api-v4';
import type { ChartVariant } from 'src/components/AreaChart/AreaChart';
@@ -56,6 +56,7 @@ export const dashboardMetricFactory = Factory.Sync.makeFactory
{
available_aggregate_functions: ['min', 'max', 'avg', 'sum'],
dimensions: [],
+ is_alertable: true,
label: Factory.each((i) => `widget_label_${i}`),
metric: Factory.each((i) => `widget_metric_${i}`),
metric_type: 'gauge',
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
index 553dc126cfc..282de8787b7 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetail.tsx
@@ -136,7 +136,7 @@ export const AlertDetail = () => {
data-qa-section="Notification Channels"
>
id)}
+ channelIds={alertDetails.alert_channels.map(({ id }) => id)}
/>
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
index 49ea7b6e017..b9d447f7b1d 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
@@ -16,7 +16,7 @@ describe('AlertDetailCriteria component tests', () => {
const alertDetails = alertFactory.build({
rule_criteria: {
rules: alertRulesFactory.buildList(2, {
- aggregation_type: 'avg',
+ aggregate_function: 'avg',
dimension_filters: alertDimensionsFactory.buildList(2),
label: 'CPU Usage',
metric: 'cpu_usage',
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx
index 3fde1ab5981..9513ab3e1c1 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx
@@ -39,7 +39,7 @@ beforeEach(() => {
describe('AlertDetailNotification component tests', () => {
it('should render the alert detail notification channels successfully', () => {
const { getAllByText, getByText } = renderWithTheme(
-
+
);
expect(getByText(notificationChannel)).toBeInTheDocument();
@@ -59,7 +59,7 @@ describe('AlertDetailNotification component tests', () => {
isFetching: false,
});
const { getByText } = renderWithTheme(
-
+
);
expect(getByText(notificationChannel)).toBeInTheDocument();
@@ -73,7 +73,7 @@ describe('AlertDetailNotification component tests', () => {
isFetching: false,
});
const { getByText } = renderWithTheme(
-
+
);
expect(getByText(notificationChannel)).toBeInTheDocument();
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx
index f9065ef4527..b043b59e47d 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.tsx
@@ -19,7 +19,7 @@ interface NotificationChannelProps {
* List of channel IDs associated with the alert.
* These IDs are used to fetch and display notification channels.
*/
- channelIds: string[];
+ channelIds: number[];
}
export const AlertDetailNotification = React.memo(
(props: NotificationChannelProps) => {
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx
index 0aac5132726..b25e17e47cc 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx
@@ -3,6 +3,7 @@ import { Grid } from '@mui/material';
import React from 'react';
import NullComponent from 'src/components/NullComponent';
+import { capitalize } from 'src/utilities/capitalize';
import {
aggregationTypeMap,
@@ -33,7 +34,7 @@ export const RenderAlertMetricsAndDimensions = React.memo(
return ruleCriteria.rules.map(
(
{
- aggregation_type: aggregationType,
+ aggregate_function: aggregationType,
dimension_filters: dimensionFilters,
label,
operator,
@@ -68,7 +69,7 @@ export const RenderAlertMetricsAndDimensions = React.memo(
}) => [
dimensionLabel,
dimensionOperatorTypeMap[dimensionOperator],
- value,
+ capitalize(value),
]
)}
label="Dimension Filter"
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx
index 312238fd5ca..15312432d66 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx
@@ -53,7 +53,12 @@ export const AlertsListTable = React.memo((props: AlertsListTableProps) => {
};
return (
-
+
{({ data: orderedData, handleOrderChange, order, orderBy }) => (
{({
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx
index b2a73e92590..054ac26980d 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx
@@ -34,7 +34,7 @@ const triggerConditionInitialValues: TriggerConditionForm = {
trigger_occurrences: 0,
};
const criteriaInitialValues: MetricCriteriaForm = {
- aggregation_type: null,
+ aggregate_function: null,
dimension_filters: [],
metric: null,
operator: null,
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx
index 7056c367de1..be3a7f59c47 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.test.tsx
@@ -38,6 +38,7 @@ const mockData: MetricDefinition[] = [
values: [],
},
],
+ is_alertable: true,
label: 'CPU utilization',
metric: 'system_cpu_utilization_percent',
metric_type: 'gauge',
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx
index d3416941c9c..966683259e2 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.test.tsx
@@ -2,6 +2,7 @@ import { screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
+import { capitalize } from 'src/utilities/capitalize';
import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
import { dimensionOperatorOptions } from '../../constants';
@@ -39,6 +40,7 @@ const mockData: MetricDefinition[] = [
values: [],
},
],
+ is_alertable: true,
label: 'CPU utilization',
metric: 'system_cpu_utilization_percent',
metric_type: 'gauge',
@@ -47,6 +49,7 @@ const mockData: MetricDefinition[] = [
},
];
+const dataFieldId = 'data-field';
const dimensionFieldMockData = mockData[0].dimensions;
describe('Dimension filter field component', () => {
const user = userEvent.setup();
@@ -95,7 +98,7 @@ describe('Dimension filter field component', () => {
},
}
);
- const dataFieldContainer = container.getByTestId('data-field');
+ const dataFieldContainer = container.getByTestId(dataFieldId);
const dataFieldInput = within(dataFieldContainer).getByRole('button', {
name: 'Open',
});
@@ -140,6 +143,15 @@ describe('Dimension filter field component', () => {
},
}
);
+ const dataFieldContainer = container.getByTestId('data-field');
+ const dataFieldInput = within(dataFieldContainer).getByRole('button', {
+ name: 'Open',
+ });
+ await user.click(dataFieldInput);
+ const option = await container.findByRole('option', {
+ name: dimensionFieldMockData[1].label,
+ });
+ await user.click(option);
const operatorContainer = container.getByTestId('operator');
const operatorInput = within(operatorContainer).getByRole('button', {
name: 'Open',
@@ -186,10 +198,11 @@ describe('Dimension filter field component', () => {
},
}
);
- const dataFieldContainer = container.getByTestId('data-field');
+ const dataFieldContainer = container.getByTestId(dataFieldId);
const dataFieldInput = within(dataFieldContainer).getByRole('button', {
name: 'Open',
});
+ const valueLabel = capitalize(dimensionFieldMockData[1].values[0]);
await user.click(dataFieldInput);
await user.click(
await container.findByRole('option', {
@@ -204,25 +217,25 @@ describe('Dimension filter field component', () => {
user.click(valueInput);
expect(
await container.findByRole('option', {
- name: dimensionFieldMockData[1].values[0],
+ name: valueLabel,
})
);
expect(
await container.findByRole('option', {
- name: dimensionFieldMockData[1].values[1],
+ name: valueLabel,
})
);
await user.click(
container.getByRole('option', {
- name: dimensionFieldMockData[1].values[0],
+ name: valueLabel,
})
);
expect(within(valueContainer).getByRole('combobox')).toHaveAttribute(
'value',
- dimensionFieldMockData[1].values[0]
+ valueLabel
);
});
});
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx
index 3b8bbb363a7..9d44b5a760c 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx
@@ -3,6 +3,8 @@ import { Grid } from '@mui/material';
import React from 'react';
import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { capitalize } from 'src/utilities/capitalize';
+
import { dimensionOperatorOptions } from '../../constants';
import { ClearIconButton } from './ClearIconButton';
@@ -50,13 +52,15 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
operator: null,
value: null,
};
- setValue(
- name,
- operation === 'selectOption'
- ? { ...fieldValue, dimension_label: selected.value }
- : fieldValue,
- { shouldValidate: true }
- );
+ if (operation === 'selectOption') {
+ setValue(`${name}.dimension_label`, selected.value, {
+ shouldValidate: true,
+ });
+ setValue(`${name}.operator`, fieldValue.operator);
+ setValue(`${name}.value`, fieldValue.value);
+ } else {
+ setValue(name, fieldValue);
+ }
};
const dimensionFieldWatcher = useWatch({
@@ -72,9 +76,9 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
: null;
const valueOptions = () => {
- if (selectedDimension !== null) {
+ if (selectedDimension !== null && selectedDimension.values) {
return selectedDimension.values.map((val) => ({
- label: val,
+ label: capitalize(val),
value: val,
}));
}
@@ -131,6 +135,7 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => {
) ?? null
}
data-testid="operator"
+ disabled={!dimensionFieldWatcher}
errorText={fieldState.error?.message}
label="Operator"
onBlur={field.onBlur}
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.test.tsx
index 5e8b7b8382a..95a825d6184 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.test.tsx
@@ -37,6 +37,7 @@ const mockData: MetricDefinition[] = [
values: [],
},
],
+ is_alertable: true,
label: 'CPU utilization',
metric: 'system_cpu_utilization_percent',
metric_type: 'gauge',
@@ -155,8 +156,9 @@ describe('Metric component tests', () => {
container.getByRole('option', { name: 'Average' })
).toBeInTheDocument();
- await user.click(await container.findByRole('option', { name: 'Average' }));
+ const option = await container.findByRole('option', { name: 'Average' });
+ await user.click(option);
expect(
within(aggregationTypeContainer).getByRole('combobox')
).toHaveAttribute('value', 'Average');
@@ -196,7 +198,8 @@ describe('Metric component tests', () => {
).toBeInTheDocument();
expect(container.getByRole('option', { name: '==' })).toBeInTheDocument();
expect(container.getByRole('option', { name: '<' })).toBeInTheDocument();
- await user.click(await container.findByRole('option', { name: '>' }));
+ const option = await container.findByRole('option', { name: '>' });
+ await user.click(option);
expect(within(operatorContainer).getByRole('combobox')).toHaveAttribute(
'value',
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx
index 434cfc17f73..c5fabddffaa 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx
@@ -64,19 +64,21 @@ export const Metric = (props: MetricCriteriaProps) => {
operation: string
) => {
const fieldValue: MetricCriteriaForm = {
- aggregation_type: null,
+ aggregate_function: null,
dimension_filters: [],
metric: null,
operator: null,
threshold: 0,
};
- setValue(
- name,
- operation === 'selectOption'
- ? { ...fieldValue, metric: selected.value }
- : fieldValue,
- { shouldValidate: true }
- );
+ if (operation === 'selectOption') {
+ setValue(`${name}.metric`, selected.value, { shouldValidate: true });
+ setValue(`${name}.aggregate_function`, fieldValue.aggregate_function);
+ setValue(`${name}.dimension_filters`, fieldValue.dimension_filters);
+ setValue(`${name}.operator`, fieldValue.operator);
+ setValue(`${name}.threshold`, fieldValue.threshold);
+ } else {
+ setValue(name, fieldValue);
+ }
};
const metricOptions = React.useMemo(() => {
@@ -202,7 +204,7 @@ export const Metric = (props: MetricCriteriaProps) => {
/>
)}
control={control}
- name={`${name}.aggregation_type`}
+ name={`${name}.aggregate_function`}
/>
@@ -226,6 +228,7 @@ export const Metric = (props: MetricCriteriaProps) => {
: null
}
data-testid="operator"
+ disabled={!metricWatcher}
errorText={fieldState.error?.message}
key={metricWatcher}
label="Operator"
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.test.tsx
index 82654dcefb2..4511fc187e9 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.test.tsx
@@ -53,6 +53,7 @@ const mockData: ResourcePage = {
values: [],
},
],
+ is_alertable: true,
label: 'CPU utilization',
metric: 'system_cpu_utilization_percent',
metric_type: 'gauge',
@@ -80,6 +81,7 @@ const mockData: ResourcePage = {
values: [],
},
],
+ is_alertable: true,
label: 'Memory Usage',
metric: 'system_memory_usage_by_resource',
metric_type: 'gauge',
diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx
index 8382b563898..30c5bf1501b 100644
--- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx
+++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx
@@ -36,7 +36,9 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => {
isLoading: isMetricDefinitionLoading,
} = useGetCloudPulseMetricDefinitionsByServiceType(
serviceType!,
- serviceType !== null
+ serviceType !== null,
+ {},
+ { is_alertable: true }
);
const { control } = useFormContext();
@@ -92,7 +94,7 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => {