debian-mirror-gitlab/app/assets/javascripts/clusters/agents/components/token_table.vue
2022-07-16 19:58:13 +02:00

141 lines
3.9 KiB
Vue

<script>
import { GlEmptyState, GlTable, GlTooltip, GlTruncate } from '@gitlab/ui';
import { s__ } from '~/locale';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import CreateTokenButton from './create_token_button.vue';
import RevokeTokenButton from './revoke_token_button.vue';
export default {
components: {
GlEmptyState,
GlTable,
GlTooltip,
GlTruncate,
TimeAgoTooltip,
CreateTokenButton,
RevokeTokenButton,
},
i18n: {
createdBy: s__('ClusterAgents|Created by'),
createToken: s__('ClusterAgents|You will need to create a token to connect to your agent'),
dateCreated: s__('ClusterAgents|Date created'),
description: s__('ClusterAgents|Description'),
lastUsed: s__('ClusterAgents|Last contact'),
name: s__('ClusterAgents|Name'),
neverUsed: s__('ClusterAgents|Never'),
noTokens: s__('ClusterAgents|This agent has no tokens'),
unknownUser: s__('ClusterAgents|Unknown user'),
},
props: {
tokens: {
required: true,
type: Array,
},
clusterAgentId: {
required: true,
type: String,
},
cursor: {
required: true,
type: Object,
},
},
computed: {
fields() {
return [
{
key: 'name',
label: this.$options.i18n.name,
tdAttr: { 'data-testid': 'agent-token-name' },
},
{
key: 'lastUsed',
label: this.$options.i18n.lastUsed,
tdAttr: { 'data-testid': 'agent-token-used' },
},
{
key: 'createdAt',
label: this.$options.i18n.dateCreated,
tdAttr: { 'data-testid': 'agent-token-created-time' },
},
{
key: 'createdBy',
label: this.$options.i18n.createdBy,
tdAttr: { 'data-testid': 'agent-token-created-user' },
},
{
key: 'description',
label: this.$options.i18n.description,
tdAttr: { 'data-testid': 'agent-token-description' },
},
{
key: 'actions',
label: '',
tdAttr: { 'data-testid': 'agent-token-revoke' },
},
];
},
},
methods: {
createdByName(token) {
return token?.createdByUser?.name || this.$options.i18n.unknownUser;
},
},
};
</script>
<template>
<div v-if="tokens.length">
<create-token-button
class="gl-text-right gl-my-5"
:cluster-agent-id="clusterAgentId"
:cursor="cursor"
/>
<gl-table
:items="tokens"
:fields="fields"
fixed
stacked="md"
head-variant="white"
thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
>
<template #cell(lastUsed)="{ item }">
<time-ago-tooltip v-if="item.lastUsedAt" :time="item.lastUsedAt" />
<span v-else>{{ $options.i18n.neverUsed }}</span>
</template>
<template #cell(createdAt)="{ item }">
<time-ago-tooltip :time="item.createdAt" />
</template>
<template #cell(createdBy)="{ item }">
<span>{{ createdByName(item) }}</span>
</template>
<template #cell(description)="{ item }">
<div v-if="item.description" :id="`tooltip-description-container-${item.id}`">
<gl-truncate :id="`tooltip-description-${item.id}`" :text="item.description" />
<gl-tooltip
:container="`tooltip-description-container-${item.id}`"
:target="`tooltip-description-${item.id}`"
placement="top"
>
{{ item.description }}
</gl-tooltip>
</div>
</template>
<template #cell(actions)="{ item }">
<revoke-token-button :token="item" :cluster-agent-id="clusterAgentId" :cursor="cursor" />
</template>
</gl-table>
</div>
<gl-empty-state v-else :title="$options.i18n.noTokens">
<template #actions>
<create-token-button :cluster-agent-id="clusterAgentId" :cursor="cursor" />
</template>
</gl-empty-state>
</template>