Skip to content

Commit

Permalink
table: fix table view post-filter change
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliver-sanders
oliver-sanders committed Nov 4, 2022
1 parent 6a3c937 commit f5eb9a2
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 91 deletions.
105 changes: 51 additions & 54 deletions src/components/cylc/table/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="{
Expand All @@ -124,42 +124,53 @@ 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>
<v-btn
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 }">
Expand All @@ -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>
Expand Down Expand Up @@ -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
},
{
Expand All @@ -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)
}
],
Expand Down Expand Up @@ -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 &&
Expand Down
16 changes: 15 additions & 1 deletion src/views/Table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
}
}
}
Expand Down
90 changes: 57 additions & 33 deletions tests/unit/components/cylc/table/table.data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
]

Expand Down
6 changes: 3 additions & 3 deletions tests/unit/components/cylc/table/table.vue.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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', () => {
Expand Down

0 comments on commit f5eb9a2

Please sign in to comment.