From: Madhu Venugopal <vmadhu@cisco.com>
Date: Sat, 6 Apr 2013 01:38:08 +0000 (-0700)
Subject: Web UI Branding support
X-Git-Tag: releasepom-0.1.0~587^2
X-Git-Url: https://git.opendaylight.org/gerrit/gitweb?p=controller.git;a=commitdiff_plain;h=3a854591641b762adc5477da9de779d286f8f3a7

Web UI Branding support
This fix provides an extensible branding support with the help of OSGi Fragment.
Also included a sample branding fragment which can be used to create custom brands.

Change-Id: Ifccf87ba6a57bf2d0a6da07b6a1809994d7fdf1f
Signed-off-by: Madhu Venugopal <vmadhu@cisco.com>
---

diff --git a/opendaylight/web/brandfragment/pom.xml b/opendaylight/web/brandfragment/pom.xml
new file mode 100644
index 0000000000..43f8c53d7d
--- /dev/null
+++ b/opendaylight/web/brandfragment/pom.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.opendaylight.controller</groupId>
+        <artifactId>commons.opendaylight</artifactId>
+        <version>1.4.0-SNAPSHOT</version>
+        <relativePath>../../commons/opendaylight</relativePath>
+    </parent>
+
+    <groupId>org.opendaylight.controller</groupId>
+    <artifactId>web.brandfragment</artifactId>
+    <version>0.4.0-SNAPSHOT</version>
+    <packaging>bundle</packaging>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.felix</groupId>
+                <artifactId>maven-bundle-plugin</artifactId>
+                <version>2.3.6</version>
+                <extensions>true</extensions>
+                <configuration>
+                    <instructions>
+                        <Fragment-Host>org.opendaylight.controller.web</Fragment-Host>
+                        <Web-ContextPath>/</Web-ContextPath>
+                    </instructions>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>
diff --git a/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/customlogin.jsp b/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/customlogin.jsp
new file mode 100644
index 0000000000..f2adf1f39c
--- /dev/null
+++ b/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/customlogin.jsp
@@ -0,0 +1,3 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<c:set var="title" value="Open Daylight - Login" scope="application"/>
+<link rel="stylesheet/less" type="text/css" href="/css/customlogin.less">
diff --git a/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/custommain.jsp b/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/custommain.jsp
new file mode 100644
index 0000000000..f079c82635
--- /dev/null
+++ b/opendaylight/web/brandfragment/src/main/resources/WEB-INF/jsp/custommain.jsp
@@ -0,0 +1,4 @@
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<c:set var="version" value="Version 0.1" scope="application"/>
+<c:set var="name" value="Open Daylight" scope="application"/>
+<link rel="stylesheet/less" type="text/css" href="/css/custommain.less">
diff --git a/opendaylight/web/brandfragment/src/main/resources/css/customlogin.less b/opendaylight/web/brandfragment/src/main/resources/css/customlogin.less
new file mode 100644
index 0000000000..cdaba2385f
--- /dev/null
+++ b/opendaylight/web/brandfragment/src/main/resources/css/customlogin.less
@@ -0,0 +1,53 @@
+.reset {
+	padding: 0;
+	margin: 0;
+}
+
+html , body {
+	.reset;
+	height: 100%;
+	width: 100%;
+	background-color: #eee;
+}
+
+html {
+	display: table;
+}
+
+body {
+	display: table-cell;
+	vertical-align: middle;
+	padding-bottom: 10%;
+}
+
+.container {
+	width: 650px;
+	.content {
+		padding: 25px;
+		background-color: #fff;
+		-webkit-border-radius: 10px;
+		-moz-border-radius: 10px;
+		border-radius: 10px;
+		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+		-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+		text-align: center;
+		.login-form {
+			#logo {
+				background-repeat: no-repeat;
+				background-position: center;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAADQCAMAAADGQmMsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0I5NEY2RjhBM0QxMUUyOUMzMUNFMzQ4NjM5NUNFRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0I5NEY3MDhBM0QxMUUyOUMzMUNFMzQ4NjM5NUNFRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQjk0RjZEOEEzRDExRTI5QzMxQ0UzNDg2Mzk1Q0VGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFDQjk0RjZFOEEzRDExRTI5QzMxQ0UzNDg2Mzk1Q0VGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EBgRdAAAAwBQTFRFrKus/sxW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');
+				width: 400px;
+				height: 175px;
+				margin: 0 auto 20px;
+			}
+			.icon-login {
+				width: 20px;
+				height: 16px;
+				background-position: left center;
+				background-repeat: no-repeat;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc5JREFUeNpi3NLKAAKMQBwNxP5AbM0AAUeBeCMQLwXi/95V/xmwARao5nphGeN6KTUPBlF5S7DE64fHQ57d2hHy9slZFSC3EWQILgOiQZqVjRMY3r+4zHBqYx5YQlLVhQEkBjIcaMgdIL0EmwFMIGeDbAZpvn1yVtGXd/cEQRjEBomB5KBeY8BlgDXI2c9v7wHx53vnnf0AwiA2SAzqJWt8BlAEQAYcBQYY2M9AkLh1krEACIPYIDGQHDRGcBqwERjaDIISugyq5ml9PEJK70EYxAaJgeTYWTRDcBnACEwHuKIRrPnLi28MipZBDF+f7WJQcpoAUsvAI2qFYgDOhASy+cXDzwx6dpIgzQz39hWADQHRIKAXfoqB8f///zgD6NJKMxD1/9Kh5yiGQC0EG0AwFm6f/sAI0gwyBOoCBuRUSVQ0ggyRkOfFaggLIc2qpgIM7558/K/jW8Lw7PwMsCEMDAUMYloxDIcm6U7FGwYwcKBX/b+0liqDoHIQw4UNPQyggJVTF2Cwy7vMyOgizMj4W4iDkZGZhYmdmZGBi/E/Cws7IzMDCwvLPyZGlvdf/nK+//qHuy9L6gbIsNTex/oT8xWKvCuug3Ldd4AAAwBj/b+B1P2YnAAAAABJRU5ErkJggg==');
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/opendaylight/web/brandfragment/src/main/resources/css/custommain.less b/opendaylight/web/brandfragment/src/main/resources/css/custommain.less
new file mode 100644
index 0000000000..cb6fbc54fc
--- /dev/null
+++ b/opendaylight/web/brandfragment/src/main/resources/css/custommain.less
@@ -0,0 +1,260 @@
+// properties
+@mainTop: 43px;
+@mainBottom: 41px;
+
+@minWidth: 640px;
+@minHeight: 480px;
+
+@topologyOffset: -4px; // ensure calibration
+
+// mixins
+.dash-size (@width, @height) {
+	width: @width;
+	height: @height;
+}
+.position (@type, @top, @right, @bottom, @left) {
+	position: @type;
+	top: @top;
+	right: @right;
+	bottom: @bottom;
+	left: @left;
+}
+.dash-position (@top, @right, @bottom, @left) {
+	.position(absolute, @top, @right, @bottom, @left);
+}
+.icon {
+	width: 22px;
+	height: 16px;
+	background-position: left center;
+	background-repeat: no-repeat;
+}
+.dashlet-elements {
+	width: 98%;
+	margin: 5px auto;
+}
+
+// header
+#menu {
+	.navbar-inner {
+		.brand {
+			font-size: 1.4em;
+			font-variant: small-caps;
+			margin: 0 12px;
+			padding: 10px 0 10px 45px;
+			background-image: url('../img/logo.png');
+			background-position: left center;
+			background-repeat: no-repeat;
+		}
+		ul {
+			margin-top: 10px;
+			border-bottom: transparent;
+			li {
+				a {
+					padding: 5px 15px;
+					&:hover {
+						border-color: transparent;
+					}
+				}
+			}
+			.active {
+				a {
+					border-radius: 1px;
+					background: #f6f6f6;
+					&:hover {
+						border-top: 1px solid #ddd;
+						border-right: 1px solid #ddd;
+						border-left: 1px solid #ddd;
+					}
+				}
+			}
+		}
+		#toolbar {
+			position: absolute;
+			right: 10px;
+			.dropdown-menu {
+				right: 0;
+				left: auto;
+				min-width: 120px;
+			}
+			.icon-user {
+				.icon;
+				background-image: url('../img/user_0020_16.png');
+			}
+			.icon-users {
+				.icon;
+				background-image: url('../img/user_group_0107_16.png');
+			}
+			.icon-save {
+				.icon;
+				background-image: url('../img/save_as_0106_16.png');
+			}
+			.icon-logout {
+				.icon;
+				background-image: url('../img/open_1054_16.png');
+			}
+		}
+	}
+}
+
+// footer
+#footer {
+	#alert {
+		margin: 0;
+		p {
+			padding: 0;
+			margin: 0;
+		}
+	}
+}
+
+// main
+#main {
+	position: fixed;
+	top: @mainTop;
+	right: 0;
+	bottom: @mainBottom;
+	left: 0;
+	min-width: @minWidth;
+	min-height: @minHeight;
+
+	// topology
+	#topology {
+		position: absolute;
+		top: @topologyOffset;
+		right: 0;
+		bottom: @topologyOffset;
+		left: 0;
+		background: #ddd;
+	}
+
+	// left
+	#left {
+		.dash-size(30%, 100%);
+		float: left;
+
+		#left-top {
+			.dash-size(100%, 60%);
+
+			.dash {	
+				.dash-position(5px, 5px, 5px, 5px);
+			}
+		}
+
+		#left-bottom {
+			.dash-size(100%, 40%);
+
+			.dash {
+				.dash-position(0, 5px, 5px, 5px);
+			}
+		}
+	}
+
+	// right
+	#right {
+		.dash-size(70%, 100%);
+		float: right;
+
+		#right-top {
+			.dash-size(100%, 60%);
+
+			.dash {
+				.dash-position(5px, 5px, 5px, 0);
+			}
+		}
+
+		#right-bottom {
+			.dash-size(100%, 40%);
+
+			.dash {
+				.dash-position(0, 5px, 5px, 0);
+			}
+		}
+	}
+
+	#left-top, #left-bottom,
+	#right-top, #right-bottom {
+		position: relative;
+	}
+
+	// dashentries
+	.dash {
+		border-radius: 1px;
+		background: #fff;
+		border: 1px solid #ddd;
+
+		.nav {
+			padding: 2px;
+			padding-bottom: 0;
+			margin: 0;
+		}
+
+		.nav-tabs {
+			background: #eee;
+			li {
+				a {
+					background: #ddd;
+					padding: 4px 8px;
+					margin-right: 3px;
+					border-radius: 1px;
+					&:hover {
+						border-color: transparent;
+					}
+				}
+			}
+			.active {
+				a {
+					background: #fff;
+					border-radius: 1px;
+					&:hover {
+						border-top: 1px solid #ddd;
+						border-left: 1px solid #ddd;
+						border-right: 1px solid #ddd;
+					}
+				}
+			}
+		}
+
+		.dashlet {
+			overflow: auto;
+			.dash-position(45px,0,0,0);
+
+			h4 {
+				.dashlet-elements;
+			}
+
+			p {
+				.dashlet-elements;
+			}
+
+			table {
+				.dashlet-elements;
+			}
+			
+			.btn-group {
+				margin: 5px;
+			}
+			
+			.none {
+				margin: 0 auto;
+				padding-top: 128px;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-image: url('../img/alert_unreachable_2008_128.png');
+				text-align: center;
+				p {
+					cursor: default;
+				}
+			}
+		}
+	}
+
+	// defaults for visual topology
+	#right-top .dash {
+		background: #ddd;
+		overflow: hidden;
+	}
+}
+
+.table-cursor tr:hover {
+	cursor: pointer;
+}
diff --git a/opendaylight/web/brandfragment/src/main/resources/img/logo.png b/opendaylight/web/brandfragment/src/main/resources/img/logo.png
new file mode 100644
index 0000000000..46c02e2aeb
Binary files /dev/null and b/opendaylight/web/brandfragment/src/main/resources/img/logo.png differ
diff --git a/opendaylight/web/root/src/main/resources/WEB-INF/jsp/login.jsp b/opendaylight/web/root/src/main/resources/WEB-INF/jsp/login.jsp
index a343d98f25..431f23aa23 100644
--- a/opendaylight/web/root/src/main/resources/WEB-INF/jsp/login.jsp
+++ b/opendaylight/web/root/src/main/resources/WEB-INF/jsp/login.jsp
@@ -1,18 +1,27 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ page import="java.net.URL" %>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
-    <title>OpenDaylight - Login</title>
 
     <!-- Bootstrap CSS - 1 -->
 	<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
