Implement org/user agents (#3539)

web/src/assets/locales/en.json

@@ -266,6 +266,9 @@
       },
       "registries": {
         "desc": "Organization registry credentials can be added to use private images for all pipelines of an organization."
+      },
+      "agents": {
+        "desc": "Agents registered for this organization."
       }
     }
   },
@@ -313,6 +316,9 @@
           "desc": "The max amount of parallel pipelines executed by this agent.",
           "badge": "capacity"
         },
+        "org": {
+          "badge": "org"
+        },
         "version": "Version",
         "last_contact": "Last contact",
         "never": "Never",
@@ -415,6 +421,9 @@
         "download_cli": "Download CLI",
         "reset_token": "Reset token",
         "swagger_ui": "Swagger UI"
+      },
+      "agents": {
+        "desc": "Agents registered to your account repos."
       }
     }
   },

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

@@ -1,202 +1,23 @@
 <template>
-  <Settings :title="$t('admin.settings.agents.agents')" :desc="$t('admin.settings.agents.desc')">
-    <template #titleActions>
-      <Button
-        v-if="selectedAgent"
-        :text="$t('admin.settings.agents.show')"
-        start-icon="back"
-        @click="selectedAgent = undefined"
-      />
-      <Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
-    </template>
-
-    <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
-      <ListItem
-        v-for="agent in agents"
-        :key="agent.id"
-        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
-      >
-        <span>{{ agent.name || `Agent ${agent.id}` }}</span>
-        <span class="ml-auto">
-          <span class="hidden md:inline-block space-x-2">
-            <Badge v-if="agent.platform" :label="$t('admin.settings.agents.platform.badge')" :value="agent.platform" />
-            <Badge v-if="agent.backend" :label="$t('admin.settings.agents.backend.badge')" :value="agent.backend" />
-            <Badge v-if="agent.capacity" :label="$t('admin.settings.agents.capacity.badge')" :value="agent.capacity" />
-          </span>
-          <span class="ml-2">{{
-            agent.last_contact ? date.timeAgo(agent.last_contact * 1000) : $t('admin.settings.agents.never')
-          }}</span>
-        </span>
-        <IconButton
-          icon="edit"
-          :title="$t('admin.settings.agents.edit_agent')"
-          class="ml-2 w-8 h-8"
-          @click="editAgent(agent)"
-        />
-        <IconButton
-          icon="trash"
-          :title="$t('admin.settings.agents.delete_agent')"
-          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
-          :is-loading="isDeleting"
-          @click="deleteAgent(agent)"
-        />
-      </ListItem>
-
-      <div v-if="agents?.length === 0" class="ml-2">{{ $t('admin.settings.agents.none') }}</div>
-    </div>
-    <div v-else>
-      <form @submit.prevent="saveAgent">
-        <InputField v-slot="{ id }" :label="$t('admin.settings.agents.name.name')">
-          <TextField
-            :id="id"
-            v-model="selectedAgent.name"
-            :placeholder="$t('admin.settings.agents.name.placeholder')"
-            required
-          />
-        </InputField>
-
-        <InputField :label="$t('admin.settings.agents.no_schedule.name')">
-          <Checkbox
-            :model-value="selectedAgent.no_schedule || false"
-            :label="$t('admin.settings.agents.no_schedule.placeholder')"
-            @update:model-value="selectedAgent!.no_schedule = $event"
-          />
-        </InputField>
-
-        <template v-if="isEditingAgent">
-          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.token')">
-            <TextField
-              :id="id"
-              v-model="selectedAgent.token"
-              :placeholder="$t('admin.settings.agents.token')"
-              disabled
-            />
-          </InputField>
-
-          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.id')">
-            <TextField :id="id" :model-value="selectedAgent.id?.toString()" disabled />
-          </InputField>
-
-          <InputField
-            v-slot="{ id }"
-            :label="$t('admin.settings.agents.backend.backend')"
-            docs-url="docs/next/administration/backends/docker"
-          >
-            <TextField :id="id" v-model="selectedAgent.backend" disabled />
-          </InputField>
-
-          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.platform.platform')">
-            <TextField :id="id" v-model="selectedAgent.platform" disabled />
-          </InputField>
-
-          <InputField
-            v-slot="{ id }"
-            :label="$t('admin.settings.agents.capacity.capacity')"
-            docs-url="docs/next/administration/agent-config#woodpecker_max_workflows"
-          >
-            <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
-            <TextField :id="id" :model-value="selectedAgent.capacity?.toString()" disabled />
-          </InputField>
-
-          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.version')">
-            <TextField :id="id" :model-value="selectedAgent.version" disabled />
-          </InputField>
-
-          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.last_contact')">
-            <TextField
-              :id="id"
-              :model-value="
-                selectedAgent.last_contact
-                  ? date.timeAgo(selectedAgent.last_contact * 1000)
-                  : $t('admin.settings.agents.never')
-              "
-              disabled
-            />
-          </InputField>
-        </template>
-
-        <div class="flex gap-2">
-          <Button type="button" color="gray" :text="$t('cancel')" @click="selectedAgent = undefined" />
-          <Button
-            :is-loading="isSaving"
-            type="submit"
-            color="green"
-            :text="isEditingAgent ? $t('admin.settings.agents.save') : $t('admin.settings.agents.add')"
-          />
-        </div>
-      </form>
-    </div>
-  </Settings>
+  <AgentManager
+    :desc="$t('admin.settings.agents.desc')"
+    :load-agents="loadAgents"
+    :create-agent="createAgent"
+    :update-agent="updateAgent"
+    :delete-agent="deleteAgent"
+    :is-admin="true"
+  />
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Badge from '~/components/atomic/Badge.vue';
-import Button from '~/components/atomic/Button.vue';
-import IconButton from '~/components/atomic/IconButton.vue';
-import ListItem from '~/components/atomic/ListItem.vue';
-import Checkbox from '~/components/form/Checkbox.vue';
-import InputField from '~/components/form/InputField.vue';
-import TextField from '~/components/form/TextField.vue';
-import Settings from '~/components/layout/Settings.vue';
+import AgentManager from '~/components/agent/AgentManager.vue';
 import useApiClient from '~/compositions/useApiClient';
