Show friendly message when stage has no data

3 files changed, 40 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" }
diff --git a/app/views/shared/icons/_icon_no_data.svg b/app/views/shared/icons/_icon_no_data.svg
new file mode 100644
index 00000000000..ced8653b88c
--- /dev/null
+++ b/app/views/shared/icons/_icon_no_data.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="211 0 78 36" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="5" cy="31" r="5"/>
+    <mask id="e" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#a"/>
+    </mask>
+    <circle id="b" cx="29" cy="14" r="5"/>
+    <mask id="f" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#b"/>
+    </mask>
+    <circle id="c" cx="53" cy="24" r="5"/>
+    <mask id="g" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#c"/>
+    </mask>
+    <circle id="d" cx="73" cy="5" r="5"/>
+    <mask id="h" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#d"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(211)">
+    <path stroke="#B5A7DD" stroke-width="2" d="M5 31l24-17 26 10L73 5" stroke-linecap="round" stroke-dasharray="3 6"/>
+    <use fill="#FFF" stroke="#6B4FBB" stroke-width="6" mask="url(#e)" xlink:href="#a"/>
+    <use fill="#FFF" stroke="#6B4FBB" stroke-width="6" mask="url(#f)" xlink:href="#b"/>
+    <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#g)" xlink:href="#c"/>
+    <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#h)" xlink:href="#d"/>
+  </g>
+</svg>