Merge pull request #2317 from MetRonnie/times

Estimated job finish times

Author: oliver-sanders

changes.d/2317.feat.md

@@ -0,0 +1 @@
+Show estimated finish times of running jobs in the tree and table views.

src/components/cylc/Info.vue

@@ -215,6 +215,7 @@ import {
   mdiCheckboxBlankOutline
 } from '@mdi/js'
 import { cloneDeep } from 'lodash-es'
+import { formatDatetime } from '@/utils/tasks'
 
 export default {
   name: 'InfoComponent',
@@ -301,7 +302,7 @@ export default {
         // Since we've created this date from a Unix timestamp, we can safely assume it is in UTC:
         xtrigger.id = xtrigger.id.replace(
           /trigger_time=(?<unixTime>[0-9.]+)/,
-          (match, p1) => `trigger_time=${new Date(p1 * 1000).toISOString().slice(0, -5)}Z`
+          (match, p1) => `trigger_time=${formatDatetime(new Date(p1 * 1000))}`
         )
         return xtrigger
       })

src/components/cylc/analysis/AnalysisTable.vue

@@ -186,7 +186,7 @@ export default {
         value = value[index]
       }
       if (header.formatter) {
-        return header.formatter(value, header.allowZeros)
+        return header.formatter(value, header)
       }
       return value
     }

src/components/cylc/analysis/BoxPlot.vue

@@ -165,11 +165,11 @@ export default {
       },
       tooltip: {
         custom ({ seriesIndex, dataPointIndex, w }) {
-          const max = formatDuration(w.globals.seriesCandleC[seriesIndex][dataPointIndex], true)
-          const q3 = formatDuration(w.globals.seriesCandleL[seriesIndex][dataPointIndex], true)
-          const med = formatDuration(w.globals.seriesCandleM[seriesIndex][dataPointIndex], true)
-          const q1 = formatDuration(w.globals.seriesCandleH[seriesIndex][dataPointIndex], true)
-          const min = formatDuration(w.globals.seriesCandleO[seriesIndex][dataPointIndex], true)
+          const max = formatDuration(w.globals.seriesCandleC[seriesIndex][dataPointIndex], { allowZeros: true })
+          const q3 = formatDuration(w.globals.seriesCandleL[seriesIndex][dataPointIndex], { allowZeros: true })
+          const med = formatDuration(w.globals.seriesCandleM[seriesIndex][dataPointIndex], { allowZeros: true })
+          const q1 = formatDuration(w.globals.seriesCandleH[seriesIndex][dataPointIndex], { allowZeros: true })
+          const min = formatDuration(w.globals.seriesCandleO[seriesIndex][dataPointIndex], { allowZeros: true })
           return `
             <div class="pa-2">
               <div>Maximum: ${max}</div>
@@ -197,7 +197,7 @@ export default {
           text: `${upperFirst(props.timingOption)} time`,
         },
         labels: {
-          formatter: (value) => formatDuration(value, true)
+          formatter: (value) => formatDuration(value, { allowZeros: true })
         },
       },
     }))

src/components/cylc/analysis/TimeSeries.vue

@@ -366,7 +366,7 @@ export default {
               if (!value) {
                 return null
               }
-              const y = formatDuration(value, true)
+              const y = formatDuration(value, { allowZeros: true })
               const platform = this.series[seriesIndex].data[dataPointIndex].platform
               return `${y} (${platform})`
             }
@@ -387,9 +387,7 @@ export default {
             text: upperFirst(this.timingOption) + ' time',
           },
           labels: {
-            formatter: function (value) {
-              return formatDuration(value, true)
-            }
+            formatter: (value) => formatDuration(value, { allowZeros: true })
           },
         },
       }
@@ -448,9 +446,7 @@ export default {
             text: upperFirst(this.timingOption) + ' time',
           },
           labels: {
-            formatter: function (value) {
-              return formatDuration(value, true)
-            }
+            formatter: (value) => formatDuration(value, { allowZeros: true })
           },
           min: this.showOrigin ? 0 : undefined
         },

src/components/cylc/common/EstimatedTime.vue

@@ -0,0 +1,58 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!-- Simple component to show an actual time or fall back to an estimate if present. -->
+
+<template>
+  <template v-if="isTruthyOrZero(actual)">
+    {{ formatter(actual) }}
+  </template>
+  <span
+    v-else-if="isTruthyOrZero(estimate)"
+    v-tooltip="{ text: tooltip, openDelay: 200 }"
+    class="d-inline-flex align-center text-blue-grey"
+  >
+    {{ formatter(estimate) }}
+    <v-icon
+      :icon="mdiTimerSand"
+      size="small"
+      class="ml-1"
+    />
+  </span>
+</template>
+
+<script setup>
+import { mdiTimerSand } from '@mdi/js'
+import { isTruthyOrZero } from '@/utils/tasks'
+
+defineProps({
+  actual: {
+    type: [String, Number],
+  },
+  estimate: {
+    type: [String, Number],
+  },
+  formatter: {
+    type: Function,
+    default: (x) => x,
+  },
+  tooltip: {
+    type: String,
+    default: 'Estimate',
+  },
+})
+</script>

src/components/cylc/common/JobDetails.vue

@@ -42,27 +42,42 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <td>{{ node.jobRunnerName }}</td>
       </tr>
       <tr>
-        <td>Submitted time</td>
+        <td>Submit time</td>
         <td>{{ node.submittedTime }}</td>
       </tr>
-      <tr>
-        <td>Started time</td>
-        <td>{{ node.startedTime }}</td>
-      </tr>
-      <tr>
-        <td>Finished time</td>
-        <td>{{ node.finishedTime }}</td>
-      </tr>
-      <tr v-if="meanElapsedTime">
-        <td>Mean run time</td>
-        <td>{{ formatDuration(meanElapsedTime) }}</td>
+      <template v-if="node.startedTime">
+        <tr>
+          <td>Start time</td>
+          <td>{{ node.startedTime }}</td>
+        </tr>
+        <tr>
+          <td>Finish time</td>
+          <td>
+            <EstimatedTime
+              :actual="node.finishedTime"
+              :estimate="node.estimatedFinishTime"
+            />
+          </td>
+        </tr>
+      </template>
+      <tr v-if="node.finishedTime || meanElapsedTime">
+        <td>Run time</td>
+        <td>
+          <EstimatedTime
+            :actual="getRunTime(node)"
+            :estimate="meanElapsedTime"
+            :formatter="(x) => formatDuration(x, { allowZeros: true })"
+            tooltip="Mean for this task"
+          />
+        </td>
       </tr>
     </tbody>
   </v-table>
 </template>
 
 <script setup>
-import { formatDuration } from '@/utils/tasks'
+import { formatDuration, getRunTime } from '@/utils/tasks'
+import EstimatedTime from '@/components/cylc/common/EstimatedTime.vue'
 
 defineProps({
   node: {