Add latest changes from gitlab-org/gitlab@master

5 files changed, 115 insertions, 2 deletions

diff --git a/app/assets/javascripts/runner/admin_runners/index.js b/app/assets/javascripts/runner/admin_runners/index.js
index 2405bab7957..12e2cb2ee9f 100644
--- a/app/assets/javascripts/runner/admin_runners/index.js
+++ b/app/assets/javascripts/runner/admin_runners/index.js
@@ -26,7 +26,12 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
     return null;
   }
 
-  const { runnerInstallHelpPage, registrationToken } = el.dataset;
+  const {
+    runnerInstallHelpPage,
+    registrationToken,
+    onlineContactTimeoutSecs,
+    staleTimeoutSecs,
+  } = el.dataset;
 
   const { cacheConfig, typeDefs, localMutations } = createLocalState();
 
@@ -40,6 +45,8 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
     provide: {
       runnerInstallHelpPage,
       localMutations,
+      onlineContactTimeoutSecs,
+      staleTimeoutSecs,
     },
     render(h) {
       return h(AdminRunnersApp, {
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index 05cd1879d9d..dcfd4b84dd2 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -7,6 +7,7 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import checkedRunnerIdsQuery from '../graphql/list/checked_runner_ids.query.graphql';
 import { formatJobCount, tableField } from '../utils';
 import RunnerSummaryCell from './cells/runner_summary_cell.vue';
+import RunnerStatusPopover from './runner_status_popover.vue';
 import RunnerStatusCell from './cells/runner_status_cell.vue';
 import RunnerTags from './runner_tags.vue';
 
@@ -26,6 +27,7 @@ export default {
     GlSkeletonLoader,
     TooltipOnTruncate,
     TimeAgo,
+    RunnerStatusPopover,
     RunnerSummaryCell,
     RunnerTags,
     RunnerStatusCell,
@@ -136,6 +138,11 @@ export default {
         />
       </template>
 
+      <template #head(status)="{ label }">
+        {{ label }}
+        <runner-status-popover />
+      </template>
+
       <template #cell(status)="{ item }">
         <runner-status-cell :runner="item" />
       </template>
diff --git a/app/assets/javascripts/runner/components/runner_status_popover.vue b/app/assets/javascripts/runner/components/runner_status_popover.vue
new file mode 100644
index 00000000000..5b22f7828a1
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_status_popover.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { duration } from '~/lib/utils/datetime/timeago_utility';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import {
+  I18N_STATUS_POPOVER_TITLE,
+  I18N_STATUS_POPOVER_NEVER_CONTACTED,
+  I18N_STATUS_POPOVER_NEVER_CONTACTED_DESCRIPTION,
+  I18N_STATUS_POPOVER_ONLINE,
+  I18N_STATUS_POPOVER_ONLINE_DESCRIPTION,
+  I18N_STATUS_POPOVER_OFFLINE,
+  I18N_STATUS_POPOVER_OFFLINE_DESCRIPTION,
+  I18N_STATUS_POPOVER_STALE,
+  I18N_STATUS_POPOVER_STALE_DESCRIPTION,
+} from '~/runner/constants';
+
+export default {
+  name: 'RunnerStatusPopover',
+  components: {
+    GlSprintf,
+    HelpPopover,
+  },
+  inject: ['onlineContactTimeoutSecs', 'staleTimeoutSecs'],
+  computed: {
+    onlineContactTimeoutDuration() {
+      return duration(this.onlineContactTimeoutSecs * 1000);
+    },
+    staleTimeoutDuration() {
+      return duration(this.staleTimeoutSecs * 1000);
+    },
+  },
+  I18N_STATUS_POPOVER_TITLE,
+  I18N_STATUS_POPOVER_NEVER_CONTACTED,
+  I18N_STATUS_POPOVER_NEVER_CONTACTED_DESCRIPTION,
+  I18N_STATUS_POPOVER_ONLINE,
+  I18N_STATUS_POPOVER_ONLINE_DESCRIPTION,
+  I18N_STATUS_POPOVER_OFFLINE,
+  I18N_STATUS_POPOVER_OFFLINE_DESCRIPTION,
+  I18N_STATUS_POPOVER_STALE,
+  I18N_STATUS_POPOVER_STALE_DESCRIPTION,
+};
+</script>
+
+<template>
+  <help-popover>
+    <template #title>{{ $options.I18N_STATUS_POPOVER_TITLE }}</template>
+
+    <p class="gl-mb-0">
+      <strong>{{ $options.I18N_STATUS_POPOVER_NEVER_CONTACTED }}</strong>
+      <gl-sprintf :message="$options.I18N_STATUS_POPOVER_NEVER_CONTACTED_DESCRIPTION">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-mb-0">
+      <strong>{{ $options.I18N_STATUS_POPOVER_ONLINE }}</strong>
+      <gl-sprintf :message="$options.I18N_STATUS_POPOVER_ONLINE_DESCRIPTION">
+        <template #elapsedTime>{{ onlineContactTimeoutDuration }}</template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-mb-0">
+      <strong>{{ $options.I18N_STATUS_POPOVER_OFFLINE }}</strong>
+      <gl-sprintf :message="$options.I18N_STATUS_POPOVER_OFFLINE_DESCRIPTION">
+        <template #elapsedTime>{{ onlineContactTimeoutDuration }}</template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-mb-0">
+      <strong>{{ $options.I18N_STATUS_POPOVER_STALE }}</strong>
+      <gl-sprintf :message="$options.I18N_STATUS_POPOVER_STALE_DESCRIPTION">
+        <template #elapsedTime>{{ staleTimeoutDuration }}</template>
+      </gl-sprintf>
+    </p>
+  </help-popover>
+</template>
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index de0196e98a2..165968558c5 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -21,6 +21,26 @@ export const I18N_GROUP_RUNNER_DESCRIPTION = s__(
 );
 export const I18N_PROJECT_RUNNER_DESCRIPTION = s__('Runners|Associated with one or more projects');
 
+// Status help popover
+export const I18N_STATUS_POPOVER_TITLE = s__('Runners|Runner statuses');
+
+export const I18N_STATUS_POPOVER_NEVER_CONTACTED = s__('Runners|Never contacted:');
+export const I18N_STATUS_POPOVER_NEVER_CONTACTED_DESCRIPTION = s__(
+  'Runners|Runner has never contacted GitLab (when you register a runner, use %{codeStart}gitlab-runner run%{codeEnd} to bring it online)',
+);
+export const I18N_STATUS_POPOVER_ONLINE = s__('Runners|Online:');
+export const I18N_STATUS_POPOVER_ONLINE_DESCRIPTION = s__(
+  'Runners|Runner has contacted GitLab within the last %{elapsedTime}',
+);
+export const I18N_STATUS_POPOVER_OFFLINE = s__('Runners|Offline:');
+export const I18N_STATUS_POPOVER_OFFLINE_DESCRIPTION = s__(
+  'Runners|Runner has not contacted GitLab in more than %{elapsedTime}',
+);
+export const I18N_STATUS_POPOVER_STALE = s__('Runners|Stale:');
+export const I18N_STATUS_POPOVER_STALE_DESCRIPTION = s__(
+  'Runners|Runner has not contacted GitLab in more than %{elapsedTime}',
+);
+
 // Status tooltips
 export const I18N_ONLINE_TIMEAGO_TOOLTIP = s__(
   'Runners|Runner is online; last contact was %{timeAgo}',
@@ -63,7 +83,7 @@ export const I18N_LOCKED_RUNNER_DESCRIPTION = s__(
 
 export const I18N_ASSIGNED_PROJECTS = s__('Runners|Assigned Projects (%{projectCount})');
 export const I18N_NONE = __('None');
-export const I18N_NO_JOBS_FOUND = s__('Runner|This runner has not run any jobs.');
+export const I18N_NO_JOBS_FOUND = s__('Runners|This runner has not run any jobs.');
 
 // Styles
 
diff --git a/app/assets/javascripts/runner/group_runners/index.js b/app/assets/javascripts/runner/group_runners/index.js
index 60b7a7ab541..0dade30f820 100644
--- a/app/assets/javascripts/runner/group_runners/index.js
+++ b/app/assets/javascripts/runner/group_runners/index.js
@@ -20,6 +20,8 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
     groupId,
     groupFullPath,
     groupRunnersLimitedCount,
+    onlineContactTimeoutSecs,
+    staleTimeoutSecs,
   } = el.dataset;
 
   const apolloProvider = new VueApollo({
@@ -32,6 +34,8 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
     provide: {
       runnerInstallHelpPage,
       groupId,
+      onlineContactTimeoutSecs: parseInt(onlineContactTimeoutSecs, 10),
+      staleTimeoutSecs: parseInt(staleTimeoutSecs, 10),
     },
     render(h) {
       return h(GroupRunnersApp, {