From ff66a5cf97043d8bf528b303deb7529ed70916a5 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Thu, 4 Jan 2024 16:21:26 +0100
Subject: [PATCH] Improve network filter item

---
 .../src/widgets/nwfilter/NWFilterItem.tsx       | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/virtweb_frontend/src/widgets/nwfilter/NWFilterItem.tsx b/virtweb_frontend/src/widgets/nwfilter/NWFilterItem.tsx
index 337c1a8..d0479a1 100644
--- a/virtweb_frontend/src/widgets/nwfilter/NWFilterItem.tsx
+++ b/virtweb_frontend/src/widgets/nwfilter/NWFilterItem.tsx
@@ -18,6 +18,18 @@ export function NWFilterItem(p: {
   dense?: boolean;
   onDelete?: () => void;
 }): React.ReactElement {
+  const specs = [];
+  if (p.value) {
+    if (p.value.rules.length === 1) specs.push(`1 rule`);
+    else if (p.value.rules.length > 1)
+      specs.push(`${p.value.rules.length} rules`);
+
+    if (p.value.join_filters.length === 1) specs.push(`1 joint filter`);
+    else if (p.value.join_filters.length > 1)
+      specs.push(`${p.value.join_filters.length} joint filters`);
+
+    if (p.value.priority) specs.push(`priority: ${p.value.priority}`);
+  }
   const inner = (
     <>
       <ListItemAvatar>
@@ -31,10 +43,7 @@ export function NWFilterItem(p: {
             ? `${p.value.name} (${p.value.chain?.protocol ?? "unspecified"})`
             : "Unspecified"
         }
-        secondary={
-          p.value &&
-          `${p.value.rules.length} rules - ${p.value.join_filters.length} joint filters`
-        }
+        secondary={specs.join(" / ")}
       />
     </>
   );