1 files changed, 42 insertions, 32 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
index 543bdf94307..e6b03751350 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
@@ -22,6 +22,12 @@ export default {
     finishedTime() {
       return this.pipeline?.details?.finished_at;
     },
+    skipped() {
+      return this.pipeline?.details?.status?.label === 'skipped';
+    },
+    stuck() {
+      return this.pipeline.flags.stuck;
+    },
     durationFormatted() {
       const date = new Date(this.duration * 1000);
 
@@ -42,46 +48,50 @@ export default {
 
       return `${hh}:${mm}:${ss}`;
     },
-    legacySectionClass() {
-      return !this.glFeatures.newPipelinesTable ? 'table-section section-15' : '';
-    },
-    legacyTableMobileClass() {
-      return !this.glFeatures.newPipelinesTable ? 'table-mobile-content' : '';
-    },
     showInProgress() {
-      return !this.duration && !this.finishedTime;
+      return !this.duration && !this.finishedTime && !this.skipped;
+    },
+    showSkipped() {
+      return !this.duration && !this.finishedTime && this.skipped;
     },
   },
 };
 </script>
 <template>
-  <div :class="legacySectionClass">
-    <div v-if="!glFeatures.newPipelinesTable" class="table-mobile-header" role="rowheader">
-      {{ s__('Pipeline|Duration') }}
-    </div>
-    <div :class="legacyTableMobileClass">
-      <span v-if="showInProgress" data-testid="pipeline-in-progress">
-        <gl-icon name="hourglass" class="gl-vertical-align-baseline! gl-mr-2" :size="12" />
-        {{ s__('Pipeline|In progress') }}
-      </span>
+  <div>
+    <span v-if="showInProgress" data-testid="pipeline-in-progress">
+      <gl-icon v-if="stuck" name="warning" class="gl-mr-2" :size="12" data-testid="warning-icon" />
+      <gl-icon
+        v-else
+        name="hourglass"
+        class="gl-vertical-align-baseline! gl-mr-2"
+        :size="12"
+        data-testid="hourglass-icon"
+      />
+      {{ s__('Pipeline|In progress') }}
+    </span>
+
+    <span v-if="showSkipped" data-testid="pipeline-skipped">
+      <gl-icon name="status_skipped_borderless" class="gl-mr-2" :size="16" />
+      {{ s__('Pipeline|Skipped') }}
+    </span>
 
-      <p v-if="duration" class="duration">
-        <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" />
-        {{ durationFormatted }}
-      </p>
+    <p v-if="duration" class="duration">
+      <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" />
+      {{ durationFormatted }}
+    </p>
 
-      <p v-if="finishedTime" class="finished-at d-none d-md-block">
-        <gl-icon name="calendar" class="gl-vertical-align-baseline!" :size="12" />
+    <p v-if="finishedTime" class="finished-at d-none d-md-block">
+      <gl-icon name="calendar" class="gl-vertical-align-baseline!" :size="12" />
 
-        <time
-          v-gl-tooltip
-          :title="tooltipTitle(finishedTime)"
-          data-placement="top"
-          data-container="body"
-        >
-          {{ timeFormatted(finishedTime) }}
-        </time>
-      </p>
-    </div>
+      <time
+        v-gl-tooltip
+        :title="tooltipTitle(finishedTime)"
+        data-placement="top"
+        data-container="body"
+      >
+        {{ timeFormatted(finishedTime) }}
+      </time>
+    </p>
   </div>
 </template>