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 { mapActions, mapState, mapGetters } from 'vuex';
import IdeStatusList from 'ee_else_ce/ide/components/ide_status_list.vue';
import icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import timeAgoMixin from '~/vue_shared/mixins/timeago';
import CiIcon from '../../vue_shared/components/ci_icon.vue';
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import { rightSidebarViews } from '../constants';
export default {
components: {
icon,
userAvatarImage,
CiIcon,
IdeStatusList,
},
directives: {
tooltip,
},
mixins: [timeAgoMixin],
data() {
return {
lastCommitFormatedAge: null,
};
},
computed: {
...mapState(['currentBranchId', 'currentProjectId']),
...mapGetters(['currentProject', 'lastCommit']),
...mapState('pipelines', ['latestPipeline']),
},
watch: {
lastCommit() {
this.initPipelinePolling();
},
},
mounted() {
this.startTimer();
},
beforeDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
this.stopPipelinePolling();
},
methods: {
...mapActions('rightPane', {
openRightPane: 'open',
}),
...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
startTimer() {
this.intervalId = setInterval(() => {
this.commitAgeUpdate();
}, 1000);
},
initPipelinePolling() {
if (this.lastCommit) {
this.fetchLatestPipeline();
}
},
commitAgeUpdate() {
if (this.lastCommit) {
this.lastCommitFormatedAge = this.timeFormated(this.lastCommit.committed_date);
}
},
getCommitPath(shortSha) {
return `${this.currentProject.web_url}/commit/${shortSha}`;
},
},
rightSidebarViews,
};
</script>
<template>
<footer class="ide-status-bar">
<div v-if="lastCommit" class="ide-status-branch">
<span v-if="latestPipeline && latestPipeline.details" class="ide-status-pipeline">
<button
type="button"
class="p-0 border-0 h-50"
@click="openRightPane($options.rightSidebarViews.pipelines)"
>
<ci-icon
v-tooltip
:status="latestPipeline.details.status"
:title="latestPipeline.details.status.text"
/>
</button>
Pipeline
<a :href="latestPipeline.details.status.details_path" class="monospace"
>#{{ latestPipeline.id }}</a
>
{{ latestPipeline.details.status.text }} for
</span>
<icon name="commit" />
<a
v-tooltip
:title="lastCommit.message"
:href="getCommitPath(lastCommit.short_id)"
class="commit-sha"
>{{ lastCommit.short_id }}</a
>
by
<user-avatar-image
css-classes="ide-status-avatar"
:size="18"
:img-src="latestPipeline && latestPipeline.commit.author_gravatar_url"
:img-alt="lastCommit.author_name"
:tooltip-text="lastCommit.author_name"
/>
{{ lastCommit.author_name }}
<time
v-tooltip
:datetime="lastCommit.committed_date"
:title="tooltipTitle(lastCommit.committed_date)"
data-placement="top"
data-container="body"
>{{ lastCommitFormatedAge }}</time
>
</div>
<ide-status-list class="ml-auto" />
</footer>
</template>
|
