Merge pull request #1182 from MetRonnie/filtering

Allow filtering by ID instead of only task name

Author: hjoliver

CHANGES.md

@@ -10,14 +10,23 @@ creating a new release entry be sure to copy & paste the span tag with the
 `actions:bind` attribute, which is used by a regex to find the text to be
 updated. Only the first match gets replaced, so it's fine to leave the old
 ones in. -->
-
-## __cylc-ui-1.5.0 (<span actions:bind='release-date'>Released 2023-01-16</span>)__
+-------------------------------------------------------------------------------
+## __cylc-ui-1.5.0 (<span actions:bind='release-date'>Upcoming</span>)__
 
 ### Enhancements
 
 [#1184](https://github.com/cylc/cylc-ui/pull/1184) - Mean times for tasks
 in table changed to human readable ISO duration format.
 
+[#1182](https://github.com/cylc/cylc-ui/pull/1182) - Allow filtering by
+cycle point and family in tree & table views.
+
+### Fixes
+
+[#1182](https://github.com/cylc/cylc-ui/pull/1182) - Fixes bug in filtering
+by task name.
+
+-------------------------------------------------------------------------------
 ## __cylc-ui-1.4.0 (<span actions:bind='release-date'>Released 2023-01-16</span>)__
 
 ### Enhancements

src/components/cylc/TaskFilter.vue

@@ -25,16 +25,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="pr-md-2 mb-2 mb-md-0"
     >
       <v-text-field
-        data-cy="filter-task-name"
+        data-cy="filter-id"
         clearable
+        :clear-icon="$options.icons.mdiClose"
         dense
         flat
         hide-details
         outlined
-        placeholder="Filter by task name"
-        v-model="localValue.name"
-        ref="filterNameInput"
-      ></v-text-field>
+        placeholder="Filter by ID"
+        v-model="localValue.id"
+        ref="filterIDInput"
+      />
     </v-col>
     <v-col
       cols="12"
@@ -45,6 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="filter-task-states"
         :items="allStates"
         clearable
+        :clear-icon="$options.icons.mdiClose"
         dense
         flat
         hide-details
@@ -76,14 +78,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Task from '@/components/cylc/Task'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
+import { mdiClose } from '@mdi/js'
 
 export default {
   name: 'TaskFilter',
   components: {
     Task
   },
   props: {
-    value: Object // { name, states }
+    value: Object // { id, states }
   },
   data () {
     return {
@@ -101,6 +104,10 @@ export default {
         this.$emit('input', value)
       }
     }
+  },
+  // Misc options
+  icons: {
+    mdiClose
   }
 }
 </script>

src/components/cylc/common/filter.js

@@ -18,21 +18,21 @@
 /* Logic for filtering tasks. */
 
 /**
- * Return true if a node has matches the specified name/state filter.
+ * Return true if a node matches the specified id/state filter.
  *
  * @export
- * @param {{ name: string, state: string }} node
- * @param {?string} name
+ * @param {Object} node
+ * @param {?string} id
  * @param {?string[]} states
  * @return {boolean}
  */
-export function matchNode (node, name, states) {
+export function matchNode (node, id, states) {
   let ret = true
-  if (name?.trim()) {
-    ret &&= node.name.includes(name)
+  if (id?.trim()) {
+    ret &&= node.tokens.relative_id.includes(id)
   }
   if (states?.length) {
-    ret &&= states.includes(node.state)
+    ret &&= states.includes(node.node.state)
   }
   return ret
 }

src/components/cylc/gscan/GScan.vue

@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-text-field
           v-model="searchWorkflows"
           clearable
+          :clear-icon="$options.icons.mdiClose"
           flat
           dense
           hide-details
@@ -52,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               id="c-gscan-filter-tooltip-btn"
               @click="showFilterTooltip = !showFilterTooltip"
             >
-              <v-icon>{{ svgPaths.filter }}</v-icon>
+              <v-icon>{{ $options.icons.mdiFilter }}</v-icon>
             </v-btn>
           </template>
           <!-- filters tooltip -->
@@ -200,7 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiFilter } from '@mdi/js'
+import { mdiClose, mdiFilter } from '@mdi/js'
 import uniq from 'lodash/uniq'
 import TaskState from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
@@ -233,9 +234,6 @@ export default {
   data () {
     return {
       maximumTasksDisplayed: 5,
-      svgPaths: {
-        filter: mdiFilter
-      },
       /**
        * The filtered workflows. This is the result of applying the filters
        * on the workflows prop.
@@ -470,6 +468,12 @@ export default {
         return validValues.includes(entry[0])
       })
     }
+  },
+
+  // Misc options
+  icons: {
+    mdiClose,
+    mdiFilter
   }
 }
 </script>

src/components/cylc/table/Table.vue

@@ -254,7 +254,7 @@ export default {
   },
   computed: {
     filteredTasks () {
-      return this.tasks.filter(({ task }) => matchNode(task.node, this.tasksFilter.name, this.tasksFilter.states))
+      return this.tasks.filter(({ task }) => matchNode(task, this.tasksFilter.id, this.tasksFilter.states))
     }
   },
   methods: {

src/components/cylc/tree/Tree.vue

@@ -202,7 +202,7 @@ export default {
       }
     },
     filterByTaskName () {
-      return Boolean(this.tasksFilter.name?.trim())
+      return Boolean(this.tasksFilter.id?.trim())
     },
     filterByTaskState () {
       return Boolean(this.tasksFilter.states?.length)
@@ -237,20 +237,31 @@ export default {
         this.filterNode(node)
       }
     },
-    filterNode (node) {
-      let filtered = false
+    /**
+     * Update tree cache entry for this node (and its children if applicable)
+     * with whether the node matches the filters.
+     *
+     * @param {Object} node
+     * @param {boolean} parentFiltered - whether the parent of this node
+     * matches the filter.
+     * @return {boolean} - whether this node matches the filter.
+     */
+    filterNode (node, parentFiltered = false) {
+      const isMatch = (
+        matchNode(node, this.tasksFilter.id, this.tasksFilter.states) ||
+        parentFiltered
+      )
+      let filtered = isMatch
       if (node.type === 'cycle') {
         // follow the family tree from cycle point nodes
         for (const child of node.familyTree[0]?.children || []) {
-          filtered = this.filterNode(child) || filtered
+          filtered = this.filterNode(child, isMatch) || filtered
         }
       } else if (['workflow', 'family'].includes(node.type)) {
         // follow children for workflow or family nodes
         for (const child of node.children) {
-          filtered = this.filterNode(child) || filtered
+          filtered = this.filterNode(child, isMatch) || filtered
         }
-      } else if (node.type === 'task') {
-        filtered = matchNode(node.node, this.tasksFilter.name, this.tasksFilter.states)
       }
       if (this.treeItemCache[node.id]) {
         this.treeItemCache[node.id].filtered = filtered

tests/e2e/specs/table.cy.js

@@ -33,7 +33,7 @@ describe('Table view', () => {
         .should('have.length', 7)
         .should('be.visible')
       cy
-        .get('[data-cy=filter-task-name]')
+        .get('[data-cy=filter-id]')
         .should('be.empty')
       cy
         .get('[data-cy=filter-task-states]')
@@ -42,7 +42,7 @@ describe('Table view', () => {
         .find('input[type="hidden"]')
         .should('have.value', '')
     })
-    it('Should filter by task name', () => {
+    it('Should filter by ID', () => {
       cy.visit('/#/table/one')
       cy
         .get('.c-table table > tbody > tr')
@@ -52,18 +52,17 @@ describe('Table view', () => {
         .get('td > div.d-flex > div')
         .contains('sleepy')
         .should('be.visible')
-      // eep should filter sleepy
-      cy
-        .get('[data-cy=filter-task-name]')
-        .type('eep')
-      cy
-        .get('td > div.d-flex > div')
-        .contains('sleepy')
-        .should('be.visible')
-      cy
-        .get('.c-table table > tbody > tr')
-        .should('have.length', 1)
-        .should('be.visible')
+      for (const id of ['eep', '/sle']) {
+        cy.get('[data-cy=filter-id]')
+          .clear()
+          .type(id)
+        cy.get('td > div.d-flex > div')
+          .contains('sleepy')
+          .should('be.visible')
+        cy.get('.c-table table > tbody > tr')
+          .should('have.length', 1)
+          .should('be.visible')
+      }
     })
     it('Should filter by task state', () => {
       cy.visit('/#/table/one')
@@ -91,7 +90,7 @@ describe('Table view', () => {
         .should('have.length', 1)
         .should('be.visible')
     })
-    it('Should filter by task name and states', () => {
+    it('Should filter by ID and states', () => {
       cy.visit('/#/table/one')
       cy
         .get('.c-table table > tbody > tr')
@@ -109,7 +108,7 @@ describe('Table view', () => {
         .should('have.length', 2)
         .should('be.visible')
       cy
-        .get('[data-cy=filter-task-name]')
+        .get('[data-cy=filter-id]')
         .type('eventually')
       cy
         .get('td > div.d-flex > div')

tests/e2e/specs/tree.cy.js

@@ -185,30 +185,33 @@ describe('Tree view', () => {
 
   describe('filters', () => {
     const initialNumTasks = 7
-    it('Should filter by task name', () => {
+    it('Should filter by ID', () => {
       cy.visit('/#/tree/one')
       // Should not filter by default
-      cy
-        .get('.node-data-task:visible')
+      cy.get('.node-data-task:visible')
         .should('have.length', initialNumTasks)
         .contains('waiting')
-      // eep should filter sleepy
-      cy
-        .get('[data-cy=filter-task-name]')
-        .type('eep')
-      cy
-        .get('.node-data-task:visible')
-        .should('have.length.lessThan', initialNumTasks)
-        .contains('sleepy')
-      cy
-        .get('.node-data-task')
-        .contains('waiting')
-        .should('not.be.visible')
+      for (const id of ['eed', '/suc', 'GOOD', 'SUC']) {
+        cy.get('[data-cy=filter-id]')
+          .clear()
+          .type(id)
+        cy.get('.node-data-task:visible')
+          .should('have.length.lessThan', initialNumTasks)
+          .contains('succeeded')
+        cy.get('.node-data-task')
+          .contains('waiting')
+          .should('not.be.visible')
+      }
       // It should stop filtering when input is cleared
-      cy.get('[data-cy=filter-task-name]')
+      cy.get('[data-cy=filter-id]')
         .clear()
         .get('.node-data-task:visible')
         .should('have.length', initialNumTasks)
+      // It should filter by cycle point
+      cy.get('[data-cy=filter-id]')
+        .type('2000') // (matches all tasks)
+        .get('.node-data-task:visible')
+        .should('have.length', initialNumTasks)
     })
     it('Should filter by task states', () => {
       cy.visit('/#/tree/one')
@@ -231,14 +234,14 @@ describe('Tree view', () => {
         .get('.node-data-task:visible')
         .should('have.length', 1)
     })
-    it('Should filter by task name and states', () => {
+    it('Should filter by ID and states', () => {
       cy.visit('/#/tree/one')
       cy
         .get('.node-data-task')
         .contains('failed')
         .should('be.visible')
       cy
-        .get('[data-cy=filter-task-name]')
+        .get('[data-cy=filter-id]')
         .type('i')
       cy
         .get('[data-cy=filter-task-states]')
@@ -275,7 +278,7 @@ describe('Tree view', () => {
         .contains('sleepy')
         .as('sleepyTask')
         .should('be.visible')
-      cy.get('[data-cy=filter-task-name]')
+      cy.get('[data-cy=filter-id]')
         .type('sleep')
       cy.get('[data-cy=collapse-all]')
         .click()