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

feat(SentryPlugin): Exposed Material table Options

Browse Source 
Signed-off-by: Frank Cycan <frank@hqo.co>
This commit is contained in:
Frank Cycan
2022-03-31 10:54:10 -04:00
parent d8dd90927e
commit 68bb66102d
9 changed files with 117 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/famous-seas-flash.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-sentry': patch
---
Exposed options for the material table
plugins/sentry/api-report.md
+13 -3
View File
@@ -11,17 +11,25 @@ import { DiscoveryApi } from '@backstage/core-plugin-api';
import { Entity } from '@backstage/catalog-model';
import { IdentityApi } from '@backstage/core-plugin-api';
import { InfoCardVariants } from '@backstage/core-components';
import { Options } from '@material-table/core';
import { RouteRef } from '@backstage/core-plugin-api';
// Warning: (ae-forgotten-export) The symbol "SentryPageProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "EntitySentryCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const EntitySentryCard: () => JSX.Element;
export const EntitySentryCard: ({
statsFor,
tableOptions,
}: SentryPageProps) => JSX.Element;
// Warning: (ae-missing-release-tag) "EntitySentryContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const EntitySentryContent: () => JSX.Element;
export const EntitySentryContent: ({
statsFor,
tableOptions,
}: SentryPageProps) => JSX.Element;
// Warning: (ae-missing-release-tag) "MockSentryApi" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
@@ -112,11 +120,13 @@ export type SentryIssue = {
export const SentryIssuesWidget: ({
entity,
statsFor,
tableOptions,
variant,
query,
}: {
entity: Entity;
statsFor?: '' | '14d' | '24h' | undefined;
statsFor: '24h' | '14d' | '';
tableOptions: Options<never>;
variant?: InfoCardVariants | undefined;
query?: string | undefined;
}) => JSX.Element;
plugins/sentry/dev/index.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ createDevApp()
<Page themeId="home">
<Header title="Sentry" />
<Content>
<EntityProvider entity={entity('error')}>
<EntityProvider entity={entity('with-values')}>
<EntitySentryContent />
</EntityProvider>
</Content>
plugins/sentry/package.json
+1
View File
@@ -40,6 +40,7 @@
"@backstage/core-plugin-api": "^1.0.0",
"@backstage/plugin-catalog-react": "^1.0.1-next.1",
"@backstage/theme": "^0.2.15",
"@material-table/core": "^3.1.0",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
plugins/sentry/src/components/Router.tsx
+12 -1
View File
@@ -24,7 +24,18 @@ export const Router = ({ entity }: { entity: Entity }) => {
<Routes>
<Route
path="/"
element={<SentryIssuesWidget entity={entity} statsFor="24h" />}
element={
<SentryIssuesWidget
entity={entity}
statsFor="24h"
tableOptions={{
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
}}
/>
}
/>
)
</Routes>
plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx
+30 -3
View File
@@ -37,7 +37,16 @@ describe('SentryIssuesTable', () => {
];
const table = await render(
<ThemeProvider theme={lightTheme}>
<SentryIssuesTable sentryIssues={issues} />
<SentryIssuesTable
sentryIssues={issues}
statsFor="24h"
tableOptions={{
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
}}
/>
</ThemeProvider>,
);
expect(await table.findByText('Error')).toBeInTheDocument();
@@ -61,7 +70,16 @@ describe('SentryIssuesTable', () => {
];
const table = await render(
<ThemeProvider theme={lightTheme}>
<SentryIssuesTable sentryIssues={issues} />
<SentryIssuesTable
sentryIssues={issues}
statsFor="24h"
tableOptions={{
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
}}
/>
</ThemeProvider>,
);
expect(await table.findByText('Exception')).toBeInTheDocument();
@@ -83,7 +101,16 @@ describe('SentryIssuesTable', () => {
];
const table = await render(
<ThemeProvider theme={lightTheme}>
<SentryIssuesTable sentryIssues={issues} statsFor="24h" />
<SentryIssuesTable
sentryIssues={issues}
statsFor="24h"
tableOptions={{
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
}}
/>
</ThemeProvider>,
);
expect(await table.findByText('Last 24h')).toBeInTheDocument();
plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
+5 -2
View File
@@ -20,6 +20,7 @@ import { DateTime } from 'luxon';
import { ErrorCell } from '../ErrorCell/ErrorCell';
import { ErrorGraph } from '../ErrorGraph/ErrorGraph';
import { Table, TableColumn } from '@backstage/core-components';
import { Options } from '@material-table/core';
const columns: TableColumn[] = [
{
@@ -59,17 +60,19 @@ const columns: TableColumn[] = [
type SentryIssuesTableProps = {
sentryIssues: SentryIssue[];
statsFor?: '24h' | '14d' | '';
statsFor: '24h' | '14d' | '';
tableOptions: Options<never>;
};
const SentryIssuesTable = ({
sentryIssues,
statsFor,
tableOptions,
}: SentryIssuesTableProps) => {
return (
<Table
columns={columns}
options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
options={tableOptions}
title="Sentry issues"
subtitle={statsFor ? `Last ${statsFor}` : undefined}
data={sentryIssues}
plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx
+12 -3
View File
@@ -33,15 +33,18 @@ import {
} from '@backstage/core-components';
import { ErrorApi, errorApiRef, useApi } from '@backstage/core-plugin-api';
import { Options } from '@material-table/core';
export const SentryIssuesWidget = ({
entity,
statsFor = '24h',
statsFor,
tableOptions,
variant = 'gridItem',
query = '',
}: {
entity: Entity;
statsFor?: '24h' | '14d' | '';
statsFor: '24h' | '14d' | '';
tableOptions: Options<never>;
variant?: InfoCardVariants;
query?: string;
}) => {
@@ -83,5 +86,11 @@ export const SentryIssuesWidget = ({
);
}
return <SentryIssuesTable sentryIssues={value || []} statsFor={statsFor} />;
return (
<SentryIssuesTable
sentryIssues={value || []}
statsFor={statsFor}
tableOptions={tableOptions}
/>
);
};
plugins/sentry/src/extensions.tsx
+38 -4
View File
@@ -21,6 +21,12 @@ import {
createComponentExtension,
createRoutableExtension,
} from '@backstage/core-plugin-api';
import { Options } from '@material-table/core';
type SentryPageProps = {
statsFor?: '24h' | '14d' | '';
tableOptions?: Options<never>;
};
export const EntitySentryContent = sentryPlugin.provide(
createRoutableExtension({
@@ -29,9 +35,21 @@ export const EntitySentryContent = sentryPlugin.provide(
component: () =>
import('./components/SentryIssuesWidget').then(
({ SentryIssuesWidget }) => {
const SentryPage = () => {
const SentryPage = ({ statsFor, tableOptions }: SentryPageProps) => {
const { entity } = useEntity();
return <SentryIssuesWidget entity={entity} statsFor="24h" />;
const defaultOptions: Options<never> = {
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
};
return (
<SentryIssuesWidget
entity={entity}
statsFor={statsFor || '24h'}
tableOptions={{ ...defaultOptions, ...tableOptions }}
/>
);
};
return SentryPage;
},
@@ -46,9 +64,25 @@ export const EntitySentryCard = sentryPlugin.provide(
lazy: () =>
import('./components/SentryIssuesWidget').then(
({ SentryIssuesWidget }) => {
const SentryCard = () => {
const SentryCard = ({
statsFor,
tableOptions,
}: SentryPageProps) => {
const { entity } = useEntity();
return <SentryIssuesWidget entity={entity} />;
return (
<SentryIssuesWidget
entity={entity}
statsFor={statsFor || '24h'}
tableOptions={
tableOptions || {
padding: 'dense',
paging: true,
search: false,
pageSize: 5,
}
}
/>
);
};
return SentryCard;
},