DietPi-Software | Web Dashboard for DietPi

[Fourdee]

ADMIN EDIT

Dashboard is available for testing, see https://github.com/ravenclaw900/DietPi-Dashboard#installation for instructions.

#

Base:

• Must not require a webserver stack (implies self contained website). eg: Websockets and Bootstrap/JS
• Lightweight (minimal cpu and memory usage)

Main DietPi programs for web implementation:

• DietPi-Software
• DietPi-Config

Additional features:

• Terminal window

[rhkean]

brainstorming..... this can probably be done with python. Couchpotato and NzbHydra use python and have decent simple web interfaces. But, so does netdata and it's written in C.

[tr0yspradling]

I plan on taking a stab at this with Python/Flask.

[Fourdee]

@tr0yspradling

I plan on taking a stab at this with Python/Flask.

Excellent :+1:

We will need to change alot of the DietPi code to truly accommodate the web dashboard, but either myself or @rhkean can do this alongside @tr0yspradling's work. If you have any progress, let us know.

[Fourdee]

@rhkean

But, so does netdata and it's written in C.

YMPD is also written in C: https://github.com/notandy/ympd

Standalone MPD Web GUI written in C, utilizing Websockets and Bootstrap/JS http://www.ympd.org

[WolfganP]

Great idea. I think that the system will benefit more if it's designed extensible from the start, so it can be tailored for custom system commands or headless operation (ie one button remote system shutdown/restart, modules commands -ie minidlna db rescan-, etc)

[Fourdee]

@WolfganP

Yep, ideally i'd like a system where users can either use the web dash, or, terminal for all DietPi features.
So for example, we could have a DietPi-Software page where the user can install software from a list, then follow a link to the docs. Basically a duplicate of the whiltail menu, but in a better web format. Possibilities are endless.

I recently added code that allows for automated command line installations:

/DietPi/dietpi/dietpi-software install KODI HIFI

But I/we will need help with this, I can do the bash/unix side, but i lack the skills for the web side.

[rhkean]

@WolfganP Yep, ideally i'd like a system where users can either use the web dash, or, terminal for all DietPi features.

terrific idea. The trick, I think, will come in finding a way to do this that maintains the small footprint that is at the heart of DietPi

[WolfganP]

Ideally it should just be a different UI for using the existing installation / config scripts, with the ability to add user scripts / commands / recipes somehow (to avoid reinventing the wheel and having to reimplement the current / tuned dietpi-* specific scripts).

[tr0yspradling]

I've created DietPi-Dashboard. It's a skeleton project at the moment, but I'll have some progress up soon.

I've decided to use CherryPy instead of Flask, but I'm curious, should we reverse proxy through NGINX or use the standalone server with CherryPy?

[Fourdee]

@tr0yspradling

That was quick, looking forward to seeing it progress :+1:

I've decided to use CherryPy instead of Flask, but I'm curious, should we reverse proxy through NGINX or use the standalone server with CherryPy?

I would prefer it didn't required a webserver, self contained in a standalone server would be ideal.

[Fourdee]

@WolfganP

Ideally it should just be a different UI for using the existing installation / config scripts, with the ability to add user scripts / commands / recipes somehow (to avoid reinventing the wheel and having to reimplement the current / tuned dietpi-* specific scripts).

Yep. To start off with, we'll start small and see what the dash can do. In time, we can always add more to it. I have this vision of making DietPi completely web interfaced, but at this time, its just an idea. We'll see how it goes :)

[tr0yspradling]

Right now I'm working on syncing live system information with python-socketio and displaying it with Chart.js. Once I finish that, I'm going to add process & software package management.

[k-plan]

Hi,

are where any news? Thanks.

[Fourdee]

Note to self:

Libaries:

• https://www.webtoolkit.eu/wt
• http://cppcms.com/wikipp/en/page/main

IDE's:

• VS2015 + https://visualstudiogallery.msdn.microsoft.com/725025cf-7067-45c2-8d01-1e0fd359ae6e
• http://www.linuxandubuntu.com/home/8-best-ides-or-code-editors-for-linux
• https://code.visualstudio.com/

[tr0yspradling]

I'll be updating the repository tonight. I'll post back here when I do.

[tr0yspradling]

@Fourdee I considered using Crow.

