add pipeline filtering and display an empty stages message when no st…

…ages available
FlowFuse · Dec 2, 2024 · 8a2c400 · 8a2c400
1 parent 1fb8659
commit 8a2c400
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/frontend/src/pages/team/Pipelines/components/TeamPipeline.vue b/frontend/src/pages/team/Pipelines/components/TeamPipeline.vue
@@ -19,12 +19,13 @@
             </span>
         </router-link>
         <div class="content">
-            <ul class="stages-list">
+            <ul v-if=" pipeline.stages.length > 0" class="stages-list">
                 <li v-for="stage in pipeline.stages" :key="stage.id">
                     <TeamPipelineStage :stage="stage" :application="pipeline.application" />
                     <ChevronRightIcon class="ff-icon" />
                 </li>
             </ul>
+            <p v-else class="empty-stages-message">There don't seem to be any stages yet!</p>
         </div>
     </div>
 </template>
@@ -104,6 +105,11 @@ export default {
                 }
             }
         }
+
+        .empty-stages-message {
+            text-align: center;
+            color: $ff-grey-500;
+    }
     }
 }
 </style>
diff --git a/frontend/src/pages/team/Pipelines/index.vue b/frontend/src/pages/team/Pipelines/index.vue
@@ -50,7 +50,7 @@
 
                     <section v-if="pipelines.length > 0" class="pipelines">
                         <ul class="pipelines-list">
-                            <li v-for="pipeline in pipelines" :key="pipeline.id">
+                            <li v-for="pipeline in filteredPipelines" :key="pipeline.id">
                                 <TeamPipeline :pipeline="pipeline" />
                             </li>
                         </ul>
@@ -97,7 +97,20 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team'])
+        ...mapGetters('account', ['featuresCheck', 'team']),
+        filteredPipelines () {
+            if (this.filterTerm) {
+                return this.pipelines
+                    .filter(pipeline => {
+                        return [
+                            pipeline.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
+                            pipeline.id.toLowerCase().includes(this.filterTerm.toLowerCase()),
+                            pipeline.application.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
+                            pipeline.application.id.toLowerCase().includes(this.filterTerm.toLowerCase())
+                        ].includes(true)
+                    })
+            } return this.pipelines
+        }
     },
     mounted () {
         if (this.featuresCheck.devOpsPipelinesFeatureEnabled) {