Monorepo for Tangled
1{{ define "title" }}pipelines · {{ .RepoInfo.FullName }}{{ 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
101 <!-- Status icon with tooltip -->
102 <span class="relative z-50 mr-4">
103 {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
104 </span>
105
106 {{ if .IsResponding }}
107 <a href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}" class="flex items-center gap-2 flex-wrap no-underline hover:underline">
108 {{ end }}
109 {{ if .Trigger.IsPush }}
110 {{ i "git-commit-horizontal" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
111 <span class="text-sm text-gray-600 dark:text-gray-400">Push to</span>
112 <span class="font-semibold dark:text-white">{{ $target }}</span>
113 {{ else if .Trigger.IsPullRequest }}
114 {{ i "git-pull-request" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
115 <span class="text-sm text-gray-600 dark:text-gray-400">Pull request</span>
116 <span class="font-semibold dark:text-white">{{ $target }}</span>
117 {{ i "arrow-left" "size-3 text-gray-500 dark:text-gray-400" }}
118 <span class="font-semibold dark:text-white">{{ .Trigger.PRSourceBranch }}</span>
119 {{ end }}
120 {{ if .IsResponding }}
121 </a>
122 {{ end }}
123 </div>
124
125 <!-- Metadata stacked on mobile, separate columns on desktop -->
126 <div class="flex flex-col gap-2 items-end md:contents">
127 <!-- Commit SHA -->
128 <div class="font-mono text-xs text-gray-500 dark:text-gray-400">
129 <a href="/{{ $root.RepoInfo.FullName }}/commit/{{ .Sha }}" class="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 no-underline hover:underline px-2 py-1 rounded">
130 {{ slice .Sha 0 8 }}
131 </a>
132 </div>
133
134 <!-- Time -->
135 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
136 {{ template "repo/fragments/time" .Created }}
137 </div>
138
139 <!-- Duration -->
140 <div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
141 {{ $t := .TimeTaken }}
142 {{ if $t }}
143 <span class="flex items-center gap-1">
144 {{ i "clock" "size-3" }}
145 <time title="{{ $t }}">{{ $t | durationFmt }}</time>
146 </span>
147 {{ else }}
148 <span class="text-gray-400 dark:text-gray-600">--</span>
149 {{ end }}
150 </div>
151 </div>
152 </div>
153 </div>
154 {{ end }}
155{{ end }}