From 811686866938ce65c84a73d4006fcf428d24f447 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 25 Apr 2023 14:41:45 -0700
Subject: [PATCH] feat: makes swarm id lighter (#2145)

* feat: makes swarm id lighter

* fix: add swarm to title id
---
 assets/components/LogViewer/ContainerTitle.vue |  2 +-
 assets/components/SideMenu.vue                 |  6 +++++-
 assets/models/Container.ts                     | 12 ++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/assets/components/LogViewer/ContainerTitle.vue b/assets/components/LogViewer/ContainerTitle.vue
index 3d8a82a6..82e5b46c 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 16de1cf5..b5060eec 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 865400f3..244e3d01 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() {