1 files changed, 19 insertions, 135 deletions

diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index a90ef2d3530..f6b7a8b46d7 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -1,10 +1,17 @@
 <script>
-import { GlBadge, GlLink } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { updateHistory } from '~/lib/utils/url_utility';
-import { formatNumber } from '~/locale';
 import { fetchPolicies } from '~/lib/graphql';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { upgradeStatusTokenConfig } from 'ee_else_ce/runner/components/search_tokens/upgrade_status_token_config';
+import {
+  fromUrlQueryToSearch,
+  fromSearchToUrl,
+  fromSearchToVariables,
+  isSearchFiltered,
+} from 'ee_else_ce/runner/runner_search_utils';
+import allRunnersQuery from 'ee_else_ce/runner/graphql/list/all_runners.query.graphql';
 
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
@@ -20,74 +27,12 @@ import RunnerActionsCell from '../components/cells/runner_actions_cell.vue';
 import { pausedTokenConfig } from '../components/search_tokens/paused_token_config';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import { tagTokenConfig } from '../components/search_tokens/tag_token_config';
-import {
-  ADMIN_FILTERED_SEARCH_NAMESPACE,
-  INSTANCE_TYPE,
-  GROUP_TYPE,
-  PROJECT_TYPE,
-  STATUS_ONLINE,
-  STATUS_OFFLINE,
-  STATUS_STALE,
-  I18N_FETCH_ERROR,
-} from '../constants';
-import runnersAdminQuery from '../graphql/list/admin_runners.query.graphql';
-import runnersAdminCountQuery from '../graphql/list/admin_runners_count.query.graphql';
-import {
-  fromUrlQueryToSearch,
-  fromSearchToUrl,
-  fromSearchToVariables,
-  isSearchFiltered,
-} from '../runner_search_utils';
+import { ADMIN_FILTERED_SEARCH_NAMESPACE, INSTANCE_TYPE, I18N_FETCH_ERROR } from '../constants';
 import { captureException } from '../sentry_utils';
 
-const countSmartQuery = () => ({
-  query: runnersAdminCountQuery,
-  fetchPolicy: fetchPolicies.NETWORK_ONLY,
-  update(data) {
-    return data?.runners?.count;
-  },
-  error(error) {
-    this.reportToSentry(error);
-  },
-});
-
-const tabCountSmartQuery = ({ type }) => {
-  return {
-    ...countSmartQuery(),
-    variables() {
-      return {
-        ...this.countVariables,
-        type,
-      };
-    },
-  };
-};
-
-const statusCountSmartQuery = ({ status, name }) => {
-  return {
-    ...countSmartQuery(),
-    skip() {
-      // skip if filtering by status and not using _this_ status as filter
-      if (this.countVariables.status && this.countVariables.status !== status) {
-        // reset count for given status
-        this[name] = null;
-        return true;
-      }
-      return false;
-    },
-    variables() {
-      return {
-        ...this.countVariables,
-        status,
-      };
-    },
-  };
-};
-
 export default {
   name: 'AdminRunnersApp',
   components: {
-    GlBadge,
     GlLink,
     RegistrationDropdown,
     RunnerFilteredSearchBar,
@@ -119,7 +64,7 @@ export default {
   },
   apollo: {
     runners: {
-      query: runnersAdminQuery,
+      query: allRunnersQuery,
       fetchPolicy: fetchPolicies.NETWORK_ONLY,
       variables() {
         return this.variables;
@@ -137,31 +82,6 @@ export default {
         this.reportToSentry(error);
       },
     },
-
-    // Tabs counts
-    allRunnersCount: {
-      ...tabCountSmartQuery({ type: null }),
-    },
-    instanceRunnersCount: {
-      ...tabCountSmartQuery({ type: INSTANCE_TYPE }),
-    },
-    groupRunnersCount: {
-      ...tabCountSmartQuery({ type: GROUP_TYPE }),
-    },
-    projectRunnersCount: {
-      ...tabCountSmartQuery({ type: PROJECT_TYPE }),
-    },
-
-    // Runner stats
-    onlineRunnersTotal: {
-      ...statusCountSmartQuery({ status: STATUS_ONLINE, name: 'onlineRunnersTotal' }),
-    },
-    offlineRunnersTotal: {
-      ...statusCountSmartQuery({ status: STATUS_OFFLINE, name: 'offlineRunnersTotal' }),
-    },
-    staleRunnersTotal: {
-      ...statusCountSmartQuery({ status: STATUS_STALE, name: 'staleRunnersTotal' }),
-    },
   },
   computed: {
     variables() {
@@ -186,6 +106,7 @@ export default {
           ...tagTokenConfig,
           recentSuggestionsStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
         },
+        upgradeStatusTokenConfig,
       ];
     },
     isBulkDeleteEnabled() {
@@ -214,39 +135,10 @@ export default {
     this.reportToSentry(error);
   },
   methods: {
-    tabCount({ runnerType }) {
-      let count;
-      switch (runnerType) {
-        case null:
-          count = this.allRunnersCount;
-          break;
-        case INSTANCE_TYPE:
-          count = this.instanceRunnersCount;
-          break;
-        case GROUP_TYPE:
-          count = this.groupRunnersCount;
-          break;
-        case PROJECT_TYPE:
-          count = this.projectRunnersCount;
-          break;
-        default:
-          return null;
-      }
-      if (typeof count === 'number') {
-        return formatNumber(count);
-      }
-      return '';
-    },
-    refetchFilteredCounts() {
-      this.$apollo.queries.allRunnersCount.refetch();
-      this.$apollo.queries.instanceRunnersCount.refetch();
-      this.$apollo.queries.groupRunnersCount.refetch();
-      this.$apollo.queries.projectRunnersCount.refetch();
-    },
     onToggledPaused() {
-      // When a runner is Paused, the tab count can
+      // When a runner becomes Paused, the tab count can
       // become stale, refetch outdated counts.
-      this.refetchFilteredCounts();
+      this.$refs['runner-type-tabs'].refetch();
     },
     onDeleted({ message }) {
       this.$root.$toast?.show(message);
@@ -271,18 +163,14 @@ export default {
       class="gl-display-flex gl-align-items-center gl-flex-direction-column-reverse gl-md-flex-direction-row gl-mt-3 gl-md-mt-0"
     >
       <runner-type-tabs
+        ref="runner-type-tabs"
         v-model="search"
+        :count-scope="$options.INSTANCE_TYPE"
+        :count-variables="countVariables"
         class="gl-w-full"
         content-class="gl-display-none"
         nav-class="gl-border-none!"
-      >
-        <template #title="{ tab }">
-          {{ tab.title }}
-          <gl-badge v-if="tabCount(tab)" class="gl-ml-1" size="sm">
-            {{ tabCount(tab) }}
-          </gl-badge>
-        </template>
-      </runner-type-tabs>
+      />
 
       <registration-dropdown
         class="gl-w-full gl-sm-w-auto gl-mr-auto"
@@ -298,11 +186,7 @@ export default {
       :namespace="$options.filteredSearchNamespace"
     />
 
-    <runner-stats
-      :online-runners-count="onlineRunnersTotal"
-      :offline-runners-count="offlineRunnersTotal"
-      :stale-runners-count="staleRunnersTotal"
-    />
+    <runner-stats :scope="$options.INSTANCE_TYPE" :variables="countVariables" />
 
     <runner-list-empty-state
       v-if="noRunnersFound"