Feature #1060
closed
PiStore needs store manager web UI
100%
Description
Although the touchscreen is useful for general drive data, it's not user-friendly for managing the stores. The Web UI will run on the PiStore System with an API for use by Ironman.
Each store needs to be configurable with- Directories (add, remove, rename, write-enable, read-enable)
- ACLs
- Enable as PiSentry store
- Data usage per directory
Don't make it complex. Use simple CSS layout with few UI components.
Web server directly accesses mount points and makes changes, so it must run as root. Touchscreen UI should NOT access this metadata - only low level drive data should be displayed.
Files
Related issues
Updated by Hammel 10 months ago
- Status changed from New to In Progress
- % Done changed from 0 to 20
The pistoreweb application is now stubbed out fully given the API definition (see pistoreweb.c) and expected UI.
The first API implemented is the monitor request for status - get.c:pistoreStatus(). This now needs a unit test. To do this, the jarvis.c/h code needs to be updated to make monitor requests to pistoreweb, but it needs to act like a monitor now and not like Jarvis.
Updated by Hammel 10 months ago
pistoreweb needs to register with the monitor. This must happen before we allow processing by mongoose. Or the mongoose handlers should ignore all requests if registration isn't complete.
Registration is sending the multicast request and getting back the UUID generated by the monitor. Once the UUID is received, it must be stored and used for API transactions.
See piboxd registerDevice() for how registration works. pistoreweb will need to support "/register?uuid=<>". This function also shows possible responses.
Updated by Hammel 10 months ago
Registration and default index.html are now working.
Next:Retrieve storage stats.Ready to test but must be tested on PiStore system.
Generate png graph of stats.This is basically a version of gtk_graph_paint() in pistore:graphwidget.c that just writes the graph to a file.
Create index.tmpl template.Build image map from png graph.Generate index.html from index.tmpl and just add links to each drive. An image map can't (easily, keeping it KISS) be sync'd with png write, index gets and graph image gets.
Add code to replace template tags with generated code.- Add CSS to template (embed it to reduce secondary calls).
Updated by Hammel 9 months ago
- Blocks Feature #588: File Manager for PiStore's added
Updated by Hammel 5 months ago
This is actually really clumsy. It would be better (sadly) to use client side javascript. It can do automated callbacks to update the graph. And the layout can be much nicer. So this needs to be updated with a MINIMAL javascript client side. Mongoose will have no problems sending that.
Updated by Hammel 4 months ago
Reviewing JS charting libraries, specifically those that have no dependencies.
In most cases a call to the server to get JSON data representing storage data will need to be converted to a Javascript array.
This example is much of what I want, along with the mongoose example for WebUI.
Updated by Hammel about 1 month ago
- Subject changed from Need store manager web UI to PiStore needs store manager web UI
- Description updated (diff)
Updated by Hammel about 1 month ago
- Is duplicate of Feature #1172: Move graphing to javascript added
Updated by Hammel 23 days ago
To implement this, I need a public status function. The pistorestatus() function currently implemented is for PiSentry's and Ironman and uses encryption. The new function will need to generate array data based on what timer_genGraph() currently does to generate the static png graph.
The code to retrieve the JSON from the API looks like this. The returned JSON data will show up in the browser console log.
const apiUrl = '/api/1.0/webstatus';
const outputElement = document.getElementById('output');
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Display data in an HTML element
outputElement.textContent = JSON.stringify(data, null, 2);
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
This is implemented in a js.html file attached here.
Also: implementing a web login via mongoose would be helpful.
Finally: I need to learn how to place the data retrieved into the web page. But that's mostly a problem of putting the returned data into the arrays required for the flot library.
Updated by Hammel 22 days ago
The pistoreWebStatus() is written and works for returning JSON data. But it calls functions in utils.c that don't do anything yet (totals for all systems). It also needs to iterate the drives to get per-drive data.
Note: this is done, so now I can implement the JS side described above.
Updated by Hammel 16 days ago
This is now complete as much as needed for now. The interface is much nicer, though could be cleaned up even more. I'm not using the Flot library at it's best, but that's details I can live without for now.
What's left:- Disable the timer and thread that is generated the PNG image.
- Remove any code associate with the PNG generation that can't be migrated to use with the WebStatus API (I doubt there is much there that isn't already in use).
- Clean up any unneeded functions associated with the png thread.
- Move js.html to index.html
- Make sure support for js.html in pistoreweb.c is migrated to index.html
I think that's it. After this is committed and pushed, create a new package and install it to the production server so we can see it on a real system. This may show some additional work is needed when displaying many drives.