b95859cf52
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
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { css, cx } from '@emotion/css';
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { Button, Dropdown, Menu, useStyles2 } from '@grafana/ui';
|
|
import React, { ReactNode, useMemo } from 'react';
|
|
import { getCategories } from '../../metricFunctions';
|
|
import { FuncDef } from '../../types/query';
|
|
|
|
type Props = {
|
|
onFuncAdd: (def: FuncDef) => void;
|
|
};
|
|
|
|
export function AddZabbixFunction({ onFuncAdd }: Props) {
|
|
const styles = useStyles2(getStyles);
|
|
const menuItems = useMemo(() => buildMenuItems(onFuncAdd), [onFuncAdd]);
|
|
|
|
const menuOverlay = useMemo(() => <Menu role="menu">{menuItems}</Menu>, [menuItems]);
|
|
|
|
return (
|
|
<Dropdown overlay={menuOverlay}>
|
|
<Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
function buildMenuItems(onClick: (func: FuncDef) => void) {
|
|
const categories = getCategories();
|
|
const menuItems: ReactNode[] = [];
|
|
for (const categoryName in categories) {
|
|
const functions = categories[categoryName];
|
|
const subItems = functions.map((f) => <Menu.Item label={f.name} key={f.name} onClick={() => onClick(f)} />);
|
|
menuItems.push(<Menu.Item label={categoryName} key={categoryName} childItems={subItems} />);
|
|
}
|
|
return menuItems;
|
|
}
|
|
|
|
function getStyles(theme: GrafanaTheme2) {
|
|
return {
|
|
button: css`
|
|
margin-right: ${theme.spacing(0.5)};
|
|
`,
|
|
};
|
|
}
|