Merge branch '30469-convdev-index' into 'master'

ConvDev Index

Closes #30469

See merge request !11377

11 files changed, 98 insertions, 5 deletions

diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index ac36bb5bb17..e5842bd1ea0 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -1,6 +1,6 @@
 - @no_container = true
 - page_title "Background Jobs"
-= render 'admin/background_jobs/head'
+= render 'admin/monitoring/head'
 
 %div{ class: container_class }
   %h3.page-title Background Jobs
diff --git a/app/views/admin/conversational_development_index/_callout.html.haml b/app/views/admin/conversational_development_index/_callout.html.haml
new file mode 100644
index 00000000000..33a4dab1e00
--- /dev/null
+++ b/app/views/admin/conversational_development_index/_callout.html.haml
@@ -0,0 +1,13 @@
+.prepend-top-default
+.user-callout{ data: { uid: 'convdev_intro_callout_dismissed' } }
+  .bordered-box.landing.content-block
+    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+      'aria-label' => 'Dismiss ConvDev introduction' }
+      = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+    .user-callout-copy
+      %h4
+        Introducing Your Conversational Development Index
+      %p
+        Your Conversational Development Index gives an overview of how you are using GitLab from a feature perspective. View how you compare with other organizations, discover features you are not using, and learn best practices through blog posts and white papers.
+    .svg-container.convdev
+      = custom_icon('convdev_overview')
diff --git a/app/views/admin/conversational_development_index/_card.html.haml b/app/views/admin/conversational_development_index/_card.html.haml
new file mode 100644
index 00000000000..6c8688e06ae
--- /dev/null
+++ b/app/views/admin/conversational_development_index/_card.html.haml
@@ -0,0 +1,25 @@
+.convdev-card-wrapper
+  .convdev-card{ class: "convdev-card-#{score_level(card.percentage_score)}" }
+    .convdev-card-title
+      %h3
+        = card.title
+      .text-light
+        = card.description
+    .card-scores
+      .card-score
+        .card-score-value
+          = format_score(card.instance_score)
+        .card-score-name You
+      .card-score
+        .card-score-value
+          = format_score(card.leader_score)
+        .card-score-name Lead
+    .card-score-big
+      = number_to_percentage(card.percentage_score, precision: 1)
+    .card-buttons
+      - if card.blog
+        %a{ href: card.blog }
+          = icon('info-circle', 'aria-hidden' => 'true')
+      - if card.docs
+        %a{ href: card.docs }
+          = icon('question-circle', 'aria-hidden' => 'true')
diff --git a/app/views/admin/conversational_development_index/_disabled.html.haml b/app/views/admin/conversational_development_index/_disabled.html.haml
new file mode 100644
index 00000000000..975d7df3da6
--- /dev/null
+++ b/app/views/admin/conversational_development_index/_disabled.html.haml
@@ -0,0 +1,9 @@
+.container.convdev-empty
+  .col-sm-6.col-sm-push-3.text-center
+    = custom_icon('convdev_no_index')
+    %h4 Usage ping is not enabled
+    %p
+      ConvDev is only shown when the
+      = link_to 'usage ping', help_page_path('user/admin_area/settings/usage_statistics'), target: '_blank'
+      is enabled. Enable usage ping to get an overview of how you are using GitLab from a feature perspective
+    = link_to 'Enable usage ping', admin_application_settings_path(anchor: 'usage-statistics'), class: 'btn btn-primary'
diff --git a/app/views/admin/conversational_development_index/_no_data.html.haml b/app/views/admin/conversational_development_index/_no_data.html.haml
new file mode 100644
index 00000000000..b23d2b5ec3a
--- /dev/null
+++ b/app/views/admin/conversational_development_index/_no_data.html.haml
@@ -0,0 +1,7 @@
+.container.convdev-empty
+  .col-sm-6.col-sm-push-3.text-center
+    = custom_icon('convdev_no_data')
+    %h4 Data is still calculating...
+    %p
+      In order to gather accurate feature usage data, it can take 1 to 2 weeks to see your index.
+      = link_to 'Learn more', help_page_path('user/admin_area/monitoring/convdev'), target: '_blank'
diff --git a/app/views/admin/conversational_development_index/show.html.haml b/app/views/admin/conversational_development_index/show.html.haml
new file mode 100644
index 00000000000..833d4c612f8
--- /dev/null
+++ b/app/views/admin/conversational_development_index/show.html.haml
@@ -0,0 +1,35 @@
+- @no_container = true
+- page_title 'ConvDev Index'
+
+= render 'admin/monitoring/head'
+
+.container
+  - if show_callout?('convdev_intro_callout_dismissed')
+    = render 'callout'
+
+  .prepend-top-default
+  - if !current_application_settings.usage_ping_enabled
+    = render 'disabled'
+  - elsif @metric.blank?
+    = render 'no_data'
+  - else
+    .convdev
+      .convdev-header
+        %h2.convdev-header-title{ class: "convdev-#{score_level(@metric.average_percentage_score)}-score" }
+          = number_to_percentage(@metric.average_percentage_score, precision: 1)
+        .convdev-header-subtitle
+          index
+          %br
+          score
+          = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/admin_area/monitoring/convdev')
+
+      .convdev-cards.card-container
+        - @metric.cards.each do |card|
+          = render 'card', card: card
+
+      .convdev-steps.visible-lg
+        - @metric.idea_to_production_steps.each_with_index do |step, index|
+          .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
+            = custom_icon("i2p_step_#{index + 1}")
+            %h4.convdev-step-title
+              = step.title
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index 4deccf4aa93..8adb966064c 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -1,6 +1,6 @@
 - @no_container = true
 - page_title "Health Check"
