fix empty <ProblemTimeline /> rendering

src/panel-triggers/components/ProblemTimeline.tsx

@@ -31,7 +31,9 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
   constructor(props) {
     super(props);
     this.state = {
-      width: 0
+      width: 0,
+      highlightedEvent: null,
+      showEventInfo: false,
     };
   }
 
@@ -115,7 +117,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
           event={this.state.highlightedEvent}
           show={this.state.showEventInfo}
         />
-        <svg className="event-timeline-canvas" viewBox={`0 0 ${width + 20} 40`}>
+        <svg className="event-timeline-canvas" viewBox={`0 0 ${width} 40`}>
           <defs>
             <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
               <feGaussianBlur in="SourceAlpha" stdDeviation="2" />

src/panel-triggers/components/Problems.tsx

@@ -377,15 +377,19 @@ class ProblemDetails extends PureComponent<any, ProblemDetailsState> {
   }
 
   componentDidMount() {
+    this.fetchProblemEvents();
+    requestAnimationFrame(() => {
+      this.setState({ show: true });
+    });
+  }
+
+  fetchProblemEvents() {
     const problem = this.props.original;
     this.props.getProblemEvents(problem)
     .then(events => {
       console.log(events, this.props.timeRange);
       this.setState({ events });
     });
-    requestAnimationFrame(() => {
-      this.setState({ show: true });
-    });
   }
 
   ackProblem = (data: AckProblemData) => {
@@ -434,14 +438,16 @@ class ProblemDetails extends PureComponent<any, ProblemDetailsState> {
               <span>{problem.comments}</span>
             </div>
           }
-          {problem.tags && problem.tags.length &&
+          {problem.tags && problem.tags.length > 0 &&
             <div className="problem-tags">
               {problem.tags && problem.tags.map(tag =>
                 <EventTag key={tag.tag + tag.value} tag={tag} highlight={tag.tag === problem.correlation_tag} />)
               }
             </div>
           }
-          <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
+          {this.state.events.length > 0 &&
+            <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
+          }
           {problem.acknowledges && !wideLayout &&
             <div className="problem-ack-container">
               <h6><FAIcon icon="reply-all" /> Acknowledges</h6>

src/sass/_panel-problems.scss

@@ -340,8 +340,8 @@
       .event-timeline {
         display: flex;
         position: relative;
-        margin-bottom: 1.6rem;
+        margin-bottom: 0.6rem;
-        padding-top: 0.4rem;
+        padding-top: 1.6rem;
         // margin-top: auto;
 
         .timeline-info-container {
@@ -360,7 +360,6 @@
 
         svg.event-timeline-canvas {
           height: 40px;
-          margin-top: 1.6rem;
 
           g.event-timeline-group {
             height: 40px;