-import { useAsyncAction } from '~/compositions/useAsyncAction';
-import { useDate } from '~/compositions/useDate';
-import useNotifications from '~/compositions/useNotifications';
-import { usePagination } from '~/compositions/usePaginate';
 import type { Agent } from '~/lib/api/types';
 
 const apiClient = useApiClient();
-const notifications = useNotifications();
-const date = useDate();
-const { t } = useI18n();
 
-const selectedAgent = ref<Partial<Agent>>();
-const isEditingAgent = computed(() => !!selectedAgent.value?.id);
-
-async function loadAgents(page: number): Promise<Agent[] | null> {
-  return apiClient.getAgents({ page });
-}
-
-const { resetPage, data: agents } = usePagination(loadAgents, () => !selectedAgent.value);
-
-const { doSubmit: saveAgent, isLoading: isSaving } = useAsyncAction(async () => {
-  if (!selectedAgent.value) {
-    throw new Error("Unexpected: Can't get agent");
-  }
-
-  if (isEditingAgent.value) {
-    await apiClient.updateAgent(selectedAgent.value);
-    selectedAgent.value = undefined;
-  } else {
-    selectedAgent.value = await apiClient.createAgent(selectedAgent.value);
-  }
-  notifications.notify({
-    title: isEditingAgent.value ? t('admin.settings.agents.saved') : t('admin.settings.agents.created'),
-    type: 'success',
-  });
-  resetPage();
-});
-
-const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_agent: Agent) => {
-  // eslint-disable-next-line no-alert
-  if (!confirm(t('admin.settings.agents.delete_confirm'))) {
-    return;
-  }
-
-  await apiClient.deleteAgent(_agent);
-  notifications.notify({ title: t('admin.settings.agents.deleted'), type: 'success' });
-  resetPage();
-});
-
-function editAgent(agent: Agent) {
-  selectedAgent.value = cloneDeep(agent);
-}
-
-function showAddAgent() {
-  selectedAgent.value = cloneDeep({ name: '' });
-}
+const loadAgents = (page: number) => apiClient.getAgents({ page });
+const createAgent = (agent: Partial<Agent>) => apiClient.createAgent(agent);
+const updateAgent = (agent: Agent) => apiClient.updateAgent(agent);
+const deleteAgent = (agent: Agent) => apiClient.deleteAgent(agent);
 </script>

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

