SudoBox FF#5

image

Fellow Boxers,

The SudoBox team have been working hard over the past few weeks to pull together a sleek, elegant looking and interactive dashboard. Over the next few weeks we would like to share each section and get your input to try and make it even better, we love hearing all your great ideas!

Alongside a web UI/UX redesign our team has been learning a new CSS framework to help with the production of SudoBox. Previously, the front end had been coded in React JS using CSS and bootstrap to create the layout, styling and buttons. They have now taken the time to learn Tailwind CSS. This is a huge step forward for SudoBox as it improves the workflow and speeds up design. It also frees up the design of the dashboard as we are now not constrained by the limiting features of CSS and bootstrap so we can now design our own components and use them throughout the project.

Let’s start off with the “Installed Apps” page. Here you will get a clear overview of all your installed apps and even have full control over each app. You will be able to stop, start, restart, update, uninstall or even visit the apps web UI at just a click of a button! From here you will also be able to monitor your most important stats at just a glance, being able to see which container might be using all of your resources. We have added a very simple but effective coloured live status band next to each container to quickly see which app is running, stopped or even unhealthy. To make it easier, we have added a sort, filter and search function to the list to narrow down on the container you are looking for.

Hang on what’s this right here? That’s right, this is the “Container Dashboard”. You will be greeted with this after you’ve selected the container from your “Installed Apps” page in the SudoBox Dashboard. We wanted you to see all the important information you need in a clear and intuitive layout whilst having that ease of access. Everything you need to manage your container is easily visible including its status, stats and even container logs. We couldn’t resist putting graphs in! This will help you to observe any issues at a glance and react to fix the situation instantly. Here you can also control your container by stopping, starting, updating or even removing it.

When setting up and maintaining applications we know that it is important to have access to the configuration files. To help you with this we have given you quick access to each application’s files and folders. From here you will be able to browse through and edit files. For those Boxers that prefer more of a visual look, you can see your file structure here as icons in the SudoBox file explorer. With this view, you are restricted with what you can achieve which is why we also have a simple toggle to change views.

Below you can see the list view. In this layout, you can get a lot more information in regards to permissions and size. There’s also a more options button, where you will be able to move, copy, duplicate, delete files/folders or even update permissions. There is much more control in this view and we wanted to be able to give you Boxers that choice.

As you can see there are more options across the top navigation but these pages will come in the following project updates so keep tuned!

We have gone with a predominately dark theme which is the general consensus and let’s face it if you’re into SudoBox, you’re more than likely a night owl anyway! We have stuck strongly with our SudoBox colours, nothing too sharp so you don’t get distracted. Further down the project pipeline, we plan on offering different themes and all sorts of plugins to better suit your needs.

Please, do get involved and comment below with your thoughts and ideas to let us know what you think. Is there anything you like, anything you would change or add? More posts are to come to give you more detail in terms of design and we’ll be breaking down each page in detail (to some extent) .

This is our biggest post yet and it doesn’t stop there as we would also like to announce a new member to the Core SudoBox Team @Demondamz. We did a shout out on the last FF to show our gratitude for their support role, helping the team and users in many ways. Always going above and beyond in terms of commitment and loyalty to SudoBox. Demondamz quickly felt like part of the project and fit right in. So welcome on board and here’s to the many many hours of collaborative work!

Please welcome Demondamz and hit us back in the comments below.

10 Likes

Ohhh, this makes me feel all tingly in my special place. :slight_smile:

Nice work so far, and I’m so excited to try it out. I’m a docker novice even after using PG for two years, so things like how to properly update containers have always been a point of confusion for me. To that end, I was excited to see how easy the SudoBox container dashboard appears to make updating!

3 Likes

Looking great! Keep up the good work :ok_hand:

2 Likes

Welcome Demondamz and GOOD WORK EVERYONE.

Waiting with baited breath to get testing.

So long, farewell Portainer hello Container Dash.

dP

1 Like

Greetings and welcome Demondamz.

I am unsure how to contain my excitement over this FactFriday.

Some Questions if one can be so kind:

Out of curiosity, can app image parameters be edited in this web UI? I Love the graphs!

“Hub” tab I imagine refers to custom images?

The article mentions plugins (where it talks of different themes). What are they exactly?

Opinions:
Love the list view! Even has permission info.

1 Like

Same here…

Also, new to PG and containers with which I am already more then happy (still learning the nuts and bolts). Seeing this only makes me salivate.