-= render 'admin/background_jobs/head'
+= render 'admin/monitoring/head'
 
 %div{ class: container_class }
   %h3.page-title
diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml
index 5e585ce789b..487f1cf5c4f 100644
--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -3,7 +3,7 @@
 - loggers = [Gitlab::GitLogger, Gitlab::AppLogger,
              Gitlab::EnvironmentLogger, Gitlab::SidekiqLogger,
              Gitlab::RepositoryCheckLogger]
-= render 'admin/background_jobs/head'
+= render 'admin/monitoring/head'
 
 %div{ class: container_class }
   %ul.nav-links.log-tabs
diff --git a/app/views/admin/background_jobs/_head.html.haml b/app/views/admin/monitoring/_head.html.haml
index b3530915068..901e30275fd 100644
--- a/app/views/admin/background_jobs/_head.html.haml
+++ b/app/views/admin/monitoring/_head.html.haml
@@ -3,6 +3,10 @@
     = render 'shared/nav_scroll'
     .nav-links.sub-nav.scrolling-tabs
       %ul{ class: (container_class) }
+        = nav_link(controller: :conversational_development_index) do
+          = link_to admin_conversational_development_index_path, title: 'ConvDev Index' do
+            %span
+              ConvDev Index
         = nav_link(controller: :system_info) do
           = link_to admin_system_info_path, title: 'System Info' do
             %span
diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml
index c7b63d9de98..b7db18b2d32 100644
--- a/app/views/admin/requests_profiles/index.html.haml
+++ b/app/views/admin/requests_profiles/index.html.haml
@@ -1,6 +1,6 @@
 - @no_container = true
 - page_title 'Requests Profiles'
-= render 'admin/background_jobs/head'
+= render 'admin/monitoring/head'
 
 %div{ class: container_class }
   %h3.page-title
diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml
index 9b9559c7fe5..fd0281e4961 100644
--- a/app/views/admin/system_info/show.html.haml
+++ b/app/views/admin/system_info/show.html.haml
@@ -1,6 +1,6 @@
 - @no_container = true
 - page_title "System Info"
-= render 'admin/background_jobs/head'
+= render 'admin/monitoring/head'
 
 %div{ class: container_class }
   .prepend-top-default