Merge pull request #169 from jpinsonneau/317

NETOBSERV-317 Netflow table: reduce row height / do not compute in px

Author: jpinsonneau

web/src/components/netflow-record/__tests__/record-field.spec.tsx

@@ -18,8 +18,7 @@ describe('<RecordField />', () => {
     //datetime column will produce a single field
     const wrapper = shallow(<RecordField flow={FlowsSample[0]} column={DefaultColumns[0]} {...mocks} />);
     expect(wrapper.find(RecordField)).toBeTruthy();
-    expect(wrapper.find('.record-field-content')).toHaveLength(1);
-    expect(wrapper.find('.m')).toHaveLength(1);
+    expect(wrapper.find('.record-field-content.m')).toHaveLength(1);
   });
   it('should filter', async () => {
     const wrapper = shallow(

web/src/components/netflow-record/record-field.css

@@ -1,8 +1,12 @@
-/* fix ResourceLink inline not working */
-span.co-resource-item.co-resource-item--inline,
+/* force datetime to be singleline on small size*/
+.datetime.s {
+  white-space: nowrap
+}
+
 /* max content lines to show */
-.record-field-content-flex,
-.record-field-content {
+.co-resource-item.s>.co-resource-item__resource-name,
+.co-resource-item.m>.co-resource-item__resource-name,
+.co-resource-item.l>.co-resource-item__resource-name {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -11,9 +15,10 @@ span.co-resource-item.co-resource-item--inline,
 }
 
 .record-field-flex-container {
+  height: 100%;
   flex: 1;
   display: flex;
-  gap: 5px;
+  gap: .3rem;
 }
 
 .record-field-flex {
@@ -28,21 +33,15 @@ span.co-resource-item.co-resource-item--inline,
   flex-basis: 0;
 }
 
-span.co-resource-item.co-resource-item--inline.s,
-.record-field-content-flex.s,
-.record-field-content.s {
+.co-resource-item.s>.co-resource-item__resource-name {
   -webkit-line-clamp: 1;
 }
 
-span.co-resource-item.co-resource-item--inline.m,
-.record-field-content-flex.m,
-.record-field-content.m {
+.co-resource-item.m>.co-resource-item__resource-name {
   -webkit-line-clamp: 2;
 }
 
-span.co-resource-item.co-resource-item--inline.l,
-.record-field-content-flex.l,
-.record-field-content.l {
+.co-resource-item.l>.co-resource-item__resource-name {
   -webkit-line-clamp: 3;
 }
 
@@ -52,18 +51,6 @@ span.co-resource-item.co-resource-item--inline.l,
   flex-direction: column;
 }
 
-.record-field-flex-container.s {
-  height: 42px;
-}
-
-.record-field-flex-container.m {
-  height: 84px;
-}
-
-.record-field-flex-container.l {
-  height: 126px;
-}
-
 /* table tooltips - check pf-c-tooltip__content for values */
 .record-field-tooltip {
   display: flex;

web/src/components/netflow-record/record-field.tsx

@@ -110,7 +110,7 @@ export const RecordField: React.FC<{
     const timeText = date?.toLocaleTimeString() || emptyText();
     return singleContainer(
       <div>
-        <div className="datetime">
+        <div className={`datetime ${size}`}>
           <span>{dateText}</span> <span className="text-muted">{timeText}</span>
         </div>
         <div className="record-field-tooltip">{`${dateText} ${timeText}`}</div>

web/src/components/netflow-table/netflow-table.css

@@ -3,14 +3,6 @@ div#table-container {
   height: 100%;
 }
 
-tr.empty-row.s {
-  height: 59px;
-}
-
-tr.empty-row.m {
-  height: 101px;
-}
-
-tr.empty-row.l {
-  height: 143px;
+#table-container>.pf-c-table tbody>tr>* {
+  vertical-align: top;
 }

web/src/components/netflow-table/netflow-table.tsx

@@ -17,7 +17,7 @@ import * as _ from 'lodash';
 import { Record } from '../../api/ipfix';
 import { NetflowTableHeader } from './netflow-table-header';
 import NetflowTableRow from './netflow-table-row';
-import { Column, ColumnsId } from '../../utils/columns';
+import { Column, ColumnsId, getCommonColumns } from '../../utils/columns';
 import { Size } from '../dropdowns/display-dropdown';
 import { usePrevious } from '../../utils/previous-hook';
 import './netflow-table.css';
@@ -75,18 +75,26 @@ const NetflowTable: React.FC<{
   }, [columns]);
 
   //get row height from display size
-  //these values match netflow-table.css and record-field.css
   const getRowHeight = React.useCallback(() => {
+    const doubleSizeColumnIds = getCommonColumns(t).map(c => c.id);
+    const containsDoubleLine = columns.find(c => doubleSizeColumnIds.includes(c.id)) !== undefined;
+
+    function convertRemToPixels(rem: number) {
+      //get fontSize from document or fallback to 16 for jest
+      return rem * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+    }
+
     switch (size) {
       case 'l':
-        return 143;
+        return convertRemToPixels(containsDoubleLine ? 8 : 4.5);
       case 'm':
-        return 101;
+        return convertRemToPixels(containsDoubleLine ? 6 : 3.5);
       case 's':
       default:
-        return 59;
+        return convertRemToPixels(containsDoubleLine ? 4 : 2.5);
     }
-  }, [size]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, size]);
 
   //update table container height on window resize
   const handleResize = React.useCallback(() => {
@@ -160,7 +168,7 @@ const NetflowTable: React.FC<{
           tableWidth={width}
         />
       ) : (
-        <tr className={`empty-row ${size}`} key={f.key} />
+        <tr className={`empty-row`} style={{ height: rowHeight }} key={f.key} />
       )
     );
   }, [