USB external import, and filter chips on health-dot cards

frontend/src/components/pluginAssetPanels.js

@@ -45,6 +45,73 @@ export function rows(panel) {
   return list
 }
 
+// Optional in-card filter chips. A list panel declares facets: {key, order,
+// labels} and the renderer offers one chip per distinct value of that key,
+// with a count. Filtering is client-side over rows the panel already fetched -
+// no extra request, and the counts stay honest because they are computed from
+// the same array.
+//
+// Declared rather than hardcoded because the reason it exists is generic: the
+// activity feed mixes info, warning and critical, and somebody triaging wants
+// the criticals alone. Any list panel with a category column has that problem.
+// Colour names carry no meaning to a reader. A panel keyed on statecolor
+// (green/yellow/red) is labelled by the LEVEL those map to, while one keyed on
+// a word (info/warning/critical) is labelled by the word itself.
+const COLOUR_VALUES = ['green', 'yellow', 'red', 'grey', 'gray', 'blue']
+const LEVEL_ORDER = ['critical', 'warning', 'ok', 'unknown']
+
+// A panel that shows a health dot has already declared what it is dotting on.
+// Reuse that instead of asking every panel to declare filters a second time:
+// any card with a status rollup gets chips, and the two cannot disagree.
+function facetSpec(panel) {
+  if (panel.facets && panel.facets.key) return panel.facets
+  const status = panel.status
+  if (!status || !status.key) return null
+  const levels = status.levels || {}
+  const order = Object.keys(levels).sort(
+    (a, b) => LEVEL_ORDER.indexOf(levels[a]) - LEVEL_ORDER.indexOf(levels[b])
+  )
+  const labels = {}
+  Object.keys(levels).forEach((value) => {
+    labels[value] = COLOUR_VALUES.includes(String(value).toLowerCase())
+      ? humanize(levels[value])
+      : humanize(value)
+  })
+  return { key: status.key, order, labels }
+}
+
+export function facets(panel) {
+  const spec = facetSpec(panel)
+  if (!spec || !spec.key) return []
+  const all = rows(panel)
+  const counts = new Map()
+  all.forEach((item) => {
+    const value = item[spec.key]
+    if (value === null || value === undefined || value === '') return
+    const key = String(value)
+    counts.set(key, (counts.get(key) || 0) + 1)
+  })
+  // Declared order first, so severity reads critical-warning-info rather than
+  // alphabetically; anything unexpected in the data still gets a chip.
+  const declared = (spec.order || []).filter((value) => counts.has(value))
+  const extra = [...counts.keys()].filter((value) => !declared.includes(value)).sort()
+  return [...declared, ...extra].map((value) => ({
+    value,
+    label: (spec.labels && spec.labels[value]) || humanize(value),
+    count: counts.get(value)
+  }))
+}
+
+// rows() after the viewer's chip selection. An empty selection means "no filter
+// applied", NOT "hide everything": a card that vanished when you deselected the
+// last chip would read as broken.
+export function facetedRows(panel, selected) {
+  const all = rows(panel)
+  const spec = facetSpec(panel)
+  if (!spec || !spec.key || !selected || !selected.length) return all
+  return all.filter((item) => selected.includes(String(item[spec.key])))
+}
+
 export function mapTitle(panel, item) {
   const key = panel.map && panel.map.title
   return key ? item[key] : ''