tangled.org
Monorepo for Tangled
tangled.org
1{{ define "title" }}Pipelines · {{ .RepoInfo.FullName }} · Tangled{{ end }}
2
3{{ define "extrameta" }}
4 {{ $title := "Pipelines"}}
5 {{ $url := printf "https://tangled.org/%s/pipelines" .RepoInfo.FullName }}
6 {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
7{{ end }}
8
9{{ define "repoContent" }}
10 {{ $active := .FilterKind }}
11
12 {{ $all :=
13 (dict
14 "Key" "all"
15 "Value" "All"
16 "Icon" "package"
17 "Meta" "") }}
18 {{ $push :=
19 (dict
20 "Key" "push"
21 "Value" "Push"
22 "Icon" "git-commit-horizontal"
23 "Meta" "") }}
24 {{ $pr :=
25 (dict
26 "Key" "pull_request"
27 "Value" "Pull request"
28 "Icon" "git-pull-request"
29 "Meta" "") }}
30 {{ $values := list $all $push $pr }}
31
32 <div class="flex justify-between items-center gap-4">
33 <div>
34 {{ template "fragments/tabSelector" (dict "Name" "trigger" "Values" $values "Active" .FilterKind) }}
35 </div>
36 <div class="text-sm text-gray-600 dark:text-gray-400">
37 {{ .Total }} pipeline run{{ if ne .Total 1 }}s{{ end }}
38 </div>
39 </div>
40{{ end }}
41
42{{ define "repoAfter" }}
43{{ if .Pipelines }}
44 <div class="flex flex-col gap-2 mt-2">
45 {{ range .Pipelines }}
46 {{ template "pipelineCard" (dict "Root" $ "Pipeline" .) }}
47 {{ end }}
48 </div>
49{{ else }}
50 <div class="mt-2 py-12 flex flex-col items-center justify-center gap-6 text-center border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800">
51 <div class="flex justify-center">
52 {{ i "package" "size-16 text-gray-300 dark:text-gray-700" }}
53 </div>
54
55 <div class="flex flex-col gap-2">
56 <p class="text-lg font-semibold dark:text-white">
57 No pipelines have been run yet
58 </p>
59 <p class="text-sm text-gray-600 dark:text-gray-400 max-w-md">
60 Get started by configuring CI/CD for this repository
61 </p>
62 </div>
63
64 <div class="flex flex-col gap-3 text-left max-w-md">
65 <div class="flex items-start gap-3">
66 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">1</span>
67 <p class="text-sm text-gray-700 dark:text-gray-300">
68 Choose a spindle in your
69 <a href="/{{ .RepoInfo.FullName }}/settings?tab=pipelines" class="underline hover:no-underline">repository settings</a>
70 </p>
71 </div>
72 <div class="flex items-start gap-3">
73 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">2</span>
74 <p class="text-sm text-gray-700 dark:text-gray-300">
75 Configure your CI/CD
76 <a href="https://docs.tangled.org/spindles.html#pipelines" class="underline hover:no-underline" target="_blank" rel="noopener">pipeline</a>
77 </p>
78 </div>
79 <div class="flex items-start gap-3">
80 <span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">3</span>
81 <p class="text-sm text-gray-700 dark:text-gray-300">
82 Trigger a workflow with a push or pull request
83 </p>
84 </div>
85 </div>
86 </div>
87{{ end }}
88{{ end }}
89
90{{ define "pipelineCard" }}
91 {{ $root := .Root }}
92 {{ $p := .Pipeline }}
93 {{ with $p }}
94 <div class="relative rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800">
95 <div class="grid grid-cols-[1fr_auto] md:grid-cols-[1fr_auto_9rem_7rem] gap-3 md:gap-4 items-start md:items-center">
96 <!-- Trigger info -->
97 <div class="flex items-center gap-2 flex-wrap">
98 {{ $target := .Trigger.TargetRef }}
99 {{ $workflows := .Workflows }}
100 {{ $pullPath := "" }}
101 {{ if .Trigger.IsPullRequest }}{{ $pullPath = pipelinePullPath . }}{{ end }}
102
103 <!-- Status icon with tooltip -->
104 <span class="relative z-50 mr-4">
105 {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
106 </span>
107
108 {{ if .IsResponding }}
109 <a href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}" class="flex items-center gap-2 flex-wrap no-underline hover:underline">
110 {{ end }}
111 {{ if .Trigger.IsPush }}
112 {{ i "git-commit-horizontal" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
113 <span class="text-sm text-gray-600 dark:text-gray-400">Push to</span>
114 <span class="font-semibold dark:text-white">{{ $target }}</span>
115 {{ else if .Trigger.IsPullRequest }}
116 {{ i "git-pull-request" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
117 <span class="text-sm text-gray-600 dark:text-gray-400">Pull request</span>
118 <span class="font-semibold dark:text-white">{{ $target }}</span>
119 {{ i "arrow-left" "size-3 text-gray-500 dark:text-gray-400" }}
120 <span class="font-semibold dark:text-white">{{ pipelineSourceLabel . }}</span>
121 {{ else if .Trigger.IsManual }}
122 {{ i "circle-play" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
123 <span class="text-sm text-gray-600 dark:text-gray-400">Manual dispatch</span>
124 {{ end }}
125 {{ if .IsResponding }}
126 </a>
127 {{ end }}
128 {{ if $pullPath }}
129 <a href="{{ $pullPath }}" class="text-sm text-gray-500 dark:text-gray-400 no-underline hover:underline">(view PR)</a>
130 {{ end }}
131 </div>
132
133 <!-- Metadata stacked on mobile, separate columns on desktop -->
134 <div class="flex flex-col gap-2 items-end md:contents">
135 <!-- Commit SHA -->
136 <div class="font-mono text-xs text-gray-500 dark:text-gray-400">
137 {{ if .Sha }}
138 <a href="{{ pipelineCommitPath $root.RepoInfo . }}" class="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 no-underline hover:underline px-2 py-1 rounded">
139 {{ slice .Sha 0 8 }}
140 </a>
141 {{ end }}
142 </div>
143
144 <!-- Time -->
145 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
146 {{ template "repo/fragments/time" .Created }}
147 </div>
148
149 <!-- Duration -->
150 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
151 {{ $t := .TimeTaken }}
152 {{ if $t }}
153 <span class="flex items-center gap-1">
154 {{ i "clock" "size-3" }}
155 <time title="{{ $t }}">{{ $t | durationFmt }}</time>
156 </span>
157 {{ else }}
158 <span class="text-gray-400 dark:text-gray-600">--</span>
159 {{ end }}
160 </div>
161 </div>
162 </div>
163 </div>
164 {{ end }}
165{{ end }}