Build plugin with grafana toolkit (#1539)

* Use grafana toolkit template for building plugin * Fix linter and type errors * Update styles building * Fix sass deprecation warning * Remove empty js files produced by webpack building sass * Fix signing script * Replace classnames with cx * Fix data source config page * Use custom webpack config instead of overriding original one * Use gpx_ prefix for plugin executable * Remove unused configs * Roll back react hooks dependencies usage * Move plugin-specific ts config to root config file * Temporary do not use rst2html for function description tooltip * Remove unused code * remove unused dependencies * update react table dependency * Migrate tests to typescript * remove unused dependencies * Remove old webpack configs * Add sign target to makefile * Add magefile * Update CI test job * Update go packages * Update build instructions * Downgrade go version to 1.18 * Fix go version in ci * Fix metric picker * Add comment to webpack config * remove angular mocks * update bra config * Rename datasource-zabbix to datasource (fix mage build) * Add instructions for building backend with mage * Fix webpack targets * Fix ci backend tests * Add initial e2e tests * Fix e2e ci tests * Update docker compose for cypress tests * build grafana docker image * Fix docker stop task * CI: add Grafana compatibility check
2022-12-09 14:14:34 +03:00
parent 26ed740945
commit e3e896742b
136 changed files with 5765 additions and 4636 deletions
--- a/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
+++ b/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx
@@ -0,0 +1,73 @@
+import { css, cx } from '@emotion/css';
+import React, { useMemo, useState } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ClickOutsideWrapper, Icon, Input, Menu, useStyles2, useTheme2 } from '@grafana/ui';
+import { FuncDef } from '../../types';
+import { getCategories } from '../../metricFunctions';
+
+// import { mapFuncDefsToSelectables } from './helpers';
+
+type Props = {
+  // funcDefs: MetricFunc;
+  onFuncAdd: (def: FuncDef) => void;
+};
+
+export function AddZabbixFunction({ onFuncAdd }: Props) {
+  const [showMenu, setShowMenu] = useState(false);
+  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+
+  const onFuncAddInternal = (def: FuncDef) => {
+    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 (
+    <div>
+      {!showMenu && (
+        <Button
+          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) {
+  const categories = getCategories();
+  const menuItems: JSX.Element[] = [];
+  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)};
+    `,
+  };
+}