From f1ff8fb8069d5a55dd280791b747e0622b07cf41 Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sat, 1 Jan 2022 14:05:23 +0100
Subject: [PATCH 1/8] show yml config of build in UI

---
 server/api/build.go                           |  24 +++
 server/router/api.go                          |   1 +
 web/src/components/repo/build/BuildProcs.vue  |   2 +-
 web/src/lib/api/index.ts                      |  19 +-
 web/src/lib/api/types/buildConfig.ts          |   6 +
 web/src/lib/api/types/index.ts                |   1 +
 web/src/router.ts                             |  19 +-
 web/src/views/repo/build/Build.vue            | 113 +++++++++++
 web/src/views/repo/build/BuildConfig.vue      |  59 ++++++
 .../{RepoBuild.vue => build/BuildWrapper.vue} | 175 ++++++++----------
 10 files changed, 315 insertions(+), 104 deletions(-)
 create mode 100644 web/src/lib/api/types/buildConfig.ts
 create mode 100644 web/src/views/repo/build/Build.vue
 create mode 100644 web/src/views/repo/build/BuildConfig.vue
 rename web/src/views/repo/{RepoBuild.vue => build/BuildWrapper.vue} (58%)

diff --git a/server/api/build.go b/server/api/build.go
index 082005a782..ed6a744e88 100644
--- a/server/api/build.go
+++ b/server/api/build.go
@@ -180,6 +180,30 @@ func GetProcLogs(c *gin.Context) {
 	}
 }
 
