Show platform, backend and capacity as badges in agent list (#1568)

Screenshots:

![attels](https://user-images.githubusercontent.com/165205/215585911-37813edc-05fc-4be8-9bc0-5bed80b0faf2.png)

![attels](https://user-images.githubusercontent.com/165205/215586019-360d49c5-069f-4735-ad58-698e8f14780a.png)

web/components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     ActivePipelines: typeof import('./src/components/layout/header/ActivePipelines.vue')['default']
     AdminAgentsTab: typeof import('./src/components/admin/settings/AdminAgentsTab.vue')['default']
     AdminSecretsTab: typeof import('./src/components/admin/settings/AdminSecretsTab.vue')['default']
+    Badge: typeof import('./src/components/atomic/Badge.vue')['default']
     BadgeTab: typeof import('./src/components/repo/settings/BadgeTab.vue')['default']
     Button: typeof import('./src/components/atomic/Button.vue')['default']
     Checkbox: typeof import('./src/components/form/Checkbox.vue')['default']
@@ -55,10 +56,10 @@ declare module '@vue/runtime-core' {
     IMdiGestureTap: typeof import('~icons/mdi/gesture-tap')['default']
     IMdiGithub: typeof import('~icons/mdi/github')['default']
     IMdiLoading: typeof import('~icons/mdi/loading')['default']
+    IMdiSync: typeof import('~icons/mdi/sync')['default']
     IMdiSourceBranch: typeof import('~icons/mdi/source-branch')['default']
     IMdisourceCommit: typeof import('~icons/mdi/source-commit')['default']
     IMdiSourcePull: typeof import('~icons/mdi/source-pull')['default']
-    IMdiSync: typeof import('~icons/mdi/sync')['default']
     IMdiTagOutline: typeof import('~icons/mdi/tag-outline')['default']
     InputField: typeof import('./src/components/form/InputField.vue')['default']
     IPhGitlabLogoSimpleFill: typeof import('~icons/ph/gitlab-logo-simple-fill')['default']

web/src/assets/locales/en.json

@@ -341,9 +341,18 @@
                     "placeholder": "Stop agent from taking new tasks"
                 },
                 "token": "Token",
+                "platform": {
                   "platform": "Platform",
+                  "badge": "platform"
+                },
+                "backend": {
                   "backend": "Backend",
+                  "badge": "backend"
+                },
+                "capacity": {
                   "capacity": "Capacity",
+                  "badge": "capacity"
+                },
                 "version": "Version",
                 "last_contact": "Last contact",
                 "never": "Never",

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -21,7 +21,14 @@
     <div v-if="!selectedAgent" class="space-y-4 text-color">
       <ListItem v-for="agent in agents" :key="agent.id" class="items-center">
         <span>{{ agent.name || `Agent ${agent.id}` }}</span>
-        <span class="ml-auto">{{ agent.last_contact ? timeAgo.format(agent.last_contact * 1000) : 'never' }}</span>
+        <span class="ml-auto">
+          <span class="hidden md:inline-block space-x-2">
+            <Badge :label="$t('admin.settings.agents.platform.badge')" :value="agent.platform" />
+            <Badge :label="$t('admin.settings.agents.backend.badge')" :value="agent.backend" />
+            <Badge :label="$t('admin.settings.agents.capacity.badge')" :value="agent.capacity" />
+          </span>
+          <span class="ml-2">{{ agent.last_contact ? timeAgo.format(agent.last_contact * 1000) : 'never' }}</span>
+        </span>
         <IconButton icon="edit" class="ml-2 w-8 h-8" @click="editAgent(agent)" />
         <IconButton
           icon="trash"
@@ -56,16 +63,19 @@
             <TextField v-model="selectedAgent.token" :placeholder="$t('admin.settings.agents.token')" disabled />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.backend')" docs-url="docs/next/administration/backends/docker">
+          <InputField
+            :label="$t('admin.settings.agents.backend.backend')"
+            docs-url="docs/next/administration/backends/docker"
+          >
             <TextField v-model="selectedAgent.backend" disabled />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.platform')">
+          <InputField :label="$t('admin.settings.agents.platform.platform')">
             <TextField v-model="selectedAgent.platform" disabled />
           </InputField>
 
           <InputField
-            :label="$t('admin.settings.agents.capacity')"
+            :label="$t('admin.settings.agents.capacity.capacity')"
             docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
           >
             <span class="text-color-alt">The max amount of parallel pipelines executed by this agent.</span>
@@ -103,6 +113,7 @@ import { cloneDeep } from 'lodash';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import Checkbox from '~/components/form/Checkbox.vue';

web/src/components/atomic/Badge.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="text-xs font-medium inline-flex">
+    <span
+      class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 dark:bg-gray-600 border-2 border-gray-800 dark:border-gray-600 rounded-l-full"
+    >
+      {{ label }}
+    </span>
+    <span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">
+      {{ value }}
+    </span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  value: string | number;
+}>();
+
+const label = toRef(props, 'label');
+const value = toRef(props, 'value');
+</script>

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -50,16 +50,9 @@
           class="p-2 md:rounded-md bg-white shadow dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
         >
           <div class="flex flex-col gap-2">
-            <div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1">
+            <div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">
               <div v-for="(value, key) in workflow.environ" :key="key">
-                <span
+                <Badge :label="key" :value="value" />
-                  class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 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>
             <button
@@ -114,6 +107,7 @@
 <script lang="ts" setup>
 import { ref, toRef } from 'vue';
 
+import Badge from '~/components/atomic/Badge.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import PipelineStepDuration from '~/components/repo/pipeline/PipelineStepDuration.vue';