NETOBSERV-608 UI: Reorder columns in flow table (#236)

* columns drag & drop

* fix update columns on reorder

Author: jpinsonneau

web/src/components/netflow-table/__tests__/netflow-table-header.spec.tsx

@@ -10,14 +10,16 @@ const NetflowTableHeaderWrapper: React.FC<{
   sortId: ColumnsId;
   sortDirection: SortByDirection;
   columns: Column[];
-}> = ({ onSort, sortId, sortDirection, columns }) => {
+  setColumns: (v: Column[]) => void;
+}> = ({ onSort, sortId, sortDirection, columns, setColumns }) => {
   return (
     <TableComposable aria-label="Misc table" variant="compact">
       <NetflowTableHeader
         onSort={onSort}
         sortDirection={sortDirection}
         sortId={sortId}
         columns={columns}
+        setColumns={setColumns}
         tableWidth={100}
       />
       <Tbody></Tbody>
@@ -30,7 +32,8 @@ describe('<NetflowTableHeader />', () => {
     onSort: jest.fn(),
     sortId: ColumnsId.endtime,
     sortDirection: SortByDirection.asc,
-    tableWidth: 100
+    tableWidth: 100,
+    setColumns: jest.fn()
   };
   it('should render component', async () => {
     const wrapper = mount(<NetflowTableHeaderWrapper {...mocks} columns={AllSelectedColumns} />);

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

@@ -21,7 +21,8 @@ describe('<NetflowTable />', () => {
   const mocks = {
     size: 'm' as Size,
     onSelect: jest.fn(),
-    filterActionLinks: <></>
+    filterActionLinks: <></>,
+    setColumns: jest.fn()
   };
 
   it('should render component', async () => {

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

@@ -0,0 +1,17 @@
+th.netobserv-header {
+  cursor: pointer;
+}
+
+th.netobserv-header.dragged:not(.dark) {
+  opacity: 0.25;
+  background: #fff;
+}
+
+th.netobserv-header.dragged.dark {
+  opacity: 0.25;
+  background: #1b1d21;
+}
+
+th.netobserv-header.dropzone:not(.dragged) {
+  box-shadow: inset 5px 0px 0px 0px #0066CC;
+}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SortByDirection, Th, Thead, Tr } from '@patternfly/react-table';
 import _ from 'lodash';
 import { Column, ColumnGroup, ColumnsId, getColumnGroups, getFullColumnName } from '../../utils/columns';
+import './netflow-table-header.css';
 
 export type HeadersState = {
   nestedHeaders: ColumnGroup[];
@@ -14,28 +15,93 @@ export const NetflowTableHeader: React.FC<{
   sortId: ColumnsId;
   sortDirection: SortByDirection;
   columns: Column[];
+  setColumns: (v: Column[]) => void;
   tableWidth: number;
-}> = ({ onSort, sortId, sortDirection, columns, tableWidth }) => {
+  isDark?: boolean;
+}> = ({ onSort, sortId, sortDirection, columns, setColumns, tableWidth, isDark }) => {
+  const draggedElement = React.useRef<HTMLElement>();
+
   const [headersState, setHeadersState] = React.useState<HeadersState>({
     nestedHeaders: [],
     useNested: false,
     headers: []
   });
 
+  const onDragStart = React.useCallback((e: React.DragEvent<HTMLElement>) => {
+    const target = e.currentTarget;
+    target.classList.add('dragged');
+    draggedElement.current = target;
+  }, []);
+
+  const clearDragEffects = () => {
+    document.querySelectorAll('.netobserv-header').forEach(e => {
+      if (e.classList.contains('dragged')) {
+        e.classList.remove('dragged');
+      }
+
+      if (e.classList.contains('dropzone')) {
+        e.classList.remove('dropzone');
+      }
+    });
+  };
+
+  const onDrop = React.useCallback(
+    (e: React.DragEvent<HTMLElement>) => {
+      if (!e.currentTarget || !draggedElement.current) {
+        console.error('onDrop called while currentTarget or draggedElement ref missing');
+        return;
+      }
+
+      if (
+        (e.currentTarget.classList.contains('nested') && draggedElement.current.classList.contains('nested')) ||
+        (e.currentTarget.classList.contains('column') && draggedElement.current.classList.contains('column'))
+      ) {
+        const srcIndex = Number(draggedElement.current.getAttribute('data-index'));
+        const srcColSpan = Number(draggedElement.current!.getAttribute('colSpan'));
+        const dstIndex = Number(e.currentTarget.getAttribute('data-index'));
+
+        const result = [...columns];
+        const removed = result.splice(srcIndex, srcColSpan);
+        result.splice(dstIndex, 0, ...removed);
+        setColumns(result);
+      }
+
+      e.preventDefault();
+    },
+    [columns, setColumns]
+  );
+
   const getNestedTableHeader = React.useCallback(
     (nh: ColumnGroup) => {
       return (
         <Th
+          className={`netobserv-header nested ${isDark ? 'dark' : ''}`}
           data-test={`nested-th-${nh.title || 'empty'}`}
+          data-index={columns.indexOf(nh.columns[0])}
           key={`nested-${nh.title}-${headersState.nestedHeaders.indexOf(nh)}`}
+          id={`nested-${headersState.nestedHeaders.indexOf(nh)}`}
           hasRightBorder={_.last(headersState.nestedHeaders) !== nh}
           colSpan={nh.columns.length}
+          draggable
+          onDragStart={onDragStart}
+          onDragOver={e => {
+            if (draggedElement.current?.classList.contains('nested')) {
+              e.currentTarget.classList.add('dropzone');
+            }
+            e.preventDefault();
+          }}
+          onDragLeave={e => {
+            e.currentTarget.classList.remove('dropzone');
+            e.preventDefault();
+          }}
+          onDrop={onDrop}
+          onDragEnd={clearDragEffects}
         >
           {nh.title}
         </Th>
       );
     },
-    [headersState.nestedHeaders]
+    [columns, headersState.nestedHeaders, isDark, onDragStart, onDrop]
   );
 
   const getTableHeader = React.useCallback(
@@ -44,9 +110,12 @@ export const NetflowTableHeader: React.FC<{
         headersState.useNested && headersState.nestedHeaders.find(nh => _.last(nh.columns) === c) !== undefined;
       return (
         <Th
+          className={`netobserv-header column ${isDark ? 'dark' : ''}`}
           data-test={`th-${c.id}`}
+          data-index={columns.indexOf(c)}
           hasRightBorder={showBorder}
           key={c.id}
+          id={c.id}
           sort={{
             sortBy: {
               index: columns.findIndex(c => c.id === sortId),
@@ -55,6 +124,21 @@ export const NetflowTableHeader: React.FC<{
             onSort: (event, index, direction) => onSort(c.id, direction),
             columnIndex: columns.indexOf(c)
           }}
+          colSpan={1}
+          draggable
+          onDragStart={onDragStart}
+          onDragOver={e => {
+            if (draggedElement.current?.classList.contains('column')) {
+              e.currentTarget.classList.add('dropzone');
+            }
+            e.preventDefault();
+          }}
+          onDragLeave={e => {
+            e.currentTarget.classList.remove('dropzone');
+            e.preventDefault();
+          }}
+          onDrop={onDrop}
+          onDragEnd={clearDragEffects}
           modifier="wrap"
           style={{ width: `${Math.floor((100 * c.width) / tableWidth)}%` }}
           info={c.tooltip ? { tooltip: c.tooltip } : undefined}
@@ -63,7 +147,18 @@ export const NetflowTableHeader: React.FC<{
         </Th>
       );
     },
-    [columns, headersState.nestedHeaders, headersState.useNested, onSort, sortDirection, sortId, tableWidth]
+    [
+      columns,
+      headersState.nestedHeaders,
+      headersState.useNested,
+      isDark,
+      onDragStart,
+      onDrop,
+      onSort,
+      sortDirection,
+      sortId,
+      tableWidth
+    ]
   );
 
   React.useEffect(() => {

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

@@ -31,13 +31,14 @@ const NetflowTable: React.FC<{
   flows: Record[];
   selectedRecord?: Record;
   columns: Column[];
+  setColumns: (v: Column[]) => void;
   size: Size;
   onSelect: (record?: Record) => void;
   loading?: boolean;
   error?: string;
   filterActionLinks: JSX.Element;
   isDark?: boolean;
-}> = ({ flows, selectedRecord, columns, error, loading, size, onSelect, filterActionLinks, isDark }) => {
+}> = ({ flows, selectedRecord, columns, setColumns, error, loading, size, onSelect, filterActionLinks, isDark }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   //default to 300 to allow content to be rendered in tests
@@ -252,7 +253,9 @@ const NetflowTable: React.FC<{
           sortDirection={activeSortDirection}
           sortId={activeSortId}
           columns={columns}
+          setColumns={setColumns}
           tableWidth={width}
+          isDark={isDark}
         />
         <Tbody id="table-body" data-test="table-body">
           {getBody()}

web/src/components/netflow-traffic.tsx

@@ -828,6 +828,7 @@ export const NetflowTraffic: React.FC<{
             size={size}
             onSelect={onRecordSelect}
             columns={columns.filter(col => col.isSelected)}
+            setColumns={(v: Column[]) => setColumns(v.concat(columns.filter(col => !col.isSelected)))}
             filterActionLinks={filterLinks()}
             isDark={isDarkTheme}
           />