Realtime File Server Metrics with Javascript from Scratch

Question

I'm trying to build a webpage that shows the status of a File Server I built using MDADM and Samba. I mostly want it to show the RAID's status, as far as disk health, and RAID health overall. I want to do this as a way to understand JS more and get a better handle on how to build a website.

What I think would be easiest for now until I get more experience would be to have the status be spit out to some txt files on the File Server and then read those into the site dynamically, so they update every second/minute. I just want to know how to display the contents of a txt file that is on the File Server to the webpage, such that it will dynamically update while I am viewing the page, no refreshing. The txt file on the server will update by using cronjob each minute to get the RAID status with something like cat /proc/mdstat > /users/me/raidstatus.txt. I know it's hacky but it's just to learn and build something useful for my home lab.

I am barely a novice with JS, CSS, and HTML. I'm having trouble using search terms to find tutorials and explainers on what seems to be a very simple problem.

Below is what I have so far. I also can't seem to get

const raid = document.getElementById("raidstatus").innerHTML = "test";

to display in the HTML document, unless I put it in the HTML doc

<script>document.getElementById("raidstatus").innerHTML = "test";</script>

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Server Monitor</title>
  <link rel="stylesheet" href="main.css">
</head>
<body class="dark-theme">
    <h1>File Server</h1>
    <p id="msg">Monitors:</p>
    <ul>
      <li class="list">RAID Status; health, size, etc</li>
      <li class="list">Health of each disk individually</li>
      <li class="list">SMB Connection status</li>
      <li class="list">Uptime</li>
      <li class="list">Space Left, total space</li>
    </ul>

    <p id="raidstatus"></p>

</body>
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
</html>

JS:

/*
SCOPE/FUNCTION:
    realtime metrics on:
        File Servers RAID status
        Uptime
        Last time data was uploaded
        ability to configure email notifications when Disk needs to be replaced
*/

'use strict';

const raid = document.getElementById("raidstatus").innerHTML = "test";

function loadXMLDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "helloword.txt", true);
    xhttp.send();
  }


//raidstatus.innerHTML = "test";

CSS:

body {
    font-family: monospace;
}
ul {
    font-family: helvetica;
}
li {
    list-style: circle;
  }
  .list {
    list-style: square;
  }  
  #msg {
    font-family: monospace;
  }
  .dark-theme {
    --bg: var(--black);
    --fontColor: var(--green);
    --btnBg: var(--white);
    --btnFontColor: var(--black);
  }
  :root {
    --green: #00FF00;
    --white: #FFFFFF;
    --black: #000000;
  }
  body {
    background: var(--bg);
    color: var(--fontColor);
    font-family: helvetica;

Mason McGerry · Accepted Answer · 2022-11-30 02:05:07Z

Turns out I needed to trigger the function, I troubleshot that with a button to make sure it would refresh the element, then I used the setInterval() function to get it to run every second.

I paired down the code since a lot of it was plundered and I was still getting my bearings. Below is the updated, working code, very simple but it meets my minimalistic requirements.

HTML:

<!DOCTYPE html>
<html lang="en">
        <body>
            <p id="clock"></p>
            <p id="raid"></p>
            <script type="text/javascript" src="app.js"></script>
    </body>
</html>

JS:

/*
SCOPE/FUNCTION:
    realtime metrics on:
        File Servers RAID status
        Uptime
        Last time data was uploaded
        ability to configure email notifications when Disk needs to be replaced
*/

// runs showTime every 1 second
setInterval(showTime,1000)
// runs currntStatus every 1 second
setInterval(currentStatus,1000)

// pushes the contents of the file into the element with id "raid"
function currentStatus() {
    const elem = document.getElementById("raid");
    elem.innerHTML = readFile("test.txt");
}

// reads the file, which I need to study more, I ripped this off someone I sourced below, it seems buggy, some time lag and inconsistency but works
function readFile(filePath) {
    var result = null;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", filePath, false);
    xmlhttp.send();
    if (xmlhttp.status==200) {
      result = xmlhttp.responseText;
    }
    xmlhttp.abort();
    return result;
  }

// gets current time and puts it into the element with id "clock" 
function showTime() {
    // return new date and time
    let dateTime = new Date();
    // return the time
    let time = dateTime.toLocaleTimeString();
    const clockState = document.getElementById("clock");
    clockState.innerHTML = time;
}  

/*

SOURCES:

https://stackoverflow.com/questions/36921947/read-a-server-side-file-using-javascript
https://www.w3schools.com/js/js_timing.asp

*/

I'll worry about the CSS later, as it was really just a bonus for me.

Collectives™ on Stack Overflow

Realtime File Server Metrics with Javascript from Scratch

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related