Show friendly message when stage has no data

2 files changed, 13 insertions, 1 deletions

diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
new file mode 100644
index 00000000000..f839ec9c018
--- /dev/null
+++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml
@@ -0,0 +1,12 @@
+.empty-stage-container
+  .empty-stage
+    .icon-no-data
+      = render "shared/icons/icon_no_data.svg"
+    %h4 We don’t have enough data to show this stage.
+    %p
+      The test phase measures the median time to run the entire pipeline for that project.
+      It’s related to the time GitLab CI takes to run every job for the commits pushed
+      to that merge request defined in the previous stage.
+      Learn more about the
+      %a{ :href => "https://docs.gitlab.com/ce/user/project/cycle_analytics.html" }
+        expected workflow and calculations.
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 8da0fbba783..195b10e0779 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -90,6 +90,6 @@
           %template{ "v-if" => "isLoadingStage" }
             = icon("spinner spin", "v-show" => "isLoadingStage")
           %template{ "v-if" => "isEmptyStage" }
-            %p No results
+            = render partial: "empty_stage"
           %template{ "v-if" => "state.items.length && !isLoadingStage && !isEmptyStage" }
             %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.items" }