feat: makes swarm id lighter (#2145)

* feat: makes swarm id lighter

* fix: add swarm to title id

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>

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;

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() {