GH-89: Support multiple instances

Use JavaScript module and class.
Do not use window variables and functions.

Author: wesleyboar

taccsite_cms/contrib/taccsite_system_monitor/static/taccsite_system_monitor/js/system_monitor.js

@@ -1,11 +1,20 @@
+/**
+ * Show public runtime data about a TACC system
+ *
+ * - Manipulates attributes and text nodes within existing markup.
+ * - Data is NOT dynamically updated after initial load.
+ * @module systemMonitor
+ */
 // GH-295: Use server-side logic instead of client-side
 // NOTE: If JavaScript is a long-term solution, then use a class.
 
+
+
 /* Definitions */
 
 /**
  * All system data
- * @typedef {array<System>} AllSystems
+ * @typedef {array<module:systemMonitor~System>} AllSystems
  * @see https://frontera-portal.tacc.utexas.edu/api/system-monitor/
  */
 
@@ -15,185 +24,213 @@
  * @see https://frontera-portal.tacc.utexas.edu/api/system-monitor/
  */
 
-/* Internal Constants (if using a class, Static Properties) */
 
-// Allow system mointor to work(-ish) on local server
-const USE_SAMPLE_DATA = (window.location.hostname === 'localhost');
-const API_SAMPLE_DATA = JSON.parse('[{"hostname": "frontera.tacc.utexas.edu", "display_name": "Frontera", "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:02Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:02Z"}, "status_tests": {"ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:02.176Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:02.174Z"}}, "resource_type": "compute", "jobs": {"running": 322, "queued": 1468, "other": 364}, "load_percentage": 99, "cpu_count": 472760, "cpu_used": 468616, "is_operational": true}, {"hostname": "stampede2.tacc.utexas.edu", "display_name": "Stampede2", "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:03Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:03Z"}, "status_tests": {"heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:03.069Z"}, "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:03.074Z"}}, "resource_type": "compute", "jobs": {"running": 1115, "queued": 1032, "other": 444}, "load_percentage": 96, "cpu_count": 1309056, "cpu_used": 1257184, "is_operational": true}]');
+
+/* Constants */
+/* IDEA: These could be static properties, once Safari support is widespread */
+
+/**
+ * Sample system data
+ * @type {array<module:systemMonitor~System>}
+ */
+const API_SAMPLE_DATA = JSON.parse('[{"hostname": "frontera.tacc.utexas.edu", "display_name": "Frontera", "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:02Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:02Z"}, "status_tests": {"ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:02.176Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:02.174Z"}}, "resource_type": "compute", "jobs": {"running": 322, "queued": 1468, "other": 364}, "load_percentage": 99, "cpu_count": 472760, "cpu_used": 468616, "is_operational": true}, {"hostname": "stampede2.tacc.utexas.edu", "display_name": "Stampede2", "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:03Z"}, "heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:03Z"}, "status_tests": {"heartbeat": {"type": "heartbeat", "status": true, "timestamp": "2021-07-30T19:45:03.069Z"}, "ssh": {"type": "ssh", "status": true, "timestamp": "2021-07-30T19:45:03.074Z"}}, "resource_type": "compute", "jobs": {"running": 0, "queued": 1032, "other": 444}, "load_percentage": 0, "cpu_count": 1309056, "cpu_used": 1257184, "is_operational": true}]');
 
 /**
  * The URL of the API endpoint
  * @type {string}
  */
 const API_URL = '/api/system-monitor';
 
-/* External Constants (if using a class, Parameters) */
 
-/**
- * The systems to show
- *
- * _Notice: This value is expected to be available from another script_
- * @type {string}
- */
-const SYSTEM_HOSTNAME = window.SYSMON_SYSTEM_HOSTNAME;
+
+/* Exports */
 
 /**
- * The DOM element for display
- *
- * _Notice: This value is expected to be available from another script_
- * @type {HTMLElement}
+ * Populate a system monitor element
  */
