Merge branch 'master' into gscan-filter

Author: MetRonnie

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

package.json

@@ -90,7 +90,7 @@
     "sinon": "^15.0.0",
     "standard": "^17.0.0",
     "subscriptions-transport-ws": "^0.11.0",
-    "utf-8-validate": "^5.0.9",
+    "utf-8-validate": "^6.0.0",
     "vue-cli-plugin-vuetify": "^2.4.2",
     "vue-cli-plugin-vuetify-essentials": "^0.8.3",
     "vue-template-compiler": "^2.6.14",

src/components/core/Alert.vue

@@ -16,65 +16,61 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div v-if="alert">
-    <v-alert
-      :value="true"
-      :type="alert.color"
-      :icon="alert.icon"
-      :class="getColor(alert.color)"
-      dismissible
-      tile
-      light
-      colored-border
-    >
-      <template v-slot:close="props">
-        <v-icon @click="closeAlert(props.toggle)">{{ svgPaths.close }}</v-icon>
-      </template>
-      {{ alert.text }}
-    </v-alert>
-  </div>
+  <v-snackbar
+    v-if="alert"
+    v-model="alert"
+    :color="getColor(alert.color)"
+    top
+    timeout="-1"
+    data-cy="alert-snack"
+  >
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        icon
+        v-bind="attrs"
+        @click="closeAlert"
+        data-cy="snack-close"
+      >
+        <v-icon>{{ $options.icons.mdiClose }}</v-icon>
+      </v-btn>
+    </template>
+    {{ alert.text }}
+  </v-snackbar>
 </template>
 
 <script>
 import { mdiClose } from '@mdi/js'
 import { mapActions, mapState } from 'vuex'
 
+// TODO: remove later when https://github.com/vuetifyjs/vuetify/issues/11021 is fixed
+const colors = new Map([
+  ['error', 'red'],
+  ['success', 'green'],
+  ['warning', 'amber']
+])
+
 export default {
   name: 'Alert',
 
-  data () {
-    return {
-      // TODO: remove later when https://github.com/vuetifyjs/vuetify/issues/11021 is fixed
-      colors: new Map([
-        ['error', 'red'],
-        ['success', 'green'],
-        ['warning', 'amber']
-      ]),
-      svgPaths: {
-        close: mdiClose
-      }
-    }
-  },
-
   computed: {
     ...mapState(['alert'])
   },
 
   methods: {
     ...mapActions(['setAlert']),
     getColor (type) {
-      return this.colors.get(type) || ''
+      return colors.get(type) || ''
     },
     /**
      * Dismisses the alert from the UI, also removing it from the Vuex store.
-     *
-     * @param {Function} toggleFunction - the original Vuetify toggle function
-     * @see https://vuetifyjs.com/en/api/v-alert/
      */
-    closeAlert (toggleFunction) {
+    closeAlert () {
       this.setAlert(null)
-      toggleFunction()
     }
+  },
+
+  icons: {
+    mdiClose
   }
 }
 </script>

src/components/cylc/Mutation.vue

@@ -116,17 +116,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-tooltip>
       </v-card-actions>
       <v-snackbar
-        v-model="showSnackbar"
-        v-bind="snackbarProps"
-        data-cy="response-snackbar"
+        v-model="showWarning"
+        timeout="4e3"
+        color="amber accent-2"
+        light
+        data-cy="warning-snack"
       >
-        {{ response.msg }}
+        {{ warningMsg }}
         <template v-slot:action="{ attrs }">
           <v-btn
-            @click="showSnackbar = false"
+            @click="showWarning = false"
             icon
             v-bind="attrs"
-            data-cy="snackbar-close"
+            data-cy="snack-close"
           >
             <v-icon>
               {{ $options.icons.close }}
@@ -143,7 +145,8 @@ import EditRuntimeForm from '@/components/graphqlFormGenerator/EditRuntimeForm.v
 import Markdown from '@/components/Markdown'
 import {
   getMutationShortDesc,
-  getMutationExtendedDesc
+  getMutationExtendedDesc,
+  mutationStatus
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
 
@@ -186,10 +189,7 @@ export default {
   data: () => ({
     isValid: false,
     submitting: false,
-    response: {
-      msg: null,
-      level: 'warn'
-    }
+    warningMsg: null
   }),
 
   computed: {
@@ -201,26 +201,13 @@ export default {
     extendedDescription () {
       return getMutationExtendedDesc(this.mutation.description)
     },
-    showSnackbar: {
+    showWarning: {
       get () {
-        return Boolean(this.response.msg)
+        return Boolean(this.warningMsg)
       },
       set (val) {
-        if (!val) this.response.msg = null
+        if (!val) this.warningMsg = null
       }
-    },
-    snackbarProps () {
-      return this.response.level === 'error'
-        ? {
-          timeout: -1,
-          color: 'red accent-2',
-          dark: true
-        }
-        : {
-          timeout: 4e3,
-          color: 'amber accent-2',
-          light: true
-        }
     }
   },
 
@@ -230,16 +217,13 @@ export default {
       this.submitting = true
       this.$refs.form.submit().then(response => {
         this.submitting = false
-        if (response.status.name.includes('failed')) {
-          this.response.msg = response.message
-          this.response.level = 'error'
-        } else if (response.status.name === 'warn') {
-          this.response.msg = response.message
-          this.response.level = 'warn'
-        } else {
+        if (response.status === mutationStatus.SUCCEEDED) {
           // Close the form on success
           this.cancel()
+        } else if (response.status === mutationStatus.WARN) {
+          this.warningMsg = response.message
         }
+        // else if error, an alert is generated by AOTF
       })
     }
   },

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

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