mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2025-04-27 03:10:58 +00:00
68 lines
2.3 KiB
Vue
68 lines
2.3 KiB
Vue
<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 space-x-2 md:inline-block">
|
|
<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 h-8 w-8"
|
|
@click="$emit('edit', agent)"
|
|
/>
|
|
<IconButton
|
|
icon="trash"
|
|
:title="$t('admin.settings.agents.delete_agent')"
|
|
class="ml-2 h-8 w-8 hover:text-wp-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>
|