Make view dynamic by integrating backend changes30469-convdev-index-integrated

4 files changed, 76 insertions, 65 deletions

diff --git a/app/controllers/admin/convdev_controller.rb b/app/controllers/admin/convdev_controller.rb
index 91b2f4a3d41..d2807c509ea 100644
--- a/app/controllers/admin/convdev_controller.rb
+++ b/app/controllers/admin/convdev_controller.rb
@@ -1,4 +1,6 @@
 class Admin::ConvdevController < Admin::ApplicationController
   def show
+    @conversational_development_index_metric =
+      ConversationalDevelopmentIndexMetric.order(:created_at).last
   end
 end
diff --git a/app/helpers/convdev_helper.rb b/app/helpers/convdev_helper.rb
new file mode 100644
index 00000000000..a96a9dbe201
--- /dev/null
+++ b/app/helpers/convdev_helper.rb
@@ -0,0 +1,12 @@
+module ConvdevHelper
+  def metric_score_class(card, metric)
+    case metric["#{card[:id]}_level"]
+    when 'low'
+      'convdev-card-low'
+    when 'average'
+      'convdev-card-med'
+    when 'high'
+      'convdev-card-high'
+    end
+  end
+end
diff --git a/app/views/admin/convdev/_card.html.haml b/app/views/admin/convdev/_card.html.haml
index 6806d340aa6..9e74ae97092 100644
--- a/app/views/admin/convdev/_card.html.haml
+++ b/app/views/admin/convdev/_card.html.haml
@@ -1,7 +1,5 @@
-- @n1 = rand(1..3)
-
 .convdev-card-wrapper
-  .convdev-card{ class: [('convdev-card-low' if @n1 == 1), ('convdev-card-med' if @n1 == 2), ('convdev-card-high' if @n1 == 3)] }
+  .convdev-card{ class: metric_score_class(card, metric) }
     .convdev-card-title
       %h3
         = card[:title]
@@ -9,13 +7,15 @@
         = card[:description]
     .card-scores
       .card-score
-        .card-score-value 3.2
+        .card-score-value
+          = metric["instance_#{card[:id]}"]
         .card-score-name You
       .card-score
-        .card-score-value 10.2
+        .card-score-value
+          = metric["leader_#{card[:id]}"]
         .card-score-name Lead
     .card-score-big
-      31.1%
+      = number_to_percentage(100 * metric["instance_#{card[:id]}"] / metric["leader_#{card[:id]}"], precision: 1)
     .card-buttons
       %a{ href: card[:blog] }
         = icon('info-circle', 'aria-hidden' => 'true')
diff --git a/app/views/admin/convdev/show.html.haml b/app/views/admin/convdev/show.html.haml
index eb2f6ddcc73..dc0e25aad80 100644
--- a/app/views/admin/convdev/show.html.haml
+++ b/app/views/admin/convdev/show.html.haml
@@ -1,15 +1,15 @@
 - @no_container = true
 - page_title "ConvDev Index"
-- cards = [ { title: 'Issues', description: 'created per active user', blog: 'https://www2.deloitte.com/content/dam/Deloitte/se/Documents/technology-media-telecommunications/deloitte-digital-collaboration.pdf' },
-  { title: 'Comments', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'http://conversationaldevelopment.com/why/' },
-  { title: 'Milestones', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'http://conversationaldevelopment.com/shorten-cycle/', docs: 'https://docs.gitlab.com/ee/workflow/milestones.html' },
-  { title: 'Boards', description: 'created per active user', score: '23.2', lead: '25.3', docs: 'https://docs.gitlab.com/ee/user/project/issue_board.html', blog: 'http://jpattonassociates.com/user-story-mapping/' },
-  { title: 'Merge Requests', description: 'per active user', score: '23.2', lead: '25.3', docs: 'https://docs.gitlab.com/ee/user/project/merge_requests/index.html', blog: 'https://8thlight.com/blog/uncle-bob/2013/02/01/The-Humble-Craftsman.html' },
-  { title: 'Pipelines', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'https://martinfowler.com/bliki/ContinuousDelivery.html', docs: 'https://docs.gitlab.com/ee/ci/README.html' },
-  { title: 'Environments', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'https://about.gitlab.com/2016/08/26/ci-deployment-and-environments/', docs: 'https://docs.gitlab.com/ee/ci/environments.html' },
-  { title: 'Deployments', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'https://puppet.com/blog/continuous-delivery-vs-continuous-deployment-what-s-diff' },
-  { title: 'Monitoring', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'https://prometheus.io/docs/introduction/overview/', docs: 'https://docs.gitlab.com/ee/user/project/integrations/prometheus.html' },
-  { title: 'Service Desk', description: 'created per active user', score: '23.2', lead: '25.3', blog: 'http://blogs.forrester.com/kate_leggett/17-01-30-top_trends_for_customer_service_in_2017_operations_become_smarter_and_more_strategic', docs: 'https://docs.gitlab.com/ee/user/project/service_desk.html' },]
+- cards = [ { id: 'issues', title: 'Issues', description: 'created per active user', blog: 'https://www2.deloitte.com/content/dam/Deloitte/se/Documents/technology-media-telecommunications/deloitte-digital-collaboration.pdf' },
+  { id: 'notes', title: 'Comments', description: 'created per active user', blog: 'http://conversationaldevelopment.com/why/' },
+  { id: 'milestones', title: 'Milestones', description: 'created per active user', blog: 'http://conversationaldevelopment.com/shorten-cycle/', docs: 'https://docs.gitlab.com/ee/workflow/milestones.html' },
+  { id: 'boards', title: 'Boards', description: 'created per active user', docs: 'https://docs.gitlab.com/ee/user/project/issue_board.html', blog: 'http://jpattonassociates.com/user-story-mapping/' },
+  { id: 'merge_requests', title: 'Merge Requests', description: 'per active user', docs: 'https://docs.gitlab.com/ee/user/project/merge_requests/index.html', blog: 'https://8thlight.com/blog/uncle-bob/2013/02/01/The-Humble-Craftsman.html' },
+  { id: 'ci_pipelines', title: 'Pipelines', description: 'created per active user', blog: 'https://martinfowler.com/bliki/ContinuousDelivery.html', docs: 'https://docs.gitlab.com/ee/ci/README.html' },
+  { id: 'environments', title: 'Environments', description: 'created per active user', blog: 'https://about.gitlab.com/2016/08/26/ci-deployment-and-environments/', docs: 'https://docs.gitlab.com/ee/ci/environments.html' },
+  { id: 'deployments', title: 'Deployments', description: 'created per active user', blog: 'https://puppet.com/blog/continuous-delivery-vs-continuous-deployment-what-s-diff' },
+  { id: 'projects_prometheus_active', title: 'Monitoring', description: 'created per active user', blog: 'https://prometheus.io/docs/introduction/overview/', docs: 'https://docs.gitlab.com/ee/user/project/integrations/prometheus.html' },
+  { id: 'service_desk_issues', title: 'Service Desk', description: 'created per active user', blog: 'http://blogs.forrester.com/kate_leggett/17-01-30-top_trends_for_customer_service_in_2017_operations_become_smarter_and_more_strategic', docs: 'https://docs.gitlab.com/ee/user/project/service_desk.html' },]
 - i2p_steps = [ 'Idea', 'Issue', 'Plan', 'Code', 'Commit', 'Test', 'Review', 'Staging', 'Production', 'Feedback',]
 = render 'admin/background_jobs/head'
 
