Refactor reporting dir

- dockerization
- create util function for all the test projects
- create a common config files
- add unit tests
- pep8

JIRA: RELENG-162

Change-Id: Ib209be4233084100ff238a7aeb2843ccc24a6f1e
Signed-off-by: Morgan Richomme <morgan.richomme@orange.com>

5 files changed, 480 insertions, 0 deletions

diff --git a/utils/test/reporting/3rd_party/sass/layout/_footer.scss b/utils/test/reporting/3rd_party/sass/layout/_footer.scss
new file mode 100644
index 000000000..ce0ccbc99
--- /dev/null
+++ b/utils/test/reporting/3rd_party/sass/layout/_footer.scss
@@ -0,0 +1,139 @@
+///

+/// Phantom by HTML5 UP

+/// html5up.net | @ajlkn

+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

+///

+

+/* Footer */

+

+	#footer {

+		$gutter: _size(gutter);

+

+		@include padding(5em, 0, (0, 0, 3em, 0));

+		background-color: _palette(bg-alt);

+

+		> .inner {

+			@include vendor('display', 'flex');

+			@include vendor('flex-wrap', 'wrap');

+			@include vendor('flex-direction', 'row');

+

+			> * > :last-child {

+				margin-bottom: 0;

+			}

+

+			section:nth-child(1) {

+				width: calc(66% - #{$gutter});

+				margin-right: $gutter;

+			}

+

+			section:nth-child(2) {

+				width: calc(33% - #{$gutter});

+				margin-left: $gutter;

+			}

+

+			.copyright {

+				width: 100%;

+				padding: 0;

+				margin-top: 5em;

+				list-style: none;

+				font-size: 0.8em;

+				color: transparentize(_palette(fg), 0.5);

+

+				a {

+					color: inherit;

+				}

+

+				li {

+					display: inline-block;

+					border-left: solid 1px transparentize(_palette(fg), 0.85);

+					line-height: 1;

+					padding: 0 0 0 1em;

+					margin: 0 0 0 1em;

+

+					&:first-child {

+						border-left: 0;

+						padding-left: 0;

+						margin-left: 0;

+					}

+				}

+			}

+		}

+

+		@include breakpoint(large) {

+			$gutter: _size(gutter) * 0.5;

+

+			@include padding(5em, 0);

+

+			> .inner {

+				section:nth-child(1) {

+					width: calc(66% - #{$gutter});

+					margin-right: $gutter;

+				}

+

+				section:nth-child(2) {

+					width: calc(33% - #{$gutter});

+					margin-left: $gutter;

+				}

+			}

+		}

+

+		@include breakpoint(medium) {

+			$gutter: _size(gutter);

+

+			> .inner {

+				section:nth-child(1) {

+					width: 66%;

+					margin-right: 0;

+				}

+

+				section:nth-child(2) {

+					width: calc(33% - #{$gutter});

+					margin-left: $gutter;

+				}

+			}

+		}

+

+		@include breakpoint(small) {

+			@include padding(3em, 0);

+

+			> .inner {

+				@include vendor('flex-direction', 'column');

+

+				section:nth-child(1) {

+					width: 100%;

+					margin-right: 0;

+					margin: 3em 0 0 0;

+				}

+

+				section:nth-child(2) {

+					@include vendor('order', '-1');

+					width: 100%;

+					margin-left: 0;

+				}

+

+				.copyright {

+					margin-top: 3em;

+				}

+			}

+		}

+

+		@include breakpoint(xsmall) {

+			> .inner {

+				.copyright {

+					margin-top: 3em;

+

+					li {

+						border-left: 0;

+						padding-left: 0;

+						margin: 0.75em 0 0 0;

+						display: block;

+						line-height: inherit;

+

+						&:first-child {

+							margin-top: 0;

+						}

+					}

+				}

+			}

+		}

+	}
\ No newline at end of file
diff --git a/utils/test/reporting/3rd_party/sass/layout/_header.scss b/utils/test/reporting/3rd_party/sass/layout/_header.scss
new file mode 100644
index 000000000..70a5fbaae
--- /dev/null
+++ b/utils/test/reporting/3rd_party/sass/layout/_header.scss
@@ -0,0 +1,136 @@
+///

+/// Phantom by HTML5 UP

+/// html5up.net | @ajlkn

+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

+///

+

+/* Header */

+

+	#header {

+		@include padding(5em, 0, (3em, 0, -5em, 0));

+

+		.logo {

+			display: block;

+			border-bottom: 0;

+			color: inherit;

+			font-weight: _font(weight-bold);

+			letter-spacing: _font(letter-spacing);

+			margin: 0 0 (_size(element-margin) * 1.25) 0;

+			text-decoration: none;

+			text-transform: uppercase;

+			display: inline-block;

+

+			> * {

+				display: inline-block;

+				vertical-align: middle;

+			}

+

+			.symbol {

+				margin-right: 0.65em;

+

+				img {

+					display: block;

+					width: 2em;

+					height: 2em;

+				}

+			}

+		}

+

+		nav {

+			position: fixed;

+			right: 2em;

+			top: 2em;

+			z-index: _misc(z-index-base);

+

+			ul {

+				@include vendor('display', 'flex');

+				@include vendor('align-items', 'center');

+				list-style: none;

+				margin: 0;

+				padding: 0;

+

+				li {

+					display: block;

+					padding: 0;

+

+					a {

+						display: block;

+						position: relative;

+						height: 3em;

+						line-height: 3em;

+						padding: 0 1.5em;

+						background-color: transparentize(_palette(bg), 0.5);

+						border-radius: _size(border-radius);

+						border: 0;

+						font-size: 0.8em;

+						font-weight: _font(weight-bold);

+						letter-spacing: _font(letter-spacing);

+						text-transform: uppercase;

+					}

+

+					a[href="#menu"] {

+						-webkit-tap-highlight-color: transparent;

+						width: 4em;

+						text-indent: 4em;

+						font-size: 1em;

+						overflow: hidden;

+						padding: 0;

+						white-space: nowrap;

+

+						&:before, &:after {

+							@include vendor('transition', 'opacity #{_duration(transition)} ease');

+							content: '';

+							display: block;

+							position: absolute;

+							top: 0;

+							left: 0;

+							width: 100%;

+							height: 100%;

+							background-position: center;

+							background-repeat: no-repeat;

+							background-size: 2em 2em;

+						}

+

+						&:before {

+							background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');

+							opacity: 0;

+						}

+

+						&:after {

+							background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');

+							opacity: 1;

+						}

+

+						&:hover {

+							&:before {

+								opacity: 1;

+							}

+

+							&:after {

+								opacity: 0;

+							}

+						}

+					}

+				}

+			}

+		}

+

+		@include breakpoint(small) {

+			@include padding(3em, 0, (1em, 0, -3em, 0));

+

+			nav {

+				right: 0.5em;

+				top: 0.5em;

+

+				ul {

+					li {

+						a[href="#menu"] {

+							&:before, &:after {

+								background-size: 1.5em 1.5em;

+							}

+						}

+					}

+				}

+			}

+		}

+	}
\ No newline at end of file
diff --git a/utils/test/reporting/3rd_party/sass/layout/_main.scss b/utils/test/reporting/3rd_party/sass/layout/_main.scss
new file mode 100644
index 000000000..8643931e4
--- /dev/null
+++ b/utils/test/reporting/3rd_party/sass/layout/_main.scss
@@ -0,0 +1,15 @@
+///

+/// Phantom by HTML5 UP

+/// html5up.net | @ajlkn

+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

+///

+

+/* Main */

+

+	#main {

+		@include padding(5em, 0, (-5em, 0, 3em, 0));

+

+		@include breakpoint(small) {

+			@include padding(3em, 0, (-3em, 0, 3em, 0));

+		}

+	}
\ No newline at end of file
diff --git a/utils/test/reporting/3rd_party/sass/layout/_menu.scss b/utils/test/reporting/3rd_party/sass/layout/_menu.scss
new file mode 100644
index 000000000..6a1895b1f
--- /dev/null
+++ b/utils/test/reporting/3rd_party/sass/layout/_menu.scss
@@ -0,0 +1,164 @@
+///

+/// Phantom by HTML5 UP

+/// html5up.net | @ajlkn

+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

+///

+

+/* Menu */

+

+	#wrapper {

+		@include vendor('transition', 'opacity #{_duration(menu)} ease');

+		opacity: 1;

+	}

+

+	#menu {

+		@include vendor('transform', 'translateX(#{_size(menu)})');

+		@include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));

