Update build layout (#678)

* show yml config of build in UI

* fix after merge

* improve build configs

* fix approve & decline build

* improve build layout

* undo un-related changes

* fix type

* move icon back to right side

Co-authored-by: 6543 <6543@obermui.de>

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,7 +1,10 @@
 <template>
-  <div class="rounded-md w-full p-4 shadow border bg-white dark:bg-dark-gray-700 dark:border-dark-200">
+  <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>
 
 <script lang="ts">
@@ -10,8 +13,11 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Panel',
 
-  setup() {
+  props: {
-    return {};
+    title: {
+      type: String,
+      default: '',
+    },
   },
 });
 </script>

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/repo/build/BuildProcs.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="flex mt-4 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>

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;
+    const start = build.value.created_at || 0;
-
-    if (start === 0) {
-      return 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?',
+        path: 'build/:buildId',
-        name: 'repo-build',
+        component: (): Component => import('~/views/repo/build/BuildWrapper.vue'),
-        component: (): Component => import('~/views/repo/RepoBuild.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() {

web/src/views/repo/RepoBuild.vue

@@ -1,261 +0,0 @@
-<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>
-
-    <div class="p-0 flex flex-col flex-grow">
-      <FluidContainer class="flex text-gray-500 justify-between py-0">
-        <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>
-      </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>
-  </template>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, inject, onBeforeUnmount, onMounted, PropType, 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 useApiClient from '~/compositions/useApiClient';
-import { useAsyncAction } from '~/compositions/useAsyncAction';
-import useBuild from '~/compositions/useBuild';
-import { useFavicon } from '~/compositions/useFavicon';
-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',
-
-  components: {
-    FluidContainer,
-    Button,
-    BuildStatusIcon,
-    BuildProcs,
-    IconButton,
-    Icon,
-  },
-
-  props: {
-    // used by toRef
-    // eslint-disable-next-line vue/no-unused-properties
-    repoOwner: {
-      type: String,
-      required: true,
-    },
-
-    // used by toRef
-    // eslint-disable-next-line vue/no-unused-properties
-    repoName: {
-      type: String,
-      required: true,
-    },
-
-    buildId: {
-      type: String,
-      required: true,
-    },
-
-    // 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 favicon = useFavicon();
-
-    const buildStore = BuildStore();
-    const buildId = toRef(props, 'buildId');
-    const repoOwner = toRef(props, 'repoOwner');
-    const repoName = toRef(props, 'repoName');
-    const repo = inject<Ref<Repo>>('repo');
-    const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
-    if (!repo || !repoPermissions) {
-      throw new Error('Unexpected: "repo" & "repoPermissions" should be provided at this place');
-    }
-
-    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);
-        }
-
-        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}` } });
-      },
-    });
-
-    async function loadBuild(): Promise<void> {
-      if (!repo) {
-        throw new Error('Unexpected: Repo is undefined');
-      }
-
-      await buildStore.loadBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10));
-
-      favicon.updateStatus(build.value.status);
-    }
-
-    const { doSubmit: cancelBuild, isLoading: isCancelingBuild } = useAsyncAction(async () => {
-      if (!repo) {
-        throw new Error('Unexpected: Repo is undefined');
-      }
-
-      if (!build.value.procs) {
-        throw new Error('Unexpected: Build procs not loaded');
-      }
-
-      // TODO: is selectedProcId right?
-      const proc = findProc(build.value.procs, selectedProcId.value || 2);
-
-      if (!proc) {
-        throw new Error('Unexpected: Proc not found');
-      }
-
-      await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), proc.ppid);
-      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');
-      }
-
-      await apiClient.restartBuild(repo.value.owner, repo.value.name, buildId.value, { fork: true });
-      notifications.notify({ title: 'Pipeline restarted', type: 'success' });
-      // TODO: directly send to newest build?
-      await router.push({ name: 'repo', params: { repoName: repo.value.name, repoOwner: repo.value.owner } });
-    });
-
-    onMounted(loadBuild);
-    watch([repo, buildId], loadBuild);
-    onBeforeUnmount(() => {
-      favicon.updateStatus('default');
-    });
-
-    return {
-      repoPermissions,
-      selectedProcId,
-      build,
-      since,
-      duration,
-      repo,
-      message,
-      isCancelingBuild,
-      isApprovingBuild,
-      isDecliningBuild,
-      isRestartingBuild,
-      cancelBuild,
-      restartBuild,
-      approveBuild,
-      declineBuild,
-      goBack: useRouteBackOrDefault({ name: 'repo' }),
-    };
-  },
-});
-</script>

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>

web/src/views/repo/build/Build.vue

@@ -0,0 +1,125 @@
+<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>
+
+    <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>
+
+<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 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';
+import { Build, Repo, RepoPermissions } from '~/lib/api/types';
+
+export default defineComponent({
+  name: 'Build',
+
+  components: {
+    Button,
+    BuildProcList,
+    Icon,
+    BuildLog,
+  },
+
+  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.number}`);
+      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.number}`);
+      notifications.notify({ title: 'Pipeline declined', type: 'success' });
+    });
+
+    return {
+      repoPermissions,
+      selectedProcId,
+      build,
+      isApprovingBuild,
+      isDecliningBuild,
+      approveBuild,
+      declineBuild,
+    };
+  },
+});
+</script>

web/src/views/repo/build/BuildWrapper.vue

@@ -0,0 +1,219 @@
+<template>
+  <template v-if="build && repo">
+    <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" />
+
+        <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="flex flex-wrap gap-y-2 items-center justify-between">
+        <Tabs v-model="activeTab" disable-hash-mode>
+          <Tab id="tasks" title="Tasks" />
+        </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>
+    </FluidContainer>
+
+    <router-view />
+  </template>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  provide,
+  Ref,
+  toRef,
+  watch,
+} from 'vue';
+import { useRouter } from 'vue-router';
+
+import Button from '~/components/atomic/Button.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
+import FluidContainer from '~/components/layout/FluidContainer.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';
+import { useFavicon } from '~/compositions/useFavicon';
+import useNotifications from '~/compositions/useNotifications';
+import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
+import { Repo, RepoPermissions } from '~/lib/api/types';
+import BuildStore from '~/store/builds';
+
+export default defineComponent({
+  name: 'BuildWrapper',
+
+  components: {
+    FluidContainer,
+    Button,
+    BuildStatusIcon,
+    IconButton,
+    Tabs,
+    Tab,
+  },
+
+  props: {
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    repoOwner: {
+      type: String,
+      required: true,
+    },
+
+    // used by toRef
+    // eslint-disable-next-line vue/no-unused-properties
+    repoName: {
+      type: String,
+      required: true,
+    },
+
+    buildId: {
+      type: String,
+      required: true,
+    },
+
+    // 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 notifications = useNotifications();
+    const favicon = useFavicon();
+
+    const buildStore = BuildStore();
+    const buildId = toRef(props, 'buildId');
+    const repoOwner = toRef(props, 'repoOwner');
+    const repoName = toRef(props, 'repoName');
+    const repo = inject<Ref<Repo>>('repo');
+    const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
+    if (!repo || !repoPermissions) {
+      throw new Error('Unexpected: "repo" & "repoPermissions" should be provided at this place');
+    }
+
+    const build = buildStore.getBuild(repoOwner, repoName, buildId);
+    const { since, duration } = useBuild(build);
+    provide('build', build);
+
+    const { message } = useBuild(build);
+
+    async function loadBuild(): Promise<void> {
+      if (!repo) {
+        throw new Error('Unexpected: Repo is undefined');
+      }
+
+      await buildStore.loadBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10));
+
+      favicon.updateStatus(build.value.status);
+    }
+
+    const { doSubmit: cancelBuild, isLoading: isCancelingBuild } = useAsyncAction(async () => {
+      if (!repo) {
+        throw new Error('Unexpected: Repo is undefined');
+      }
+
+      if (!build.value.procs) {
+        throw new Error('Unexpected: Build procs not loaded');
+      }
+
+      // TODO: is selectedProcId right?
+      // const proc = findProc(build.value.procs, selectedProcId.value || 2);
+
+      // if (!proc) {
+      //   throw new Error('Unexpected: Proc not found');
+      // }
+
+      await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), 0);
+      notifications.notify({ title: 'Pipeline canceled', type: 'success' });
+    });
+
+    const { doSubmit: restartBuild, isLoading: isRestartingBuild } = useAsyncAction(async () => {
+      if (!repo) {
+        throw new Error('Unexpected: Repo is undefined');
+      }
+
+      await apiClient.restartBuild(repo.value.owner, repo.value.name, buildId.value, { fork: true });
+      notifications.notify({ title: 'Pipeline restarted', type: 'success' });
+      // TODO: directly send to newest build?
+      await router.push({ name: 'repo', params: { repoName: repo.value.name, repoOwner: repo.value.owner } });
+    });
+
+    onMounted(loadBuild);
+    watch([repo, buildId], loadBuild);
+    onBeforeUnmount(() => {
+      favicon.updateStatus('default');
+    });
+
+    const activeTab = computed({
+      get() {
+        return 'tasks';
+      },
+      set(tab: string) {
+        if (tab === 'tasks') {
+          router.replace({ name: 'repo-build' });
+        }
+      },
+    });
+
+    return {
+      repoPermissions,
+      build,
+      repo,
+      message,
+      isCancelingBuild,
+      isRestartingBuild,
+      activeTab,
+      since,
+      duration,
+      cancelBuild,
+      restartBuild,
+      goBack: useRouteBackOrDefault({ name: 'repo' }),
+    };
+  },
+});
+</script>