mirror of https://github.com/grafana/grafana
Alerting: Improve UI for making more clear that evaluation interval belongs to the group (#56397)
* In GrafanaEvaluationBehaviour component : Split evaluation interval from for duration and add button to edit to allow editing it and warning * Move folder and group fields to the evaluation section in the alert form * Include 'Group behaviour' info in a card and fix 'Edit group behaviour' button onClick. * Create hook for getting groups for a particular folder * Use dropdown in group instead of input and fill it with groups that belong to the selected folder * Add evaluation interval for each group in dropdown , and show warning in case user wants to update it * Avoid saving evaluation interval when some rules in the same group would have invalid For with this change * Clear group value when reseting the drop down * Remove evaluationEvery from form values, show this as a label and add a button to edit the group * Open EditRuleGroupModal for editing evaluation interval form the alert rule form * Fix aligment in group behaviour card * compact space in evaluation behaviour card and change group drop down label * In EditgroupModal, in case of grafana managed group, show folder instead of namespcace label and disable the folder name input * Add edge case in rulesInSameGroupHaveInvalidFor method when For value is zero * Vertically align annotations input to the evaluation section in alert rule form * Fix width when editing new group * Add placeholder for group input * Make folder and group in modal readonly from alert form and disable edit group button when new group * Update texts * Don't show evaluation behaviour section until folder and group are selected * Update texts * Fix merge conflits * Fix wrong margin in evaluation label * Remove non-used isRulerGrafanaRuleDTO method * Remove negative margin to avoid overlaping on Firefoxpull/59063/head^2
Sonia Aguilar
3 years ago
committed by
GitHub
parent
8f567d57fa
commit
99725bf9d4
@ -0,0 +1,226 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'; |
||||
import { useFormContext } from 'react-hook-form'; |
||||
|
||||
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; |
||||
import { Stack } from '@grafana/experimental'; |
||||
import { Field, InputControl, Label, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; |
||||
import { FolderPickerFilter } from 'app/core/components/Select/FolderPicker'; |
||||
import { contextSrv } from 'app/core/core'; |
||||
import { DashboardSearchHit } from 'app/features/search/types'; |
||||
import { AccessControlAction, useDispatch } from 'app/types'; |
||||
import { RulerRuleDTO, RulerRuleGroupDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto'; |
||||
|
||||
import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; |
||||
import { fetchRulerRulesIfNotFetchedYet } from '../../state/actions'; |
||||
import { RuleForm, RuleFormValues } from '../../types/rule-form'; |
||||
import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource'; |
||||
import { InfoIcon } from '../InfoIcon'; |
||||
|
||||
import { getIntervalForGroup } from './GrafanaEvaluationBehavior'; |
||||
import { containsSlashes, Folder, RuleFolderPicker } from './RuleFolderPicker'; |
||||
import { SelectWithAdd } from './SelectWIthAdd'; |
||||
import { checkForPathSeparator } from './util'; |
||||
|
||||
const useGetGroups = (groupfoldersForGrafana: RulerRulesConfigDTO | null | undefined, folderName: string) => { |
||||
const groupOptions = useMemo(() => { |
||||
const groupsForFolderResult: Array<RulerRuleGroupDTO<RulerRuleDTO>> = groupfoldersForGrafana |
||||
? groupfoldersForGrafana[folderName] ?? [] |
||||
: []; |
||||
return groupsForFolderResult.map((group) => group.name); |
||||
}, [groupfoldersForGrafana, folderName]); |
||||
|
||||
return groupOptions; |
||||
}; |
||||
|
||||
function mapGroupsToOptions(groups: string[]): Array<SelectableValue<string>> { |
||||
return groups.map((group) => ({ label: group, value: group })); |
||||
} |
||||
interface FolderAndGroupProps { |
||||
initialFolder: RuleForm | null; |
||||
} |
||||
|
||||
export const useGetGroupOptionsFromFolder = (folderTilte: string) => { |
||||
const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules); |
||||
|
||||
const groupfoldersForGrafana = rulerRuleRequests[GRAFANA_RULES_SOURCE_NAME]; |
||||
|
||||
const groupOptions: Array<SelectableValue<string>> = mapGroupsToOptions( |
||||
useGetGroups(groupfoldersForGrafana?.result, folderTilte) |
||||
); |
||||
const groupsForFolder = groupfoldersForGrafana?.result; |
||||
return { groupOptions, groupsForFolder, loading: groupfoldersForGrafana?.loading }; |
||||
}; |
||||
|
||||
const useRuleFolderFilter = (existingRuleForm: RuleForm | null) => { |
||||
const isSearchHitAvailable = useCallback( |
||||
(hit: DashboardSearchHit) => { |
||||
const rbacDisabledFallback = contextSrv.hasEditPermissionInFolders; |
||||
|
||||
const canCreateRuleInFolder = contextSrv.hasAccessInMetadata( |
||||
AccessControlAction.AlertingRuleCreate, |
||||
hit, |
||||
rbacDisabledFallback |
||||
); |
||||
|
||||
const canUpdateInCurrentFolder = |
||||
existingRuleForm && |
||||
hit.folderId === existingRuleForm.id && |
||||
contextSrv.hasAccessInMetadata(AccessControlAction.AlertingRuleUpdate, hit, rbacDisabledFallback); |
||||
return canCreateRuleInFolder || canUpdateInCurrentFolder; |
||||
}, |
||||
[existingRuleForm] |
||||
); |
||||
|
||||
return useCallback<FolderPickerFilter>( |
||||
(folderHits) => |
||||
folderHits |
||||
.filter(isSearchHitAvailable) |
||||
.filter((value: DashboardSearchHit) => !containsSlashes(value.title ?? '')), |
||||
[isSearchHitAvailable] |
||||
); |
||||
}; |
||||
|
||||
export function FolderAndGroup({ initialFolder }: FolderAndGroupProps) { |
||||
const { |
||||
formState: { errors }, |
||||
watch, |
||||
control, |
||||
} = useFormContext<RuleFormValues>(); |
||||
|
||||
const styles = useStyles2(getStyles); |
||||
const dispatch = useDispatch(); |
||||
const folderFilter = useRuleFolderFilter(initialFolder); |
||||
const [isAddingGroup, setIsAddingGroup] = useState(false); |
||||
|
||||
const folder = watch('folder'); |
||||
const group = watch('group'); |
||||
const [selectedGroup, setSelectedGroup] = useState(group); |
||||
const initialRender = useRef(true); |
||||
|
||||
const { groupOptions, groupsForFolder, loading } = useGetGroupOptionsFromFolder(folder?.title ?? ''); |
||||
|
||||
useEffect(() => setSelectedGroup(group), [group, setSelectedGroup]); |
||||
|
||||
useEffect(() => { |
||||
dispatch(fetchRulerRulesIfNotFetchedYet(GRAFANA_RULES_SOURCE_NAME)); |
||||
}, [dispatch]); |
||||
|
||||
const resetGroup = useCallback(() => { |
||||
if (group && !initialRender.current && folder?.title) { |
||||
setSelectedGroup(''); |
||||
} |
||||
initialRender.current = false; |
||||
}, [group, folder?.title]); |
||||
|
||||
const groupIsInGroupOptions = useCallback( |
||||
(group_: string) => { |
||||
return groupOptions.includes((groupInList: SelectableValue<string>) => groupInList.label === group_); |
||||
}, |
||||
[groupOptions] |
||||
); |
||||
|
||||
return ( |
||||
<div className={styles.container}> |
||||
<Field |
||||
label={ |
||||
<Label htmlFor="folder" description={'Select a folder for your rule.'}> |
||||
<Stack gap={0.5}> |
||||
Folder |
||||
<InfoIcon |
||||
text={ |
||||
'Each folder has unique folder permission. When you store multiple rules in a folder, the folder access permissions are assigned to the rules.' |
||||
} |
||||
/> |
||||
</Stack> |
||||
</Label> |
||||
} |
||||
className={styles.formInput} |
||||
error={errors.folder?.message} |
||||
invalid={!!errors.folder?.message} |
||||
data-testid="folder-picker" |
||||
> |
||||
<InputControl |
||||
render={({ field: { ref, ...field } }) => ( |
||||
<RuleFolderPicker |
||||
inputId="folder" |
||||
{...field} |
||||
enableCreateNew={contextSrv.hasPermission(AccessControlAction.FoldersCreate)} |
||||
enableReset={true} |
||||
filter={folderFilter} |
||||
dissalowSlashes={true} |
||||
onChange={({ title, uid }) => { |
||||
field.onChange({ title, uid }); |
||||
if (!groupIsInGroupOptions(selectedGroup)) { |
||||
setIsAddingGroup(false); |
||||
resetGroup(); |
||||
} |
||||
}} |
||||
/> |
||||
)} |
||||
name="folder" |
||||
rules={{ |
||||
required: { value: true, message: 'Select a folder' }, |
||||
validate: { |
||||
pathSeparator: (folder: Folder) => checkForPathSeparator(folder.title), |
||||
}, |
||||
}} |
||||
/> |
||||
</Field> |
||||
|
||||
<Field |
||||
label="Evaluation group (interval)" |
||||
data-testid="group-picker" |
||||
description="Select a group to evaluate all rules in the same group over the same time interval." |
||||
className={styles.formInput} |
||||
error={errors.group?.message} |
||||
invalid={!!errors.group?.message} |
||||
> |
||||
<InputControl |
||||
render={({ field: { ref, ...field } }) => |
||||
loading ? ( |
||||
<LoadingPlaceholder text="Loading..." /> |
||||
) : ( |
||||
<SelectWithAdd |
||||
key={`my_unique_select_key__${folder?.title ?? ''}`} |
||||
{...field} |
||||
options={groupOptions} |
||||
getOptionLabel={(option: SelectableValue<string>) => |
||||
`${option.label} (${getIntervalForGroup(groupsForFolder, option.label ?? '', folder?.title ?? '')})` |
||||
} |
||||
value={selectedGroup} |
||||
custom={isAddingGroup} |
||||
onCustomChange={(custom: boolean) => setIsAddingGroup(custom)} |
||||
placeholder="Evaluation group name" |
||||
onChange={(value: string) => { |
||||
field.onChange(value); |
||||
setSelectedGroup(value); |
||||
}} |
||||
/> |
||||
) |
||||
} |
||||
name="group" |
||||
control={control} |
||||
rules={{ |
||||
required: { value: true, message: 'Must enter a group name' }, |
||||
}} |
||||
/> |
||||
</Field> |
||||
</div> |
||||
); |
||||
} |
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
container: css` |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: baseline; |
||||
max-width: ${theme.breakpoints.values.sm}px; |
||||
justify-content: space-between; |
||||
`,
|
||||
formInput: css` |
||||
width: 275px; |
||||
& + & { |
||||
margin-left: ${theme.spacing(3)}; |
||||
} |
||||
`,
|
||||
}); |
||||
Loading…
Reference in new issue