Skip to content

G
gitlab-ce
Commit 86ed0dcc authored by Kamil Trzciński's avatar Kamil Trzciński
Browse files
Options

Merge branch '7861-cross-project-pipeline-dashboard-mvc' into 'master' 

Resolve "Cross-Project Pipeline Dashboard MVC"

Closes #7861

See merge request gitlab-org/gitlab-ee!9197
parents 65d0fec0 0748ba75
Show whitespace changes
Inline Side-by-side
Showing with 1065 additions and 87 deletions
ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue
View file @ 86ed0dcc
<script> <script>
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlDashboardSkeleton } from '@gitlab/ui';
import DashboardProject from './project.vue'; import DashboardProject from './project.vue';
import NewDashboardProject from './new_project.vue';
import ProjectSearch from './project_search.vue'; import ProjectSearch from './project_search.vue';
export default { export default {
components: { components: {
DashboardProject, DashboardProject,
NewDashboardProject,
ProjectSearch, ProjectSearch,
GlLoadingIcon, GlLoadingIcon,
GlDashboardSkeleton,
}, },
props: { props: {
addPath: { addPath: {
...@@ -33,6 +36,15 @@ export default { ...@@ -33,6 +36,15 @@ export default {
addIsDisabled() { addIsDisabled() {
return !this.projectTokens.length; return !this.projectTokens.length;
}, },
showNewPipelineDashboard() {
return gon && gon.features && gon.features.pipelineDashboard;
},
dashboardClasses() {
return {
'm-0': !this.showNewPipelineDashboard,
'dashboard-cards': this.showNewPipelineDashboard,
};
},
}, },
created() { created() {
this.setProjectEndpoints({ this.setProjectEndpoints({
...@@ -73,7 +85,13 @@ export default { ...@@ -73,7 +85,13 @@ export default {
</div> </div>
</div> </div>
<div class="prepend-top-default"> <div class="prepend-top-default">
<div v-if="projects.length" class="row m-0 prepend-top-default"> <div v-if="projects.length" :class="dashboardClasses" class="row prepend-top-default">
<template v-if="showNewPipelineDashboard">
<div v-for="project in projects" :key="project.id" class="col-12 col-md-6 col-xl-4 px-2">
<new-dashboard-project :project="project" />
</div>
</template>
<template v-else>
<div <div
v-for="project in projects" v-for="project in projects"
:key="project.id" :key="project.id"
...@@ -81,6 +99,7 @@ export default { ...@@ -81,6 +99,7 @@ export default {
> >
<dashboard-project :project="project" /> <dashboard-project :project="project" />
</div> </div>
</template>
</div> </div>
<div v-else-if="!isLoadingProjects" class="row prepend-top-20 text-center"> <div v-else-if="!isLoadingProjects" class="row prepend-top-20 text-center">
<div class="col-12 d-flex justify-content-center svg-content"> <div class="col-12 d-flex justify-content-center svg-content">
...@@ -106,6 +125,7 @@ export default { ...@@ -106,6 +125,7 @@ export default {
</a> </a>
</div> </div>
</div> </div>
<gl-dashboard-skeleton v-else-if="showNewPipelineDashboard" />
<gl-loading-icon v-else :size="2" class="prepend-top-20" /> <gl-loading-icon v-else :size="2" class="prepend-top-20" />
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/operations/components/dashboard/new_alerts.vue 0 → 100644
View file @ 86ed0dcc
<script>
import { __, n__, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
Icon,
},
props: {
count: {
type: Number,
required: false,
default: 0,
},
},
computed: {
alertClasses() {
return {
'text-tertiary': this.count <= 0,
'text-warning': this.count > 0,
};
},
alertCount() {
return sprintf(__('%{count} %{alerts}'), {
count: this.count,
alerts: this.pluralizedAlerts,
});
},
pluralizedAlerts() {
return n__('Alert', 'Alerts', this.count);
},
},
};
</script>
<template>
<div class="dashboard-card-alert row">
<div class="col-12">
<icon
:class="alertClasses"
class="align-text-bottom js-dashboard-alerts-icon"
name="warning"
/>
<span class="js-alert-count text-secondary prepend-left-4"> {{ alertCount }} </span>
</div>
</div>
</template>
ee/app/assets/javascripts/operations/components/dashboard/new_project.vue 0 → 100644
View file @ 86ed0dcc
<script>
import { mapActions } from 'vuex';
import _ from 'underscore';
import { GlTooltip } from '@gitlab/ui';
import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import Commit from '~/vue_shared/components/commit.vue';
import ProjectHeader from './new_project_header.vue';
import Alerts from './new_alerts.vue';
import ProjectPipeline from './project_pipeline.vue';
import { STATUS_FAILED, STATUS_RUNNING } from '../../constants';
export default {
components: {
ProjectHeader,
UserAvatarLink,
Commit,
Alerts,
ProjectPipeline,
GlTooltip,
Icon,
},
mixins: [timeagoMixin],
props: {
project: {
type: Object,
required: true,
},
},
tooltips: {
timeAgo: __('Finished'),
triggerer: __('Triggerer'),
},
computed: {
hasPipelineFailed() {
return (
this.lastPipeline &&
this.lastPipeline.details &&
this.lastPipeline.details.status &&
this.lastPipeline.details.status.group === STATUS_FAILED
);
},
hasPipelineErrors() {
return this.project.alert_count > 0;
},
cardClasses() {
return {
'dashboard-card-body-warning': !this.hasPipelineFailed && this.hasPipelineErrors,
'dashboard-card-body-failed': this.hasPipelineFailed,
'bg-secondary': !this.hasPipelineFailed && !this.hasPipelineErrors,
};
},
noPipelineMessage() {
return __('The branch for this project has no active pipeline configuration.');
},
user() {
return this.lastPipeline && !_.isEmpty(this.lastPipeline.user)
? this.lastPipeline.user
: null;
},
lastPipeline() {
return !_.isEmpty(this.project.last_pipeline) ? this.project.last_pipeline : null;
},
commitRef() {
return this.lastPipeline && !_.isEmpty(this.lastPipeline.ref)
? {
...this.lastPipeline.ref,
ref_url: this.lastPipeline.ref.path,
}
: {};
},
finishedTime() {
return (
this.lastPipeline && this.lastPipeline.details && this.lastPipeline.details.finished_at
);
},
finishedTimeTitle() {
return this.tooltipTitle(this.finishedTime);
},
shouldShowTimeAgo() {
return (
this.lastPipeline &&
this.lastPipeline.details &&
this.lastPipeline.details.status &&
this.lastPipeline.details.status.group !== STATUS_RUNNING &&
this.finishedTime
);
},
},
methods: {
...mapActions(['removeProject']),
},
};
</script>
<template>
<div class="dashboard-card card border-0">
<project-header
:project="project"
:has-pipeline-failed="hasPipelineFailed"
:has-errors="hasPipelineErrors"
@remove="removeProject"
/>
<div :class="cardClasses" class="dashboard-card-body card-body">
<div v-if="lastPipeline" class="row">
<div class="col-1 align-self-center">
<user-avatar-link
v-if="user"
:link-href="user.path"
:img-src="user.avatar_url"
:tooltip-text="user.name"
:img-size="32"
/>
</div>
<div class="col-10 col-sm-6 pr-0 pl-5 align-self-center align-middle ci-table">
<commit
:tag="commitRef.tag"
:commit-ref="commitRef"
:short-sha="lastPipeline.commit.short_id"
:commit-url="lastPipeline.commit.commit_url"
:title="lastPipeline.commit.title"
:author="lastPipeline.commit.author"
:show-branch="true"
/>
</div>
<div class="col-sm-5 pl-0 text-right align-self-center d-none d-sm-block">
<div v-if="shouldShowTimeAgo" class="text-secondary">
<icon
name="clock"
class="dashboard-card-time-ago-icon align-text-bottom js-dashboard-project-clock-icon"
/>
<time ref="timeAgo" class="js-dashboard-project-time-ago">
{{ timeFormated(finishedTime) }}
</time>
<gl-tooltip :target="() => $refs.timeAgo">
<div class="bold">{{ $options.tooltips.timeAgo }}</div>
<div>{{ finishedTimeTitle }}</div>
</gl-tooltip>
</div>
<alerts :count="project.alert_count" />
</div>
<div class="col-12">
<project-pipeline
:project-name="project.name_with_namespace"
:last-pipeline="lastPipeline"
:has-pipeline-failed="hasPipelineFailed"
/>
</div>
</div>
<div v-else class="h-100 d-flex justify-content-center align-items-center">
<div class="text-plain text-metric text-center bold w-75">
{{ noPipelineMessage }}
</div>
</div>
</div>
</div>
</template>
ee/app/assets/javascripts/operations/components/dashboard/new_project_header.vue 0 → 100644
View file @ 86ed0dcc
<script>
import Icon from '~/vue_shared/components/icon.vue';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
export default {
components: {
Icon,
ProjectAvatar,
GlButton,
GlLink,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
project: {
type: Object,
required: true,
},
hasPipelineFailed: {
type: Boolean,
required: false,
default: false,
},
hasErrors: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
headerClasses() {
return {
'dashboard-card-header-warning': this.hasErrors,
'dashboard-card-header-failed': this.hasPipelineFailed,
'bg-light': !this.hasErrors && !this.hasPipelineFailed,
};
},
},
methods: {
onRemove() {
this.$emit('remove', this.project.remove_path);
},
},
};
</script>
<template>
<div :class="headerClasses" class="card-header border-0 py-2 d-flex align-items-center">
<project-avatar :project="project" :size="24" class="flex-shrink-0 border rounded" />
<div class="flex-grow-1 block-truncated">
<gl-link
v-gl-tooltip
class="js-project-link cgray"
:href="project.web_url"
:title="project.name_with_namespace"
>
<span class="js-project-namespace">{{ project.namespace.name }} /</span>
<span class="js-project-name bold"> {{ project.name }}</span>
</gl-link>
</div>
<div class="dropdown js-more-actions">
<gl-button
v-gl-tooltip
class="js-more-actions-toggle d-flex align-items-center bg-transparent border-0 p-0 ml-2"
data-toggle="dropdown"
:title="__('More actions')"
>
<icon name="ellipsis_v" class="text-secondary" />
</gl-button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<gl-button class="btn btn-transparent js-remove-button" @click="onRemove">
<span class="text-danger"> {{ __('Remove') }} </span>
</gl-button>
</li>
</ul>
</div>
</div>
</template>
ee/app/assets/javascripts/operations/components/dashboard/project.vue
View file @ 86ed0dcc
...@@ -79,7 +79,8 @@ export default { ...@@ -79,7 +79,8 @@ export default {
> >
<div class="d-flex align-items-end justify-content-end"> <div class="d-flex align-items-end justify-content-end">
<div class="prepend-top-default text-secondary d-flex align-items-center flex-wrap"> <div class="prepend-top-default text-secondary d-flex align-items-center flex-wrap">
<icon name="calendar" class="append-right-4" /> {{ lastDeployed }} <icon name="calendar" class="append-right-4 js-dashboard-project-calendar-icon" />
{{ lastDeployed }}
</div> </div>
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/operations/components/dashboard/project_pipeline.vue 0 → 100644
View file @ 86ed0dcc
<script>
import { __, sprintf } from '~/locale';
import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Icon from '~/vue_shared/components/icon.vue';
import { GlLink, GlTooltip } from '@gitlab/ui';
import { STATUS_FAILED } from '../../constants';
export default {
components: {
CiBadgeLink,
CiIcon,
Icon,
GlLink,
GlTooltip,
},
props: {
lastPipeline: {
type: Object,
required: true,
},
hasPipelineFailed: {
type: Boolean,
required: false,
default: false,
},
},
relations: {
current: __('Current Project'),
downstream: __('Downstream'),
upstream: __('Upstream'),
},
computed: {
downstreamPipelines() {
return this.lastPipeline.triggered;
},
upstreamPipeline() {
return this.lastPipeline.triggered_by;
},
downstreamPipelinesHaveFailed() {
return (
this.downstreamPipelines &&
this.downstreamPipelines.some(
pipeline =>
pipeline.details &&
pipeline.details.status &&
pipeline.details.status.group === STATUS_FAILED,
)
);
},
pipelineClasses() {
const hasFailures = this.hasPipelineFailed || this.downstreamPipelinesHaveFailed;
return {
'dashboard-card-footer-failed': hasFailures,
'bg-light': !hasFailures,
};
},
hasDownstreamPipelines() {
return this.downstreamPipelines && this.downstreamPipelines.length > 0;
},
hasExtraDownstream() {
return this.downstreamCount > this.shownDownstreamCount;
},
/*
Returns a subset of the downstream pipelines, because we can only fit 5 of them
on a mobile screen before we have to truncate.
*/
shownDownstreamPipelines() {
return this.downstreamPipelines.slice(0, 5);
},
shownDownstreamCount() {
return this.shownDownstreamPipelines.length;
},
downstreamCount() {
return this.downstreamPipelines.length;
},
/*
Returns the number of extra downstream status to be shown in the icon
The plus sign is only shown on single digits, otherwise the number is cut off
*/
extraDownstreamText() {
const extra = this.downstreamCount - this.shownDownstreamCount;
const plus = extra < 10 ? '+' : '';
return `${plus}${extra}`;
},
extraDownstreamTitle() {
const extra = this.downstreamCount - this.shownDownstreamCount;
return sprintf('%{extra} more downstream pipelines', {
extra,
});
},
},
};
</script>
<template>
<div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3">
<template v-if="upstreamPipeline">
<gl-link
ref="upstreamStatus"
:href="upstreamPipeline.details.status.details_path"
class="d-inline-block align-middle"
>
<ci-icon
class="d-flex js-upstream-pipeline-status"
:status="upstreamPipeline.details.status"
/>
</gl-link>
<gl-tooltip :target="() => $refs.upstreamStatus">
<div class="bold">{{ $options.relations.upstream }}</div>
<div>{{ upstreamPipeline.details.status.tooltip }}</div>
<div class="text-tertiary">{{ upstreamPipeline.project.full_name }}</div>
</gl-tooltip>
<icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
</template>
<ci-badge-link
ref="status"
class="bg-white"
:status="lastPipeline.details.status"
:show-text="true"
/>
<gl-tooltip :target="() => $refs.status">
<div class="bold">{{ $options.relations.current }}</div>
<div>{{ lastPipeline.details.status.tooltip }}</div>
</gl-tooltip>
<template v-if="hasDownstreamPipelines">
<icon name="arrow-right" class="dashboard-card-footer-arrow align-middle mx-1" />
<div
v-for="(pipeline, index) in shownDownstreamPipelines"
:key="pipeline.id"
:style="`z-index: ${shownDownstreamPipelines.length + 1 - index}`"
class="dashboard-card-footer-downstream position-relative d-inline"
>
<gl-link
ref="downstreamStatus"
:href="pipeline.details.status.details_path"
class="d-inline-block align-middle"
>
<ci-icon class="d-flex js-downstream-pipeline-status" :status="pipeline.details.status" />
</gl-link>
<gl-tooltip :target="() => $refs.downstreamStatus[index]">
<div class="bold">{{ $options.relations.downstream }}</div>
<div>{{ pipeline.details.status.tooltip }}</div>
<div class="text-tertiary">{{ pipeline.project.full_name }}</div>
</gl-tooltip>
</div>
<div v-if="hasExtraDownstream" class="d-inline">
<gl-link
ref="extraDownstream"
:href="lastPipeline.details.status.details_path"
class="dashboard-card-footer-extra rounded-circle d-inline-block bold align-middle text-white text-center js-downstream-extra-icon"
>
{{ extraDownstreamText }}
</gl-link>
<gl-tooltip :target="() => $refs.extraDownstream">
{{ extraDownstreamTitle }}
</gl-tooltip>
</div>
</template>
</div>
</template>
ee/app/assets/javascripts/operations/constants.js 0 → 100644
View file @ 86ed0dcc
export const STATUS_FAILED = 'failed';
export const STATUS_RUNNING = 'running';
ee/app/assets/javascripts/operations/store/actions.js
View file @ 86ed0dcc
import Visibility from 'visibilityjs';
import Api from '~/api'; import Api from '~/api';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import Poll from '~/lib/utils/poll';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { __, s__, n__, sprintf } from '~/locale'; import { __, s__, n__, sprintf } from '~/locale';
import * as types from './mutation_types'; import * as types from './mutation_types';
let eTagPoll;
export const clearProjectsEtagPoll = () => {
eTagPoll = null;
};
export const stopProjectsPolling = () => {
if (eTagPoll) eTagPoll.stop();
};
export const restartProjectsPolling = () => {
if (eTagPoll) eTagPoll.restart();
};
export const forceProjectsRequest = () => {
if (eTagPoll) eTagPoll.makeRequest();
};
export const addProjectsToDashboard = ({ state, dispatch }) => { export const addProjectsToDashboard = ({ state, dispatch }) => {
axios axios
.post(state.projectEndpoints.add, { .post(state.projectEndpoints.add, {
...@@ -51,7 +68,9 @@ export const requestAddProjectsToDashboardSuccess = ({ dispatch, state }, data) ...@@ -51,7 +68,9 @@ export const requestAddProjectsToDashboardSuccess = ({ dispatch, state }, data)
s__( s__(
'OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for public projects, and private projects in groups with a Gold plan.', 'OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for public projects, and private projects in groups with a Gold plan.',
), ),
{ invalidProjects }, {
invalidProjects,
},
), ),
); );
dispatch('filterProjectTokensById', invalid); dispatch('filterProjectTokensById', invalid);
...@@ -82,17 +101,34 @@ export const clearProjectSearchResults = ({ commit }) => { ...@@ -82,17 +101,34 @@ export const clearProjectSearchResults = ({ commit }) => {
}; };
export const fetchProjects = ({ state, dispatch }) => { export const fetchProjects = ({ state, dispatch }) => {
if (eTagPoll) return;
dispatch('requestProjects'); dispatch('requestProjects');
axios
.get(state.projectEndpoints.list) eTagPoll = new Poll({
.then(response => dispatch('receiveProjectsSuccess', response.data)) resource: {
.catch(() => dispatch('receiveProjectsError')) fetchProjects: () => axios.get(state.projectEndpoints.list),
.then(() => dispatch('requestProjects')) },
.catch(() => {}); method: 'fetchProjects',
successCallback: ({ data }) => dispatch('receiveProjectsSuccess', data),
errorCallback: () => dispatch('receiveProjectsError'),
});
if (!Visibility.hidden()) {
eTagPoll.makeRequest();
}
Visibility.change(() => {
if (!Visibility.hidden()) {
dispatch('restartProjectsPolling');
} else {
dispatch('stopProjectsPolling');
}
});
}; };
export const requestProjects = ({ commit }) => { export const requestProjects = ({ commit }) => {
commit(types.TOGGLE_IS_LOADING_PROJECTS); commit(types.REQUEST_PROJECTS);
}; };
export const receiveProjectsSuccess = ({ commit }, data) => { export const receiveProjectsSuccess = ({ commit }, data) => {
...@@ -112,7 +148,7 @@ export const removeProject = ({ dispatch }, removePath) => { ...@@ -112,7 +148,7 @@ export const removeProject = ({ dispatch }, removePath) => {
}; };
export const requestRemoveProjectSuccess = ({ dispatch }) => { export const requestRemoveProjectSuccess = ({ dispatch }) => {
dispatch('fetchProjects'); dispatch('forceProjectsRequest');
}; };
export const requestRemoveProjectError = () => { export const requestRemoveProjectError = () => {
......
ee/app/assets/javascripts/operations/store/mutation_types.js
View file @ 86ed0dcc
...@@ -10,5 +10,4 @@ export const SET_PROJECTS = 'SET_PROJECTS'; ...@@ -10,5 +10,4 @@ export const SET_PROJECTS = 'SET_PROJECTS';
export const SET_PROJECT_TOKENS = 'SET_PROJECT_TOKENS'; export const SET_PROJECT_TOKENS = 'SET_PROJECT_TOKENS';
export const REMOVE_PROJECT_TOKEN_AT = 'REMOVE_PROJECT_TOKEN_AT'; export const REMOVE_PROJECT_TOKEN_AT = 'REMOVE_PROJECT_TOKEN_AT';
export const REQUEST_PROJECTS = 'REQUEST_PROJECTS';
export const TOGGLE_IS_LOADING_PROJECTS = 'TOGGLE_IS_LOADING_PROJECTS';
ee/app/assets/javascripts/operations/store/mutations.js
View file @ 86ed0dcc
...@@ -27,6 +27,7 @@ export default { ...@@ -27,6 +27,7 @@ export default {
}, },
[types.SET_PROJECTS](state, projects) { [types.SET_PROJECTS](state, projects) {
state.projects = projects || []; state.projects = projects || [];
state.isLoadingProjects = false;
}, },
[types.SET_PROJECT_TOKENS](state, tokens) { [types.SET_PROJECT_TOKENS](state, tokens) {
state.projectTokens = tokens; state.projectTokens = tokens;
...@@ -34,7 +35,7 @@ export default { ...@@ -34,7 +35,7 @@ export default {
[types.REMOVE_PROJECT_TOKEN_AT](state, index) { [types.REMOVE_PROJECT_TOKEN_AT](state, index) {
state.projectTokens.splice(index, 1); state.projectTokens.splice(index, 1);
}, },
[types.TOGGLE_IS_LOADING_PROJECTS](state) { [types.REQUEST_PROJECTS](state) {
state.isLoadingProjects = !state.isLoadingProjects; state.isLoadingProjects = true;
}, },
}; };
ee/app/assets/stylesheets/pages/operations.scss
View file @ 86ed0dcc
...@@ -14,25 +14,6 @@ ...@@ -14,25 +14,6 @@
} }
} }
.operations-dashboard {
.branch-commit {
* {
vertical-align: middle;
}
.icon-container,
.commit-icon {
display: inline;
color: $gl-text-color-tertiary;
}
.ref-name {
font-weight: $gl-font-weight-bold;
color: $gl-text-color;
}
}
}
.tokenized-input-wrapper { .tokenized-input-wrapper {
height: auto; height: auto;
padding: 2px $gl-padding-8; padding: 2px $gl-padding-8;
......
ee/app/controllers/operations_controller.rb
View file @ 86ed0dcc
...@@ -3,12 +3,19 @@ ...@@ -3,12 +3,19 @@
class OperationsController < ApplicationController class OperationsController < ApplicationController
before_action :authorize_read_operations_dashboard! before_action :authorize_read_operations_dashboard!
before_action do
push_frontend_feature_flag(:pipeline_dashboard)
end
respond_to :json, only: [:list] respond_to :json, only: [:list]
POLLING_INTERVAL = 120_000
def index def index
end end
def list def list
Gitlab::PollingInterval.set_header(response, interval: POLLING_INTERVAL)
projects = load_projects(current_user) projects = load_projects(current_user)
render json: { projects: serialize_as_json(projects) } render json: { projects: serialize_as_json(projects) }
......
ee/changelogs/unreleased/7861-cross-project-pipeline-dashboard-mvc.yml 0 → 100644
View file @ 86ed0dcc
---
title: Adding pipelines to the operations dashboard
merge_request: 9197
author:
type: added
ee/spec/javascripts/operations/components/dashboard/new_alerts_spec.js 0 → 100644
View file @ 86ed0dcc
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Alerts from 'ee/operations/components/dashboard/new_alerts.vue';
const localVue = createLocalVue();
describe('alerts component', () => {
const AlertsComponent = localVue.extend(Alerts);
let wrapper;
const mount = (propsData = {}) => shallowMount(AlertsComponent, { propsData, sync: false });
afterEach(() => {
wrapper.destroy();
});
it('renders multiple alert count when multiple alerts are present', () => {
wrapper = mount({
count: 2,
});
expect(wrapper.element.querySelector('.js-alert-count').innerText.trim()).toBe('2 Alerts');
});
it('renders count for one alert when there is one alert', () => {
wrapper = mount({
count: 1,
});
expect(wrapper.element.querySelector('.js-alert-count').innerText.trim()).toBe('1 Alert');
});
describe('wrapped components', () => {
describe('icon', () => {
it('renders warning', () => {
wrapper = mount({
count: 1,
});
expect(wrapper.element.querySelector('.js-dashboard-alerts-icon')).not.toBe(null);
});
});
});
});
ee/spec/javascripts/operations/components/dashboard/new_project_header_spec.js 0 → 100644
View file @ 86ed0dcc
import { shallowMount, createLocalVue } from '@vue/test-utils';
import ProjectHeader from 'ee/operations/components/dashboard/new_project_header.vue';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
import { removeWhitespace } from 'spec/helpers/vue_component_helper';
import { mockOneProject, mockText } from '../../new_mock_data';
const localVue = createLocalVue();
describe('project header component', () => {
let wrapper;
const factory = () => {
wrapper = shallowMount(localVue.extend(ProjectHeader), {
propsData: {
project: mockOneProject,
},
localVue,
sync: false,
});
};
beforeEach(() => {
factory();
});
afterEach(() => {
wrapper.destroy();
});
it('renders project name with namespace', () => {
const namespace = wrapper.find('.js-project-namespace').text();
const name = wrapper.find('.js-project-name').text();
expect(removeWhitespace(namespace).trim()).toBe(`${mockOneProject.namespace.name} /`);
expect(removeWhitespace(name).trim()).toBe(mockOneProject.name);
});
it('links project name to project', () => {
const path = mockOneProject.web_url;
expect(wrapper.find('.js-project-link').attributes('href')).toBe(path);
});
describe('wrapped components', () => {
describe('project avatar', () => {
it('renders', () => {
expect(wrapper.findAll(ProjectAvatar).length).toBe(1);
});
it('binds project', () => {
expect(wrapper.find(ProjectAvatar).props('project')).toEqual(mockOneProject);
});
});
});
describe('dropdown menu', () => {
it('renders removal button', () => {
expect(
wrapper
.find('.js-remove-button')
.text()
.trim(),
).toBe(mockText.REMOVE_PROJECT);
});
it('emits project removal link on click', () => {
wrapper.find('.js-remove-button').vm.$emit('click');
expect(wrapper.emittedByOrder()).toEqual([
{ name: 'remove', args: [mockOneProject.remove_path] },
]);
});
});
});
ee/spec/javascripts/operations/components/dashboard/new_project_spec.js 0 → 100644
View file @ 86ed0dcc
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Commit from '~/vue_shared/components/commit.vue';
import Project from 'ee/operations/components/dashboard/new_project.vue';
import ProjectHeader from 'ee/operations/components/dashboard/new_project_header.vue';
import Alerts from 'ee/operations/components/dashboard/new_alerts.vue';
import store from 'ee/operations/store';
import { mockOneProject } from '../../new_mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('project component', () => {
const ProjectComponent = localVue.extend(Project);
let wrapper;
beforeEach(() => {
wrapper = shallowMount(ProjectComponent, {
sync: false,
store,
localVue,
propsData: { project: mockOneProject },
});
});
afterEach(() => {
wrapper.destroy();
});
describe('wrapped components', () => {
describe('project header', () => {
it('binds project', () => {
const header = wrapper.find(ProjectHeader);
expect(header.props('project')).toEqual(mockOneProject);
});
});
describe('alerts', () => {
it('binds alert count to count', () => {
const alert = wrapper.find(Alerts);
expect(alert.props('count')).toBe(mockOneProject.alert_count);
});
});
describe('commit', () => {
let commit;
beforeEach(() => {
commit = wrapper.find(Commit);
});
it('binds commitRef', () => {
expect(commit.props('commitRef')).toBe(wrapper.vm.commitRef);
});
it('binds short_id to shortSha', () => {
expect(commit.props('shortSha')).toBe(
wrapper.props().project.last_pipeline.commit.short_id,
);
});
it('binds commitUrl', () => {
expect(commit.props('commitUrl')).toBe(
wrapper.props().project.last_pipeline.commit.commit_url,
);
});
it('binds title', () => {
expect(commit.props('title')).toBe(wrapper.props().project.last_pipeline.commit.title);
});
it('binds author', () => {
expect(commit.props('author')).toBe(wrapper.props().project.last_pipeline.commit.author);
});
it('binds tag', () => {
expect(commit.props('tag')).toBe(wrapper.props().project.last_pipeline.ref.tag);
});
});
describe('deploy finished at', () => {
it('renders clock icon', () => {
expect(wrapper.contains('.js-dashboard-project-clock-icon')).toBe(true);
});
it('renders time ago of finished time', () => {
const timeago = '1 day ago';
const container = wrapper.element.querySelector('.js-dashboard-project-time-ago');
expect(container.innerText.trim()).toBe(timeago);
});
});
});
});
ee/spec/javascripts/operations/components/dashboard/project_pipeline_spec.js 0 → 100644
View file @ 86ed0dcc
import { mount, createLocalVue } from '@vue/test-utils';
import ProjectPipeline from 'ee/operations/components/dashboard/project_pipeline.vue';
import { mockPipelineData } from '../../new_mock_data';
const localVue = createLocalVue();
describe('project pipeline component', () => {
const ProjectPipelineComponent = localVue.extend(ProjectPipeline);
let wrapper;
const mountComponent = (propsData = {}) =>
mount(ProjectPipelineComponent, { propsData, sync: false });
afterEach(() => {
wrapper.destroy();
});
describe('current pipeline only', () => {
it('should render success badge', () => {
wrapper = mountComponent({
lastPipeline: mockPipelineData(),
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-ci-status-icon-success')).toBe(true);
});
it('should render failed badge', () => {
wrapper = mountComponent({
lastPipeline: mockPipelineData('failed'),
hasPipelineFailed: true,
});
expect(wrapper.contains('.js-ci-status-icon-failed')).toBe(true);
});
it('should render running badge', () => {
wrapper = mountComponent({
lastPipeline: mockPipelineData('running'),
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-ci-status-icon-running')).toBe(true);
});
});
describe('upstream pipeline', () => {
it('should render upstream success badge', () => {
const lastPipeline = mockPipelineData('success');
lastPipeline.triggered_by = mockPipelineData('success');
wrapper = mountComponent({
lastPipeline,
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-upstream-pipeline-status.js-ci-status-icon-success')).toBe(true);
});
});
describe('downstream pipeline', () => {
it('should render downstream success badge', () => {
const lastPipeline = mockPipelineData('success');
lastPipeline.triggered = [mockPipelineData('success')];
wrapper = mountComponent({
lastPipeline,
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-downstream-pipeline-status.js-ci-status-icon-success')).toBe(
true,
);
});
it('should render downstream failed badge', () => {
const lastPipeline = mockPipelineData('success');
lastPipeline.triggered = [mockPipelineData('failed')];
wrapper = mountComponent({
lastPipeline,
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-downstream-pipeline-status.js-ci-status-icon-failed')).toBe(
true,
);
});
it('should render downstream running badge', () => {
const lastPipeline = mockPipelineData('success');
lastPipeline.triggered = [mockPipelineData('running')];
wrapper = mountComponent({
lastPipeline,
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-downstream-pipeline-status.js-ci-status-icon-running')).toBe(
true,
);
});
it('should render extra downstream icon', () => {
const lastPipeline = mockPipelineData('success');
// 5 is the max we can show, so put 6 in the array
lastPipeline.triggered = Array.from(new Array(6), (val, index) =>
mockPipelineData('running', index),
);
wrapper = mountComponent({
lastPipeline,
hasPipelineFailed: false,
});
expect(wrapper.contains('.js-downstream-extra-icon')).toBe(true);
});
});
});
ee/spec/javascripts/operations/components/dashboard/project_search_spec.js
View file @ 86ed0dcc
...@@ -13,7 +13,10 @@ describe('project search component', () => { ...@@ -13,7 +13,10 @@ describe('project search component', () => {
const mockProjects = mockProjectData(1); const mockProjects = mockProjectData(1);
const [mockOneProject] = mockProjects; const [mockOneProject] = mockProjects;
const mockInputValue = 'mock-inputValue'; const mockInputValue = 'mock-inputValue';
const mount = () => mountComponentWithStore(ProjectSearchComponent, { store }); const mount = () =>
mountComponentWithStore(ProjectSearchComponent, {
store,
});
let vm; let vm;
beforeEach(() => { beforeEach(() => {
...@@ -55,7 +58,9 @@ describe('project search component', () => { ...@@ -55,7 +58,9 @@ describe('project search component', () => {
it('renders search description', () => { it('renders search description', () => {
store.state.inputValue = mockInputValue; store.state.inputValue = mockInputValue;
vm = mountComponentWithStore(ProjectSearchComponent, { store }); vm = mountComponentWithStore(ProjectSearchComponent, {
store,
});
expect(vm.$el.querySelector('.js-search-results').innerText.trim()).toBe( expect(vm.$el.querySelector('.js-search-results').innerText.trim()).toBe(
`"${mockInputValue}" ${mockText.SEARCH_DESCRIPTION_SUFFIX}`, `"${mockInputValue}" ${mockText.SEARCH_DESCRIPTION_SUFFIX}`,
......
ee/spec/javascripts/operations/components/dashboard/project_spec.js
View file @ 86ed0dcc
import Vue from 'vue'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import Vuex from 'vuex';
import Commit from '~/vue_shared/components/commit.vue'; import Commit from '~/vue_shared/components/commit.vue';
import Project from 'ee/operations/components/dashboard/project.vue'; import Project from 'ee/operations/components/dashboard/project.vue';
import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue'; import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
import Alerts from 'ee/operations/components/dashboard/alerts.vue'; import Alerts from 'ee/operations/components/dashboard/alerts.vue';
import { getChildInstances } from '../../helpers'; import store from 'ee/operations/store';
import { mockOneProject } from '../../mock_data'; import { mockOneProject } from '../../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('project component', () => { describe('project component', () => {
const ProjectComponent = Vue.extend(Project); const ProjectComponent = localVue.extend(Project);
const ProjectHeaderComponent = Vue.extend(ProjectHeader); let wrapper;
const AlertsComponent = Vue.extend(Alerts);
const CommitComponent = Vue.extend(Commit);
let vm;
beforeEach(() => { beforeEach(() => {
vm = mountComponentWithStore(ProjectComponent, { wrapper = shallowMount(ProjectComponent, {
props: { sync: false,
store,
localVue,
propsData: {
project: mockOneProject, project: mockOneProject,
}, },
}); });
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
describe('wrapped components', () => { describe('wrapped components', () => {
describe('project header', () => { describe('project header', () => {
it('binds project', () => { it('binds project', () => {
const [header] = getChildInstances(vm, ProjectHeaderComponent); const header = wrapper.find(ProjectHeader);
expect(header.project).toEqual(mockOneProject); expect(header.props('project')).toEqual(mockOneProject);
}); });
}); });
...@@ -39,64 +42,62 @@ describe('project component', () => { ...@@ -39,64 +42,62 @@ describe('project component', () => {
let alert; let alert;
beforeEach(() => { beforeEach(() => {
[alert] = getChildInstances(vm, AlertsComponent); alert = wrapper.find(Alerts);
}); });
it('binds alert count to count', () => { it('binds alert count to count', () => {
expect(alert.count).toBe(mockOneProject.alert_count); expect(alert.props('count')).toBe(mockOneProject.alert_count);
}); });
it('binds last alert', () => { it('binds last alert', () => {
expect(alert.lastAlert).toEqual(mockOneProject.last_alert); expect(alert.props('lastAlert')).toEqual(mockOneProject.last_alert);
}); });
}); });
describe('commit', () => { describe('commit', () => {
let commits;
let commit; let commit;
beforeEach(() => { beforeEach(() => {
commits = getChildInstances(vm, CommitComponent); commit = wrapper.find(Commit);
[commit] = commits;
});
it('renders', () => {
expect(commits.length).toBe(1);
}); });
it('binds commitRef', () => { it('binds commitRef', () => {
expect(commit.commitRef).toBe(vm.commitRef); expect(commit.props('commitRef')).toBe(wrapper.vm.commitRef);
}); });
it('binds short_id to shortSha', () => { it('binds short_id to shortSha', () => {
expect(commit.shortSha).toBe(vm.project.last_deployment.commit.short_id); expect(commit.props().shortSha).toBe(
wrapper.props().project.last_deployment.commit.short_id,
);
}); });
it('binds commitUrl', () => { it('binds commitUrl', () => {
expect(commit.commitUrl).toBe(vm.project.last_deployment.commit.commit_url); expect(commit.props().commitUrl).toBe(
wrapper.props().project.last_deployment.commit.commit_url,
);
}); });
it('binds title', () => { it('binds title', () => {
expect(commit.title).toBe(vm.project.last_deployment.commit.title); expect(commit.props().title).toBe(wrapper.props().project.last_deployment.commit.title);
}); });
it('binds author', () => { it('binds author', () => {
expect(commit.author).toBe(vm.author); expect(commit.props().author).toBe(wrapper.vm.author);
}); });
it('binds tag', () => { it('binds tag', () => {
expect(commit.tag).toBe(vm.project.last_deployment.tag); expect(commit.props().tag).toBe(wrapper.props().project.last_deployment.tag);
}); });
}); });
describe('last deploy', () => { describe('last deploy', () => {
it('renders calendar icon', () => { it('renders calendar icon', () => {
expect(vm.$el.querySelector('.ic-calendar')).not.toBe(null); expect(wrapper.contains('.js-dashboard-project-calendar-icon')).toBe(true);
}); });
it('renders time ago of last deploy', () => { it('renders time ago of last deploy', () => {
const timeago = '1 day ago'; const timeago = '1 day ago';
const container = vm.$el.querySelector('.js-project-container'); const container = wrapper.element.querySelector('.js-project-container');
expect(container.innerText.trim()).toBe(timeago); expect(container.innerText.trim()).toBe(timeago);
}); });
......
ee/spec/javascripts/operations/new_mock_data.js 0 → 100644
View file @ 86ed0dcc
import { TEST_HOST } from 'spec/test_constants';
const AVATAR_URL = `${TEST_HOST}/dummy.jpg`;
export const mockText = {
ADD_PROJECTS: 'Add projects',
ADD_PROJECTS_ERROR: 'Something went wrong, unable to add projects to dashboard',
REMOVE_PROJECT_ERROR: 'Something went wrong, unable to remove project',
DASHBOARD_TITLE: 'Operations Dashboard',
EMPTY_TITLE: 'Add a project to the dashboard',
EMPTY_SUBTITLE:
"The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses.",
EMPTY_SVG_SOURCE: '/assets/illustrations/operations-dashboard_empty.svg',
NO_SEARCH_RESULTS: 'Sorry, no projects matched your search',
RECEIVE_PROJECTS_ERROR: 'Something went wrong, unable to get operations projects',
REMOVE_PROJECT: 'Remove',
SEARCH_PROJECTS: 'Search your projects',
SEARCH_DESCRIPTION_SUFFIX: 'in projects',
};
export function mockPipelineData(
status = 'success',
id = 1,
finishedTimeStamp = new Date(Date.now() - 86400000).toISOString(),
isTag = false,
) {
return {
id,
user: {
id: 1,
name: 'Test',
username: 'test',
state: 'active',
avatar_url: AVATAR_URL,
web_url: '/test',
status_tooltip_html: null,
path: '/test',
},
active: false,
path: '/test/test-project/pipelines/1',
details: {
status: {
icon: `status_${status}`,
text: status,
label: status,
group: status,
tooltip: status,
has_details: true,
details_path: '/test/test-project/pipelines/1',
illustration: null,
},
finished_at: finishedTimeStamp,
},
ref: {
name: 'master',
path: 'test/test-project/commits/master',
tag: isTag,
branch: true,
merge_request: false,
},
commit: {
id: 'e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
short_id: 'e778416d',
title: "Add new file to the branch I'm working on",
message: "Add new file to the branch I'm working on",
author: {
id: 1,
name: 'Test',
username: 'test',
state: 'active',
avatar_url: AVATAR_URL,
status_tooltip_html: null,
path: '/test',
},
commit_url: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
commit_path: '/test/test-project/commit/e778416d94deaf75bdabcc8fdd6b7d21f482bcca',
},
project: {
full_name: 'Test / test-project',
full_path: '/test/test-project',
name: 'test-project',
},
};
}
export function mockProjectData(
projectCount = 1,
currentPipelineStatus = 'success',
upstreamStatus = 'success',
alertCount = 0,
) {
return Array(projectCount)
.fill(null)
.map((_, index) => ({
id: index,
description: '',
name: 'test-project',
name_with_namespace: 'Test / test-project',
path: 'test-project',
path_with_namespace: 'test/test-project',
created_at: '2019-02-01T15:40:27.522Z',
default_branch: 'master',
tag_list: [],
avatar_url: null,
web_url: 'https://mock-web_url/',
namespace: {
id: 1,
name: 'test',
path: 'test',
kind: 'user',
full_path: 'user',
parent_id: null,
},
remove_path: '/-/operations?project_id=1',
last_pipeline: mockPipelineData(currentPipelineStatus),
upstream_pipeline: mockPipelineData(upstreamStatus),
downstream_pipelines: [],
alert_count: alertCount,
}));
}
export const [mockOneProject] = mockProjectData(1);
ee/spec/javascripts/operations/store/actions_spec.js
View file @ 86ed0dcc
...@@ -284,6 +284,10 @@ describe('actions', () => { ...@@ -284,6 +284,10 @@ describe('actions', () => {
}); });
describe('fetchProjects', () => { describe('fetchProjects', () => {
afterEach(() => {
actions.clearProjectsEtagPoll();
});
it('calls project list endpoint', done => { it('calls project list endpoint', done => {
store.state.projectEndpoints.list = mockListEndpoint; store.state.projectEndpoints.list = mockListEndpoint;
mockAxios.onGet(mockListEndpoint).replyOnce(200); mockAxios.onGet(mockListEndpoint).replyOnce(200);
...@@ -293,11 +297,7 @@ describe('actions', () => { ...@@ -293,11 +297,7 @@ describe('actions', () => {
null, null,
store.state, store.state,
[], [],
[ [{ type: 'requestProjects' }, { type: 'receiveProjectsSuccess' }],
{ type: 'requestProjects' },
{ type: 'receiveProjectsSuccess' },
{ type: 'requestProjects' },
],
done, done,
); );
}); });
...@@ -311,11 +311,7 @@ describe('actions', () => { ...@@ -311,11 +311,7 @@ describe('actions', () => {
null, null,
store.state, store.state,
[], [],
[ [{ type: 'requestProjects' }, { type: 'receiveProjectsError' }],
{ type: 'requestProjects' },
{ type: 'receiveProjectsError' },
{ type: 'requestProjects' },
],
done, done,
); );
}); });
...@@ -327,7 +323,7 @@ describe('actions', () => { ...@@ -327,7 +323,7 @@ describe('actions', () => {
actions.requestProjects, actions.requestProjects,
null, null,
store.state, store.state,
[{ type: types.TOGGLE_IS_LOADING_PROJECTS }], [{ type: types.REQUEST_PROJECTS }],
[], [],
done, done,
); );
...@@ -412,7 +408,7 @@ describe('actions', () => { ...@@ -412,7 +408,7 @@ describe('actions', () => {
null, null,
null, null,
[], [],
[{ type: 'fetchProjects' }], [{ type: 'forceProjectsRequest' }],
done, done,
); );
}); });
......
ee/spec/javascripts/operations/store/mutations_spec.js
View file @ 86ed0dcc
...@@ -72,6 +72,7 @@ describe('mutations', () => { ...@@ -72,6 +72,7 @@ describe('mutations', () => {
mutations[types.SET_PROJECTS](localState, projects); mutations[types.SET_PROJECTS](localState, projects);
expect(localState.projects).toEqual(projects); expect(localState.projects).toEqual(projects);
expect(localState.isLoadingProjects).toEqual(false);
}); });
}); });
...@@ -83,4 +84,12 @@ describe('mutations', () => { ...@@ -83,4 +84,12 @@ describe('mutations', () => {
expect(localState.projectTokens.length).toBe(0); expect(localState.projectTokens.length).toBe(0);
}); });
}); });
describe('REQUEST_PROJECTS', () => {
it('sets loading projects to true', () => {
mutations[types.REQUEST_PROJECTS](localState);
expect(localState.isLoadingProjects).toEqual(true);
});
});
}); });
locale/gitlab.pot
View file @ 86ed0dcc
...@@ -3065,6 +3065,9 @@ msgstr "" ...@@ -3065,6 +3065,9 @@ msgstr ""
msgid "Current Branch" msgid "Current Branch"
msgstr "" msgstr ""
msgid "Current Project"
msgstr ""
msgid "Current node" msgid "Current node"
msgstr "" msgstr ""
...@@ -9871,6 +9874,9 @@ msgstr "" ...@@ -9871,6 +9874,9 @@ msgstr ""
msgid "The X509 Certificate to use when mutual TLS is required to communicate with the external authorization service. If left blank, the server certificate is still validated when accessing over HTTPS." msgid "The X509 Certificate to use when mutual TLS is required to communicate with the external authorization service. If left blank, the server certificate is still validated when accessing over HTTPS."
msgstr "" msgstr ""
msgid "The branch for this project has no active pipeline configuration."
msgstr ""
msgid "The character highlighter helps you keep the subject line to %{titleLength} characters and wrap the body at %{bodyLength} so they are readable in git." msgid "The character highlighter helps you keep the subject line to %{titleLength} characters and wrap the body at %{bodyLength} so they are readable in git."
msgstr "" msgstr ""
...@@ -10649,6 +10655,9 @@ msgstr "" ...@@ -10649,6 +10655,9 @@ msgstr ""
msgid "Trigger variables:" msgid "Trigger variables:"
msgstr "" msgstr ""
msgid "Triggerer"
msgstr ""
msgid "Triggers can force a specific branch or tag to get rebuilt with an API call. These tokens will impersonate their associated user including their access to projects and their project permissions." msgid "Triggers can force a specific branch or tag to get rebuilt with an API call. These tokens will impersonate their associated user including their access to projects and their project permissions."
msgstr "" msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7