Repository: amir20/dozzle (language: go)

Issue:
Idea: don't show hash in container names
**Is your feature request related to a problem? Please describe.**

When having lots of containers, it can look like word salad, and cluttered or "noisy" trying to look through the list. (I know there's a search but sometimes I just want to quickly scan with my eyes), and make finding the container you want more "eye-fatiguing" than necessary.

**Describe the solution you'd like**

Since hashes aren't often necessary for cases like this, it would be nice to have an option for users who don't choose to see the hashes. Perhaps default that option to show the full hash as it currently does, and then the user can go into the settings and choose to hide them.

Then you'd be left basically with just the name of the container, and if in a swarm, the swarm name and container name, both of which are actual "human readable" words rather than random chars.

**Additional context**

Here's an example screenshot of my list. Look at all that noisy, unhelpful, ugly random hashing in each container. :)

![image](https://user-images.githubusercontent.com/39491297/233873210-10a6b4bd-d4d5-4255-bc3f-da196d50483d.png)

As an example, I drew a line through the hashes to show what to hide. IN the case of more than 1 of the same container, an idea may be to only show the 1st letter of the hash to distinguish it (see the second item with a line through it that shows only the first letter of the hash).



Discussion / hints:
Wow you are running a lot of containers. 

> Since hashes aren't often necessary for cases like this, it would be nice to have an option for users who don't choose to see the hashes. Perhaps default that option to show the full hash as it currently does, and then the user can go into the settings and choose to hide them.


I generally avoid multiple options in settings. The reason being maintenance. It's just hard to support different combinations of settings for all users. So I try to keep Dozzle as simple as possible.  Instead, I try for best defaults that makes everybody happy and only introduce different flags when really needed. 


Perhaps, Dozzle should just be smart to _dim_ the hash. So not completely hide it, but make it darker so that it is easier for the eye to scan.  That way it just works for everybody. 

What do you think? 

I'll try to make something up. 



Something like this 

<img width="721" alt="Screenshot 2023-04-24 at 8 48 46 AM" src="https://user-images.githubusercontent.com/260667/234049265-072bd886-e2e1-418a-81dc-199c3f3ee77b.png">

That's not too bad, I think I could live with that! lol

lol, yea, I run lots of containers. I do both a HTPC setup, ebooks, and even some development type stuff. Actually, it always kinda surprises me when people tell me that I run a lot of containers, because I'm just like, wait.... how come you DON'T?? haha

Fix patch:
diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index 3d8a82a681b4..82e5b46c127d 100644
--- a/assets/components/LogViewer/ContainerTitle.vue
+++ b/assets/components/LogViewer/ContainerTitle.vue
@@ -6,7 +6,7 @@
         <cil:x-circle v-else-if="container.health == 'unhealthy'" />
         <cil:circle v-else />
       </span>
-      {{ container.name }}
+      {{ container.name }}<span v-if="container.isSwarm">.{{ container.swarmId }}</span>
       <span class="tag is-dark">{{ container.image.replace(/@sha.*/, "") }}</span>
     </span>
   </div>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 16de1cf5d0a3..b5060eecd3ce 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -64,7 +64,8 @@
         >
           <div class="container is-flex is-align-items-center">
             <div class="is-flex-grow-1 is-ellipsis">
-              {{ item.name }}
+              <span class="has-text-weight-semibold">{{ item.name }}</span>
+              <span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">.{{ item.swarmId }}</span>
             </div>
             <div class="is-flex-shrink-1 is-flex icons">
               <div
@@ -133,6 +134,9 @@ aside {
   }
 }
 
+.has-light-opacity {
+  opacity: 0.5;
+}
 .logo {
   width: 122px;
   height: 54px;
diff --git a/assets/models/Container.ts b/assets/models/Container.ts
index 865400f3e2e7..244e3d01d305 100644
--- a/assets/models/Container.ts
+++ b/assets/models/Container.ts
@@ -4,9 +4,13 @@ import { Ref } from "vue";
 
 type Stat = Omit<ContainerStat, "id">;
 
+const SWARM_ID_REGEX = /\.([a-z0-9]{25})$/i;
+
 export class Container {
   public stat: Ref<Stat>;
   private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;
+  public readonly swarmId: string | null = null;
+  public readonly isSwarm: boolean = false;
 
   constructor(
     public readonly id: string,
@@ -20,6 +24,14 @@ export class Container {
   ) {
     this.stat = ref({ cpu: 0, memory: 0, memoryUsage: 0 });
     this.throttledStatHistory = useThrottledRefHistory(this.stat, { capacity: 300, deep: true, throttle: 1000 });
+
+    const match = name.match(SWARM_ID_REGEX);
+
+    if (match) {
+      this.swarmId = match[1];
+      this.name = name.replace(`.${this.swarmId}`, "");
+      this.isSwarm = true;
+    }
   }
 
   public getStatHistory() {


Test patch: