Feature #1060
closed
PiStore needs store manager web UI
Added by Hammel over 1 year ago.
Updated 3 months ago.
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
It should also display (but not configure)
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
- Severity changed from 03 - Medium to 01 - Critical
- 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.
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.
Next up:
Save registration UUID.Disable further registrations.Test front end UI
Need to handle if more than one ironman responds. For now, just accept a single ironman, re: the first to respond.
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).
This essentially works. There is some cleanup I could do to make it pretty.
- Make the side links for mount points top or bottom justified.
- Add css like I have on my source directories to make the directory listings more interesting looking.
- % Done changed from 20 to 90
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.
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.
- Subject changed from Need store manager web UI to PiStore needs store manager web UI
- Description updated (diff)
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.
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.
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.
- Status changed from In Progress to Closed
- % Done changed from 90 to 100
All changes tested on hardware, both pistore test system and mythbox production system. No problems found yet.
All code committed and pushed.
Closing issue.
- Related to Bug #1158: Server crashes when used in production. added
Also available in: Atom
PDF
Updated by Hammel about 1 year ago