fix function editor in Grafana 6, #765

package.json

@@ -69,6 +69,7 @@
  "react-table": "^6.8.6",
  "react-test-renderer": "^16.7.0",
  "react-transition-group": "^2.5.2",
+ "rst2html": "github:thoward/rst2html#990cb89",
  "sass-loader": "^7.1.0",
  "style-loader": "^0.23.1",
  "tether-drop": "^1.4.2",

src/datasource-zabbix/FunctionEditor.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+// import rst2html from 'rst2html';
+import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
+
+// @ts-ignore
+import { PopperController, Popper } from '@grafana/ui';
+
+interface FunctionEditorProps extends FunctionEditorControlsProps {
+ func: FunctionDescriptor;
+}
+
+interface FunctionEditorState {
+ showingDescription: boolean;
+}
+
+class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEditorState> {
+ private triggerRef = React.createRef<HTMLSpanElement>();
+
+ constructor(props: FunctionEditorProps) {
+ super(props);
+
+ this.state = {
+ showingDescription: false,
+ };
+ }
+
+ renderContent = ({ updatePopperPosition }) => {
+ const {
+ onMoveLeft,
+ onMoveRight,
+ func: {
+ def: { name, description },
+ },
+ } = this.props;
+ const { showingDescription } = this.state;
+
+ if (showingDescription) {
+ return (
+ <div style={{ overflow: 'auto', maxHeight: '30rem', textAlign: 'left', fontWeight: 'normal' }}>
+ <h4 style={{ color: 'white' }}> {name} </h4>
+ <div>{description}</div>
+ />
+ </div>
+ );
+ }
+
+ return (
+ <FunctionEditorControls
+ {...this.props}
+ onMoveLeft={() => {
+ onMoveLeft(this.props.func);
+ updatePopperPosition();
+ }}
+ onMoveRight={() => {
+ onMoveRight(this.props.func);
+ updatePopperPosition();
+ }}
+ onDescriptionShow={() => {
+ this.setState({ showingDescription: true }, () => {
+ updatePopperPosition();
+ });
+ }}
+ />
+ );
+ };
+
+ render() {
+ return (
+ <PopperController content={this.renderContent} placement="top" hideAfter={300}>
+ {(showPopper, hidePopper, popperProps) => {
+ return (
+ <>
+ {this.triggerRef && (
+ <Popper
+ {...popperProps}
+ referenceElement={this.triggerRef.current}
+ wrapperClassName="popper"
+ className="popper__background"
+ onMouseLeave={() => {
+ this.setState({ showingDescription: false });
+ hidePopper();
+ }}
+ onMouseEnter={showPopper}
+ renderArrow={({ arrowProps, placement }) => (
+ <div className="popper__arrow" data-placement={placement} {...arrowProps} />
+ )}
+ />
+ )}
+
+ <span
+ ref={this.triggerRef}
+ onClick={popperProps.show ? hidePopper : showPopper}
+ onMouseLeave={() => {
+ hidePopper();
+ this.setState({ showingDescription: false });
+ }}
+ style={{ cursor: 'pointer' }}
+ >
+ {this.props.func.def.name}
+ </span>
+ </>
+ );
+ }}
+ </PopperController>
+ );
+ }
+}
+
+export { FunctionEditor };

src/datasource-zabbix/FunctionEditorControls.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+const DOCS_FUNC_REF_URL = 'https://alexanderzobnin.github.io/grafana-zabbix/reference/functions/';
+
+export interface FunctionDescriptor {
+ text: string;
+ params: string[];
+ def: {
+ category: string;
+ defaultParams: string[];
+ description?: string;
+ fake: boolean;
+ name: string;
+ params: string[];
+ };
+}
+
+export interface FunctionEditorControlsProps {
+ onMoveLeft: (func: FunctionDescriptor) => void;
+ onMoveRight: (func: FunctionDescriptor) => void;
+ onRemove: (func: FunctionDescriptor) => void;
+}
+
+const FunctionHelpButton = (props: { description: string; name: string; onDescriptionShow: () => void }) => {
+ if (props.description) {
+ return <span className="pointer fa fa-question-circle" onClick={props.onDescriptionShow} />;
+ }
+
+ return (
+ <span
+ className="pointer fa fa-question-circle"
+ onClick={() => {
+ window.open(
+ DOCS_FUNC_REF_URL + '#' + props.name,
+ '_blank'
+ );
+ }}
+ />
+ );
+};
+
+export const FunctionEditorControls = (
+ props: FunctionEditorControlsProps & {
+ func: FunctionDescriptor;
+ onDescriptionShow: () => void;
+ }
+) => {
+ const { func, onMoveLeft, onMoveRight, onRemove, onDescriptionShow } = props;
+ return (
+ <div
+ style={{
+ display: 'flex',
+ width: '60px',
+ justifyContent: 'space-between',
+ }}
+ >
+ <span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
+ <FunctionHelpButton
+ name={func.def.name}
+ description={func.def.description}
+ onDescriptionShow={onDescriptionShow}
+ />
+ <span className="pointer fa fa-remove" onClick={() => onRemove(func)} />
+ <span className="pointer fa fa-arrow-right" onClick={() => onMoveRight(func)} />
+ </div>
+ );
+};