diff --git a/CHANGELOG.md b/CHANGELOG.md index d0f32cc5..6ce5dde1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Enable web overrides for Terraform-based schedules +- Direct user paging improvements ([1358](https://github.com/grafana/oncall/issues/1358)) ## v1.1.36 (2023-03-09) diff --git a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.config.ts b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.config.ts new file mode 100644 index 00000000..e4a5f0cd --- /dev/null +++ b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.config.ts @@ -0,0 +1,19 @@ +import { FormItem, FormItemType } from 'components/GForm/GForm.types'; + +export const manualAlertFormConfig: { name: string; fields: FormItem[] } = { + name: 'Manual Alert Group', + fields: [ + { + name: 'title', + type: FormItemType.Input, + label: 'Title', + validation: { required: true }, + }, + { + name: 'message', + type: FormItemType.TextArea, + label: 'Description', + validation: { required: true }, + }, + ], +}; diff --git a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx index 50735092..36be298f 100644 --- a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx +++ b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx @@ -5,13 +5,14 @@ import cn from 'classnames/bind'; import Block from 'components/GBlock/Block'; import GForm from 'components/GForm/GForm'; -import { FormItem, FormItemType } from 'components/GForm/GForm.types'; import Text from 'components/Text/Text'; import EscalationVariants from 'containers/EscalationVariants/EscalationVariants'; import { prepareForUpdate } from 'containers/EscalationVariants/EscalationVariants.helpers'; import { Alert } from 'models/alertgroup/alertgroup.types'; import { useStore } from 'state/useStore'; +import { manualAlertFormConfig } from './ManualAlertGroup.config'; + import styles from './ManualAlertGroup.module.css'; interface ManualAlertGroupProps { @@ -21,23 +22,6 @@ interface ManualAlertGroupProps { const cx = cn.bind(styles); -const manualAlertFormConfig: { name: string; fields: FormItem[] } = { - name: 'Manual Alert Group', - fields: [ - { - name: 'title', - type: FormItemType.Input, - label: 'Title', - validation: { required: true }, - }, - { - name: 'message', - type: FormItemType.TextArea, - label: 'Describe what is going on', - }, - ], -}; - const ManualAlertGroup: FC = (props) => { const store = useStore(); const [userResponders, setUserResponders] = useState([]); diff --git a/grafana-plugin/src/components/PluginLink/PluginLink.tsx b/grafana-plugin/src/components/PluginLink/PluginLink.tsx index 4770ec7c..df846bef 100644 --- a/grafana-plugin/src/components/PluginLink/PluginLink.tsx +++ b/grafana-plugin/src/components/PluginLink/PluginLink.tsx @@ -13,12 +13,13 @@ interface PluginLinkProps { wrap?: boolean; children: any; query?: Record; + target?: string; } const cx = cn.bind(styles); const PluginLink: FC = (props) => { - const { children, query, disabled, className, wrap = true } = props; + const { children, query, disabled, className, wrap = true, target } = props; const newPath = useMemo(() => getPathFromQueryParams(query), [query]); @@ -35,6 +36,7 @@ const PluginLink: FC = (props) => { return ( li .trash-button { + & > li .hover-button { display: none; } - & > li:hover .trash-button { - display: block; + & > li:hover .hover-button { + display: inline-flex; } & > li { @@ -79,3 +89,17 @@ background: #299c46; } } + +.radio-buttons { + margin: 8px; +} + +.select { + width: 150px !important; +} + +.responder-name { + max-width: 250px; + overflow: hidden; + white-space: nowrap; +} diff --git a/grafana-plugin/src/containers/EscalationVariants/EscalationVariants.tsx b/grafana-plugin/src/containers/EscalationVariants/EscalationVariants.tsx index f4f5e46f..a1ec0ca8 100644 --- a/grafana-plugin/src/containers/EscalationVariants/EscalationVariants.tsx +++ b/grafana-plugin/src/containers/EscalationVariants/EscalationVariants.tsx @@ -1,16 +1,15 @@ import React, { useState, useCallback } from 'react'; import { SelectableValue } from '@grafana/data'; -import { ToolbarButton, ButtonGroup, HorizontalGroup, Icon, Select, IconButton, Label } from '@grafana/ui'; +import { HorizontalGroup, Icon, Select, IconButton, Label, Tooltip, Button } from '@grafana/ui'; import cn from 'classnames/bind'; -import dayjs from 'dayjs'; import { observer } from 'mobx-react'; import Avatar from 'components/Avatar/Avatar'; +import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; import UserWarning from 'containers/UserWarningModal/UserWarning'; import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip'; -import { getTzOffsetString } from 'models/timezone/timezone.helpers'; import { User } from 'models/user/user.types'; import { UserActions } from 'utils/authorization'; @@ -24,7 +23,7 @@ const cx = cn.bind(styles); export interface EscalationVariantsProps { onUpdateEscalationVariants: (data: any) => void; value: { scheduleResponders; userResponders }; - variant?: 'default' | 'primary'; + variant?: 'secondary' | 'primary'; hideSelected?: boolean; } @@ -124,29 +123,17 @@ const EscalationVariants = observer( )}
- - - { - setShowEscalationVariants(true); - }} - > - Add responders - - - - { - setShowEscalationVariants(true); - }} - /> - - + + +
{showEscalationVariants && ( { onUpdateEscalationVariants({ ...value, - userResponders: [...value.userResponders, { type: ResponderType.User, data: user, important: false }], + userResponders: [ + ...value.userResponders, + { + type: ResponderType.User, + data: user, + important: + user.notification_chain_verbal.important && !user.notification_chain_verbal.default + ? true + : false, + }, + ], }); }} /> @@ -188,20 +185,72 @@ const UserResponder = ({ important, data, onImportantChange, handleDelete }) =>
- - {data?.username} ({getTzOffsetString(dayjs().tz(data?.timezone))}) - - + (value === 0 && !data.notification_chain_verbal.default) || + (value === 1 && !data.notification_chain_verbal.important) + } + getOptionLabel={({ value, label }) => { + return ( + + {label} + + ); + }} + onChange={onImportantChange} + /> + notification chain + + ) : ( + + + + + + )} + + + + + + - ); @@ -215,18 +264,39 @@ const ScheduleResponder = ({ important, data, onImportantChange, handleDelete })
- {data.name} + {data.name} + by