/usr/share/grafana/public/app/plugins/datasource/graphite/components
import { css, cx } from '@emotion/css'; import { Fragment, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Stack, InlineLabel, useStyles2 } from '@grafana/ui'; import { FuncInstance } from '../gfunc'; import { actions } from '../state/actions'; import { useDispatch } from '../state/context'; import { FunctionEditor } from './FunctionEditor'; import { EditableParam, FunctionParamEditor } from './FunctionParamEditor'; import { mapFuncInstanceToParams } from './helpers'; export type FunctionEditorProps = { func: FuncInstance; }; /** * Allows editing function params and removing/moving a function (note: editing function name is not supported) */ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) { const dispatch = useDispatch(); const styles = useStyles2(getStyles); // keep track of mouse over and isExpanded state to display buttons for adding optional/multiple params // only when the user mouse over over the function editor OR any param editor is expanded. const [mouseOver, setIsMouseOver] = useState(false); const [expanded, setIsExpanded] = useState(false); let params = mapFuncInstanceToParams(func); params = params.filter((p: EditableParam, index: number) => { // func.added is set for newly added functions - see autofocus below return (index < func.def.params.length && !p.optional) || func.added || p.value || expanded || mouseOver; }); return ( <div className={cx(styles.container, { [styles.error]: func.def.unknown })} onBlur={() => setIsMouseOver(false)} onFocus={() => setIsMouseOver(true)} onMouseOver={() => setIsMouseOver(true)} onMouseOut={() => setIsMouseOver(false)} // We set this to ensure if any long text wraps the container expands with it style={{ height: '100%' }} > <Stack gap={0} alignItems={'baseline'}> <FunctionEditor func={func} onMoveLeft={() => { dispatch(actions.moveFunction({ func, offset: -1 })); }} onMoveRight={() => { dispatch(actions.moveFunction({ func, offset: 1 })); }} onRemove={() => { dispatch(actions.removeFunction({ func })); }} /> <InlineLabel className={styles.label} width={'auto'}> ( </InlineLabel> {params.map((editableParam: EditableParam, index: number) => { return ( <Fragment key={index}> <FunctionParamEditor autofocus={index === 0 && func.added} editableParam={editableParam} onChange={(value) => { if (value !== '' || editableParam.optional) { dispatch(actions.updateFunctionParam({ func, index, value })); } setIsExpanded(false); setIsMouseOver(false); }} onExpandedChange={setIsExpanded} /> {index !== params.length - 1 ? ',' : ''} </Fragment> ); })} <InlineLabel className={styles.label} width={'auto'}> ) </InlineLabel> </Stack> </div> ); } const getStyles = (theme: GrafanaTheme2) => ({ container: css({ backgroundColor: theme.colors.background.secondary, borderRadius: theme.shape.radius.default, marginRight: theme.spacing(0.5), padding: `0 ${theme.spacing(1)}`, height: `${theme.v1.spacing.formInputHeight}px`, }), error: css({ border: `1px solid ${theme.colors.error.main}`, }), label: css({ padding: 0, margin: 0, }), button: css({ padding: theme.spacing(0.5), }), });
.
Edit
..
Edit
AddGraphiteFunction.tsx
Edit
AnnotationsEditor.tsx
Edit
FunctionEditor.test.tsx
Edit
FunctionEditor.tsx
Edit
FunctionEditorControls.tsx
Edit
FunctionParamEditor.tsx
Edit
FunctionsSection.tsx
Edit
GraphiteFunctionEditor.tsx
Edit
GraphiteQueryEditor.tsx
Edit
GraphiteTextEditor.tsx
Edit
GraphiteVariableEditor.tsx
Edit
MetricSegment.tsx
Edit
MetricTankMetaInspector.tsx
Edit
MetricsSection.tsx
Edit
PlayButton.tsx
Edit
SeriesSection.tsx
Edit
TagEditor.tsx
Edit
TagsSection.tsx
Edit
helpers.test.ts
Edit
helpers.ts
Edit