Pi-hole Web Interface: The Next Generation
We have been working on a new Web interface for Pi-hole (referenced internally as Next Gen Admin or NGAdmin). The existing interface built off of AdminLTE has served us well, but we have grown beyond the capabilities of an existing template. We’re also looking to implement an HTTP API.
This new interface is open source and we welcome your contributions as we have just made the repo public. Read on to learn more or check out a demo of the new interface here.
Why Are We Developing A New Interface?
This new interface shares a lot of the visual appearance with the existing one, but it has a lot more going on underneath the hood. One of the biggest benefits is that it removes the need for PHP on the server.
The new interface also:
- eliminates the reliance on server-side rendering scripts
- eliminates spaghetti code resulted from heavily modifying the base AdminLTE template
- reduces attack vectors by using JavaScript’s explicit imports instead of importing entire .php files
- makes it easier for new developers to figure out the code, which speeds up development
- makes the split between client and server code much more explicit
- allows us to easily generate fake data for testing
- includes all the benefits that come from React (ES6 JavaScript), including automatic DOM manipulations, stateful development, and component-based development
Contributing To This New Repo
If you are interested in helping develop this new interface, head on over to the GitHub repo. Even if this is your first project, we welcome all contributions.
Hello,
interestingly. Such other will be
Personally, I would keep these round charts in the new interface.
Or the user can choose himself as needed
But it’s just my opinion. I’d like it to stay that way.
Thank you
The currently shown demo is much in the works and has been started already when the dashboard query types/forwards charts have been still over time instead of pie charts, clients over time didn’t even exist and as such does not necessarily present the current state of the work. Also we experience a little bottleneck since a few months as all “core developers” are much more busy than they have been before (changing jobs, moving to new places, etc. etc.).
Currently, the mentioned HTTP API is somewhat higher in priority than the NG web interface as it doesn’t make too much sense to code on the web interface without having the API ready to hand out the requested data.
One of the major reasons, if not even No. 1 of them, of making it public was the hope to attract people to look at it and contribute. As such we only put up a working demo that is far from completion to also open up the possibility for the community to shape it as they’d like to. The best way to do this, of course, is by submitting pull requests as it will be much easier for us to “just” review changes instead of having to code it ourselves. We have one core developer who is very experienced with React, but the others are still learning it.
Hi. First comment here. Thanks for this awesome software and all the hard work that went into it. It’s a must to run on any network these days.
The reason I’m commenting is because of how passionate I am about this software. In fact, I was thinking of contributing since I’m a professional developer and open-source enthusiast. One only has 24h a day, so I choose carefully haha.
Anyway, please do not get me wrong, but I would love to join the discussion and ask some questions.
Why is it better without PHP? Of all languages, I believe it has the most programmers world wide. Also, it has great performance and unique benefits. The requirement for PHP is not experienced as a problem for users either, no? The installation handles it?
There is only one (core dev) experienced REACT. Is that smart? Its more niche than PHP. For me personally this might hold me back contributing. I don’t know REACT and as a developer for years, I have seen many niche frameworks come and go. Extra overhead for software. New lingo for devs. Zero benefit for users.
FTL collects and saves data right? PHP reads and interprets? Html/css/js presents, no? How will REACT (js gui framework) replace PHP. Will FTL send it all client-side for processing? Aka, less server power needed but more client-power needed? More data traffic too? I like running pi-hole on a decent powerful server, and with PHP you can cronjob tougher tasks and save results server-side. Personally I prefer that. (running the web gui on apache too).
I think a fresh start is great. Lessons are learned and the software has evolved. Get rid of legacy. But stick with a beautiful simplistic web gui, based on a powerful api so others can fork or make their own. But based on proven and widely used standards. That is my opinion.
Anyway, just me thinking aloud. Please dont see this as an insult or unhappy “customer”. I love pi-hole! Really do.
The Query Log loads in data from an endpoint here:
That line calls this function to get the query data from the API:
If you want to have real-time updates, we should implement that using web sockets. We could use server-side events, but that’s not implemented in IE or Edge whereas web sockets are. Ajax would just mean we have to keep a long or short-poll connection to the server, which is not as nice or clean as the first two solutions.
Could you possibly add a few lines to the readme with a developer quickstart guide? This seems like a great project to get familiar with React, but I am a bit out of the loop on the details with the node toolchain. A few quick points on how to build a dev environment would be great.