add tooltip

ryantxu · May 1, 2019 · fb13a30 · fb13a30
1 parent 72477d3
commit fb13a30
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -1,8 +1,10 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel';
+import { PopperContent } from '../Tooltip/PopperController';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
+  tooltip?: PopperContent<any>;
   labelWidth?: number;
   inputWidth?: number;
   inputEl?: React.ReactNode;
@@ -17,10 +19,19 @@ const defaultProps = {
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
  */
-export const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, inputEl, ...inputProps }) => {
+export const FormField: FunctionComponent<Props> = ({
+  label,
+  tooltip,
+  labelWidth,
+  inputWidth,
+  inputEl,
+  ...inputProps
+}) => {
   return (
     <div className="form-field">
-      <FormLabel width={labelWidth}>{label}</FormLabel>
+      <FormLabel width={labelWidth} tooltip={tooltip}>
+        {label}
+      </FormLabel>
       {inputEl || <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />}
     </div>
   );

diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
@@ -1,14 +1,15 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { PopperContent } from '../Tooltip/PopperController';
 
 interface Props {
   children: ReactNode;
   className?: string;
   htmlFor?: string;
   isFocused?: boolean;
   isInvalid?: boolean;
-  tooltip?: string;
+  tooltip?: PopperContent<any>;
   width?: number;
 }
 

diff --git a/packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx b/packages/grafana-ui/src/components/SingleStatShared/FieldDisplayEditor.tsx
@@ -5,7 +5,14 @@ import React, { PureComponent, ChangeEvent } from 'react';
 import { FormField, FormLabel, PanelOptionsGroup, StatsPicker, StatID } from '@grafana/ui';
 
 // Types
-import { FieldDisplayOptions, DEFAULT_FIELD_DISPLAY_VALUES_LIMIT } from '../../utils/fieldDisplay';
+import {
+  FieldDisplayOptions,
+  DEFAULT_FIELD_DISPLAY_VALUES_LIMIT,
+  VAR_SERIES_NAME,
+  VAR_FIELD_NAME,
+  VAR_CALC,
+  VAR_CELL_PREFIX,
+} from '../../utils/fieldDisplay';
 import { Field } from '../../types/data';
 import Select, { SelectOptionItem } from '../Select/Select';
 import { toNumberString, toIntegerOrUndefined } from '../../utils';
@@ -65,6 +72,18 @@ export class FieldDisplayEditor extends PureComponent<Props> {
     const { showPrefixSuffix, options } = this.props;
     const { title, stats, prefix, suffix, values, limit } = options;
 
+    const titleTooltip = (
+      <div>
+        Template Variables:
+        <br />
+        {'$' + VAR_SERIES_NAME}
+        <br />
+        {'$' + VAR_FIELD_NAME}
+        <br />
+        {values ? '$' + VAR_CELL_PREFIX + '{N}' : '$' + VAR_CALC}
+      </div>
+    );
+
     return (
       <PanelOptionsGroup title="Display">
         <>
@@ -73,6 +92,7 @@ export class FieldDisplayEditor extends PureComponent<Props> {
             labelWidth={labelWidth}
             onChange={this.onTitleChange}
             value={title}
+            tooltip={titleTooltip}
             placeholder="Auto"
           />
           <div className="gf-form">

diff --git a/packages/grafana-ui/src/utils/fieldDisplay.ts b/packages/grafana-ui/src/utils/fieldDisplay.ts
@@ -1,4 +1,5 @@
 import toNumber from 'lodash/toNumber';
+import toString from 'lodash/toString';
 
 import {
   ValueMapping,
@@ -34,9 +35,10 @@ export interface FieldDisplayOptions {
   mappings: ValueMapping[];
 }
 
-const VAR_SERIES_NAME = '__series_name';
-const VAR_FIELD_NAME = '__field_name';
-const VAR_STAT = '__stat';
+export const VAR_SERIES_NAME = '__series_name';
+export const VAR_FIELD_NAME = '__field_name';
+export const VAR_CALC = '__calc';
+export const VAR_CELL_PREFIX = '__cell_'; // consistent with existing table templates
 
 function getTitleTemplate(title: string | undefined, stats: string[], data?: SeriesData[]): string {
   // If the title exists, use it as a template variable
@@ -56,7 +58,7 @@ function getTitleTemplate(title: string | undefined, stats: string[], data?: Ser
 
   const parts: string[] = [];
   if (stats.length > 1) {
-    parts.push('$' + VAR_STAT);
+    parts.push('$' + VAR_CALC);
   }
   if (data.length > 1) {
     parts.push('$' + VAR_SERIES_NAME);
@@ -95,6 +97,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
   if (data) {
     const limit = fieldOptions.limit ? fieldOptions.limit : DEFAULT_FIELD_DISPLAY_VALUES_LIMIT;
     const title = getTitleTemplate(fieldOptions.title, stats, data);
+    const usesCellValues = title.indexOf(VAR_CELL_PREFIX) >= 0;
     const scopedVars: ScopedVars = {};
 
     for (let s = 0; s < data.length; s++) {
@@ -142,8 +145,13 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
         if (fieldOptions.values) {
           for (const row of series.rows) {
             // Add all the row variables
-            for (let j = 0; j < series.fields.length; j++) {
-              scopedVars[`__cell_${j}`] = { value: row[i], text: `Cell: ${j}` };
+            if (usesCellValues) {
+              for (let j = 0; j < series.fields.length; j++) {
+                scopedVars[VAR_CELL_PREFIX + j] = {
+                  value: row[j],
+                  text: toString(row[j]),
+                };
+              }
             }
 
             const displayValue = display(row[i]);
@@ -180,7 +188,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
                 });
 
           for (const stat of stats) {
-            scopedVars[VAR_STAT] = { value: stat, text: stat };
+            scopedVars[VAR_CALC] = { value: stat, text: stat };
             const displayValue = display(results[stat]);
             displayValue.title = replaceVariables(title, scopedVars);
             values.push({