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

36
public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Icon } from '@grafana/ui';
import React, { Suspense } from 'react';
import { Icon, Tooltip } from '@grafana/ui';
export interface FunctionDescriptor {
text: string;
@@ -20,9 +20,28 @@ export interface FunctionEditorControlsProps {
onRemove: (func: FunctionDescriptor) => void;
}
const FunctionHelpButton = (props: { description?: string; name: string; onDescriptionShow: () => void }) => {
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 ?? '') }} />;
},
};
});
const FunctionHelpButton = (props: { description?: string; name: string }) => {
if (props.description) {
return <Icon className="pointer" name="question-circle" onClick={props.onDescriptionShow} />;
let tooltip = (
<Suspense fallback={<span>Loading description...</span>}>
<FunctionDescription description={props.description} />
</Suspense>
);
return (
<Tooltip content={tooltip} placement={'bottom-end'}>
<Icon className={props.description ? undefined : 'pointer'} name="question-circle" />
</Tooltip>
);
}
return (
@@ -42,10 +61,9 @@ const FunctionHelpButton = (props: { description?: string; name: string; onDescr
export const FunctionEditorControls = (
props: FunctionEditorControlsProps & {
func: FunctionDescriptor;
onDescriptionShow: () => void;
}
) => {
const { func, onMoveLeft, onMoveRight, onRemove, onDescriptionShow } = props;
const { func, onMoveLeft, onMoveRight, onRemove } = props;
return (
<div
style={{
@@ -55,11 +73,7 @@ export const FunctionEditorControls = (
}}
>
<Icon name="arrow-left" onClick={() => onMoveLeft(func)} />
<FunctionHelpButton
name={func.def.name}
description={func.def.description}
onDescriptionShow={onDescriptionShow}
/>
<FunctionHelpButton name={func.def.name} description={func.def.description} />
<Icon name="times" onClick={() => onRemove(func)} />
<Icon name="arrow-right" onClick={() => onMoveRight(func)} />
</div>