winery/org.eclipse.winery.repository/src/main/webapp/jsp/genericcomponentpage.jsp

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-2013 University of Stuttgart.
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Eclipse Public License v1.0
   6  * and the Apache License 2.0 which both accompany this distribution,
   7  * and are available at http://www.eclipse.org/legal/epl-v10.html
   8  * and http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Contributors:
  11  *    Oliver Kopp - initial API and implementation and/or initial documentation
  12  *******************************************************************************/
  13 --%>
  14 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  15
  16 <%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
  17 <%@taglib prefix="v"  uri="http://www.eclipse.org/winery/repository/functions" %>
  18 <%@taglib prefix="t"  tagdir="/WEB-INF/tags" %>
  19 <%@taglib prefix="wc" uri="http://www.eclipse.org/winery/functions" %>
  20
  21 <%-- In English, one can usually form a plural by adding an "s". Therefore, we resue the label to form the window title --%>
  22 <t:genericpage windowtitle="${it.label}s" selected="${it.type}" cssClass="${it.CSSclass}">
  23
  24 <c:choose>
  25 <c:when test="${empty pageContext.request.contextPath}">
  26 <c:set var="URL" value="/" />
  27 </c:when>
  28 <c:otherwise>
  29 <c:set var="URL" value="${pageContext.request.contextPath}/" />
  30 </c:otherwise>
  31 </c:choose>
  32 <t:simpleSingleFileUpload
  33         title="Upload CSAR"
  34         text="CSAR file"
  35         URL="${URL}"
  36         type="POST"
  37         id="upCSAR"
  38         accept="application/zip,.csar"/>
  39
  40 <t:addComponentInstance
  41         label="${it.label}"
  42         typeSelectorData="${it.typeSelectorData}"
  43         />
  44
  45 <div class="middle" id="ccontainer">
  46         <br />
  47
  48         <table cellpadding=0 cellspacing=0 style="margin-top: 0px; margin-left: 30px;">
  49                 <tr>
  50                         <td valign="top" style="padding-top: 25px; width: 680px;">
  51
  52                                 <div id="searchBoxContainer">
  53
  54                                         <input id="searchBox" />
  55
  56                                         <script>
  57
  58                                                 $('#searchBox').keyup(function() {
  59                                                         var searchString = $(this).val();
  60                                                         searchString = searchString.toLowerCase();
  61
  62                                                         $(".entityContainer").each (function() {
  63                                                                 var name = $(this).find(".informationContainer > .name").text();
  64                                                                 var namespace = $(this).find(".informationContainer > .namespace").text();
  65
  66                                                                 var t = name + namespace;
  67                                                                 t = t.toLowerCase();
  68
  69                                                                 if (t.indexOf(searchString) == -1) {
  70                                                                         $(this).hide();
  71                                                                 } else {
  72                                                                         $(this).show();
  73                                                                 }
  74
  75                                                         });
  76
  77                                                 });
  78
  79                                         </script>
  80
  81                                 </div>
  82
  83                         <c:forEach var="t" items="${it.componentInstanceIds}">
  84                                 <%-- even though the id is an invalid XML, it is used for a simple implementation on a click on the graphical rendering to trigger opening the editor --%>
  85                                 <div class="entityContainer ${it.CSSclass}" id="${v:URLencode(t.namespace.encoded)}/${v:URLencode(t.xmlId.encoded)}/">
  86                                         <div class="left">
  87                                                 <c:if test="${it.type eq 'NodeType'}">
  88                                                         <a href="./${v:URLencode(t.namespace.encoded)}/${v:URLencode(t.xmlId.encoded)}/?edit">
  89                                                                 <img src='./${v:URLencode(t.namespace.encoded)}/${v:URLencode(t.xmlId.encoded)}/visualappearance/50x50' style='margin-top: 21px; margin-left: 30px; height: 40px; width: 40px;' />
  90                                                         </a>
  91                                                 </c:if>
  92                                         </div>
  93                                         <div class="center">
  94                                                 <div class="informationContainer">
  95                                                         <div class="name">
  96                                                                 ${wc:escapeHtml4(t.xmlId.decoded)}
  97                                                         </div>
  98                                                         <div class="namespace" alt="${wc:escapeHtml4(t.namespace.decoded)}">
  99                                                                 ${wc:escapeHtml4(t.namespace.decoded)}
 100                                                         </div>
 101                                                 </div>
 102                                                 <div class="buttonContainer">
 103                                                         <a href="${v:URLencode(t.namespace.encoded)}/${v:URLencode(t.xmlId.encoded)}/?csar" class="exportButton"></a>
 104                                                         <a href="${v:URLencode(t.namespace.encoded)}/${v:URLencode(t.xmlId.encoded)}/?edit" class="editButton"></a>
 105                                                         <%-- we need double encoding of the URL as the passing to javascript: decodes the given string once --%>
 106                                                         <a href="javascript:deleteCI('${wc:escapeHtml4(t.xmlId.decoded)}', '${v:URLencode(v:URLencode(t.namespace.encoded))}/${v:URLencode(v:URLencode(t.xmlId.encoded))}/');" class="deleteButton" onclick="element = $(this).parent().parent().parent();"></a>
 107                                                 </div>
 108                                         </div>
 109                                         <div class="right"></div>
 110                                 </div>
 111                         </c:forEach>
 112                         </td>
 113                         <td id="gcprightcolumn" valign="top">
 114                                 <div id="overviewtopshadow"></div>
 115                                 <div id="overviewbottomshadow"></div>
 116                         </td>
 117                         <td valign="top">
 118                                 <div class="btn-group-vertical" id="buttonList">
 119                                         <button type="button" class="btn btn-default" onclick="openNewCIdiag();">Add new</button>
 120                                         <button type="button" class="btn btn-default" onclick="importCSAR();">Import CSAR</button>
 121                                 </div>
 122                         </td>
 123                 </tr>
 124         </table>
 125 </div>
 126
 127 <script>
 128
 129 function entityContainerClicked(e) {
 130         var target = $(e.target);
 131         if (target.is("a")) {
 132                 // do nothing as a nested a element is clicked
 133         } else {
 134                 var ec = target.parents("div.entityContainer");
 135                 var url = ec.attr('id');
 136                 if (e.ctrlKey) {
 137                         // emulate browser's default behavior to open a new tab
 138                         window.open(url);
 139                 } else {
 140                         window.location = url;
 141                 }
 142         }
 143 }
 144
 145 $("div.entityContainer").on("click", entityContainerClicked);
 146
 147 /**
 148  * deletes given component instance
 149  * uses global variable "element", which stores the DOM element to delete upon successful deletion
 150  */
 151 function deleteCI(name, URL) {
 152         deleteResource(name, URL, function() {
 153                 element.remove();
 154         });
 155 }
 156
 157 function importCSAR() {
 158         $('#upCSARDiag').modal('show');
 159 }
 160
 161 // If export button is clicked with "CTRL", the plain XML is shown, not the CSAR
 162 // We use "on" with filters instead as new elements could be added when pressing "Add new" (in the future)
 163 // contained code is the same as the code of the CSAR button at the topology modeler (see index.jsp)
 164 $(document).on("click", ".exportButton", function(evt) {
 165         var url = $(this).attr("href");
 166         if (evt.ctrlKey) {
 167                 url = url.replace(/csar$/, "definitions");
 168         }
 169         window.open(url);
 170         return false;
 171 });
 172
 173 <%-- Special feature in the case of the service template --%>
 174 <c:if test="${it.type eq 'ServiceTemplate'}">
 175 //If edit button is clicked with "CTRL", the topology modeler is opened, not the service template editor
 176 //We use "on" with filters instead as new elements could be added when pressing "Add new" (in the future)
 177 $(document).on("click", ".editButton", function(evt) {
 178         var url = $(this).attr("href");
 179         if (evt.ctrlKey) {
 180                 url = url.replace(/\?edit$/, "topologytemplate/?edit");
 181                 // open in new tab
 182                 var newWin = window.open(url);
 183                 // focussing the new window does not work in Chrome
 184                 newWin.focus();
 185         } else {
 186                 // normal behavior
 187                 window.location = url;
 188         }
 189         evt.preventDefault();
 190 });
 191 </c:if>
 192
 193 $(".exportButton").tooltip({
 194         placement: 'bottom',
 195         html: true,
 196         title: "Export CSAR.<br/>Hold CTRL key to export XML only."
 197 });
 198 $(".editButton").tooltip({
 199         placement: 'bottom',
 200         html: true,
 201         title: <c:if test="${it.type eq 'ServiceTemplate'}">"Edit.<br/>Hold CTRL key to directly open the topology modeler."</c:if><c:if test="${not (it.type eq 'ServiceTemplate')}">"Edit"</c:if>
 202 });
 203 $(".deleteButton").tooltip({
 204         placement: 'bottom',
 205         title: "Delete"
 206 });
 207 </script>
 208
 209 </t:genericpage>