Separate Javascript from templates (#82)

* Moved Javascript from templates to separate files * Fixed issue with bundling of tasks.js * Added Javascript/CSS bundling for plot formats count report page * Removed hashes from bundle filenames * Fix base URL in reports.js * Remove unneeded CSS
artefactual-labs · Jan 9, 2024 · 5488a27 · 5488a27
1 parent 69b9b3c
commit 5488a27
Show file tree

Hide file tree

Showing 27 changed files with 611 additions and 513 deletions.
diff --git a/AIPscan/Aggregator/templates/storage_service.html b/AIPscan/Aggregator/templates/storage_service.html
@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block head_content %}
+  <script defer data-storage-service-id="{{ storage_service.id }}" data-storage-service-api-key="{{ storage_service.api_key }} type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/aggregator/storage_service.js') }}"></script>
+{% endblock %}
+
 {% block content %}
 
 <div class="row">
@@ -81,32 +85,4 @@
 </table>
 <button type="button" class="btn btn-success" style="margin-top: 20px;" id="newfetchjob">New fetch job</button>
 
-
-<script type="module">
-$(document).ready(function(){
-  $('#newfetchjob').on('click', function () {
-    new_fetch_job({{ storage_service.id }});
-  });
-  $('.stats').hide();
-  $('.fa-info-circle').click(function() {
-    if($('#stats-'+this.id).is(':visible'))
-        $('#stats-'+this.id).hide();
-    else
-        $('#stats-'+this.id).show();    
-  });
-
-  // Handle API key visibility
-  let apiKeyVisible = false;
-  let apiKeyHiddenText = '&bull;'.repeat(16)
-  $('#apikeyBtn').on('click', function () {
-    apiKeyVisible = !apiKeyVisible;
-    if (apiKeyVisible === true ) {
-      $('#apikey').text('{{ storage_service.api_key}}');
-    } else {
-      $('#apikey').html(apiKeyHiddenText);
-    }
-  });
-});
-</script>
-
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/aips.html b/AIPscan/Reporter/templates/aips.html
@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 
+{% block head_content %}
+  <script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/aips.js') }}"></script>
+{% endblock %}
+
 {% block content %}
 
 <div class="alert alert-header"><strong>AIPs ({{ pager.items|length }})</strong></div>
@@ -106,36 +110,4 @@
 
 {% endif %}
 
-<script type="module">
-$(document).ready(function(){
-  var storageServiceId = $('#ss').val();
-  var storageLocationId = $('#sl').val();
-
-  function reloadPage (ignoreLocation) {
-    var storageServiceId = $('#ss').val();
-    var storageLocationId = $ ('#sl').val();
-
-    var url = new URL("/reporter/aips", $('body').data('url-root'));
-    var params = {
-      "amss_id": storageServiceId
-    };
-
-    if (ignoreLocation !== true) {
-      params["storage_location"] = storageLocationId;
-    }
-
-    url.search = new URLSearchParams(params).toString();
-    window.location.href = url.href;
-  }
-
-  $("#ss").on("change", function() {
-    reloadPage(true);
-  });
-
-  $("#sl").on("change", function() {
-    reloadPage(false);
-  });
-});
-</script>
-
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/chart_formats_count.html b/AIPscan/Reporter/templates/chart_formats_count.html
@@ -2,12 +2,10 @@
 <html lang="en">
 <head>
   <title>{{ storage_service_name }}: file formats count</title>
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/chart_formats_count/assets/chart_formats_count-6NOWmm_T.css') }}">
-  <script type="module" language="javascript" src="{{ url_for('static', filename='dist/chart_formats_count/assets/chart_formats_count-c9rhHfc8.js') }}"></script>
-
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.css') }}">
+  <script type="module" language="javascript" src="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.js') }}"></script>
+  <script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/chart_formats_count.js') }}"></script>
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-
-
 </head>
 <body>
 
@@ -35,38 +33,8 @@
     </canvas>
 </div>
 
