Merge pull request openclarity#66 from eti/MAN-8851_UI_Implement_colu…

…mn_selection_in_event_table MAN-8851_UI_Implement_column_selection_in_event_table
danielvladco · Apr 11, 2022 · 286e4e3 · 286e4e3
2 parents 91609a8 + 1a0c0c7
commit 286e4e3
Show file tree

Hide file tree

Showing 10 changed files with 359 additions and 186 deletions.
diff --git a/ui/src/components/Checkbox/checkbox.scss b/ui/src/components/Checkbox/checkbox.scss
@@ -9,7 +9,7 @@ $checkbox-size: 20px;
         display: inline-flex;
         align-items: center;
         cursor: pointer;
-    
+
         .checkmark {
             position: relative;
             height: $checkbox-size;
@@ -20,7 +20,7 @@ $checkbox-size: 20px;
             background-color: white;
             border: 1px solid $color-grey-light;
             margin-right: 10px;
-    
+
             &:after {
                 content: "";
                 position: absolute;
@@ -43,17 +43,31 @@ $checkbox-size: 20px;
                 transform: rotate(0deg);
             }
         }
+        &.disabled {
+            cursor: not-allowed;
+            color: $color-grey;
+
+            input {
+                cursor: not-allowed;
+
+                &:checked ~ .checkmark {
+                    &:after {
+                        border-color: $color-grey;
+                    }
+                }
+            }
+        }
         input {
             opacity: 0;
             position: absolute;
             top: 0;
-    
+
             &:checked ~ .checkmark {
                 &:after {
                     display: block;
                 }
             }
-            
+
         }
     }
-}
+}
diff --git a/ui/src/components/Checkbox/index.js b/ui/src/components/Checkbox/index.js
@@ -3,14 +3,14 @@ import classnames from 'classnames';
 
 import './checkbox.scss';
 
