99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
|
<script>
|
||
|
|
import { GlCollapse, GlButton, GlIcon } from '@gitlab/ui';
|
||
|
|
import { s__ } from '~/locale';
|
||
|
|
import { AGENT_STATUSES } from '~/clusters_list/constants';
|
||
|
|
import { getAgentLastContact, getAgentStatus } from '~/clusters_list/clusters_util';
|
||
|
|
import {
|
||
|
|
INTEGRATION_STATUS_VALID_TOKEN,
|
||
|
|
INTEGRATION_STATUS_NO_TOKEN,
|
||
|
|
INTEGRATION_STATUS_RESTRICTED_CI_CD,
|
||
|
|
} from '../constants';
|
||
|
|
import AgentIntegrationStatusRow from './agent_integration_status_row.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GlCollapse,
|
||
|
|
GlButton,
|
||
|
|
GlIcon,
|
||
|
|
AgentIntegrationStatusRow,
|
||
|
|
},
|
||
|
|
i18n: {
|
||
|
|
title: s__('ClusterAgents|Integration Status'),
|
||
|
|
},
|
||
|
|
AGENT_STATUSES,
|
||
|
|
props: {
|
||
|
|
tokens: {
|
||
|
|
required: true,
|
||
|
|
type: Array,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isVisible: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
chevronIcon() {
|
||
|
|
return this.isVisible ? 'chevron-down' : 'chevron-right';
|
||
|
|
},
|
||
|
|
agentStatus() {
|
||
|
|
const lastContact = getAgentLastContact(this.tokens);
|
||
|
|
return getAgentStatus(lastContact);
|
||
|
|
},
|
||
|
|
integrationStatuses() {
|
||
|
|
const statuses = [];
|
||
|
|
|
||
|
|
if (this.agentStatus === 'active') {
|
||
|
|
statuses.push(INTEGRATION_STATUS_VALID_TOKEN);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.tokens.length) {
|
||
|
|
statuses.push(INTEGRATION_STATUS_NO_TOKEN);
|
||
|
|
}
|
||
|
|
|
||
|
|
statuses.push(INTEGRATION_STATUS_RESTRICTED_CI_CD);
|
||
|
|
|
||
|
|
return statuses;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggleCollapse() {
|
||
|
|
this.isVisible = !this.isVisible;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<gl-button
|
||
|
|
:icon="chevronIcon"
|
||
|
|
variant="link"
|
||
|
|
size="small"
|
||
|
|
class="gl-mr-3"
|
||
|
|
@click="toggleCollapse"
|
||
|
|
>
|
||
|
|
{{ $options.i18n.title }} </gl-button
|
||
|
|
><span data-testid="agent-status">
|
||
|
|
<gl-icon
|
||
|
|
:name="$options.AGENT_STATUSES[agentStatus].icon"
|
||
|
|
:class="$options.AGENT_STATUSES[agentStatus].class"
|
||
|
|
class="gl-mr-2"
|
||
|
|
/>{{ $options.AGENT_STATUSES[agentStatus].name }}
|
||
|
|
</span>
|
||
|
|
<gl-collapse v-model="isVisible" class="gl-ml-5 gl-mt-5">
|
||
|
|
<ul class="gl-list-style-none gl-pl-2 gl-mb-0">
|
||
|
|
<agent-integration-status-row
|
||
|
|
v-for="(status, index) in integrationStatuses"
|
||
|
|
:key="index"
|
||
|
|
:icon="status.icon"
|
||
|
|
:icon-class="status.iconClass"
|
||
|
|
:text="status.text"
|
||
|
|
:help-url="status.helpUrl"
|
||
|
|
:feature-name="status.featureName"
|
||
|
|
/>
|
||
|
|
</ul>
|
||
|
|
</gl-collapse>
|
||
|
|
</div>
|
||
|
|
</template>
|