Update build layout

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>

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>

web/src/components/repo/build/BuildLogs.vue → 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: {},
 

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>

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>

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"

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;
   });

web/src/lib/api/index.ts

@@ -45,7 +45,7 @@ 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>;
   }
 

web/src/router.ts

@@ -48,10 +48,17 @@ 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: 'settings',

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() {