Convert data dumps to stimulus.js

rubygems · Sep 28, 2024 · c28e3c8 · c28e3c8
1 parent 46716f0
commit c28e3c8
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 64 deletions.
diff --git a/app/javascript/controllers/dump_controller.js b/app/javascript/controllers/dump_controller.js
@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["list", "template"]
+  static values = { type: String }
+
+  connect() {
+    this.getDumpData(this.typeValue);
+  }
+
+  getDumpData(type) {
+    fetch('https://s3-us-west-2.amazonaws.com/rubygems-dumps/?prefix=production/public_' + type)
+      .then(response => response.text())
+      .then(data => {
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(data, "application/xml");
+        const files = this.parseS3Listing(xml);
+        this.render(files);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }
+
+  parseS3Listing(xml) {
+    const contents = Array.from(xml.getElementsByTagName('Contents'));
+    return contents.map(item => {
+      return {
+        Key: item.getElementsByTagName('Key')[0].textContent,
+        LastModified: item.getElementsByTagName('LastModified')[0].textContent,
+        Size: item.getElementsByTagName('Size')[0].textContent,
+        StorageClass: item.getElementsByTagName('StorageClass')[0].textContent
+      };
+    });
+  }
+
+  render(files) {
+    files
+      .filter(item => 'STANDARD' === item.StorageClass)
+      .sort((a, b) => Date.parse(b.LastModified) - Date.parse(a.LastModified))
+      .forEach(item => {
+        let text = `${item.LastModified.replace('.000Z', '')} (${this.bytesToSize(item.Size)})`;
+        let uri = `https://s3-us-west-2.amazonaws.com/rubygems-dumps/${item.Key}`;
+        this.appendItem(text, uri);
+      });
+  }
+
+  appendItem(text, uri) {
+    const clone = this.templateTarget.content.cloneNode(true);
+    const a = clone.querySelector('a')
+    a.textContent = text;
+    a.href = uri;
+    this.element.appendChild(clone)
+  }
+
+  bytesToSize(bytes) {
+    var i, k, sizes;
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+    k = 1024;
+    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    i = Math.floor(Math.log(bytes) / Math.log(k));
+    return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
+  }
+}
diff --git a/app/javascript/src/pages.js b/app/javascript/src/pages.js
@@ -1,66 +1,5 @@
 import $ from "jquery";
 
-//data page
-$(function() {
-  var getDumpData = function(target, type) {
-    return $.get('https://s3-us-west-2.amazonaws.com/rubygems-dumps/?prefix=production/public_' + type).done(function(data) {
-      var files, xml;
-      xml = $(data);
-      files = parseS3Listing(xml);
-      files = sortByLastModified(files);
-      $(target).html(renderDumpList(files));
-    }).fail(function(error) {
-      console.error(error);
-    });
-  };
-
-  var parseS3Listing = function(xml) {
-    var files;
-    files = $.map(xml.find('Contents'), function(item) {
-      item = $(item);
-      return {
-        Key: item.find('Key').text(),
-        LastModified: item.find('LastModified').text(),
-        Size: item.find('Size').text(),
-        StorageClass: item.find('StorageClass').text()
-      };
-    });
-    return files;
-  };
-
-  var sortByLastModified = function(files) {
-    return files.sort(function(a, b) {return Date.parse(b.LastModified) - Date.parse(a.LastModified)});
-  };
-
-  var bytesToSize = function(bytes) {
-    var i, k, sizes;
-    if (bytes === 0) {
-      return '0 Byte';
-    }
-    k = 1024;
-    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    i = Math.floor(Math.log(bytes) / Math.log(k));
-    return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
-  };
-
-  var renderDumpList = function(files) {
-    var content;
-    content = [];
-    $.each(files, function(idx, item) {
-      if ('STANDARD' === item.StorageClass) {
-        return content.push("<li><a href='https://s3-us-west-2.amazonaws.com/rubygems-dumps/" + item.Key + "'>" + (item.LastModified.replace('.000Z', '')) + " (" + (bytesToSize(item.Size)) + ")</a></li>");
-      }
-    });
-    return content.join("\n");
-  };
-
-  if($("#data-dump").length) {
-    getDumpData('ul.rubygems-dump-listing-postgresql', 'postgresql');
-    getDumpData('ul.rubygems-dump-listing-redis', 'redis');
-  }
-
-});
-
 //stats page
 $(function() {
   $('.stats__graph__gem__meter').each(function() {

diff --git a/app/views/pages/data.html.erb b/app/views/pages/data.html.erb
@@ -3,8 +3,16 @@
 <div class="t-body" id="data-dump">
   <p>We provide weekly dumps of the RubyGems.org PostgreSQL data. This dump is sanitized, removing all user information.</p>
   <p>The <a href="https://github.com/rubygems/rubygems.org/tree/master/script/load-pg-dump">load-pg-dump</a> script is
-     available as an example of how to to download and load the most recent weekly dump.</p>
-  <ul class="rubygems-dump-listing-postgresql"></ul>
+    available as an example of how to to download and load the most recent weekly dump.</p>
+  <ul data-controller="dump" data-dump-type-value="postgresql">
+    <template data-dump-target="template">
+      <li><a href="#"></a></li>
+    </template>
+  </ul>
   <p>We also provide weekly dumps of the historial RubyGems.org Redis data. (We do not use redis anymore but these are here for historical purposes.)</p>
-  <ul class="rubygems-dump-listing-redis"></ul>
+  <ul data-controller="dump" data-dump-type-value="redis">
+    <template data-dump-target="template">
+      <li><a href="#"></a></li>
+    </template>
+  </ul>
 </div>