Add event limit warning all tabs Cycle Analytics

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>
+  `,
+};

app/assets/javascripts/cycle_analytics/components/stage_code_component.js

@@ -14,6 +14,7 @@ import Vue from 'vue';
       <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">

app/assets/javascripts/cycle_analytics/components/stage_issue_component.js

@@ -14,6 +14,7 @@ import Vue from 'vue';
       <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">

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">

app/assets/javascripts/cycle_analytics/components/stage_production_component.js

@@ -14,6 +14,7 @@ import Vue from 'vue';
       <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">

app/assets/javascripts/cycle_analytics/components/stage_review_component.js

@@ -14,6 +14,7 @@ import Vue from 'vue';
       <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">

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">

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">

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -2,6 +2,7 @@
 
 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');
@@ -130,5 +131,6 @@ $(() => {
   });
 
   // Register global components
+  Vue.component('limit-warning', LimitWarningComponent);
   Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
 });

spec/javascripts/cycle_analytics/limit_warning_component_spec.js

@@ -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');
+  });
+});