mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
1284c596fe
* Fix random typo I found * add 'useDataFrame' boolean to each layer type to determine whether the layer queues off of query data * Add data frame picker to options layout depending on layer type * change layer update logic to render features from a specific data frame. Lift data frame selection up a level in order to add some more complex error handling. * add a todo to the MapLayerRegistryItem interface * update optional arg in function signature for consistency * move dataframe filtering to paneldata, revert layers to prior state * commit refactor, need to clean up still * pull copy-pasted code into its own function * clean up comments * Update layer.ts * remove unused types * fix spacing * improve dropdown * need to add dependency to this callback function, otherwise it will always use the context of the last layer * add data query recovery logic to handle query renames Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import React, { FC, useCallback, useMemo, useState } from 'react';
|
|
import { FrameMatcherID, getFieldDisplayName, MatcherConfig, SelectableValue, StandardEditorProps } from '@grafana/data';
|
|
import { Select } from '@grafana/ui';
|
|
|
|
const recoverRefIdMissing = (newRefIds: SelectableValue[], oldRefIds: SelectableValue[], previousValue: string | undefined): SelectableValue | undefined => {
|
|
if (!previousValue) {
|
|
return;
|
|
}
|
|
// Previously selected value is missing from the new list.
|
|
// Find the value that is in the new list but isn't in the old list
|
|
let changedTo = newRefIds.find((refId) => {
|
|
return !oldRefIds.some((refId2) => {
|
|
return refId === refId2;
|
|
});
|
|
});
|
|
if (changedTo) {
|
|
// Found the new value, we assume the old value changed to this one, so we'll use it
|
|
return changedTo;
|
|
}
|
|
return;
|
|
};
|
|
|
|
export const FrameSelectionEditor: FC<StandardEditorProps<MatcherConfig>> = ({
|
|
value,
|
|
context,
|
|
onChange,
|
|
item,
|
|
}) => {
|
|
const listOfRefId = useMemo(() => {
|
|
return context.data.map(f => ({
|
|
value: f.refId,
|
|
label: `Query: ${f.refId} (size: ${f.length})`,
|
|
description: f.fields.map(f => getFieldDisplayName(f)).join(', '),
|
|
}));
|
|
}, [context.data]);
|
|
|
|
const [priorSelectionState, updatePriorSelectionState] = useState({
|
|
refIds: [] as SelectableValue[],
|
|
value: undefined as string | undefined,
|
|
});
|
|
|
|
const currentValue = useMemo(() => {
|
|
return listOfRefId.find((refId) => refId.value === value?.options) ?? recoverRefIdMissing(listOfRefId, priorSelectionState.refIds, priorSelectionState.value);
|
|
}, [value, listOfRefId])
|
|
|
|
const onFilterChange = useCallback((v: SelectableValue<string>) => {
|
|
onChange(v?.value ? {
|
|
"id": FrameMatcherID.byRefId,
|
|
"options": v.value
|
|
} : undefined);
|
|
}, [context.options.name]);
|
|
|
|
if (listOfRefId !== priorSelectionState.refIds || currentValue?.value !== priorSelectionState.value) {
|
|
updatePriorSelectionState({
|
|
refIds: listOfRefId,
|
|
value: currentValue?.value
|
|
});
|
|
}
|
|
return (
|
|
<Select options={listOfRefId} onChange={onFilterChange} isClearable={true} placeholder="Change filter" value={currentValue}/>
|
|
);
|
|
};
|