Skip to content

Commit 250e402

Browse files
kinowkinow
committed
Create WorkflowStateSummary component
1 parent f1c3acc commit 250e402

File tree

2 files changed

+117
-73
lines changed

2 files changed

+117
-73
lines changed

‎src/components/cylc/gscan/GScan.vue‎

Lines changed: 7 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -142,42 +142,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
142142
</v-flex>
143143
<!-- We check the latestStateTasks below as offline workflows won't have a latestStateTasks property -->
144144
<v-flex
145-
v-if="scope.node.type === 'workflow' && scope.node.node.latestStateTasks"
145+
v-if="scope.node.node.latestStateTasks"
146146
class="text-right c-gscan-workflow-states"
147147
>
148-
<!-- task summary tooltips -->
149-
<span
150-
v-for="[state, tasks] in getLatestStateTasks(Object.entries(scope.node.node.latestStateTasks))"
151-
:key="`${scope.node.id}-summary-${state}`"
152-
:class="getTaskStateClasses(scope.node.node, state)"
153-
>
154-
<v-tooltip color="black" top>
155-
<template v-slot:activator="{ on }">
156-
<!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
157-
<!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
158-
<v-btn
159-
v-on="on"
160-
class="ma-0 pa-0"
161-
min-width="0"
162-
min-height="0"
163-
style="font-size: 120%; width: auto"
164-
:ripple="false"
165-
dark
166-
icon
167-
>
168-
<job :status="state" />
169-
</v-btn>
170-
</template>
171-
<!-- tooltip text -->
172-
<span>
173-
<span class="grey--text">{{ countTasksInState(scope.node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
174-
<br/>
175-
<span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
176-
{{ task }}<br v-if="index !== tasks.length -1" />
177-
</span>
178-
</span>
179-
</v-tooltip>
180-
</span>
148+
<WorkflowStateSummary
149+
:node="scope.node"
150+
/>
181151
</v-flex>
182152
</v-layout>
183153
</v-list-item-title>
@@ -203,19 +173,19 @@ import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
203173
import TaskState from '@/model/TaskState.model'
204174
import SubscriptionQuery from '@/model/SubscriptionQuery.model'
205175
import { WorkflowState } from '@/model/WorkflowState.model'
206-
import Job from '@/components/cylc/Job'
207176
import Tree from '@/components/cylc/tree/Tree'
208177
import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon'
178+
import WorkflowStateSummary from '@/components/cylc/gscan/WorkflowStateSummary'
209179
// import { addNodeToTree, createWorkflowNode } from '@/components/cylc/gscan/nodes'
210180
import { filterHierarchically } from '@/components/cylc/gscan/filters'
211181
import { GSCAN_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
212182
213183
export default {
214184
name: 'GScan',
215185
components: {
216-
Job,
217186
Tree,
218-
WorkflowIcon
187+
WorkflowIcon,
188+
WorkflowStateSummary
219189
},
220190
mixins: [
221191
subscriptionComponentMixin
@@ -415,42 +385,6 @@ export default {
415385
return `/workflows/${ node.node.name }`
416386
}
417387
return ''
418-
},
419-
420-
/**
421-
* Get number of tasks we have in a given state. The states are retrieved
422-
* from `latestStateTasks`, and the number of tasks in each state is from
423-
* the `stateTotals`. (`latestStateTasks` includes old tasks).
424-
*
425-
* @param {WorkflowGraphQLData} workflow - the workflow object retrieved from GraphQL
426-
* @param {string} state - a workflow state
427-
* @returns {number|*} - the number of tasks in the given state
428-
*/
429-
countTasksInState (workflow, state) {
430-
if (Object.hasOwnProperty.call(workflow.stateTotals, state)) {
431-
return workflow.stateTotals[state]
432-
}
433-
return 0
434-
},
435-
436-
getTaskStateClasses (workflow, state) {
437-
const tasksInState = this.countTasksInState(workflow, state)
438-
return tasksInState === 0 ? ['empty-state'] : []
439-
},
440-
441-
// TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
442-
getLatestStateTasks (latestStateTasks) {
443-
// Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
444-
const validValues = [
445-
TaskState.SUBMITTED.name,
446-
TaskState.SUBMIT_FAILED.name,
447-
TaskState.RUNNING.name,
448-
TaskState.SUCCEEDED.name,
449-
TaskState.FAILED.name
450-
]
451-
return latestStateTasks.filter(entry => {
452-
return validValues.includes(entry[0])
453-
})
454388
}
455389
}
456390
}

‎src/components/cylc/gscan/WorkflowStateSummary.vue‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!--
2+
Copyright (C) NIWA & British Crown (Met Office) & Contributors.
3+
4+
This program is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU General Public License as published by
6+
the Free Software Foundation, either version 3 of the License, or
7+
(at your option) any later version.
8+
9+
This program is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU General Public License for more details.
13+
14+
You should have received a copy of the GNU General Public License
15+
along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
-->
17+
18+
<template>
19+
<!-- task summary tooltips -->
20+
<span>
21+
<span
22+
v-for="[state, tasks] in getLatestStateTasks(Object.entries(node.node.latestStateTasks))"
23+
:key="`${node.id}-summary-${state}`"
24+
:class="getTaskStateClasses(node.node.stateTotals, state)"
25+
>
26+
<v-tooltip color="black" top>
27+
<template v-slot:activator="{ on }">
28+
<!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
29+
<!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
30+
<v-btn
31+
v-on="on"
32+
class="ma-0 pa-0"
33+
min-width="0"
34+
min-height="0"
35+
style="font-size: 120%; width: auto"
36+
:ripple="false"
37+
dark
38+
icon
39+
>
40+
<job :status="state" />
41+
</v-btn>
42+
</template>
43+
<!-- tooltip text -->
44+
<span>
45+
<span class="grey--text">{{ countTasksInState(node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
46+
<br/>
47+
<span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
48+
{{ task }}<br v-if="index !== tasks.length -1" />
49+
</span>
50+
</span>
51+
</v-tooltip>
52+
</span>
53+
</span>
54+
</template>
55+
56+
<script>
57+
import Job from '@/components/cylc/Job'
58+
import TaskState from '@/model/TaskState.model'
59+
export default {
60+
name: 'WorkflowStateSummary',
61+
props: {
62+
node: {
63+
type: Object,
64+
required: true
65+
},
66+
maximumTasksDisplayed: {
67+
type: Number,
68+
default: 5
69+
}
70+
},
71+
components: {
72+
Job
73+
},
74+
methods: {
75+
/**
76+
* Get number of tasks we have in a given state. The states are retrieved
77+
* from `latestStateTasks`, and the number of tasks in each state is from
78+
* the `stateTotals`. (`latestStateTasks` includes old tasks).
79+
*
80+
* @param {Object} stateTotals - the workflow object retrieved from GraphQL
81+
* @param {string} state - a workflow state
82+
* @returns {number|*} - the number of tasks in the given state
83+
*/
84+
countTasksInState (stateTotals, state) {
85+
if (Object.hasOwnProperty.call(stateTotals, state)) {
86+
return stateTotals[state]
87+
}
88+
return 0
89+
},
90+
getTaskStateClasses (stateTotals, state) {
91+
const tasksInState = this.countTasksInState(stateTotals, state)
92+
return tasksInState === 0 ? ['empty-state'] : []
93+
},
94+
// TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
95+
getLatestStateTasks (latestStateTasks) {
96+
// Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
97+
const validValues = [
98+
TaskState.SUBMITTED.name,
99+
TaskState.SUBMIT_FAILED.name,
100+
TaskState.RUNNING.name,
101+
TaskState.SUCCEEDED.name,
102+
TaskState.FAILED.name
103+
]
104+
return latestStateTasks.filter(entry => {
105+
return validValues.includes(entry[0])
106+
})
107+
}
108+
}
109+
}
110+
</script>

0 commit comments

Comments
 (0)