From f5eb9a230ef626c4921cd422fa187bedba33a784 Mon Sep 17 00:00:00 2001
From: Oliver Sanders <oliver.sanders@metoffice.gov.uk>
Date: Fri, 4 Nov 2022 13:15:16 +0000
Subject: [PATCH] table: fix table view post-filter change

---
 src/components/cylc/table/Table.vue           | 105 +++++++++---------
 src/views/Table.vue                           |  16 ++-
 .../unit/components/cylc/table/table.data.js  |  90 +++++++++------
 .../components/cylc/table/table.vue.spec.js   |   6 +-
 4 files changed, 126 insertions(+), 91 deletions(-)

diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index 0d729e5457..c8b7102504 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -107,7 +107,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             multi-sort
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
-            item-key="id"
+            item-key="task.id"
             show-expand
             dense
             :footer-props="{
@@ -124,19 +124,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <div class="d-flex align-content-center flex-nowrap">
                     <div class="mr-1">
                       <Task
-                        v-cylc-object="item.node"
-                        :task="item.node"
-                        :startTime="taskStartTime(item.node, item.latestJob)"
+                        v-cylc-object="item.task.node"
+                        :task="item.task.node"
+                        :startTime="taskStartTime(item.task.node, item.latestJob)"
                       />
                     </div>
                     <div class="mr-1">
                       <Job
-                        v-cylc-object="item.node"
-                        :status="item.node.state"
-                        :previous-state="getPreviousJobNode(item).state"
+                        v-cylc-object="item.task.node"
+                        :status="item.task.node.state"
+                        :previous-state="((item.previousJob || {}).node || {}).state"
                       />
                     </div>
-                    <div>{{ item.node.name }}</div>
+                    <div>{{ item.task.node.name }}</div>
                   </div>
                 </td>
                 <td>
@@ -144,22 +144,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     icon
                     class="v-data-table__expand-icon"
                     @click="expanded.push(item)"
-                    v-if="(item.children|| []).length > 0 && !expanded.includes(item)"
+                    v-if="
+                      (item.task.children|| []).length > 0 &&
+                      !expanded.includes(item)
+                    "
                   >
                     <v-icon>{{ icons.mdiChevronDown }}</v-icon>
                   </v-btn>
-                  <v-btn icon class="v-data-table__expand-icon v-data-table__expand-icon--active" @click="expanded.splice(expanded.indexOf(item), 1)" v-if="(item.children || []).length > 0 && expanded.includes(item)">
+                  <v-btn
+                    icon
+                    class="v-data-table__expand-icon v-data-table__expand-icon--active"
+                    @click="expanded.splice(expanded.indexOf(item), 1)"
+                    v-if="
+                      (item.task.children || []).length > 0 &&
+                      expanded.includes(item)
+                    "
+                  >
                     <v-icon>{{ icons.mdiChevronDown }}</v-icon>
                   </v-btn>
                 </td>
-                <td>{{ item.node.cyclePoint }}</td>
-                <td>{{ getLatestJobNode(item).platform }}</td>
-                <td>{{ getLatestJobNode(item).jobRunnerName }}</td>
-                <td>{{ getLatestJobNode(item).jobId }}</td>
-                <td>{{ getLatestJobNode(item).submittedTime }}</td>
-                <td>{{ getLatestJobNode(item).startedTime }}</td>
-                <td>{{ getLatestJobNode(item).finishedTime }}</td>
-                <td>{{ item.node.meanElapsedTime }}</td>
+                <td>{{ item.task.node.cyclePoint }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).platform }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).jobRunnerName }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).jobId }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).submittedTime }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).startedTime }}</td>
+                <td>{{ ((item.latestJob || {}).node || {}).finishedTime }}</td>
+                <td>{{ item.task.node.meanElapsedTime }}</td>
               </tr>
             </template>
             <template v-slot:expanded-item="{ item }">
@@ -169,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <!--              </td>-->
               <tr
                 v-bind:key="job.id"
-                v-for="(job, index) in item.children"
+                v-for="(job, index) in item.task.children"
                 class="grey lighten-5"
               >
                 <td>
@@ -237,13 +248,13 @@ export default {
         mdiChevronDown,
         mdiArrowDown
       },
