Introduce modal

Test Modal for Operational policy and use react-router to show it

Issue-ID: CLAMP-415
Change-Id: Ie0df5f1085925224076062c7d331dc2f4c72d032
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

1 files changed, 443 insertions, 12 deletions

diff --git a/ui-react/src/components/loop_viewer/svg/example.svg b/ui-react/src/components/loop_viewer/svg/example.svg
index bb3327042..2f5ebd037 100644
--- a/ui-react/src/components/loop_viewer/svg/example.svg
+++ b/ui-react/src/components/loop_viewer/svg/example.svg
@@ -1,13 +1,444 @@
-<svg width="400" height="200">
-  <defs>
-    <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
-    </filter>
-  </defs>
-  <rect x="1" y="1" width="198" height="118" fill="#cccccc" />
-  <g filter="url(#MyFilter)">
-    <path fill="none" stroke="#D90000" stroke-width="10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
-    <text fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" x="52" y="76">SVG</text>
-  </g>
-  Sorry, your browser does not support inline SVG.  
+<svg xmlns="http://www.w3.org/2000/svg">
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="start-circle"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<circle
+					fill="none"
+					r="17"
+					cx="18"
+					cy="41" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="Arrow-411c11ec-37fe-40bc-8544-417c2c05e4a7"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<line
+					y2="41"
+					fill="none"
+					x1="35"
+					x2="123"
+					y1="41" />
+				<polygon
+					fill="none"
+					points=" 121 39 121 43 125 41" />
+				<polygon
+					points=" 121 39 121 43 125 41"
+					stroke="none" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="VES"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<rect
+					fill="none"
+					x="127"
+					width="123"
+					y="1"
+					height="82" />
+			</g>
+			<g
+				fill-opacity="0"
+				fill="rgb(0,0,0)"
+				text-rendering="optimizeQuality"
+				shape-rendering="geometricPrecision"
+				stroke="rgb(0,0,0)"
+				stroke-opacity="0"
+				stroke-width="2">
+				<rect
+					x="127"
+					width="123"
+					y="1"
+					height="82"
+					stroke="none" />
+			</g>
+			<g
+				text-rendering="optimizeQuality"
+				stroke-width="2"
+				shape-rendering="geometricPrecision"
+				font-family="sans-serif">
+				<text
+					x="176.5"
+					xml:space="preserve"
+					y="46.5"
+					stroke="none">VES</text>
+				<line
+					y2="83"
+					fill="none"
+					x1="147"
+					x2="147"
+					y1="1" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="Arrow-17086665-1142-4cbf-9681-cf4462954c96"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<line
+					y2="41"
+					fill="none"
+					x1="250"
+					x2="338"
+					y1="41" />
+				<polygon
+					fill="none"
+					points=" 336 39 336 43 340 41" />
+				<polygon
+					points=" 336 39 336 43 340 41"
+					stroke="none" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="tca_k8s_aLs74_v1_0_ResourceInstanceName2_tca_2"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<rect
+					fill="none"
+					x="342"
+					width="123"
+					y="1"
+					height="82" />
+			</g>
+			<g
+				fill-opacity="0"
+				fill="rgb(0,0,0)"
+				text-rendering="optimizeQuality"
+				shape-rendering="geometricPrecision"
+				stroke="rgb(0,0,0)"
+				stroke-opacity="0"
+				stroke-width="2">
+				<rect
+					x="342"
+					width="123"
+					y="1"
+					height="82"
+					stroke="none" />
+			</g>
+			<g
+				text-rendering="optimizeQuality"
+				stroke-width="2"
+				shape-rendering="geometricPrecision"
+				font-family="sans-serif">
+				<text
+					x="379.5"
+					xml:space="preserve"
+					y="46.5"
+					stroke="none">tca_k8s</text>
+				<line
+					y2="61"
+					fill="none"
+					x1="342"
+					x2="465"
+					y1="61" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="Arrow-d48a7f5f-643d-4550-8045-ee46bb05ddfa"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<line
+					y2="41"
+					fill="none"
+					x1="465"
+					x2="553"
+					y1="41" />
+				<polygon
+					fill="none"
+					points=" 551 39 551 43 555 41" />
+				<polygon
+					points=" 551 39 551 43 555 41"
+					stroke="none" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="OperationalPolicy"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<rect
+					fill="none"
+					x="557"
+					width="123"
+					y="1"
+					height="82" />
+			</g>
+			<g
+				fill-opacity="0"
+				fill="rgb(0,0,0)"
+				text-rendering="optimizeQuality"
+				shape-rendering="geometricPrecision"
+				stroke="rgb(0,0,0)"
+				stroke-opacity="0"
+				stroke-width="2">
+				<rect
+					x="557"
+					width="123"
+					y="1"
+					height="82"
+					stroke="none" />
+			</g>
+			<g
+				text-rendering="optimizeQuality"
+				stroke-width="2"
+				shape-rendering="geometricPrecision"
+				font-family="sans-serif">
+				<text
+					x="564.5"
+					xml:space="preserve"
+					y="46.5"
+					stroke="none">OperationalPolicy</text>
+				<line
+					y2="1"
+					fill="none"
+					x1="557"
+					x2="618"
+					y1="42" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="Arrow-79f11b91-5a48-4945-9d2c-18a423105a7d"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="2">
+				<line
+					y2="41"
+					fill="none"
+					x1="680"
+					x2="768"
+					y1="41" />
+				<polygon
+					fill="none"
+					points=" 766 39 766 43 770 41" />
+				<polygon
+					points=" 766 39 766 43 770 41"
+					stroke="none" />
+			</g>
+		</g>
+	</g>
+	<g
+		fill-opacity="1"
+		color-rendering="auto"
+		color-interpolation="auto"
+		text-rendering="auto"
+		stroke="black"
+		stroke-linecap="square"
+		stroke-miterlimit="10"
+		shape-rendering="auto"
+		stroke-opacity="1"
+		fill="black"
+		stroke-dasharray="none"
+		font-weight="normal"
+		stroke-width="1"
+		font-family="'Dialog'"
+		font-style="normal"
+		data-element-id="stop-circle"
+		stroke-linejoin="miter"
+		font-size="12px"
+		image-rendering="auto"
+		stroke-dashoffset="0"><!--Generated by the Batik Graphics2D SVG Generator -->
+		<defs id="genericDefs" />
+		<g>
+			<g
+				shape-rendering="geometricPrecision"
+				text-rendering="optimizeQuality"
+				stroke-width="4">
+				<circle
+					fill="none"
+					r="17"
+					cx="789"
+					cy="41" />
+			</g>
+		</g>
+	</g>
 </svg>
\ No newline at end of file