change(ui) - help text for chart series

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Button, IconButton } from 'UI';
+import { Form, Button, IconButton, HelpText } from 'UI';
 import FilterSeries from '../FilterSeries';
 import { connect } from 'react-redux';
 import { edit as editMetric, save, addSeries, removeSeries, remove } from 'Duck/customMetrics';
@@ -169,8 +169,9 @@ function CustomMetricForm(props: Props) {
         </div>
 
         <div className="form-group">
-          <label className="font-medium">
+          <label className="font-medium flex items-center">
             {`${isTable ? 'Filter by' : 'Chart Series'}`}
+            {!isTable && <HelpText position="top left" text="Defines a series of data for the line in chart." className="pl-3" />}
           </label>
           {metric.series && metric.series.size > 0 && metric.series.take(isTable ? 1 : metric.series.size).map((series: any, index: number) => (
             <div className="mb-2">

frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx

@@ -7,7 +7,7 @@ interface Props {
   seriesIndex?: number;
 }
 function SeriesName(props: Props) {
-  const { seriesIndex } = props;
+  const { seriesIndex = 1 } = props;
   const [editing, setEditing] = useState(false)
   const [name, setName] = useState(props.name)
   const ref = useRef<any>(null)

frontend/app/components/ui/HelpText/HelpText.tsx

@@ -0,0 +1,22 @@
+
+import React from 'react'
+import { Icon, Popup } from 'UI'
+
+interface Props {
+    text: string,
+    className?: string,
+    position?: string,
+}
+export default function HelpText(props: Props) {
+    const { text, className = '', position = 'top center' } = props
+    return (
+        <div>
+            <Popup
+                trigger={<div className={className}><Icon name="question-circle" size={16} /></div>}
+                content={text}
+                inverted
+                position={position}
+            />
+        </div>
+    )
+}

frontend/app/components/ui/HelpText/index.ts

@@ -0,0 +1 @@
+export { default } from './HelpText';

frontend/app/components/ui/index.js

@@ -54,5 +54,6 @@ export { default as CopyButton } from './CopyButton';
 export { default as HighlightCode } from './HighlightCode';
 export { default as NoPermission } from './NoPermission';
 export { default as NoSessionPermission } from './NoSessionPermission';
+export { default as HelpText } from './HelpText';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';