diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/agent_table.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/agent_table.vue | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue new file mode 100644 index 00000000000..487e512c06d --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/agent_table.vue @@ -0,0 +1,152 @@ +<script> +import { + GlButton, + GlLink, + GlModalDirective, + GlTable, + GlIcon, + GlSprintf, + GlTooltip, + GlPopover, +} from '@gitlab/ui'; +import { s__ } from '~/locale'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, TROUBLESHOOTING_LINK } from '../constants'; + +export default { + components: { + GlButton, + GlLink, + GlTable, + GlIcon, + GlSprintf, + GlTooltip, + GlPopover, + TimeAgoTooltip, + }, + directives: { + GlModalDirective, + }, + mixins: [timeagoMixin], + inject: ['integrationDocsUrl'], + INSTALL_AGENT_MODAL_ID, + AGENT_STATUSES, + TROUBLESHOOTING_LINK, + props: { + agents: { + required: true, + type: Array, + }, + }, + computed: { + fields() { + return [ + { + key: 'name', + label: s__('ClusterAgents|Name'), + }, + { + key: 'status', + label: s__('ClusterAgents|Connection status'), + }, + { + key: 'lastContact', + label: s__('ClusterAgents|Last contact'), + }, + { + key: 'configuration', + label: s__('ClusterAgents|Configuration'), + }, + ]; + }, + }, +}; +</script> + +<template> + <div> + <div class="gl-display-block gl-text-right gl-my-3"> + <gl-button + v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID" + variant="confirm" + category="primary" + >{{ s__('ClusterAgents|Install a new GitLab Agent') }} + </gl-button> + </div> + + <gl-table + :items="agents" + :fields="fields" + stacked="md" + head-variant="white" + thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100" + data-testid="cluster-agent-list-table" + > + <template #cell(name)="{ item }"> + <gl-link :href="item.webPath" data-testid="cluster-agent-name-link"> + {{ item.name }} + </gl-link> + </template> + + <template #cell(status)="{ item }"> + <span + :id="`connection-status-${item.name}`" + class="gl-pr-5" + data-testid="cluster-agent-connection-status" + > + <span :class="$options.AGENT_STATUSES[item.status].class" class="gl-mr-3"> + <gl-icon :name="$options.AGENT_STATUSES[item.status].icon" :size="12" /></span + >{{ $options.AGENT_STATUSES[item.status].name }} + </span> + <gl-tooltip + v-if="item.status === 'active'" + :target="`connection-status-${item.name}`" + placement="right" + > + <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.title" + ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template> + </gl-sprintf> + </gl-tooltip> + <gl-popover + v-else + :target="`connection-status-${item.name}`" + :title="$options.AGENT_STATUSES[item.status].tooltip.title" + placement="right" + container="viewport" + > + <p> + <gl-sprintf :message="$options.AGENT_STATUSES[item.status].tooltip.body" + ><template #timeAgo>{{ timeFormatted(item.lastContact) }}</template></gl-sprintf + > + </p> + <p class="gl-mb-0"> + {{ s__('ClusterAgents|For more troubleshooting information go to') }} + <gl-link :href="$options.TROUBLESHOOTING_LINK" target="_blank" class="gl-font-sm"> + {{ $options.TROUBLESHOOTING_LINK }}</gl-link + > + </p> + </gl-popover> + </template> + + <template #cell(lastContact)="{ item }"> + <span data-testid="cluster-agent-last-contact"> + <time-ago-tooltip v-if="item.lastContact" :time="item.lastContact" /> + <span v-else>{{ s__('ClusterAgents|Never') }}</span> + </span> + </template> + + <template #cell(configuration)="{ item }"> + <span data-testid="cluster-agent-configuration-link"> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <gl-link v-if="item.configFolder" :href="item.configFolder.webPath"> + .gitlab/agents/{{ item.name }} + </gl-link> + + <span v-else>.gitlab/agents/{{ item.name }}</span> + <!-- eslint-enable @gitlab/vue-require-i18n-strings --> + </span> + </template> + </gl-table> + </div> +</template> |