Repository: amir20/dozzle (language: go)

Issue:
Separate the stopped containers from the running ones
**Is your feature request related to a problem? Please describe.**
When you have a lot of containers running, many with crashes, showing them together is extremely messy

**Describe the solution you'd like**
It would be great if you separate them in a separate list. You can even make that optional (show together or separate).

**Describe alternatives you've considered**
N/A

**Additional context**
![image](https://user-images.githubusercontent.com/794673/219252323-8145894e-f56b-4c77-9545-af3a7602cec8.png)



Discussion / hints:
This is interesting. I guess I just assumed people would clean up their stopped containers. But I think it makes sense. Let's keep this open and hopefully I'll get to it. 
@Enissay what do you think of `amir20/dozzle:pr-2058`? I group to different sections now. But only if the option to show stopped containers is enabled. 


See screenshot on #2058 

I am not sure if I like it. My use case is to look at similar containers regardless of running or not. 
Good enough...

If you don't like it, can you make the split optional ? so the user can choose between the two ?
Offtopic question, what is the use of the `amir20/echo` image ? I could not tell from the [dockerfile](https://hub.docker.com/layers/amir20/echo/latest/images/sha256-8f8d6f9bc3a32e799fab5ef3db931922a6c1bbabafad48cfdbff7b6651418501?context=explore)... I am curious as it seems useful ^^
> Good enough...
> 
> If you don't like it, can you make the split optional ? so the user can choose between the two ?

I am trying to keep all the different options to a minimum 😆. Otherwise, I'd have to support too many combinations. 

Let me think about it. Have you played with it? I personally don't have stopped containers enabled often so maybe it doesn't matter. 

> re: amir20/echo

I use if for my testing. Code is at https://github.com/amir20/echo. I can do 

```
docker run -i amir20/echo < lorem.txt
```

And it will randomly choose logs from `lorem.txt` and send it to `stdout`. When I was doing JSON support I had to check a lot of different outputs so I needed something more robust. 

It doesn't look like I have the time to spent on this. I think I want to redesign some of the menu on the left but for now I will close this. 

> Have you played with it?

You can use the `pr-2058` for now. 



I saw another tool just put the running containers on top. I'll do the same. 

Fix patch:
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index a1c2638c55e8..16de1cf5d0a3 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -56,7 +56,7 @@
     </div>
     <p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
     <ul class="menu-list is-hidden-mobile" v-if="ready">
-      <li v-for="item in visibleContainers" :key="item.id" :class="item.state">
+      <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
         <router-link
           :to="{ name: 'container-id', params: { id: item.id } }"
           active-class="is-active"
@@ -101,6 +101,18 @@ const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
 
+const sortedContainers = computed(() =>
+  visibleContainers.value.sort((a, b) => {
+    if (a.state === "running" && b.state !== "running") {
+      return -1;
+    } else if (a.state !== "running" && b.state === "running") {
+      return 1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  })
+);
+
 const activeContainersById = computed(() =>
   activeContainers.value.reduce((acc, item) => {
     acc[item.id] = item;


Test patch: