Set stage descriptions dynamically

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

@@ -8,11 +8,12 @@
     },
     props: {
       items: Array,
+      stage: Object,
     },
     template: `
       <div>
         <div class="events-description">
-          Time spent coding
+          {{ stage.shortDescription }}
         </div>
         <ul class="stage-event-list">
           <li class="stage-event-item" v-for="mergeRequest in items">

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

@@ -8,11 +8,12 @@
     },
     props: {
       items: Array,
+      stage: Object,
     },
     template: `
       <div>
         <div class="events-description">
-          Time before an issue get scheluded
+          {{ stage.shortDescription }}
         </div>
         <ul class="stage-event-list">
           <li class="stage-event-item" v-for="issue in items">

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6

@@ -8,11 +8,12 @@
     },
     props: {
       items: Array,
+      stage: Object,
     },
     template: `
       <div>
         <div class="events-description">
-          Time before an issue starts implementation
+          {{ stage.shortDescription }}
         </div>
         <ul class="stage-event-list">
           <li class="stage-event-item" v-for="commit in items">

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

@@ -8,11 +8,12 @@
     },
     props: {
       items: Array,
+      stage: Object,
     },
     template: `
       <div>
         <div class="events-description">
-          The total time taken from idea to production
+          {{ stage.shortDescription }}
         </div>
         <ul>
           <li v-for="issue in items">

app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6

@@ -8,11 +8,12 @@
     },
     props: {
       items: Array,
+      stage: Object,
     },
     template: `
       <div>
         <div class="events-description">
-          The time taken to build and test the application
+          {{ stage.shortDescription }}
         </div>
         <ul class="stage-event-list">
           <li class="stage-event-item" v-for="build in items">

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6

@@ -13,42 +13,49 @@
           active: false,
           component: 'stage-issue-component',
           legendTitle: 'Related Issues',
+          shortDescription: 'Time before an issue get scheduled',
         },
         {
           name:'Plan',
           active: false,
           component: 'stage-plan-component',
           legendTitle: 'Related Commits',
+          shortDescription: 'Time before an issue starts implementation',
         },
         {
           name:'Code',
           active: false,
           component: 'stage-code-component',
           legendTitle: 'Related Merge Requests',
+          shortDescription: 'Time spent coding',
         },
         {
           name:'Test',
           active: false,
           component: 'stage-test-component',
           legendTitle: 'Relative Builds Trigger by Commits',
+          shortDescription: 'The time taken to build and test the application',
         },
         {
           name:'Review',
           active: false,
           component: 'stage-review-component',
           legendTitle: 'Relative Merged Requests',
+          shortDescription: 'The time taken to review the code',
         },
         {
           name:'Staging',
           active: false,
           component: 'stage-staging-component',
           legendTitle: 'Relative Deployed Builds',
+          shortDescription: 'The time taken in staging',
         },
         {
           name:'Production',
           active: false,
           component: 'stage-production-component',
           legendTitle: 'Related Issues',
+          shortDescription: 'The total time taken from idea to production',
         }
       ],
     },

app/views/projects/cycle_analytics/show.html.haml

@@ -92,4 +92,4 @@
           %template{ "v-if" => "isEmptyStage" }
             %p No results
           %template{ "v-if" => "state.items.length && !isLoadingStage && !isEmptyStage" }
-            %component{ ":is" => "currentStage.component", ":items" => "state.items" }
+            %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.items" }