diff options
Diffstat (limited to 'app/assets/javascripts/cycle_analytics')
10 files changed, 39 insertions, 15 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js new file mode 100644 index 00000000000..abe48572347 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js @@ -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> + `, +}; diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js index b83a4c63fad..3f419a96ff9 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ + +import Vue from 'vue'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -13,6 +14,7 @@ <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="mergeRequest in items" class="stage-event-item"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js index cb1687dcc7a..7ffa38edd9e 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ + +import Vue from 'vue'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -13,6 +14,7 @@ <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="issue in items" class="stage-event-item"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js index 42e1bbce744..d736c8b0c28 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js @@ -19,12 +19,7 @@ import iconCommit from '../svg/icon_commit.svg'; <div> <div class="events-description"> {{ stage.description }} - <span v-if="items.length === 50" class="events-info pull-right"> - <i class="fa fa-warning has-tooltip" - title="Limited to showing 50 events at most" - data-placement="top"></i> - Showing 50 events - </span> + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="commit in items" class="stage-event-item"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js index 73f4205b578..698a79ca68c 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ + +import Vue from 'vue'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -13,6 +14,7 @@ <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="issue in items" class="stage-event-item"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js index 501ffb1fac9..e63c41f2a57 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ + +import Vue from 'vue'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -13,6 +14,7 @@ <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="mergeRequest in items" class="stage-event-item"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js index 8fa63734cf1..d51f7134e25 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js @@ -17,6 +17,7 @@ import iconBranch from '../svg/icon_branch.svg'; <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="build in items" class="stage-event-item item-build-component"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js index 0015249cfaa..17ae3a9ddc1 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js @@ -18,6 +18,7 @@ import iconBranch from '../svg/icon_branch.svg'; <div> <div class="events-description"> {{ stage.description }} + <limit-warning :count="items.length" /> </div> <ul class="stage-event-list"> <li v-for="build in items" class="stage-event-item item-build-component"> diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js b/app/assets/javascripts/cycle_analytics/components/total_time_component.js index 0d85e1a4678..b4442ea5566 100644 --- a/app/assets/javascripts/cycle_analytics/components/total_time_component.js +++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ + +import Vue from 'vue'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index beff293b587..b099b39e58f 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -1,9 +1,9 @@ -/* global Vue */ -/* global Cookies */ /* global Flash */ -window.Vue = require('vue'); -window.Cookies = require('js-cookie'); +import Vue from 'vue'; +import Cookies from 'js-cookie'; +import LimitWarningComponent from './components/limit_warning_component'; + require('./components/stage_code_component'); require('./components/stage_issue_component'); require('./components/stage_plan_component'); @@ -131,5 +131,6 @@ $(() => { }); // Register global components + Vue.component('limit-warning', LimitWarningComponent); Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent); }); |