Resolve "Show number of pods deployed on Deploy Boards"

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -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">

ee/changelogs/unreleased/5906-show-number-of-pods-deployed-on-deploy-boards.yml

+---
+title: Show total and completed instances deployed on deploy boards
+merge_request: 6955
+author:
+type: added

ee/spec/javascripts/environments/deploy_board_component_spec.js

@@ -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');
 

locale/gitlab.pot

@@ -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 ""