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
|
<script>
import RunnerSingleStat from '~/runner/components/stat/runner_single_stat.vue';
import {
I18N_STATUS_ONLINE,
I18N_STATUS_OFFLINE,
I18N_STATUS_STALE,
STATUS_ONLINE,
STATUS_OFFLINE,
STATUS_STALE,
} from '../../constants';
export default {
components: {
RunnerSingleStat,
RunnerUpgradeStatusStats: () =>
import('ee_component/runner/components/stat/runner_upgrade_status_stats.vue'),
},
props: {
scope: {
type: String,
required: true,
},
variables: {
type: Object,
required: false,
default: () => ({}),
},
},
computed: {
stats() {
return [
{
key: STATUS_ONLINE,
props: {
skip: this.statusCountSkip(STATUS_ONLINE),
variables: { ...this.variables, status: STATUS_ONLINE },
variant: 'success',
title: I18N_STATUS_ONLINE,
metaIcon: 'status-active',
},
},
{
key: STATUS_OFFLINE,
props: {
skip: this.statusCountSkip(STATUS_OFFLINE),
variables: { ...this.variables, status: STATUS_OFFLINE },
variant: 'muted',
title: I18N_STATUS_OFFLINE,
metaIcon: 'status-waiting',
},
},
{
key: STATUS_STALE,
props: {
skip: this.statusCountSkip(STATUS_STALE),
variables: { ...this.variables, status: STATUS_STALE },
variant: 'warning',
title: I18N_STATUS_STALE,
metaIcon: 'time-out',
},
},
];
},
},
methods: {
statusCountSkip(status) {
// Show an empty result when we already filter by another status
return this.variables.status && this.variables.status !== status;
},
},
};
</script>
<template>
<div class="gl-display-flex gl-flex-wrap gl-py-6">
<runner-single-stat
v-for="stat in stats"
:key="stat.key"
:scope="scope"
v-bind="stat.props"
class="gl-px-5"
/>
<runner-upgrade-status-stats
class="gl-display-contents"
:scope="scope"
:variables="variables"
/>
</div>
</template>
|
