tekton_dashboard_pipelinerun_visualization_component_quickstart.ts

1import React from 'react';
2import { PipelineRun } from '@tektoncd/dashboard-components';
3
4// Mock data representing a Tekton PipelineRun resource
5const pipelineRunData = {
6  metadata: {
7    name: 'example-pipelinerun',
8    namespace: 'default',
9  },
10  status: {
11    conditions: [
12      {
13        type: 'Succeeded',
14        status: 'True',
15        reason: 'Completed',
16      },
17    ],
18    taskRuns: {
19      'task-run-1': {
20        pipelineTaskName: 'fetch-repository',
21        status: {
22          conditions: [{ type: 'Succeeded', status: 'True' }],
23        },
24      },
25    },
26  },
27};
28
29const QuickstartApp: React.FC = () => {
30  return (
31    <div style={{ padding: '20px' }}>
32      <h1>Tekton PipelineRun Status</h1>
33      {/* 
34        The PipelineRun component provides a visual representation 
35        of the status and steps of a Tekton PipelineRun.
36      */}
37      <PipelineRun
38        pipelineRun={pipelineRunData}
39        view="graph" // Options usually include 'tree' or 'graph'
40      />
41    </div>
42  );
43};
44
45export default QuickstartApp;