paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Added EntityAdvancedPicker

Browse Source 
Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
This commit is contained in:
Andre Wanlin
2022-06-20 12:19:11 -05:00
parent f9e2ec2551
commit be26d95141
11 changed files with 440 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/wicked-ladybugs-argue.md
+43
View File
@@ -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 (
...
<EntityListProvider>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<EntityKindPicker initialFilter="component" hidden />
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
<EntityTagPicker />
+ <EntityAdvancedPicker />
<CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable columns={columns} actions={actions} />
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</EntityListProvider>
...
};
```
plugins/catalog-react/api-report.md
+27
View File
@@ -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<TEntity extends Entity = Entity> = {
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[]);
plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
+152
View File
@@ -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<string, string> = {};
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('<EntityAdvancedPicker/>', () => {
it('renders all advanced options', () => {
const rendered = render(
<MockEntityListContextProvider
value={{ entities: sampleEntities, backendEntities: sampleEntities }}
>
<EntityAdvancedPicker />
</MockEntityListContextProvider>,
);
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(
<MockEntityListContextProvider
value={{
entities: sampleEntities,
backendEntities: sampleEntities,
updateFilters,
}}
>
<EntityAdvancedPicker />
</MockEntityListContextProvider>,
);
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(
<MockEntityListContextProvider
value={{
entities: sampleEntities,
backendEntities: sampleEntities,
updateFilters,
}}
>
<EntityAdvancedPicker />
</MockEntityListContextProvider>,
);
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(
<MockEntityListContextProvider
value={{
entities: sampleEntities,
backendEntities: sampleEntities,
updateFilters,
}}
>
<EntityAdvancedPicker />
</MockEntityListContextProvider>,
);
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(
<MockEntityListContextProvider
value={{
entities: sampleEntities,
backendEntities: sampleEntities,
updateFilters,
}}
>
<EntityAdvancedPicker />
</MockEntityListContextProvider>,
);
fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
fireEvent.click(rendered.getByText('Has Error'));
expect(updateFilters).toHaveBeenCalledWith({
error: undefined,
});
});
});
plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
+109
View File
@@ -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 = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;
/** @public */
export const EntityAdvancedPicker = () => {
const classes = useStyles();
const { updateFilters } = useEntityList();
const [selectedAdvancedItems, setSelectedAdvancedItems] = useState<string[]>(
[],
);
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 (
<Box pb={1} pt={1}>
<Typography variant="button" component="label">
Advanced
<Autocomplete
multiple
options={availableAdvancedItems}
value={selectedAdvancedItems}
onChange={(_: object, value: string[]) => {
setSelectedAdvancedItems(value);
orphanChange(value.includes('Is Orphan') ? 'true' : 'false');
errorChange(value.includes('Has Error') ? 'true' : 'false');
}}
renderOption={(option, { selected }) => (
<FormControlLabel
control={
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
checked={selected}
/>
}
label={option}
/>
)}
size="small"
popupIcon={<ExpandMoreIcon data-testid="advanced-picker-expand" />}
renderInput={params => (
<TextField
{...params}
className={classes.input}
variant="outlined"
/>
)}
/>
</Typography>
</Box>
);
};
plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
+17
View File
@@ -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';
plugins/catalog-react/src/components/index.ts
+1
View File
@@ -27,3 +27,4 @@ export * from './FavoriteEntity';
export * from './InspectEntityDialog';
export * from './UnregisterEntityDialog';
export * from './UserListPicker';
export * from './EntityAdvancedPicker';
plugins/catalog-react/src/filters.test.ts
+53 -2
View File
@@ -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<string, string> = {};
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();
});
});
plugins/catalog-react/src/filters.ts
+30 -1
View File
@@ -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());
}
}
plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+4
View File
@@ -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 */
plugins/catalog-react/src/overridableComponents.ts
+2
View File
@@ -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 */
plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+2
View File
@@ -28,6 +28,7 @@ import {
CatalogFilterLayout,
EntityLifecyclePicker,
EntityListProvider,
EntityAdvancedPicker,
EntityOwnerPicker,
EntityTagPicker,
EntityTypePicker,
@@ -84,6 +85,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
<EntityOwnerPicker />
<EntityLifecyclePicker />
<EntityTagPicker />
<EntityAdvancedPicker />
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<CatalogTable