Commit 8c88889e authored by Fatih Acet's avatar Fatih Acet

Merge branch '5906-show-number-of-pods-deployed-on-deploy-boards' into 'master'

Resolve "Show number of pods deployed on Deploy Boards"

Closes #5906

See merge request gitlab-org/gitlab-ee!6955
parents bff7c4b1 cc9def05
......@@ -11,6 +11,7 @@
import _ from 'underscore';
import { n__ } from '~/locale';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import deployBoardSvg from 'ee_empty_states/icons/_deploy_board.svg';
import instanceComponent from './deploy_board_instance_component.vue';
......@@ -19,6 +20,9 @@
instanceComponent,
loadingIcon,
},
directives: {
tooltip,
},
props: {
deployBoardData: {
type: Object,
......@@ -45,8 +49,24 @@
canRenderEmptyState() {
return !this.isLoading && this.isEmpty;
},
instanceCount() {
const { instances } = this.deployBoardData;
return Array.isArray(instances) ? instances.length : 0;
},
instanceIsCompletedCount() {
const completionPercentage = this.deployBoardData.completion / 100;
const completionCount = Math.floor(completionPercentage * this.instanceCount);
return Number.isNaN(completionCount) ? 0 : completionCount;
},
instanceIsCompletedText() {
const title = n__('instance completed', 'instances completed', this.instanceIsCompletedCount);
return `${this.instanceIsCompletedCount} ${title}`;
},
instanceTitle() {
return n__('Instance', 'Instances', this.deployBoardData.instances.length);
return n__('Instance', 'Instances', this.instanceCount);
},
projectName() {
return '<projectname>';
......@@ -65,14 +85,20 @@
<div v-if="canRenderDeployBoard">
<section class="deploy-board-information">
<span>
<span
v-tooltip
:title="instanceIsCompletedText"
>
<span class="percentage">{{ deployBoardData.completion }}%</span>
<span class="text">Complete</span>
</span>
</section>
<section class="deploy-board-instances">
<p class="text">{{ instanceTitle }}</p>
<p class="text">
<span>{{ instanceTitle }}</span>
<span class="total-instances">({{ instanceCount }})</span>
</p>
<div class="deploy-board-instances-container">
<template v-for="(instance, i) in deployBoardData.instances">
......
---
title: Show total and completed instances deployed on deploy boards
merge_request: 6955
author:
type: added
......@@ -29,6 +29,15 @@ describe('Deploy Board', () => {
).toEqual(`${deployBoardMockData.completion}%`);
});
it('should render total instance count', () => {
const renderedTotal = component.$el.querySelector('.deploy-board-instances .total-instances');
const actualTotal = deployBoardMockData.instances.length;
expect(
renderedTotal.textContent,
).toEqual(`(${actualTotal})`);
});
it('should render all instances', () => {
const instances = component.$el.querySelectorAll('.deploy-board-instances-container a');
......
......@@ -8476,6 +8476,11 @@ msgstr ""
msgid "importing"
msgstr ""
msgid "instance completed"
msgid_plural "instances completed"
msgstr[0] ""
msgstr[1] ""
msgid "is invalid because there is downstream lock"
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment