Add latest changes from gitlab-org/gitlab@master

4 files changed, 85 insertions, 35 deletions

diff --git a/app/assets/javascripts/runner/components/stat/runner_count.vue b/app/assets/javascripts/runner/components/stat/runner_count.vue
index af18b203f90..37c6f922f9a 100644
--- a/app/assets/javascripts/runner/components/stat/runner_count.vue
+++ b/app/assets/javascripts/runner/components/stat/runner_count.vue
@@ -1,8 +1,9 @@
 <script>
 import { fetchPolicies } from '~/lib/graphql';
+import allRunnersCountQuery from 'ee_else_ce/runner/graphql/list/all_runners_count.query.graphql';
+import groupRunnersCountQuery from 'ee_else_ce/runner/graphql/list/group_runners_count.query.graphql';
+
 import { captureException } from '../../sentry_utils';
-import allRunnersCountQuery from '../../graphql/list/all_runners_count.query.graphql';
-import groupRunnersCountQuery from '../../graphql/list/group_runners_count.query.graphql';
 import { INSTANCE_TYPE, GROUP_TYPE } from '../../constants';
 
 /**
@@ -38,7 +39,7 @@ export default {
     variables: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
     skip: {
       type: Boolean,
diff --git a/app/assets/javascripts/runner/components/stat/runner_single_stat.vue b/app/assets/javascripts/runner/components/stat/runner_single_stat.vue
new file mode 100644
index 00000000000..ae732b052ac
--- /dev/null
+++ b/app/assets/javascripts/runner/components/stat/runner_single_stat.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { formatNumber } from '~/locale';
+import RunnerCount from './runner_count.vue';
+
+export default {
+  components: {
+    GlSingleStat,
+    RunnerCount,
+  },
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+    variables: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    skip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    formattedValue(value) {
+      if (typeof value === 'number') {
+        return formatNumber(value);
+      }
+      return '-';
+    },
+  },
+};
+</script>
+<template>
+  <runner-count #default="{ count }" :scope="scope" :variables="variables" :skip="skip">
+    <gl-single-stat v-bind="$attrs" :value="formattedValue(count)" />
+  </runner-count>
+</template>
diff --git a/app/assets/javascripts/runner/components/stat/runner_stats.vue b/app/assets/javascripts/runner/components/stat/runner_stats.vue
index 9e1ca9ba4ee..2ee7737513b 100644
--- a/app/assets/javascripts/runner/components/stat/runner_stats.vue
+++ b/app/assets/javascripts/runner/components/stat/runner_stats.vue
@@ -1,12 +1,12 @@
 <script>
 import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants';
-import RunnerCount from './runner_count.vue';
 import RunnerStatusStat from './runner_status_stat.vue';
 
 export default {
   components: {
-    RunnerCount,
     RunnerStatusStat,
+    RunnerUpgradeStatusStats: () =>
+      import('ee_component/runner/components/stat/runner_upgrade_status_stats.vue'),
   },
   props: {
     scope: {
@@ -16,13 +16,10 @@ export default {
     variables: {
       type: Object,
       required: false,
-      default: () => {},
+      default: () => ({}),
     },
   },
   methods: {
-    countVariables(vars) {
-      return { ...this.variables, ...vars };
-    },
     statusCountSkip(status) {
       // Show an empty result when we already filter by another status
       return this.variables.status && this.variables.status !== status;
@@ -32,16 +29,20 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-py-6">
-    <runner-count
+  <div class="gl-display-flex gl-flex-wrap gl-py-6">
+    <runner-status-stat
       v-for="status in $options.STATUS_LIST"
-      #default="{ count }"
       :key="status"
+      class="gl-px-5"
+      :variables="variables"
+      :scope="scope"
+      :status="status"
+    />
+
+    <runner-upgrade-status-stats
+      class="gl-display-contents"
       :scope="scope"
-      :variables="countVariables({ status })"
-      :skip="statusCountSkip(status)"
-    >
-      <runner-status-stat class="gl-px-5" :status="status" :value="count" />
-    </runner-count>
+      :variables="variables"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/stat/runner_status_stat.vue b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue
index b77bbe15541..47979d76770 100644
--- a/app/assets/javascripts/runner/components/stat/runner_status_stat.vue
+++ b/app/assets/javascripts/runner/components/stat/runner_status_stat.vue
@@ -1,17 +1,21 @@
 <script>
-import { GlSingleStat } from '@gitlab/ui/dist/charts';
-import { s__, formatNumber } from '~/locale';
+import { s__ } from '~/locale';
 import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_STALE } from '../../constants';
+import RunnerSingleStat from './runner_single_stat.vue';
 
 export default {
   components: {
-    GlSingleStat,
+    RunnerSingleStat,
   },
   props: {
-    value: {
-      type: Number,
+    scope: {
+      type: String,
+      required: true,
+    },
+    variables: {
+      type: Object,
       required: false,
-      default: null,
+      default: () => ({}),
     },
     status: {
       type: String,
@@ -19,13 +23,16 @@ export default {
     },
   },
   computed: {
-    formattedValue() {
-      if (typeof this.value === 'number') {
-        return formatNumber(this.value);
-      }
-      return '-';
+    countVariables() {
+      return { ...this.variables, status: this.status };
+    },
+    skip() {
+      // Status are mutually exclusive, skip displaying this total
+      // when filtering by an status different to this one
+      const { status } = this.variables;
+      return status && status !== this.status;
     },
-    stat() {
+    statProps() {
       switch (this.status) {
         case STATUS_ONLINE:
           return {
@@ -55,11 +62,11 @@ export default {
 };
 </script>
 <template>
-  <gl-single-stat
-    v-if="stat"
-    :value="formattedValue"
-    :variant="stat.variant"
-    :title="stat.title"
-    :meta-text="stat.metaText"
+  <runner-single-stat
+    v-if="statProps"
+    v-bind="statProps"
+    :scope="scope"
+    :variables="countVariables"
+    :skip="skip"
   />
 </template>