[tr0yspradling]

I haven't been able to get as much done as I hoped, I had another project taking up most of my time.

Check out DietPi-Dashboard to see what's there. It needs cleaned up and reorganized a little, some of the major features aren't implemented yet.

[Fourdee]

@tr0yspradling

time

No worries :+1:

Check out DietPi-Dashboard to see what's there. It needs cleaned up and reorganized a little, some of the major features aren't implemented yet.

I'am a bit of a Python "n00b" (Its like reading an Alien language for me, with a few English letters and numbers in-between lol) , but i'll give it a whirl, run.py to launch?

[Fourdee]

Notes: Quick install deps and run:

apt-get install -y python python3 python-pip python-dev #build-essential
wget https://github.com/tr0yspradling/DietPi-Dashboard/archive/master.zip -O package.zip
unzip package.zip
rm package.zip
chmod +x -R DietPi-Dashboard-master
cd DietPi-Dashboard-master
pip install -r requirements.txt
./start

@tr0yspradling Expected?

root@DietPi:~# DietPi-Dashboard-master/run.py
from: can't read /var/mail/flask
from: can't read /var/mail/werkzeug.debug
from: can't read /var/mail/flask_socketio
DietPi-Dashboard-master/run.py: line 5: import: command not found
DietPi-Dashboard-master/run.py: line 6: import: command not found
DietPi-Dashboard-master/run.py: line 7: import: command not found
from: can't read /var/mail/project.server
from: can't read /var/mail/project.server
DietPi-Dashboard-master/run.py: line 12: syntax error near unexpected token `('
DietPi-Dashboard-master/run.py: line 12: `application = create_application(debug=True)'

[tr0yspradling]

The application depends on several python packages. The python package index can be installed with sudo apt install python-pip and the dependencies can be installed by running sudo pip install -r requirements.txt

I'm creating a virtualenv and startup script for it now. I'll update when I've finished my modifications.

[tr0yspradling]

Check DietPi-Dashboard. Executing ./start should work.

[Fourdee]

@tr0yspradling

Tried on my test rig (Odroid C2, ARM64):

root@DietPi:~/DietPi-Dashboard-master# ./start
/usr/local/lib/python2.7/dist-packages/flask/exthook.py:71: ExtDeprecationWarning: Importing flask.ext.socketio is deprecated, use flask_socketio instead.
  .format(x=modname), ExtDeprecationWarning
Traceback (most recent call last):
  File "run.py", line 10, in <module>
    from project.server import sioServer
  File "/root/DietPi-Dashboard-master/project/server/__init__.py", line 3, in <module>
    from dashboard.views import dashboard_routes
  File "/root/DietPi-Dashboard-master/project/server/dashboard/views.py", line 9, in <module>
    from diagnosticsReport import DiagnosticsReport
  File "/root/DietPi-Dashboard-master/project/server/dashboard/diagnosticsReport.py", line 2, in <module>
    import cpuinfo
  File "/usr/local/lib/python2.7/dist-packages/cpuinfo/__init__.py", line 5, in <module>
    from cpuinfo import *
  File "/usr/local/lib/python2.7/dist-packages/cpuinfo/cpuinfo.py", line 1553, in <module>
    _check_arch()
  File "/usr/local/lib/python2.7/dist-packages/cpuinfo/cpuinfo.py", line 1510, in _check_arch
    raise Exception("py-cpuinfo currently only works on X86 and some ARM CPUs.")
Exception: py-cpuinfo currently only works on X86 and some ARM CPUs.

I'll power up a RPi and try it.

[Fourdee]

@tr0yspradling

I love where this is going. This is exactly what DietPi needs. Great work :+1:

Ps. you should put "DietPi-Dashboard created by tr0yspradling/realname" in the footer ;)

[tr0yspradling]

I'll have to go through and check the supported architectures for each supported platform. I didn't think of that.

I should have done this from the start, but I'll go through and pull the data from the special file: /proc/cpuinfo

[tr0yspradling]

We should start reporting issues to the dashboard repository so it's more organized.

[Fourdee]

@tr0yspradling

We should start reporting issues to the dashboard repository so it's more organized.

Good call :+1: I'd like to add a few tickets with features I'd like to see, and discuss their implementation if thats ok?

[tr0yspradling]

