From 0a3633113e0728b0424e7327c62fdf7b56fd9b6a Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Mon, 22 Jul 2019 16:19:50 -0400
Subject: [PATCH] ensure results are always indexed by counter when loading new
 rows

---
 .../src/screens/Job/JobOutput/JobOutput.jsx   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
index 29641a51a0..4d5f425485 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx
@@ -46,7 +46,7 @@ class JobOutput extends Component {
     this.state = {
       contentError: null,
       hasContentLoading: true,
-      results: [],
+      results: {},
       scrollToIndex: -1,
       loadedRowCount: 0,
       loadedRowsMap: {},
@@ -80,12 +80,18 @@ class JobOutput extends Component {
     this.setState({ hasContentLoading: true });
     try {
       const {
-        data: { results = [], count },
+        data: { results: newResults = [], count },
       } = await JobsAPI.readEvents(job.id, job.type, {
         page_size: 50,
         order_by: 'start_line',
       });
-      this.setState({ results, remoteRowCount: count + 1 });
+
+      this.setState(({ results }) => {
+        newResults.forEach(jobEvent => {
+          results[jobEvent.counter] = jobEvent;
+        });
+        return { results, remoteRowCount: count + 1 };
+      });
     } catch (err) {
       this.setState({ contentError: err });
     } finally {
@@ -126,7 +132,6 @@ class JobOutput extends Component {
 
   async loadMoreRows({ startIndex, stopIndex }) {
     const { job } = this.props;
-    const { results } = this.state;
 
     let params = {
       counter__gte: startIndex,
@@ -135,7 +140,12 @@ class JobOutput extends Component {
     };
 
     return await JobsAPI.readEvents(job.id, job.type, params).then(response => {
-      this.setState({ results: [...results, ...response.data.results] });
+      this.setState(({ results }) => {
+        response.data.results.forEach(jobEvent => {
+          results[jobEvent.counter] = jobEvent;
+        });
+        return { results };
+      });
     });
   }
 
@@ -158,6 +168,7 @@ class JobOutput extends Component {
   handleScrollBottom() {
     const { remoteRowCount } = this.state;
     this.listRef.scrollToRow(remoteRowCount - 1);
+    this.setState({ scrollToIndex: remoteRowCount - 1 });
   }
 
   handleResize({ width }) {