JobList: Filter jobs with tasks

[VallariAg]

Seeing as we receive so much data about jobs in JobList, we can use it to add useful filter options like filter by task name. Pros:

1. JobList sends 1 request to paddles and gets all of job data. Pagination happens on client side, and so can these filtering on job data.
2. If there is problem with a task, user can filter jobs which include that task so it's easier to inspect jobs that run that task.

POC: Filtered 18 jobs (out of total 244 jobs) which have "ceph.healthy" task. It was pretty fast too. The task column shows "number of total tasks" because I'm not sure what's the appropriate data to show there.

I added this in JobList:

  {
    header: "tasks",
    id: "tasks",
    Cell: ({ row }) => {
      return (
        <div>{Object.keys(row.original.tasks || {}).length}</div>
      );
    },
    accessorFn: (row: Job) => (Object.keys(row.tasks || {})),
    size: 150,
    enableColumnFilter: true,
    filterFn: (row, id, filterValue) => {
      return (row.original.tasks?.some(task => filterValue in task)) || false 
    } 
  },

Use-case: searching for jobs setup with cephadm, we can look for "cephadm.install" task.

[VallariAg]

https://www.material-react-table.com/docs/guides/global-filtering#remote-demo

Global Filtering is interesting which lets us search data across all rows of all columns, we can add this to JobsList easily since it has client side rendering. It also allows to search on hidden columns (so we can hide "tasks" column by default).

Each column can have it's own globalFilterFn so we can have fuzzy search filter on some columns like "job description" and custom filter on "tasks" column.