Absolutely. Check your email!

[WolfganP]

Looks great guys, good work

[bhaveshgohel]

@tr0yspradling Neat and clean, that's what needed! Awesome! :+1:

[WolfganP]

@Fourdee Looking at your instructions, I think it's easier to install (and keep updated) via git

git clone https://github.com/tr0yspradling/DietPi-Dashboard.git
cd DietPi-Dashboard
pip install -r requirements.txt
./start

Anyways, I assume that the way to access the Dashboard is via a desktop browser and http://raspi-ip:9090 ?

[Fourdee]

@WolfganP

I think it's easier to install (and keep updated) via git

Yep. We prefer to download the zip instead of using git clone in dietpi-software. Reason being additional packages are required to use git clone.

http://raspi-ip:9090

Yep, thats the plan. I think the current port is 8080, but this may change.

[Fourdee]

@tr0yspradling Looks like you deleted your repo for this? https://github.com/tr0yspradling/DietPi-Dashboard

Heres the C++ version i've started: https://github.com/Fourdee/DietPi-Dashboard Managed to pull all the DietPi-Software data into c++. Can now install software from it. Time to start on the web side.

[mknrls]

@Fourdee so you still want the dashboard to be self contained meaning without using a webserver?

[Fourdee]

@mknrls

so you still want the dashboard to be self contained meaning without using a webserver?

Yep, self contained, that was the plan, try and keep it minimal. But at this stage, I am up for anything.

[Fourdee]

As much as I'd love to see this in DietPi, we currently lack the man hours to achieve this. Just not feasible at the moment.

Closing.

[ravenclaw900]

I could try and create this with Go and Svelte. I'll probably use TailwindCSS instead of Bootstrap, though.

[MichaIng]

Interesting find, I never knew that there has already been some work done on this idea, sadly discontinued. Would be awesome to revive it, basically some sort of webmin tailored for DietPi, which can potentially inherit the features of the Allo GUI as well, which, to be honest, requires a major rework to fit modern standards, also security wise. But while I learned to do HTML, CSS, JavaScript etc, I have not much experience with any real programming language, neither C++, nor Go, while I usually learn and understand it fast, when needed.

