Allow filtering by ID instead of only task name

Author: MetRonnie

src/components/cylc/TaskFilter.vue

@@ -25,16 +25,16 @@ 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"
+        placeholder="Filter by ID"
+        v-model="localValue.id"
+        ref="filterIDInput"
       />
     </v-col>
     <v-col
@@ -86,7 +86,7 @@ export default {
     Task
   },
   props: {
-    value: Object // { name, states }
+    value: Object // { id, states }
   },
   data () {
     return {

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/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()

tests/unit/components/cylc/table/table.vue.spec.js

@@ -100,24 +100,24 @@ describe('Table component', () => {
     expect(wrapper.find('div')).to.not.equal(null)
   })
   describe('Filter', () => {
-    describe('Filter by name', () => {
-      it('should not filter by name or tasks by default', () => {
+    describe('Filter by ID', () => {
+      it('should not filter by ID or task state by default', () => {
         const wrapper = mountFunction({
           propsData: {
             tasks: simpleTableTasks
           }
         })
         expect(wrapper.vm.filteredTasks.length).to.equal(3)
       })
-      it('should filter by name', () => {
+      it('should filter by ID', () => {
         const wrapper = mountFunction({
           propsData: {
             tasks: simpleTableTasks
           },
           data () {
             return {
               tasksFilter: {
-                name: 'taskA'
+                id: 'taskA'
               }
             }
           }
@@ -132,7 +132,7 @@ describe('Table component', () => {
           data () {
             return {
               tasksFilter: {
-                name: '',
+                id: '',
                 states: [
                   TaskState.WAITING.name
                 ]
@@ -150,7 +150,7 @@ describe('Table component', () => {
           data () {
             return {
               tasksFilter: {
-                name: 'taskA',
+                id: 'taskA',
                 states: [
                   TaskState.WAITING.name
                 ]