From 66178c0f8af0eb400147efa7fe218f8550566bf8 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 25 Dec 2018 11:45:13 +0300
Subject: [PATCH] problems: minor refactor

---
 .../components/ProblemTimeline.tsx            | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/panel-triggers/components/ProblemTimeline.tsx b/src/panel-triggers/components/ProblemTimeline.tsx
index 77a39b4..a71d2ec 100644
--- a/src/panel-triggers/components/ProblemTimeline.tsx
+++ b/src/panel-triggers/components/ProblemTimeline.tsx
@@ -135,35 +135,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
       />
         <svg className="event-timeline-canvas" viewBox={`0 0 ${boxWidth} ${boxHeight}`}>
           <defs>
-            <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
-              <feOffset dx="1" dy="1" />
-              <feMerge>
-                <feMergeNode />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-            <filter id="boxShadow" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
-              <feComponentTransfer>
-                <feFuncA type="linear" slope="0.7" />
-              </feComponentTransfer>
-              <feOffset dx="1" dy="1" />
-              <feMerge>
-                <feMergeNode />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-            <filter id="glowShadow" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-              <feMerge>
-                <feMergeNode />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-            <filter id="timelinePointBlur" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blurOut" />
-            </filter>
+            <TimelineSVGFilters />
           </defs>
           <g className="event-timeline-group" transform={`translate(${padding}, ${timelineYpos})`}>
             <g className="event-timeline-regions" filter="url(#boxShadow)">
@@ -196,6 +168,42 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
   }
 }
 
+function TimelineSVGFilters() {
+  return (
+    <React.Fragment>
+      <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
+        <feOffset dx="1" dy="1" />
+        <feMerge>
+          <feMergeNode />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <filter id="boxShadow" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
+        <feComponentTransfer>
+          <feFuncA type="linear" slope="0.7" />
+        </feComponentTransfer>
+        <feOffset dx="1" dy="1" />
+        <feMerge>
+          <feMergeNode />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <filter id="glowShadow" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
+        <feMerge>
+          <feMergeNode />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <filter id="timelinePointBlur" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blurOut" />
+      </filter>
+    </React.Fragment>
+  );
+}
+
 interface TimelineInfoContainerProps {
   event?: ZBXEvent | null;
   eventInfo?: EventInfo | null;