added icon in EntityJenkinsContent which when clicked will take you to JobRunsTable, with this approach we can support multiple jobs in this plugin in future.

Signed-off-by: Abhay-soni-developer <abhaysoni.developer@gmail.com>

packages/app/src/components/catalog/EntityPage.tsx

@@ -100,7 +100,6 @@ import {
   EntityJenkinsContent,
   EntityLatestJenkinsRunCard,
   isJenkinsAvailable,
-  EntityJobRunsTable,
 } from '@backstage/plugin-jenkins';
 import { EntityKafkaContent } from '@backstage/plugin-kafka';
 import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';
@@ -246,9 +245,6 @@ export const cicdContent = (
   <EntitySwitch>
     <EntitySwitch.Case if={isJenkinsAvailable}>
       <EntityJenkinsContent />
-      <hr />
-      <hr />
-      <EntityJobRunsTable />
     </EntitySwitch.Case>
 
     <EntitySwitch.Case if={isBuildkiteAvailable}>

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -19,10 +19,11 @@ 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 HistoryIcon from '@material-ui/icons/History';
 import { default as React, useState } from 'react';
 import { Project } from '../../../../api/JenkinsApi';
 import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
-import { buildRouteRef } from '../../../../plugin';
+import { buildRouteRef, jobRunsRouteRef } from '../../../../plugin';
 import { useBuilds } from '../../../useBuilds';
 import { JenkinsRunStatus } from '../Status';
 import { jenkinsExecutePermission } from '@backstage/plugin-jenkins-common';
@@ -182,6 +183,7 @@ const generatedColumns: TableColumn[] = [
         );
 
         const alertApi = useApi(alertApiRef);
+        const jobRunsLink = useRouteRef(jobRunsRouteRef);
 
         const onRebuild = async () => {
           if (row.onRestartClick) {
@@ -205,7 +207,7 @@ const generatedColumns: TableColumn[] = [
         };
 
         return (
-          <div style={{ width: '98px' }}>
+          <div style={{ width: '148px' }}>
             {row.lastBuild?.url && (
               <Tooltip title="View build">
                 <IconButton href={row.lastBuild.url} target="_blank">
@@ -221,6 +223,17 @@ const generatedColumns: TableColumn[] = [
                 </IconButton>
               </Tooltip>
             )}
+            <Link
+              to={jobRunsLink({
+                jobFullName: encodeURIComponent(row.fullName || ''),
+              })}
+            >
+              <Tooltip title="View Runs">
+                <IconButton>
+                  <HistoryIcon />
+                </IconButton>
+              </Tooltip>
+            </Link>
           </div>
         );
       };

plugins/jenkins/src/components/JobRunsTable/JobRunsTable.tsx

@@ -21,6 +21,8 @@ import { useJobRuns } from './../useJobRuns';
 import { Job, JobBuild } from './../../api/JenkinsApi';
 import { JenkinsRunStatus } from './../BuildsPage/lib/Status';
 import VisibilityIcon from '@material-ui/icons/Visibility';
+import { jobRunsRouteRef } from '../../plugin';
+import { useRouteRefParams } from '@backstage/core-plugin-api';
 
 const generatedColumns: TableColumn[] = [
   {
@@ -174,7 +176,8 @@ export const JobRunsTableView = ({
 };
 
 export const JobRunsTable = () => {
-  const [tableProps, { setPage, setPageSize }] = useJobRuns();
+  const { jobFullName } = useRouteRefParams(jobRunsRouteRef);
+  const [tableProps, { setPage, setPageSize }] = useJobRuns(jobFullName);
 
   return (
     <JobRunsTableView

plugins/jenkins/src/components/Router.tsx

@@ -20,9 +20,10 @@ import { useEntity } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { JENKINS_ANNOTATION, LEGACY_JENKINS_ANNOTATION } from '../constants';
-import { buildRouteRef } from '../plugin';
+import { buildRouteRef, jobRunsRouteRef } from '../plugin';
 import { CITable } from './BuildsPage/lib/CITable';
 import { DetailedViewPage } from './BuildWithStepsPage/';
+import { JobRunsTable } from './JobRunsTable';
 
 /** @public */
 export const isJenkinsAvailable = (entity: Entity) =>
@@ -39,6 +40,7 @@ export const Router = () => {
   return (
     <Routes>
       <Route path="/" element={<CITable />} />
+      <Route path={`/${jobRunsRouteRef.path}`} element={<JobRunsTable />} />
       <Route path={`/${buildRouteRef.path}`} element={<DetailedViewPage />} />
     </Routes>
   );

plugins/jenkins/src/components/useJobRuns.ts

@@ -19,14 +19,13 @@ import { jenkinsApiRef } from '../api';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { getCompoundEntityRef } from '@backstage/catalog-model';
-import { JENKINS_ANNOTATION, LEGACY_JENKINS_ANNOTATION } from '../constants';
 
 export enum ErrorType {
   CONNECTION_ERROR,
   NOT_FOUND,
 }
 
-export function useJobRuns() {
+export function useJobRuns(jobFullName: string) {
   const { entity } = useEntity();
   const api = useApi(jenkinsApiRef);
   const errorApi = useApi(errorApiRef);
@@ -40,11 +39,6 @@ export function useJobRuns() {
     errorType: ErrorType;
   }>();
 
-  const jobFullName =
-    entity.metadata.annotations?.[JENKINS_ANNOTATION] ||
-    entity.metadata.annotations?.[LEGACY_JENKINS_ANNOTATION] ||
-    '';
-
   const { loading, value: jobRuns } = useAsyncRetry(async () => {
     try {
       const jobBuilds = await api.getJobBuilds({

plugins/jenkins/src/index.ts

@@ -23,7 +23,6 @@
 export {
   jenkinsPlugin,
   jenkinsPlugin as plugin,
-  EntityJobRunsTable,
   EntityJenkinsContent,
   EntityLatestJenkinsRunCard,
 } from './plugin';

plugins/jenkins/src/plugin.ts

@@ -38,6 +38,13 @@ export const buildRouteRef = createSubRouteRef({
   parent: rootRouteRef,
 });
 
+/** @public */
+export const jobRunsRouteRef = createSubRouteRef({
+  id: 'jenkins/job/runs',
+  path: '/builds/:jobFullName/runs',
+  parent: rootRouteRef,
+});
+
 /** @public */
 export const jenkinsPlugin = createPlugin({
   id: 'jenkins',
@@ -72,13 +79,3 @@ export const EntityLatestJenkinsRunCard = jenkinsPlugin.provide(
     },
   }),
 );
-
-/** @public */
-export const EntityJobRunsTable = jenkinsPlugin.provide(
-  createComponentExtension({
-    name: 'EntityLatestJenkinsRunCard',
-    component: {
-      lazy: () => import('./components/JobRunsTable').then(m => m.JobRunsTable),
-    },
-  }),
-);