@@ -110,7 +110,12 @@ const tasks = computed(() => {
     _tasks.push(...queueInfo.value.waiting_on_deps.map((task) => ({ ...task, status: 'waiting_on_deps' })));
   }
 
-  return _tasks.sort((a, b) => a.id - b.id);
+  return _tasks
+    .map((task) => ({
+      ...task,
+      labels: Object.fromEntries(Object.entries(task.labels).filter(([key]) => key !== 'org-id')),
+    }))
+    .toSorted((a, b) => a.id - b.id);
 });
 
 async function loadQueueInfo() {

web/src/components/agent/AgentForm.vue

@@ -0,0 +1,104 @@
+<template>
+  <form @submit.prevent="$emit('save')">
+    <InputField v-slot="{ id }" :label="$t('admin.settings.agents.name.name')">
+      <TextField :id="id" v-model="agent.name" :placeholder="$t('admin.settings.agents.name.placeholder')" required />
+    </InputField>
+
+    <InputField :label="$t('admin.settings.agents.no_schedule.name')">
+      <Checkbox
+        :model-value="agent.no_schedule || false"
+        :label="$t('admin.settings.agents.no_schedule.placeholder')"
+        @update:model-value="updateAgent({ no_schedule: $event })"
+      />
+    </InputField>
+
+    <template v-if="isEditingAgent">
+      <InputField v-slot="{ id }" :label="$t('admin.settings.agents.token')">
+        <TextField :id="id" v-model="agent.token" :placeholder="$t('admin.settings.agents.token')" disabled />
+      </InputField>
+
+      <InputField v-slot="{ id }" :label="$t('admin.settings.agents.id')">
+        <TextField :id="id" :model-value="agent.id?.toString()" disabled />
+      </InputField>
+
+      <InputField
+        v-slot="{ id }"
+        :label="$t('admin.settings.agents.backend.backend')"
+        docs-url="docs/next/administration/backends/docker"
+      >
+        <TextField :id="id" v-model="agent.backend" disabled />
+      </InputField>
+
+      <InputField v-slot="{ id }" :label="$t('admin.settings.agents.platform.platform')">
+        <TextField :id="id" v-model="agent.platform" disabled />
+      </InputField>
+
+      <InputField
+        v-slot="{ id }"
+        :label="$t('admin.settings.agents.capacity.capacity')"
+        docs-url="docs/next/administration/agent-config#woodpecker_max_workflows"
+      >
+        <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
+        <TextField :id="id" :model-value="agent.capacity?.toString()" disabled />
+      </InputField>
+
+      <InputField v-slot="{ id }" :label="$t('admin.settings.agents.version')">
+        <TextField :id="id" :model-value="agent.version" disabled />
+      </InputField>
+
+      <InputField v-slot="{ id }" :label="$t('admin.settings.agents.last_contact')">
+        <TextField
+          :id="id"
+          :model-value="
+            agent.last_contact ? date.timeAgo(agent.last_contact * 1000) : $t('admin.settings.agents.never')
+          "
+          disabled
+        />
+      </InputField>
+    </template>
+
+    <div class="flex gap-2">
+      <Button type="button" color="gray" :text="$t('cancel')" @click="$emit('cancel')" />
+      <Button
+        :is-loading="isSaving"
+        type="submit"
+        color="green"
+        :text="isEditingAgent ? $t('admin.settings.agents.save') : $t('admin.settings.agents.add')"
+      />
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import Button from '~/components/atomic/Button.vue';
+import Checkbox from '~/components/form/Checkbox.vue';
+import InputField from '~/components/form/InputField.vue';
+import TextField from '~/components/form/TextField.vue';
+import { useDate } from '~/compositions/useDate';
+import type { Agent } from '~/lib/api/types';
+
+const props = defineProps<{
+  modelValue: Partial<Agent>;
+  isEditingAgent: boolean;
+  isSaving: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Partial<Agent>): void;
+  (e: 'save'): void;
+  (e: 'cancel'): void;
+}>();
+
+const date = useDate();
+
+const agent = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+function updateAgent(newValues: Partial<Agent>) {
+  emit('update:modelValue', { ...agent.value, ...newValues });
+}
+</script>

