From 68bb66102dbf1f7bfb2c9da378f769a6ea600cbb Mon Sep 17 00:00:00 2001 From: Frank Cycan Date: Thu, 31 Mar 2022 10:54:10 -0400 Subject: [PATCH] feat(SentryPlugin): Exposed Material table Options Signed-off-by: Frank Cycan --- .changeset/famous-seas-flash.md | 5 +++ plugins/sentry/api-report.md | 16 +++++-- plugins/sentry/dev/index.tsx | 2 +- plugins/sentry/package.json | 1 + plugins/sentry/src/components/Router.tsx | 13 +++++- .../SentryIssuesTable.test.tsx | 33 +++++++++++++-- .../SentryIssuesTable/SentryIssuesTable.tsx | 7 +++- .../SentryIssuesWidget/SentryIssuesWidget.tsx | 15 +++++-- plugins/sentry/src/extensions.tsx | 42 +++++++++++++++++-- 9 files changed, 117 insertions(+), 17 deletions(-) create mode 100644 .changeset/famous-seas-flash.md diff --git a/.changeset/famous-seas-flash.md b/.changeset/famous-seas-flash.md new file mode 100644 index 0000000000..cd19dc257e --- /dev/null +++ b/.changeset/famous-seas-flash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-sentry': patch +--- + +Exposed options for the material table diff --git a/plugins/sentry/api-report.md b/plugins/sentry/api-report.md index 6d83ddc5e6..5ad2992ee4 100644 --- a/plugins/sentry/api-report.md +++ b/plugins/sentry/api-report.md @@ -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; variant?: InfoCardVariants | undefined; query?: string | undefined; }) => JSX.Element; diff --git a/plugins/sentry/dev/index.tsx b/plugins/sentry/dev/index.tsx index b2eb617cf4..346cb7563a 100644 --- a/plugins/sentry/dev/index.tsx +++ b/plugins/sentry/dev/index.tsx @@ -70,7 +70,7 @@ createDevApp()
- + diff --git a/plugins/sentry/package.json b/plugins/sentry/package.json index d1836bfd4a..edcf3eb76d 100644 --- a/plugins/sentry/package.json +++ b/plugins/sentry/package.json @@ -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", diff --git a/plugins/sentry/src/components/Router.tsx b/plugins/sentry/src/components/Router.tsx index b83d07e4b2..2a3172824a 100644 --- a/plugins/sentry/src/components/Router.tsx +++ b/plugins/sentry/src/components/Router.tsx @@ -24,7 +24,18 @@ export const Router = ({ entity }: { entity: Entity }) => { } + element={ + + } /> ) diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx index 85e87dbc28..2516d37788 100644 --- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx +++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.test.tsx @@ -37,7 +37,16 @@ describe('SentryIssuesTable', () => { ]; const table = await render( - + , ); expect(await table.findByText('Error')).toBeInTheDocument(); @@ -61,7 +70,16 @@ describe('SentryIssuesTable', () => { ]; const table = await render( - + , ); expect(await table.findByText('Exception')).toBeInTheDocument(); @@ -83,7 +101,16 @@ describe('SentryIssuesTable', () => { ]; const table = await render( - + , ); expect(await table.findByText('Last 24h')).toBeInTheDocument(); diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx index b6b7848dfa..e8e4c44a11 100644 --- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx +++ b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx @@ -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; }; const SentryIssuesTable = ({ sentryIssues, statsFor, + tableOptions, }: SentryIssuesTableProps) => { return ( ; variant?: InfoCardVariants; query?: string; }) => { @@ -83,5 +86,11 @@ export const SentryIssuesWidget = ({ ); } - return ; + return ( + + ); }; diff --git a/plugins/sentry/src/extensions.tsx b/plugins/sentry/src/extensions.tsx index 7a6d3d9f0f..2e3ab35519 100644 --- a/plugins/sentry/src/extensions.tsx +++ b/plugins/sentry/src/extensions.tsx @@ -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; +}; 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 ; + const defaultOptions: Options = { + padding: 'dense', + paging: true, + search: false, + pageSize: 5, + }; + return ( + + ); }; 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 ; + return ( + + ); }; return SentryCard; },