@@ -29,56 +29,53 @@
         .col-sm-4
           = custom_icon('convdev_overview')
 
-  .container.convdev-empty
-    - if false
-      not current_application_settings.data collected
-    .col-sm-6.col-sm-push-3.col-md-8.col-md-push-2.col-lg-6.col-lg-push-3.centered-light-block.text-center
-      = custom_icon('convdev_no_data')
-      %h4.callout-title Data is still calculating...
-      %p.callout-description
-        In order to gather accurate feature usage data, it can take 1 to 2 weeks to see your index.
-        %a
-          Learn more
-
-  .container.convdev-empty
-    - if not current_application_settings.usage_ping_enabled
-      disabled
-    .col-sm-6.col-sm-push-3.col-md-8.col-md-push-2.col-lg-6.col-lg-push-3.centered-light-block.text-center
-      = custom_icon('convdev_no_index')
-      %h4.callout-title Usage ping is not enabled
-      .callout-description
-        %p
-          ConvDev is only shown when the
+  - if !current_application_settings.usage_ping_enabled
+    .container.convdev-empty
+      .col-sm-6.col-sm-push-3.col-md-8.col-md-push-2.col-lg-6.col-lg-push-3.centered-light-block.text-center
+        = custom_icon('convdev_no_index')
+        %h4.callout-title Usage ping is not enabled
+        .callout-description
+          %p
+            ConvDev is only shown when the
+            %a
+              usage ping
+            is enabled.
+          %p
+            Enable usage ping to get an overview of how you are using GitLab from a feature perspective
+          %a.btn.btn-lg.btn-primary{ href: '' }
+            Enable usage ping
+  - elsif @conversational_development_index_metric.blank?
+    .container.convdev-empty
+      .col-sm-6.col-sm-push-3.col-md-8.col-md-push-2.col-lg-6.col-lg-push-3.centered-light-block.text-center
+        = custom_icon('convdev_no_data')
+        %h4.callout-title Data is still calculating...
+        %p.callout-description
+          In order to gather accurate feature usage data, it can take 1 to 2 weeks to see your index.
           %a
-            usage ping
-          is enabled.
-        %p
-          Enable usage ping to get an overview of how you are using GitLab from a feature perspective
-        %a.btn.btn-lg.btn-primary{ href: '' }
-          Enable usage ping
-
-  .row.prepend-top-10
+            Learn more
 
-  .convdev
-    .convdev-header
-      %h2.big.med
-        43.2%
-      .convdev-subtitle.small
-        .first-one
-          index
-        .first-one
-          score
-          %a{ href: '' }
-            = icon('question-circle', 'aria-hidden' => 'true')
+  - else
+    .row.prepend-top-10
+    .convdev
+      .convdev-header
+        %h2.big.med
+          43.2%
+        .convdev-subtitle.small
+          .first-one
+            index
+          .first-one
+            score
+            %a{ href: '' }
+              = icon('question-circle', 'aria-hidden' => 'true')
 
-    .convdev-cards.card-container
-      - cards.each do |card|
-        = render "admin/convdev/card", card: card
+      .convdev-cards.card-container
+        - cards.each do |card|
+          = render "admin/convdev/card", card: card, metric: @conversational_development_index_metric
 
-    .convdev-steps
-      - i2p_steps.each_with_index do |step, index|
-        .convdev-step
-          .as
-            = custom_icon("i2p_step_#{index + 1}")
-          %h4.convdev-step-title
-            = step
+      .convdev-steps
+        - i2p_steps.each_with_index do |step, index|
+          .convdev-step
+            .as
+              = custom_icon("i2p_step_#{index + 1}")
+            %h4.convdev-step-title
+              = step