diff --git a/packages/app/package.json b/packages/app/package.json index cfeb43b4d3..9e235613b7 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -19,13 +19,14 @@ "dependencies": { "@backstage/cli": "^0.1.1-alpha.4", "@backstage/core": "^0.1.1-alpha.4", - "@backstage/plugin-explore": "^0.1.1-alpha.4", "@backstage/plugin-circleci": "^0.1.1-alpha.4", + "@backstage/plugin-explore": "^0.1.1-alpha.4", "@backstage/plugin-home-page": "^0.1.1-alpha.4", "@backstage/plugin-inventory": "^0.1.1-alpha.4", "@backstage/plugin-lighthouse": "^0.1.1-alpha.4", "@backstage/plugin-scaffolder": "^0.1.1-alpha.4", "@backstage/plugin-tech-radar": "^0.1.1-alpha.4", + "@backstage/plugin-test": "^0.1.1-alpha.4", "@backstage/plugin-welcome": "^0.1.1-alpha.4", "@backstage/theme": "^0.1.1-alpha.4", "@material-ui/core": "^4.9.1", diff --git a/packages/app/src/setupProxy.js b/packages/app/src/setupProxy.js index 65ed973923..38cb098a03 100644 --- a/packages/app/src/setupProxy.js +++ b/packages/app/src/setupProxy.js @@ -1,7 +1,18 @@ -const { proxySettings } = require('@backstage/plugin-circleci'); -const { createProxyMiddleware } = require('http-proxy-middleware'); +const createProxyMiddleware = require('http-proxy-middleware'); + +// FIXME: somehow get it from within the plugin itself? +const circleCIProxySettings = { + '/circleci/api': { + target: 'https://circleci.com/api/v1.1', + changeOrigin: true, + logLevel: 'debug', + pathRewrite: { + '^/circleci/api/': '/', + }, + }, +}; module.exports = (/** @type {import('express').Application} */ app) => - Object.entries(proxySettings).forEach(([url, settings]) => + Object.entries(circleCIProxySettings).forEach(([url, settings]) => app.use(url, createProxyMiddleware(settings)), ); diff --git a/plugins/circleci/package.json b/plugins/circleci/package.json index cf5c5f93c4..12afc5e8ff 100644 --- a/plugins/circleci/package.json +++ b/plugins/circleci/package.json @@ -1,7 +1,8 @@ { "name": "@backstage/plugin-circleci", "version": "0.1.1-alpha.4", - "main": "dist/index.cjs.js", + "main": "dist/index.esm.js", + "module": "dist/index.esm.js", "types": "dist/index.d.ts", "license": "Apache-2.0", "private": true, diff --git a/plugins/circleci/src/components/CITable/CITable.tsx b/plugins/circleci/src/components/CITable/CITable.tsx index bd8be803a3..0e62083c7f 100644 --- a/plugins/circleci/src/components/CITable/CITable.tsx +++ b/plugins/circleci/src/components/CITable/CITable.tsx @@ -1,35 +1,27 @@ // Idea for this component to be somehow reusable representation of CI table view import React, { FC } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import { - Button, - Table, - TableBody, - TableCell, - TableHead, - TableContainer, - TableRow, - CircularProgress, -} from '@material-ui/core'; +// import { makeStyles } from '@material-ui/core/styles'; +import { Link, CircularProgress, Button } from '@material-ui/core'; import { Replay as RetryIcon } from '@material-ui/icons'; -import { Link } from 'react-router-dom'; +import { Link as RouterLink } from 'react-router-dom'; import { StatusFailed, StatusOK, StatusPending, StatusNA, + Table, } from '@backstage/core'; - -const useStyles = makeStyles({ - table: { - minWidth: 650, - }, - avatar: { - height: 32, - width: 32, - borderRadius: '50%', - }, -}); +import type { TableColumn } from '@backstage/core/src/components/Table'; +// const useStyles = makeStyles({ +// table: { +// minWidth: 650, +// }, +// avatar: { +// height: 32, +// width: 32, +// borderRadius: '50%', +// }, +// }); export type CITableBuildInfo = { id: string; @@ -54,7 +46,7 @@ export type CITableBuildInfo = { }; // :retried, :canceled, :infrastructure_fail, :timedout, :not_run, :running, :failed, :queued, :scheduled, :not_running, :no_tests, :fixed, :success -const getStatusComponent = (status: string) => { +const getStatusComponent = (status: string | undefined = '') => { switch (status.toLowerCase()) { case 'queued': case 'scheduled': @@ -71,63 +63,101 @@ const getStatusComponent = (status: string) => { } }; -export const CITableBuildRow: FC<{ build: CITableBuildInfo }> = ({ build }) => ( - - {build.id} - - {build.buildName} - - - {build.source.branchName} -
- {build.source.commit.hash} -
- {getStatusComponent(build.status)} - {build.tests && ( - - { - <> - {build.tests.passed}/{build.tests.total} ( - {build.tests.failed ? build.tests.failed + ', ' : ''} - {build.tests.skipped ? build.tests.skipped : ''}) - - } - - )} - - +// +//
+// ); + +// export const CITableBuildHeadRow:FC<{isTestDataAvailable: boolean}> = ({isTestDataAvailable}) => ( +// +// ID +// Build +// Source +// Status +// {isTestDataAvailable && Tests} +// Actions +// +// ); + +const generatedColumns: TableColumn[] = [ + { + title: 'ID', + field: 'id', + type: 'numeric', + }, + { + title: 'Build', + field: 'buildName', + highlight: true, + render: (row: Partial) => ( + + {row.buildName} + + ), + }, + { + title: 'Source', + render: (row: Partial) => ( + <> + {row.source?.branchName} +
+ {row.source?.commit.hash} + + ), + }, + { + title: 'Status', + render: (row: Partial) => ( + <> + {getStatusComponent(row.status)} {row.status} + + ), + }, + { + title: 'Actions', + render: (row: Partial) => ( + - - -); - -export const CITableBuildHeadRow:FC<{isTestDataAvailable: boolean}> = ({isTestDataAvailable}) => ( - - ID - Build - Source - Status - {isTestDataAvailable && Tests} - Actions - -); - + ), + }, +]; export const CITable: FC<{ builds: CITableBuildInfo[]; -}> = ({ builds }) => { - const classes = useStyles(); - const isTestDataAvailable = builds.some(build => build.tests); +}> = React.memo(({ builds = [] }) => { + // const classes = useStyles(); + // const isTestDataAvailable = builds.some(build => build.tests); return ( - - - - - {builds.map(build => ( - - ))} - -
-
+ ); -}; +}); diff --git a/plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx b/plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx index 92d4ca5ce2..abd4b2c363 100644 --- a/plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx +++ b/plugins/circleci/src/components/CircleCIFetch/CirleCIFetch.tsx @@ -51,7 +51,7 @@ const transform = ( buildsData: BuildSummary[], api: typeof circleCIApiRef.T, ): CITableBuildInfo[] => { - return buildsData.map(buildData => { + return buildsData.map((buildData) => { const tableBuildInfo: CITableBuildInfo = { id: String(buildData.build_num), buildName: buildData.subject diff --git a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx index 98e634d4c0..32939d2ebe 100644 --- a/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx +++ b/plugins/circleci/src/pages/BuildsPage/BuildsPage.tsx @@ -26,7 +26,7 @@ export const BuildsPage: FC<{}> = () => ( - + diff --git a/plugins/circleci/src/proxy.ts b/plugins/circleci/src/proxy.ts index 397b9b3c56..ec3b32621d 100644 --- a/plugins/circleci/src/proxy.ts +++ b/plugins/circleci/src/proxy.ts @@ -1,6 +1,4 @@ -import type {Options} from 'http-proxy-middleware'; - -export const proxySettings: Record = { +export const proxySettings = { '/circleci/api': { target: 'https://circleci.com/api/v1.1', changeOrigin: true,