-const Checkbox = ({checked, name, title, onChange, className, halfSelected}) => (
+const Checkbox = ({checked, name, title, onChange, className, halfSelected, disabled}) => (
     <div className="ag-checkbox-wrapper">
-        <label className={classnames("ag-checkbox", className)}>
-            <input type="checkbox" value={checked} name={name} checked={checked} onChange={onChange} />
+        <label className={classnames("ag-checkbox", className, {disabled})}>
+            <input type="checkbox" value={checked} name={name} checked={checked} onChange={(event) => disabled ? null : onChange(event)} />
             <span className={classnames("checkmark", {"half-selected": halfSelected})}></span>
             <div className="ag-checkbox-title">{title}</div>
         </label>
     </div>
 );
 
-export default Checkbox;
+export default Checkbox;
diff --git a/ui/src/components/Icon/IconTemplates.js b/ui/src/components/Icon/IconTemplates.js
diff --git a/ui/src/components/Icon/utils.js b/ui/src/components/Icon/utils.js
@@ -1,4 +1,5 @@
 export const ICON_NAMES = {
+    COLUMNS: "columns",
     DASHBOARD: "dashboard",
     INVENTORY: "inventory",
     EVENTS: "events",
@@ -23,4 +24,4 @@ export const ICON_NAMES = {
     ZOMBIE: "zombie",
     SHADOW: "shadow",
     BEETLE_ROUND: "beetle-round"
-}
+}
diff --git a/ui/src/components/Table/ColumnsSelectPanel/columns-select-panel.scss b/ui/src/components/Table/ColumnsSelectPanel/columns-select-panel.scss
@@ -0,0 +1,28 @@
+@import 'utils/scss_variables.module.scss';
+
+.columns-select-panel-container {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 230px;
+    padding: 15px;
+    background-color: $color-white;
+    border: 1px solid $color-grey-lighter;
+    overflow-y: scroll;
+    z-index: 3;
+
+    .header-columns-wrapper {
+        .header-column-title {
+            text-transform: uppercase;
+            color: $color-main;
+            margin-bottom: 10px;
+            font-weight: bold;
+            font-size: 9px;
+        }
+        .header-columns {
+            margin-left: 30px;
+            margin-bottom: 20px;
+        }
+    }
+}
diff --git a/ui/src/components/Table/ColumnsSelectPanel/index.js b/ui/src/components/Table/ColumnsSelectPanel/index.js
@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { isEmpty } from 'lodash';
+import Checkbox from 'components/Checkbox';
+
+import './columns-select-panel.scss';
+
+const ColumnsList = ({columns}) => (
+    <React.Fragment>
+        {
+            columns.map(column => {
+                const {checked, onChange} = column.getToggleHiddenProps();
+                const {id, alwaysShow} = column;
+
+                return (
+                    <Checkbox
+                        key={id}
+                        name={id}
+                        checked={checked}
+                        value={id}
+                        title={column.render('Header')}
+                        onChange={onChange}
+                        disabled={alwaysShow}
+                        small
+                    />
+                );
+            })
+        }
+    </React.Fragment>
+);
+
+const ColumnsListWithHeaders = ({headerColumnNames, columns}) => (
+    <React.Fragment>
+        {
+            headerColumnNames.map(headerName => (
+                <div key={headerName} className="header-columns-wrapper">
+                    <div className="header-column-title">{headerName}</div>
+                    <div className="header-columns">
+                        <ColumnsList columns={columns.filter(column => column.parent.Header === headerName)} />
+                    </div>
+                </div>
+            ))
+        }
+    </React.Fragment>
+);
+
+const ColumnsSelectPanel = ({columns, headerColumnNames, onClose, columnsIconClassName}) => {
+    const columnsPanelRef = useRef();
+
+    const handleClick = useCallback(({target}) => {
+        if (target.parentElement.classList.contains(columnsIconClassName)) {
+            //clicked the columns icon
+            return;
+        }
+
+        if (columnsPanelRef.current.contains(target)) {
+            //clicked inside the panel
+            return;
+        }
+
+        onClose();
+    }, [onClose, columnsIconClassName]);
+
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClick);
+
+        return () => {
+            document.removeEventListener("mousedown", handleClick);
+        };
+      }, [handleClick]);
+
+    return (
+        <div className="columns-select-panel-container" ref={columnsPanelRef}>
+            {
+                isEmpty(headerColumnNames) ? <ColumnsList columns={columns} /> :
+                    <ColumnsListWithHeaders columns={columns} headerColumnNames={headerColumnNames} />
+            }
+        </div>
+    );
+};
+
+export default ColumnsSelectPanel;
diff --git a/ui/src/components/Table/index.js b/ui/src/components/Table/index.js
@@ -1,13 +1,15 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { isEmpty, isEqual, pickBy, isNull } from 'lodash';
 import { useTable, usePagination, useSortBy, useResizeColumns, useFlexLayout, useRowSelect } from 'react-table';
 import Icon, { ICON_NAMES } from 'components/Icon';
+import IconWithTitle from 'components/IconWithTitle';
 import Loader from 'components/Loader';
 import Checkbox from 'components/Checkbox';
 import NoResultsDisplay from 'components/NoResultsDisplay';
 import { useFetch, usePrevious } from 'hooks';
 import Pagination from './Pagination';
+import ColumnsSelectPanel from './ColumnsSelectPanel';
 import * as utils from './utils';
 
 import './table.scss';
@@ -26,17 +28,21 @@ const RowSelectCheckbox = React.memo(
     (prevProps, nextProps) => {
         const {checked: prevChecked, indeterminate: prevIndeterminate} = prevProps;
         const {checked, indeterminate} = nextProps;
-        
+
         const shouldRefresh = checked !== prevChecked || indeterminate !== prevIndeterminate;
-        
+
         return !shouldRefresh;
     }
 );
 
