add started, end and runtime data to list jobs table

Author: Pablo Carmona

package-lock.json

@@ -28,6 +28,7 @@
     "@patternfly/react-core": "^4.224.1",
     "open": "^8.4.0",
     "pretty-bytes": "^6.0.0",
+    "pretty-ms": "8.0.0",
     "split2": "^4.1.0",
     "strip-ansi": "6.0.0",
     "tmp": "^0.2.1",

plugins/plugin-codeflare/package.json

@@ -17,6 +17,7 @@
 import { readdir } from "fs"
 import { Profiles } from "madwizard"
 import { basename, join } from "path"
+import prettyMilliseconds from "pretty-ms"
 import { Arguments, Table } from "@kui-shell/core"
 import { setTabReadonly } from "@kui-shell/plugin-madwizard"
 
@@ -57,15 +58,27 @@ function statusColor(status: Status) {
     case "ERROR":
       return "red-background"
     case "RUNNING":
-      return "cyan-background"
+      return "blue-background"
     case "PENDING":
       return "yellow-background"
     default:
       return "gray-background"
   }
 }
 
-export default async function getProfiles(args: Arguments) {
+function formatDate(date: number): string {
+  if (!date) {
+    return "Running..."
+  }
+  return new Date(date).toLocaleString()
+}
+
+function getRunTime(start: number, end: number): string {
+  const endTime = end || Date.now()
+  return prettyMilliseconds(endTime - start, { secondsDecimalDigits: 0 })
+}
+
+export default async function getRuns(args: Arguments) {
   setTabReadonly(args)
   const profile = args.parsedOptions.p || args.parsedOptions.profile
 
@@ -97,6 +110,9 @@ export default async function getProfiles(args: Arguments) {
             onclick: () => onClick(_.runDir),
             attributes: [
               { key: "STATUS", value: capitalize(_.info.status), tag: "badge", css: statusColor(_.info.status) },
+              { key: "STARTED AT", value: formatDate(_.info.start_time) },
+              { key: "FINISHED AT", value: formatDate(_.info.end_time) },
+              { key: "RUN TIME", value: getRunTime(_.info.start_time, _.info.end_time) },
             ],
           })),
         }