110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
<script>
|
|
import { mapActions, mapGetters, mapState } from 'vuex';
|
|
import { escape } from 'lodash';
|
|
import { GlLoadingIcon, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
|
|
import { sprintf, __ } from '../../../locale';
|
|
import CiIcon from '../../../vue_shared/components/ci_icon.vue';
|
|
import Tabs from '../../../vue_shared/components/tabs/tabs';
|
|
import Tab from '../../../vue_shared/components/tabs/tab.vue';
|
|
import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue';
|
|
import JobsList from '../jobs/list.vue';
|
|
|
|
import IDEServices from '~/ide/services';
|
|
|
|
export default {
|
|
components: {
|
|
GlIcon,
|
|
CiIcon,
|
|
Tabs,
|
|
Tab,
|
|
JobsList,
|
|
EmptyState,
|
|
GlLoadingIcon,
|
|
},
|
|
directives: {
|
|
SafeHtml,
|
|
},
|
|
computed: {
|
|
...mapState(['pipelinesEmptyStateSvgPath', 'links']),
|
|
...mapGetters(['currentProject']),
|
|
...mapGetters('pipelines', ['jobsCount', 'failedJobsCount', 'failedStages', 'pipelineFailed']),
|
|
...mapState('pipelines', [
|
|
'isLoadingPipeline',
|
|
'hasLoadedPipeline',
|
|
'latestPipeline',
|
|
'stages',
|
|
'isLoadingJobs',
|
|
]),
|
|
ciLintText() {
|
|
return sprintf(
|
|
__('You can test your .gitlab-ci.yml in %{linkStart}CI Lint%{linkEnd}.'),
|
|
{
|
|
linkStart: `<a href="${escape(this.currentProject.web_url)}/-/ci/lint">`,
|
|
linkEnd: '</a>',
|
|
},
|
|
false,
|
|
);
|
|
},
|
|
showLoadingIcon() {
|
|
return this.isLoadingPipeline && !this.hasLoadedPipeline;
|
|
},
|
|
},
|
|
created() {
|
|
this.fetchLatestPipeline();
|
|
IDEServices.pingUsage(this.currentProject.path_with_namespace);
|
|
},
|
|
methods: {
|
|
...mapActions('pipelines', ['fetchLatestPipeline']),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ide-pipeline">
|
|
<gl-loading-icon v-if="showLoadingIcon" size="lg" class="gl-mt-3" />
|
|
<template v-else-if="hasLoadedPipeline">
|
|
<header v-if="latestPipeline" class="ide-tree-header ide-pipeline-header">
|
|
<ci-icon :status="latestPipeline.details.status" :size="24" class="d-flex" />
|
|
<span class="gl-ml-3">
|
|
<strong> {{ __('Pipeline') }} </strong>
|
|
<a
|
|
:href="latestPipeline.path"
|
|
target="_blank"
|
|
class="ide-external-link position-relative"
|
|
>
|
|
#{{ latestPipeline.id }} <gl-icon :size="12" name="external-link" />
|
|
</a>
|
|
</span>
|
|
</header>
|
|
<empty-state
|
|
v-if="!latestPipeline"
|
|
:help-page-path="links.ciHelpPagePath"
|
|
:empty-state-svg-path="pipelinesEmptyStateSvgPath"
|
|
:can-set-ci="true"
|
|
class="mb-auto mt-auto"
|
|
/>
|
|
<div v-else-if="latestPipeline.yamlError" class="bs-callout bs-callout-danger">
|
|
<p class="gl-mb-0">{{ __('Found errors in your .gitlab-ci.yml:') }}</p>
|
|
<p class="gl-mb-0 break-word">{{ latestPipeline.yamlError }}</p>
|
|
<p v-safe-html="ciLintText" class="gl-mb-0"></p>
|
|
</div>
|
|
<tabs v-else class="ide-pipeline-list">
|
|
<tab :active="!pipelineFailed">
|
|
<template #title>
|
|
{{ __('Jobs') }}
|
|
<span v-if="jobsCount" class="badge badge-pill"> {{ jobsCount }} </span>
|
|
</template>
|
|
<jobs-list :loading="isLoadingJobs" :stages="stages" />
|
|
</tab>
|
|
<tab :active="pipelineFailed">
|
|
<template #title>
|
|
{{ __('Failed Jobs') }}
|
|
<span v-if="failedJobsCount" class="badge badge-pill"> {{ failedJobsCount }} </span>
|
|
</template>
|
|
<jobs-list :loading="isLoadingJobs" :stages="failedStages" />
|
|
</tab>
|
|
</tabs>
|
|
</template>
|
|
</div>
|
|
</template>
|