-	
+
 	<!-- Login CSS - 2 -->
 	<link rel="stylesheet/less" type="text/css" href="/css/login.less">
-	
+
+<c:set var="title" value="OpenDaylight-login" scope="application"/>
+<%
+    String filePath = "/WEB-INF/jsp/customlogin.jsp"; 
+	URL fileURL = pageContext.getServletContext().getResource(filePath);
+	if(fileURL!=null) {
+%>
+	  <jsp:include page="<%=filePath%>" flush="true"/>
+<% } %>
+	<title>${title}</title>
 	<!-- Bootstrap JS - 1 -->
 	<script src="/js/bootstrap.min.js"></script>
 	
@@ -25,7 +34,7 @@
 	<script src="/js/less-1.3.3.min.js"></script>
 </head>
 <body>
-        <form action="<c:url value='j_spring_security_check' />" id="form" method="post">
+  <form action="<c:url value='j_spring_security_check' />" id="form" method="post">
 
   <div class="container">
     <div class="content">
diff --git a/opendaylight/web/root/src/main/resources/WEB-INF/jsp/main.jsp b/opendaylight/web/root/src/main/resources/WEB-INF/jsp/main.jsp
index f2172124b9..ceb462daff 100644
--- a/opendaylight/web/root/src/main/resources/WEB-INF/jsp/main.jsp
+++ b/opendaylight/web/root/src/main/resources/WEB-INF/jsp/main.jsp
@@ -5,12 +5,13 @@
  - terms of the Eclipse Public License v1.0 which accompanies this distribution, 
  - and is available at http://www.eclipse.org/legal/epl-v10.html
 --%>
