mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2025-10-22 21:22:34 +00:00
Implement org/user agents (#3539)
This commit is contained in:
6543
GitHub
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user