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
|
<script>
import { GlTableLite, GlEmptyState, GlPagination, GlTooltipDirective } from '@gitlab/ui';
import { s__ } from '~/locale';
import { setUrlParams } from '~/lib/utils/url_utility';
import { formatDate } from '~/lib/utils/datetime/date_format_utility';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
export default {
name: 'AirflowDags',
components: {
GlTableLite,
GlEmptyState,
IncubationAlert,
GlPagination,
TimeAgo,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
dags: {
type: Array,
required: true,
},
pagination: {
type: Object,
required: true,
},
},
computed: {
fields() {
return [
{ key: 'dag_name', label: this.$options.i18n.dagLabel },
{ key: 'schedule', label: this.$options.scheduleLabel },
{ key: 'next_run', label: this.$options.nextRunLabel },
{ key: 'is_active', label: this.$options.isActiveLabel },
{ key: 'is_paused', label: this.$options.isPausedLabel },
{ key: 'fileloc', label: this.$options.fileLocLabel },
];
},
hasPagination() {
return this.dags.length > 0;
},
prevPage() {
return this.pagination.page > 1 ? this.pagination.page - 1 : null;
},
nextPage() {
return !this.pagination.isLastPage ? this.pagination.page + 1 : null;
},
emptyState() {
return {
svgPath: '/assets/illustrations/empty-state/empty-dag-md.svg',
};
},
},
methods: {
generateLink(page) {
return setUrlParams({ page });
},
formatDate(dateString) {
return formatDate(new Date(dateString));
},
},
i18n: {
emptyStateLabel: s__('Airflow|There are no DAGs to show'),
emptyStateDescription: s__(
'Airflow|Either the Airflow instance does not contain DAGs or has yet to be configured',
),
dagLabel: s__('Airflow|DAG'),
scheduleLabel: s__('Airflow|Schedule'),
nextRunLabel: s__('Airflow|Next run'),
isActiveLabel: s__('Airflow|Is active'),
isPausedLabel: s__('Airflow|Is paused'),
fileLocLabel: s__('Airflow|DAG file location'),
featureName: s__('Airflow|GitLab Airflow integration'),
},
linkToFeedbackIssue:
'https://gitlab.com/gitlab-org/incubation-engineering/airflow/meta/-/issues/2',
};
</script>
<template>
<div>
<incubation-alert
:feature-name="$options.i18n.featureName"
:link-to-feedback-issue="$options.linkToFeedbackIssue"
/>
<gl-empty-state
v-if="!dags.length"
:title="$options.i18n.emptyStateLabel"
:description="$options.i18n.emptyStateDescription"
:svg-path="emptyState.svgPath"
/>
<gl-table-lite v-else :items="dags" :fields="fields" class="gl-mt-0!">
<template #cell(next_run)="data">
<time-ago v-gl-tooltip.hover :time="data.value" :title="formatDate(data.value)" />
</template>
</gl-table-lite>
<gl-pagination
v-if="hasPagination"
:value="pagination.page"
:prev-page="prevPage"
:next-page="nextPage"
:total-items="pagination.totalItems"
:per-page="pagination.perPage"
:link-gen="generateLink"
align="center"
/>
</div>
</template>
|