-const SYSTEM_DOM_ELEMENT = window.SYSMON_SYSTEM_DOM_ELEMENT;
+export class SystemMonitor {
 
-/* Functions (if using a class, Methods) */
 
-/**
- * Load system status
- * @param {string} path
- * @param {function} onSuccess - Callback for success (receives JSON)
- * @param {function} onError - Callback for success (receives XMLHttpRequest)
- */
-function loadStatus(path, onSuccess, onError) {
-  var xhr = new XMLHttpRequest();
-  xhr.onreadystatechange = function () {
-    if (xhr.readyState === XMLHttpRequest.DONE) {
-      if (xhr.status === 200) {
-        if (onSuccess) onSuccess(JSON.parse(xhr.responseText));
-      } else {
-        if (onError) onError(xhr);
-      }
-    }
-  };
-  xhr.open('GET', path, true);
-  xhr.send();
-}
 
-/**
- * Whether system is operational
- * @param {System} system
- * @return {boolean}
- */
-function isOperational(system) {
-  if (system['load_percentage'] < 1 || system['load_percentage'] > 99) {
-    system['load_percentage'] = 0;
-    return system['jobs']['running'] > 1;
+  /**
+   * Initialize system monitor
+   * @param {string} hostname - The systems to show
+   * @param {HTMLElement} domElement - The DOM element for display
+   * @param {HTMLElement} [shouldUseSampleData=false] - Whether to present fake data
+   */
+  constructor(hostname, domElement, shouldUseSampleData=false) {
+    /**
+     * The systems to show
+     * @type {string}
+     */
+    this.hostname = hostname;
+
+    /**
+     * The DOM element for display
+     * @type {HTMLElement}
+     */
+    this.domElement = domElement;
+
+    /**
+     * Whether to present fake data on a local server
+     * @type {boolean}
+     */
+    this.shouldUseSampleData = shouldUseSampleData;
+
+
+
+    this.init();
   }
-  return true;
-}
 
-/**
- * Get element in UI by an ID
- * @param {string} id - The (internally unique) identifier of an element
- * @return {HTMLElement}
- */
-function getElement(id) {
-  // NOTE: To permit multiple instances,
-  //       an ID must be reusable across instances,
-  //       so `document.getElementById` SHOULD NOT be used.
-  return SYSTEM_DOM_ELEMENT.querySelector(`[data-id="${id}"]`);
-}
 
-/**
- * Show system content in UI
- */
-function showStatus() {
-  getElement('status').classList.remove('d-none');
-}
 
-/**
- * Style system status
- * @param {string} type - A type: "warning"
- */
-function setStatusStyle(type) {
-  const element = getElement('status');
-
-  switch (type) {
-    case 'warning':
-      element.classList.remove('badge-success');
-      element.removeAttribute('data-icon');
-      element.innerHTML = 'Maintenance';
-      element.classList.add('badge-warning');
-
-    default:
-      break;
+  /**
+   * Load system status
+   * @param {string} path
+   * @param {function} onSuccess - Callback for success (receives JSON)
+   * @param {function} onError - Callback for success (receives XMLHttpRequest)
+   */
+  loadStatus(path, onSuccess, onError) {
+    const xhr = new XMLHttpRequest();
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === 200) {
+          if (onSuccess) onSuccess(JSON.parse(xhr.responseText));
+        } else {
+          if (onError) onError(xhr);
+        }
+      }
+    };
+    xhr.open('GET', path, true);
+    xhr.send();
   }
-}
 
-/**
- * Populate system status content in markup
- * @param {System} status
- */
-function setStatusMarkup(status) {
-  getElement('load_percentage').innerHTML =
-    status['load_percentage'] + '%';
-  getElement('jobs_running').innerHTML =
-    status['jobs']['running'];
-  getElement('jobs_queued').innerHTML =
-    status['jobs']['queued'];
-}
+  /**
+   * Whether system is operational
+   * @param {module:systemMonitor~System} system
+   * @return {boolean}
+   */
+  isOperational(system) {
+    if (system['load_percentage'] < 1 || system['load_percentage'] > 99) {
+      system['load_percentage'] = 0;
+      return system['jobs']['running'] > 1;
+    }
+    return true;
+  }
 
