diff --git a/.changeset/new-kangaroos-train.md b/.changeset/new-kangaroos-train.md new file mode 100644 index 0000000000..2e7a14f127 --- /dev/null +++ b/.changeset/new-kangaroos-train.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-unprocessed-entities': patch +--- + +Added filtering and sorting to unprocessed entities tables. diff --git a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx index 7bc5d85f50..2ef52504d7 100644 --- a/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/FailedEntities.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, { useState } from 'react'; import { ErrorPanel, @@ -91,6 +91,7 @@ export const FailedEntities = () => { error, value: data, } = useAsync(async () => await unprocessedApi.failed()); + const [, setSelectedSearchTerm] = useState(''); if (loading) { return ; @@ -102,22 +103,33 @@ export const FailedEntities = () => { const columns: TableColumn[] = [ { title: entityRef, + sorting: true, + field: 'entity_ref', + customFilterAndSearch: (query, row: any) => + row.entity_ref + .toLocaleUpperCase('en-US') + .includes(query.toLocaleUpperCase('en-US')), render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).entity_ref, }, { title: Kind, + sorting: true, + field: 'kind', render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).unprocessed_entity.kind, }, { title: Owner, + sorting: true, + field: 'unprocessed_entity.spec.owner', render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).unprocessed_entity.spec?.owner || 'unknown', }, { title: Raw, + sorting: false, render: (rowData: UnprocessedEntity | {}) => ( ), @@ -134,6 +146,9 @@ export const FailedEntities = () => { No failed entities found } + onSearchChange={(searchTerm: string) => + setSelectedSearchTerm(searchTerm) + } detailPanel={({ rowData }) => { const errors = (rowData as UnprocessedEntity).errors; return ( diff --git a/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx b/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx index 956f660a8f..08e2f3da66 100644 --- a/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx +++ b/plugins/catalog-unprocessed-entities/src/components/PendingEntities.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, { useState } from 'react'; import { ErrorPanel, @@ -46,6 +46,7 @@ export const PendingEntities = () => { error, value: data, } = useAsync(async () => await unprocessedApi.pending()); + const [, setSelectedSearchTerm] = useState(''); if (loading) { return ; @@ -57,22 +58,33 @@ export const PendingEntities = () => { const columns: TableColumn[] = [ { title: entityRef, + sorting: true, + field: 'entity_ref', + customFilterAndSearch: (query, row: any) => + row.entity_ref + .toLocaleUpperCase('en-US') + .includes(query.toLocaleUpperCase('en-US')), render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).entity_ref, }, { title: Kind, + sorting: true, + field: 'kind', render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).unprocessed_entity.kind, }, { title: Owner, + sorting: true, + field: 'unprocessed_entity.spec.owner', render: (rowData: UnprocessedEntity | {}) => (rowData as UnprocessedEntity).unprocessed_entity.spec?.owner || 'unknown', }, { title: Raw, + sorting: false, render: (rowData: UnprocessedEntity | {}) => ( ), @@ -84,6 +96,9 @@ export const PendingEntities = () => { options={{ pageSize: 20 }} columns={columns} data={data?.entities || []} + onSearchChange={(searchTerm: string) => + setSelectedSearchTerm(searchTerm) + } emptyContent={ No pending entities found