IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Show graphite functions descriptions (#32305)

Browse Source 
* Fix parsing and displaying Graphite function descriptions

* Update docs

* Add support for inf value

* Remove redundant console.log

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Remove empty line

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
This commit is contained in:
Piotr Jamróz
2021-03-26 15:16:25 +01:00
committed by GitHub
parent 70576873f7
commit 9f2fa7c20c
6 changed files with 78 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/app/plugins/datasource/graphite/FunctionEditor.tsx
View File

@@ -1,4 +1,4 @@
import React, { Suspense } from 'react';
import React from 'react';
import { PopoverController, Popover, ClickOutsideWrapper } from '@grafana/ui';
import { FunctionDescriptor, FunctionEditorControls, FunctionEditorControlsProps } from './FunctionEditorControls';
@@ -9,15 +9,6 @@ interface FunctionEditorProps extends FunctionEditorControlsProps {
interface FunctionEditorState {
showingDescription: boolean;
}
const FunctionDescription = React.lazy(async () => {
// @ts-ignore
const { default: rst2html } = await import(/* webpackChunkName: "rst2html" */ 'rst2html');
return {
default(props: { description?: string }) {
return <div dangerouslySetInnerHTML={{ __html: rst2html(props.description ?? '') }} />;
},
};
});
class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEditorState> {
private triggerRef = React.createRef<HTMLSpanElement>();
@@ -31,25 +22,7 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
}
renderContent = ({ updatePopperPosition }: any) => {
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>
<Suspense fallback={<span>Loading description...</span>}>
<FunctionDescription description={description} />
</Suspense>
</div>
);
}
const { onMoveLeft, onMoveRight } = this.props;
return (
<FunctionEditorControls
@@ -62,11 +35,6 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
onMoveRight(this.props.func);
updatePopperPosition();
}}
onDescriptionShow={() => {
this.setState({ showingDescription: true }, () => {
updatePopperPosition();
});
}}
/>
);
};
@@ -83,9 +51,6 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
referenceElement={this.triggerRef.current}
wrapperClassName="popper"
className="popper__background"
onMouseLeave={() => {
this.setState({ showingDescription: false });
}}
renderArrow={({ arrowProps, placement }) => (
<div className="popper__arrow" data-placement={placement} {...arrowProps} />
)}
@@ -101,9 +66,6 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
<span
ref={this.triggerRef}
onClick={popperProps.show ? hidePopper : showPopper}
onMouseLeave={() => {
this.setState({ showingDescription: false });
}}
style={{ cursor: 'pointer' }}
>
{this.props.func.def.name}