Add event limit warning all tabs Cycle Analytics
This commit is contained in:
parent
a634e53ac5
commit
cfd759212d
|
@ -0,0 +1,17 @@
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
template: `
|
||||||
|
<span v-if="count === 50" class="events-info pull-right">
|
||||||
|
<i class="fa fa-warning has-tooltip"
|
||||||
|
aria-hidden="true"
|
||||||
|
title="Limited to showing 50 events at most"
|
||||||
|
data-placement="top"></i>
|
||||||
|
Showing 50 events
|
||||||
|
</span>
|
||||||
|
`,
|
||||||
|
};
|
|
@ -14,6 +14,7 @@ import Vue from 'vue';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="mergeRequest in items" class="stage-event-item">
|
<li v-for="mergeRequest in items" class="stage-event-item">
|
||||||
|
|
|
@ -14,6 +14,7 @@ import Vue from 'vue';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="issue in items" class="stage-event-item">
|
<li v-for="issue in items" class="stage-event-item">
|
||||||
|
|
|
@ -19,12 +19,7 @@ import iconCommit from '../svg/icon_commit.svg';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
<span v-if="items.length === 50" class="events-info pull-right">
|
<limit-warning :count="items.length" />
|
||||||
<i class="fa fa-warning has-tooltip"
|
|
||||||
title="Limited to showing 50 events at most"
|
|
||||||
data-placement="top"></i>
|
|
||||||
Showing 50 events
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="commit in items" class="stage-event-item">
|
<li v-for="commit in items" class="stage-event-item">
|
||||||
|
|
|
@ -14,6 +14,7 @@ import Vue from 'vue';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="issue in items" class="stage-event-item">
|
<li v-for="issue in items" class="stage-event-item">
|
||||||
|
|
|
@ -14,6 +14,7 @@ import Vue from 'vue';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="mergeRequest in items" class="stage-event-item">
|
<li v-for="mergeRequest in items" class="stage-event-item">
|
||||||
|
|
|
@ -17,6 +17,7 @@ import iconBranch from '../svg/icon_branch.svg';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="build in items" class="stage-event-item item-build-component">
|
<li v-for="build in items" class="stage-event-item item-build-component">
|
||||||
|
|
|
@ -18,6 +18,7 @@ import iconBranch from '../svg/icon_branch.svg';
|
||||||
<div>
|
<div>
|
||||||
<div class="events-description">
|
<div class="events-description">
|
||||||
{{ stage.description }}
|
{{ stage.description }}
|
||||||
|
<limit-warning :count="items.length" />
|
||||||
</div>
|
</div>
|
||||||
<ul class="stage-event-list">
|
<ul class="stage-event-list">
|
||||||
<li v-for="build in items" class="stage-event-item item-build-component">
|
<li v-for="build in items" class="stage-event-item item-build-component">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Cookies from 'js-cookie';
|
import Cookies from 'js-cookie';
|
||||||
|
import LimitWarningComponent from './components/limit_warning_component';
|
||||||
|
|
||||||
require('./components/stage_code_component');
|
require('./components/stage_code_component');
|
||||||
require('./components/stage_issue_component');
|
require('./components/stage_issue_component');
|
||||||
|
@ -130,5 +131,6 @@ $(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Register global components
|
// Register global components
|
||||||
|
Vue.component('limit-warning', LimitWarningComponent);
|
||||||
Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
|
Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import limitWarningComp from '~/cycle_analytics/components/limit_warning_component';
|
||||||
|
|
||||||
|
describe('Limit warning component', () => {
|
||||||
|
let component;
|
||||||
|
let LimitWarningComponent;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
LimitWarningComponent = Vue.extend(limitWarningComp);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not render if count is not exactly than 50', () => {
|
||||||
|
component = new LimitWarningComponent({
|
||||||
|
propsData: {
|
||||||
|
count: 5,
|
||||||
|
},
|
||||||
|
}).$mount();
|
||||||
|
|
||||||
|
expect(component.$el.textContent.trim()).toBe('');
|
||||||
|
|
||||||
|
component = new LimitWarningComponent({
|
||||||
|
propsData: {
|
||||||
|
count: 55,
|
||||||
|
},
|
||||||
|
}).$mount();
|
||||||
|
|
||||||
|
expect(component.$el.textContent.trim()).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render if count is exactly 50', () => {
|
||||||
|
component = new LimitWarningComponent({
|
||||||
|
propsData: {
|
||||||
|
count: 50,
|
||||||
|
},
|
||||||
|
}).$mount();
|
||||||
|
|
||||||
|
expect(component.$el.textContent.trim()).toBe('Showing 50 events');
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue