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 | 162 |
1 files changed, 77 insertions, 85 deletions
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue index 487e512c06d..000730ac1ba 100644 --- a/app/assets/javascripts/clusters_list/components/agent_table.vue +++ b/app/assets/javascripts/clusters_list/components/agent_table.vue @@ -1,6 +1,5 @@ <script> import { - GlButton, GlLink, GlModalDirective, GlTable, @@ -12,11 +11,12 @@ import { 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'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { INSTALL_AGENT_MODAL_ID, AGENT_STATUSES } from '../constants'; +import { getAgentConfigPath } from '../clusters_util'; export default { components: { - GlButton, GlLink, GlTable, GlIcon, @@ -29,10 +29,12 @@ export default { GlModalDirective, }, mixins: [timeagoMixin], - inject: ['integrationDocsUrl'], INSTALL_AGENT_MODAL_ID, AGENT_STATUSES, - TROUBLESHOOTING_LINK, + + troubleshooting_link: helpPagePath('user/clusters/agent/index', { + anchor: 'troubleshooting', + }), props: { agents: { required: true, @@ -41,112 +43,102 @@ export default { }, computed: { fields() { + const tdClass = 'gl-py-5!'; return [ { key: 'name', label: s__('ClusterAgents|Name'), + tdClass, }, { key: 'status', label: s__('ClusterAgents|Connection status'), + tdClass, }, { key: 'lastContact', label: s__('ClusterAgents|Last contact'), + tdClass, }, { key: 'configuration', label: s__('ClusterAgents|Configuration'), + tdClass, }, ]; }, }, + methods: { + getCellId(item) { + return `connection-status-${item.name}`; + }, + getAgentConfigPath, + }, }; </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-2 gl-border-b-gray-100" + class="gl-mb-4!" + 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> - <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(status)="{ item }"> + <span :id="getCellId(item)" class="gl-md-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="getCellId(item)" 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="getCellId(item)" + :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"> + <gl-link :href="$options.troubleshooting_link" target="_blank" class="gl-font-sm"> + {{ s__('ClusterAgents|Learn how to troubleshoot') }}</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(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> + <template #cell(configuration)="{ item }"> + <span data-testid="cluster-agent-configuration-link"> + <gl-link v-if="item.configFolder" :href="item.configFolder.webPath"> + {{ getAgentConfigPath(item.name) }} + </gl-link> - <span v-else>.gitlab/agents/{{ item.name }}</span> - <!-- eslint-enable @gitlab/vue-require-i18n-strings --> - </span> - </template> - </gl-table> - </div> + <span v-else>{{ getAgentConfigPath(item.name) }}</span> + </span> + </template> + </gl-table> </template> |