Graph Filter support

src/components/tables/CippDatatable.js

@@ -6,18 +6,20 @@ import { CippTablePropTypes } from 'src/components/tables/CippTable'
 
 export default function CippDatatable({ path, params, ...rest }) {
   const [refreshGuid, setRefreshGuid] = React.useState('')
+  const [graphFilter, setGraphFilter] = React.useState('')
   const {
     data = [],
     isFetching,
     error,
-  } = useListDatatableQuery({ path, params: { refreshGuid, ...params } })
+  } = useListDatatableQuery({ path, params: { refreshGuid, graphFilter, ...params } })
   return (
     <CippTable
       {...rest}
       data={data}
       isFetching={isFetching}
       error={error}
       refreshFunction={setRefreshGuid}
+      graphFilterFunction={setGraphFilter}
     />
   )
 }

src/components/tables/CippTable.js

@@ -25,7 +25,14 @@ import { ModalService } from '../utilities'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
 import { ConfirmModal } from '../utilities/SharedModal'
 
-const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
+const FilterComponent = ({
+  filterText,
+  onFilter,
+  onClear,
+  filterlist,
+  onFilterPreset,
+  onFilterGraph,
+}) => (
   <>
     <CInputGroup>
       <CDropdown variant="input-group">
@@ -38,14 +45,29 @@ const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPr
           <FontAwesomeIcon icon={faSearch} color="#3e5c66" />
         </CDropdownToggle>
         <CDropdownMenu>
-          <CDropdownItem onClick={() => onFilterPreset('')}>Clear Filter</CDropdownItem>
+          <CDropdownItem
+            onClick={() => {
+              onFilterPreset('')
+              onFilterGraph('')
+            }}
+          >
+            Clear Filter
+          </CDropdownItem>
           {filterlist &&
             filterlist.map((item, idx) => {
-              return (
-                <CDropdownItem key={idx} onClick={() => onFilterPreset(item.filter)}>
-                  {item.filterName}
-                </CDropdownItem>
-              )
+              if (item.hasOwnProperty('graphFilter') && item.graphFilter == true) {
+                return (
+                  <CDropdownItem key={idx} onClick={() => onFilterGraph(item.filter)}>
+                    {item.filterName}
+                  </CDropdownItem>
+                )
+              } else {
+                return (
+                  <CDropdownItem key={idx} onClick={() => onFilterPreset(item.filter)}>
+                    {item.filterName}
+                  </CDropdownItem>
+                )
+              }
             })}
         </CDropdownMenu>
       </CDropdown>
@@ -69,6 +91,7 @@ FilterComponent.propTypes = {
   onClear: PropTypes.func,
   filterlist: PropTypes.arrayOf(PropTypes.object),
   onFilterPreset: PropTypes.func,
+  onFilterGraph: PropTypes.func,
 }
 
 const customSort = (rows, selector, direction) => {
@@ -99,6 +122,7 @@ export default function CippTable({
   error,
   reportName,
   refreshFunction = null,
+  graphFilterFunction = null,
   columns = [],
   dynamicColumns = true,
   filterlist,
@@ -142,6 +166,16 @@ export default function CippTable({
   const filteredItems = data.filter(
     (item) => JSON.stringify(item).toLowerCase().indexOf(filterText.toLowerCase()) !== -1,
   )
+  const applyFilter = (e) => {
+    setFilterText(e.target.value)
+  }
+
+  const setGraphFilter = (e) => {
+    if (graphFilterFunction) {
+      graphFilterFunction(e)
+    }
+  }
+
   useEffect(() => {
     if (columns !== updatedColumns) {
       setUpdatedColumns(columns)
@@ -400,7 +434,14 @@ export default function CippTable({
         <div className="w-100 d-flex justify-content-start">
           <FilterComponent
             onFilter={(e) => setFilterText(e.target.value)}
-            onFilterPreset={(e) => setFilterText(e)}
+            onFilterPreset={(e) => {
+              setFilterText(e)
+              setGraphFilter('')
+            }}
+            onFilterGraph={(e) => {
+              setFilterText('')
+              setGraphFilter(e)
+            }}
             onClear={handleClear}
             filterText={filterText}
             filterlist={filterlist}

src/views/identity/administration/Users.js

@@ -313,6 +313,11 @@ const Users = (row) => {
           { filterName: 'Guest users', filter: '"usertype":"guest"' },
           { filterName: 'Users with a license', filter: '"assignedLicenses":[{' },
           { filterName: 'Users without a license', filter: '"assignedLicenses":[]' },
+          {
+            filterName: 'Users with a license (Graph)',
+            filter: 'assignedLicenses/$count ne 0',
+            graphFilter: true,
+          },
         ],
         columns,
         path: '/api/ListUsers',