+const ColumnPanelSelect = ({toggleColumns}) => {
+    return <IconWithTitle className="table-columns-class" name={ICON_NAMES.COLUMNS} title="Columns" onClick={toggleColumns} />;
+};
+
 const Table = props => {
     const {columns, defaultSortBy: defaultSortByItems, onLineClick, paginationItemsName, url, formatFetchedData, filters,
-        noResultsTitle="API", refreshTimestamp, withPagination=true, data: externalData, withMultiSelect=false, onRowSelect,
-        markedRowIds=[]} = props;
+        hideColumnControl=true, noResultsTitle="API", refreshTimestamp, withPagination=true, data: externalData, withMultiSelect=false, onRowSelect,
+           markedRowIds=[]} = props;
 
     const defaultSortBy = useMemo(() => defaultSortByItems || [], [defaultSortByItems]);
     const defaultColumn = React.useMemo(() => ({
@@ -55,11 +61,12 @@ const Table = props => {
         headerGroups,
         prepareRow,
         page,
+        allColumns,
         canPreviousPage,
         nextPage,
         previousPage,
         gotoPage,
-        toggleSortBy, 
+        toggleSortBy,
         state: {
             pageIndex,
             pageSize,
@@ -183,12 +190,31 @@ const Table = props => {
         }
     }, [prevSelectedRows, selectedRows, onRowSelect]);
 
+    const [showColumnsPanel, setShowColumnsPanel] = useState(false);
+
     if (!!error) {
         return null;
     }
+    const headerColumnNames = (headerGroups.length > 1 ? headerGroups[0].headers.map(header => {
+        // if (STATIC_HEADER_IDS.includes(header.originalId)) {
+        //     return null;
+        // }
+
+        return header.Header;
+    }) : []).filter(item => !isNull(item));
 
     return (
         <div className="table-wrapper">
+            {!hideColumnControl &&
+             <ColumnPanelSelect toggleColumns={() => setShowColumnsPanel(!showColumnsPanel)}/> }
+            {showColumnsPanel &&
+                <ColumnsSelectPanel
+                    headerColumnNames={headerColumnNames}
+                    columns={allColumns}
+                    onClose={() => setShowColumnsPanel(false)}
+                    columnsIconClassName={"table-columns-class"}
+                />
+                }
             {!withPagination ? <div className="no-pagination-results-total">{`Showing ${total} entries`}</div> :
                 <Pagination
                     canPreviousPage={canPreviousPage}

diff --git a/ui/src/layout/Events/EventsTable.js b/ui/src/layout/Events/EventsTable.js
@@ -14,7 +14,8 @@ const EventsTable = ({filters, refreshTimestamp}) => {
             Header: 'Time',
             id: "time",
             accessor: original => formatDate(original.time),
-            width: 70
+            width: 70,
+            alwaysShow: true
         },
         {
             Header: 'Method',
@@ -27,12 +28,15 @@ const EventsTable = ({filters, refreshTimestamp}) => {
                 )
             },
             canSort: true,
-            width: 40
+            width: 40,
+            alwaysShow: true
         },
         {
             Header: 'Path',
             id: "path",
-            accessor: "path"
+            accessor: "path",
+
+            alwaysShow: true
         },
         {
             Header: 'Status Code',
@@ -45,7 +49,8 @@ const EventsTable = ({filters, refreshTimestamp}) => {
                 )
             },
             canSort: true,
-            width: 40
+            width: 40,
+            alwaysShow: true
         },
         {
             Header: 'Source',
@@ -122,6 +127,7 @@ const EventsTable = ({filters, refreshTimestamp}) => {
 
     return (
         <Table
+            hideColumnControl={false}
             columns={columns}
             paginationItemsName="APIs"
             url="apiEvents"

diff --git a/ui/src/layout/Events/events.scss b/ui/src/layout/Events/events.scss
@@ -7,7 +7,7 @@
         .time-filter-wrapper {
             position: absolute;
             top: 0;
-            right: 0;
+            right: 90px;
         }
         .general-filter-wrapper {
             .filter-form-wrapper {
@@ -33,6 +33,7 @@
     }
     .page-container {
         position: relative;
+        // min-height: 500px;
 
         .table-wrapper {
             .pagination-container {
@@ -45,6 +46,11 @@
                 height: 14px;
                 color: $color-warning;
             }
+            .table-columns-class {
+                position: absolute;
+                top: -47px;
+                right: 0px;
+            }
         }
         .events-chart-wrapper {
             width: 100%;

diff --git a/ui/src/utils/scss_variables.module.scss b/ui/src/utils/scss_variables.module.scss
@@ -7,6 +7,9 @@ $color-main: #27446E;
 $color-main-dark: #13274A;
 $color-main-light: #40B5F5;
 
+// White
+$color-white: white;
+
 // // Greys
 $color-grey: #AEB5BC;
 $color-grey-off-white: #F9FCFE;