diff --git a/plugins/codescene/README.md b/plugins/codescene/README.md index 5f0df2c5c7..8c336bf74f 100644 --- a/plugins/codescene/README.md +++ b/plugins/codescene/README.md @@ -78,6 +78,7 @@ metadata: import { CodeSceneEntityPage, + CodeSceneEntityFileSummary, isCodeSceneAvailable, } from '@backstage/plugin-codescene'; @@ -88,6 +89,13 @@ import { title="codescene" if={isCodeSceneAvailable} > - + + + + + + + + ; ``` diff --git a/plugins/codescene/api-report.md b/plugins/codescene/api-report.md index 37018ea14b..33b994ea6e 100644 --- a/plugins/codescene/api-report.md +++ b/plugins/codescene/api-report.md @@ -15,10 +15,10 @@ import { RouteRef } from '@backstage/core-plugin-api'; export const CODESCENE_PROJECT_ANNOTATION = 'codescene.io/project-id'; // @public (undocumented) -export const CodeSceneEntityKPICard: () => JSX_2.Element; +export const CodeSceneEntityFileSummary: () => JSX_2.Element; // @public (undocumented) -export const CodeSceneEntityPage: () => JSX_2.Element; +export const CodeSceneEntityKPICard: () => JSX_2.Element; // @public (undocumented) export const CodeSceneIcon: IconComponent; diff --git a/plugins/codescene/src/components/CodeSceneEntityFileSummary/CodeSceneEntityFileSummary.tsx b/plugins/codescene/src/components/CodeSceneEntityFileSummary/CodeSceneEntityFileSummary.tsx new file mode 100644 index 0000000000..db5cef8c44 --- /dev/null +++ b/plugins/codescene/src/components/CodeSceneEntityFileSummary/CodeSceneEntityFileSummary.tsx @@ -0,0 +1,66 @@ +/* + * 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 { Content, EmptyState, InfoCard } from '@backstage/core-components'; +import { Grid } from '@material-ui/core'; +import Alert from '@material-ui/lab/Alert'; +import React from 'react'; +import { + useEntity, + MissingAnnotationEmptyState, +} from '@backstage/plugin-catalog-react'; +import { + getProjectAnnotation, + CODESCENE_PROJECT_ANNOTATION, + isCodeSceneAvailable, +} from '../../utils/commonUtil'; +import { useAnalyses } from '../../hooks/useAnalyses'; +import { useApp } from '@backstage/core-plugin-api'; +import { CodeSceneFileSummary } from '../CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage'; + +export const CodeSceneEntityFileSummary = () => { + const { entity } = useEntity(); + const { projectId } = getProjectAnnotation(entity); + const { Progress } = useApp().getComponents(); + const { analysis, loading, error } = useAnalyses(projectId); + + if (loading) { + return ; + } else if (error) { + return {error.message}; + } else if (!analysis) { + return ( + + ); + } + + return isCodeSceneAvailable(entity) ? ( + + + + + + + + + + ) : ( + + ); +}; diff --git a/plugins/codescene/src/components/CodeSceneEntityPage/index.ts b/plugins/codescene/src/components/CodeSceneEntityFileSummary/index.ts similarity index 88% rename from plugins/codescene/src/components/CodeSceneEntityPage/index.ts rename to plugins/codescene/src/components/CodeSceneEntityFileSummary/index.ts index 3909fb4861..7495fe26ef 100644 --- a/plugins/codescene/src/components/CodeSceneEntityPage/index.ts +++ b/plugins/codescene/src/components/CodeSceneEntityFileSummary/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { CodeSceneEntityPage } from './CodeSceneEntityPage'; +export { CodeSceneEntityFileSummary } from './CodeSceneEntityFileSummary'; diff --git a/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.test.tsx b/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.test.tsx deleted file mode 100644 index f433f33ce5..0000000000 --- a/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.test.tsx +++ /dev/null @@ -1,135 +0,0 @@ -/* - * Copyright 2023 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 React from 'react'; -import { CodeSceneEntityKPICard } from './CodeSceneEntityKPICard'; -import { rest } from 'msw'; -import { setupServer } from 'msw/node'; -import { - setupRequestMockHandlers, - renderInTestApp, - TestApiRegistry, -} from '@backstage/test-utils'; -import { CodeSceneApi, codesceneApiRef } from '../../api/api'; -import { ApiProvider } from '@backstage/core-app-api'; -import { Analysis } from '../../api/types'; -import { ConfigReader } from '@backstage/config'; -import { configApiRef } from '@backstage/core-plugin-api'; -import { EntityProvider } from '@backstage/plugin-catalog-react'; - -const entity = { - metadata: { - namespace: 'default', - annotations: { - 'codescene.io/project-id': '12345', - }, - name: 'codescene-test-project', - title: 'codescene-test-project', - description: 'A demo codescene-test repo', - links: [ - { - url: 'https://some-demo.com', - title: 'Demo', - icon: 'dashboard', - }, - ], - }, - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - spec: { - type: 'website', - owner: 'swcoe', - lifecycle: 'experimental', - }, - relations: [ - { - type: 'ownedBy', - targetRef: 'group:default/swcoe', - target: { - kind: 'group', - namespace: 'default', - name: 'swcoe', - }, - }, - ], -}; - -describe('CodeSceneEntityKPICard', () => { - const server = setupServer(); - // Enable same handlers for network requests - setupRequestMockHandlers(server); - let apis: TestApiRegistry; - - // setup mock response - beforeEach(() => { - server.use( - rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))), - ); - - const config = new ConfigReader({ - codescene: { - baseUrl: 'www.fake-url.com', - }, - }); - const analysis: Analysis = { - id: 1, - name: 'codescene-test-project', - project_id: 12345, - readable_analysis_time: '2022-03-22', - summary: { - unique_issue_ids: 0, - issues_filtered_as_outliers: 0, - entities: 0, - commits_with_issue_ids: 0, - authors_count: 0, - active_authors_count: 0, - issues_with_cycle_time: 0, - commits: 0, - issue_ids_matched_to_issues: 0, - issues_classed_as_defects: 0, - issues_with_cost: 0, - }, - file_summary: [], - high_level_metrics: { - current_score: 0, - month_score: 0, - year_score: 0, - active_developers: 0, - lines_of_code: 0, - system_mastery: 0, - }, - }; - apis = TestApiRegistry.from( - [ - codesceneApiRef, - { - fetchLatestAnalysis: jest.fn(() => analysis), - } as unknown as CodeSceneApi, - ], - [configApiRef, config], - ); - }); - - it('should render', async () => { - const rendered = await renderInTestApp( - - - - - , - ); - expect(rendered.getByText(/Mar 22, 2022/i)).toBeInTheDocument(); - }); -}); diff --git a/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.tsx b/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.tsx index 0f348eaf3f..1757ad19cf 100644 --- a/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.tsx +++ b/plugins/codescene/src/components/CodeSceneEntityKPICard/CodeSceneEntityKPICard.tsx @@ -13,13 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - Content, - EmptyState, - Progress, - ContentHeader, -} from '@backstage/core-components'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; +import { EmptyState, GaugeCard, InfoCard } from '@backstage/core-components'; +import { configApiRef, useApi, useApp } from '@backstage/core-plugin-api'; import Alert from '@material-ui/lab/Alert'; import React from 'react'; import { useEntity } from '@backstage/plugin-catalog-react'; @@ -34,6 +29,7 @@ import { } from '../../utils/commonUtil'; import { DateTime } from 'luxon'; import { MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react'; +import { Grid, Typography } from '@material-ui/core'; export const CodeSceneEntityKPICard = () => { const { entity } = useEntity(); @@ -41,6 +37,7 @@ export const CodeSceneEntityKPICard = () => { const codesceneApi = useApi(codesceneApiRef); const config = useApi(configApiRef); const codesceneHost = config.getString('codescene.baseUrl'); + const { Progress } = useApp().getComponents(); const { value: analysis, @@ -64,16 +61,68 @@ export const CodeSceneEntityKPICard = () => { ); } + const analysisPath = `${codesceneHost}/${projectId}/analyses/${analysis.id}`; + const analysisLink = { title: 'Check the analysis', link: analysisPath }; + + const analysisBody = ( + <> + + Active authors: {analysis.summary.active_authors_count} + + + Total authors: {analysis.summary.authors_count} + + + Commits: {analysis.summary.commits} + + + ); + return isCodeSceneAvailable(entity) ? ( - - - Last analyzed on{' '} - {DateTime.fromISO(analysis.readable_analysis_time).toLocaleString( - DateTime.DATETIME_MED, - )} - - - + <> + + + + + + + + + + + + + + + + + + + {analysisBody} + + + +
+ {`Last analyzed on ${DateTime.fromISO( + analysis.readable_analysis_time, + ).toLocaleString(DateTime.DATETIME_MED)}`} +
+ ) : ( ); diff --git a/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.test.tsx b/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.test.tsx deleted file mode 100644 index 96fd16aa62..0000000000 --- a/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.test.tsx +++ /dev/null @@ -1,135 +0,0 @@ -/* - * Copyright 2023 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 React from 'react'; -import { CodeSceneEntityPage } from './CodeSceneEntityPage'; -import { rest } from 'msw'; -import { setupServer } from 'msw/node'; -import { - setupRequestMockHandlers, - renderInTestApp, - TestApiRegistry, -} from '@backstage/test-utils'; -import { CodeSceneApi, codesceneApiRef } from '../../api/api'; -import { ApiProvider } from '@backstage/core-app-api'; -import { Analysis } from '../../api/types'; -import { ConfigReader } from '@backstage/config'; -import { configApiRef } from '@backstage/core-plugin-api'; -import { EntityProvider } from '@backstage/plugin-catalog-react'; - -const entity = { - metadata: { - namespace: 'default', - annotations: { - 'codescene.io/project-id': '12345', - }, - name: 'codescene-test-project', - title: 'codescene-test-project', - description: 'A demo codescene-test repo', - links: [ - { - url: 'https://some-demo.com', - title: 'Demo', - icon: 'dashboard', - }, - ], - }, - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - spec: { - type: 'website', - owner: 'swcoe', - lifecycle: 'experimental', - }, - relations: [ - { - type: 'ownedBy', - targetRef: 'group:default/swcoe', - target: { - kind: 'group', - namespace: 'default', - name: 'swcoe', - }, - }, - ], -}; - -describe('CodeSceneEntityPage', () => { - const server = setupServer(); - // Enable sane handlers for network requests - setupRequestMockHandlers(server); - let apis: TestApiRegistry; - - // setup mock response - beforeEach(() => { - server.use( - rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))), - ); - - const config = new ConfigReader({ - codescene: { - baseUrl: 'www.fake-url.com', - }, - }); - const analysis: Analysis = { - id: 1, - name: 'codescene-test-project', - project_id: 12345, - readable_analysis_time: '2022-03-22', - summary: { - unique_issue_ids: 0, - issues_filtered_as_outliers: 0, - entities: 0, - commits_with_issue_ids: 0, - authors_count: 0, - active_authors_count: 0, - issues_with_cycle_time: 0, - commits: 0, - issue_ids_matched_to_issues: 0, - issues_classed_as_defects: 0, - issues_with_cost: 0, - }, - file_summary: [], - high_level_metrics: { - current_score: 0, - month_score: 0, - year_score: 0, - active_developers: 0, - lines_of_code: 0, - system_mastery: 0, - }, - }; - apis = TestApiRegistry.from( - [ - codesceneApiRef, - { - fetchLatestAnalysis: jest.fn(() => analysis), - } as unknown as CodeSceneApi, - ], - [configApiRef, config], - ); - }); - - it('should render', async () => { - const rendered = await renderInTestApp( - - - - - , - ); - expect(rendered.getByText(/codescene-test-project/i)).toBeInTheDocument(); - }); -}); diff --git a/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.tsx b/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.tsx deleted file mode 100644 index 19d2636fe9..0000000000 --- a/plugins/codescene/src/components/CodeSceneEntityPage/CodeSceneEntityPage.tsx +++ /dev/null @@ -1,167 +0,0 @@ -/* - * Copyright 2023 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 { - Content, - EmptyState, - GaugeCard, - Header, - InfoCard, - Page, - Progress, - SupportButton, - Table, - TableColumn, -} from '@backstage/core-components'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { Grid, Typography } from '@material-ui/core'; -import Alert from '@material-ui/lab/Alert'; -import React from 'react'; -import { useEntity } from '@backstage/plugin-catalog-react'; -import useAsync from 'react-use/lib/useAsync'; -import { codesceneApiRef } from '../../api/api'; -import { Analysis } from '../../api/types'; -import { CodeHealthKpisCard } from '../CodeHealthKpisCard/CodeHealthKpisCard'; -import { MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react'; -import { - getProjectAnnotation, - CODESCENE_PROJECT_ANNOTATION, - isCodeSceneAvailable, -} from '../../utils/commonUtil'; - -export const CodeSceneEntityPage = () => { - const { entity } = useEntity(); - const { projectId } = getProjectAnnotation(entity); - const codesceneApi = useApi(codesceneApiRef); - const config = useApi(configApiRef); - const { - value: analysis, - loading, - error, - } = useAsync(async (): Promise => { - return await codesceneApi.fetchLatestAnalysis(projectId); - }, []); - - if (loading) { - return ; - } else if (error) { - return {error.message}; - } else if (!analysis) { - return ( - - ); - } - - const columns: TableColumn[] = [ - { - title: 'Language', - field: 'language', - highlight: true, - }, - { - title: 'Files', - field: 'number_of_files', - type: 'numeric', - }, - { - title: 'Code', - field: 'code', - type: 'numeric', - }, - { - title: 'Comment', - field: 'comment', - type: 'numeric', - }, - ]; - - const fileSummaryTable = ( - b.code - a.code)} - columns={columns} - title="File Summary" - /> - ); - - const codesceneHost = config.getString('codescene.baseUrl'); - const analysisPath = `${codesceneHost}/${projectId}/analyses/${analysis.id}`; - const analysisLink = { title: 'Check the analysis', link: analysisPath }; - - const analysisBody = ( - <> - - Active authors: {analysis.summary.active_authors_count} - - - Total authors: {analysis.summary.authors_count} - - - Commits: {analysis.summary.commits} - - - ); - - return isCodeSceneAvailable(entity) ? ( - -
- - See hidden risks and social patterns in your code. Prioritize and - reduce technical debt. - -
- - - - - - - - - - - - - - - {analysisBody} - - - - - {fileSummaryTable} - - - - ) : ( - - ); -}; diff --git a/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.tsx b/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.tsx index 1197edb47e..dbacd919b4 100644 --- a/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.tsx +++ b/plugins/codescene/src/components/CodeSceneProjectDetailsPage/CodeSceneProjectDetailsPage.tsx @@ -20,48 +20,20 @@ import { Header, InfoCard, Page, - Progress, SupportButton, Table, TableColumn, } from '@backstage/core-components'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; +import { configApiRef, useApi, useApp } from '@backstage/core-plugin-api'; import { Grid, Typography } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import React from 'react'; import { useParams } from 'react-router-dom'; -import useAsync from 'react-use/lib/useAsync'; -import { codesceneApiRef } from '../../api/api'; -import { Analysis } from '../../api/types'; import { CodeHealthKpisCard } from '../CodeHealthKpisCard/CodeHealthKpisCard'; +import { useAnalyses } from '../../hooks/useAnalyses'; +import { Analysis } from '../../api/types'; -export const CodeSceneProjectDetailsPage = () => { - const params = useParams(); - const projectId = Number(params.projectId); - const codesceneApi = useApi(codesceneApiRef); - const config = useApi(configApiRef); - const { - value: analysis, - loading, - error, - } = useAsync(async (): Promise => { - return await codesceneApi.fetchLatestAnalysis(projectId); - }, []); - - if (loading) { - return ; - } else if (error) { - return {error.message}; - } else if (!analysis) { - return ( - - ); - } - +export const CodeSceneFileSummary = (props: Analysis) => { const columns: TableColumn[] = [ { title: 'Language', @@ -85,14 +57,36 @@ export const CodeSceneProjectDetailsPage = () => { }, ]; - const fileSummaryTable = ( + return (
b.code - a.code)} + data={props.file_summary.sort((a, b) => b.code - a.code)} columns={columns} title="File Summary" /> ); +}; + +export const CodeSceneProjectDetailsPage = () => { + const params = useParams(); + const projectId = Number(params.projectId); + const config = useApi(configApiRef); + const { analysis, loading, error } = useAnalyses(projectId); + const { Progress } = useApp().getComponents(); + + if (loading) { + return ; + } else if (error) { + return {error.message}; + } else if (!analysis) { + return ( + + ); + } const codesceneHost = config.getString('codescene.baseUrl'); const analysisPath = `${codesceneHost}/${projectId}/analyses/${analysis.id}`; @@ -150,7 +144,9 @@ export const CodeSceneProjectDetailsPage = () => { - {fileSummaryTable} + + + diff --git a/plugins/codescene/src/hooks/useAnalyses.ts b/plugins/codescene/src/hooks/useAnalyses.ts new file mode 100644 index 0000000000..9326b27641 --- /dev/null +++ b/plugins/codescene/src/hooks/useAnalyses.ts @@ -0,0 +1,34 @@ +/* + * Copyright 2023 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 { Analysis } from '../api/types'; +import { codesceneApiRef } from '../api/api'; +import { useApi } from '@backstage/core-plugin-api'; +import useAsync from 'react-use/lib/useAsync'; + +export const useAnalyses = (projectId: number) => { + const codesceneApi = useApi(codesceneApiRef); + + const { + value: analysis, + loading, + error, + } = useAsync(async (): Promise => { + return await codesceneApi.fetchLatestAnalysis(projectId); + }, []); + + return { analysis, loading, error }; +}; diff --git a/plugins/codescene/src/index.ts b/plugins/codescene/src/index.ts index 414af61d04..463086dd5e 100644 --- a/plugins/codescene/src/index.ts +++ b/plugins/codescene/src/index.ts @@ -17,7 +17,7 @@ export { codescenePlugin, CodeScenePage, CodeSceneProjectDetailsPage, - CodeSceneEntityPage, + CodeSceneEntityFileSummary, CodeSceneEntityKPICard, } from './plugin'; export { CodeSceneIcon } from './CodeSceneIcon'; diff --git a/plugins/codescene/src/plugin.ts b/plugins/codescene/src/plugin.ts index 70cb3fb2a5..49014568a5 100644 --- a/plugins/codescene/src/plugin.ts +++ b/plugins/codescene/src/plugin.ts @@ -18,6 +18,7 @@ import { createRoutableExtension, createApiFactory, discoveryApiRef, + createComponentExtension, } from '@backstage/core-plugin-api'; import { codesceneApiRef, CodeSceneClient } from './api/api'; import { rootRouteRef, projectDetailsRouteRef } from './routes'; @@ -72,26 +73,28 @@ export const CodeSceneProjectDetailsPage = codescenePlugin.provide( * @public */ export const CodeSceneEntityKPICard = codescenePlugin.provide( - createRoutableExtension({ + createComponentExtension({ name: 'CodeSceneEntityKPICard', - component: () => - import('./components/CodeSceneEntityKPICard').then( - m => m.CodeSceneEntityKPICard, - ), - mountPoint: rootRouteRef, + component: { + lazy: () => + import('./components/CodeSceneEntityKPICard').then( + m => m.CodeSceneEntityKPICard, + ), + }, }), ); /** * @public */ -export const CodeSceneEntityPage = codescenePlugin.provide( - createRoutableExtension({ - name: 'CodeSceneEntityPage', - component: () => - import('./components/CodeSceneEntityPage').then( - m => m.CodeSceneEntityPage, - ), - mountPoint: rootRouteRef, +export const CodeSceneEntityFileSummary = codescenePlugin.provide( + createComponentExtension({ + name: 'CodeSceneEntityFileSummary', + component: { + lazy: () => + import('./components/CodeSceneEntityFileSummary').then( + m => m.CodeSceneEntityFileSummary, + ), + }, }), );