Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 22 deletions

diff --git a/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue
index 584236168ac..70226074993 100644
--- a/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue
@@ -59,21 +59,20 @@ export default {
       return [
         {
           title: I18N_ALL_TYPES,
-          runnerType: null,
         },
         ...tabs,
       ];
     },
   },
   methods: {
-    onTabSelected({ runnerType }) {
+    onTabSelected(runnerType) {
       this.$emit('input', {
         ...this.value,
         runnerType,
         pagination: { page: 1 },
       });
     },
-    isTabActive({ runnerType }) {
+    isTabActive(runnerType = null) {
       return runnerType === this.value.runnerType;
     },
     tabBadgeCountVariables(runnerType) {
@@ -102,8 +101,8 @@ export default {
     <gl-tab
       v-for="tab in tabs"
       :key="`${tab.runnerType}`"
-      :active="isTabActive(tab)"
-      @click="onTabSelected(tab)"
+      :active="isTabActive(tab.runnerType)"
+      @click="onTabSelected(tab.runnerType)"
     >
       <template #title>
         {{ tab.title }}
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>