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 0000000000000000000000000000000000000000..abe48572347b07332cedb2eba71c1ff8c215827b
--- /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 9947f355acaf91a53c54f35bfc30b7eaaade586d..3f419a96ff96a490bb3c8a1bd05cefb874cb7391 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
+++ b/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">
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 6ad4805e8c5a2537d5f0c2f52b26cfd12a2f7d3c..7ffa38edd9ed2abd68012fa252352aef6c5731fd 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
+++ b/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">
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 42e1bbce7442d433c3815c1a2ea95521e8d09814..d736c8b0c2897445ad49832b53d175aafb526f73 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 da80450a32cfd4c0e85be726f72d142988c00280..698a79ca68c4bde999537ff16481919619daefcc 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
+++ b/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">
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 2200f43914fd94f7b3a3dbe0ea00d22eb493f581..e63c41f2a5730410240c870d7c93008c78744194 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
+++ b/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">
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 8fa63734cf13630be61c0cb960fb836714b6dd62..d51f7134e251b722a0fdc10daa66ab8a5cc3f242 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 0015249cfaa96c457a70aab21a85395a842aa76d..17ae3a9ddc1516172e7999d79b9b09f5fa204bed 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/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index ae17d05e6795e1bc7977f16956f9e36db330b2cd..b099b39e58f2081cced7c73b8a3e0fc1fdd9822e 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/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);
 });
diff --git a/spec/javascripts/cycle_analytics/limit_warning_component_spec.js b/spec/javascripts/cycle_analytics/limit_warning_component_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..50000c5a5f5606bf6385ef564d4ca23e0ac0c0be
--- /dev/null
+++ b/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');
+  });
+});