Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Functions dropdown positioning (#2073)

Browse Source 
Now it uses the position where it have enough space for it. Also removed
the input component as it didn't do anything.

<img width="2032" height="1167" alt="Screenshot 2025-09-05 at 14 29 00"
src="https://github.com/user-attachments/assets/0f75e4c3-ae7d-4200-b76c-e1f781f339ac"
/>

Fixes #2069
This commit is contained in:
Zoltán Bedi
2025-09-15 20:12:36 +02:00
committed by GitHub
parent 47226b864d
commit b95859cf52
2 changed files with 14 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curvy-pianos-tell.md Normal file
View File

@@ -0,0 +1,5 @@
---
'grafana-zabbix': patch
---
Fix: Functions dropdown positioning

49
src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
View File

@@ -1,61 +1,30 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { useMemo, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Button, ClickOutsideWrapper, Icon, Input, Menu, useStyles2, useTheme2 } from '@grafana/ui'; import { Button, Dropdown, Menu, useStyles2 } from '@grafana/ui';
import { FuncDef } from '../../types/query'; import React, { ReactNode, useMemo } from 'react';
import { getCategories } from '../../metricFunctions'; import { getCategories } from '../../metricFunctions';
import { FuncDef } from '../../types/query';
// import { mapFuncDefsToSelectables } from './helpers';
type Props = { type Props = {
// funcDefs: MetricFunc;
onFuncAdd: (def: FuncDef) => void; onFuncAdd: (def: FuncDef) => void;
}; };
export function AddZabbixFunction({ onFuncAdd }: Props) { export function AddZabbixFunction({ onFuncAdd }: Props) {
const [showMenu, setShowMenu] = useState(false);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const theme = useTheme2(); const menuItems = useMemo(() => buildMenuItems(onFuncAdd), [onFuncAdd]);
const onFuncAddInternal = (def: FuncDef) => { const menuOverlay = useMemo(() => <Menu role="menu">{menuItems}</Menu>, [menuItems]);
onFuncAdd(def);
setShowMenu(false);
};
const onSearch = (e: React.FormEvent<HTMLInputElement>) => {
console.log(e.currentTarget.value);
};
const onClickOutside = () => {
setShowMenu(false);
};
const menuItems = useMemo(() => buildMenuItems(onFuncAddInternal), [onFuncAdd]);
return ( return (
<div> <Dropdown overlay={menuOverlay}>
{!showMenu && ( <Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />
<Button </Dropdown>
icon="plus"
variant="secondary"
className={cx(styles.button)}
aria-label="Add new function"
onClick={() => setShowMenu(!showMenu)}
/>
)}
{showMenu && (
<ClickOutsideWrapper onClick={onClickOutside} useCapture>
<Input onChange={onSearch} suffix={<Icon name="search" />} />
<Menu style={{ position: 'absolute', zIndex: theme.zIndex.dropdown }}>{menuItems}</Menu>
</ClickOutsideWrapper>
)}
</div>
); );
} }
function buildMenuItems(onClick: (func: FuncDef) => void) { function buildMenuItems(onClick: (func: FuncDef) => void) {
const categories = getCategories(); const categories = getCategories();
const menuItems: JSX.Element[] = []; const menuItems: ReactNode[] = [];
for (const categoryName in categories) { for (const categoryName in categories) {
const functions = categories[categoryName]; const functions = categories[categoryName];
const subItems = functions.map((f) => <Menu.Item label={f.name} key={f.name} onClick={() => onClick(f)} />); const subItems = functions.map((f) => <Menu.Item label={f.name} key={f.name} onClick={() => onClick(f)} />);