-<script type="module">
-  // draw format chart
-
-  let randCols = []
-  let jsonLabels = {{ labels|tojson }}
-  let jsonValues = {{ values|tojson }}
-
-  let makeColor = function() {
-    var r = Math.floor(Math.random() * 255)
-    var g = Math.floor(Math.random() * 255)
-    var b = Math.floor(Math.random() * 255)
-    return "rgb(" + r + "," + g + "," + b + ")"
-  }
-  for (let x=0;x<jsonValues.length;x++){randCols.push(makeColor())}
-
-  let canvas = document.getElementById("chart")
-  let ctx = canvas.getContext("2d")
-
-  let config = {
-      type: 'pie',
-      data: {
-        labels: jsonLabels,
-        datasets: [{
-          data: jsonValues,
-          label: "Formats chart",
-          backgroundColor: randCols,
-        }],
-      },
-      options: {responsive: true},
-    }
-   let myPie = new Chart(ctx, config)
-</script>
+<textarea class="d-none" id="chart_labels">{{ labels | tojson }}</textarea>
+<textarea class="d-none" id="chart_values">{{ values | tojson }}</textarea>
 
 </div>
 </body>

diff --git a/AIPscan/Reporter/templates/file.html b/AIPscan/Reporter/templates/file.html
@@ -4,7 +4,7 @@
 
 <h2 class="h3">File: {{ file_.name }}</h2>
 
-<table class="table table-bordered table-condensed" style="margin-top: 20px;">
+<table class="table table-bordered table-condensed mt-4">
   <tr><td width=20%><strong>Filepath</strong></td><td>{{ file_.filepath }}</td></tr>
   <tr>
     <td width=20%>
@@ -108,7 +108,7 @@ <h3>PREMIS Events</h3>
 {% if events %}
     {% for event in events %}
     <table class="table table-bordered table-condensed">
-      <tr style="background-color: #D3D3D3;">
+      <tr class="bg-secondary">
         <td width=20%>
           <strong>Event type</strong>
         </td>

diff --git a/AIPscan/Reporter/templates/plot_formats_count.html b/AIPscan/Reporter/templates/plot_formats_count.html
@@ -3,10 +3,10 @@
 <head>
   <title>{{ storage_service_name }}: file formats count</title>
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
-  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/assets/plotly.js') }}"></script>
-
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/plot_formats_count/plot_formats_count.css') }}">
+  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/plot_formats_count.js') }}"></script>
+  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/plotly.js') }}"></script>
+  <script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/plot_formats_count.js') }}"></script>
 </head>
 <body>
 
@@ -27,31 +27,12 @@
   {{ differentFormats }} different formats totalling {{ totalHumanSize }}
 </div>
 
-<div id="scatterplot">
-  <script>
-  var data = [{
-    x: {{ x_axis | safe }},
-    y: {{ y_axis | safe }},
-    text: {{ format | safe }},
-    customdata: {{ humansize | safe }},
-    marker: {size: 7},
-    hovertemplate: '<b>%{text}</b><br />' +
-                   'count: %{y}<br />' +
-                   'size: %{customdata}<br />' +
-                   'size in bytes: %{x}' +
-                   '<extra></extra>',
-    type: 'scatter',
-    mode: 'markers',
-  }];
-  var layout = {
-    hovermode: 'closest', yaxis: {title:'format occurence count'}, xaxis: {title:'total size in bytes'},
-    showlegend: false
-  }
+<textarea class="d-none" id="plot_x_axis">{{ x_axis | tojson }}</textarea>
+<textarea class="d-none" id="plot_y_axis">{{ y_axis | tojson }}</textarea>
+<textarea class="d-none" id="plot_format">{{ format | tojson }}</textarea>
+<textarea class="d-none" id="plot_humansize">{{ humansize | tojson }}</textarea>
 
-  Plotly.newPlot('scatterplot', data, layout, {displayModeBar: false});
-  </script>
-</div>
+<div id="scatterplot"></div>
 
-</div>
 </body>
 </html>
diff --git a/AIPscan/Reporter/templates/report_aip_contents.html b/AIPscan/Reporter/templates/report_aip_contents.html
@@ -46,7 +46,7 @@
     <tbody>
   </table>
 {% else %}
-  <p class="h4" style="margin-top:20px;">No AIPs to display.</p>
+  <p class="h4 mt-4">No AIPs to display.</p>
 {% endif %}
 
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/report_buttons.html b/AIPscan/Reporter/templates/report_buttons.html
@@ -1,4 +1,4 @@
 <div class="noprint">
-  <button type="button" onClick="window.print();return false" class="btn btn-info" style="float:right;">Print</button>
-  <button type="button" id="downloadCSV" class="btn btn-info" style="float:right; margin-right: 10px;">Download CSV</button>
+  <button type="button" onClick="window.print();return false" class="btn btn-info float-right">Print</button>
+  <button type="button" id="downloadCSV" class="btn btn-info float-right mr-2">Download CSV</button>
 </div>