+func GetBuildConfig(c *gin.Context) {
+	_store := store.FromContext(c)
+	repo := session.Repo(c)
+	num, err := strconv.ParseInt(c.Param("number"), 10, 64)
+	if err != nil {
+		_ = c.AbortWithError(http.StatusBadRequest, err)
+		return
+	}
+
+	build, err := _store.GetBuildNumber(repo, num)
+	if err != nil {
+		_ = c.AbortWithError(http.StatusInternalServerError, err)
+		return
+	}
+
+	configs, err := server.Config.Storage.Config.ConfigsForBuild(build.ID)
+	if err != nil {
+		c.String(http.StatusInternalServerError, err.Error())
+		return
+	}
+
+	c.JSON(http.StatusOK, configs)
+}
+
 // DeleteBuild cancels a build
 func DeleteBuild(c *gin.Context) {
 	_store := store.FromContext(c)
diff --git a/server/router/api.go b/server/router/api.go
index e88c0a551d..a41500cfed 100644
--- a/server/router/api.go
+++ b/server/router/api.go
@@ -61,6 +61,7 @@ func apiRoutes(e *gin.Engine) {
 
 			repo.GET("/builds", api.GetBuilds)
 			repo.GET("/builds/:number", api.GetBuild)
+			repo.GET("/builds/:number/config", api.GetBuildConfig)
 
 			// requires push permissions
 			repo.POST("/builds/:number", session.MustPush, api.PostBuild)
diff --git a/web/src/components/repo/build/BuildProcs.vue b/web/src/components/repo/build/BuildProcs.vue
index cd1fb22daa..8d3e54806f 100644
--- a/web/src/components/repo/build/BuildProcs.vue
+++ b/web/src/components/repo/build/BuildProcs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mt-4 w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
+  <div class="flex w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
     <div v-if="build.error" class="flex flex-col p-4">
       <span class="text-red-400 font-bold text-xl mb-2">Execution error</span>
       <span class="text-red-400">{{ build.error }}</span>
diff --git a/web/src/lib/api/index.ts b/web/src/lib/api/index.ts
index 164edf22ee..42b0e3c6af 100644
--- a/web/src/lib/api/index.ts
+++ b/web/src/lib/api/index.ts
@@ -1,5 +1,16 @@
 import ApiClient, { encodeQueryString } from './client';
-import { Build, BuildFeed, BuildLog, BuildProc, Registry, Repo, RepoPermissions, RepoSettings, Secret } from './types';
+import {
+  Build,
+  BuildConfig,
+  BuildFeed,
+  BuildLog,
+  BuildProc,
+  Registry,
+  Repo,
+  RepoPermissions,
+  RepoSettings,
+  Secret,
+} from './types';
 
 type RepoListOptions = {
   all?: boolean;
@@ -45,10 +56,14 @@ export default class WoodpeckerClient extends ApiClient {
     return this._get(`/api/repos/${owner}/${repo}/builds?${query}`) as Promise<Build[]>;
   }
 
-  getBuild(owner: string, repo: string, number: string | 'latest'): Promise<Build> {
+  getBuild(owner: string, repo: string, number: number | 'latest'): Promise<Build> {
     return this._get(`/api/repos/${owner}/${repo}/builds/${number}`) as Promise<Build>;
   }
 
+  getBuildConfig(owner: string, repo: string, number: number): Promise<BuildConfig[]> {
+    return this._get(`/api/repos/${owner}/${repo}/builds/${number}/config`) as Promise<BuildConfig[]>;
+  }
+
   getBuildFeed(opts?: Record<string, string | number | boolean>): Promise<BuildFeed[]> {
     const query = encodeQueryString(opts);
     return this._get(`/api/user/feed?${query}`) as Promise<BuildFeed[]>;
diff --git a/web/src/lib/api/types/buildConfig.ts b/web/src/lib/api/types/buildConfig.ts
new file mode 100644
index 0000000000..496caba793
--- /dev/null
+++ b/web/src/lib/api/types/buildConfig.ts
@@ -0,0 +1,6 @@
+// A config for a build.
+export type BuildConfig = {
+  hash: string;
+  name: string;
+  data: string;
+};
diff --git a/web/src/lib/api/types/index.ts b/web/src/lib/api/types/index.ts
index 54347095e7..231da28fd1 100644
--- a/web/src/lib/api/types/index.ts
+++ b/web/src/lib/api/types/index.ts
@@ -1,4 +1,5 @@
 export * from './build';
+export * from './buildConfig';
 export * from './registry';
 export * from './repo';
 export * from './secret';
diff --git a/web/src/router.ts b/web/src/router.ts
index 9f7315ce00..cf866b64ca 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -48,10 +48,23 @@ const routes: RouteRecordRaw[] = [
         props: (route) => ({ branch: route.params.branch }),
       },
       {
-        path: 'build/:buildId/:procId?',
-        name: 'repo-build',
-        component: (): Component => import('~/views/repo/RepoBuild.vue'),
+        path: 'build/:buildId',
+        component: (): Component => import('~/views/repo/build/BuildWrapper.vue'),
         props: true,
+        children: [
+          {
+            path: ':procId?',
+            name: 'repo-build',
+            component: (): Component => import('~/views/repo/build/Build.vue'),
+            props: true,
+          },
+          {
+            path: 'config',
+            name: 'repo-build-config',
+            component: (): Component => import('~/views/repo/build/BuildConfig.vue'),
+            props: true,
+          },
+        ],
       },
       {
         path: 'settings',
diff --git a/web/src/views/repo/build/Build.vue b/web/src/views/repo/build/Build.vue
new file mode 100644
index 0000000000..c35f96369e
--- /dev/null
+++ b/web/src/views/repo/build/Build.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="p-0 flex flex-col flex-grow">
+    <div v-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
+      <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
+      <p class="text-xl text-gray-500">This pipeline is awaiting approval by some maintainer!</p>
+      <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
+        <Button color="green" text="Approve" :is-loading="isApprovingBuild" @click="approveBuild" />
+        <Button color="red" text="Decline" :is-loading="isDecliningBuild" @click="declineBuild" />
+      </div>
+    </div>
+    <div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
+      <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
+      <p class="text-xl text-gray-500">This pipeline has been declined!</p>
+    </div>
+    <BuildProcs v-else v-model:selected-proc-id="selectedProcId" :build="build" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType, Ref, toRef } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import Button from '~/components/atomic/Button.vue';
+import Icon from '~/components/atomic/Icon.vue';
+import BuildProcs from '~/components/repo/build/BuildProcs.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { Build, Repo, RepoPermissions } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'Build',
+
+  components: {
+    Button,
+    BuildProcs,
+    Icon,
+  },
+
+  props: {
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    procId: {
+      type: String as PropType<string | null>,
+      default: null,
+    },
+  },
+
+  setup(props) {
+    const apiClient = useApiClient();
+    const router = useRouter();
+    const route = useRoute();
+    const notifications = useNotifications();
+
+    const build = inject<Ref<Build>>('build');
+    const repo = inject<Ref<Repo>>('repo');
+    const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
+    if (!repo || !repoPermissions || !build) {
+      throw new Error('Unexpected: "repo", "repoPermissions" & "build" should be provided at this place');
+    }
+
+    const procId = toRef(props, 'procId');
+    const selectedProcId = computed({
+      get() {
+        if (procId.value) {
+          return parseInt(procId.value, 10);
+        }
+
+        if (!build.value || !build.value.procs || !build.value.procs[0].children) {
+          return null;
+        }
+
+        return build.value.procs[0].children[0].pid;
+      },
+      set(_selectedProcId: number | null) {
+        if (!_selectedProcId) {
+          return;
+        }
+
+        router.replace({ params: { ...route.params, procId: `${_selectedProcId}` } });
+      },
+    });
+
+    const { doSubmit: approveBuild, isLoading: isApprovingBuild } = useAsyncAction(async () => {
+      if (!repo) {
+        throw new Error('Unexpected: Repo is undefined');
+      }
+
+      await apiClient.approveBuild(repo.value.owner, repo.value.name, `${build.value.id}`);
+      notifications.notify({ title: 'Pipeline approved', type: 'success' });
+    });
+
+    const { doSubmit: declineBuild, isLoading: isDecliningBuild } = useAsyncAction(async () => {
+      if (!repo) {
+        throw new Error('Unexpected: Repo is undefined');
+      }
+
+      await apiClient.declineBuild(repo.value.owner, repo.value.name, `${build.value.id}`);
+      notifications.notify({ title: 'Pipeline declined', type: 'success' });
+    });
+
+    return {
+      repoPermissions,
+      selectedProcId,
+      build,
+      isApprovingBuild,
+      isDecliningBuild,
+      approveBuild,
+      declineBuild,
+    };
+  },
+});
+</script>
diff --git a/web/src/views/repo/build/BuildConfig.vue b/web/src/views/repo/build/BuildConfig.vue
new file mode 100644
index 0000000000..ceef71dd49
--- /dev/null
+++ b/web/src/views/repo/build/BuildConfig.vue
@@ -0,0 +1,59 @@
+<template>
+  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0">
+    <div v-for="buildConfig in buildConfigs" :key="buildConfig.hash" class="w-full">
+      <div class="font-bold">{{ buildConfig.name }}</div>
+      <div class="w-full bg-gray-400 dark:bg-dark-gray-700 rounded-md p-2 font-mono whitespace-pre">
+        {{ buildConfig.data }}
+      </div>
+    </div>
+  </FluidContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
+
+import FluidContainer from '~/components/layout/FluidContainer.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { Build, BuildConfig, Repo } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'BuildConfig',
+
+  components: {
+    FluidContainer,
+  },
+
+  setup() {
+    const build = inject<Ref<Build>>('build');
+    const apiClient = useApiClient();
+    const repo = inject<Ref<Repo>>('repo');
+    if (!repo || !build) {
+      throw new Error('Unexpected: "repo" & "build" should be provided at this place');
+    }
+
+    const buildConfigs = ref<BuildConfig[]>();
+    async function loadBuildConfig() {
+      if (!repo || !build) {
+        throw new Error('Unexpected: "repo" & "build" should be provided at this place');
+      }
+
+      buildConfigs.value = (await apiClient.getBuildConfig(repo.value.owner, repo.value.name, build.value.number)).map(
+        (i) => ({
+          ...i,
+          data: atob(i.data),
+        }),
+      );
+    }
+
+    onMounted(() => {
+      loadBuildConfig();
+    });
+
+    watch(build, () => {
+      loadBuildConfig();
+    });
+
+    return { buildConfigs };
+  },
+});
+</script>
diff --git a/web/src/views/repo/RepoBuild.vue b/web/src/views/repo/build/BuildWrapper.vue
similarity index 58%
rename from web/src/views/repo/RepoBuild.vue
rename to web/src/views/repo/build/BuildWrapper.vue
index 617f7217a2..b89d18d881 100644
--- a/web/src/views/repo/RepoBuild.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@@ -1,31 +1,31 @@
 <template>
   <template v-if="build && repo">
-    <FluidContainer class="flex border-b mb-4 items-center dark:border-gray-600 min-w-0">
-      <IconButton icon="back" class="flex-shrink-0" @click="goBack" />
-      <h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
-        Pipeline #{{ buildId }} - {{ message }}
-      </h1>
-      <BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
-      <template v-if="repoPermissions.push">
-        <Button
-          v-if="build.status === 'pending' || build.status === 'running'"
-          class="ml-4 flex-shrink-0"
-          text="Cancel"
-          :is-loading="isCancelingBuild"
-          @click="cancelBuild"
-        />
-        <Button
-          v-else-if="build.status !== 'blocked' && build.status !== 'declined'"
-          class="ml-4 flex-shrink-0"
-          text="Restart"
-          :is-loading="isRestartingBuild"
-          @click="restartBuild"
-        />
-      </template>
-    </FluidContainer>
+    <FluidContainer class="flex flex-col min-w-0">
+      <div class="flex border-b pb-4 items-center dark:border-gray-600">
+        <IconButton icon="back" class="flex-shrink-0" @click="goBack" />
+        <h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
+          Pipeline #{{ buildId }} - {{ message }}
+        </h1>
+        <BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
+        <template v-if="repoPermissions.push">
+          <Button
+            v-if="build.status === 'pending' || build.status === 'running'"
+            class="ml-4 flex-shrink-0"
+            text="Cancel"
+            :is-loading="isCancelingBuild"
+            @click="cancelBuild"
+          />
+          <Button
+            v-else-if="build.status !== 'blocked' && build.status !== 'declined'"
+            class="ml-4 flex-shrink-0"
+            text="Restart"
+            :is-loading="isRestartingBuild"
+            @click="restartBuild"
+          />
+        </template>
+      </div>
 
-    <div class="p-0 flex flex-col flex-grow">
-      <FluidContainer class="flex text-gray-500 justify-between py-0">
+      <div class="flex text-gray-500 justify-between px-2 py-4">
         <div class="flex space-x-2 items-center">
           <div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
           <span>{{ build.author }}</span>
@@ -53,35 +53,39 @@
           <Icon name="duration" />
           <span>{{ duration }}</span>
         </div>
-      </FluidContainer>
-
-      <div v-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
-        <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-        <p class="text-xl text-gray-500">This pipeline is awaiting approval by some maintainer!</p>
-        <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
-          <Button color="green" text="Approve" :is-loading="isApprovingBuild" @click="approveBuild" />
-          <Button color="red" text="Decline" :is-loading="isDecliningBuild" @click="declineBuild" />
-        </div>
-      </div>
-      <div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-        <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
-        <p class="text-xl text-gray-500">This pipeline has been declined!</p>
       </div>
-      <BuildProcs v-else v-model:selected-proc-id="selectedProcId" :build="build" />
-    </div>
+
+      <Tabs v-model="activeTab" disable-hash-mode>
+        <Tab title="Logs" />
+        <Tab title="Config" />
+      </Tabs>
+    </FluidContainer>
+
+    <router-view />
   </template>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onBeforeUnmount, onMounted, PropType, Ref, toRef, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  provide,
+  Ref,
+  toRef,
+  watch,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
-import Icon from '~/components/atomic/Icon.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import FluidContainer from '~/components/layout/FluidContainer.vue';
-import BuildProcs from '~/components/repo/build/BuildProcs.vue';
 import BuildStatusIcon from '~/components/repo/build/BuildStatusIcon.vue';
+import Tab from '~/components/tabs/Tab.vue';
+import Tabs from '~/components/tabs/Tabs.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useBuild from '~/compositions/useBuild';
@@ -90,18 +94,17 @@ import useNotifications from '~/compositions/useNotifications';
 import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
 import { Repo, RepoPermissions } from '~/lib/api/types';
 import BuildStore from '~/store/builds';
-import { findProc } from '~/utils/helpers';
 
 export default defineComponent({
-  name: 'RepoBuild',
+  name: 'BuildWrapper',
 
   components: {
     FluidContainer,
     Button,
     BuildStatusIcon,
-    BuildProcs,
     IconButton,
-    Icon,
+    Tabs,
+    Tab,
   },
 
   props: {
@@ -150,28 +153,10 @@ export default defineComponent({
     }
 
     const build = buildStore.getBuild(repoOwner, repoName, buildId);
-    const { since, duration, message } = useBuild(build);
-    const procId = toRef(props, 'procId');
-    const selectedProcId = computed({
-      get() {
-        if (procId.value) {
-          return parseInt(procId.value, 10);
-        }
+    const { since, duration } = useBuild(build);
+    provide('build', build);
 
-        if (!build.value || !build.value.procs || !build.value.procs[0].children) {
-          return null;
-        }
-
-        return build.value.procs[0].children[0].pid;
-      },
-      set(_selectedProcId: number | null) {
-        if (!_selectedProcId) {
-          return;
-        }
-
-        router.replace({ params: { ...route.params, procId: `${_selectedProcId}` } });
-      },
-    });
+    const { message } = useBuild(build);
 
     async function loadBuild(): Promise<void> {
       if (!repo) {
@@ -193,34 +178,16 @@ export default defineComponent({
       }
 
       // TODO: is selectedProcId right?
-      const proc = findProc(build.value.procs, selectedProcId.value || 2);
+      // const proc = findProc(build.value.procs, selectedProcId.value || 2);
 
-      if (!proc) {
-        throw new Error('Unexpected: Proc not found');
-      }
+      // if (!proc) {
+      //   throw new Error('Unexpected: Proc not found');
+      // }
 
-      await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), proc.ppid);
+      await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), 0);
       notifications.notify({ title: 'Pipeline canceled', type: 'success' });
     });
 
-    const { doSubmit: approveBuild, isLoading: isApprovingBuild } = useAsyncAction(async () => {
-      if (!repo) {
-        throw new Error('Unexpected: Repo is undefined');
-      }
-
-      await apiClient.approveBuild(repo.value.owner, repo.value.name, buildId.value);
-      notifications.notify({ title: 'Pipeline approved', type: 'success' });
-    });
-
-    const { doSubmit: declineBuild, isLoading: isDecliningBuild } = useAsyncAction(async () => {
-      if (!repo) {
-        throw new Error('Unexpected: Repo is undefined');
-      }
-
-      await apiClient.declineBuild(repo.value.owner, repo.value.name, buildId.value);
-      notifications.notify({ title: 'Pipeline declined', type: 'success' });
-    });
-
     const { doSubmit: restartBuild, isLoading: isRestartingBuild } = useAsyncAction(async () => {
       if (!repo) {
         throw new Error('Unexpected: Repo is undefined');
@@ -238,22 +205,34 @@ export default defineComponent({
       favicon.updateStatus('default');
     });
 
+    const activeTab = computed({
+      get() {
+        if (route.name === 'repo-build') {
+          return 'logs';
+        }
+        return 'config';
+      },
+      set(tab: string) {
+        if (tab === 'config') {
+          router.replace({ name: 'repo-build-config' });
+        } else {
+          router.replace({ name: 'repo-build' });
+        }
+      },
+    });
+
     return {
       repoPermissions,
-      selectedProcId,
       build,
-      since,
-      duration,
       repo,
       message,
       isCancelingBuild,
-      isApprovingBuild,
-      isDecliningBuild,
       isRestartingBuild,
+      activeTab,
+      since,
+      duration,
       cancelBuild,
       restartBuild,
-      approveBuild,
-      declineBuild,
       goBack: useRouteBackOrDefault({ name: 'repo' }),
     };
   },

From d6c9141be18757e6ff82972c26cf5873f65748cd Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sat, 8 Jan 2022 23:52:32 +0100
Subject: [PATCH 2/8] fix after merge

---
 server/api/build.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/build.go b/server/api/build.go
index 3650a096dc..4d16aa5072 100644
--- a/server/api/build.go
+++ b/server/api/build.go
@@ -195,7 +195,7 @@ func GetBuildConfig(c *gin.Context) {
 		return
 	}
 
-	configs, err := server.Config.Storage.Config.ConfigsForBuild(build.ID)
+	configs, err := _store.ConfigsForBuild(build.ID)
 	if err != nil {
 		c.String(http.StatusInternalServerError, err.Error())
 		return

From 4893022ed87503738682451089a485cbcda29d0d Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 00:08:26 +0100
Subject: [PATCH 3/8] improve build configs

---
 web/src/components/atomic/CodeViewer.vue | 28 ++++++++++++++++++++++++
 web/src/views/repo/build/BuildConfig.vue | 16 ++++++++------
 2 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 web/src/components/atomic/CodeViewer.vue

diff --git a/web/src/components/atomic/CodeViewer.vue b/web/src/components/atomic/CodeViewer.vue
new file mode 100644
index 0000000000..d51fd0ff72
--- /dev/null
+++ b/web/src/components/atomic/CodeViewer.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="w-full rounded-md overflow-hidden">
+    <div class="font-bold bg-gray-400 dark:bg-dark-gray-800 p-2">{{ name }}</div>
+    <div class="w-full p-2 font-mono whitespace-pre bg-gray-300 dark:bg-dark-gray-700">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'CodeViewer',
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+});
+</script>
diff --git a/web/src/views/repo/build/BuildConfig.vue b/web/src/views/repo/build/BuildConfig.vue
index ceef71dd49..ad282a7161 100644
--- a/web/src/views/repo/build/BuildConfig.vue
+++ b/web/src/views/repo/build/BuildConfig.vue
@@ -1,17 +1,18 @@
 <template>
-  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between py-0">
-    <div v-for="buildConfig in buildConfigs" :key="buildConfig.hash" class="w-full">
-      <div class="font-bold">{{ buildConfig.name }}</div>
-      <div class="w-full bg-gray-400 dark:bg-dark-gray-700 rounded-md p-2 font-mono whitespace-pre">
-        {{ buildConfig.data }}
-      </div>
-    </div>
+  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !py-0">
+    <CodeViewer
+      v-for="buildConfig in buildConfigs"
+      :key="buildConfig.hash"
+      :name="buildConfig.name"
+      :text="buildConfig.data"
+    />
   </FluidContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
 
+import CodeViewer from '~/components/atomic/CodeViewer.vue';
 import FluidContainer from '~/components/layout/FluidContainer.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { Build, BuildConfig, Repo } from '~/lib/api/types';
@@ -21,6 +22,7 @@ export default defineComponent({
 
   components: {
     FluidContainer,
+    CodeViewer,
   },
 
   setup() {

From 91223504824d0e6f1eed7c9d807fbef0b10fe96e Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 00:08:44 +0100
Subject: [PATCH 4/8] fix approve & decline build

---
 web/src/views/repo/build/Build.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/repo/build/Build.vue b/web/src/views/repo/build/Build.vue
index c35f96369e..8042087631 100644
--- a/web/src/views/repo/build/Build.vue
+++ b/web/src/views/repo/build/Build.vue
@@ -86,7 +86,7 @@ export default defineComponent({
         throw new Error('Unexpected: Repo is undefined');
       }
 
-      await apiClient.approveBuild(repo.value.owner, repo.value.name, `${build.value.id}`);
+      await apiClient.approveBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
       notifications.notify({ title: 'Pipeline approved', type: 'success' });
     });
 
@@ -95,7 +95,7 @@ export default defineComponent({
         throw new Error('Unexpected: Repo is undefined');
       }
 
-      await apiClient.declineBuild(repo.value.owner, repo.value.name, `${build.value.id}`);
+      await apiClient.declineBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
       notifications.notify({ title: 'Pipeline declined', type: 'success' });
     });
 

From 9a64b7fe4cef6acfd6718bbe15ad7d556ce69b96 Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 01:17:20 +0100
Subject: [PATCH 5/8] improve build layout

---
 web/src/components/atomic/CodeViewer.vue      |  28 -----
 .../components/build-feed/BuildFeedItem.vue   |   8 +-
 web/src/components/layout/Panel.vue           |  14 ++-
 .../build/{BuildLogs.vue => BuildLog.vue}     |   2 +-
 .../components/repo/build/BuildProcList.vue   | 112 ++++++++++++++++++
 web/src/components/repo/build/BuildProcs.vue  |  89 --------------
 web/src/components/tabs/Tab.vue               |   2 +-
 web/src/components/tabs/Tabs.vue              |   2 +-
 web/src/compositions/useBuild.ts              |   6 +-
 web/src/views/repo/RepoWrapper.vue            |   2 +-
 web/src/views/repo/build/Build.vue            |  18 ++-
 web/src/views/repo/build/BuildConfig.vue      |  13 +-
 web/src/views/repo/build/BuildWrapper.vue     |  70 +++++------
 13 files changed, 181 insertions(+), 185 deletions(-)
 delete mode 100644 web/src/components/atomic/CodeViewer.vue
 rename web/src/components/repo/build/{BuildLogs.vue => BuildLog.vue} (99%)
 create mode 100644 web/src/components/repo/build/BuildProcList.vue
 delete mode 100644 web/src/components/repo/build/BuildProcs.vue

diff --git a/web/src/components/atomic/CodeViewer.vue b/web/src/components/atomic/CodeViewer.vue
deleted file mode 100644
index d51fd0ff72..0000000000
--- a/web/src/components/atomic/CodeViewer.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="w-full rounded-md overflow-hidden">
-    <div class="font-bold bg-gray-400 dark:bg-dark-gray-800 p-2">{{ name }}</div>
-    <div class="w-full p-2 font-mono whitespace-pre bg-gray-300 dark:bg-dark-gray-700">
-      {{ text }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'CodeViewer',
-
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-});
-</script>
diff --git a/web/src/components/build-feed/BuildFeedItem.vue b/web/src/components/build-feed/BuildFeedItem.vue
index 972dba391b..3eda8d35a2 100644
--- a/web/src/components/build-feed/BuildFeedItem.vue
+++ b/web/src/components/build-feed/BuildFeedItem.vue
@@ -5,14 +5,14 @@
       <span class="underline">{{ build.owner }} / {{ build.name }}</span>
       <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
       <div class="flex flex-col mt-2">
-        <div class="flex space-x-2 items-center">
-          <Icon name="duration" />
-          <span>{{ duration }}</span>
-        </div>
         <div class="flex space-x-2 items-center">
           <Icon name="since" />
           <span>{{ since }}</span>
         </div>
+        <div class="flex space-x-2 items-center">
+          <Icon name="duration" />
+          <span>{{ duration }}</span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 9cc1ac9f71..61e36a6444 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="rounded-md w-full p-4 shadow border bg-white dark:bg-dark-gray-700 dark:border-dark-200">
-    <slot />
+  <div class="rounded-md w-full shadow overflow-hidden text-gray-500 bg-gray-300 dark:bg-dark-gray-700">
+    <div v-if="title" class="font-bold bg-gray-400 dark:bg-dark-gray-800 p-2">{{ title }}</div>
+    <div class="w-full p-4 bg-gray-300 dark:bg-dark-gray-700">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -10,8 +13,11 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Panel',
 
-  setup() {
-    return {};
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
   },
 });
 </script>
diff --git a/web/src/components/repo/build/BuildLogs.vue b/web/src/components/repo/build/BuildLog.vue
similarity index 99%
rename from web/src/components/repo/build/BuildLogs.vue
rename to web/src/components/repo/build/BuildLog.vue
index 5005bf0972..580e40967f 100644
--- a/web/src/components/repo/build/BuildLogs.vue
+++ b/web/src/components/repo/build/BuildLog.vue
@@ -28,7 +28,7 @@ import { Build, Repo } from '~/lib/api/types';
 import { findProc } from '~/utils/helpers';
 
 export default defineComponent({
-  name: 'BuildLogs',
+  name: 'BuildLog',
 
   components: {},
 
diff --git a/web/src/components/repo/build/BuildProcList.vue b/web/src/components/repo/build/BuildProcList.vue
new file mode 100644
index 0000000000..10eafd8cf9
--- /dev/null
+++ b/web/src/components/repo/build/BuildProcList.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="flex flex-col w-3/12 text-gray-200 dark:text-gray-400">
+    <div class="flex py-4 px-2 mx-2 justify-between flex-shrink-0 text-gray-500 border-b-1 dark:border-dark-gray-600">
+      <div class="flex space-x-1 items-center flex-shrink-0">
+        <div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
+        <span>{{ build.author }}</span>
+      </div>
+      <div class="flex space-x-1 items-center">
+        <Icon v-if="build.event === 'push'" name="push" />
+        <Icon v-if="build.event === 'deployment'" name="deployment" />
+        <Icon v-else-if="build.event === 'tag'" name="tag" />
+        <a
+          v-else-if="build.event === 'pull_request'"
+          class="flex items-center text-link"
+          :href="build.link_url"
+          target="_blank"
+        >
+          <Icon name="pull_request" />
+          <span>{{
+            `#${build.ref.replaceAll('refs/pull/', '').replaceAll('refs/merge-requests/', '').replaceAll('/head', '')}`
+          }}</span></a
+        >
+        <span v-if="build.event !== 'pull_request'">{{ build.branch }}</span>
+      </div>
+      <div class="flex items-center flex-shrink-0">
+        <template v-if="build.event === 'pull_request'">
+          <Icon name="commit" />
+          <span>{{ build.commit.slice(0, 10) }}</span>
+        </template>
+        <a v-else class="text-link flex items-center" :href="build.link_url" target="_blank">
+          <Icon name="commit" />
+          <span>{{ build.commit.slice(0, 10) }}</span>
+        </a>
+      </div>
+    </div>
+
+    <div v-for="proc in build.procs" :key="proc.id">
+      <div class="p-4 pb-1 flex flex-wrap items-center justify-between">
+        <span>{{ proc.name }}</span>
+        <div v-if="proc.environ" class="text-xs">
+          <div v-for="(value, key) in proc.environ" :key="key">
+            <span
+              class="
+                pl-2
+                pr-1
+                py-0.5
+                bg-gray-800
+                dark:bg-gray-600
+                border-2 border-gray-800
+                dark:border-gray-600
+                rounded-l-full
+              "
+              >{{ key }}</span
+            >
+            <span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">{{
+              value
+            }}</span>
+          </div>
+        </div>
+      </div>
+      <div
+        v-for="job in proc.children"
+        :key="job.pid"
+        class="flex p-2 pl-6 cursor-pointer items-center hover:bg-gray-700 hover:dark:bg-dark-gray-900"
+        :class="{ 'bg-gray-700 !dark:bg-dark-gray-600': selectedProcId && selectedProcId === job.pid }"
+        @click="$emit('update:selected-proc-id', job.pid)"
+      >
+        <div v-if="['success'].includes(job.state)" class="w-2 h-2 bg-lime-400 rounded-full" />
+        <div v-if="['pending', 'skipped'].includes(job.state)" class="w-2 h-2 bg-gray-400 rounded-full" />
+        <div
+          v-if="['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state)"
+          class="w-2 h-2 bg-red-400 rounded-full"
+        />
+        <div v-if="['started', 'running'].includes(job.state)" class="w-2 h-2 bg-blue-400 rounded-full" />
+        <span class="ml-2">{{ job.name }}</span>
+        <BuildProcDuration :proc="job" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import BuildProcDuration from '~/components/repo/build/BuildProcDuration.vue';
+import { Build } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'BuildProcList',
+
+  components: {
+    BuildProcDuration,
+  },
+
+  props: {
+    build: {
+      type: Object as PropType<Build>,
+      required: true,
+    },
+
+    selectedProcId: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+  },
+
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'update:selected-proc-id': (selectedProcId: number) => true,
+  },
+});
+</script>
diff --git a/web/src/components/repo/build/BuildProcs.vue b/web/src/components/repo/build/BuildProcs.vue
deleted file mode 100644
index 8d3e54806f..0000000000
--- a/web/src/components/repo/build/BuildProcs.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="flex w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
-    <div v-if="build.error" class="flex flex-col p-4">
-      <span class="text-red-400 font-bold text-xl mb-2">Execution error</span>
-      <span class="text-red-400">{{ build.error }}</span>
-    </div>
-
-    <div class="flex flex-col w-3/12 text-gray-200 dark:text-gray-400">
-      <div v-for="proc in build.procs" :key="proc.id">
-        <div class="p-4 pb-1 flex flex-wrap items-center justify-between">
-          <span>{{ proc.name }}</span>
-          <div v-if="proc.environ" class="text-xs">
-            <div v-for="(value, key) in proc.environ" :key="key">
-              <span
-                class="
-                  pl-2
-                  pr-1
-                  py-0.5
-                  bg-gray-800
-                  dark:bg-gray-600
-                  border-2 border-gray-800
-                  dark:border-gray-600
-                  rounded-l-full
-                "
-                >{{ key }}</span
-              >
-              <span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">{{
-                value
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div
-          v-for="job in proc.children"
-          :key="job.pid"
-          class="flex p-2 pl-6 cursor-pointer items-center hover:bg-gray-700 hover:dark:bg-dark-gray-900"
-          :class="{ 'bg-gray-700 !dark:bg-dark-gray-600': selectedProcId && selectedProcId === job.pid }"
-          @click="$emit('update:selected-proc-id', job.pid)"
-        >
-          <div v-if="['success'].includes(job.state)" class="w-2 h-2 bg-lime-400 rounded-full" />
-          <div v-if="['pending', 'skipped'].includes(job.state)" class="w-2 h-2 bg-gray-400 rounded-full" />
-          <div
-            v-if="['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state)"
-            class="w-2 h-2 bg-red-400 rounded-full"
-          />
-          <div v-if="['started', 'running'].includes(job.state)" class="w-2 h-2 bg-blue-400 rounded-full" />
-          <span class="ml-2">{{ job.name }}</span>
-          <BuildProcDuration :proc="job" />
-        </div>
-      </div>
-    </div>
-
-    <BuildLogs v-if="selectedProcId" :build="build" :proc-id="selectedProcId" class="w-9/12 flex-grow" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import BuildLogs from '~/components/repo/build/BuildLogs.vue';
-import BuildProcDuration from '~/components/repo/build/BuildProcDuration.vue';
-import { Build } from '~/lib/api/types';
-
-export default defineComponent({
-  name: 'BuildProcs',
-
-  components: {
-    BuildLogs,
-    BuildProcDuration,
-  },
-
-  props: {
-    build: {
-      type: Object as PropType<Build>,
-      required: true,
-    },
-
-    selectedProcId: {
-      type: Number as PropType<number | null>,
-      default: null,
-    },
-  },
-
-  emits: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    'update:selected-proc-id': (selectedProcId: number) => true,
-  },
-});
-</script>
diff --git a/web/src/components/tabs/Tab.vue b/web/src/components/tabs/Tab.vue
index 128b9cf87c..28a2a4aa5a 100644
--- a/web/src/components/tabs/Tab.vue
+++ b/web/src/components/tabs/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="isActive" :aria-hidden="!isActive">
+  <div v-if="$slots.default" v-show="isActive" :aria-hidden="!isActive" class="mt-4">
     <slot />
   </div>
 </template>
