-
Notifications
You must be signed in to change notification settings - Fork 27
/
Suite.vue
120 lines (118 loc) · 2.99 KB
/
Suite.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<v-container
fill-height
fluid
grid-list-xl
>
<v-layout
justify-center
wrap
>
<v-flex
md12
>
<material-card
text="This is the list of tasks for the suite"
title="Tasks"
color="green"
>
<v-data-table
:headers="headers"
:items="tasks"
:loading="isLoading"
:pagination.sync="pagination"
>
<template slot="no-data" v-if="!isLoading">
<v-alert
:value="true"
color="error"
icon="warning">
No tasks found for the current user
</v-alert>
</template>
<template
slot="headerCell"
slot-scope="{ header }"
>
<span
class="subheading font-weight-light text-success text--darken-3"
v-text="header.text"
></span>
</template>
<v-progress-linear slot="progress" color="green" indeterminate></v-progress-linear>
<template
slot="items"
slot-scope="{ item }"
>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.meanElapsedTime }}</td>
<td>{{ item.namespace }}</td>
<td>{{ item.depth }}</td>
</template>
</v-data-table>
</material-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import {SuiteService} from '@/services/suite.service'
import {mapState} from 'vuex'
export default {
metaInfo() {
return {
title: 'Cylc UI | Suite ' + this.$route.params.name
}
},
data: () => ({
pagination: {
rowsPerPage: 10
},
headers: [
{
sortable: true,
text: 'ID',
value: 'id'
},
{
sortable: true,
text: 'Name',
value: 'name'
},
{
sortable: false,
text: 'Elapsed Time',
value: 'meanElapsedTime'
},
{
sortable: false,
text: 'Namespace',
value: 'namespace'
},
{
sortable: false,
text: 'Depth',
value: 'depth'
}
]
}),
computed: {
// namespace: module suites, and property suites, hence these repeated tokens...
...mapState('suites', ['tasks']),
...mapState(['isLoading'])
},
beforeCreate() {
// TBD: normally here we would have an ID, then query by ID...
SuiteService.getSuites().then(() => {
const suites = this.$store.getters['suites/suites'];
for (let i = 0; i < suites.length; i++) {
if (suites[i].name === this.$route.params.name) {
SuiteService.getSuiteTasks(suites[i]);
break;
}
}
});
}
}
</script>