diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/clusters_view_all.vue')
| -rw-r--r-- | app/assets/javascripts/clusters_list/components/clusters_view_all.vue | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters_list/components/clusters_view_all.vue b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue new file mode 100644 index 00000000000..285876e57d8 --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/clusters_view_all.vue @@ -0,0 +1,218 @@ +<script> +import { + GlCard, + GlSprintf, + GlPopover, + GlLink, + GlButton, + GlBadge, + GlLoadingIcon, + GlModalDirective, +} from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { + AGENT_CARD_INFO, + CERTIFICATE_BASED_CARD_INFO, + MAX_CLUSTERS_LIST, + INSTALL_AGENT_MODAL_ID, +} from '../constants'; +import Clusters from './clusters.vue'; +import Agents from './agents.vue'; + +export default { + components: { + GlCard, + GlSprintf, + GlPopover, + GlLink, + GlButton, + GlBadge, + GlLoadingIcon, + Clusters, + Agents, + }, + directives: { + GlModalDirective, + }, + AGENT_CARD_INFO, + CERTIFICATE_BASED_CARD_INFO, + MAX_CLUSTERS_LIST, + INSTALL_AGENT_MODAL_ID, + inject: ['addClusterPath'], + props: { + defaultBranchName: { + default: '.noBranch', + required: false, + type: String, + }, + }, + data() { + return { + loadingAgents: true, + totalAgents: null, + }; + }, + computed: { + ...mapState(['loadingClusters', 'totalClusters']), + isLoading() { + return this.loadingAgents || this.loadingClusters; + }, + agentsCardTitle() { + let cardTitle; + if (this.totalAgents > 0) { + cardTitle = { + message: AGENT_CARD_INFO.title, + number: this.totalAgents < MAX_CLUSTERS_LIST ? this.totalAgents : MAX_CLUSTERS_LIST, + total: this.totalAgents, + }; + } else { + cardTitle = { + message: AGENT_CARD_INFO.emptyTitle, + }; + } + + return cardTitle; + }, + clustersCardTitle() { + let cardTitle; + if (this.totalClusters > 0) { + cardTitle = { + message: CERTIFICATE_BASED_CARD_INFO.title, + number: this.totalClusters < MAX_CLUSTERS_LIST ? this.totalClusters : MAX_CLUSTERS_LIST, + total: this.totalClusters, + }; + } else { + cardTitle = { + message: CERTIFICATE_BASED_CARD_INFO.emptyTitle, + }; + } + + return cardTitle; + }, + }, + methods: { + cardFooterNumber(number) { + return number > MAX_CLUSTERS_LIST ? number : ''; + }, + onAgentsLoad(number) { + this.totalAgents = number; + this.loadingAgents = false; + }, + changeTab($event, tab) { + $event.preventDefault(); + this.$emit('changeTab', tab); + }, + }, +}; +</script> +<template> + <div> + <gl-loading-icon v-if="isLoading" size="md" /> + <div v-show="!isLoading" data-testid="clusters-cards-container"> + <gl-card + header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between gl-py-4" + body-class="gl-pb-0" + footer-class="gl-text-right" + > + <template #header> + <h3 data-testid="agent-card-title" class="gl-my-0 gl-font-weight-normal gl-font-size-h2"> + <gl-sprintf :message="agentsCardTitle.message" + ><template #number>{{ agentsCardTitle.number }}</template> + <template #total>{{ agentsCardTitle.total }}</template> + </gl-sprintf> + </h3> + + <gl-badge id="clusters-recommended-badge" size="md" variant="info">{{ + $options.AGENT_CARD_INFO.tooltip.label + }}</gl-badge> + + <gl-popover + target="clusters-recommended-badge" + container="viewport" + placement="bottom" + :title="$options.AGENT_CARD_INFO.tooltip.title" + > + <p class="gl-mb-0"> + <gl-sprintf :message="$options.AGENT_CARD_INFO.tooltip.text"> + <template #link="{ content }"> + <gl-link + :href="$options.AGENT_CARD_INFO.tooltip.link" + target="_blank" + class="gl-font-sm" + > + {{ content }}</gl-link + > + </template> + </gl-sprintf> + </p> + </gl-popover> + </template> + + <agents + :limit="$options.MAX_CLUSTERS_LIST" + :default-branch-name="defaultBranchName" + :is-child-component="true" + @onAgentsLoad="onAgentsLoad" + /> + + <template #footer> + <gl-link + v-if="totalAgents" + data-testid="agents-tab-footer-link" + :href="`?tab=${$options.AGENT_CARD_INFO.tabName}`" + @click="changeTab($event, $options.AGENT_CARD_INFO.tabName)" + ><gl-sprintf :message="$options.AGENT_CARD_INFO.footerText" + ><template #number>{{ cardFooterNumber(totalAgents) }}</template></gl-sprintf + ></gl-link + ><gl-button + v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID" + class="gl-ml-4" + category="secondary" + variant="confirm" + >{{ $options.AGENT_CARD_INFO.actionText }}</gl-button + > + </template> + </gl-card> + + <gl-card + class="gl-mt-6" + header-class="gl-bg-white gl-display-flex gl-align-items-center gl-justify-content-space-between" + body-class="gl-pb-0" + footer-class="gl-text-right" + > + <template #header> + <h3 + class="gl-my-1 gl-font-weight-normal gl-font-size-h2" + data-testid="clusters-card-title" + > + <gl-sprintf :message="clustersCardTitle.message" + ><template #number>{{ clustersCardTitle.number }}</template> + <template #total>{{ clustersCardTitle.total }}</template> + </gl-sprintf> + </h3> + </template> + + <clusters :limit="$options.MAX_CLUSTERS_LIST" :is-child-component="true" /> + + <template #footer> + <gl-link + v-if="totalClusters" + data-testid="clusters-tab-footer-link" + :href="`?tab=${$options.CERTIFICATE_BASED_CARD_INFO.tabName}`" + @click="changeTab($event, $options.CERTIFICATE_BASED_CARD_INFO.tabName)" + ><gl-sprintf :message="$options.CERTIFICATE_BASED_CARD_INFO.footerText" + ><template #number>{{ cardFooterNumber(totalClusters) }}</template></gl-sprintf + ></gl-link + ><gl-button + category="secondary" + data-qa-selector="connect_existing_cluster_button" + variant="confirm" + class="gl-ml-4" + :href="addClusterPath" + >{{ $options.CERTIFICATE_BASED_CARD_INFO.actionText }}</gl-button + > + </template> + </gl-card> + </div> + </div> +</template> |