This is a prototype web GUI for TTU’s HPCC. A line by line description for the main page is given below (still in progress). To run this application, download stable.html as a complete webpage and open in Chrome. (I know it works for Chrome, but I can’t speak for any other browsers). The buttons are stub functions. They will try to redirect you to your localhost:8888, where they expect an index.php containing links to other pages (like Graphs or Help). All this is still in-progress, so I would advise just not clicking the buttons until I can fix them.
The Graphs.html code uses RGraph (https://github.com/seeslab/rgraph).
Start head.
Script Tags Script tag one: imports jQuery Script tag two: imports a JavaScript graphics library
Style Canvas: Main window the racks are drawn in Pre: Standard output (do I even need this?) Svg: The hover box will eventually be drawn in an svg viewbox superimposed on the canvas H1: Title displayed above canvas Img: Texas Tech logo in lower left corner
End head.
Start body
Title: “Heat Map of HPCC” Canvas: specifications for canvas Pre: specifications for output
Button One: Opens Help page Button Two: Opens control panel page Button Three: Opens Graphs page Button Four: (Experimental) Requests Redfish payload from http://localhost:8080/redfish/v1/
Div element: “yellowBox” (change that name) Area to display information about selected machine
Svg element: Hoverbox. Still in the works
Begin script
Global variables with very self-explanatory names. Payload is a list of JSON objects (kinda) that each represent a server (also referred to as machines)
getJSON request that pulls json objects from an outside source and adds them to payload
Begin window onload function (called when the window loads)
Hoverbox stuff, don’t worry about for now Lots of variables. Eventually the …Zone variables should be replaced with the criticalUpper, fatalUpper etc. variables from the Redfish payloads (check completeMetrics.json for examples)
Uncomment the data duplication section to fill the datacenter with machines displaying random greenZone metrics
Draw Row draws empty racks filling the canvas
Every 1000 ms, masterUpdate function is called and does the following • Every element in payload is parsed to isolate the name, temp, etc. of the machine • (Remember, each element in payload represents a server)