diff --git a/AIPscan/Reporter/templates/report_ingest_log_tabular.html b/AIPscan/Reporter/templates/report_ingest_log_tabular.html
@@ -2,7 +2,7 @@
 
 {% extends "report_base.html" %}
 
-{% block extra_css %}
+{% block head_content %}
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style_ingest_log.css') }}">
 {% endblock %}
 

diff --git a/AIPscan/Reporter/templates/report_largest_aips.html b/AIPscan/Reporter/templates/report_largest_aips.html
@@ -41,7 +41,7 @@
     </tbody>
   </table>
 {% else %}
-  <p class="h4" style="margin-top:20px;">No AIPs to display.</p>
+  <p class="h4 mt-4">No AIPs to display.</p>
 {% endif %}
 
 </div>

diff --git a/AIPscan/Reporter/templates/report_preservation_derivatives.html b/AIPscan/Reporter/templates/report_preservation_derivatives.html
@@ -16,16 +16,16 @@
   {{ total_files }} preservation derivatives found across {{ aips|length }} AIPs
 </div>
 
-<h1 class="h2" style="margin-bottom: 20px;">Preservation derivatives report</h1>
+<h1 class="h2 mb-4">Preservation derivatives report</h1>
 
 <!-- Hidden elements we want available from JS for URL generation -->
 <span id="storageServiceID" style="display:none;">{{ storage_service_id }}</span>
 <span id="storageLocationID" style="display:none;">{{ storage_location_id }}</span>
 
 <!-- AIP selector -->
-<div class="noprint" style="margin-bottom: 10px;">
+<div class="noprint mb-4">
   <strong>AIP:</strong>
-  <select id="aipSelector" class="form-control" style="width:auto;">
+  <select id="aipSelector" class="form-control w-auto">
     <option value="">All AIPs</option>
     {% for aip in aips %}
       <option value="{{ aip['AIPUUID'] }}"{% if aip["AIPUUID"]==selected_aip %} selected{% endif %}>{{ aip["AIPName"] }} ({{ aip["AIPUUID"] }})</option>
@@ -82,7 +82,7 @@ <h1 class="h2" style="margin-bottom: 20px;">Preservation derivatives report</h1>
       </tbody>
     </table>
   {% else %}
-    <p class="h4" style="margin-top:20px;">No preservation derivatives to display.</p>
+    <p class="h4 mt-4">No preservation derivatives to display.</p>
   {% endif %}
 
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/report_storage_locations_usage_over_time.html b/AIPscan/Reporter/templates/report_storage_locations_usage_over_time.html
@@ -15,14 +15,14 @@
   <strong>End date:</strong> {{ end_date.strftime('%Y-%m-%d') }}
 
   <!-- Hidden elements we want available from JS for URL generation -->
-  <span id="storageServiceID" style="display:none;">{{ storage_service_id }}</span>
-  <span id="startDate" style="display:none;">{{ start_date.strftime('%Y-%m-%d') }}</span>
-  <span id="endDate" style="display:none;">{{ end_date.strftime('%Y-%m-%d') }}</span>
+  <span id="storageServiceID" class="d-none">{{ storage_service_id }}</span>
+  <span id="startDate" class="d-none">{{ start_date.strftime('%Y-%m-%d') }}</span>
+  <span id="endDate" class="d-none">{{ end_date.strftime('%Y-%m-%d') }}</span>
 </div>
 
-<div class="noprint" style="margin-bottom: 10px;">
+<div class="noprint mb-4">
   <strong>Metric:</strong>
-  <select id="metricSelector" class="form-control" style="width:auto;">
+  <select id="metricSelector" class="form-control w-auto">
   {% if metric == "size" %}
     <option value="aips">AIP count</option>
     <option value="size" selected>Total AIP size (GB)</option>
@@ -39,9 +39,9 @@
   </select>
 </div>
 
-<div class="noprint" style="margin-bottom: 10px;">
+<div class="noprint mb-4">
   <strong>Show totals:</strong>
-  <select id="cumulativeSelector" class="form-control" style="width:auto;">
+  <select id="cumulativeSelector" class="form-control w-auto">
   {% if cumulative %}
     <option value="false">Differential</option>
     <option value="true" selected>Cumulative</option>