adapter/acumos/aoconversion/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <!--
   3 ============LICENSE_START=======================================================
   4 org.onap.dcae
   5 ================================================================================
   6 Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
   7 ================================================================================
   8 Licensed under the Apache License, Version 2.0 (the "License");
   9 you may not use this file except in compliance with the License.
  10 You may obtain a copy of the License at
  11
  12          http://www.apache.org/licenses/LICENSE-2.0
  13
  14 Unless required by applicable law or agreed to in writing, software
  15 distributed under the License is distributed on an "AS IS" BASIS,
  16 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17 See the License for the specific language governing permissions and
  18 limitations under the License.
  19 ============LICENSE_END=========================================================
  20 -->
  21 <html>
  22 <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"/>
  23 <head><title>Acumos-ONAP Adapter Demo</title>
  24 <style>
  25 body {
  26   background-size: cover;
  27   font-family: Arial;
  28   color: blue;
  29   background-color: white;
  30 }
  31 ul {
  32   margin: 0;
  33   padding: 0;
  34   list-style-type: none;
  35 }
  36 ul li {
  37   float: left;
  38   width: 200px;
  39   height: 50px;
  40   background-color: black;
  41   opacity: 1;
  42   line-height: 50px;
  43   text-align: center;
  44   font-size: 14px;
  45   font-weight: 600;
  46   text-transform: uppercase;
  47 }
  48 ul li a {
  49   text-decoration: none;
  50   color: white;
  51   display: block;
  52 }
  53 ul li a:hover {
  54   background-color: green;
  55 }
  56 ul li ul li {
  57   display: none;
  58 }
  59 ul li:hover ul li {
  60   display: block;
  61 }
  62 .navBar {
  63   height: 50px;
  64   background-color: black;
  65 }
  66 .auxNav {
  67   float: right;
  68 }
  69 #itAcumos {
  70   display: none;
  71 }
  72 #onboardingInProgress {
  73   display: none;
  74 }
  75 .form-popup {
  76   display: none;
  77   position: fixed;
  78   top: 100px;
  79   left: 100px;
  80   border: 3px solid #f1f1f1;
  81   z-index: 9;
  82 }
  83 .form-container {
  84   max-width: 350px;
  85   padding: 10px;
  86   background-color: white;
  87 }
  88 .form-container input[type=text], .form-container input[type=password] {
  89   width: 300px;
  90   padding: 15px;
  91   margin: 5px 0 22px 0;
  92   border: none;
  93   background: #f1f1f1;
  94 }
  95 </style>
  96 </head><body>
  97 <div class="navBar">
  98 <ul>
  99 <li><a>File</a>
 100   <ul>
 101     <li><a onclick="openImportPopup()">Import ...</a></li>
 102   </ul>
 103 </li>
 104 <li class="auxNav"><a>Signout</a></li>
 105 </ul>
 106 </div>
 107 <form class="form-popup form-container" id="importPopup">
 108   <h2 align="center">Import Model</h2>
 109   <select id="importType" onchange="setImportType()">
 110     <option value="-" selected="true">-- Choose Import Type --</option>
 111     <option value="itAcumos" >Acumos</option>
 112   </select>
 113   <div id="itAcumos">
 114     <hr/>
 115     <label for="furl"><b>Acumos Federation URL</b></label> <input id="furl" type="text" name="furl" placeholder="https://server:9084" required>
 116     <button type="button" onclick="lookupCatalogs()">Lookup</button>
 117   </div>
 118   <div id="cAcumos">
 119     <hr/>
 120     <label for="catMenu"><b>Select Catalog</b></label> <select id="catMenu" onchange="chooseCatalog()">
 121       <option value="*">All Catalogs</option>
 122     </select>
 123   </div>
 124   <div id="acSols">
 125     <hr/>
 126     <label for="solMenu"><b>Select Solution</b></label> <select id="solMenu" onchange="chooseSolution()">
 127       <option value="*">All Solutions</option>
 128     </select>
 129   </div>
 130   <div id="acRevs">
 131     <hr/>
 132     <label for="revMenu"><b>Select Revision</b></label> <select id="revMenu">
 133       <option value="*">All Revisions</option>
 134     </select>
 135   </div>
 136   <hr/>
 137   <button type="button" onclick="closeImportPopup()">Cancel</button>
 138   <button id="onboard" type="button" onclick="onBoard()">Onboard</button>
 139   <b id="onboardingInProgress">Onboarding - Please Wait ...</b>
 140 </form>
 141 <script>
 142 function fcomp(n) {
 143   return document.getElementById(n);
 144 }
 145 function cvalue(n) {
 146   return fcomp(n).value;
 147 }
 148
 149 function uecvalue(n) {
 150   return encodeURIComponent("" + cvalue(n));
 151 }
 152
 153 function esc(s) {
 154   return s.replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 155 }
 156
 157 function onBoard() {
 158   fcomp("onboardingInProgress").style.display = "block";
 159   var url = "/onboard.js?acumos=" + uecvalue("furl");
 160   if (cvalue("catMenu") != "*") {
 161     url += "&catalogId=" + uecvalue("catMenu");
 162     if (cvalue("solMenu") != "*") {
 163       url += "&solutionId=" + uecvalue("solMenu");
 164       if (cvalue("revMenu") != "*") {
 165         url += "&revisionId=" + uecvalue("revMenu");
 166       }
 167     }
 168   }
 169   let xhr = new XMLHttpRequest();
 170   xhr.onerror = xhr.onload = function() {
 171     fcomp("onboardingInProgress").style.display = "none";
 172   }
 173   xhr.open("POST", url);
 174   xhr.send();
 175 }
 176
 177 function chooseSolution() {
 178   if (cvalue("solMenu") == "*") {
 179     updatevis();
 180   } else {
 181     lookupItem("acRevs", "revMenu", "/listRevisions.js?acumos=" + uecvalue("furl") + "&solutionId=" + uecvalue("solMenu"));
 182   }
 183 }
 184 function chooseCatalog() {
 185   if (cvalue("catMenu") == "*") {
 186     updatevis();
 187   } else {
 188     lookupItem("acSols", "solMenu", "/listSolutions.js?acumos=" + uecvalue("furl") + "&catalogId=" + uecvalue("catMenu"));
 189   }
 190 }
 191 function lookupCatalogs() {
 192   fcomp("onboard").style.display = "block";
 193   lookupItem("cAcumos", "catMenu", "/listCatalogs.js?acumos=" + uecvalue("furl"));
 194 }
 195 function lookupItem(dblock, smenu, url) {
 196   fcomp(dblock).style.display = "block";
 197   let xhr = new XMLHttpRequest();
 198   let catmenu = fcomp(smenu);
 199   catmenu.options.length = 1;
 200   catmenu.options[0].selected = true;
 201   xhr.onload = function() {
 202     let catresp = JSON.parse(this.response);
 203     var i;
 204     for (i = 0; i < catresp.length; i++) {
 205       var option = document.createElement("option");
 206       option.text = esc(catresp[i].name);
 207       option.value = catresp[i].id;
 208       catmenu.add(option);
 209     }
 210     updatevis();
 211   };
 212   xhr.open("GET", url);
 213   xhr.send();
 214 }
 215
 216 function updatevis() {
 217   if (cvalue("importType") != "itAcumos") {
 218     fcomp("itAcumos").style.display = "none";
 219     fcomp("furl").value = "";
 220   }
 221   if (cvalue("furl") == "") {
 222     fcomp("cAcumos").style.display = "none";
 223     fcomp("onboard").style.display = "none";
 224     fcomp("catMenu").options[0].selected = true;
 225   }
 226   if (cvalue("catMenu") == "*") {
 227     fcomp("acSols").style.display = "none";
 228     fcomp("solMenu").options[0].selected = true;
 229   }
 230   if (cvalue("solMenu") == "*") {
 231     fcomp("acRevs").style.display = "none";
 232     fcomp("revMenu").options[0].selected = true;
 233   }
 234 }
 235
 236 function setImportType() {
 237   let di = fcomp("itAcumos");
 238   if (cvalue("importType") == "itAcumos") {
 239     fcomp("furl").value = "";
 240     di.style.display = "block";
 241   }
 242   updatevis();
 243 }
 244 function openImportPopup() {
 245   fcomp("importType").options[0].selected = true;
 246   fcomp("importPopup").style.display = "block";
 247   updatevis();
 248 }
 249 function closeImportPopup() {
 250   fcomp("importPopup").style.display = "none";
 251 }
 252 </script>
 253 </body>
 254 </html>