Show date time on hover over time items (#756)

Adds a tooltip that shows the date and time when hovering over "created at" times.

web/package.json

@@ -20,6 +20,7 @@
     "@kyvg/vue3-notification": "2.3.4",
     "@meforma/vue-toaster": "1.2.2",
     "ansi-to-html": "0.7.2",
+    "floating-vue": "2.0.0-beta.5",
     "fuse.js": "6.4.6",
     "humanize-duration": "3.27.0",
     "javascript-time-ago": "2.3.10",

web/src/components/build-feed/BuildFeedItem.vue

@@ -7,7 +7,7 @@
       <div class="flex flex-col mt-2">
         <div class="flex space-x-2 items-center">
           <Icon name="since" />
-          <span>{{ since }}</span>
+          <span v-tooltip="'Created at ' + created">{{ since }}</span>
         </div>
         <div class="flex space-x-2 items-center">
           <Icon name="duration" />
@@ -40,9 +40,9 @@ export default defineComponent({
 
   setup(props) {
     const build = toRef(props, 'build');
-    const { since, duration, message } = useBuild(build);
+    const { since, duration, message, created } = useBuild(build);
 
-    return { since, duration, message };
+    return { since, duration, message, created };
   },
 });
 </script>

web/src/components/repo/build/BuildItem.vue

@@ -60,7 +60,7 @@
 
         <div class="flex space-x-2 items-center min-w-0">
           <Icon name="since" />
-          <span class="truncate">{{ since }}</span>
+          <span v-tooltip="'Created at ' + created" class="truncate">{{ since }}</span>
         </div>
       </div>
     </div>
@@ -92,9 +92,9 @@ export default defineComponent({
 
   setup(props) {
     const build = toRef(props, 'build');
-    const { since, duration, message, prettyRef } = useBuild(build);
+    const { since, duration, message, prettyRef, created } = useBuild(build);
 
-    return { since, duration, message, prettyRef, buildStatusColors };
+    return { since, duration, message, prettyRef, buildStatusColors, created };
   },
 });
 </script>

web/src/compositions/useBuild.ts

@@ -97,5 +97,15 @@ export default (build: Ref<Build | undefined>) => {
     return build.value?.ref;
   });
 
-  return { since, duration, message, prettyRef };
+  const created = computed(() => {
+    if (!build.value) {
+      return undefined;
+    }
+
+    const start = build.value.created_at || 0;
+
+    // sv-SE is in format YYYY-MM-DD HH:m:s
+    return new Date(start * 1000).toLocaleString('sv-SE');
+  });
+  return { since, duration, message, prettyRef, created };
 };

web/src/main.ts

@@ -1,6 +1,8 @@
 import 'windi.css';
+import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
 import '~/compositions/useFavicon';
 
+import { Tooltip, VClosePopper, VTooltip } from 'floating-vue';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 
@@ -13,6 +15,12 @@ const app = createApp(App);
 
 app.use(router);
 app.use(notifications);
+
+app.directive('tooltip', VTooltip);
+app.directive('close-popper', VClosePopper);
+app.component('v-tooltip', Tooltip); // eslint-disable-line vue/component-definition-name-casing
+app.component('VTooltip', Tooltip);
+
 app.use(createPinia());
 app.mount('#app');
 

web/src/views/repo/build/BuildWrapper.vue

@@ -51,7 +51,7 @@
         <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="since" />
-            <span>{{ since }}</span>
+            <span v-tooltip="'Created at ' + created">{{ since }}</span>
           </div>
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="duration" />
@@ -153,7 +153,7 @@ export default defineComponent({
     }
 
     const build = buildStore.getBuild(repoOwner, repoName, buildId);
-    const { since, duration } = useBuild(build);
+    const { since, duration, created } = useBuild(build);
     provide('build', build);
 
     const { message } = useBuild(build);
@@ -245,6 +245,7 @@ export default defineComponent({
       cancelBuild,
       restartBuild,
       goBack: useRouteBackOrDefault({ name: 'repo' }),
+      created,
     };
   },
 });