-      sortBy: ['node.cyclePoint'],
+      sortBy: ['task.node.cyclePoint'],
       sortDesc: [localStorage.cyclePointsOrderDesc ? JSON.parse(localStorage.cyclePointsOrderDesc) : true],
       expanded: [],
       headers: [
         {
           text: 'Task',
-          value: 'node.name',
+          value: 'task.node.name',
           sort: DEFAULT_COMPARATOR
         },
         {
@@ -253,42 +264,42 @@ export default {
         },
         {
           text: 'Cycle Point',
-          value: 'node.cyclePoint',
+          value: 'task.node.cyclePoint',
           sort: (a, b) => DEFAULT_COMPARATOR(String(a ?? ''), String(b ?? ''))
         },
         {
-          text: 'Host',
-          value: 'getLatestJobNode(node).platform',
+          text: 'Platform',
+          value: 'latestJob.node.platform',
           sort: (a, b) => DEFAULT_COMPARATOR(a ?? '', b ?? '')
         },
         {
           text: 'Job System',
-          value: 'getLatestJobNode(node).jobRunnerName',
+          value: 'latestJob.node.jobRunnerName',
           sort: (a, b) => DEFAULT_COMPARATOR(a ?? '', b ?? '')
         },
         {
           text: 'Job ID',
-          value: 'getLatestJobNode(node).jobId',
-          sort: (a, b) => parseInt(a ?? 0) - parseInt(b ?? 0)
+          value: 'latestJob.node.jobId',
+          sort: (a, b) => DEFAULT_COMPARATOR(a ?? '', b ?? '')
         },
         {
           text: 'T-submit',
-          value: 'getLatestJobNode(node).submittedTime',
-          sort: datetimeComparator
+          value: 'latestJob.node.submittedTime',
+          sort: (a, b) => datetimeComparator(a ?? '', b ?? '')
         },
         {
           text: 'T-start',
-          value: 'getLatestJobNode(node).startedTime',
-          sort: datetimeComparator
+          value: 'latestJob.node.startedTime',
+          sort: (a, b) => datetimeComparator(a ?? '', b ?? '')
         },
         {
           text: 'T-finish',
-          value: 'getLatestJobNode(node).finishedTime',
-          sort: datetimeComparator
+          value: 'latestJob.node.finishedTime',
+          sort: (a, b) => datetimeComparator(a ?? '', b ?? '')
         },
         {
           text: 'dT-mean',
-          value: 'meanElapsedTime',
+          value: 'task.meanElapsedTime',
           sort: (a, b) => parseInt(a ?? 0) - parseInt(b ?? 0)
         }
       ],
@@ -319,34 +330,20 @@ export default {
       const filterByState = this.filterByTaskState()
       return this.tasks.filter(task => {
         if (filterByName && filterByState) {
-          return task.node.name.includes(this.activeFilters.name) && this.tasksFilterStates.includes(task.node.state)
+          return (
+            task.task.node.name.includes(this.activeFilters.name) &&
+            this.tasksFilterStates.includes(task.task.node.state)
+          )
         } else if (filterByName) {
-          return task.node.name.includes(this.activeFilters.name)
+          return task.task.node.name.includes(this.activeFilters.name)
         } else if (filterByState) {
-          return this.tasksFilterStates.includes(task.node.state)
+          return this.tasksFilterStates.includes(task.task.node.state)
         }
         return true
-
       })
     }
   },
   methods: {
-    getLatestJobNode (taskNode) {
-      if (taskNode.children.length === 0) {
-        // handle a task with no jobs
-        return {}
-      }
-      // return the last job
-      return taskNode.children.slice(-1)[0].node
-    },
-    getPreviousJobNode (taskNode) {
-      if (taskNode.children.length < 2) {
-        // handle a task with no jobs
-        return {}
-      }
-      // return the penultimate job
-      return taskNode.children.slice(-2, -1)[0].node
-    },
     filterByTaskName () {
       return this.activeFilters &&
         this.activeFilters.name !== undefined &&
diff --git a/src/views/Table.vue b/src/views/Table.vue
index c54d178934..968b97c7e6 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -77,10 +77,24 @@ export default {
     },
     tasks () {
       const ret = []
+      let latestJob
+      let previousJob
       for (const workflow of this.workflows) {
         for (const cycle of workflow.children) {
           for (const task of cycle.children) {
-            ret.push(task)
+            latestJob = null
+            previousJob = null
+            if (task.children.length) {
+              latestJob = task.children.slice(-1)[0]
+              if (task.children.length > 1) {
+                previousJob = task.children.slice(-2)[0]
+              }
+            }
+            ret.push({
+              task,
+              latestJob,
+              previousJob
+            })
           }
         }
       }
diff --git a/tests/unit/components/cylc/table/table.data.js b/tests/unit/components/cylc/table/table.data.js
index a78df41246..4365428321 100644
--- a/tests/unit/components/cylc/table/table.data.js
+++ b/tests/unit/components/cylc/table/table.data.js
@@ -22,49 +22,73 @@ const BASE_TOKENS = new Tokens('~cylc/workflow//1')
 
 const simpleTableTasks = [
   {
-    id: BASE_TOKENS.clone({ task: 'taskA' }).id,
-    node: {
+    task: {
       id: BASE_TOKENS.clone({ task: 'taskA' }).id,
-      state: TaskState.RUNNING.name,
-      name: 'taskA',
-      meanElapsedTime: 2000,
-      cyclePoint: '20000101T0000Z'
+      node: {
+        id: BASE_TOKENS.clone({ task: 'taskA' }).id,
+        state: TaskState.RUNNING.name,
+        name: 'taskA',
+        meanElapsedTime: 2000,
+        cyclePoint: '20000101T0000Z'
+      },
+      children: [
+        {
+          id: BASE_TOKENS.clone({ task: 'taskA', job: '01' }).id,
+          node: {
+            platform: 'localhost',
+            jobRunnerName: 'background',
+            jobId: '1',
+            submittedTime: new Date().toISOString(),
+            startedTime: new Date().toISOString(),
+            finishedTime: null,
+            state: JobState.RUNNING.name
+          },
+          children: []
+        }
+      ]
     },
-    children: [
-      {
-        id: BASE_TOKENS.clone({ task: 'taskA', job: '01' }).id,
-        node: {
-          platform: 'localhost',
-          jobRunnerName: 'background',
-          jobId: '1',
-          submittedTime: new Date().toISOString(),
-          startedTime: new Date().toISOString(),
-          finishedTime: null,
-          state: JobState.RUNNING.name
-        },
-        children: []
-      }
-    ]
+    latestJob: {
+      id: BASE_TOKENS.clone({ task: 'taskA', job: '01' }).id,
+      node: {
+        platform: 'localhost',
+        jobRunnerName: 'background',
+        jobId: '1',
+        submittedTime: new Date().toISOString(),
+        startedTime: new Date().toISOString(),
+        finishedTime: null,
+        state: JobState.RUNNING.name
+      },
+      children: []
+    },
+    previousJob: null
   },
   {
-    id: BASE_TOKENS.clone({ task: 'taskB' }).id,
-    node: {
+    task: {
       id: BASE_TOKENS.clone({ task: 'taskB' }).id,
-      state: TaskState.WAITING.name,
-      name: 'taskB',
-      cyclePoint: '20000102T0000Z'
+      node: {
+        id: BASE_TOKENS.clone({ task: 'taskB' }).id,
+        state: TaskState.WAITING.name,
+        name: 'taskB',
+        cyclePoint: '20000102T0000Z'
+      },
+      children: []
     },
-    children: []
+    latestJob: null,
+    previousJob: null
   },
   {
-    id: BASE_TOKENS.clone({ task: 'taskC' }).id,
-    node: {
+    task: {
       id: BASE_TOKENS.clone({ task: 'taskC' }).id,
-      state: TaskState.SUBMITTED.name,
-      name: 'taskC',
-      cyclePoint: '20000103T0000Z'
+      node: {
+        id: BASE_TOKENS.clone({ task: 'taskC' }).id,
+        state: TaskState.SUBMITTED.name,
+        name: 'taskC',
+        cyclePoint: '20000103T0000Z'
+      },
+      children: []
     },
-    children: []
+    latestJob: null,
+    previousJob: null
   }
 ]
 
diff --git a/tests/unit/components/cylc/table/table.vue.spec.js b/tests/unit/components/cylc/table/table.vue.spec.js
index 74cf93f0c0..97d049dda8 100644
--- a/tests/unit/components/cylc/table/table.vue.spec.js
+++ b/tests/unit/components/cylc/table/table.vue.spec.js
@@ -82,8 +82,8 @@ describe('Table component', () => {
     })
 
     // check the the raw task data has the cycle points from lowest to highest
-    expect(wrapper.vm.tasks[wrapper.vm.filteredTasks.length - 1].node.cyclePoint).to.equal('20000103T0000Z')
-    expect(wrapper.vm.tasks[0].node.cyclePoint).to.equal('20000101T0000Z')
+    expect(wrapper.vm.tasks[wrapper.vm.filteredTasks.length - 1].task.node.cyclePoint).to.equal('20000103T0000Z')
+    expect(wrapper.vm.tasks[0].task.node.cyclePoint).to.equal('20000101T0000Z')
 
     // check that the html have the cycle points from high to low
     await wrapper.vm.$nextTick()
@@ -96,7 +96,7 @@ describe('Table component', () => {
         tasks: simpleTableTasks
       }
     })
-    expect(wrapper.props().tasks[0].node.name).to.equal('taskA')
+    expect(wrapper.props().tasks[0].task.node.name).to.equal('taskA')
     expect(wrapper.find('div')).to.not.equal(null)
   })
   describe('Filter', () => {