fix: update statuses after promise resolves (#4518)

* fix: update statuses state inside componentdidupdate

* fix: prettier

* chore: remove prevState from if statement

* fix: prettier

Author: blegesse-w

src/checks/components/CheckHistoryVisualization.tsx

@@ -23,10 +23,14 @@ const CheckHistoryVisualization: FC = () => {
   }
 
   return (
-    <TimeSeries submitToken={0} queries={[query]} key={0} check={{id: id}}>
-      {({giraffeResult, loading, errorMessage, isInitialFetch, statuses}) => {
-        updateStatuses(statuses)
-
+    <TimeSeries
+      submitToken={0}
+      queries={[query]}
+      key={0}
+      check={{id: id}}
+      updateStatuses={updateStatuses}
+    >
+      {({giraffeResult, loading, errorMessage, isInitialFetch}) => {
         // handle edge case where deadman check has non-numeric value
         if (
           giraffeResult &&

src/shared/components/TimeSeries.tsx

@@ -67,6 +67,7 @@ interface OwnProps {
   implicitSubmit?: boolean
   children: (r: QueriesState) => JSX.Element
   check?: Partial<Check>
+  updateStatuses?: (statuses: StatusRow[][]) => void
 }
 
 type ReduxProps = ConnectedProps<typeof connector>
@@ -114,9 +115,9 @@ class TimeSeries extends Component<Props, State> {
 
   private pendingResults: Array<CancelBox<RunQueryResult>> = []
   private pendingCheckStatuses: CancelBox<StatusRow[][]> = null
-
   public componentDidMount() {
     const {cellID, setCellMount} = this.props
+
     this.observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         const {isIntersecting} = entry
@@ -156,6 +157,10 @@ class TimeSeries extends Component<Props, State> {
     if (shouldReloadWhenVisible) {
       this.pendingReload = true
     }
+
+    if (this.props.updateStatuses) {
+      this.props.updateStatuses(this.state.statuses)
+    }
   }
 
   public componentWillUnmount() {
@@ -297,7 +302,6 @@ class TimeSeries extends Component<Props, State> {
       const giraffeResult = fromFlux(files.join('\n\n'))
 
       this.pendingReload = false
-
       // this check prevents a memory leak https://github.com/influxdata/ui/issues/2137
       if (!this.isUnmounting) {
         this.setState({