+<%@ page import="java.net.URL" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
 <!DOCTYPE html>
 <html>
 
 <head>
-	<title>OpenDaylight</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<!-- Bootstrap CSS - 1 -->
@@ -19,6 +20,18 @@
 	<!-- Core CSS - 2 -->
 	<link rel="stylesheet/less" type="text/css" href="/css/one.less">
 
+<c:set var="version" value="Version 0.1" scope="application"/>
+<c:set var="name" value="OpenDaylight" scope="application"/>
+
+<%	
+    String filePath = "/WEB-INF/jsp/custommain.jsp"; 
+    URL fileURL = pageContext.getServletContext().getResource(filePath);
+    if(fileURL!=null) {
+%>
+	  <jsp:include page="<%=filePath%>" flush="true"/>
+<% } %>
+
+    <title>${name}</title>
 	<!-- jQuery - 1 -->
 	<script src="/js/jquery-1.9.1.min.js"></script>
 	
@@ -42,7 +55,7 @@
 <div id="menu" class="navbar navbar-fixed-top">
 	<div class="navbar-inner row-fluid">
 		<div class="span10">
-			<a class="brand" href="/" title="Version 0.1">OpenDaylight</a> 
+			<a class="brand" href="/" title="${version}">${name}</a> 
 			<ul class="nav nav-tabs">
 			</ul>
 		</div>