diff --git a/frontend/src/api.ts b/frontend/src/api.ts index da2477a6..3b5463d3 100644 --- a/frontend/src/api.ts +++ b/frontend/src/api.ts @@ -58,6 +58,8 @@ export const tulipApi = createApi({ parent_id: flow.link_parent_id, child_id: flow.link_child_id, tags: flow.tags, + flags_in: flow.flags_in, + flags_out: flow.flags_out, flags: flow.flags, flagids: flow.flagids, filename: flow.pcap_name, @@ -91,6 +93,8 @@ export const tulipApi = createApi({ parent_id: flow.link_parent_id, child_id: flow.link_child_id, tags: flow.tags, + flags_in: flow.flags_in, + flags_out: flow.flags_out, flags: flow.flags, flagids: flow.flagids, filename: flow.pcap_name, diff --git a/frontend/src/components/FlowList.tsx b/frontend/src/components/FlowList.tsx index 6f71a2a3..1cfe71d7 100644 --- a/frontend/src/components/FlowList.tsx +++ b/frontend/src/components/FlowList.tsx @@ -354,7 +354,7 @@ function FlowListEntry({ flow, isActive, onHeartClick }: FlowListEntryProps) {
{filtered_tag_list.map((tag) => ( - + ))}
diff --git a/frontend/src/components/Tag.tsx b/frontend/src/components/Tag.tsx index b8d76fe7..9661412f 100644 --- a/frontend/src/components/Tag.tsx +++ b/frontend/src/components/Tag.tsx @@ -22,12 +22,13 @@ export function tagToColor(tag: string) { } interface TagProps { tag: string; + count?: number; color?: string; disabled?: boolean; excluded?: boolean; onClick?: () => void; } -export const Tag = ({ tag, color, disabled = false, excluded = false, onClick }: TagProps) => { +export const Tag = ({ tag, count = 0, color, disabled = false, excluded = false, onClick }: TagProps) => { var tagBackgroundColor = disabled ? "#eee" : color ?? tagToColor(tag); var tagTextColor = disabled @@ -52,7 +53,7 @@ export const Tag = ({ tag, color, disabled = false, excluded = false, onClick }: color: tagTextColor, }} > - {tag} + {tag}{count > 1 ? ` x${count}` : ''} ); }; diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 2b3c20df..a21d7f39 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -12,6 +12,8 @@ export interface Flow { parent_id: Id; child_id: Id; tags: string[]; + flags_in: number; + flags_out: number; flags: string[]; flagids: string[]; suricata: number[];