diff --git a/web/src/components/tabs/Tabs.vue b/web/src/components/tabs/Tabs.vue
index 1f63e97271..caeaa2f364 100644
--- a/web/src/components/tabs/Tabs.vue
+++ b/web/src/components/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex w-full pt-4 mb-4">
+    <div class="flex w-full pt-4">
       <div
         v-for="tab in tabs"
         :key="tab.id"
diff --git a/web/src/compositions/useBuild.ts b/web/src/compositions/useBuild.ts
index 2a3812744f..0dd2d9bf53 100644
--- a/web/src/compositions/useBuild.ts
+++ b/web/src/compositions/useBuild.ts
@@ -12,11 +12,7 @@ export default (build: Ref<Build | undefined>) => {
       return undefined;
     }
 
-    const start = build.value.started_at || 0;
-
-    if (start === 0) {
-      return 0;
-    }
+    const start = build.value.created_at || 0;
 
     return start * 1000;
   });
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index 4af06e05a3..c71eea54b9 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -16,7 +16,7 @@
       <IconButton v-if="repoPermissions.admin" class="ml-2" :to="{ name: 'repo-settings' }" icon="settings" />
     </div>
 
-    <Tabs v-model="activeTab" disable-hash-mode>
+    <Tabs v-model="activeTab" disable-hash-mode class="mb-4">
       <Tab title="Activity" />
       <Tab title="Branches" />
     </Tabs>
