Epic-231:versioning, and backup the configuration

Merging the sdnc jira stories- 255,256

Change-Id: Iacb9274dae93f534f1331c4eb7d0669896d379d4
Issue-ID: SDNC-256
Signed-off-by: DushyantSinghThakur <dt00503496@techmahindra.com>

Former-commit-id: 94d8b3d82b82dedfd5949da2e5d1ed348ab066e2

1 files changed, 543 insertions, 0 deletions

diff --git a/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css
new file mode 100644
index 00000000..5f192049
--- /dev/null
+++ b/configbackuprestore/vnfconfigbackupservice/src/main/webapp/static/style/sdnc-style.css
@@ -0,0 +1,543 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : SDNC-FEATURES
+* ================================================================================
+* Copyright 2018 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+ 
+ body{ 
+ padding-top:10px; 
+ overflow-y:scroll;
+ padding-bottom:10px;
+ } 
+
+/* form styling */
+#form-container{  
+	margin-bottom:20px;
+    border-radius:5px;
+}
+#form-container .page-header{  
+	margin:0; padding:30px; 
+    border-top-left-radius:5px; border-top-right-radius:5px;
+     }
+    
+ table.tableDisplay{
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     width: 100%;
+     table-layout: auto;
+}
+ table.tableDisplay tr:nth-child(even){
+     background-color: #E1E0DA;
+}
+ table.tableDisplay th{
+     padding-top: 12px;
+     padding-bottom: 12px;
+     text-align: left;
+     background: linear-gradient(to top, #f8f8f8 0%, #cce5ff 83%);
+     color: black;
+}
+ table.tableDisplay td,table.tableDisplay th {
+     border: 1px solid #ABABAB;
+     padding: 8px;
+     width:30px;
+     height:10%;
+     
+}
+ table.tableDisplay tr:{
+     text-align: left;
+     height:105;;
+}
+ table.tableDisplay tr:hover {
+     background-color:#cce5ff;
+}
+ .first_row{
+     background-color: #cce5ff;
+     color: black;
+     text-align:left;
+}
+ .column {
+     float: left;
+     width: 32.2%;
+     padding: 10px;
+     margin-left:20px;
+     height: 60px;
+    /* Should be removed. Only for demonstration */
+}
+.columnComp{
+	float: left;
+     width: 22%;
+     padding: 10px;
+     margin-left:20px;
+     height: 60px;
+}
+/* Clear floats after the columns */
+ .row:after {
+     content: "";
+     display: table;
+     clear: both;
+}
+ #btnSubmit{
+     background-color: #AED6F1;
+     margin-top:20px;
+     margin-left:20px;
+     margin-bottom:10px;
+     width:75px;
+     height:28px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+ .btndownload{
+     background-color: #AED6F1;
+     margin-top:20px;
+     margin-bottom:10px;
+     margin-left:20px;
+     width:130px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+ #exampleInput{
+     margin-left:25px;
+     width:160px;
+}
+ #exampleEndInput{
+     margin-left:10px;
+}
+ .error{
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     color:Red;
+     font-size: 14px;
+     margin-bottom:10px;
+}
+ .labeltext{
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+}
+ .sort-icon {
+     font-size: 9px;
+     margin-left: 5px;
+}
+ th {
+     cursor:pointer;
+}
+ .heading{  
+     margin-top:10px;
+     width:100%;
+     height:45px;
+     margin-bottom:20px;
+     font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
+     margin-top: 15px;
+     margin-right: auto;
+     margin-left: auto;
+     font-size: 20px;
+      background: linear-gradient(to top, #f8f8f8 0%, #cce5ff 83%);
+     padding-top: 15px;
+     padding-bottom: 50px;
+
+}
+form_validationBody{
+	width:900px;
+	margin-left:15px;
+	margin-top:60px;
+	margin-bottom:20px;
+}
+button:hover {
+    position: relative;
+}
+button[title]:hover:after {
+     padding: 4px 8px;
+     position: absolute;
+     left: 0;
+     top: 100%;
+     white-space: nowrap;
+     z-index: 20px;
+     background:red;
+}
+.pagination{
+display: inline-block;
+  padding-left: 0;
+  margin: 5px 0;
+  border-radius: 4px;
+  border: 1px solid #ABABAB;
+  font-size: 13px;
+}
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  line-height: 1.42857143;
+  text-decoration: none;
+  color: #337ab7;
+  background-color: #fff;
+  border: 1px solid #ABABAB;
+  margin-left: -1px;
+}
+.pagination > .active >a{
+  z-index: 3;
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #337ab7;
+  cursor: default;
+}
+.arrowRed {
+font-size: 30px;
+color: red;
+}
+.arrowGreen {
+font-size: 30px;
+color: green;
+}
+.ng-invalid  { border: 1px ridge #ddd; }
+.testMain{
+	width:100%;
+	margin-bottom:20px;
+	min-height:400px;
+	margin-top:10px;
+}
+.testNotification{
+	padding:0px;
+}
+.testImgIcon{
+	margin-left:5px;
+	margin-right:10px;
+	padding-right:10px;
+}
+.testCol{
+	background-color:#f2f2f2;
+	width:25%;
+	margin-left:35px;
+}
+.check{
+	 margin-left:10px;
+	margin-right:10px;
+}
+.btnRunTest{
+	background-color:#f2f2f2;
+	width:75%;
+	height:75px;
+	margin-left:35px;
+	margin-bottom:35px;
+}
+.ReportMain{
+	width:100%;
+    min-height:400px;
+    margin-top:10px;
+}
+.ReportNotification{
+	padding:0px;
+	margin-right:10px;
+	text-align:center;
+}
+.ReportImgIcon{
+	margin-left:5px;
+	margin-right:10px;
+}
+input[type=checkbox] { 
+	padding-right: 3px;
+	!important;
+	}
+	
+.header{  
+     margin-top:20px;
+     width:1145px;
+     height:45px;
+     margin-bottom:5px;
+     font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
+     font-size: 20px;
+     background: linear-gradient(to top, #f8f8f8 0%, #8F8484 83%);
+     padding-top:15px;
+
+}
+.footer{  
+     margin-top:10px;
+     width:1145px;
+     height:30px;
+     margin-bottom:5px;
+     font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
+     font-size: 15px;
+     background: linear-gradient(to top, #f8f8f8 0%, #8F8484 83%);
+     padding-top:15px;
+
+}
+.btn-danger{
+	background-color: #ffb3b3;
+	width: 1090px;
+	text-align: left;
+	color:black;
+	height:45px;
+}
+.btn-success{
+	width: 1090px;
+	text-align: left;
+	color:black;
+	background-color: #66cc66;
+	height:45px;
+	
+}
+.btn-warning{
+	width: 1090px;
+	text-align: left;
+	color:black;
+	height:45px;
+	background-color: #ffff99;
+}
+/* Dropdown Button */
+.dropbtn {
+    background-color: #ffe0b3;
+    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+    color: #333333;
+    padding: 15px;
+    font-size: 17px;
+    border: none;
+    padding-right:20px;
+    padding-left: 30px;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 240px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+    color: black;
+}
+
+
+.navbar-default .navbar-nav>li> a:hover {background-color: #ddd}
+.btnapply{
+     background-color:#AED6F1 ;
+     margin-top:10px;
+     margin-bottom:10px;
+     margin-right:20px;
+     width:150px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+
+
+.btnview{
+    background-color: #AED6F1;
+     margin-top:8px;
+     margin-bottom:10px;
+     margin-right:20px;
+     width:150px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+.btnview:hover {background-color:  #85C1E9}
+
+.btnview:active {
+  background-color:  #85C1E9;
+  box-shadow: 0 5px  #85C1E9;
+  transform: translateY(4px);
+}
+
+.btnapplycfg{
+     background-color: #AED6F1;
+     margin-top:8px;
+     margin-bottom:10px;
+     margin-right:20px;
+     width:150px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+.btnapplycfg:hover {background-color: #85C1E9}
+
+.btnapplycfg:active {
+  background-color: #85C1E9;
+  box-shadow: 0 5px  #85C1E9;
+  transform: translateY(4px);
+}
+
+.navbar-default .navbar-nav>li> a:hover {background-color: #FFFF00}
+
+ .btnCompareVersion{
+     background-color: #AED6F1;
+     margin-top:8px;
+     margin-bottom:10px;
+     margin-right:20px;
+     width:150px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+
+.btnCompareVersion:hover {background-color:  #85C1E9}
+
+.btnCompareVersion:active {
+  background-color: #85C1E9;
+  box-shadow: 0 5px  #85C1E9;
+  transform: translateY(4px);
+  border-collapse: collapse;
+  border: 2px solid #5DADE2;
+}
+
+.btnapply{
+     background-color: #AED6F1;
+     margin-top:8px;
+     margin-bottom:10px;
+     margin-right:20px;
+     width:150px;
+     height:30px;
+     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+     border-collapse: collapse;
+     border: 1px solid #5DADE2;
+     font-weight:700;
+}
+
+.btnapply:hover {background-color: #85C1E9}
+
+.btnapply:active {
+  background-color: #85C1E9;
+  box-shadow: 0 5px #85C1E9;
+  transform: translateY(4px);
+  border-collapse: collapse;
+  border: 2px solid #5DADE2;
+}
+
+.Formclass{
+	width:100%;
+    margin-top:30px;
+    min-height:10000;
+} 
+
+.VersionMain{
+	width:100%;
+    margin-top:60px;
+    min-height:2200px;
+    border: 0.5px solid lightgrey;
+} 
+
+.versionHeading{
+     width:100%;
+     height:35px;
+     margin-bottom:20px;
+     background-color: #cce5ff;
+     font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
+     margin-right: -15px;
+     font-size: 15px;
+     padding-top:5px;
+     color:black;
+
+}
+{
+    box-sizing: border-box;
+
+}
+
+.columnsVersion {
+    float: left;
+    width: 33.3%;
+    padding: 8px;
+    border-radius: 15px;
+}
+
+.columnsVersionview{
+    float: left;
+    width: 50%;
+    padding: 8px;
+    border-radius: 15px;
+}
+
+.price {
+    list-style-type: none;
+    border: 1px solid grey;
+    border-radius: 25px;
+    margin: 0;
+    padding: 0;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+}
+
+.price:hover {
+    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
+}
+
+.price .headerVersion {
+    background-color:#484848;
+    color: white;
+    font-size: 15px;
+    border-radius: 50px;
+    height:40px;
+}
+
+.price li {
+    border-bottom: 1px solid #eee;
+    padding: 5px;
+    text-align: center;
+    font-size: 12px;
+    word-wrap: break-word;
+}
+
+.price .grey {
+    background-color: #FFCCCC;
+    font-size: 12px;
+    margin-left:20px;
+    margin-right:20px;
+}
+
+@media only screen and (max-width: 600px) {
+    .columnsVersion {
+        width: 100%;
+    }
+}
+.separator{
+	border-color:darkgrey;
+	min-height:2px;
+}
+.listHeading{
+	background-color: #ffcccc;
+}