1 files changed, 112 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/cells/runner_stacked_summary_cell.vue b/app/assets/javascripts/runner/components/cells/runner_stacked_summary_cell.vue
new file mode 100644
index 00000000000..e5d49eb7c8e
--- /dev/null
+++ b/app/assets/javascripts/runner/components/cells/runner_stacked_summary_cell.vue
@@ -0,0 +1,112 @@
+<script>
+import { GlIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import RunnerName from '../runner_name.vue';
+import RunnerTags from '../runner_tags.vue';
+import RunnerTypeBadge from '../runner_type_badge.vue';
+
+import { formatJobCount } from '../../utils';
+import {
+  I18N_LOCKED_RUNNER_DESCRIPTION,
+  I18N_VERSION_LABEL,
+  I18N_LAST_CONTACT_LABEL,
+  I18N_CREATED_AT_LABEL,
+} from '../../constants';
+import RunnerSummaryField from './runner_summary_field.vue';
+
+export default {
+  components: {
+    GlIcon,
+    GlSprintf,
+    TimeAgo,
+    RunnerSummaryField,
+    RunnerName,
+    RunnerTags,
+    RunnerTypeBadge,
+    RunnerUpgradeStatusIcon: () =>
+      import('ee_component/runner/components/runner_upgrade_status_icon.vue'),
+    TooltipOnTruncate,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    jobCount() {
+      return formatJobCount(this.runner.jobCount);
+    },
+  },
+  i18n: {
+    I18N_LOCKED_RUNNER_DESCRIPTION,
+    I18N_VERSION_LABEL,
+    I18N_LAST_CONTACT_LABEL,
+    I18N_CREATED_AT_LABEL,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <slot :runner="runner" name="runner-name">
+        <runner-name :runner="runner" />
+      </slot>
+      <gl-icon
+        v-if="runner.locked"
+        v-gl-tooltip
+        :title="$options.i18n.I18N_LOCKED_RUNNER_DESCRIPTION"
+        name="lock"
+      />
+      <runner-type-badge :type="runner.runnerType" size="sm" class="gl-vertical-align-middle" />
+    </div>
+
+    <div class="gl-ml-auto gl-display-inline-flex gl-max-w-full gl-py-2">
+      <div class="gl-flex-shrink-0">
+        <runner-upgrade-status-icon :runner="runner" />
+        <gl-sprintf v-if="runner.version" :message="$options.i18n.I18N_VERSION_LABEL">
+          <template #version>{{ runner.version }}</template>
+        </gl-sprintf>
+      </div>
+      <div class="gl-text-secondary gl-mx-2" aria-hidden="true">·</div>
+      <tooltip-on-truncate class="gl-text-truncate gl-display-block" :title="runner.description">
+        {{ runner.description }}
+      </tooltip-on-truncate>
+    </div>
+
+    <div>
+      <runner-summary-field icon="clock">
+        <gl-sprintf :message="$options.i18n.I18N_LAST_CONTACT_LABEL">
+          <template #timeAgo>
+            <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
+            <template v-else>{{ __('Never') }}</template>
+          </template>
+        </gl-sprintf>
+      </runner-summary-field>
+
+      <runner-summary-field v-if="runner.ipAddress" icon="disk" :tooltip="__('IP Address')">
+        {{ runner.ipAddress }}
+      </runner-summary-field>
+
+      <runner-summary-field icon="pipeline" data-testid="job-count" :tooltip="__('Jobs')">
+        {{ jobCount }}
+      </runner-summary-field>
+
+      <runner-summary-field icon="calendar">
+        <gl-sprintf :message="$options.i18n.I18N_CREATED_AT_LABEL">
+          <template #timeAgo>
+            <time-ago v-if="runner.createdAt" :time="runner.createdAt" />
+          </template>
+        </gl-sprintf>
+      </runner-summary-field>
+    </div>
+
+    <runner-tags class="gl-display-block gl-pt-2" :tag-list="runner.tagList" size="sm" />
+  </div>
+</template>