Bug fix/pre compile ui templates (#8958)

* splittet one query templates into two seperate files

* fixed syntax error in graphSettingsView

* fixed syntax error in foxxEditView

* rm not needed fix of tooltips

* changed format of ejs files due to pre-compiling templates now

* load templates via script tag

* adjust arango helper to work with new tippy version

* adjust arango templateEngine to work with pre compiled underscore templates

* minify and uglify pre compiled templates

* modified gitignore to not track not minified and uglified templates

* fixed queryViewOutput template

* make tooltips visible again!

* add grunt-contrib-jst to package.json

* make templates.js accessible via aardvark

* ... and enable gzip for em

* added build templates

.gitignore

@@ -99,6 +99,8 @@ js/apps/system/_admin/aardvark/APP/node_modules/*
 
 js/apps/system/_admin/aardvark/APP/frontend/build/app.js
 js/apps/system/_admin/aardvark/APP/frontend/build/app.js.gz
+js/apps/system/_admin/aardvark/APP/frontend/build/templates.js
+js/apps/system/_admin/aardvark/APP/frontend/build/templates.js.gz
 js/apps/system/_admin/aardvark/APP/frontend/build/extra.css
 js/apps/system/_admin/aardvark/APP/frontend/build/extra.css.gz
 js/apps/system/_admin/aardvark/APP/frontend/build/index.html

js/apps/system/_admin/aardvark/APP/GruntFile.js

@@ -34,7 +34,6 @@
             "frontend/css/highlightjs.css",
             "frontend/css/jsoneditor.css",
             "frontend/css/grids-responsive-min.css",
-            "frontend/css/tippy.css",
             "frontend/css/dygraph.css",
             "frontend/css/leaflet.css",
             "frontend/css/nv.d3.css",
@@ -59,6 +58,7 @@
             "frontend/js/lib/numeral.min.js",
             "frontend/js/lib/moment.min.js",
             "frontend/js/lib/randomColor.js",
+            "frontend/js/lib/popper.js",
             "frontend/js/lib/tippy.js",
             // START SIGMA LIBRARIES
             "frontend/js/lib/sigma.min.js",
@@ -182,7 +182,7 @@
           },
           files: [{
             expand: true,
-            src: ['frontend/build/app.min.js', 'frontend/build/libs.min.js'],
+            src: ['frontend/build/app.min.js', 'frontend/build/libs.min.js', 'frontend/build/templates.min.js'],
             dest: '.',
             ext: '.min.js.gz'
           }]
@@ -193,7 +193,7 @@
           },
           files: [{
             expand: true,
-            src: ['frontend/build/app.js', 'frontend/build/libs.min.js'],
+            src: ['frontend/build/app.js', 'frontend/build/libs.min.js', 'frontend/build/templates.min.js'],
             dest: '.',
             ext: '.js.gz'
           }]
@@ -292,7 +292,6 @@
           src: [
             "frontend/html/start.html.part",
             "frontend/html/head.html.part",
-            "frontend/js/templates/*.ejs",
             "frontend/html/body.html.part",
             "frontend/build/scripts.html.part",
             "frontend/html/end.html.part"
@@ -345,10 +344,30 @@
         ]
       },
 
+      jst: {
+        compile: {
+          options: {
+            //namespace: "anotherNameThanJST",      //Default: 'JST'
+            prettify: false,                        //Default: false|true
+            amdWrapper: false,                      //Default: false|true
+            templateSettings: {
+            },
+            processName: function(filename) {
+              //Shortens the file path for the template.
+              return filename.slice(filename.indexOf("template"), filename.length);
+            }
+          },
+          files: {
+            'frontend/build/templates.js': ['frontend/js/templates/*.ejs']
+          }
+        }
+      },
+
       uglify: {
         default1: {
           files: {
-            'frontend/build/app.min.js': 'frontend/build/app.js'
+            'frontend/build/app.min.js': 'frontend/build/app.js',
+            'frontend/build/templates.min.js': 'frontend/build/templates.js'
           }
         },
         libs2: {
@@ -393,8 +412,7 @@
         },
         html: {
           files: [
-            'frontend/html/*',
+            'frontend/html/*'
-            'frontend/js/templates/*.ejs'
           ],
           tasks: [
             'concat_in_order:htmlStandalone',
@@ -407,6 +425,7 @@
 
     grunt.loadNpmTasks("grunt-babel");
     grunt.loadNpmTasks("grunt-sass");
+    grunt.loadNpmTasks('grunt-contrib-jst');
     grunt.loadNpmTasks("grunt-contrib-imagemin");
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-compress');
@@ -420,6 +439,7 @@
 
     grunt.registerTask('default', [
       'eslint',
+      'jst',
       'sass:dev',
       'replace',
       'concat',
@@ -433,6 +453,7 @@
 
     grunt.registerTask('devel', [
       'sass:dev',
+      'jst',
       'replace',
       'concat',
       'concat_in_order:default',
@@ -444,6 +465,7 @@
     grunt.registerTask('deploy', [
       'sass:dev',
       'eslint',
+      'jst',
       'replace',
       'imagemin',
       'concat',

js/apps/system/_admin/aardvark/APP/frontend/html/scripts.html.part

@@ -1,2 +1,3 @@
 <script src="libs.js?version=__VERSION"></script>
 <script src="app.js?version=__VERSION"></script>
+<script src="templates.js?version=__VERSION"></script>

js/apps/system/_admin/aardvark/APP/frontend/js/arango/arango.js

@@ -1,5 +1,5 @@
 /* jshint unused: false */
-/* global Blob, window, Joi, sigma, $, Tippy, document, _, arangoHelper, frontendConfig, arangoHelper, sessionStorage, localStorage, XMLHttpRequest */
+/* global Blob, window, Joi, sigma, $, tippy, document, _, arangoHelper, frontendConfig, arangoHelper, sessionStorage, localStorage, XMLHttpRequest */
 
 (function () {
   'use strict';
@@ -230,14 +230,16 @@
 
       var settings = {
         arrow: true,
-        animation: 'fade',
-        animateFill: false,
         multiple: false,
-        hideDuration: 1
+        content: function (reference) {
+          var title = reference.getAttribute('title');
+          reference.removeAttribute('title');
+          return title;
+        }
       };
 
       if (position) {
-        settings.position = position;
+        settings.placement = position;
       }
 
       if (!selector) {
@@ -246,16 +248,16 @@
 
       if (typeof selector === 'object') {
         _.each(selector, function (elem) {
-          self.lastTooltips = new Tippy(elem, settings);
+          self.lastTooltips = new tippy(elem, settings);
         });
       } else {
         if (selector.indexOf(',') > -1) {
           var selectors = selector.split(',');
           _.each(selectors, function (elem) {
-            self.lastTooltips = new Tippy(elem, settings);
+            self.lastTooltips = new tippy(elem, settings);
           });
         }
-        this.lastTooltips = new Tippy(selector, settings);
+        this.lastTooltips = new tippy(selector, settings);
       }
     },
 

js/apps/system/_admin/aardvark/APP/frontend/js/arango/templateEngine.js

@@ -11,10 +11,7 @@
         var template = $('#' + id.replace('.', '\\.')).html();
         return {
           render: function (params) {
-            var tmp = _.template(template);
+            return window['JST']["templates/" + id](params);
-            tmp = tmp(params);
-
-            return tmp;
           }
         };
       };

js/apps/system/_admin/aardvark/APP/frontend/js/templates/applicationDetailView.ejs

@@ -1,4 +1,3 @@
-<script id="applicationDetailView.ejs" type="text/template">
   <div class="application-detail-view">
     <div class="headerBar" style="width: 100%">
 
@@ -151,4 +150,3 @@
       </dl>
     </aside>-->
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/applicationListView.ejs

@@ -1,4 +1,3 @@
-<script id="applicationListView.ejs" type="text/template">
   <tr class="foxx-store-row">
     <td class="foxx-store-main">
       <div class="foxx-name"><%=name%><%=legacy?' (legacy)':''%></div>
@@ -12,4 +11,3 @@
       <button class="button-success install-app" appId="<%=name %>" appVersion="<%=latestVersion %>">Install</button>
     </td>
   </tr>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/applicationsView.ejs

@@ -1,4 +1,3 @@
-<script id="applicationsView.ejs" type="text/template">
 <div class="headerBar">
   <div class="headerButtonBar">
     <ul class="headerButtonList">
@@ -54,4 +53,3 @@
     </div>
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/applierView.ejs

@@ -1,4 +1,3 @@
-<script id="applierView.ejs" type="text/template">
   <div id="applierContent" class="innerContent applierContent replicationContent">
     <div class="repl-applier">
 
@@ -47,4 +46,3 @@
 
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/arangoTabbar.ejs

@@ -1,4 +1,3 @@
-<script id="arangoTabbar.ejs" type="text/template">
 <div class="arango-tabbar" id="<%=content.id%>">
   <% _.each(content.titles, function(k,v) { %>
   <% var name = content.titles[v][0];  %>
@@ -6,4 +5,3 @@
   <button class="arangodb-tabbar" id="<%=elid%>"><%=name%></button>
   <%});%>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/arangoTable.ejs

@@ -1,4 +1,3 @@
-<script id="arangoTable.ejs" type="text/template">
   <div class="tableWrapper">
     <% var type = type; %>
     <table class="arango-table" id="<%=content.id%>">
@@ -42,4 +41,3 @@
       </tbody>
     </table>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/clusterView.ejs

@@ -1,4 +1,3 @@
-<script id="clusterView.ejs" type="text/template">
 
   <div class="headerBar" style="margin-top: -60px">
     <div class="headerButtonBar">
@@ -69,4 +68,3 @@
 
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/collectionsItemView.ejs

@@ -1,4 +1,3 @@
-<script id="collectionsItemView.ejs" type="text/template">
 <div class="paddingBox">
   <div class="borderBox"></div>
   <i class="collection-type-icon fa <%= model.get('picture') %>"></i>
@@ -37,4 +36,3 @@
     <h5 class="collectionName"><%= model.get('name') %></h5>
   <% } %>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/collectionsView.ejs

@@ -1,4 +1,3 @@
-<script id="collectionsView.ejs" type="text/template">
   <div class="headerBar">
     <div class="search-field">
       <input type="text" id="searchInput" class="search-input" placeholder="Search..."/>
@@ -113,4 +112,3 @@
       </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/dashboardView.ejs

@@ -1,4 +1,3 @@
-<script id="dashboardView.ejs" type="text/template">
   <% var subBar = function(title) { %>
     <div class="dashboard-sub-bar">
       <div  class="dashboard-sub-bar-title"><%= title %></div>
@@ -145,4 +144,3 @@
 
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/databaseView.ejs

@@ -1,4 +1,3 @@
-<script id="databaseView.ejs" type="text/template">
   <div class="headerBar">
     <div class="search-field">
       <input type="text" value="<%=searchString%>" id="databaseSearchInput" class="search-input" placeholder="Search..."/>
@@ -71,4 +70,3 @@
      </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/dbSelectionView.ejs

@@ -1,4 +1,3 @@
-<script id="dbSelectionView.ejs" type="text/template">
 <a href="#" class="tab disabled" id="dbselection"><div class="dbselection"><i class="fa fa-database"></i><span class="db-name">DB: </span> <%=current%>
 <!-- <i class="fa fa-caret-square-o-down"></i> -->
 </div>
@@ -34,4 +33,3 @@ if (list.length > 0) {
     <% } %>
 </ul>
 -->
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentView.ejs

@@ -1,4 +1,3 @@
-<script id="documentView.ejs" type="text/template">
 
   <div class="headerBar">
     <div class="headerButtonBar">
@@ -65,4 +64,3 @@
     <div class="pull-left shortcuts showHotkeyHelp"></div>
 	</div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/documentsView.ejs

@@ -1,4 +1,3 @@
-<script id="documentsView.ejs" type="text/template">
 <div id="transparentHeader" class="headerBar marginTop5">
 
   <div id="documentsToolbar" class="headerButtonBar">
@@ -141,4 +140,3 @@
   </div>
 </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/edgeDefinitionTable.ejs

@@ -1,4 +1,3 @@
-<script id="edgeDefinitionTable.ejs" type="text/template">
   <tr class="tableRow" id="row_newEdgeDefinitions<%= number%>">
     <th class="collectionTh">Edge definitions*:</th>
     <th class="collectionTh">
@@ -27,4 +26,3 @@
     </span>
   </th>
   </tr>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/editListEntryView.ejs

@@ -1,4 +1,3 @@
-<script id="editListEntryView.ejs" type="text/template">
 <td class="writable sorting_1">
   <% if (isReadOnly) { %>
     <span class="key"><%=key%></span>
@@ -19,4 +18,3 @@
     <span class="icon_arangodb_roundminus" data-original-title="Delete attribute"></span>
   </a>
 </td>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/filterSelect.ejs

@@ -1,4 +1,3 @@
-<script id="filterSelect.ejs" type="text/template">
 
 <div class="filterSelectBox">
   <div class="filterLabel"><%=name%><span><i class="fa fa-close" id="closeFilter"></i></span></div>
@@ -33,4 +32,3 @@
 
 </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/footerView.ejs

@@ -1,4 +1,3 @@
-<script id="footerView.ejs" type="text/template">
 <%
   var n,v,db;
   if (name) {
@@ -24,4 +23,3 @@
 <div class="footer-right">
   <p><% if(n) { %><a><%=n%> <%=v%> <% } %></a></p>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/foxxActiveView.ejs

@@ -1,4 +1,3 @@
-<script id="foxxActiveView.ejs" type="text/template">
   <div class="paddingBox">
     <div class="foxxDesc">
       <p><span class="foxxMount"><%=model.get("mount")%></span></p>
@@ -27,4 +26,3 @@
       </div>
     <% } %>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/foxxEditView.ejs

@@ -1,4 +1,3 @@
-<script id="foxxEditView.ejs" type="text/template">
 <%var appInfos = attributes.app.split(":"); %>
 <div id="change-foxx" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
   <div class="modal-header">
@@ -13,7 +12,7 @@
       </tr>
       <tr>
         <th class="collectionTh">Documentation:</th>
-        <th class="collectionTh"><%=documentationJsonUrl</th>
+        <th class="collectionTh"><%=documentationJsonUrl%></th>
       </tr>
       <tr>
         <th class="collectionTh">Mount:</th>
@@ -61,4 +60,3 @@
     
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/foxxMountView.ejs

@@ -1,4 +1,3 @@
-<script id="foxxMountView.ejs" type="text/template">
 <div id="install-foxx" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -40,4 +39,3 @@
     <button id="cancel" class="button-danger pull-right">Cancel</button>
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/foxxRepoView.ejs

@@ -1,4 +1,3 @@
-<script id="foxxRepoView.ejs" type="text/template">
   <div class="paddingBox">
     <div class="foxxDesc">
       <p><span class="foxxName"><%=model.name%></span></p>
@@ -15,4 +14,3 @@
     <div class="borderBox"></div>
     <img src="<%= thumbnail %>" height="50" width="50" alt="Icon for Service" class="icon">
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphManagementView.ejs

@@ -1,4 +1,3 @@
-<script id="graphManagementView.ejs" type="text/template">
   <div class="headerBar">
     <div class="search-field">
       <input type="text" value="<%=searchString%>" id="graphManagementSearchInput" class="search-input" placeholder="Search..."/>
@@ -73,4 +72,3 @@
      </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphSettingsView.ejs

@@ -1,10 +1,8 @@
-<script id="graphSettingsView.ejs" type="text/template">
 
   <% var genClass = 'pure-u-1-3'; %>
   <% var genClass2 = 'pure-u-2-3'; %>
 
   <% var formatName = function(name) { %>
-    <% var formattedName = %>
     <% return name.charAt(0).toUpperCase() + string.slice(1);%>
   <% }; %>
 
@@ -122,4 +120,3 @@
       </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphViewGroupByEntry.ejs

@@ -1,4 +1,3 @@
-<script id="graphViewGroupByEntry.ejs" type="text/template">
 <div class="control-group">
   <label for="<%=type %>_<%=id%>" class="control-label">Attribute <%=id%></label>
   <div class="controls">
@@ -6,4 +5,3 @@
     <button id="remove_<%=type %>_<%=id%>" class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete" />
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/graphViewer2.ejs

@@ -1,4 +1,3 @@
-<script id="graphViewer2.ejs" type="text/template">
   <div class="graphContent" id="graphContainer">
 
     <div class="headerBar">
@@ -49,4 +48,3 @@
     <div id="graph-container" oncontextmenu="return false;"></div>
   </div>
 
-  </script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/helpUsView.ejs

@@ -1,7 +1,5 @@
-<script id="helpUsView.ejs" type="text/template">
 
 <div class="helpUs">
   <iframe src="https://docs.google.com/forms/d/1vsIwy0mJSeToEnfo_jnBaQebewbcURL730IkZIrkyEE/viewform?embedded=true" scrolling="no" width="100%" height="1300px" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
 </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/indicesView.ejs

@@ -1,4 +1,3 @@
-<script id="indicesView.ejs" type="text/template">
   <% if (typeof supported !== 'undefined') { %>
     <div class="contentIn" id="indexHeaderContent">
         <div id="indexEditView">
@@ -469,4 +468,3 @@
         </div>
       </div>
     <% } %>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/lineChartDetailView.ejs

@@ -1,4 +1,3 @@
-<script id="lineChartDetailView.ejs" type="text/template">
 	<div id="lineChartDetail" class="modal hide fade modal-chart-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@@ -6,4 +5,3 @@
 		</div>
 		<div id="dashboardDetailedLineChart" class="dashboardDetailChart" style="position: absolute"></div>
 	</div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/loadingTableView.ejs

@@ -1,4 +1,3 @@
-<script id="loadingTableView.ejs" type="text/template">
 <thead>
   <tr role="row">
     <th class="sorting_disabled docsFirstCol">Content</th>
@@ -14,4 +13,3 @@
   </tr>
 </tbody>
 </script>
-

js/apps/system/_admin/aardvark/APP/frontend/js/templates/loggerView.ejs

@@ -1,4 +1,3 @@
-<script id="loggerView.ejs" type="text/template">
 
   <div id="loggerContent" class="logger-content-id innerContent">
 
@@ -56,4 +55,3 @@
       <div class="logBorder"></div>
     </div>
   <% }); %>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/loginView.ejs

@@ -1,4 +1,3 @@
-<script id="loginView.ejs" type="text/template">
 <div class="loginFixedWindow">
 
   <div id="loginWindow" class="login-window">
@@ -33,4 +32,3 @@
     </div>
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalApplicationMount.ejs

@@ -1,4 +1,3 @@
-<script id="modalApplicationMount.ejs" type="text/template">
   <table>
     <tr class="tableRow">
       <% if (content === true) { %>
@@ -172,4 +171,3 @@ Upload a Foxx service bundle. The Foxx service bundle should be a zip archive co
       <div id="upload-foxx-zip">Upload File</div>
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalBase.ejs

@@ -1,4 +1,3 @@
-<script id="modalBase.ejs" type="text/template">
   <div id="modal-dialog" class="modal hide fade createModalDialog" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
    <% if (title !== null) { %>
@@ -65,4 +64,3 @@
       <button id="modal-abort-delete" class="button-neutral pull-right">No</button>
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalCollectionInfo.ejs

@@ -1,4 +1,3 @@
-<script id="modalCollectionInfo.ejs" type="text/template">
 <%
     var figuresData = content.figures;
     var revision    = content.revision;
@@ -361,4 +360,3 @@
           </table>
         <% } %>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalDownloadFoxx.ejs

@@ -1,6 +1,4 @@
-<script id="modalDownloadFoxx.ejs" type="text/template">
   <div>
     Your new Foxx Service is ready for download.
     You can edit it on your local system and repack it in a zip file to publish it on ArangoDB.
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraph.ejs

@@ -1,8 +1,6 @@
-<script id="modalGraph.ejs" type="text/template">
 	<div class="detail-chart">
 		<div id="lineChartDetail" class="modal-inner-detail"></div>
 		<div class="modal-dashboard-legend">
 			<div class="dashboard-legend-inner" id="detailLegend"></div>
 		</div>
 	</div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs

@@ -1,4 +1,3 @@
-<script id="modalGraphTable.ejs" type="text/template">
 
   <ul id="graphTab" class="nav nav-tabs">
     <li class="active"><a href="#createGraph" data-toggle="tab" id="tab-createGraph">Graph</a></li>
@@ -181,4 +180,3 @@
     </div>
 
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalHotkeys.ejs

@@ -1,4 +1,3 @@
-<script id="modalHotkeys.ejs" type="text/template">
 
   <ul class="hotkeysList">
   <% _.each(content, function(categories) { %>
@@ -13,4 +12,3 @@
   <% }); %>
   <ul>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalTable.ejs

@@ -1,4 +1,3 @@
-<script id="modalTable.ejs" type="text/template">
   <%
   var createTR = function(row) {
     var mandatory = '';
@@ -115,4 +114,3 @@
       </div>
     </div>
   <% } %>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalTestResults.ejs

@@ -1,4 +1,3 @@
-<script id="modalTestResults.ejs" type="text/template">
 <%
   function createSuite(suite) {
     %>
@@ -74,4 +73,3 @@
       </div>
     <% } %>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/navigationView.ejs

@@ -1,4 +1,3 @@
-<script id="navigationView.ejs" type="text/template">
   <ul class="navlist arango-collection-ul" id="arangoCollectionUl">
     <% if (isCluster) { %>
       <li class="cluster-menu"><a id="cluster" class="tab" href="#cluster"><i class="fa fa-circle-o"></i>Cluster</a></li>
@@ -102,4 +101,3 @@
     <p><a href="https://groups.google.com/group/arangodb" target="_blank"><i class="fa fa-google"></i></a></p>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeView.ejs

@@ -1,8 +1,6 @@
-<script id="nodeView.ejs" type="text/template">
 
   <div id="nodeContent" class="innerContent">
 
 
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs

@@ -1,4 +1,3 @@
-<script id="nodesView.ejs" type="text/template">
 
   <div id="nodesContent" class="innerContent">
 
@@ -172,4 +171,3 @@
   </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/notificationItem.ejs

@@ -1,4 +1,3 @@
-<script id="notificationItem.ejs" type="text/template">
 <% notifications.forEach(function(n) { %>
   <li class="dropdown-item">
     <div class="notificationItem">
@@ -13,4 +12,3 @@
     </div>
   </li>
 <%  }); %>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/notificationView.ejs

@@ -1,4 +1,3 @@
-<script id="notificationView.ejs" type="text/template">
 <ul class="navlist" id="notificationViewUl">
 
   <div class="navlogo">
@@ -14,4 +13,3 @@
   </li>
 
 </ul>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/progressBase.ejs

@@ -1,4 +1,3 @@
-<script id="progressBase.ejs" type="text/template">
   <div class="progress-view">
     <div class="progress-content">
       <div class="progress-text"></div>
@@ -8,4 +7,3 @@
       <div class="progress-action"></div>
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryManagementViewActive.ejs

@@ -1,4 +1,2 @@
-<script id="queryManagementViewActive.ejs" type="text/template">
   <div id="queryManagementContent" class="innerContent">
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryManagementViewSlow.ejs

@@ -1,8 +1,6 @@
-<script id="queryManagementViewSlow.ejs" type="text/template">
   <div id="queryManagementContent" class="innerContent">
   </div>
 
   <div class="queryManagementBottomActions">
     <button id="deleteSlowQueryHistory" class="button-danger query-button">Delete History</button>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryView.ejs

@@ -1,6 +1,3 @@
-<script id="queryView.ejs" type="text/template">
-
-  <div id="queryContent" class="queryContent">
 
     <div class="arangoToolbar arangoToolbarTop">
       <div class="pull-left">
@@ -92,52 +89,3 @@
     <div class="modal-footer">
       <button id="confirmQueryImport" class="button-success disabled" style="float:right">Import</button>
       <button id="closeQueryModal" class="button-close">Cancel</button>
-    </div>
-
-
-</script>
-
-<script id="queryViewOutput.ejs" type="text/template">
-
-  <div id="outputEditorWrapper<%= counter %>" class="outputEditorWrapper">
-    <div class="arangoToolbar arangoToolbarTop">
-      <div class="pull-left">
-        <span class="toolbarType"><%=type%></span>
-          <span id="spinner"><i class="fa fa-spinner fa-spin"></i><i>Query is operating ...</i></span>
-      </div>
-      <div class="pull-right">
-        <span class="action closeResult" element="outputEditor<%= counter %>"><i class="fa fa-close" style="display: none"></i></span>
-      </div>
-      <div class="pull-right">
-        <div class="switchAce" counter="<%=counter%>">
-          <span id="json-switch" val="JSON" counter="<%=counter%>">JSON</span>
-          <span id="table-switch" val="Table" counter="<%=counter%>" style="display: none">Table</span>
-          <span id="graph-switch" val="Graph" counter="<%=counter%>" style="display: none">Graph</span>
-          <span id="geo-switch" val="Geo" counter="<%=counter%>" style="display: none">Geo</span>
-        </div>
-      </div>
-    </div>
-    <div id="outputEditor<%= counter %>" style="opacity: 0.5"></div>
-    <div id="sentWrapper<%= counter %>" class="sentWrapper" style="display: none">
-      <div class="pull-left">
-        <div id="sentQueryEditor<%= counter %>"></div>
-      </div>
-      <div class="pull-right">
-        <div id="sentBindParamEditor<%= counter %>"></div>
-      </div>
-    </div>
-    <div class="arangoToolbar arangoToolbarBottom">
-      <div class="pull-right">
-        <% if (type === 'Query') { %>
-          <button id="copy2gV" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">Graph Viewer</button>
-          <button id="downloadQueryResult" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">Download</button>
-          <button id="downloadCsvResult" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">CSV</button>
-          <button id="copy2aqlEditor" counter="<%=counter%>" style="display: none; margin-right: 8px;" class="button-success">Copy To Editor</button>
-          <button id="cancelCurrentQuery" class="button-danger" style="margin-right: 5px">Cancel</button>
-        <% } %>
-      </div>
-    </div>
-  </div>
-
-  </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/queryViewOutput.ejs

@@ -0,0 +1,41 @@
+<div id="outputEditorWrapper<%= counter %>" class="outputEditorWrapper">
+    <div class="arangoToolbar arangoToolbarTop">
+      <div class="pull-left">
+        <span class="toolbarType"><%=type%></span>
+          <span id="spinner"><i class="fa fa-spinner fa-spin"></i><i>Query is operating ...</i></span>
+      </div>
+      <div class="pull-right">
+        <span class="action closeResult" element="outputEditor<%= counter %>"><i class="fa fa-close" style="display: none"></i></span>
+      </div>
+      <div class="pull-right">
+        <div class="switchAce" counter="<%=counter%>">
+          <span id="json-switch" val="JSON" counter="<%=counter%>">JSON</span>
+          <span id="table-switch" val="Table" counter="<%=counter%>" style="display: none">Table</span>
+          <span id="graph-switch" val="Graph" counter="<%=counter%>" style="display: none">Graph</span>
+          <span id="geo-switch" val="Geo" counter="<%=counter%>" style="display: none">Geo</span>
+        </div>
+      </div>
+    </div>
+    <div id="outputEditor<%= counter %>" style="opacity: 0.5"></div>
+    <div id="sentWrapper<%= counter %>" class="sentWrapper" style="display: none">
+      <div class="pull-left">
+        <div id="sentQueryEditor<%= counter %>"></div>
+      </div>
+      <div class="pull-right">
+        <div id="sentBindParamEditor<%= counter %>"></div>
+      </div>
+    </div>
+    <div class="arangoToolbar arangoToolbarBottom">
+      <div class="pull-right">
+        <% if (type === 'Query') { %>
+          <button id="copy2gV" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">Graph Viewer</button>
+          <button id="downloadQueryResult" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">Download</button>
+          <button id="downloadCsvResult" counter="<%=counter%>" style="display: none; margin-right: 0;" class="button-success">CSV</button>
+          <button id="copy2aqlEditor" counter="<%=counter%>" style="display: none; margin-right: 8px;" class="button-success">Copy To Editor</button>
+          <button id="cancelCurrentQuery" class="button-danger" style="margin-right: 5px">Cancel</button>
+        <% } %>
+      </div>
+    </div>
+  </div>
+
+  </div>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/replicationView.ejs

@@ -1,4 +1,3 @@
-<script id="replicationView.ejs" type="text/template">
   <div id="replicationContent" class="innerContent replicationContent">
 
     <% if (mode !== 0) { %>
@@ -245,4 +244,3 @@
     <% } %>
 
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/scaleView.ejs

@@ -1,4 +1,3 @@
-<script id="scaleView.ejs" type="text/template">
 
   <div id="scaleContent" class="innerContent">
 
@@ -52,4 +51,3 @@
 
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceDetailView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceDetailView.ejs" type="text/template">
   <div class="application-detail-view">
     <% var visible = " visibility: hidden; ";%>
     <% if (installed) { %>
@@ -177,4 +176,3 @@
       </dl>
     </aside>-->
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceInstallGitHubView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceInstallGitHubView.ejs" type="text/template">
 
   <div class="arangoToolbar arangoToolbarTop arangoFoxxToolbarTop">
     <div class="pull-left">
@@ -51,4 +50,3 @@
     </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceInstallNewView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceInstallNewView.ejs" type="text/template">
 
 
   <div class="arangoToolbar arangoToolbarTop arangoFoxxToolbarTop">
@@ -88,4 +87,3 @@
       <% } %>
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceInstallUploadView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceInstallUploadView.ejs" type="text/template">
 
   <div class="arangoToolbar arangoToolbarTop arangoFoxxToolbarTop">
     <div class="pull-left">
@@ -40,4 +39,3 @@
       </div>
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceInstallUrlView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceInstallUrlView.ejs" type="text/template">
 
   <div class="arangoToolbar arangoToolbarTop arangoFoxxToolbarTop">
     <div class="pull-left">
@@ -35,4 +34,3 @@
     </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/serviceInstallView.ejs

@@ -1,4 +1,3 @@
-<script id="serviceInstallView.ejs" type="text/template">
 
 
 <div class="arangoToolbar arangoToolbarTop arangoFoxxToolbarTop">
@@ -26,4 +25,3 @@
     </div>
   </div>
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/shardsView.ejs

@@ -1,4 +1,3 @@
-<script id="shardsView.ejs" type="text/template">
 
   <div id="shardsContent" class="innerContent">
       <% var genClass1 = 'pure-u-6-24'; %>
@@ -149,4 +148,3 @@
     </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/spotlightView.ejs

@@ -1,7 +1,5 @@
-<script id="spotlightView.ejs" type="text/template">
   <div class="spotlightWrapper">
     <div id="spotlight">
       <input class="typeahead" type="text" placeholder="Search... ">
     </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/statisticBarView.ejs

@@ -1,4 +1,3 @@
-<script id="statisticBarView.ejs" type="text/template">
   <div class="navlogo display-none">
     <a href="#dashboard" style="padding-left: 15px;">
       <img class="svg stat_cpu"
@@ -14,4 +13,3 @@
       />
     </a>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/storeDetailView.ejs

@@ -1,4 +1,3 @@
-<script id="storeDetailView.ejs" type="text/template">
   <div class="application-detail-view">
 
     <div class="headerBar" style="width: 100%">
@@ -58,4 +57,3 @@
     </section>
 
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/subNavigationView.ejs

@@ -1,4 +1,3 @@
-<script id="subNavigationView.ejs" type="text/template">
 
   <ul class="subMenuEntries top">
     <li class="subMenuEntry pull-left">
@@ -25,4 +24,3 @@
   <ul class="subMenuEntries bottom">
   </ul>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/supportView.ejs

@@ -1,4 +1,3 @@
-<script id="supportView.ejs" type="text/template">
 
   <div class="supportView">
     <ul class="subMenuEntries subViewNavbar">
@@ -130,4 +129,3 @@
 
    </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/tableView.ejs

@@ -1,4 +1,3 @@
-<script id="tableView.ejs" type="text/template">
 <%
 var escaped = function (value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
@@ -71,4 +70,3 @@ var cutByResolution = function (str) {
   %>
 
 </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/userBarView.ejs

@@ -1,4 +1,3 @@
-<script id="userBarView.ejs" type="text/template">
 
   <a class="info default-icon">User: 
     <span class="toggle"> 
@@ -49,4 +48,3 @@
 </ul>
 
 --> 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/userManagementView.ejs

@@ -1,4 +1,3 @@
-<script id="userManagementView.ejs" type="text/template">
   <div class="headerBar">
     <div class="search-field">
       <input type="text" value="<%=searchString%>" id="userManagementSearchInput" class="search-input" placeholder="Search..."/>
@@ -115,4 +114,3 @@
       <%});%>
      </div>
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/userPermissionView.ejs

@@ -1,4 +1,3 @@
-<script id="userPermissionView.ejs" type="text/template">
     
   <% var genClass = "pure-u-1-5"; %>
   <% var genClass2 = "pure-u-1-5"; %>
@@ -212,4 +211,3 @@
     </div>
 
   </div>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/viewView.ejs

@@ -1,4 +1,3 @@
-<script id="viewView.ejs" type="text/template">
 
   <div class="innerContent">
     <div id="viewDocumentation" class="infoBox" style="margin-top: 10px; margin-bottom: 30px;">
@@ -20,4 +19,3 @@
     </div>
   </div>
   
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/viewsView.ejs

@@ -1,4 +1,3 @@
-<script id="viewsView.ejs" type="text/template">
   <div class="headerBar">
     <div class="search-field">
       <input type="text" value="<%=searchString%>" id="viewsSearchInput" class="search-input" placeholder="Search..."/>
@@ -63,4 +62,3 @@
      </div>
   </div>
 
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/templates/warningList.ejs

@@ -1,4 +1,3 @@
-<script id="warningList.ejs" type="text/template">
   <% if (warnings.length > 0) { %>
     <div>
       <ul>
@@ -8,4 +7,3 @@
       </ul>
     </div>
   <% } %>
-</script>

js/apps/system/_admin/aardvark/APP/frontend/js/views/indicesView.js

@@ -487,7 +487,6 @@
         }
 
         arangoHelper.createTooltips('.index-tooltip');
-        arangoHelper.fixTooltips('.icon_arangodb, .arangoicon', 'right');
         this.resetIndexForms();
       }
     },

js/apps/system/_admin/aardvark/APP/frontend/scss/_modals.scss

@@ -39,7 +39,7 @@
 }
 
 .tippy-popper {
-  z-index: 99999999;
+  z-index: 99999999 !important;
 }
 
 .select2-drop-active {

js/apps/system/_admin/aardvark/APP/manifest.json

@@ -52,6 +52,10 @@
       "path": "frontend/build/app.min.js",
       "gzip": true
     },
+    "/templates.js": {
+      "path": "frontend/build/templates.min.js",
+      "gzip": true
+    },
     "/libs.js": {
       "path": "frontend/build/libs.min.js",
       "gzip": true

js/apps/system/_admin/aardvark/APP/package.json

@@ -28,6 +28,7 @@
     "grunt-contrib-htmlmin": "^3.0.0",
     "grunt-contrib-imagemin": "^2.0.1",
     "grunt-contrib-jshint": "^2.0.0",
+    "grunt-contrib-jst": "^1.0.0",
     "grunt-contrib-sass": "^1.0.0",
     "grunt-contrib-uglify": "^4.0.0",
     "grunt-contrib-watch": "^1.1.0",