+		position: fixed;

+		top: 0;

+		right: 0;

+		width: _size(menu);

+		max-width: 80%;

+		height: 100%;

+		-webkit-overflow-scrolling: touch;

+		background: _palette(fg);

+		color: _palette(bg);

+		cursor: default;

+		visibility: hidden;

+		z-index: _misc(z-index-base) + 2;

+

+		> .inner {

+			@include vendor('transition', 'opacity #{_duration(menu)} ease');

+			-webkit-overflow-scrolling: touch;

+			position: absolute;

+			top: 0;

+			left: 0;

+			width: 100%;

+			height: 100%;

+			padding: 2.75em;

+			opacity: 0;

+			overflow-y: auto;

+

+			> ul {

+				list-style: none;

+				margin: 0 0 (_size(element-margin) * 0.5) 0;

+				padding: 0;

+

+				> li {

+					padding: 0;

+					border-top: solid 1px transparentize(_palette(bg), 0.85);

+

+					a {

+						display: block;

+						padding: 1em 0;

+						line-height: 1.5;

+						border: 0;

+						color: inherit;

+					}

+

+					&:first-child {

+						border-top: 0;

+						margin-top: -1em;

+					}

+				}

+			}

+		}

+

+		> .close {

+			@include vendor('transition', (

+				'opacity #{_duration(menu)} ease',

+				'transform #{_duration(menu)} ease'

+			));

+			@include vendor('transform', 'scale(0.25) rotate(180deg)');

+			-webkit-tap-highlight-color: transparent;

+			display: block;

+			position: absolute;

+			top: 2em;

+			left: -6em;

+			width: 6em;

+			text-indent: 6em;

+			height: 3em;

+			border: 0;

+			font-size: 1em;

+			opacity: 0;

+			overflow: hidden;

+			padding: 0;

+			white-space: nowrap;

+

+			&:before, &:after {

+				@include vendor('transition', 'opacity #{_duration(transition)} ease');

+				content: '';

+				display: block;

+				position: absolute;

+				top: 0;

+				left: 0;

+				width: 100%;

+				height: 100%;

+				background-position: center;

+				background-repeat: no-repeat;

+				background-size: 2em 2em;

+			}

+

+			&:before {

+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');

+				opacity: 0;

+			}

+

+			&:after {

+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');

+				opacity: 1;

+			}

+

+			&:hover {

+				&:before {

+					opacity: 1;

+				}

+

+				&:after {

+					opacity: 0;

+				}

+			}

+		}

