debian-mirror-gitlab/app/assets/javascripts/ide/components/ide_status_bar.vue

126 lines
3.4 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2018-11-08 19:23:39 +05:30
import { mapActions, mapState, mapGetters } from 'vuex';
2019-09-04 21:01:54 +05:30
import IdeStatusList from 'ee_else_ce/ide/components/ide_status_list.vue';
2018-05-09 12:01:36 +05:30
import icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import timeAgoMixin from '~/vue_shared/mixins/timeago';
2018-11-08 19:23:39 +05:30
import CiIcon from '../../vue_shared/components/ci_icon.vue';
2018-10-15 14:42:47 +05:30
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
2018-11-18 11:00:15 +05:30
import { rightSidebarViews } from '../constants';
2018-05-09 12:01:36 +05:30
export default {
components: {
icon,
2018-10-15 14:42:47 +05:30
userAvatarImage,
2018-11-08 19:23:39 +05:30
CiIcon,
2019-09-04 21:01:54 +05:30
IdeStatusList,
2018-05-09 12:01:36 +05:30
},
directives: {
tooltip,
},
mixins: [timeAgoMixin],
2018-10-15 14:42:47 +05:30
data() {
return {
lastCommitFormatedAge: null,
};
},
computed: {
2018-11-08 19:23:39 +05:30
...mapState(['currentBranchId', 'currentProjectId']),
2018-10-15 14:42:47 +05:30
...mapGetters(['currentProject', 'lastCommit']),
2018-11-08 19:23:39 +05:30
...mapState('pipelines', ['latestPipeline']),
},
watch: {
lastCommit() {
this.initPipelinePolling();
},
2018-10-15 14:42:47 +05:30
},
mounted() {
this.startTimer();
},
beforeDestroy() {
if (this.intervalId) {
clearInterval(this.intervalId);
}
2018-11-08 19:23:39 +05:30
this.stopPipelinePolling();
2018-10-15 14:42:47 +05:30
},
methods: {
2018-12-05 23:21:45 +05:30
...mapActions('rightPane', {
openRightPane: 'open',
}),
2018-11-08 19:23:39 +05:30
...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
2018-10-15 14:42:47 +05:30
startTimer() {
this.intervalId = setInterval(() => {
this.commitAgeUpdate();
}, 1000);
},
2018-11-08 19:23:39 +05:30
initPipelinePolling() {
if (this.lastCommit) {
this.fetchLatestPipeline();
}
},
2018-10-15 14:42:47 +05:30
commitAgeUpdate() {
if (this.lastCommit) {
this.lastCommitFormatedAge = this.timeFormated(this.lastCommit.committed_date);
}
},
getCommitPath(shortSha) {
return `${this.currentProject.web_url}/commit/${shortSha}`;
2018-05-09 12:01:36 +05:30
},
},
2018-11-18 11:00:15 +05:30
rightSidebarViews,
2018-05-09 12:01:36 +05:30
};
</script>
<template>
2018-10-15 14:42:47 +05:30
<footer class="ide-status-bar">
2019-02-15 15:39:39 +05:30
<div v-if="lastCommit" class="ide-status-branch">
<span v-if="latestPipeline && latestPipeline.details" class="ide-status-pipeline">
2018-11-18 11:00:15 +05:30
<button
type="button"
class="p-0 border-0 h-50"
2019-03-02 22:35:43 +05:30
@click="openRightPane($options.rightSidebarViews.pipelines)"
2018-11-18 11:00:15 +05:30
>
<ci-icon
v-tooltip
:status="latestPipeline.details.status"
:title="latestPipeline.details.status.text"
/>
</button>
2018-11-08 19:23:39 +05:30
Pipeline
2019-02-15 15:39:39 +05:30
<a :href="latestPipeline.details.status.details_path" class="monospace"
>#{{ latestPipeline.id }}</a
>
{{ latestPipeline.details.status.text }} for
2018-11-08 19:23:39 +05:30
</span>
2019-02-15 15:39:39 +05:30
<icon name="commit" />
2018-10-15 14:42:47 +05:30
<a
v-tooltip
:title="lastCommit.message"
:href="getCommitPath(lastCommit.short_id)"
2018-11-08 19:23:39 +05:30
class="commit-sha"
2019-02-15 15:39:39 +05:30
>{{ lastCommit.short_id }}</a
>
2019-03-02 22:35:43 +05:30
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 }}
2018-10-15 14:42:47 +05:30
<time
v-tooltip
:datetime="lastCommit.committed_date"
:title="tooltipTitle(lastCommit.committed_date)"
2018-11-08 19:23:39 +05:30
data-placement="top"
data-container="body"
2019-03-02 22:35:43 +05:30
>{{ lastCommitFormatedAge }}</time
2018-10-15 14:42:47 +05:30
>
2018-05-09 12:01:36 +05:30
</div>
2019-09-04 21:01:54 +05:30
<ide-status-list class="ml-auto" />
2018-10-15 14:42:47 +05:30
</footer>
2018-05-09 12:01:36 +05:30
</template>