From 2dbbe47c5cd21a362d320419788e68812bb7a24c Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 27 Apr 2023 12:31:12 -0700
Subject: [PATCH] chore(refactor): creates new popup component for containers

---
 assets/components.d.ts         |  2 ++
 assets/components/SideMenu.vue | 15 +--------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 76649017..b5b5206a 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -18,8 +18,10 @@ declare module '@vue/runtime-core' {
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerHealth: typeof import('./components/LogViewer/ContainerHealth.vue')['default']
+    ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    copy: typeof import('./components/LogViewer/ContainerStat copy.vue')['default']
     DateTime: typeof import('./components/DateTime.vue')['default']
     DistanceTime: typeof import('./components/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 5541b1c1..f4cbe098 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -83,20 +83,7 @@
             </div>
           </router-link>
           <template #content>
-            <div>
-              <span class="has-text-weight-light"> RUNNING </span>
-              <span class="has-text-weight-semibold">
-                <distance-time :date="item.created" strict :suffix="false"></distance-time>
-              </span>
-            </div>
-            <div>
-              <span class="has-text-weight-light"> LOAD </span>
-              <span class="has-text-weight-semibold"> {{ item.getLastStat().snapshot.cpu }}% </span>
-            </div>
-            <div>
-              <span class="has-text-weight-light"> MEM </span>
-              <span class="has-text-weight-semibold"> {{ formatBytes(item.getLastStat().snapshot.memoryUsage) }} </span>
-            </div>
+            <container-popup :container="item"></container-popup>
           </template>
         </popup>
       </li>