-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add table filter side panel for regular tables. Closes #670.
- Loading branch information
1 parent
418f39d
commit fb6970a
Showing
7 changed files
with
110 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 14 additions & 2 deletions
16
ui/dashboard/src/components/dashboards/grouping/CustomizeViewSummary/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,26 @@ | ||
| import useFilterConfig from "@powerpipe/hooks/useFilterConfig"; | ||
| import { validateFilter } from "@powerpipe/components/dashboards/grouping/FilterEditor"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| const CustomizeViewSummary = ({ panelName }) => { | ||
| const CustomizeViewSummary = ({ | ||
| panelName, | ||
| title = "Filter & Group", | ||
| }: { | ||
| panelName: string; | ||
| title: ReactNode; | ||
| }) => { | ||
| const { filter: filterConfig } = useFilterConfig(panelName); | ||
|
|
||
| const filterCount = filterConfig?.expressions?.length | ||
| ? filterConfig.expressions.filter(validateFilter).length | ||
| : 0; | ||
|
|
||
| return <span>Filter & Group{!!filterCount ? ": On" : null}</span>; | ||
| return ( | ||
| <span> | ||
| {title} | ||
| {!!filterCount ? ": On" : null} | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomizeViewSummary; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
ui/dashboard/src/components/dashboards/layout/DashboardSidePanel/TableFilterSidePanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import FilterConfig from "@powerpipe/components/dashboards/grouping/FilterConfig"; | ||
| import Icon from "@powerpipe/components/Icon"; | ||
| import { useDashboardControls } from "@powerpipe/components/dashboards/layout/Dashboard/DashboardControlsProvider"; | ||
| import { useDashboardPanelDetail } from "@powerpipe/hooks/useDashboardPanelDetail"; | ||
| import { useDashboardState } from "@powerpipe/hooks/useDashboardState"; | ||
| import { useEffect } from "react"; | ||
|
|
||
| const TableFilterSidePanel = ({ panelName }: { panelName: string }) => { | ||
| const { panelsMap } = useDashboardState(); | ||
| const { closeSidePanel } = useDashboardPanelDetail(); | ||
| const { setContext } = useDashboardControls(); | ||
| const panel = panelsMap[panelName]; | ||
|
|
||
| useEffect(() => { | ||
| if (!panel.data) { | ||
| return; | ||
| } | ||
| const filterValues = { dimension: { key: {}, value: {} } }; | ||
| for (const column of panel.data?.columns || []) { | ||
| for (const row of panel.data?.rows || []) { | ||
| if (!filterValues.dimension.key[column.name]) { | ||
| filterValues.dimension.key[column.name] = {}; | ||
| } | ||
| const rowValue = row[column.name]; | ||
| if (!filterValues.dimension.key[column.name][rowValue]) { | ||
| filterValues.dimension.key[column.name][rowValue] = 1; | ||
| } else { | ||
| filterValues.dimension.key[column.name][rowValue] += 1; | ||
| } | ||
|
|
||
| if (!filterValues.dimension.value[rowValue]) { | ||
| filterValues.dimension.value[rowValue] = {}; | ||
| } | ||
| if (!filterValues.dimension.value[rowValue][column.name]) { | ||
| filterValues.dimension.value[rowValue][column.name] = 1; | ||
| } else { | ||
| filterValues.dimension.value[rowValue][column.name] += 1; | ||
| } | ||
| } | ||
| } | ||
| setContext(() => filterValues); | ||
| }, [panel.data]); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex items-center justify-between p-4 min-w-[520px] max-w-[1000px]"> | ||
| <h3>Filter</h3> | ||
| <Icon | ||
| className="w-5 h-5 text-foreground cursor-pointer hover:text-foreground-light shrink-0" | ||
| icon="close" | ||
| onClick={closeSidePanel} | ||
| title="Close" | ||
| /> | ||
| </div> | ||
| <div className="w-full max-h-full border-t border-divide overflow-y-scroll"> | ||
| <div className="p-4 space-y-3"> | ||
| <FilterConfig panelName={panelName} /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default TableFilterSidePanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters