Merge pull request #3191 from influxdata/fixes/gauge-no-showing-value

Fixes/gauge no showing value

ui/src/shared/components/GaugeChart.tsx

@@ -101,7 +101,7 @@ class GaugeChart extends PureComponent<Props> {
     const {lastValues} = getLastValues(data)
     const precision = 100.0
 
-    return Math.round(_.get(lastValues, 1, 0) * precision) / precision
+    return Math.round(_.get(lastValues, 0, 0) * precision) / precision
   }
 }
 

ui/src/shared/components/TagListItem.tsx

@@ -69,6 +69,10 @@ class TagListItem extends PureComponent<Props, State> {
     this.props.onGroupByTag(this.props.tagKey)
   }
 
+  public handleInputClick(e: MouseEvent<HTMLInputElement>) {
+    e.stopPropagation()
+  }
+
   public renderTagValues() {
     const {tagValues, selectedTagValues} = this.props
     if (!tagValues || !tagValues.length) {
@@ -88,6 +92,7 @@ class TagListItem extends PureComponent<Props, State> {
             value={this.state.filterText}
             onChange={this.handleFilterText}
             onKeyUp={this.handleEscape}
+            onClick={this.handleInputClick}
             spellCheck={false}
             autoComplete="false"
           />

ui/src/shared/parsing/lastValues.ts

@@ -9,7 +9,7 @@ type SeriesValue = number | string
 
 interface Series {
   name: string
-  values: SeriesValue[] | null
+  values: SeriesValue[][] | null
   columns: string[] | null
 }
 

ui/test/shared/components/GaugeChart.test.tsx

@@ -3,6 +3,23 @@ import React from 'react'
 import Gauge from 'src/shared/components/Gauge'
 import GaugeChart from 'src/shared/components/GaugeChart'
 
+const data = [
+  {
+    response: {
+      results: [
+        {
+          series: [
+            {
+              values: [[1, 2]],
+              columns: ['time', 'value'],
+            },
+          ],
+        },
+      ],
+    },
+  },
+]
+
 const defaultProps = {
   data: [],
   isFetchingInitially: false,
@@ -30,5 +47,14 @@ describe('GaugeChart', () => {
         expect(wrapper.find(Gauge).props().gaugePosition).toBe(0)
       })
     })
+
+    describe('when data has a value', () => {
+      it('renders the correct number', () => {
+        const wrapper = setup({data})
+
+        expect(wrapper.find(Gauge).exists()).toBe(true)
+        expect(wrapper.find(Gauge).props().gaugePosition).toBe(2)
+      })
+    })
   })
 })