+

+		@include breakpoint(small) {

+			@include vendor('transform', 'translateX(#{_size(menu) * 0.75})');

+			width: (_size(menu) * 0.75);

+

+			> .inner {

+				padding: 2.75em 1.5em;

+			}

+

+			> .close {

+				top: 0.5em;

+				left: -4.25em;

+				width: 4.25em;

+				text-indent: 4.25em;

+

+				&:before, &:after {

+					background-size: 1.5em 1.5em;

+				}

+			}

+		}

+	}

+

+	body.is-menu-visible {

+		#wrapper {

+			@include vendor('pointer-events', 'none');

+			cursor: default;

+			opacity: 0.25;

+		}

+

+		#menu {

+			@include vendor('transform', 'translateX(0)');

+			visibility: visible;

+

+			> * {

+				opacity: 1;

+			}

+

+			.close {

+				@include vendor('transform', 'scale(1.0) rotate(0deg)');

+				opacity: 1;

+			}

+		}

+	}
\ No newline at end of file
diff --git a/utils/test/reporting/3rd_party/sass/layout/_wrapper.scss b/utils/test/reporting/3rd_party/sass/layout/_wrapper.scss
new file mode 100644
index 000000000..62ee1741c
--- /dev/null
+++ b/utils/test/reporting/3rd_party/sass/layout/_wrapper.scss
@@ -0,0 +1,26 @@
+///

+/// Phantom by HTML5 UP

+/// html5up.net | @ajlkn

+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

+///

+

+/* Wrapper */

+

+	#wrapper {

+		> * {

+			> .inner {

+				$gutter: _size(gutter);

+

+				width: 100%;

+				max-width: _size(inner);

+				margin: 0 auto;

+				padding: 0 $gutter;

+

+				@include breakpoint(small) {

+					$gutter: _size(gutter) * 0.5;

+

+					padding: 0 $gutter;

+				}

+			}

+		}

+	}
\ No newline at end of file