Yep, Go seems to generally fit well, or Rust (while then I'd even less of help, given the larger syntax and logic differences 😄)? No preference on the style framework on my end. While our website uses bootstrap, I actually aim to remove it, when I find time. We use only a minimal subset and overwrite many of the defaults, so much wasted code we load into browsers. But first and easier will be to eliminate jQuery 😃.

[ravenclaw900]

We use only a minimal subset and overwrite many of the defaults

That's why I prefer Tailwind, it's a utility framework instead of a component, and it supports tree-shaking. Anyway, I already had a private repository that I was working on, public now: https://github.com/ravenclaw900/DietPi-Dashboard.

[ravenclaw900]

Note to anyone who wants to compile this, make sure that you have Yarn and Go installed, then just run make in the project root. This should compile a binary for your platform, however I wrote the Makefile with Linux/Unix commands, so I'm not sure how it will run on Windows.

[ravenclaw900]

@MichaIng, @Joulinar, @fpetru, @StephanStS, could you review? I plan to also add a management page, with generic tasks like shutting down and restarting the system, and a terminal. Currently I'm just using the generic Tailwind lime colors, if you have a specific color code you'd like me to use please let me know. Also, feel free to open issues with any features that you'd like to see.

[Joulinar]

for colour code, I would recommend to use the same as on our web side/ docs.

Basically I like the idea. Especially to have a web terminal. 😃

[GvY85]

This sounds like a great idea 👍 .

@ravenclaw900 can you perhaps write a (very minimal, only a list of cli commands is enough) manual on how to install/use this so more people can test/try/give feedback?

[ravenclaw900]

SEE README FOR UPDATED INSTRUCTIONS @GvY85 Prereq:

dietpi-software install 9 16 17 188 # Install Node.js (webpage), Build-Essential (make), Git (git clone), and Go (binary), respectively
npm install -g yarn # Install Yarn package manager, for node dependencies

Now log out and log back in to register GOPATH Compiling:

rm -rf DietPi-Dashboard # Remove possibly pre-download repository
git clone https://github.com/ravenclaw900/DietPi-Dashboard # Download source code
cd DietPi-Dashboard/src/frontend # Change directories
yarn # Install dependencies
cd ../.. # Change directories
make # Compile binary for your platform
./dietpi-dashboard # Run binary

Now just visit http://device.IP:8080. Note that for DietPi-Software installs to work, the binary needs to be run as root.

Wow, I thought that it was a bug in the program that RAM and CPU were almost 0, stock DietPi is really lightweight.

[Joulinar]

Nice, I did a test installation. Some observation

• process overview seems to be a heavy view. At least on my test VM it's causing high CPU usage
• I did 2 test installations from software catalogue, The output window on the bottom seems to be very small. It's quite hard to read the output.
• after software installations, the other 2 options Statistics and Processes are not working anymore. It's needed to perform a full fresh of the web page. This are the messages during page reload

2021/09/03 01:27:23 http: panic serving 192.168.0.53:56438: interface conversion: interface {} is nil, not []interface {}
goroutine 45 [running]:
net/http.(*conn).serve.func1()
        /usr/local/go/src/net/http/server.go:1801 +0xb9
panic({0x673720, 0xc00014e000})
        /usr/local/go/src/runtime/panic.go:1047 +0x266
github.com/ravenclaw900/DietPi-Dashboard/lib.ServeWebsockets({0x758fc8, 0xc0000c8380}, 0x0)
        /root/DietPi-Dashboard/src/backend/lib/sockets.go:107 +0x898
net/http.HandlerFunc.ServeHTTP(0x0, {0x758fc8, 0xc0000c8380}, 0x0)
        /usr/local/go/src/net/http/server.go:2046 +0x2f
net/http.(*ServeMux).ServeHTTP(0x0, {0x758fc8, 0xc0000c8380}, 0xc0002f3900)
        /usr/local/go/src/net/http/server.go:2424 +0x149
net/http.serverHandler.ServeHTTP({0xc00014ec00}, {0x758fc8, 0xc0000c8380}, 0xc0002f3900)
        /usr/local/go/src/net/http/server.go:2878 +0x43b
net/http.(*conn).serve(0xc000080320, {0x75a060, 0xc00006ef60})
        /usr/local/go/src/net/http/server.go:1929 +0xb08
created by net/http.(*Server).Serve
        /usr/local/go/src/net/http/server.go:3033 +0x4e8

• same happen on software removal
• hehe and one more: I switch off the VM but missed to close the web page. The Statistics view is generating a graph still 🤣

Tested on Bullseye VM amd64

[ravenclaw900]

1. Yeah, that's a bit resource heavy, I'm trying to figure that out
2. Enlarged window height
3. It kept reading messages into the same struct, without trying to overwrite them (i.e. the message telling it to install software), thus it was probably still trying to un/install software whenever the page was changed. Fixed.
4. The graph is being generated in the browser, and it will keep going until it's closed

[ravenclaw900]

I just pushed a commit with a terminal window, let me know how it looks.

[ravenclaw900]

Alright, I added a few more features, and I'm hopeful for a 0.1.0 release.

[Joulinar]

ok did some testing. looks quite nice. Joining the terminal view is giving following

2021/09/06 15:08:46 Request to /ws/term (terminal)
2021/09/06 15:09:31 Couldn't get data from frontend: websocket: close 1005 (no status)
2021/09/06 15:09:37 Request to /ws/term (terminal)
2021/09/06 15:09:39 Couldn't get data from frontend: websocket: close 1005 (no status)
2021/09/06 15:09:40 Request to /ws/term (terminal)
2021/09/06 15:09:41 Couldn't get data from frontend: websocket: close 1005 (no status)
2021/09/06 15:09:48 Request to /ws/term (terminal)
2021/09/06 15:09:49 Couldn't get data from frontend: websocket: close 1005 (no status)
2021/09/06 15:09:52 Request to /ws/term (terminal)
2021/09/06 15:09:54 Couldn't get data from frontend: websocket: close 1005 (no status)

[ravenclaw900]

That's normal, it closes the connection when you leave the terminal page (as long as it's only happening when you leave the page). I'll make it use the normal exit code.

[ravenclaw900]

Version 0.1.0 released, see https://github.com/ravenclaw900/DietPi-Dashboard/releases/tag/v0.1.0 for precompiled binaries.