Skip to content

Commit

Permalink
Implement PageEntityTable for ProfilesList.
Browse files Browse the repository at this point in the history
  • Loading branch information
@linuspahl
linuspahl committed May 22, 2024
1 parent 5e128cc commit 8a62b1a
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 107 deletions.
4 changes: 2 additions & 2 deletions ...ce/src/components/event-notifications/event-notifications/EventNotificationsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const EventNotificationsContainer = () => {
queryClient.invalidateQueries(keyFn());
}, [getNotificationTest, pathname, queryClient, sendTelemetry]);

const renderEventDefinitionActions = useCallback((listItem: EventNotification) => (
const renderEvenNotificationActions = useCallback((listItem: EventNotification) => (
<EventNotificationActions notification={listItem}
isTestLoading={isLoadingTest}
onTest={handleTest} />
Expand All @@ -82,7 +82,7 @@ const EventNotificationsContainer = () => {
<PageEntityTable<EventNotification> humanName="event notifications"
columnsOrder={COLUMNS_ORDER}
queryHelpComponent={<QueryHelper entityName="notification" />}
entityActions={renderEventDefinitionActions}
entityActions={renderEvenNotificationActions}
tableLayout={DEFAULT_LAYOUT}
fetchData={fetchEventNotifications}
keyFn={keyFn}
Expand Down
120 changes: 17 additions & 103 deletions graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,134 +14,48 @@
* along with this program. If not, see
* <http://www.mongodb.com/licensing/server-side-public-license>.
*/
import React, { useCallback, useMemo } from 'react';
import { useQueryParam, StringParam } from 'use-query-params';
import React, { useMemo } from 'react';
import keyBy from 'lodash/keyBy';
import mapValues from 'lodash/mapValues';

import {
NoEntitiesExist,
PaginatedList, SearchForm,
Spinner,
PageEntityTable,
} from 'components/common';
import EntityDataTable, { useTableEventHandlers } from 'components/common/EntityDataTable';
import useTableLayout from 'components/common/EntityDataTable/hooks/useTableLayout';
import type { Sort } from 'stores/PaginationTypes';
import useUpdateUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences';
import EntityFilters from 'components/common/EntityFilters';
import useUrlQueryFilters from 'components/common/EntityFilters/hooks/useUrlQueryFilters';
import type { UrlQueryFilters } from 'components/common/EntityFilters/types';
import usePaginationQueryParameter from 'hooks/usePaginationQueryParameter';
import type {
IndexSetFieldTypeProfile,
} from 'components/indices/IndexSetFieldTypeProfiles/types';
import useProfiles
from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
import { fetchIndexSetFieldTypeProfiles, keyFn } from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
import useExpandedSectionsRenderer from 'components/indices/IndexSetFieldTypeProfiles/ExpandedSectionsRenderer';
import useCustomColumnRenderers from 'components/indices/IndexSetFieldTypeProfiles/helpers/useCustomColumnRenderers';
import profileActions from 'components/indices/IndexSetFieldTypeProfiles/helpers/profileActions';
import { useStore } from 'stores/connect';
import { IndexSetsStore } from 'stores/indices/IndexSetsStore';

export const ENTITY_TABLE_ID = 'index-set-field-type-profiles';
export const DEFAULT_LAYOUT = {
pageSize: 20,
sort: { attributeId: 'name', direction: 'asc' } as Sort,
displayedColumns: ['name', 'description', 'custom_field_mappings', 'index_set_ids'],
columnsOrder: ['name', 'description', 'custom_field_mappings', 'index_set_ids'],
entityTableId: 'index-set-field-type-profiles',
defaultPageSize: 20,
defaultSort: { attributeId: 'name', direction: 'asc' } as Sort,
defaultDisplayedAttributes: ['name', 'description', 'custom_field_mappings', 'index_set_ids'],
};

const COLUMNS_ORDER = ['name', 'description', 'custom_field_mappings', 'index_set_ids'];

const ProfilesList = () => {
const [urlQueryFilters, setUrlQueryFilters] = useUrlQueryFilters();
const { indexSets } = useStore(IndexSetsStore);
const [query, setQuery] = useQueryParam('query', StringParam);
const { layoutConfig, isInitialLoading: isLoadingLayoutPreferences } = useTableLayout({
entityTableId: ENTITY_TABLE_ID,
defaultPageSize: DEFAULT_LAYOUT.pageSize,
defaultDisplayedAttributes: DEFAULT_LAYOUT.displayedColumns,
defaultSort: DEFAULT_LAYOUT.sort,
});
const paginationQueryParameter = usePaginationQueryParameter(undefined, layoutConfig.pageSize, false);
const searchParams = useMemo(() => ({
query,
page: paginationQueryParameter.page,
pageSize: layoutConfig.pageSize,
sort: layoutConfig.sort,
filters: urlQueryFilters,
}), [paginationQueryParameter.page, layoutConfig.pageSize, layoutConfig.sort, query, urlQueryFilters]);
const { mutate: updateTableLayout } = useUpdateUserLayoutPreferences(ENTITY_TABLE_ID);

const {
onColumnsChange,
onPageSizeChange,
onSearch,
onSearchReset,
onSortChange,
} = useTableEventHandlers({
appSection: 'index-set-field-types-profile-list',
paginationQueryParameter,
setQuery,
updateTableLayout,
});

const {
isLoading,
data: { list, pagination, attributes },
} = useProfiles(
searchParams,
{ enabled: !isLoadingLayoutPreferences },
);

const onChangeFilters = useCallback((newUrlQueryFilters: UrlQueryFilters) => {
paginationQueryParameter.resetPage();
setUrlQueryFilters(newUrlQueryFilters);
}, [paginationQueryParameter, setUrlQueryFilters]);

const expandedSectionsRenderer = useExpandedSectionsRenderer();

const normalizedIndexSetsTitles = useMemo(() => mapValues(keyBy(indexSets, 'id'), 'title'), [indexSets]);

const customColumnRenderers = useCustomColumnRenderers(normalizedIndexSetsTitles);

if (isLoadingLayoutPreferences || isLoading) {
return <Spinner />;
}

return (
<PaginatedList totalItems={pagination?.total}
pageSize={layoutConfig.pageSize}
showPageSizeSelect={false}>
<div style={{ marginBottom: 5 }}>
<SearchForm onSearch={onSearch}
onReset={onSearchReset}
query={query}
placeholder="Search for profile name...">
<EntityFilters attributes={attributes}
urlQueryFilters={urlQueryFilters}
setUrlQueryFilters={onChangeFilters} />
</SearchForm>
</div>
{pagination?.total === 0 && (
<NoEntitiesExist>
No field type profiles have been found.
</NoEntitiesExist>
)}
{!!list?.length && (
<EntityDataTable<IndexSetFieldTypeProfile> data={list}
visibleColumns={layoutConfig.displayedAttributes}
columnsOrder={DEFAULT_LAYOUT.columnsOrder}
onColumnsChange={onColumnsChange}
onSortChange={onSortChange}
activeSort={layoutConfig.sort}
pageSize={searchParams.pageSize}
onPageSizeChange={onPageSizeChange}
actionsCellWidth={120}
columnRenderers={customColumnRenderers}
columnDefinitions={attributes}
expandedSectionsRenderer={expandedSectionsRenderer}
rowActions={profileActions} />
)}
</PaginatedList>
<PageEntityTable<IndexSetFieldTypeProfile> humanName="index set profiles"
columnsOrder={COLUMNS_ORDER}
entityActions={profileActions}
tableLayout={DEFAULT_LAYOUT}
fetchData={fetchIndexSetFieldTypeProfiles}
keyFn={keyFn}
expandedSectionsRenderer={expandedSectionsRenderer}
columnRenderers={customColumnRenderers} />
);
};

Expand Down
6 changes: 4 additions & 2 deletions graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ const INITIAL_DATA = {
attributes: [],
};

const fetchIndexSetFieldTypeProfiles = async (searchParams: SearchParams) => {
export const keyFn = (searchParams: SearchParams) => (['indexSetFieldTypeProfiles', searchParams]);

export const fetchIndexSetFieldTypeProfiles = async (searchParams: SearchParams) => {
const indexSetFieldTypeUrl = qualifyUrl('/system/indices/index_sets/profiles/paginated');
const url = PaginationURL(
indexSetFieldTypeUrl,
Expand Down Expand Up @@ -72,7 +74,7 @@ const useProfiles = (searchParams: SearchParams, { enabled }): {
refetch: () => void,
} => {
const { data, isLoading, refetch } = useQuery(
['indexSetFieldTypeProfiles', searchParams],
keyFn(searchParams),
() => fetchIndexSetFieldTypeProfiles(searchParams),
{
onError: (errorThrown) => {
Expand Down

0 comments on commit 8a62b1a

Please sign in to comment.