-/**
- * Populate system status in UI
- * @param {System} status
- */
-function setStatus(status) {
-  const isFound = status;
-  const isWorking = isOperational(status);
-
-  if (isFound && isWorking) {
-    setStatusMarkup(status);
-  } else {
-    setStatusStyle('warning');
-    if (isFound) {
-      setStatusMarkup(status);
+  /**
+   * Get element in UI by an ID
+   * @param {string} id - The (internally unique) identifier of an element
+   * @return {HTMLElement}
+   */
+  getElement(id) {
+    // NOTE: To permit multiple instances,
+    //       an ID must be reusable across instances,
+    //       so `document.getElementById` SHOULD NOT be used.
+    return this.domElement.querySelector(`[data-id="${id}"]`);
+  }
+
+  /**
+   * Show system content in UI
+   */
+  showStatus() {
+    this.getElement('status').classList.remove('d-none');
+  }
+
+  /**
+   * Style system status
+   * @param {string} type - A type: "warning"
+   */
+  setStatusStyle(type) {
+    const element = this.getElement('status');
+
+    switch (type) {
+      case 'warning':
+        element.classList.remove('badge-success');
+        element.removeAttribute('data-icon');
+        element.innerHTML = 'Maintenance';
+        element.classList.add('badge-warning');
+
+      default:
+        break;
     }
   }
-  showStatus();
-}
 
-/**
- * Populate monitor based on data
- * @param {AllSystems} systems
- */
-function populate(systems) {
-  let status;
-
-  systems.forEach(function (system) {
-    if (system['hostname'] === SYSTEM_HOSTNAME) {
-      status = system;
-      console.info(`System Monitor: System found (${SYSTEM_HOSTNAME})`);
-      return false;
+  /**
+   * Populate system status content in markup
+   * @param {module:systemMonitor~System} status
+   */
+  setStatusMarkup(status) {
+    this.getElement('load_percentage').innerHTML =
+      status['load_percentage'] + '%';
+    this.getElement('jobs_running').innerHTML =
+      status['jobs']['running'];
+    this.getElement('jobs_queued').innerHTML =
+      status['jobs']['queued'];
+  }
+
+  /**
+   * Populate system status in UI
+   * @param {module:systemMonitor~System} status
+   */
+  setStatus(status) {
+    const isFound = status;
+    const isWorking = this.isOperational(status);
+
+    if (isFound && isWorking) {
+      this.setStatusMarkup(status);
+    } else {
+      this.setStatusStyle('warning');
+      if (isFound) {
+        this.setStatusMarkup(status);
+      }
     }
-  });
+    this.showStatus();
+  }
 
-  setStatus(status);
-}
+  /**
+   * Populate monitor based on data
+   * @param {module:systemMonitor~AllSystems} systems
+   */
+  populate(systems) {
+    let status;
+
+    systems.forEach((system) => {
+      if (system['hostname'] === this.hostname) {
+        status = system;
+        console.info(`System Monitor: System found (${this.hostname})`);
+        return false;
+      }
+    });
+
+    this.setStatus(status);
+  }
 
-/* Initialize (if using a class, Constructor) */
-
-/** Load and populate UI */
-function init() {
-  document.addEventListener(
-    'DOMContentLoaded',
-    function () {
-      loadStatus(
-        API_URL,
-        function (data) {
-          populate(data);
-        },
-        function (xhr) {
-          if (USE_SAMPLE_DATA) {
-            populate(API_SAMPLE_DATA);
-          } else {
-            console.error(xhr);
+  /* Initialize (if using a class, Constructor) */
+
+  /** Load and populate UI */
+  init() {
+    document.addEventListener(
+      'DOMContentLoaded',
+      () => {
+        this.loadStatus(
+          API_URL,
+          (data) => {
+            this.populate(data);
+          },
+          (xhr) => {
+            if (this.shouldUseSampleData) {
+              this.populate(API_SAMPLE_DATA);
+            } else {
+              console.error(xhr);
+            }
           }
-        }
-      );
+        );
 
-      console.log('System Monitor: Load complete');
-    },
-    false
-  );
+        console.log('System Monitor: Load complete');
+      },
+      false
+    );
+  }
 }
-
-init();