web/src/components/agent/AgentList.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="!props.loading" class="space-y-4 text-wp-text-100">
+    <ListItem
+      v-for="agent in props.agents"
+      :key="agent.id"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+    >
+      <span>{{ agent.name || `Agent ${agent.id}` }}</span>
+      <span class="ml-auto">
+        <span class="hidden md:inline-block space-x-2">
+          <Badge
+            v-if="props.isAdmin === true && agent.org_id !== -1"
+            :label="$t('admin.settings.agents.org.badge')"
+            :value="agent.org_id"
+          />
+          <Badge v-if="agent.platform" :label="$t('admin.settings.agents.platform.badge')" :value="agent.platform" />
+          <Badge v-if="agent.backend" :label="$t('admin.settings.agents.backend.badge')" :value="agent.backend" />
+          <Badge v-if="agent.capacity" :label="$t('admin.settings.agents.capacity.badge')" :value="agent.capacity" />
+        </span>
+        <span class="ml-2">{{
+          agent.last_contact ? date.timeAgo(agent.last_contact * 1000) : $t('admin.settings.agents.never')
+        }}</span>
+      </span>
+      <IconButton
+        icon="edit"
+        :title="$t('admin.settings.agents.edit_agent')"
+        class="ml-2 w-8 h-8"
+        @click="$emit('edit', agent)"
+      />
+      <IconButton
+        icon="trash"
+        :title="$t('admin.settings.agents.delete_agent')"
+        class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+        :is-loading="props.isDeleting"
+        @click="$emit('delete', agent)"
+      />
+    </ListItem>
+
+    <div v-if="props.agents?.length === 0" class="ml-2">{{ $t('admin.settings.agents.none') }}</div>
+  </div>
+  <div v-else class="flex justify-center">
+    <Icon name="loading" class="animate-spin" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Badge from '~/components/atomic/Badge.vue';
+import Icon from '~/components/atomic/Icon.vue';
+import IconButton from '~/components/atomic/IconButton.vue';
+import ListItem from '~/components/atomic/ListItem.vue';
+import { useDate } from '~/compositions/useDate';
+import type { Agent } from '~/lib/api/types';
+
+const props = defineProps<{
+  agents: Agent[];
+  isDeleting: boolean;
+  loading: boolean;
+  isAdmin?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'edit', agent: Agent): void;
+  (e: 'delete', agent: Agent): void;
+}>();
+
+const date = useDate();
+</script>

web/src/components/agent/AgentManager.vue

