From be9735c955e1c260faa44459fc3f82589fc29293 Mon Sep 17 00:00:00 2001
From: Jiajie Chen <c@jia.je>
Date: Thu, 14 Mar 2024 17:09:43 +0800
Subject: [PATCH] feat: display elapsed and creation time

---
 frontend/package.json             |  1 +
 frontend/src/pages/jobs/index.vue | 21 ++++++++++++++++++++-
 frontend/yarn.lock                | 12 ++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 574509d..6e13b14 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "ansi_up": "^6.0.2",
     "axios": "^1.6.7",
     "core-js": "^3.34.0",
+    "javascript-time-ago": "^2.5.9",
     "pretty-bytes": "^6.1.1",
     "roboto-fontface": "*",
     "vue": "^3.3.0",
diff --git a/frontend/src/pages/jobs/index.vue b/frontend/src/pages/jobs/index.vue
index aaf4006..9b6383d 100644
--- a/frontend/src/pages/jobs/index.vue
+++ b/frontend/src/pages/jobs/index.vue
@@ -61,6 +61,19 @@
               >
               Created
             </v-chip>
+            <div
+              class="d-flex align-center">
+              <v-icon size="x-small" style="margin-right: 5px;">mdi:mdi-clock-outline</v-icon>
+              <!-- https://stackoverflow.com/a/1322771/2148614 -->
+              {{ new Date((item as Job).elapsed_secs * 1000).toISOString().substring(11, 19)  }}
+            </div>
+            <div class="d-flex align-center">
+              <v-icon size="x-small" style="margin-right: 5px;">mdi:mdi-calendar</v-icon>
+              {{ new TimeAgo('en-US').format(new Date((item as Job).creation_time)) }}
+              <v-tooltip activator="parent" location="bottom">
+                {{ new Date((item as Job).creation_time) }}
+              </v-tooltip>
+            </div>
           </template>
           <template #item.job="{ item }">
             <router-link :to="{ path: `/jobs/${(item as Job).id}` }">
@@ -111,6 +124,10 @@
 <script lang="ts">
   import axios from 'axios';
   import { hostname } from '@/common';
+  import TimeAgo from 'javascript-time-ago'
+  import en from 'javascript-time-ago/locale/en'
+
+  TimeAgo.addDefaultLocale(en)
 
   interface LoadItemsOpts {
     page: number;
@@ -126,11 +143,13 @@
     arch: string;
     git_branch: string;
     git_sha: string;
+    elapsed_secs: number;
+    creation_time: string;
   }
 
   export default {
     data: () => ({
-      itemsPerPage: 10,
+      itemsPerPage: 25,
       headers: [
         { title: 'Status', key: 'status', sortable: false },
         { title: 'Job', key: 'job', sortable: false },
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 64da253..f8034ad 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1758,6 +1758,13 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+javascript-time-ago@^2.5.9:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.5.9.tgz#3c5d8012cd493d764c6b26a0ffe6e8b20afcf1fe"
+  integrity sha512-pQ8mNco/9g9TqWXWWjP0EWl6i/lAQScOyEeXy5AB+f7MfLSdgyV9BJhiOD1zrIac/lrxPYOWNbyl/IW8CW5n0A==
+  dependencies:
+    relative-time-format "^1.1.6"
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -2166,6 +2173,11 @@ regexpp@^3.0.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+relative-time-format@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.1.6.tgz#724a5fbc3794b8e0471b6b61419af2ce699eb9f1"
+  integrity sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"