Remove axios

This patch removes the axios JavaScript library and replaces it with calls to JavaScript's `fetch()` which works quite similar and needs basically the same amount of code.
lkiesow · Apr 29, 2022 · 637d394 · 637d394
1 parent d3131f6
commit 637d394
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,12 +12,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^2.0.6",
-    "axios": "^0.26.1",
     "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^3.3.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.14.0",
     "eslint-plugin-vue": "^8.5.0",
     "parcel-bundler": "^1.12.5",
     "vue-template-compiler": "^2.6.14"

diff --git a/ui/func.js b/ui/func.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import axios from 'axios';
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle'
@@ -57,41 +56,45 @@ function format_bytes(bytes) {
 // update_data gets information from the backend and updates the main data structure 'data'.
 var update_data = function () {
     // Get capture agent name.
-    axios
-        .get('/api/name')
-        .then(response => data.name = response.data.meta.name);
+    fetch('/api/name')
+        .then(response => response.json())
+        .then(response => {
+            data.name = response.meta.name
+        });
     // Get services.
-    axios
-        .get('/api/services')
+    fetch('/api/services')
+        .then(response => response.json())
         .then(response => {
-            data.capture = response.data.meta.services.capture === "busy";
-            data.uploading = response.data.meta.services.ingest === "busy";
+            data.capture = response.meta.services.capture === "busy";
+            data.uploading = response.meta.services.ingest === "busy";
         });
     // Get events.
-    axios
-        .get('/api/events')
+    fetch('/api/events')
+        .then(response => response.json())
         .then(response => {
-            data.recorded_events = response.data.data
+            data.recorded_events = response.data
                 .filter(x => x.attributes.status !== "upcoming")
                 .map(x => create_event(x, x.attributes.status, x.id));
             data.processed = data.recorded_events.length;
-            var event_in_processing = data.processed > 0 ? data.recorded_events[0].id : null;
-            data.upcoming_events = response.data.data
+            let event_in_processing = data.processed > 0
+                ? data.recorded_events[0].id
+                : null;
+            data.upcoming_events = response.data
                 .filter(x => x.attributes.status === "upcoming")
                 .filter(x => x.id !== event_in_processing)
                 .map(x => create_event(x, x.attributes.status, x.id));
             data.upcoming = data.upcoming_events.length;
         });
     // Get preview images.
-    axios
-        .get('/api/previews')
+    fetch('/api/previews')
+        .then(response => response.json())
         .then(response => {
-            data.previews = response.data.data.map(x => "/img/" + x.attributes.id + "?" + Date.now());
+            data.previews = response.data.map(x => "/img/" + x.attributes.id + "?" + Date.now());
         });
 
     // Get metrics.
-    axios
-        .get('/api/metrics')
+    fetch('/api/metrics')
+        .then(response => response.json())
         .then(response => {
             data.metrics = [];
 
@@ -101,15 +104,15 @@ var update_data = function () {
                 'metrics': [],
             };
             // Get load
-            var load = response.data.meta.load;
+            var load = response.meta.load;
             if (load) {
                 machine.metrics.push({
                     'name': 'Load Averages',
                     'value': `${load["1m"]} ${load["5m"]} ${load["15m"]}`,
                 });
             }
             // Get disk usage
-            var disk_usage = response.data.meta.disk_usage_in_bytes;
+            var disk_usage = response.meta.disk_usage_in_bytes;
             if (disk_usage) {
                 const used = (disk_usage.used / disk_usage.total) * 100;
                 machine.metrics.push({
@@ -118,7 +121,7 @@ var update_data = function () {
                 });
             }
             // Get memory usage
-            var memory_usage = response.data.meta.memory_usage_in_bytes;
+            var memory_usage = response.meta.memory_usage_in_bytes;
             if (memory_usage) {
                 const used = (memory_usage.used / memory_usage.total) * 100;
                 machine.metrics.push({
@@ -135,7 +138,7 @@ var update_data = function () {
             // Service related metrics
             const services = {
                 'header': 'Services',
-                'metrics': response.data.meta.services.map(
+                'metrics': response.meta.services.map(
                     service => ({
                         'name': service.name[0].toUpperCase() + service.name.slice(1),
                         'value': service.status,
@@ -151,9 +154,9 @@ var update_data = function () {
                 'header': 'Upstream',
                 'metrics': [{
                     'name': 'Last Schedule Update',
-                    'value': response.data.meta.upstream.last_synchronized ?
-                        Date(response.data.meta.upstream.last_synchronized).toString() :
-                        'never'
+                    'value': response.meta.upstream.last_synchronized
+                        ? Date(response.meta.upstream.last_synchronized).toString()
+                        : 'never'
                 }]
             };
             // Add upstream metrics
@@ -162,16 +165,20 @@ var update_data = function () {
             }
         });
 
-    axios
-        .get('/api/logs')
+    fetch('/api/logs')
         .then(response => {
-            data.logs = response.data.data[0].attributes.lines;
+            if (response.ok) {
+                return response.json()
+            }
+            if (response.status != 404) {
+                throw Error(response.statusText);
+            }
         })
-        .catch(error => {
-            if (error.response.status != 404) {
-                console.error(error);
+        .then(response => {
+            if (response) {
+                data.logs = response.data[0].attributes.lines;
             }
-        });
+        })
 };