diff --git a/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx b/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx index 185241254d3b..0ce7e0821fff 100644 --- a/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx +++ b/frontend/src/container/CreateAlertV2/CreateAlertV2.tsx @@ -8,6 +8,7 @@ import AlertCondition from './AlertCondition'; import { CreateAlertProvider } from './context'; import CreateAlertHeader from './CreateAlertHeader'; import EvaluationSettings from './EvaluationSettings'; +import NotificationSettings from './NotificationSettings'; import QuerySection from './QuerySection'; import { showCondensedLayout } from './utils'; @@ -27,6 +28,7 @@ function CreateAlertV2({ {!showCondensedLayoutFlag ? : null} + ); diff --git a/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss b/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss index 90306dcac286..fe4574f53ea7 100644 --- a/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss +++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss @@ -49,3 +49,40 @@ user-select: none; } } + +.lightMode { + .time-input-container { + .time-input-field { + background-color: var(--bg-vanilla-300); + border: 1px solid var(--bg-vanilla-300); + color: var(--bg-ink-400); + + &::placeholder { + color: var(--bg-ink-300); + } + + &:hover { + border-color: var(--bg-ink-300); + } + + &:focus { + border-color: var(--bg-ink-300); + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); + } + + &:disabled { + background-color: var(--bg-vanilla-300); + color: var(--bg-ink-300); + cursor: not-allowed; + + &:hover { + border-color: var(--bg-vanilla-300); + } + } + } + + .time-input-separator { + color: var(--bg-ink-300); + } + } +} diff --git a/frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts b/frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts index b1f9029ef440..b37bca228b41 100644 --- a/frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts +++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts @@ -3,6 +3,7 @@ import { INITIAL_ALERT_STATE, INITIAL_ALERT_THRESHOLD_STATE, INITIAL_EVALUATION_WINDOW_STATE, + INITIAL_NOTIFICATION_SETTINGS_STATE, } from 'container/CreateAlertV2/context/constants'; import { EvaluationWindowState, @@ -23,6 +24,8 @@ export const createMockAlertContextState = ( setAdvancedOptions: jest.fn(), evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE, setEvaluationWindow: jest.fn(), + notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE, + setNotificationSettings: jest.fn(), ...overrides, }); diff --git a/frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx b/frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx new file mode 100644 index 000000000000..21274cc6a983 --- /dev/null +++ b/frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx @@ -0,0 +1,97 @@ +import { Select, Tooltip, Typography } from 'antd'; +import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; +import { Info } from 'lucide-react'; +import { useMemo } from 'react'; + +import { useCreateAlertState } from '../context'; + +function MultipleNotifications(): JSX.Element { + const { + notificationSettings, + setNotificationSettings, + } = useCreateAlertState(); + const { currentQuery } = useQueryBuilder(); + + const spaceAggregationOptions = useMemo(() => { + const allGroupBys = currentQuery.builder.queryData?.reduce( + (acc, query) => { + const groupByKeys = query.groupBy?.map((groupBy) => groupBy.key) || []; + return [...acc, ...groupByKeys]; + }, + [], + ); + const uniqueGroupBys = [...new Set(allGroupBys)]; + return uniqueGroupBys.map((key) => ({ + label: key, + value: key, + })); + }, [currentQuery.builder.queryData]); + + const isMultipleNotificationsEnabled = spaceAggregationOptions.length > 0; + + const multipleNotificationsInput = useMemo(() => { + const placeholder = isMultipleNotificationsEnabled + ? 'Select fields to group by (optional)' + : 'No grouping fields available'; + let input = ( +
+