From cee827ad5ff417d306863bbf34dab848688f2d96 Mon Sep 17 00:00:00 2001
From: Jason Bulicek <jbulicek@expedia.com>
Date: Thu, 6 Aug 2020 11:35:24 -0700
Subject: [PATCH] fix issue with expanding uploaded traces

---
 .../traces/upload/uploadContainer.jsx         | 56 ++++++++++---------
 src/components/traces/upload/uploadHeader.jsx |  2 +-
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/traces/upload/uploadContainer.jsx b/src/components/traces/upload/uploadContainer.jsx
index fbb841ee..0416648c 100644
--- a/src/components/traces/upload/uploadContainer.jsx
+++ b/src/components/traces/upload/uploadContainer.jsx
@@ -26,34 +26,36 @@ import traceDetailsStore from '../stores/traceDetailsStore';
 import Error from '../../common/error';
 import '../traces.less';
 
-@observer
-class UploadContainer extends React.Component {
-    render() {
-        return (
-            <section>
-                <Header />
-                <section className="universal-search-tab__content">
-                    <section className="container table-row-details table-row-details-upload">
-                        {traceDetailsStore.spans && traceDetailsStore.spans.length > 0 ?
-                            <>
-                                <UploadHeader
-                                    traceDetailsStore={traceDetailsStore}
-                                />
-                                <TimelineTab
-                                    timelineSpans={traceDetailsStore.timelineSpans}
-                                    totalDuration={traceDetailsStore.totalDuration}
-                                    startTime={traceDetailsStore.startTime}
-                                    toggleExpand={traceDetailsStore.toggleExpand}
-                                />
-                            </> :
-                            <Error errorMessage="Invalid JSON or file. Please ensure the uploaded file is a valid downloaded trace"/>
-                        }
-                    </section>
+
+const UploadContainer = observer(() => {
+    const toggleExpand = (id) => {
+        traceDetailsStore.toggleExpand(id);
+    };
+
+    return (
+        <section>
+            <Header />
+            <section className="universal-search-tab__content">
+                <section className="container table-row-details table-row-details-upload">
+                    {traceDetailsStore.spans && traceDetailsStore.spans.length > 0 ?
+                        <>
+                            <UploadHeader
+                                traceDetailsStore={traceDetailsStore}
+                            />
+                            <TimelineTab
+                                timelineSpans={traceDetailsStore.timelineSpans}
+                                totalDuration={traceDetailsStore.totalDuration}
+                                startTime={traceDetailsStore.startTime}
+                                toggleExpand={toggleExpand}
+                            />
+                        </> :
+                        <Error errorMessage="Invalid JSON or file. Please ensure the uploaded file is a valid downloaded trace"/>
+                    }
                 </section>
-                <Footer />
             </section>
-        );
-    }
-}
+            <Footer />
+        </section>
+    );
+});
 
 export default withRouter(UploadContainer);
diff --git a/src/components/traces/upload/uploadHeader.jsx b/src/components/traces/upload/uploadHeader.jsx
index 7f7defd7..bdd05eb2 100644
--- a/src/components/traces/upload/uploadHeader.jsx
+++ b/src/components/traces/upload/uploadHeader.jsx
@@ -56,7 +56,7 @@ class UploadHeader extends React.Component {
                     </div>
                 </div>
                 <div className="upload-inline-block">{Object.keys(services).map(svc => (
-                    <span className={`service-spans label ${colorMapper.toBackgroundClass(svc)}`}>{svc} x{services[svc]}</span>))}
+                    <span key={svc} className={`service-spans label ${colorMapper.toBackgroundClass(svc)}`}>{svc} x{services[svc]}</span>))}
                 </div>
             </div>
         );