Showing the pending pipelines on top

web/src/store/pipelines.ts

@@ -4,7 +4,7 @@ import { computed, reactive, Ref, ref } from 'vue';
 import useApiClient from '~/compositions/useApiClient';
 import { Pipeline, PipelineFeed, PipelineWorkflow } from '~/lib/api/types';
 import { useRepoStore } from '~/store/repos';
-import { comparePipelines, isPipelineActive } from '~/utils/helpers';
+import { comparePipelines, comparePipelinesWithStatus, isPipelineActive } from '~/utils/helpers';
 
 export const usePipelineStore = defineStore('pipelines', () => {
   const apiClient = useApiClient();
@@ -71,7 +71,7 @@ export const usePipelineStore = defineStore('pipelines', () => {
         );
         return [...acc, ...repoPipelinesArray];
       }, [])
-      .sort(comparePipelines)
+      .sort(comparePipelinesWithStatus)
       .filter((pipeline) => repoStore.ownedRepoIds.includes(pipeline.repo_id)),
   );
 

web/src/utils/helpers.ts

@@ -53,6 +53,19 @@ export function comparePipelines(a: Pipeline, b: Pipeline): number {
   return (b.created_at || -1) - (a.created_at || -1);
 }
 
+/**
+ * Compare two pipelines by the status.
+ * Giving pending, running, or started higher priority than other status
+ * @param {Object} a - A pipeline.
+ * @param {Object} b - A pipeline.
+ * @returns {number}
+ */
+export function comparePipelinesWithStatus(a: Pipeline, b: Pipeline): number {
+  const bPriority = ['pending', 'running', 'started'].includes(b.status) ? 1 : 0;
+  const aPriority = ['pending', 'running', 'started'].includes(a.status) ? 1 : 0;
+  return bPriority - aPriority;
+}
+
 export function isPipelineActive(pipeline: Pipeline): boolean {
   return ['pending', 'running', 'started'].includes(pipeline.status);
 }