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
121
122
123
124
125
|
<script>
import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { __, s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import RunnerActionsCell from './cells/runner_actions_cell.vue';
import RunnerSummaryCell from './cells/runner_summary_cell.vue';
import RunnerStatusCell from './cells/runner_status_cell.vue';
import RunnerTags from './runner_tags.vue';
const tableField = ({ key, label = '', width = 10 }) => {
return {
key,
label,
thClass: [
`gl-w-${width}p`,
'gl-bg-transparent!',
'gl-border-b-solid!',
'gl-border-b-gray-100!',
'gl-py-5!',
'gl-px-0!',
'gl-border-b-1!',
],
tdClass: ['gl-py-5!', 'gl-px-1!'],
tdAttr: {
'data-testid': `td-${key}`,
},
};
};
export default {
components: {
GlTable,
GlSkeletonLoader,
TimeAgo,
RunnerActionsCell,
RunnerSummaryCell,
RunnerTags,
RunnerStatusCell,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
loading: {
type: Boolean,
required: false,
default: false,
},
runners: {
type: Array,
required: true,
},
},
methods: {
runnerTrAttr(runner) {
if (runner) {
return {
'data-testid': `runner-row-${getIdFromGraphQLId(runner.id)}`,
};
}
return {};
},
},
fields: [
tableField({ key: 'status', label: s__('Runners|Status') }),
tableField({ key: 'summary', label: s__('Runners|Runner ID'), width: 30 }),
tableField({ key: 'version', label: __('Version') }),
tableField({ key: 'ipAddress', label: __('IP Address') }),
tableField({ key: 'tagList', label: __('Tags'), width: 20 }),
tableField({ key: 'contactedAt', label: __('Last contact') }),
tableField({ key: 'actions', label: '' }),
],
};
</script>
<template>
<div>
<gl-table
:busy="loading"
:items="runners"
:fields="$options.fields"
:tbody-tr-attr="runnerTrAttr"
data-testid="runner-list"
stacked="md"
fixed
>
<template v-if="!runners.length" #table-busy>
<gl-skeleton-loader v-for="i in 4" :key="i" />
</template>
<template #cell(status)="{ item }">
<runner-status-cell :runner="item" />
</template>
<template #cell(summary)="{ item, index }">
<runner-summary-cell :runner="item">
<template #runner-name="{ runner }">
<slot name="runner-name" :runner="runner" :index="index"></slot>
</template>
</runner-summary-cell>
</template>
<template #cell(version)="{ item: { version } }">
{{ version }}
</template>
<template #cell(ipAddress)="{ item: { ipAddress } }">
{{ ipAddress }}
</template>
<template #cell(tagList)="{ item: { tagList } }">
<runner-tags :tag-list="tagList" size="sm" />
</template>
<template #cell(contactedAt)="{ item: { contactedAt } }">
<time-ago v-if="contactedAt" :time="contactedAt" />
<template v-else>{{ __('Never') }}</template>
</template>
<template #cell(actions)="{ item }">
<runner-actions-cell :runner="item" />
</template>
</gl-table>
</div>
</template>
|
