Add a job details menu to the log view

changes.d/2265.feat.md

@@ -0,0 +1 @@
+Improved the legibility of job details in the tree view and added a job details menu to the log view.

src/components/cylc/common/JobDetails.vue

@@ -0,0 +1,83 @@
+<!--
+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/>.
+-->
+
+<template>
+  <v-table data-cy="job-details">
+    <thead v-if="$slots.header">
+      <tr>
+        <th colspan="2">
+          <slot name="header"></slot>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>State</td>
+        <td>{{ node.state }}</td>
+      </tr>
+      <tr>
+        <td>Platform</td>
+        <td>{{ node.platform }}</td>
+      </tr>
+      <tr>
+        <td>Job ID</td>
+        <td>{{ node.jobId }}</td>
+      </tr>
+      <tr>
+        <td>Job runner</td>
+        <td>{{ node.jobRunnerName }}</td>
+      </tr>
+      <tr>
+        <td>Submitted 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>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+import { formatDuration } from '@/utils/tasks'
+
+defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  meanElapsedTime: {
+    type: Number,
+  },
+})
+</script>
+
+<style scoped>
+table td:first-of-type {
+  font-weight: 500;
+  cursor: default;
+}
+</style>

src/components/cylc/tree/JobLeaf.vue

@@ -0,0 +1,94 @@
+<!--
+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/>.
+-->
+
+<template>
+  <div
+    :id="`${node.id}-job-details`"
+    class="node leaf job-details mb-2"
+  >
+    <div class="arrow-up" :style="leafTriangleStyle"></div>
+    <div class="leaf-data pa-2 rounded-lg">
+      <v-defaults-provider :defaults="defaults">
+        <JobDetailsTable
+          :node="node.node"
+          :mean-elapsed-time="meanElapsedTime"
+          class="bg-transparent"
+        />
+        <v-table
+          v-if="customOutputs?.length"
+          class="outputs mt-2 bg-white"
+        >
+          <thead>
+            <tr>
+              <th>Custom output</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="customOutput of customOutputs"
+              :key="customOutput.label"
+            >
+              <td>{{ customOutput.isMessage ? '--' : customOutput.label }}</td>
+              <td>{{ customOutput.message }}</td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-defaults-provider>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getIndent } from '@/components/cylc/tree/util'
+import { jobMessageOutputs } from '@/utils/tasks'
+import JobDetailsTable from '@/components/cylc/common/JobDetails.vue'
+
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  /** Indent level */
+  depth: {
+    type: Number,
+    required: true,
+  },
+  meanElapsedTime: {
+    type: Number,
+  },
+  density: {
+    type: String,
+    default: 'compact'
+  }
+})
+
+/** Make the job details triangle point to the job icon */
+const leafTriangleStyle = computed(() => ({
+  'margin-left': getIndent(props.depth),
+}))
+
+const defaults = computed(() => ({
+  VTable: {
+    density: props.density,
+    hover: true,
+  }
+}))
+
+const customOutputs = computed(() => jobMessageOutputs(props.node))
+</script>

src/components/cylc/tree/TreeItem.vue

@@ -148,7 +148,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <slot name="child">
         <!-- Need v-if to prevent render of fallback content when slot is provided but is empty -->
         <template v-if="!$slots.child">
-          <JobDetails
+          <JobLeaf
             v-if="node.type === 'job'"
             v-bind="{ node, meanElapsedTime }"
             :depth="depth + 1"
@@ -175,7 +175,7 @@ import {
 } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
-import JobDetails from '@/components/cylc/tree/JobDetails.vue'
+import JobLeaf from '@/components/cylc/tree/JobLeaf.vue'
 import {
   jobMessageOutputs,
   latestJob,
@@ -193,7 +193,7 @@ export default {
     FlowNumsChip,
     Task,
     Job,
-    JobDetails,
+    JobLeaf,
   },
 
   props: {

src/services/mock/json/index.cjs

@@ -20,7 +20,7 @@ const taskProxy = require('./taskProxy.json')
 const familyProxy = require('./familyProxy.json')
 const { one, workflows, Workflow } = require('./workflows/index.cjs')
 const { LogData } = require('./logData.cjs')
-const { LogFiles, JobState } = require('./logFiles.cjs')
+const { LogFiles, Jobs } = require('./logFiles.cjs')
 const analysisQuery = require('./analysisQuery.json')
 const ganttQuery = require('./ganttQuery.json')
 const InfoViewSubscription = require('./infoView.json')
@@ -31,7 +31,7 @@ module.exports = {
   familyProxy,
   LogData,
   LogFiles,
-  JobState,
+  Jobs,
   App: workflows,
   Workflow,
   GraphIQLTest: one,

src/services/mock/json/logFiles.cjs

@@ -55,7 +55,7 @@ const LogFiles = async ({ id }) => {
  *
  * @param {{ id: string }} variables
  */
-const JobState = async ({ id, workflowId }) => {
+const Jobs = async ({ id, workflowId }) => {
   if (!workflowId.startsWith('~')) {
     workflowId = `~user/${workflowId}`
   }
@@ -65,17 +65,17 @@ const JobState = async ({ id, workflowId }) => {
   ).replace(
     /\/(\d+)$/, (match, p1) => `/${parseInt(p1)}` // strips leading zeroes
   )
-  const { state } = deltas?.added?.jobs?.find((job) => job.id.includes(searchID)) ?? {}
+  const node = deltas?.added?.jobs?.find((job) => job.id.includes(searchID)) ?? {}
   await simulatedDelay(500)
   return {
     data: {
-      jobs: state ? [{ id, state }] : []
+      jobs: node.state ? [{ id, ...node }] : []
     }
   }
 }
 
 module.exports = {
-  JobState,
+  Jobs,
   LogFiles,
   deletedFile,
   jobLogFiles,