2 files changed, 28 insertions, 17 deletions
diff --git a/app/assets/javascripts/ci/runner/components/stat/runner_count.vue b/app/assets/javascripts/ci/runner/components/stat/runner_count.vue
index 4ad9259f59d..c33c42f3afe 100644
--- a/app/assets/javascripts/ci/runner/components/stat/runner_count.vue
+++ b/app/assets/javascripts/ci/runner/components/stat/runner_count.vue
@@ -16,13 +16,13 @@ import { INSTANCE_TYPE, GROUP_TYPE } from '../../constants';
  * <strong/> tag.
  *
  * ```vue
- * <runner-count-stat
+ * <runner-count
  *   #default="{ count }"
  *   :scope="INSTANCE_TYPE"
  *   :variables="{ status: 'ONLINE' }"
  * >
  *   <strong>{{ count }}</strong>
- * </runner-count-stat>
+ * </runner-count>
  * ```
  *
  * Use `:skip="true"` to prevent data from being fetched and
diff --git a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
index 3965e5551f1..2e50dc13d2d 100644
--- a/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
+++ b/app/assets/javascripts/ci/runner/components/stat/runner_stats.vue
@@ -1,5 +1,4 @@
 <script>
-import RunnerSingleStat from '~/ci/runner/components/stat/runner_single_stat.vue';
 import {
   I18N_STATUS_ONLINE,
   I18N_STATUS_OFFLINE,
@@ -8,9 +7,19 @@ import {
   STATUS_OFFLINE,
   STATUS_STALE,
 } from '../../constants';
+import RunnerSingleStat from './runner_single_stat.vue';
+import RunnerCount from './runner_count.vue';
+
+/**
+ * Shows general stats about the runners.
+ *
+ * First it checks if there are any runners in this context, and if so,
+ * shows more details for different status.
+ */
 
 export default {
   components: {
+    RunnerCount,
     RunnerSingleStat,
     RunnerUpgradeStatusStats: () =>
       import('ee_component/ci/runner/components/stat/runner_upgrade_status_stats.vue'),
@@ -71,19 +80,21 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-flex-wrap gl-py-6">
-    <runner-single-stat
-      v-for="stat in stats"
-      :key="stat.key"
-      :scope="scope"
-      v-bind="stat.props"
-      class="gl-px-5"
-    />
+  <runner-count #default="{ count }" :scope="scope" :variables="variables">
+    <div v-if="count" class="gl-display-flex gl-flex-wrap gl-py-6">
+      <runner-single-stat
+        v-for="stat in stats"
+        :key="stat.key"
+        :scope="scope"
+        v-bind="stat.props"
+        class="gl-px-5"
+      />
 
-    <runner-upgrade-status-stats
-      class="gl-display-contents"
-      :scope="scope"
-      :variables="variables"
-    />
-  </div>
+      <runner-upgrade-status-stats
+        class="gl-display-contents"
+        :scope="scope"
+        :variables="variables"
+      />
+    </div>
+  </runner-count>
 </template>