@@ -0,0 +1,101 @@
+<template>
+  <Settings :title="$t('admin.settings.agents.agents')" :desc="desc">
+    <template #titleActions>
+      <Button
+        v-if="selectedAgent"
+        :text="$t('admin.settings.agents.show')"
+        start-icon="back"
+        @click="selectedAgent = undefined"
+      />
+      <Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
+    </template>
+
+    <AgentList
+      v-if="!selectedAgent"
+      :loading="loading"
+      :agents="agents"
+      :is-deleting="isDeleting"
+      :is-admin="isAdmin"
+      @edit="editAgent"
+      @delete="deleteAgent"
+    />
+    <AgentForm
+      v-else
+      v-model="selectedAgent"
+      :is-editing-agent="isEditingAgent"
+      :is-saving="isSaving"
+      @save="saveAgent"
+      @cancel="selectedAgent = undefined"
+    />
+  </Settings>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import Settings from '~/components/layout/Settings.vue';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
+import type { Agent } from '~/lib/api/types';
+
+import AgentForm from './AgentForm.vue';
+import AgentList from './AgentList.vue';
+
+const props = defineProps<{
+  desc: string;
+  loadAgents: (page: number) => Promise<Agent[] | null>;
+  createAgent: (agent: Partial<Agent>) => Promise<Agent>;
+  updateAgent: (agent: Agent) => Promise<Agent | void>;
+  deleteAgent: (agent: Agent) => Promise<unknown>;
+  isAdmin?: boolean;
+}>();
+
+const notifications = useNotifications();
+const { t } = useI18n();
+
+const selectedAgent = ref<Partial<Agent>>();
+const isEditingAgent = computed(() => !!selectedAgent.value?.id);
+
+const { resetPage, data: agents, loading } = usePagination(props.loadAgents);
+
+const { doSubmit: saveAgent, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!selectedAgent.value) {
+    throw new Error("Unexpected: Can't get agent");
+  }
+
+  if (isEditingAgent.value) {
+    await props.updateAgent(selectedAgent.value as Agent);
+    selectedAgent.value = undefined;
+  } else {
+    selectedAgent.value = await props.createAgent(selectedAgent.value);
+  }
+  notifications.notify({
+    title: isEditingAgent.value ? t('admin.settings.agents.saved') : t('admin.settings.agents.created'),
+    type: 'success',
+  });
+  resetPage();
+});
+
+const { doSubmit: deleteAgent, isLoading: isDeleting } = useAsyncAction(async (_agent: Agent) => {
+  // eslint-disable-next-line no-alert
+  if (!confirm(t('admin.settings.agents.delete_confirm'))) {
+    return;
+  }
+
+  await props.deleteAgent(_agent);
+  notifications.notify({ title: t('admin.settings.agents.deleted'), type: 'success' });
+  resetPage();
+});
+
+function editAgent(agent: Agent) {
+  selectedAgent.value = cloneDeep(agent);
+}
+
+function showAddAgent() {
+  selectedAgent.value = { name: '' };
+}
+</script>

web/src/components/org/settings/OrgAgentsTab.vue

@@ -0,0 +1,28 @@
+<template>
+  <AgentManager
+    :desc="$t('org.settings.agents.desc')"
+    :load-agents="loadAgents"
+    :create-agent="createAgent"
+    :update-agent="updateAgent"
+    :delete-agent="deleteAgent"
+  />
+</template>
+
+<script lang="ts" setup>
+import { inject, type Ref } from 'vue';
+
+import AgentManager from '~/components/agent/AgentManager.vue';
+import useApiClient from '~/compositions/useApiClient';
+import type { Agent, Org } from '~/lib/api/types';
+
+const apiClient = useApiClient();
+const org = inject<Ref<Org>>('org');
+if (org === undefined) {
+  throw new Error('Unexpected: "org" should be provided at this place');
+}
+
+const loadAgents = (page: number) => apiClient.getOrgAgents(org.value.id, { page });
+const createAgent = (agent: Partial<Agent>) => apiClient.createOrgAgent(org.value.id, agent);
+const updateAgent = (agent: Agent) => apiClient.updateOrgAgent(org.value.id, agent.id, agent);
+const deleteAgent = (agent: Agent) => apiClient.deleteOrgAgent(org.value.id, agent.id);
+</script>

web/src/components/user/UserAgentsTab.vue

@@ -0,0 +1,28 @@
+<template>
+  <AgentManager
+    :desc="$t('user.settings.agents.desc')"
+    :load-agents="loadAgents"
+    :create-agent="createAgent"
+    :update-agent="updateAgent"
+    :delete-agent="deleteAgent"
+  />
+</template>
+
+<script lang="ts" setup>
+import AgentManager from '~/components/agent/AgentManager.vue';
+import useApiClient from '~/compositions/useApiClient';
+import useAuthentication from '~/compositions/useAuthentication';
+import type { Agent } from '~/lib/api/types';
+
+const apiClient = useApiClient();
+const { user } = useAuthentication();
+
+if (!user) {
+  throw new Error('Unexpected: User should be authenticated');
+}
+
+const loadAgents = (page: number) => apiClient.getOrgAgents(user.org_id, { page });
+const createAgent = (agent: Partial<Agent>) => apiClient.createOrgAgent(user.org_id, agent);
+const updateAgent = (agent: Agent) => apiClient.updateOrgAgent(user.org_id, agent.id, agent);
+const deleteAgent = (agent: Agent) => apiClient.deleteOrgAgent(user.org_id, agent.id);
+</script>

