Report custom labels set by agent admins back (#4141)

web/src/assets/locales/en.json

@@ -316,6 +316,10 @@
           "desc": "The max amount of parallel pipelines executed by this agent.",
           "badge": "capacity"
         },
+        "custom_labels": {
+          "custom_labels": "Custom Labels",
+          "desc": "The custom labels set by the agent admin on agent startup."
+        },
         "org": {
           "badge": "org"
         },

web/src/components/agent/AgentForm.vue

@@ -33,6 +33,15 @@
         <TextField :id="id" v-model="agent.platform" disabled />
       </InputField>
 
+      <InputField
+        v-if="agent.custom_labels && Object.keys(agent.custom_labels).length > 0"
+        v-slot="{ id }"
+        :label="$t('admin.settings.agents.custom_labels.custom_labels')"
+      >
+        <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.custom_labels.desc') }}</span>
+        <TextField :id="id" :model-value="formatCustomLabels(agent.custom_labels)" disabled />
+      </InputField>
+
       <InputField
         v-slot="{ id }"
         :label="$t('admin.settings.agents.capacity.capacity')"
@@ -101,4 +110,10 @@ const agent = computed({
 function updateAgent(newValues: Partial<Agent>) {
   emit('update:modelValue', { ...agent.value, ...newValues });
 }
+
+function formatCustomLabels(labels: Record<string, string>): string {
+  return Object.entries(labels)
+    .map(([key, value]) => `${key}=${value}`)
+    .join(', ');
+}
 </script>

web/src/lib/api/types/agent.ts

@@ -12,4 +12,5 @@ export interface Agent {
   capacity: number;
   version: string;
   no_schedule: boolean;
+  custom_labels: Record<string, string>;
 }