fix(ui): avoid single stat crash

Changes the `latestValues` logic to ignore null/empty Flux rows. This prevents a single stat/gauge crash. Also wraps the time machine `Vis` in a error boundary, to mitigate the results of a crash. Closes #14422
influxdata · Jul 23, 2019 · bbf80ac · bbf80ac
1 parent 8ad7639
commit bbf80ac
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 30 deletions.
diff --git a/ui/src/shared/utils/latestValues.test.ts b/ui/src/shared/utils/latestValues.test.ts
@@ -124,9 +124,24 @@ describe('latestValues', () => {
 ,result,table,_time,_value,foo
 ,,0,2018-12-10T18:29:48Z,1,7.0
 ,,0,2018-12-10T18:40:18Z,2,8.0`
+
     const table = fromFlux(resp).table
     const result = latestValues(table)
 
     expect(result).toEqual([4, 6.0, 2.0, 8.0])
   })
+
+  test('ignores rows with empty values', () => {
+    const resp = `#group,false,false,true,true,true,true,true,false,false
+#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,string,string,string,double,dateTime:RFC3339
+#default,mean,,,,,,,,
+,result,table,_start,_stop,_field,_measurement,host,_value,_time
+,,0,2019-07-23T16:59:55.077422828Z,2019-07-23T17:04:55.077422828Z,used_percent,mem,oox4k.local,51.3,2019-07-23T17:04:00Z
+,,0,2019-07-23T16:59:55.077422828Z,2019-07-23T17:04:55.077422828Z,used_percent,mem,oox4k.local,,2019-07-23T17:04:45Z`
+
+    const table = fromFlux(resp).table
+    const result = latestValues(table)
+
+    expect(result).toEqual([51.3])
+  })
 })
diff --git a/ui/src/shared/utils/latestValues.ts b/ui/src/shared/utils/latestValues.ts
@@ -1,4 +1,4 @@
-import {range, flatMap} from 'lodash'
+import {range, flatMap, isFinite} from 'lodash'
 import {Table, NumericColumnData} from '@influxdata/giraffe'
 
 /*
@@ -97,7 +97,7 @@ export const latestValues = (table: Table): number[] => {
   const d = (i: number) => {
     const time = timeColData[i]
 
-    if (time && valueColsData.some(colData => !isNaN(colData[i]))) {
+    if (time && valueColsData.some(colData => isFinite(colData[i]))) {
       return time
     }
 
@@ -111,7 +111,7 @@ export const latestValues = (table: Table): number[] => {
     valueColsData.map(colData => colData[i])
   )
 
-  const definedLatestValues = latestValues.filter(x => !isNaN(x))
+  const definedLatestValues = latestValues.filter(x => isFinite(x))
 
   return definedLatestValues
 }
diff --git a/ui/src/timeMachine/components/Vis.tsx b/ui/src/timeMachine/components/Vis.tsx
@@ -8,6 +8,7 @@ import {AutoSizer} from 'react-virtualized'
 import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
 import ViewSwitcher from 'src/shared/components/ViewSwitcher'
 import RawFluxDataTable from 'src/timeMachine/components/RawFluxDataTable'
+import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 
 // Utils
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
@@ -74,33 +75,39 @@ const TimeMachineVis: SFC<Props> = ({
 
   return (
     <div className="time-machine--view">
-      <EmptyQueryView
-        loading={loading}
-        errorFormat={ErrorFormat.Scroll}
-        errorMessage={errorMessage}
-        isInitialFetch={isInitialFetch}
-        queries={viewProperties.queries}
-        hasResults={checkResultsLength(giraffeResult)}
-      >
-        {isViewingRawData ? (
-          <AutoSizer>
-            {({width, height}) =>
-              width &&
-              height && (
-                <RawFluxDataTable files={files} width={width} height={height} />
-              )
-            }
-          </AutoSizer>
-        ) : (
-          <ViewSwitcher
-            giraffeResult={giraffeResult}
-            files={files}
-            loading={loading}
-            properties={resolvedViewProperties}
-            timeZone={timeZone}
-          />
-        )}
-      </EmptyQueryView>
+      <ErrorBoundary>
+        <EmptyQueryView
+          loading={loading}
+          errorFormat={ErrorFormat.Scroll}
+          errorMessage={errorMessage}
+          isInitialFetch={isInitialFetch}
+          queries={viewProperties.queries}
+          hasResults={checkResultsLength(giraffeResult)}
+        >
+          {isViewingRawData ? (
+            <AutoSizer>
+              {({width, height}) =>
+                width &&
+                height && (
+                  <RawFluxDataTable
+                    files={files}
+                    width={width}
+                    height={height}
+                  />
+                )
+              }
+            </AutoSizer>
+          ) : (
+            <ViewSwitcher
+              giraffeResult={giraffeResult}
+              files={files}
+              loading={loading}
+              properties={resolvedViewProperties}
+              timeZone={timeZone}
+            />
+          )}
+        </EmptyQueryView>
+      </ErrorBoundary>
     </div>
   )
 }