fix issue with expanding uploaded traces

ExpediaDotCom · Aug 6, 2020 · cee827a · cee827a
1 parent 846ffdc
commit cee827a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git 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
@@ -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>
         );
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
             );
@@ Expand Down @@