web/src/lib/api/index.ts

@@ -318,14 +318,31 @@ export default class WoodpeckerClient extends ApiClient {
     return this._post('/api/agents', agent) as Promise<Agent>;
   }
 
-  async updateAgent(agent: Partial<Agent>): Promise<unknown> {
-    return this._patch(`/api/agents/${agent.id}`, agent);
+  async updateAgent(agent: Partial<Agent>): Promise<Agent> {
+    return this._patch(`/api/agents/${agent.id}`, agent) as Promise<Agent>;
   }
 
   async deleteAgent(agent: Agent): Promise<unknown> {
     return this._delete(`/api/agents/${agent.id}`);
   }
 
+  async getOrgAgents(orgId: number, opts?: PaginationOptions): Promise<Agent[] | null> {
+    const query = encodeQueryString(opts);
+    return this._get(`/api/orgs/${orgId}/agents?${query}`) as Promise<Agent[] | null>;
+  }
+
+  async createOrgAgent(orgId: number, agent: Partial<Agent>): Promise<Agent> {
+    return this._post(`/api/orgs/${orgId}/agents`, agent) as Promise<Agent>;
+  }
+
+  async updateOrgAgent(orgId: number, agentId: number, agent: Partial<Agent>): Promise<Agent> {
+    return this._patch(`/api/orgs/${orgId}/agents/${agentId}`, agent) as Promise<Agent>;
+  }
+
+  async deleteOrgAgent(orgId: number, agentId: number): Promise<unknown> {
+    return this._delete(`/api/orgs/${orgId}/agents/${agentId}`);
+  }
+
   async getForges(opts?: PaginationOptions): Promise<Forge[] | null> {
     const query = encodeQueryString(opts);
     return this._get(`/api/forges?${query}`) as Promise<Forge[] | null>;

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

@@ -1,6 +1,8 @@
 export interface Agent {
   id: number;
   name: string;
+  owner_id: number;
+  org_id: number;
   token: string;
   created: number;
   updated: number;

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

@@ -1,8 +1,8 @@
 export interface Task {
   id: number;
-  labels: { [key: string]: string };
+  labels: Record<string, string>;
   dependencies: string[];
-  dep_status: { [key: string]: string };
+  dep_status: Record<string, string>;
   run_on: string[];
   agent_id: number;
 }

web/src/views/User.vue

@@ -14,6 +14,9 @@
     <Tab id="cli-and-api" :title="$t('user.settings.cli_and_api.cli_and_api')">
       <UserCLIAndAPITab />
     </Tab>
+    <Tab id="agents" :title="$t('admin.settings.agents.agents')">
+      <UserAgentsTab />
+    </Tab>
   </Scaffold>
 </template>
 
@@ -21,6 +24,7 @@
 import Button from '~/components/atomic/Button.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
+import UserAgentsTab from '~/components/user/UserAgentsTab.vue';
 import UserCLIAndAPITab from '~/components/user/UserCLIAndAPITab.vue';
 import UserGeneralTab from '~/components/user/UserGeneralTab.vue';
 import UserRegistriesTab from '~/components/user/UserRegistriesTab.vue';

web/src/views/org/OrgSettings.vue

@@ -18,6 +18,10 @@
     <Tab id="registries" :title="$t('registries.registries')">
       <OrgRegistriesTab />
     </Tab>
+
+    <Tab id="agents" :title="$t('admin.settings.agents.agents')">
+      <OrgAgentsTab />
+    </Tab>
   </Scaffold>
 </template>
 
@@ -28,6 +32,7 @@ import { useRouter } from 'vue-router';
 
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
+import OrgAgentsTab from '~/components/org/settings/OrgAgentsTab.vue';
 import OrgRegistriesTab from '~/components/org/settings/OrgRegistriesTab.vue';
 import OrgSecretsTab from '~/components/org/settings/OrgSecretsTab.vue';
 import { inject } from '~/compositions/useInjectProvide';