Add deselect all and filter to TP grid columns

[jhg03a]

I'm submitting a ...

• [ ] bug report
• [ ] new feature / enhancement request
• [X] improvement request (usability, performance, tech debt, etc.)
• [ ] other

Traffic Control components affected ...

• [ ] CDN in a Box
• [ ] Documentation
• [ ] Grove
• [ ] Traffic Control Client
• [ ] Traffic Monitor
• [ ] Traffic Ops
• [ ] Traffic Ops ORT
• [X] Traffic Portal
• [ ] Traffic Router
• [ ] Traffic Stats
• [ ] Traffic Vault
• [ ] unknown

Current behavior:

If you're trying to customize what columns you're selecting in a grid such as delivery services or servers, you have to individually hunt through the entire list and turn off each field that's enabled by default. Then hunt through the entire list and find the fields you want to turn on.

Expected / new behavior:

I'd like to see pinned to the top of the selection list, a deselect all checkbox and an optional column filter search box. This allows me as a power user to quickly drop all selected columns and turn on the subset I want quickly without having to scroll through the entire list of fields.

Minimal reproduction of the problem with instructions:

Anything else:

[jhg03a]

The way I think of it is to pin a top row inside the column select dropdown. That row would have a checkbox to turn everything on/off, and to the right of it would be a box you could type in which would limit the column name choices for example a workflow could look like:

1. click deselect all
2. search column xml, this limits to only the one column option
3. select xmlid column
4. clear xml search text
5. search column rewrite, this limits column choices to Edge Header Rewrite and Mid Header Rewrite
6. select Edge Header Rewrite
7.  close column filter dropdown

[mitchell852]

So something similar to this basically?

gives you a way to:

1. uncheck all items
2. narrow the list down quickly for easy selection

[jhg03a]

Yep, that's one way to do it. I was thinking a standard tri-state checkbox next to the textbox, but that works too.

[ocket8888]

fuzzy search pls! (example algorithm: https://github.com/apache/trafficcontrol/blob/master/experimental/traffic-portal-angular7/src/app/components/dashboard/dashboard.component.ts#L79)