diff --git a/web/src/views/repo/build/Build.vue b/web/src/views/repo/build/Build.vue
index 8042087631..5e3c541e22 100644
--- a/web/src/views/repo/build/Build.vue
+++ b/web/src/views/repo/build/Build.vue
@@ -12,7 +12,17 @@
       <Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
       <p class="text-xl text-gray-500">This pipeline has been declined!</p>
     </div>
-    <BuildProcs v-else v-model:selected-proc-id="selectedProcId" :build="build" />
+
+    <div v-else class="flex w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
+      <div v-if="build.error" class="flex flex-col p-4">
+        <span class="text-red-400 font-bold text-xl mb-2">Execution error</span>
+        <span class="text-red-400">{{ build.error }}</span>
+      </div>
+
+      <BuildProcList v-model:selected-proc-id="selectedProcId" :build="build" />
+
+      <BuildLog v-if="selectedProcId" :build="build" :proc-id="selectedProcId" class="w-9/12 flex-grow" />
+    </div>
   </div>
 </template>
 
@@ -22,7 +32,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
-import BuildProcs from '~/components/repo/build/BuildProcs.vue';
+import BuildLog from '~/components/repo/build/BuildLog.vue';
+import BuildProcList from '~/components/repo/build/BuildProcList.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
@@ -33,8 +44,9 @@ export default defineComponent({
 
   components: {
     Button,
-    BuildProcs,
+    BuildProcList,
     Icon,
+    BuildLog,
   },
 
   props: {
diff --git a/web/src/views/repo/build/BuildConfig.vue b/web/src/views/repo/build/BuildConfig.vue
index ad282a7161..874f7cbea5 100644
--- a/web/src/views/repo/build/BuildConfig.vue
+++ b/web/src/views/repo/build/BuildConfig.vue
@@ -1,19 +1,16 @@
 <template>
   <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !py-0">
-    <CodeViewer
-      v-for="buildConfig in buildConfigs"
-      :key="buildConfig.hash"
-      :name="buildConfig.name"
-      :text="buildConfig.data"
-    />
+    <Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name">
+      <span class="font-mono whitespace-pre">{{ buildConfig.data }}</span>
+    </Panel>
   </FluidContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
 
-import CodeViewer from '~/components/atomic/CodeViewer.vue';
 import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { Build, BuildConfig, Repo } from '~/lib/api/types';
 
@@ -22,7 +19,7 @@ export default defineComponent({
 
   components: {
     FluidContainer,
-    CodeViewer,
+    Panel,
   },
 
   setup() {
diff --git a/web/src/views/repo/build/BuildWrapper.vue b/web/src/views/repo/build/BuildWrapper.vue
index b89d18d881..5a7254689e 100644
--- a/web/src/views/repo/build/BuildWrapper.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@@ -1,13 +1,15 @@
 <template>
   <template v-if="build && repo">
-    <FluidContainer class="flex flex-col min-w-0">
-      <div class="flex border-b pb-4 items-center dark:border-gray-600">
+    <FluidContainer class="flex flex-col min-w-0 border-b dark:border-gray-600 !pb-0 mb-4">
+      <div class="flex mb-2 items-center">
         <IconButton icon="back" class="flex-shrink-0" @click="goBack" />
+        <BuildStatusIcon :build="build" class="flex flex-shrink-0" />
+
         <h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
           Pipeline #{{ buildId }} - {{ message }}
         </h1>
-        <BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
-        <template v-if="repoPermissions.push">
+
+        <div v-if="repoPermissions.push" class="ml-auto">
           <Button
             v-if="build.status === 'pending' || build.status === 'running'"
             class="ml-4 flex-shrink-0"
@@ -22,43 +24,28 @@
             :is-loading="isRestartingBuild"
             @click="restartBuild"
           />
-        </template>
+        </div>
       </div>
 
-      <div class="flex text-gray-500 justify-between px-2 py-4">
-        <div class="flex space-x-2 items-center">
-          <div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
-          <span>{{ build.author }}</span>
-        </div>
-        <div class="flex space-x-2 items-center">
-          <Icon v-if="build.event === 'pull_request'" name="pull_request" />
-          <Icon v-else-if="build.event === 'deployment'" name="deployment" />
-          <Icon v-else-if="build.event === 'tag'" name="tag" />
-          <Icon v-else name="push" />
-          <a v-if="build.event === 'pull_request'" class="text-link" :href="build.link_url" target="_blank">{{
-            `#${build.ref.replaceAll('refs/pull/', '').replaceAll('/merge', '').replaceAll('/head', '')}`
-          }}</a>
-          <span v-else>{{ build.branch }}</span>
-        </div>
-        <div class="flex space-x-2 items-center">
-          <Icon name="commit" />
-          <span v-if="build.event === 'pull_request'">{{ build.commit.slice(0, 10) }}</span>
-          <a v-else class="text-link" :href="build.link_url" target="_blank">{{ build.commit.slice(0, 10) }}</a>
-        </div>
-        <div class="flex space-x-2 items-center">
-          <Icon name="since" />
-          <span>{{ since }}</span>
-        </div>
-        <div class="flex space-x-2 items-center">
-          <Icon name="duration" />
-          <span>{{ duration }}</span>
+      <div class="flex flex-wrap gap-y-2 items-center justify-between">
+        <Tabs v-model="activeTab" disable-hash-mode>
+          <Tab id="tasks" title="Tasks" />
+          <Tab id="config" title="Config" />
+          <Tab id="art" title="Artifacts" />
+          <Tab id="tests" title="Tests" />
+        </Tabs>
+
+        <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 ml-auto">
+          <div class="flex space-x-1 items-center flex-shrink-0">
+            <Icon name="since" />
+            <span>{{ since }}</span>
+          </div>
+          <div class="flex space-x-1 items-center flex-shrink-0">
+            <Icon name="duration" />
+            <span>{{ duration }}</span>
+          </div>
         </div>
       </div>
-
-      <Tabs v-model="activeTab" disable-hash-mode>
-        <Tab title="Logs" />
-        <Tab title="Config" />
-      </Tabs>
     </FluidContainer>
 
     <router-view />
@@ -208,15 +195,18 @@ export default defineComponent({
     const activeTab = computed({
       get() {
         if (route.name === 'repo-build') {
-          return 'logs';
+          return 'tasks';
         }
+
         return 'config';
       },
       set(tab: string) {
+        if (tab === 'tasks') {
+          router.replace({ name: 'repo-build' });
+        }
+
         if (tab === 'config') {
           router.replace({ name: 'repo-build-config' });
-        } else {
-          router.replace({ name: 'repo-build' });
         }
       },
     });

From 517796ec6995f2aeb6c9ffaae39cb674084e5f15 Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 01:23:14 +0100
Subject: [PATCH 6/8] undo un-related changes

---
 server/api/build.go                       | 24 ----------
 server/router/api.go                      |  1 -
 web/src/lib/api/index.ts                  | 17 +------
 web/src/lib/api/types/buildConfig.ts      |  6 ---
 web/src/lib/api/types/index.ts            |  1 -
 web/src/router.ts                         |  6 ---
 web/src/views/repo/build/BuildConfig.vue  | 58 -----------------------
 web/src/views/repo/build/BuildWrapper.vue | 16 +------
 8 files changed, 3 insertions(+), 126 deletions(-)
 delete mode 100644 web/src/lib/api/types/buildConfig.ts
 delete mode 100644 web/src/views/repo/build/BuildConfig.vue

diff --git a/server/api/build.go b/server/api/build.go
index 4d16aa5072..93a1c5fe05 100644
--- a/server/api/build.go
+++ b/server/api/build.go
@@ -180,30 +180,6 @@ func GetProcLogs(c *gin.Context) {
 	}
 }
 
-func GetBuildConfig(c *gin.Context) {
-	_store := store.FromContext(c)
-	repo := session.Repo(c)
-	num, err := strconv.ParseInt(c.Param("number"), 10, 64)
-	if err != nil {
-		_ = c.AbortWithError(http.StatusBadRequest, err)
-		return
-	}
-
-	build, err := _store.GetBuildNumber(repo, num)
-	if err != nil {
-		_ = c.AbortWithError(http.StatusInternalServerError, err)
-		return
-	}
-
-	configs, err := _store.ConfigsForBuild(build.ID)
-	if err != nil {
-		c.String(http.StatusInternalServerError, err.Error())
-		return
-	}
-
-	c.JSON(http.StatusOK, configs)
-}
-
 // DeleteBuild cancels a build
 func DeleteBuild(c *gin.Context) {
 	_store := store.FromContext(c)
diff --git a/server/router/api.go b/server/router/api.go
index a41500cfed..e88c0a551d 100644
--- a/server/router/api.go
+++ b/server/router/api.go
@@ -61,7 +61,6 @@ func apiRoutes(e *gin.Engine) {
 
 			repo.GET("/builds", api.GetBuilds)
 			repo.GET("/builds/:number", api.GetBuild)
-			repo.GET("/builds/:number/config", api.GetBuildConfig)
 
 			// requires push permissions
 			repo.POST("/builds/:number", session.MustPush, api.PostBuild)
diff --git a/web/src/lib/api/index.ts b/web/src/lib/api/index.ts
index 42b0e3c6af..26eb7d9e27 100644
--- a/web/src/lib/api/index.ts
+++ b/web/src/lib/api/index.ts
@@ -1,16 +1,5 @@
 import ApiClient, { encodeQueryString } from './client';
-import {
-  Build,
-  BuildConfig,
-  BuildFeed,
-  BuildLog,
-  BuildProc,
-  Registry,
-  Repo,
-  RepoPermissions,
-  RepoSettings,
-  Secret,
-} from './types';
+import { Build, BuildFeed, BuildLog, BuildProc, Registry, Repo, RepoPermissions, RepoSettings, Secret } from './types';
 
 type RepoListOptions = {
   all?: boolean;
@@ -60,10 +49,6 @@ export default class WoodpeckerClient extends ApiClient {
     return this._get(`/api/repos/${owner}/${repo}/builds/${number}`) as Promise<Build>;
   }
 
-  getBuildConfig(owner: string, repo: string, number: number): Promise<BuildConfig[]> {
-    return this._get(`/api/repos/${owner}/${repo}/builds/${number}/config`) as Promise<BuildConfig[]>;
-  }
-
   getBuildFeed(opts?: Record<string, string | number | boolean>): Promise<BuildFeed[]> {
     const query = encodeQueryString(opts);
     return this._get(`/api/user/feed?${query}`) as Promise<BuildFeed[]>;
diff --git a/web/src/lib/api/types/buildConfig.ts b/web/src/lib/api/types/buildConfig.ts
deleted file mode 100644
index 496caba793..0000000000
--- a/web/src/lib/api/types/buildConfig.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// A config for a build.
-export type BuildConfig = {
-  hash: string;
-  name: string;
-  data: string;
-};
diff --git a/web/src/lib/api/types/index.ts b/web/src/lib/api/types/index.ts
index 231da28fd1..54347095e7 100644
--- a/web/src/lib/api/types/index.ts
+++ b/web/src/lib/api/types/index.ts
@@ -1,5 +1,4 @@
 export * from './build';
-export * from './buildConfig';
 export * from './registry';
 export * from './repo';
 export * from './secret';
diff --git a/web/src/router.ts b/web/src/router.ts
index cf866b64ca..d8889e16c7 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -58,12 +58,6 @@ const routes: RouteRecordRaw[] = [
             component: (): Component => import('~/views/repo/build/Build.vue'),
             props: true,
           },
-          {
-            path: 'config',
-            name: 'repo-build-config',
-            component: (): Component => import('~/views/repo/build/BuildConfig.vue'),
-            props: true,
-          },
         ],
       },
       {
diff --git a/web/src/views/repo/build/BuildConfig.vue b/web/src/views/repo/build/BuildConfig.vue
deleted file mode 100644
index 874f7cbea5..0000000000
--- a/web/src/views/repo/build/BuildConfig.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <FluidContainer v-if="buildConfigs" class="flex flex-col gap-y-6 text-gray-500 justify-between !py-0">
-    <Panel v-for="buildConfig in buildConfigs" :key="buildConfig.hash" :title="buildConfig.name">
-      <span class="font-mono whitespace-pre">{{ buildConfig.data }}</span>
-    </Panel>
-  </FluidContainer>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
-
-import FluidContainer from '~/components/layout/FluidContainer.vue';
-import Panel from '~/components/layout/Panel.vue';
-import useApiClient from '~/compositions/useApiClient';
-import { Build, BuildConfig, Repo } from '~/lib/api/types';
-
-export default defineComponent({
-  name: 'BuildConfig',
-
-  components: {
-    FluidContainer,
-    Panel,
-  },
-
-  setup() {
-    const build = inject<Ref<Build>>('build');
-    const apiClient = useApiClient();
-    const repo = inject<Ref<Repo>>('repo');
-    if (!repo || !build) {
-      throw new Error('Unexpected: "repo" & "build" should be provided at this place');
-    }
-
-    const buildConfigs = ref<BuildConfig[]>();
-    async function loadBuildConfig() {
-      if (!repo || !build) {
-        throw new Error('Unexpected: "repo" & "build" should be provided at this place');
-      }
-
-      buildConfigs.value = (await apiClient.getBuildConfig(repo.value.owner, repo.value.name, build.value.number)).map(
-        (i) => ({
-          ...i,
-          data: atob(i.data),
-        }),
-      );
-    }
-
-    onMounted(() => {
-      loadBuildConfig();
-    });
-
-    watch(build, () => {
-      loadBuildConfig();
-    });
-
-    return { buildConfigs };
-  },
-});
-</script>
diff --git a/web/src/views/repo/build/BuildWrapper.vue b/web/src/views/repo/build/BuildWrapper.vue
index 5a7254689e..9f4c060652 100644
--- a/web/src/views/repo/build/BuildWrapper.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@@ -30,9 +30,6 @@
       <div class="flex flex-wrap gap-y-2 items-center justify-between">
         <Tabs v-model="activeTab" disable-hash-mode>
           <Tab id="tasks" title="Tasks" />
-          <Tab id="config" title="Config" />
-          <Tab id="art" title="Artifacts" />
-          <Tab id="tests" title="Tests" />
         </Tabs>
 
         <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 ml-auto">
@@ -65,7 +62,7 @@ import {
   toRef,
   watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
@@ -125,7 +122,6 @@ export default defineComponent({
   setup(props) {
     const apiClient = useApiClient();
     const router = useRouter();
-    const route = useRoute();
     const notifications = useNotifications();
     const favicon = useFavicon();
 
@@ -194,20 +190,12 @@ export default defineComponent({
 
     const activeTab = computed({
       get() {
-        if (route.name === 'repo-build') {
-          return 'tasks';
-        }
-
-        return 'config';
+        return 'tasks';
       },
       set(tab: string) {
         if (tab === 'tasks') {
           router.replace({ name: 'repo-build' });
         }
-
-        if (tab === 'config') {
-          router.replace({ name: 'repo-build-config' });
-        }
       },
     });
 

From c0d1784d1024d667bca0abd30111ef3a0751382b Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 01:33:30 +0100
Subject: [PATCH 7/8] fix type

---
 web/src/store/builds.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/store/builds.ts b/web/src/store/builds.ts
index ce77b557b1..3b803171a0 100644
--- a/web/src/store/builds.ts
+++ b/web/src/store/builds.ts
@@ -88,7 +88,7 @@ export default defineStore({
       });
     },
     async loadBuild(owner: string, repo: string, buildNumber: number) {
-      const build = await apiClient.getBuild(owner, repo, buildNumber.toString());
+      const build = await apiClient.getBuild(owner, repo, buildNumber);
       this.setBuild(owner, repo, build);
     },
     async loadBuildFeed() {

From 9157d2067d65c3be27060acbe716279a2ecc5842 Mon Sep 17 00:00:00 2001
From: Anton Bracke <anton@ju60.de>
Date: Sun, 9 Jan 2022 01:40:08 +0100
Subject: [PATCH 8/8] move icon back to right side

---
 web/src/views/repo/build/BuildWrapper.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/views/repo/build/BuildWrapper.vue b/web/src/views/repo/build/BuildWrapper.vue
index 9f4c060652..17833cb66f 100644
--- a/web/src/views/repo/build/BuildWrapper.vue
+++ b/web/src/views/repo/build/BuildWrapper.vue
@@ -3,13 +3,14 @@
     <FluidContainer class="flex flex-col min-w-0 border-b dark:border-gray-600 !pb-0 mb-4">
       <div class="flex mb-2 items-center">
         <IconButton icon="back" class="flex-shrink-0" @click="goBack" />
-        <BuildStatusIcon :build="build" class="flex flex-shrink-0" />
 
         <h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
           Pipeline #{{ buildId }} - {{ message }}
         </h1>
 
-        <div v-if="repoPermissions.push" class="ml-auto">
+        <BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
+
+        <template v-if="repoPermissions.push">
           <Button
             v-if="build.status === 'pending' || build.status === 'running'"
             class="ml-4 flex-shrink-0"
@@ -24,7 +25,7 @@
             :is-loading="isRestartingBuild"
             @click="restartBuild"
           />
-        </div>
+        </template>
       </div>
 
       <div class="flex flex-wrap gap-y-2 items-center justify-between">