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

Merge pull request #19951 from Abhay-soni-developer/feature/jenkins/multibranch-pipeline

Browse Source 
extended EntityJenkinsContent Table to support passing of columns as props
This commit is contained in:
Patrik Oldsberg
2023-10-10 11:18:46 +02:00
committed by GitHub
parent 683e85d791 c9abcfc1d3
commit 322fe4f42d
10 changed files with 368 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/spicy-poets-sell.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-jenkins': patch
---
Extend EntityJenkinsContent to receive columns as prop
plugins/jenkins/README.md
+28 -1
View File
@@ -5,7 +5,7 @@ Website: [https://jenkins.io/](https://jenkins.io/)
<img src="./src/assets/last-master-build.png" alt="Last master build"/>
<img src="./src/assets/folder-results.png" alt="Folder results"/>
<img src="./src/assets/build-details.png" alt="Build details"/>
<img src="./src/assets/dynamic-columns.png" alt="Modify Table Columns"/>
## Setup
1. If you have a standalone app (you didn't clone this repo), then do
@@ -97,3 +97,30 @@ spec:
- Only works with organization folder projects backed by GitHub
- No pagination support currently, limited to 50 projects - don't run this on a
Jenkins instance with lots of builds
## Modify Columns of EntityJenkinsContent
- now you can pass down column props to show the columns/metadata as per your use case.
```tsx
export const generatedColumns: TableColumn[] = [
{
title: 'Timestamp',
field: 'lastBuild.timestamp',
render: (row: Partial<Project>) => (
<>
<Typography paragraph>
{`
${new Date(row.lastBuild?.timestamp).toLocaleDateString()}
${new Date(row.lastBuild?.timestamp).toLocaleTimeString()}
`}
</Typography>
</>
),
},
]
// ...
<EntityJenkinsContent columns={generatedColumns}/>
// ...
```
plugins/jenkins/api-report.md
+25 -3
View File
@@ -15,9 +15,12 @@ import { InfoCardVariants } from '@backstage/core-components';
import { JSX as JSX_2 } from 'react';
import { default as React_2 } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
import { TableColumn } from '@backstage/core-components';
// @public (undocumented)
export const EntityJenkinsContent: () => JSX_2.Element;
export const EntityJenkinsContent: (props: {
columns?: TableColumn<Project>[] | undefined;
}) => JSX_2.Element;
// @public (undocumented)
export const EntityLatestJenkinsRunCard: (props: {
@@ -45,7 +48,6 @@ export interface JenkinsApi {
jobFullName: string;
buildNumber: string;
}): Promise<Build>;
// Warning: (ae-forgotten-export) The symbol "Project" needs to be exported by the entry point index.d.ts
getProjects(options: {
entity: CompoundEntityRef;
filter: {
@@ -117,8 +119,28 @@ export const LatestRunCard: (props: {
// @public (undocumented)
export const LEGACY_JENKINS_ANNOTATION = 'jenkins.io/github-folder';
// @public (undocumented)
export interface Project {
// (undocumented)
displayName: string;
// (undocumented)
fullDisplayName: string;
// (undocumented)
fullName: string;
// (undocumented)
inQueue: string;
// (undocumented)
lastBuild: Build;
// (undocumented)
onRestartClick: () => Promise<void>;
// (undocumented)
status: string;
}
// Warning: (ae-missing-release-tag) "Router" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const Router: () => React_2.JSX.Element;
export const Router: (props: {
columns?: TableColumn<Project>[];
}) => React_2.JSX.Element;
```
plugins/jenkins/src/api/JenkinsApi.ts
+1
View File
@@ -57,6 +57,7 @@ export interface Build {
status: string; // == building ? 'running' : result,
}
/** @public */
export interface Project {
// standard Jenkins
lastBuild: Build;
plugins/jenkins/src/api/index.ts
+1 -1
View File
@@ -16,4 +16,4 @@
export { JenkinsClient, jenkinsApiRef } from './JenkinsApi';
export type { JenkinsApi } from './JenkinsApi';
export type { JenkinsApi, Project } from './JenkinsApi';
plugins/jenkins/src/assets/dynamic-columns.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx
+20 -214
View File
@@ -13,222 +13,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Link, Progress, Table, TableColumn } from '@backstage/core-components';
import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';
import { Box, IconButton, Tooltip, Typography } from '@material-ui/core';
import { Table, TableColumn } from '@backstage/core-components';
import { Box, Typography } from '@material-ui/core';
import RetryIcon from '@material-ui/icons/Replay';
import VisibilityIcon from '@material-ui/icons/Visibility';
import { default as React, useState } from 'react';
import { default as React } from 'react';
import { Project } from '../../../../api/JenkinsApi';
import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
import { buildRouteRef } from '../../../../plugin';
import { useBuilds } from '../../../useBuilds';
import { JenkinsRunStatus } from '../Status';
import { jenkinsExecutePermission } from '@backstage/plugin-jenkins-common';
const FailCount = ({ count }: { count: number }): JSX.Element | null => {
if (count !== 0) {
return <>{count} failed</>;
}
return null;
};
const SkippedCount = ({ count }: { count: number }): JSX.Element | null => {
if (count !== 0) {
return <>{count} skipped</>;
}
return null;
};
const FailSkippedWidget = ({
skipped,
failed,
}: {
skipped: number;
failed: number;
}): JSX.Element | null => {
if (skipped === 0 && failed === 0) {
return null;
}
if (skipped !== 0 && failed !== 0) {
return (
<>
{' '}
(<FailCount count={failed} />, <SkippedCount count={skipped} />)
</>
);
}
if (failed !== 0) {
return (
<>
{' '}
(<FailCount count={failed} />)
</>
);
}
if (skipped !== 0) {
return (
<>
{' '}
(<SkippedCount count={skipped} />)
</>
);
}
return null;
};
const generatedColumns: TableColumn[] = [
{
title: 'Timestamp',
defaultSort: 'desc',
hidden: true,
field: 'lastBuild.timestamp',
},
{
title: 'Build',
field: 'fullName',
highlight: true,
render: (row: Partial<Project>) => {
const LinkWrapper = () => {
const routeLink = useRouteRef(buildRouteRef);
if (!row.fullName || !row.lastBuild?.number) {
return (
<>
{row.fullName ||
row.fullDisplayName ||
row.displayName ||
'Unknown'}
</>
);
}
return (
<Link
to={routeLink({
jobFullName: encodeURIComponent(row.fullName),
buildNumber: String(row.lastBuild?.number),
})}
>
{row.fullDisplayName}
</Link>
);
};
return <LinkWrapper />;
},
},
{
title: 'Source',
field: 'lastBuild.source.branchName',
render: (row: Partial<Project>) => (
<>
<Typography paragraph>
<Link to={row.lastBuild?.source?.url ?? ''}>
{row.lastBuild?.source?.branchName}
</Link>
</Typography>
<Typography paragraph>{row.lastBuild?.source?.commit?.hash}</Typography>
</>
),
},
{
title: 'Status',
field: 'status',
render: (row: Partial<Project>) => {
return (
<Box display="flex" alignItems="center">
<JenkinsRunStatus status={row.status} />
</Box>
);
},
},
{
title: 'Tests',
sorting: false,
render: (row: Partial<Project>) => {
return (
<>
<Typography paragraph>
{row.lastBuild?.tests && (
<Link to={row.lastBuild?.tests.testUrl ?? ''}>
{row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}
passed
<FailSkippedWidget
skipped={row.lastBuild?.tests.skipped}
failed={row.lastBuild?.tests.failed}
/>
</Link>
)}
{!row.lastBuild?.tests && 'n/a'}
</Typography>
</>
);
},
},
{
title: 'Actions',
sorting: false,
render: (row: Partial<Project>) => {
const ActionWrapper = () => {
const [isLoadingRebuild, setIsLoadingRebuild] = useState(false);
const { allowed, loading } = useEntityPermission(
jenkinsExecutePermission,
);
const alertApi = useApi(alertApiRef);
const onRebuild = async () => {
if (row.onRestartClick) {
setIsLoadingRebuild(true);
try {
await row.onRestartClick();
alertApi.post({
message: 'Jenkins re-build has successfully executed',
severity: 'success',
display: 'transient',
});
} catch (e) {
alertApi.post({
message: `Jenkins re-build has failed. Error: ${e.message}`,
severity: 'error',
});
} finally {
setIsLoadingRebuild(false);
}
}
};
return (
<div style={{ width: '98px' }}>
{row.lastBuild?.url && (
<Tooltip title="View build">
<IconButton href={row.lastBuild.url} target="_blank">
<VisibilityIcon />
</IconButton>
</Tooltip>
)}
{isLoadingRebuild && <Progress />}
{!isLoadingRebuild && (
<Tooltip title="Rerun build">
<IconButton onClick={onRebuild} disabled={loading || !allowed}>
<RetryIcon />
</IconButton>
</Tooltip>
)}
</div>
);
};
return <ActionWrapper />;
},
width: '10%',
},
];
import { columnFactories } from './columns';
import { defaultCITableColumns } from './presets';
type Props = {
loading: boolean;
@@ -239,6 +32,7 @@ type Props = {
total: number;
pageSize: number;
onChangePageSize: (pageSize: number) => void;
columns: TableColumn<Project>[];
};
export const CITableView = ({
@@ -249,6 +43,7 @@ export const CITableView = ({
projects,
onChangePage,
onChangePageSize,
columns,
total,
}: Props) => {
const projectsInPage = projects?.slice(
@@ -279,20 +74,31 @@ export const CITableView = ({
<Typography variant="h6">Projects</Typography>
</Box>
}
columns={generatedColumns}
columns={
columns && columns.length !== 0 ? columns : defaultCITableColumns
}
/>
);
};
export const CITable = () => {
type CITableProps = {
columns?: TableColumn<Project>[];
};
export const CITable = ({ columns }: CITableProps) => {
const [tableProps, { setPage, retry, setPageSize }] = useBuilds();
return (
<CITableView
{...tableProps}
columns={columns || ([] as TableColumn<Project>[])}
retry={retry}
onChangePageSize={setPageSize}
onChangePage={setPage}
/>
);
};
CITable.columns = columnFactories;
CITable.defaultCITableColumns = defaultCITableColumns;
plugins/jenkins/src/components/BuildsPage/lib/CITable/columns.tsx
+251
View File
@@ -0,0 +1,251 @@
/*
* Copyright 2020 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 { Link, Progress, TableColumn } from '@backstage/core-components';
import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';
import { Box, IconButton, Tooltip, Typography } from '@material-ui/core';
import RetryIcon from '@material-ui/icons/Replay';
import VisibilityIcon from '@material-ui/icons/Visibility';
import { default as React, useState } from 'react';
import { Project } from '../../../../api/JenkinsApi';
import { buildRouteRef } from '../../../../plugin';
import { JenkinsRunStatus } from '../Status';
import { jenkinsExecutePermission } from '@backstage/plugin-jenkins-common';
const FailCount = ({ count }: { count: number }): JSX.Element | null => {
if (count !== 0) {
return <>{count} failed</>;
}
return null;
};
const SkippedCount = ({ count }: { count: number }): JSX.Element | null => {
if (count !== 0) {
return <>{count} skipped</>;
}
return null;
};
const FailSkippedWidget = ({
skipped,
failed,
}: {
skipped: number;
failed: number;
}): JSX.Element | null => {
if (skipped === 0 && failed === 0) {
return null;
}
if (skipped !== 0 && failed !== 0) {
return (
<>
{' '}
(<FailCount count={failed} />, <SkippedCount count={skipped} />)
</>
);
}
if (failed !== 0) {
return (
<>
{' '}
(<FailCount count={failed} />)
</>
);
}
if (skipped !== 0) {
return (
<>
{' '}
(<SkippedCount count={skipped} />)
</>
);
}
return null;
};
export const columnFactories = Object.freeze({
createTimestampColumn(): TableColumn<Project> {
return {
title: 'Timestamp',
defaultSort: 'desc',
hidden: true,
field: 'lastBuild.timestamp',
};
},
createBuildColumn(): TableColumn<Project> {
return {
title: 'Build',
field: 'fullName',
highlight: true,
render: (row: Partial<Project>) => {
const LinkWrapper = () => {
const routeLink = useRouteRef(buildRouteRef);
if (!row.fullName || !row.lastBuild?.number) {
return (
<>
{row.fullName ||
row.fullDisplayName ||
row.displayName ||
'Unknown'}
</>
);
}
return (
<Link
to={routeLink({
jobFullName: encodeURIComponent(row.fullName),
buildNumber: String(row.lastBuild?.number),
})}
>
{row.fullDisplayName}
</Link>
);
};
return <LinkWrapper />;
},
};
},
createSourceColumn(): TableColumn<Project> {
return {
title: 'Source',
field: 'lastBuild.source.branchName',
render: (row: Partial<Project>) => (
<>
<Typography paragraph>
<Link to={row.lastBuild?.source?.url ?? ''}>
{row.lastBuild?.source?.branchName}
</Link>
</Typography>
<Typography paragraph>
{row.lastBuild?.source?.commit?.hash}
</Typography>
</>
),
};
},
createStatusColumn(): TableColumn<Project> {
return {
title: 'Status',
field: 'status',
render: (row: Partial<Project>) => {
return (
<Box display="flex" alignItems="center">
<JenkinsRunStatus status={row.status} />
</Box>
);
},
};
},
createTestColumn(): TableColumn<Project> {
return {
title: 'Tests',
sorting: false,
render: (row: Partial<Project>) => {
return (
<>
<Typography paragraph>
{row.lastBuild?.tests && (
<Link to={row.lastBuild?.tests.testUrl ?? ''}>
{row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}
passed
<FailSkippedWidget
skipped={row.lastBuild?.tests.skipped}
failed={row.lastBuild?.tests.failed}
/>
</Link>
)}
{!row.lastBuild?.tests && 'n/a'}
</Typography>
</>
);
},
};
},
createActionsColumn(): TableColumn<Project> {
return {
title: 'Actions',
sorting: false,
render: (row: Partial<Project>) => {
const ActionWrapper = () => {
const [isLoadingRebuild, setIsLoadingRebuild] = useState(false);
const { allowed, loading } = useEntityPermission(
jenkinsExecutePermission,
);
const alertApi = useApi(alertApiRef);
const onRebuild = async () => {
if (row.onRestartClick) {
setIsLoadingRebuild(true);
try {
await row.onRestartClick();
alertApi.post({
message: 'Jenkins re-build has successfully executed',
severity: 'success',
display: 'transient',
});
} catch (e) {
alertApi.post({
message: `Jenkins re-build has failed. Error: ${e.message}`,
severity: 'error',
});
} finally {
setIsLoadingRebuild(false);
}
}
};
return (
<div style={{ width: '98px' }}>
{row.lastBuild?.url && (
<Tooltip title="View build">
<IconButton href={row.lastBuild.url} target="_blank">
<VisibilityIcon />
</IconButton>
</Tooltip>
)}
{isLoadingRebuild && <Progress />}
{!isLoadingRebuild && (
<Tooltip title="Rerun build">
<IconButton
onClick={onRebuild}
disabled={loading || !allowed}
>
<RetryIcon />
</IconButton>
</Tooltip>
)}
</div>
);
};
return <ActionWrapper />;
},
width: '10%',
};
},
});
plugins/jenkins/src/components/BuildsPage/lib/CITable/presets.ts
+28
View File
@@ -0,0 +1,28 @@
/*
* Copyright 2021 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 { Project } from '../../../../api';
import { columnFactories } from './columns';
import { TableColumn } from '@backstage/core-components';
export const defaultCITableColumns: TableColumn<Project>[] = [
columnFactories.createTimestampColumn(),
columnFactories.createSourceColumn(),
columnFactories.createBuildColumn(),
columnFactories.createTestColumn(),
columnFactories.createStatusColumn(),
columnFactories.createActionsColumn(),
];
plugins/jenkins/src/components/Router.tsx
+9 -3
View File
@@ -15,7 +15,10 @@
*/
import { Entity } from '@backstage/catalog-model';
import { MissingAnnotationEmptyState } from '@backstage/core-components';
import {
MissingAnnotationEmptyState,
TableColumn,
} from '@backstage/core-components';
import { useEntity } from '@backstage/plugin-catalog-react';
import React from 'react';
import { Route, Routes } from 'react-router-dom';
@@ -23,22 +26,25 @@ import { JENKINS_ANNOTATION, LEGACY_JENKINS_ANNOTATION } from '../constants';
import { buildRouteRef } from '../plugin';
import { CITable } from './BuildsPage/lib/CITable';
import { DetailedViewPage } from './BuildWithStepsPage/';
import { Project } from '../api';
/** @public */
export const isJenkinsAvailable = (entity: Entity) =>
Boolean(entity.metadata.annotations?.[JENKINS_ANNOTATION]) ||
Boolean(entity.metadata.annotations?.[LEGACY_JENKINS_ANNOTATION]);
export const Router = () => {
export const Router = (props: { columns?: TableColumn<Project>[] }) => {
const { entity } = useEntity();
if (!isJenkinsAvailable(entity)) {
return <MissingAnnotationEmptyState annotation={JENKINS_ANNOTATION} />;
}
const columns = props.columns;
return (
<Routes>
<Route path="/" element={<CITable />} />
<Route path="/" element={<CITable columns={columns} />} />
<Route path={`/${buildRouteRef.path}`} element={<DetailedViewPage />} />
</Routes>
);