Add events tab in pipelinerun and taskrun details page

[karthikjeeyar]

Fixes: https://issues.redhat.com/browse/ODC-4802

Description:
Add Events tab to the pipelinerun details page and in taskrun details page.

Screenshots:
PipelineRun Details page:

TaskRun Details page:

Test cases:
Taskrun details page

Pipelinerun details page

PipelienRun Events

TaskRun Events

event-utils:

/kind feature
cc: @andrewballantyne @siamaksade @openshift/team-devconsole-ux

[bgliwa01]

lgtm

[debsmita1]

it works fine now
/lgtm

[karthikjeeyar]

/assign @andrewballantyne

[karthikjeeyar]

Rebased and pushed due to conflicts from debsmita's PR.

[invincibleJai]

nit : as wrapper is not changing, shall we have it in beforeEach block

[invincibleJai]

nit:

Suggested change

	const PipelineRunEvents: React.FC<PipelineRunEventsProps> = ({ obj: pipelineRun, ...props }) => {
	const { match } = props;
	const namespace = match.params.ns;
	return (
	<ResourcesEventStream
	filters={usePipelineRunFilters(namespace, pipelineRun)}
	namespace={namespace}
	/>
	);
	};
	const PipelineRunEvents: React.FC<PipelineRunEventsProps> = ({ obj: pipelineRun, match: { params }}) => (
	<ResourcesEventStream
	filters={usePipelineRunFilters(namespace, pipelineRun)}
	namespace={params.ns}
	/>
	)

[invincibleJai]

instead of having 2 separate hooks usePipelineRunRelatedResources , usePipelineRunFilters can we have

const plrRelatedResources: WatchK8sResources<ResourcesType> = React.useMemo(() => {
    return {
      taskruns: {
        kind: referenceForModel(TaskRunModel),
        namespace,
        selector: {
          matchLabels: { [TektonResourceLabel.pipelinerun]: pipelineRunName },
        },
        isList: true,
        optional: true,
      },
      pods: getPodsByLabels(namespace, { [TektonResourceLabel.pipelinerun]: pipelineRunName }),
    };
  }, [namespace, pipelineRunName])

and use useK8sWatchResources<ResourcesType>(plrRelatedResources); in hook usePipelineRunFilters

[karthikjeeyar]

The Reason I decoupled this usePipelineRunRelatedResources hook from usePipelineRunFilters is, the usePipelineRunFilters returns an array filter functions specific to the ResourcesEventStream component. So, later if we need the taskRuns and Pods associated to a pipelineRun for some other usecase, then we call this common hook usePipelineRunRelatedResources.

[invincibleJai]

nit:

Suggested change

	const TaskRunEvents: React.FC<TaskRunEventsProps> = ({ obj: taskRun, ...props }) => {
	const { match } = props;
	const namespace = match.params.ns;
	return (
	<ResourcesEventStream filters={useTaskRunFilters(namespace, taskRun)} namespace={namespace} />
	);
	};
	const TaskRunEvents: React.FC<TaskRunEventsProps> = ({ obj: taskRun, match: { params }) => (
	<ResourcesEventStream filters={useTaskRunFilters(params.ns, taskRun)} namespace={params.ns} />
	);

[invincibleJai]

/lgtm
/approve

Verified the changes , looks good

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: bgliwa01, debsmita1, invincibleJai, karthikjeeyar

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/packages/dev-console/OWNERS [invincibleJai]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment