From e6efe6ff591c82db4bffafcaa8c748407137c06c Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 27 Apr 2023 11:07:08 -0700
Subject: [PATCH] feat: adds on hover popup on the side menu

---
 assets/components.d.ts                        |  4 +++
 .../{RelativeTime.vue => DateTime.vue}        |  0
 assets/components/DistanceTime.vue            | 27 +++++++++++++++++++
 assets/components/LogViewer/LogDate.vue       |  2 +-
 assets/components/PastTime.vue                | 19 -------------
 assets/components/SideMenu.vue                | 16 ++++++++---
 assets/pages/index.vue                        |  2 +-
 7 files changed, 46 insertions(+), 24 deletions(-)
 rename assets/components/{RelativeTime.vue => DateTime.vue} (100%)
 create mode 100644 assets/components/DistanceTime.vue
 delete mode 100644 assets/components/PastTime.vue

diff --git a/assets/components.d.ts b/assets/components.d.ts
index e9ef3bea..8d6bd05c 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -12,12 +12,15 @@ declare module '@vue/runtime-core' {
     'Carbon:caretDown': typeof import('~icons/carbon/caret-down')['default']
     'Cil:checkCircle': typeof import('~icons/cil/check-circle')['default']
     'Cil:circle': typeof import('~icons/cil/circle')['default']
+    'Cil:clock': typeof import('~icons/cil/clock')['default']
     'Cil:columns': typeof import('~icons/cil/columns')['default']
     'Cil:findInPage': typeof import('~icons/cil/find-in-page')['default']
     'Cil:xCircle': typeof import('~icons/cil/x-circle')['default']
     ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
     ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
+    DateTime: typeof import('./components/DateTime.vue')['default']
+    DistanceTime: typeof import('./components/DistanceTime.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
     FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
@@ -28,6 +31,7 @@ declare module '@vue/runtime-core' {
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
     LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
     LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
+    LogTime: typeof import('./components/LogViewer/LogTime.vue')['default']
     LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
     'Mdi:dotsVertical': typeof import('~icons/mdi/dots-vertical')['default']
diff --git a/assets/components/RelativeTime.vue b/assets/components/DateTime.vue
similarity index 100%
rename from assets/components/RelativeTime.vue
rename to assets/components/DateTime.vue
diff --git a/assets/components/DistanceTime.vue b/assets/components/DistanceTime.vue
new file mode 100644
index 00000000..450ed683
--- /dev/null
+++ b/assets/components/DistanceTime.vue
@@ -0,0 +1,27 @@
+<template>
+  <time :datetime="date.toISOString()">{{ text }}</time>
+</template>
+
+<script lang="ts" setup>
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
+
+const {
+  date,
+  strict = false,
+  suffix = true,
+} = defineProps<{
+  date: Date;
+  strict?: boolean;
+  suffix?: boolean;
+}>();
+
+const text = ref<string>();
+function updateFromNow() {
+  const fn = strict ? formatDistanceToNowStrict : formatDistanceToNow;
+  text.value = fn(date, {
+    addSuffix: suffix,
+  });
+}
+useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
+</script>
diff --git a/assets/components/LogViewer/LogDate.vue b/assets/components/LogViewer/LogDate.vue
index 17eb7218..e324efce 100644
--- a/assets/components/LogViewer/LogDate.vue
+++ b/assets/components/LogViewer/LogDate.vue
@@ -1,5 +1,5 @@
 <template>
-  <relative-time :date="date" class="date"></relative-time>
+  <date-time :date="date" class="date"></date-time>
 </template>
 <script lang="ts" setup>
 defineProps<{
diff --git a/assets/components/PastTime.vue b/assets/components/PastTime.vue
deleted file mode 100644
index 9bd78f08..00000000
--- a/assets/components/PastTime.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <time :datetime="date.toISOString()">{{ text }}</time>
-</template>
-
-<script lang="ts" setup>
-import formatDistance from "date-fns/formatDistance";
-
-const { date } = defineProps<{
-  date: Date;
-}>();
-
-const text = ref<string>();
-function updateFromNow() {
-  text.value = formatDistance(date, new Date(), {
-    addSuffix: true,
-  });
-}
-useIntervalFn(updateFromNow, 30_000, { immediateCallback: true });
-</script>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index 9d9972f2..5c6acf64 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -87,9 +87,19 @@
             </div>
           </router-link>
           <template #content>
-            <div class="tooltip">
-              This is data
-              <button>test</button>
+            <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"> {{ item.getLastStat().snapshot.memory }} </span>
             </div>
           </template>
         </popup>
diff --git a/assets/pages/index.vue b/assets/pages/index.vue
index 6983df2b..e7d6fe6e 100644
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -65,7 +65,7 @@
             <span class="name">{{ item.name }}</span>
 
             <div class="subtitle is-7 status">
-              <past-time :date="item.created"></past-time>
+              <distance-time :date="item.created"></distance-time>
             </div>
           </router-link>
         </div>