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

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

@ -57,8 +57,8 @@ export class OptionsPaneCategoryDescriptor {
return ( return (
<OptionsPaneCategory key={this.props.title} {...this.props}> <OptionsPaneCategory key={this.props.title} {...this.props}>
{this.items.map((item) => item.render())} {this.items.map((item) => item.render(searchQuery))}
{this.categories.map((category) => category.render())} {this.categories.map((category) => category.render(searchQuery))}
</OptionsPaneCategory> </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 [listMode, setListMode] = useState(OptionFilter.All);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const [panelFrameOptions, vizOptions, justOverrides, libraryPanelOptions] = useMemo( const [panelFrameOptions, vizOptions, libraryPanelOptions] = useMemo(
() => [ () => [getPanelFrameCategory(props), getVizualizationOptions(props), getLibraryPanelOptionsCategory(props)],
getPanelFrameCategory(props),
getVizualizationOptions(props),
getFieldOverrideCategories(props),
getLibraryPanelOptionsCategory(props),
],
// eslint-disable-next-line react-hooks/exhaustive-deps // 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[] = []; 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 { OverrideCategoryTitle } from './OverrideCategoryTitle';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] { export function getFieldOverrideCategories(
props: OptionPaneRenderProps,
searchQuery: string
): OptionsPaneCategoryDescriptor[] {
const categories: OptionsPaneCategoryDescriptor[] = []; const categories: OptionsPaneCategoryDescriptor[] = [];
const currentFieldConfig = props.panel.fieldConfig; const currentFieldConfig = props.panel.fieldConfig;
const registry = props.plugin.fieldConfigRegistry; const registry = props.plugin.fieldConfigRegistry;
@ -170,6 +173,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
property={property} property={property}
registry={registry} registry={registry}
context={context} context={context}
searchQuery={searchQuery}
/> />
); );
}, },