Various UI changes in progress

[JDiPierro]

Hey there,

First off let me just say.. Wow! Puffin Rocks!

I discovered it a few days ago on Kickball/awesome-selfhosted while searching for something to manage docker applications on my home server and fell in love with it. I’ve been hacking at it over the past weekend and I’d like to show you my changes and see what you think.

On the main page I restyled the application thumbnails in a way that I find easier to browse.

The My Applications page uses a new card that includes controls for each of the running applications.

The My Applications page now also shows applications that the user has previously started but are currently stopped (applications that have created volumes actually)

On the Application page its readme is displayed inside a tabbed panel.

A logged in user’s application page includes additional tabs that show information about running containers, volumes, and backups. The application controls are now located at the top of the page.

On the containers tab I’d like to be able to click “Logs” and see the docker-compose logs for that container with streaming updates. I’d also like to show memory/cpu usage stats.

The Volumes tab doesn’t show much right now. I’d like to get disk usage stats

The backup tab lists all the backups. This can be kinda slow right now since the backup module spins up the backup application to get the list. I was thinking about extending the backup module to track backups in the database. I’d also like to make the Restore/Download/Delete buttons functional.

I noticed the other issue about separating the UI from the API. I was thinking of playing around with Flask-RESTPlus.. but that's a topic for another issue :)

Thanks for building this awesome piece of tech! If there's specific changes you like I can pull them out into smaller pull requests, just let me know.

~ Justin

[loomchild]

Hi, thanks a lot for nice words and your help, your ideas rock :)

Currently I am sort of busy, but I will take a closer look at them over the weekend.

As for the backup - I agree it's slow, but I need to spin the container to be able to distribute Puffin over multiple machines. I don't quite like the idea with storing backups in database, because it could easily go out of sync with the disk. I also have some ideas how to achieve it differently, it just wasn't a priority for me right now since backup list screen is rarely used. I am always open for discussion.

I have a little question out of curiosity - I see some new applications on your screenshots - are they real applications that you are running on your own instance of Puffin, is it publicly available anywhere?

[loomchild]

Sorry for no reply - still no time to look into this, will try to do it this weekend.

[loomchild]

Hi Justin,

Sorry for late reply - I was busy working on Sojourner project, but I should finish soon and re-focus on Puffin.

Yeah, please feel free to start pushing your pull-requests, the smaller / more atomic the better. Also, did you share your fork, so I can take a look how it works?

General comment:

It looks very nice. Hovewer, my feeling is (I might be wrong) that some features seem a bit advanced and I intentionally try to keep the software simple and minimalist for the end user. Could we discuss them one-by-one to see what kind of need they are trying to solve? Perhaps they can be implemented as console options or in some sort of admin interface?

Main page:

• looks great.

My Applications:

• I would keep the app description in addition to the controls
• Do the controls slow down the interface by any chance, since I need to query the status for each of them?
• The started applications are stored in the database in case of crash, perhaps I can keep track of all applications run by the users there as well. This way there's no need to rely on existence of volumes.
• Container counter seems a bit too advanced, perhaps this information can be hidden by default. Why do you need it?

Application Page:

• I find it a bit too techy to display the info about running containers, volumes and backups, it doesn't seem to be that useful to the end-user. Could you tell me more how do you use it? Perhaps it could be hidden a bit more, in some sort of advanced tab? On the other hand if you find it useful, perhaps we can add it now and evaluate later.

I am also interested how did you add new applications, since for a long time I am planning to add support for custom remote app repositories - would that be useful?

[JDiPierro]

Hi Jarek,

No worries on the delay; it was the holiday season and New Years after all :) Also Happy New Year!

My fork should be accessible over here and my changes are under the branch ui_rework.

After some more time I understand and agree with keeping it simpler for the end-user. When I found Puffin I was looking for something to manage containers on my home server and as a more technically-advanced user (and a devops engineer :P) I wanted to see more metrics about the running applications. I actually decided on Rancher for managing my home server.

My Applications Page:

Do the controls slow down the interface by any chance, since I need to query the status for each of them?

It's been a few weeks since I ran it now but I don't believe the additional controls on the My Applications page bogged it down much. The "Backups" list on the individual application page definitely slows that down though.

The started applications are stored in the database in case of crash, perhaps I can keep track of all applications run by the users there as well. This way there's no need to rely on existence of volumes.

That would be great! I think if a user has started an application and has some amount of data stored for that app we should display it in "My Applications" so it's easier to find.

Container counter seems a bit too advanced, perhaps this information can be hidden by default. Why do you need it?

Agreed! I think I mostly wanted it to verify that things were running properly and it's just fun to see :P Probably better suited for an Admin view though.

Application Page:

I find it a bit too techy to display the info about running containers, volumes and backups, it doesn't seem to be that useful to the end-user. Could you tell me more how do you use it? Perhaps it could be hidden a bit more, in some sort of advanced tab? On the other hand if you find it useful, perhaps we can add it now and evaluate later.

I can agree with that for an end-user that's just interested in having an application running. As a server admin I feel like I'd definitely want access to the number and size of volumes/backups for individual applications and a way to see the status and CPU/Memory stats of individual containers.

Adding Applications:

I am also interested how did you add new applications, since for a long time I am planning to add support for custom remote app repositories - would that be useful?

This is one of the things that made me fall in love with Puffin: Adding new apps is super simple! I don't need a special manifest or huge base image; I just build a docker-compose and hook into the puffin networks.

In-app support for custom/multiple app repositories would be awesome! As a server admin it's technically already possible: I'd just checkout my custom app repo into /apps instead of pulling your submodule.

While playing around I added:

• Meemo - A small note-taking application built by the Cloudron folks.

Side note: The Cloudron platform is similar to Puffin but requires you to build applications using their base docker image.. which installs every language known to man ending up at >2.0GB and opening all sorts of unnecessary attack vectors.. That's why I ended up using Puffin instead of Cloudron and I built a Dockerfile for meemo based off the Alpine image: jdipierro/meemo-minimal.

• Home Assistant A home automation suite

I think I'd added Lychee at one point too but didn't end up using it.

They haven't really been tested for production use and I don't have them uploaded anywhere to share though :( If you want to support some more apps I'd suggest digging through the Awesome Self-Hosted list.. that's where I found Puffin!

Thanks for the feedback! I'll break out the changes into small PRs over the coming weeks :)

[loomchild]

Hi,

Thanks a lot for your responses.

My Applications Page:

Showing user previously started applications as you suggested is definitely a good idea IMHO. Please send a PR with your code using existence of volumes, and I will integrate it with DB. Perhaps also showing list of running application by default to logged-in user would be good.

Application Page:

I agree with your remarks about getting more info for administrators. I don't want to clutter the main user interface, but it's true it would be very interesting to create some admin-backend. Perhaps you could suggest me some existing tools that could do that (I haven't started searching much, I read about Prometheus for a bit for example)?

Adding Applications:

Thanks - simplicity of integrating simple apps was definitely my goal.

Meemo looks great and useful - perhaps I will add it to official apps. Could you share your github repo, so I can add it as submodule?

I know Awesome Self-Hosted, and there are plenty of apps I'd like to add, but I don't have enough time right now to do it beyond the apps I am using personally:) Once several catalogs are supported, I plan to simply create some sort of open multiverse repository, where anyone will be able to add apps (Wikipedia-style). It's not secure, but I never liked the curated app-store idea, it's be better to connect creators directly to users IMHO. Of course there's a lot of work on security - but again, this project is still sort of experimental.