diff --git a/.changeset/wicked-ladybugs-argue.md b/.changeset/wicked-ladybugs-argue.md
new file mode 100644
index 0000000000..d75f250689
--- /dev/null
+++ b/.changeset/wicked-ladybugs-argue.md
@@ -0,0 +1,43 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Added new `EntityAdvancedPicker` that will filter for entities with orphans and/or errors.
+
+If you are using the default Catalog page this picker will be added automatically. For those who have customized their Catalog page you'll need to add this manually by doing something like this:
+
+```diff
+...
+import {
+ CatalogFilterLayout,
+ EntityTypePicker,
+ UserListPicker,
+ EntityTagPicker
++ EntityAdvancedPicker,
+} from '@backstage/plugin-catalog-react';
+...
+export const CustomCatalogPage = ({
+ columns,
+ actions,
+ initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
+ return (
+ ...
+
+
+
+
+
+
+
++
+
+
+
+
+
+
+ ...
+};
+```
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 285ecafd70..7f3d7a5f3c 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -78,8 +78,12 @@ export type CatalogReactComponentsNameToClassKey = {
CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey;
CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
+ CatalogReactEntityAdvancedPicker: CatalogReactEntityAdvancedPickerClassKey;
};
+// @public (undocumented)
+export type CatalogReactEntityAdvancedPickerClassKey = 'input';
+
// @public (undocumented)
export type CatalogReactEntityLifecyclePickerClassKey = 'input';
@@ -137,8 +141,22 @@ export type DefaultEntityFilters = {
lifecycles?: EntityLifecycleFilter;
tags?: EntityTagFilter;
text?: EntityTextFilter;
+ orphan?: EntityOrphanFilter;
+ error?: EntityErrorFilter;
};
+// @public (undocumented)
+export const EntityAdvancedPicker: () => JSX.Element;
+
+// @public
+export class EntityErrorFilter implements EntityFilter {
+ constructor(values: string[]);
+ // (undocumented)
+ filterEntity(entity: Entity): boolean;
+ // (undocumented)
+ readonly values: string[];
+}
+
// @public (undocumented)
export type EntityFilter = {
getCatalogFilters?: () => Record<
@@ -222,6 +240,15 @@ export type EntityLoadingStatus = {
refresh?: VoidFunction;
};
+// @public
+export class EntityOrphanFilter implements EntityFilter {
+ constructor(values: string[]);
+ // (undocumented)
+ filterEntity(entity: Entity): boolean;
+ // (undocumented)
+ readonly values: string[];
+}
+
// @public
export class EntityOwnerFilter implements EntityFilter {
constructor(values: string[]);
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
new file mode 100644
index 0000000000..8964038d42
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Entity } from '@backstage/catalog-model';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
+import { MockEntityListContextProvider } from '../../testUtils/providers';
+import { EntityAdvancedPicker } from './EntityAdvancedPicker';
+
+const orphanAnnotation: Record = {};
+orphanAnnotation['backstage.io/orphan'] = 'true';
+
+const sampleEntities: Entity[] = [
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'valid-component',
+ },
+ },
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'orphan-component',
+ annotations: orphanAnnotation,
+ },
+ },
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'error-component',
+ tags: ['Invalid Tag'],
+ },
+ },
+];
+
+describe('', () => {
+ it('renders all advanced options', () => {
+ const rendered = render(
+
+
+ ,
+ );
+ expect(rendered.getByText('Advanced')).toBeInTheDocument();
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ expect(rendered.getByText('Is Orphan')).toBeInTheDocument();
+ expect(rendered.getByText('Has Error')).toBeInTheDocument();
+ });
+
+ it('adds orphan to orphan filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Is Orphan'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ orphan: new EntityOrphanFilter(['true']),
+ });
+ });
+
+ it('adds error to error filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Has Error'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ error: new EntityErrorFilter(['true']),
+ });
+ });
+
+ it('remove orphan from orphan filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Is Orphan'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ orphan: undefined,
+ });
+ });
+
+ it('remove error from error filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Has Error'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ error: undefined,
+ });
+ });
+});
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
new file mode 100644
index 0000000000..9a813540f1
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
+import {
+ Box,
+ Checkbox,
+ FormControlLabel,
+ makeStyles,
+ TextField,
+ Typography,
+} from '@material-ui/core';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import React, { useState } from 'react';
+import { useEntityList } from '../../hooks';
+import { Autocomplete } from '@material-ui/lab';
+
+/** @public */
+export type CatalogReactEntityAdvancedPickerClassKey = 'input';
+
+const useStyles = makeStyles(
+ {
+ input: {},
+ },
+ {
+ name: 'CatalogReactEntityAdvancedPicker',
+ },
+);
+
+const icon = ;
+const checkedIcon = ;
+
+/** @public */
+export const EntityAdvancedPicker = () => {
+ const classes = useStyles();
+ const { updateFilters } = useEntityList();
+
+ const [selectedAdvancedItems, setSelectedAdvancedItems] = useState(
+ [],
+ );
+
+ function orphanChange(value: string) {
+ updateFilters({
+ orphan: value === 'true' ? new EntityOrphanFilter([value]) : undefined,
+ });
+ }
+
+ function errorChange(value: string) {
+ updateFilters({
+ error: value === 'true' ? new EntityErrorFilter([value]) : undefined,
+ });
+ }
+
+ const availableAdvancedItems = ['Is Orphan', 'Has Error'];
+
+ return (
+
+
+ Advanced
+ {
+ setSelectedAdvancedItems(value);
+ orphanChange(value.includes('Is Orphan') ? 'true' : 'false');
+ errorChange(value.includes('Has Error') ? 'true' : 'false');
+ }}
+ renderOption={(option, { selected }) => (
+
+ }
+ label={option}
+ />
+ )}
+ size="small"
+ popupIcon={}
+ renderInput={params => (
+
+ )}
+ />
+
+
+ );
+};
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts b/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
new file mode 100644
index 0000000000..160793f7f6
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityAdvancedPicker } from './EntityAdvancedPicker';
+export type { CatalogReactEntityAdvancedPickerClassKey } from './EntityAdvancedPicker';
diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts
index 7a26a72bf9..c495722243 100644
--- a/plugins/catalog-react/src/components/index.ts
+++ b/plugins/catalog-react/src/components/index.ts
@@ -27,3 +27,4 @@ export * from './FavoriteEntity';
export * from './InspectEntityDialog';
export * from './UnregisterEntityDialog';
export * from './UserListPicker';
+export * from './EntityAdvancedPicker';
diff --git a/plugins/catalog-react/src/filters.test.ts b/plugins/catalog-react/src/filters.test.ts
index ba31e21122..430bfb1360 100644
--- a/plugins/catalog-react/src/filters.test.ts
+++ b/plugins/catalog-react/src/filters.test.ts
@@ -14,9 +14,13 @@
* limitations under the License.
*/
-import { Entity } from '@backstage/catalog-model';
+import { AlphaEntity, Entity } from '@backstage/catalog-model';
import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { EntityTextFilter } from './filters';
+import {
+ EntityErrorFilter,
+ EntityOrphanFilter,
+ EntityTextFilter,
+} from './filters';
const entities: Entity[] = [
{
@@ -91,3 +95,50 @@ describe('EntityTextFilter', () => {
expect(filter.filterEntity(entities[1])).toBeTruthy();
});
});
+
+describe('EntityOrphanFilter', () => {
+ const orphanAnnotation: Record = {};
+ orphanAnnotation['backstage.io/orphan'] = 'true';
+
+ const orphan: Entity = {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'orphaned-service',
+ annotations: orphanAnnotation,
+ },
+ };
+
+ it('should find orphans', () => {
+ const filter = new EntityOrphanFilter(['true']);
+ expect(filter.filterEntity(orphan)).toBeTruthy();
+ expect(filter.filterEntity(entities[1])).toBeFalsy();
+ });
+});
+
+describe('EntityErrorFilter', () => {
+ const error: AlphaEntity = {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'service-with-error',
+ tags: ['Invalid Tag'],
+ },
+ status: {
+ items: [
+ {
+ type: 'invalid-tag',
+ level: 'error',
+ message: 'Tag is not valid',
+ error: undefined,
+ },
+ ],
+ },
+ };
+
+ it('should find errors', () => {
+ const filter = new EntityErrorFilter(['true']);
+ expect(filter.filterEntity(error)).toBeTruthy();
+ expect(filter.filterEntity(entities[1])).toBeFalsy();
+ });
+});
diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts
index 9fb057a01c..efd23552e9 100644
--- a/plugins/catalog-react/src/filters.ts
+++ b/plugins/catalog-react/src/filters.ts
@@ -14,7 +14,11 @@
* limitations under the License.
*/
-import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import {
+ AlphaEntity,
+ Entity,
+ RELATION_OWNED_BY,
+} from '@backstage/catalog-model';
import { humanizeEntityRef } from './components/EntityRefLink';
import { EntityFilter, UserListFilterKind } from './types';
import { getEntityRelations } from './utils';
@@ -159,3 +163,28 @@ export class UserListFilter implements EntityFilter {
return this.value;
}
}
+
+/**
+ * Filters entities based if it is an orphan or not.
+ * @public
+ */
+export class EntityOrphanFilter implements EntityFilter {
+ constructor(readonly values: string[]) {}
+ filterEntity(entity: Entity): boolean {
+ const orphan = entity.metadata.annotations?.['backstage.io/orphan'];
+ return orphan !== undefined && this.values.includes(orphan);
+ }
+}
+
+/**
+ * Filters entities based on if it has errors or not.
+ * @public
+ */
+export class EntityErrorFilter implements EntityFilter {
+ constructor(readonly values: string[]) {}
+ filterEntity(entity: Entity): boolean {
+ const error =
+ ((entity as AlphaEntity)?.status?.items?.length as number) > 0;
+ return error !== undefined && this.values.includes(error.toString());
+ }
+}
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index ccac475ae8..089701d8b4 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -31,8 +31,10 @@ import useDebounce from 'react-use/lib/useDebounce';
import useMountedState from 'react-use/lib/useMountedState';
import { catalogApiRef } from '../api';
import {
+ EntityErrorFilter,
EntityKindFilter,
EntityLifecycleFilter,
+ EntityOrphanFilter,
EntityOwnerFilter,
EntityTagFilter,
EntityTextFilter,
@@ -52,6 +54,8 @@ export type DefaultEntityFilters = {
lifecycles?: EntityLifecycleFilter;
tags?: EntityTagFilter;
text?: EntityTextFilter;
+ orphan?: EntityOrphanFilter;
+ error?: EntityErrorFilter;
};
/** @public */
diff --git a/plugins/catalog-react/src/overridableComponents.ts b/plugins/catalog-react/src/overridableComponents.ts
index 1e654988e4..b06d832481 100644
--- a/plugins/catalog-react/src/overridableComponents.ts
+++ b/plugins/catalog-react/src/overridableComponents.ts
@@ -22,6 +22,7 @@ import {
CatalogReactEntitySearchBarClassKey,
CatalogReactEntityTagPickerClassKey,
CatalogReactEntityOwnerPickerClassKey,
+ CatalogReactEntityAdvancedPickerClassKey,
} from './components';
/** @public */
@@ -31,6 +32,7 @@ export type CatalogReactComponentsNameToClassKey = {
CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey;
CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
+ CatalogReactEntityAdvancedPicker: CatalogReactEntityAdvancedPickerClassKey;
};
/** @public */
diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
index 5250dcec0d..0e84fc00de 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
@@ -28,6 +28,7 @@ import {
CatalogFilterLayout,
EntityLifecyclePicker,
EntityListProvider,
+ EntityAdvancedPicker,
EntityOwnerPicker,
EntityTagPicker,
EntityTypePicker,
@@ -84,6 +85,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
+