IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Overrides: Pass searchQuery to overrides section to highlight correctly (#41684)

Browse Source
This commit is contained in:
Ashley Harrison 2021-11-16 11:41:53 +00:00 committed by GitHub
parent d3e19b1b3b
commit 0e76f347c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
View File

@ -9,6 +9,7 @@ import React from 'react';
import { Counter, Field, HorizontalGroup, IconButton, Label, stylesFactory, useTheme } from '@grafana/ui';
import { css, cx } from '@emotion/css';
import { OptionsPaneCategory } from './OptionsPaneCategory';
import Highlighter from 'react-highlight-words';
interface DynamicConfigValueEditorProps {
property: DynamicConfigValue;
@ -17,6 +18,7 @@ interface DynamicConfigValueEditorProps {
context: FieldOverrideContext;
onRemove: () => void;
isSystemOverride?: boolean;
searchQuery: string;
}
export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ({
@ -26,6 +28,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
onChange,
onRemove,
isSystemOverride,
searchQuery,
}) => {
const theme = useTheme();
const styles = getStyles(theme);
@ -48,7 +51,11 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
<HorizontalGroup justify="space-between">
<Label category={labelCategory} description={includeDescription ? item.description : undefined}>
{item.name}
<Highlighter
textToHighlight={item.name}
searchWords={[searchQuery]}
highlightClassName={'search-fragment-highlight'}
/>
{!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
</Label>
{!isSystemOverride && (

4
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
View File

@ -57,8 +57,8 @@ export class OptionsPaneCategoryDescriptor {
return (
<OptionsPaneCategory key={this.props.title} {...this.props}>
{this.items.map((item) => item.render())}
{this.categories.map((category) => category.render())}
{this.items.map((item) => item.render(searchQuery))}
{this.categories.map((category) => category.render(searchQuery))}
</OptionsPaneCategory>
);
}

17
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
View File

@ -20,16 +20,17 @@ export const OptionsPaneOptions: React.FC<OptionPaneRenderProps> = (props) => {
const [listMode, setListMode] = useState(OptionFilter.All);
const styles = useStyles2(getStyles);
const [panelFrameOptions, vizOptions, justOverrides, libraryPanelOptions] = useMemo(
() => [
getPanelFrameCategory(props),
getVizualizationOptions(props),
getFieldOverrideCategories(props),
getLibraryPanelOptionsCategory(props),
],
const [panelFrameOptions, vizOptions, libraryPanelOptions] = useMemo(
() => [getPanelFrameCategory(props), getVizualizationOptions(props), getLibraryPanelOptionsCategory(props)],
// eslint-disable-next-line react-hooks/exhaustive-deps
[panel.configRev, props.data, props.instanceState]
[panel.configRev, props.data, props.instanceState, searchQuery]
);
const justOverrides = useMemo(
() => getFieldOverrideCategories(props, searchQuery),
// eslint-disable-next-line react-hooks/exhaustive-deps
[panel.configRev, props.data, props.instanceState, searchQuery]
);
const mainBoxElements: React.ReactNode[] = [];

6
public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
View File

@ -18,7 +18,10 @@ import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/l
import { OverrideCategoryTitle } from './OverrideCategoryTitle';
import { css } from '@emotion/css';
export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] {
export function getFieldOverrideCategories(
props: OptionPaneRenderProps,
searchQuery: string
): OptionsPaneCategoryDescriptor[] {
const categories: OptionsPaneCategoryDescriptor[] = [];
const currentFieldConfig = props.panel.fieldConfig;
const registry = props.plugin.fieldConfigRegistry;
@ -170,6 +173,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
property={property}
registry={registry}
context={context}
searchQuery={searchQuery}
/>
);
},