Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

feat(ingress): ingresses datatable with add/edit ingresses EE-2615 (#7672)

Browse source
This commit is contained in:
Prabhat Khera 2022-09-21 16:49:42 +12:00 • committed by GitHub
parent 393d1fc91d
commit ef1d648c07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 4938 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/react/components/datatables/Datatable.tsx
View file

@ -141,7 +141,11 @@ export function Datatable<
<TableSettingsProvider settings={settingsStore}>
<Table.Container>
{isTitleVisible(titleOptions) && (
<Table.Title label={titleOptions.title} icon={titleOptions.icon}>
<Table.Title
label={titleOptions.title}
icon={titleOptions.icon}
featherIcon={titleOptions.featherIcon}
>
<SearchBar value={searchBarValue} onChange={setGlobalFilter} />
{renderTableActions && (
<Table.Actions>

55
app/react/components/datatables/Filter.tsx
View file

@ -3,42 +3,22 @@ import { useMemo } from 'react';
import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
import { ColumnInstance } from 'react-table';
export function DefaultFilter({
column: { filterValue, setFilter, preFilteredRows, id },
}: {
column: ColumnInstance;
}) {
const options = useMemo(() => {
const options = new Set<string>();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return Array.from(options);
}, [id, preFilteredRows]);
return (
<MultipleSelectionFilter
options={options}
filterKey={id}
value={filterValue}
onChange={setFilter}
/>
);
}
export const DefaultFilter = filterHOC('Filter by state');
interface MultipleSelectionFilterProps {
options: string[];
value: string[];
filterKey: string;
onChange: (value: string[]) => void;
menuTitle?: string;
}
function MultipleSelectionFilter({
export function MultipleSelectionFilter({
options,
value = [],
filterKey,
onChange,
menuTitle = 'Filter by state',
}: MultipleSelectionFilterProps) {
const enabled = value.length > 0;
return (
@ -59,7 +39,7 @@ function MultipleSelectionFilter({
</MenuButton>
<MenuPopover className="dropdown-menu">
<div className="tableMenu">
<div className="menuHeader">Filter by state</div>
<div className="menuHeader">{menuTitle}</div>
<div className="menuContent">
{options.map((option, index) => (
<div className="md-checkbox" key={index}>
@ -91,3 +71,28 @@ function MultipleSelectionFilter({
onChange([...value, option]);
}
}
export function filterHOC(menuTitle: string) {
return function Filter({
column: { filterValue, setFilter, preFilteredRows, id },
}: {
column: ColumnInstance;
}) {
const options = useMemo(() => {
const options = new Set<string>();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return Array.from(options);
}, [id, preFilteredRows]);
return (
<MultipleSelectionFilter
options={options}
filterKey={id}
value={filterValue}
onChange={setFilter}
menuTitle={menuTitle}
/>
);
};
}