diff --git a/.changeset/short-timers-act.md b/.changeset/short-timers-act.md new file mode 100644 index 0000000..7f7f25b --- /dev/null +++ b/.changeset/short-timers-act.md @@ -0,0 +1,5 @@ +--- +'@dweber019/backstage-plugin-missing-entity': patch +--- + +Extract content from page and provide content separately. diff --git a/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityContent.tsx b/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityContent.tsx new file mode 100644 index 0000000..29191f2 --- /dev/null +++ b/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityContent.tsx @@ -0,0 +1,121 @@ +import { + Select, + Table, + TableColumn, +} from '@backstage/core-components'; +import Alert from '@material-ui/lab/Alert'; +import React, { useCallback, useState } from 'react'; +import { identityApiRef, useApi } from '@backstage/core-plugin-api'; +import { missingEntityApiRef } from '../../api'; +import { EntityMissingResults } from '@dweber019/backstage-plugin-missing-entity-common'; +import { EntityRefLink } from '@backstage/plugin-catalog-react'; +import Typography from '@material-ui/core/Typography'; +import Grid from '@material-ui/core/Grid'; +import ReplayIcon from '@material-ui/icons/Replay'; +import { useAsyncRetry } from 'react-use'; + +export const MissingEntityContent = () => { + const missingEntityApi = useApi(missingEntityApiRef); + const identityApi = useApi(identityApiRef); + const [withMissing, setWithMissing] = useState(true); + const [myEntities, setMyEntities] = useState(true); + + const { value, loading, error, retry } = useAsyncRetry(async () => { + const userIdentity = await identityApi.getBackstageIdentity(); + return missingEntityApi.getAllMissingEntities(withMissing, myEntities ? userIdentity.ownershipEntityRefs.join(',') : undefined); + }, [missingEntityApi, identityApi, withMissing, myEntities]); + + const reloadEntity = useCallback(async (entityRef: string) => { + await missingEntityApi.getMissingEntities(entityRef, true); + retry(); + }, [missingEntityApi, retry]); + + const tableColumns: TableColumn[] = [ + { + field: 'entityRef', + title: 'Entity', + render: item => , + }, + { + field: 'missingEntityRefs', + title: 'Missing entities', + render: item => item.missingEntityRefs.join(', '), + }, + ]; + + return ( + <> + {error && {error.message}} + + + + Total: {value?.overview.entityCount} +
+ Processed: {value?.overview.processedCount} +
+ Pending: {value?.overview.pendingCount} +
+ Stale: {value?.overview.staleCount} +
+
+ + setMyEntities(Boolean(selected))} + selected={1} + label="Only my entities" + items={[ + { + label: 'Yes', + value: 1, + }, + { + label: 'No', + value: 0, + }, + ]} + /> +
+ + , + tooltip: "Reload", + onClick: (_event, rowData) => { + if (!Array.isArray(rowData)) { + reloadEntity(rowData.entityRef); + } + }, + }, + ]} + /> + + + + ); +}; diff --git a/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityPage.tsx b/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityPage.tsx index 6371c49..042cd7e 100644 --- a/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityPage.tsx +++ b/plugins/missing-entity/src/components/MissingEntityPage/MissingEntityPage.tsx @@ -1,50 +1,12 @@ import { Content, Header, - Page, Select, - Table, - TableColumn, + Page, } from '@backstage/core-components'; -import Alert from '@material-ui/lab/Alert'; -import React, { useCallback, useState } from 'react'; -import { identityApiRef, useApi } from '@backstage/core-plugin-api'; -import { missingEntityApiRef } from '../../api'; -import { EntityMissingResults } from '@dweber019/backstage-plugin-missing-entity-common'; -import { EntityRefLink } from '@backstage/plugin-catalog-react'; -import Typography from '@material-ui/core/Typography'; -import Grid from '@material-ui/core/Grid'; -import ReplayIcon from '@material-ui/icons/Replay'; -import { useAsyncRetry } from 'react-use'; +import React from 'react'; +import { MissingEntityContent } from './MissingEntityContent'; export const MissingEntityPage = () => { - const missingEntityApi = useApi(missingEntityApiRef); - const identityApi = useApi(identityApiRef); - const [withMissing, setWithMissing] = useState(true); - const [myEntities, setMyEntities] = useState(true); - - const { value, loading, error, retry } = useAsyncRetry(async () => { - const userIdentity = await identityApi.getBackstageIdentity(); - return missingEntityApi.getAllMissingEntities(withMissing, myEntities ? userIdentity.ownershipEntityRefs.join(',') : undefined); - }, [missingEntityApi, identityApi, withMissing, myEntities]); - - const reloadEntity = useCallback(async (entityRef: string) => { - await missingEntityApi.getMissingEntities(entityRef, true); - retry(); - }, [missingEntityApi, retry]); - - const tableColumns: TableColumn[] = [ - { - field: 'entityRef', - title: 'Entity', - render: item => , - }, - { - field: 'missingEntityRefs', - title: 'Missing entities', - render: item => item.missingEntityRefs.join(', '), - }, - ]; - return (
{ subtitle="All entities which are proccessed" /> - {error && {error.message}} - - - - Total: {value?.overview.entityCount} -
- Processed: {value?.overview.processedCount} -
- Pending: {value?.overview.pendingCount} -
- Stale: {value?.overview.staleCount} -
-
- - setMyEntities(Boolean(selected))} - selected={1} - label="Only my entities" - items={[ - { - label: 'Yes', - value: 1, - }, - { - label: 'No', - value: 0, - }, - ]} - /> -
- -
, - tooltip: "Reload", - onClick: (_event, rowData) => { - if (!Array.isArray(rowData)) { - reloadEntity(rowData.entityRef); - } - }, - }, - ]} - /> - - + ); diff --git a/plugins/missing-entity/src/components/MissingEntityPage/index.ts b/plugins/missing-entity/src/components/MissingEntityPage/index.ts index d59a4e4..ae8d3be 100644 --- a/plugins/missing-entity/src/components/MissingEntityPage/index.ts +++ b/plugins/missing-entity/src/components/MissingEntityPage/index.ts @@ -1 +1,2 @@ export { MissingEntityPage } from './MissingEntityPage'; +export { MissingEntityContent } from './MissingEntityContent'; diff --git a/plugins/missing-entity/src/index.ts b/plugins/missing-entity/src/index.ts index 588863c..28e52fd 100644 --- a/plugins/missing-entity/src/index.ts +++ b/plugins/missing-entity/src/index.ts @@ -1,5 +1,6 @@ export { missingEntityPlugin, MissingEntityPage, + MissingEntityContent, } from './plugin'; export * from './components/MissingEntityWarning'; diff --git a/plugins/missing-entity/src/plugin.ts b/plugins/missing-entity/src/plugin.ts index 64f9f56..9fb4188 100644 --- a/plugins/missing-entity/src/plugin.ts +++ b/plugins/missing-entity/src/plugin.ts @@ -31,3 +31,12 @@ export const MissingEntityPage = missingEntityPlugin.provide( mountPoint: rootRouteRef, }), ); + +export const MissingEntityContent = missingEntityPlugin.provide( + createRoutableExtension({ + name: 'MissingEntityContent', + component: () => + import('./components/MissingEntityPage').then(m => m.MissingEntityContent), + mountPoint: rootRouteRef, + }), +);