From 34ff30010ef9fc49802a7cff9d824eb14a63736a Mon Sep 17 00:00:00 2001
From: Nulo <86896666+catdevnull@users.noreply.github.com>
Date: Tue, 23 Nov 2021 00:51:19 -0300
Subject: [PATCH] Show environ in every BuildProc (#526)

* Show environ in every BuildProc

* show environ next to build proc

Co-authored-by: Anbraten <anton@ju60.de>
---
 web/src/components/repo/build/BuildProcs.vue | 24 +++++++++++++++++++-
 web/src/lib/api/types/build.ts               |  7 +++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/components/repo/build/BuildProcs.vue b/web/src/components/repo/build/BuildProcs.vue
index a4d2cdb1f..cd1fb22da 100644
--- a/web/src/components/repo/build/BuildProcs.vue
+++ b/web/src/components/repo/build/BuildProcs.vue
@@ -7,7 +7,29 @@
 
     <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">{{ proc.name }}</div>
+        <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"
diff --git a/web/src/lib/api/types/build.ts b/web/src/lib/api/types/build.ts
index 1b613f2c3..d55f517cd 100644
--- a/web/src/lib/api/types/build.ts
+++ b/web/src/lib/api/types/build.ts
@@ -104,9 +104,10 @@ export type BuildProc = {
   name: string;
   state: BuildStatus;
   exit_code: number;
-  start_time: number;
-  end_time: number;
-  machine: string;
+  environ?: Record<string, string>;
+  start_time?: number;
+  end_time?: number;
+  machine?: string;
   children?: BuildProc[];
 };