|
| 1 | +import { Controller, UseFormSetValue, useWatch } from 'react-hook-form'; |
| 2 | +import { getAdhocFilterSourceKinds } from '@hyperdx/common-utils/dist/filters'; |
| 3 | +import { |
| 4 | + AdhocFilterSourceType, |
| 5 | + DashboardFilter, |
| 6 | + SourceKind, |
| 7 | +} from '@hyperdx/common-utils/dist/types'; |
| 8 | +import { Box, Divider, SegmentedControl } from '@mantine/core'; |
| 9 | + |
| 10 | +import { CheckBoxControlled } from '@/components/InputControlled'; |
| 11 | +import { SourceMultiSelectControlled } from '@/components/SourceMultiSelect'; |
| 12 | +import { IS_PROMQL_ENABLED } from '@/config'; |
| 13 | +import { useSources } from '@/source'; |
| 14 | + |
| 15 | +import { CustomInputWrapper } from './CustomInputWrapper'; |
| 16 | +import { FilterFormControl, FilterFormValues } from './filterFormState'; |
| 17 | +import { VariableNameInput } from './VariableNameInput'; |
| 18 | + |
| 19 | +const SOURCE_TYPE_OPTIONS: { value: AdhocFilterSourceType; label: string }[] = [ |
| 20 | + { value: 'sql', label: 'ClickHouse' }, |
| 21 | + { value: 'promql', label: 'Prometheus' }, |
| 22 | +]; |
| 23 | + |
| 24 | +interface AdhocFilterEditFormProps { |
| 25 | + control: FilterFormControl; |
| 26 | + setValue: UseFormSetValue<FilterFormValues>; |
| 27 | + /** Filters other than the one being edited, used to keep variable names unique. */ |
| 28 | + otherFilters: DashboardFilter[]; |
| 29 | +} |
| 30 | + |
| 31 | +/** Form describing an ad hoc dashboard filter */ |
| 32 | +export const AdhocFilterEditForm = ({ |
| 33 | + control, |
| 34 | + setValue, |
| 35 | + otherFilters, |
| 36 | +}: AdhocFilterEditFormProps) => { |
| 37 | + const { data: allSources } = useSources(); |
| 38 | + const [sourceType, isBroadcastEnabled] = useWatch({ |
| 39 | + control, |
| 40 | + name: ['sourceType', 'isBroadcastEnabled'], |
| 41 | + }); |
| 42 | + const allowedSourceKinds = getAdhocFilterSourceKinds(sourceType); |
| 43 | + // Kept visible for a saved PromQL filter so its source type can be changed |
| 44 | + const showSourceType = |
| 45 | + sourceType === 'promql' || |
| 46 | + (IS_PROMQL_ENABLED && |
| 47 | + !!allSources?.some(s => s.kind === SourceKind.Promql)); |
| 48 | + |
| 49 | + // The multi-selects hide sources of other kinds, which the form can still |
| 50 | + // hold after switching from another filter type. |
| 51 | + const validateSourceKinds = (ids: string[] | undefined) => { |
| 52 | + const hasOtherKind = ids?.some(id => { |
| 53 | + const source = allSources?.find(s => s.id === id); |
| 54 | + return source && !allowedSourceKinds.includes(source.kind); |
| 55 | + }); |
| 56 | + return ( |
| 57 | + !hasOtherKind || |
| 58 | + (sourceType === 'promql' |
| 59 | + ? 'Select only PromQL sources' |
| 60 | + : 'Select only log, trace, or session sources') |
| 61 | + ); |
| 62 | + }; |
| 63 | + |
| 64 | + return ( |
| 65 | + <> |
| 66 | + {showSourceType && ( |
| 67 | + <CustomInputWrapper |
| 68 | + label="Source type" |
| 69 | + tooltipText="Keys come from the columns and map keys of SQL sources, or from the labels of PromQL sources" |
| 70 | + > |
| 71 | + <Controller |
| 72 | + control={control} |
| 73 | + name="sourceType" |
| 74 | + render={({ field: { value, onChange } }) => ( |
| 75 | + <SegmentedControl |
| 76 | + size="xs" |
| 77 | + value={value} |
| 78 | + onChange={next => { |
| 79 | + onChange(next); |
| 80 | + // Sources of the previous type can't be kept |
| 81 | + setValue('sources', [], { shouldDirty: true }); |
| 82 | + setValue('appliesToSourceIds', [], { shouldDirty: true }); |
| 83 | + }} |
| 84 | + data={SOURCE_TYPE_OPTIONS} |
| 85 | + data-testid="adhoc-filter-source-type" |
| 86 | + /> |
| 87 | + )} |
| 88 | + /> |
| 89 | + </CustomInputWrapper> |
| 90 | + )} |
| 91 | + <CustomInputWrapper |
| 92 | + label="Data sources" |
| 93 | + tooltipText="The sources whose keys and values the filter offers" |
| 94 | + > |
| 95 | + <SourceMultiSelectControlled |
| 96 | + control={control} |
| 97 | + name="sources" |
| 98 | + data-testid="adhoc-filter-sources" |
| 99 | + comboboxProps={{ withinPortal: true }} |
| 100 | + placeholder="Select sources" |
| 101 | + allowedSourceKinds={allowedSourceKinds} |
| 102 | + rules={{ |
| 103 | + validate: (value: string[] | undefined) => |
| 104 | + !value?.length |
| 105 | + ? 'Select at least one source' |
| 106 | + : validateSourceKinds(value), |
| 107 | + }} |
| 108 | + /> |
| 109 | + </CustomInputWrapper> |
| 110 | + |
| 111 | + <Divider /> |
| 112 | + <CheckBoxControlled |
| 113 | + control={control} |
| 114 | + name="isBroadcastEnabled" |
| 115 | + size="xs" |
| 116 | + label="Broadcast filter conditions" |
| 117 | + description={ |
| 118 | + sourceType === 'promql' |
| 119 | + ? 'Automatically add the selected conditions as label matchers to every selector in PromQL tiles. Optionally, specify which sources to broadcast to.' |
| 120 | + : 'Automatically apply the selected conditions to every tile based on the selected data sources. Optionally, specify which sources to broadcast to.' |
| 121 | + } |
| 122 | + data-testid="filter-broadcast-checkbox" |
| 123 | + /> |
| 124 | + {isBroadcastEnabled && ( |
| 125 | + <Box ml="xl"> |
| 126 | + <CustomInputWrapper |
| 127 | + label="Applies to sources" |
| 128 | + tooltipText="Which tiles the broadcast reaches. Leave empty to broadcast to all tiles using the filter's data sources." |
| 129 | + > |
| 130 | + <SourceMultiSelectControlled |
| 131 | + control={control} |
| 132 | + name="appliesToSourceIds" |
| 133 | + data-testid="applies-to-source-selector" |
| 134 | + comboboxProps={{ withinPortal: true }} |
| 135 | + placeholder="Same as data sources" |
| 136 | + allowedSourceKinds={allowedSourceKinds} |
| 137 | + rules={{ validate: validateSourceKinds }} |
| 138 | + /> |
| 139 | + </CustomInputWrapper> |
| 140 | + </Box> |
| 141 | + )} |
| 142 | + <Divider /> |
| 143 | + <VariableNameInput control={control} otherFilters={otherFilters} /> |
| 144 | + </> |
| 145 | + ); |
| 146 | +}; |
0 commit comments