From c5f28df56fdc5fabbca681dc65f01aa7a61468d9 Mon Sep 17 00:00:00 2001
From: Julien Pinsonneau <jpinsonn@redhat.com>
Date: Wed, 20 Apr 2022 15:49:05 +0200
Subject: [PATCH 1/2] format ports & protocols

---
 web/src/components/query-summary/summary-panel.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/query-summary/summary-panel.tsx b/web/src/components/query-summary/summary-panel.tsx
index f270d5e24..453f2068d 100644
--- a/web/src/components/query-summary/summary-panel.tsx
+++ b/web/src/components/query-summary/summary-panel.tsx
@@ -22,6 +22,8 @@ import { TimeRange } from '../../utils/datetime';
 import { QuerySummaryContent } from './query-summary';
 import './summary-panel.css';
 import _ from 'lodash';
+import { formatPort } from '../../utils/port';
+import { formatProtocol } from '../../utils/protocol';
 
 type TypeCardinality = {
   type: string;
@@ -186,11 +188,15 @@ export const SummaryPanelContent: React.FC<{
               typeCardinalityContent(tc)
             )
           )}
-          {accordionItem('ports', t('{{count}} Port(s)', { count: ports.length }), listCardinalityContent(ports))}
+          {accordionItem(
+            'ports',
+            t('{{count}} Port(s)', { count: ports.length }),
+            listCardinalityContent(ports.map(p => formatPort(p)))
+          )}
           {accordionItem(
             'protocols',
             t('{{count}} Protocol(s)', { count: protocols.length }),
-            listCardinalityContent(protocols)
+            listCardinalityContent(protocols.map(p => formatProtocol(p)))
           )}
         </Accordion>
       );

From af8c31a0546edd6caf1037aabaccd720ab62a890 Mon Sep 17 00:00:00 2001
From: Julien Pinsonneau <jpinsonn@redhat.com>
Date: Mon, 25 Apr 2022 09:28:41 +0200
Subject: [PATCH 2/2] listCardinalityContent sort

---
 .../query-summary/summary-panel.tsx           | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/components/query-summary/summary-panel.tsx b/web/src/components/query-summary/summary-panel.tsx
index 453f2068d..2f0ee67cd 100644
--- a/web/src/components/query-summary/summary-panel.tsx
+++ b/web/src/components/query-summary/summary-panel.tsx
@@ -16,14 +16,15 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { compareNumbers, compareStrings } from '../../utils/base-compare';
+import { compareStrings } from '../../utils/base-compare';
 import { Record } from '../../api/ipfix';
 import { TimeRange } from '../../utils/datetime';
 import { QuerySummaryContent } from './query-summary';
 import './summary-panel.css';
 import _ from 'lodash';
-import { formatPort } from '../../utils/port';
+import { comparePorts, formatPort } from '../../utils/port';
 import { formatProtocol } from '../../utils/protocol';
+import { compareIPs } from '../../utils/ip';
 
 type TypeCardinality = {
   type: string;
@@ -91,10 +92,11 @@ export const SummaryPanelContent: React.FC<{
     );
   };
 
-  const listCardinalityContent = (values: string[] | number[]) => {
-    const sortedStrings = values.sort((a: string | number, b: string | number) =>
-      typeof a === 'string' ? compareStrings(a as string, b as string) : compareNumbers(a as number, b as number)
-    ) as string[];
+  const listCardinalityContent = (
+    values: (string | number)[],
+    compareFn: (a: string | number, b: string | number) => number
+  ) => {
+    const sortedStrings = values.sort((a: string | number, b: string | number) => compareFn(a, b)) as string[];
     return (
       <>
         {sortedStrings.map((v: string) => (
@@ -179,7 +181,7 @@ export const SummaryPanelContent: React.FC<{
           {accordionItem(
             'addresses',
             t('{{count}} Address(es)', { count: addresses.length }),
-            listCardinalityContent(addresses)
+            listCardinalityContent(addresses, compareIPs)
           )}
           {typesCardinality.map(tc =>
             accordionItem(
@@ -191,12 +193,18 @@ export const SummaryPanelContent: React.FC<{
           {accordionItem(
             'ports',
             t('{{count}} Port(s)', { count: ports.length }),
-            listCardinalityContent(ports.map(p => formatPort(p)))
+            listCardinalityContent(
+              ports.map(p => formatPort(p)),
+              comparePorts
+            )
           )}
           {accordionItem(
             'protocols',
             t('{{count}} Protocol(s)', { count: protocols.length }),
-            listCardinalityContent(protocols.map(p => formatProtocol(p)))
+            listCardinalityContent(
+              protocols.map(p => formatProtocol(p)),
+              compareStrings
+            )
           )}
         </Accordion>
       );