feat: adds on hover popup on the side menu

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']

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>

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

assets/components/PastTime.vue

@@ -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>

assets/components/SideMenu.vue

@@ -87,9 +87,19 @@
             </div>
           </router-link>
           <template #content>
-            <div class="tooltip">
+            <div>
-              This is data
+              <span class="has-text-weight-light"> RUNNING </span>
-              <button>test</button>
+              <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>

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>