Show Deploy Boards for Environments in Folders

People may want to organize their environments by heavily relying on
folders, but, while we fetched the deploy board data, we never properly
parsed it or displayed it for users.

Here, we parse the deploy board data for children in setFolderContent,
as that is where the children are assigned to a folder when loaded.

We also need to update the check in setDeployBoard, as size does not
seem to exist on children environments. Instead, isFolder is used (which
captures the same information we need as a simple boolean).

Changelog: added

app/assets/javascripts/environments/components/environments_table.vue

@@ -188,15 +188,37 @@ export default {
         </div>
 
         <template v-else>
-          <div
-            is="environment-item"
-            v-for="(children, index) in model.children"
-            :key="`env-item-${i}-${index}`"
-            :model="children"
-            :can-read-environment="canReadEnvironment"
-            :table-data="tableData"
-            data-qa-selector="environment_item"
-          />
+          <template v-for="(child, index) in model.children">
+            <div
+              is="environment-item"
+              :key="`environment-row-${i}-${index}`"
+              :model="child"
+              :can-read-environment="canReadEnvironment"
+              :table-data="tableData"
+              data-qa-selector="environment_item"
+            />
+
+            <div
+              v-if="shouldRenderDeployBoard(child)"
+              :key="`deploy-board-row-${i}-${index}`"
+              class="js-deploy-board-row"
+            >
+              <div class="deploy-board-container">
+                <deploy-board
+                  :deploy-board-data="child.deployBoardData"
+                  :is-loading="child.isLoadingDeployBoard"
+                  :is-empty="child.isEmptyDeployBoard"
+                  :logs-path="child.logs_path"
+                  @changeCanaryWeight="changeCanaryWeight(child, $event)"
+                />
+              </div>
+            </div>
+            <environment-alert
+              v-if="shouldRenderAlert(model)"
+              :key="`alert-row-${i}-${index}`"
+              :environment="child"
+            />
+          </template>
 
           <div :key="`sub-div-${i}`">
             <div class="text-center gl-mt-3">

app/assets/javascripts/environments/stores/environments_store.js

@@ -185,6 +185,8 @@ export default class EnvironmentsStore {
 
       updated.isChildren = true;
 
+      updated = setDeployBoard(env, updated);
+
       return updated;
     });
 

app/assets/javascripts/environments/stores/helpers.js

@@ -4,7 +4,7 @@
  */
 export const setDeployBoard = (oldEnvironmentState, environment) => {
   let parsedEnvironment = environment;
-  if (environment.size === 1 && environment.rollout_status) {
+  if (!environment.isFolder && environment.rollout_status) {
     parsedEnvironment = {
       ...environment,
       hasDeployBoard: true,

changelogs/unreleased/afontaine-show-deploy-boards-for-folders.yml

+---
+title: Show Deploy Boards for Environments in Folders
+merge_request: 60525
+author:
+type: added

doc/user/project/deploy_boards.md

@@ -8,7 +8,13 @@ type: howto, reference
 # Deploy Boards **(FREE)**
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/1589) in [GitLab Premium](https://about.gitlab.com/pricing/) 9.0.
-> - [Moved](<https://gitlab.com/gitlab-org/gitlab/-/issues/212320>) to GitLab Free in 13.8.
+> - [Moved](https://gitlab.com/gitlab-org/gitlab/-/issues/212320) to GitLab Free in 13.8.
+> - In GitLab 13.5 and earlier, apps that consist of multiple deployments are shown as
+>   duplicates on the deploy board. This is [fixed](https://gitlab.com/gitlab-org/gitlab/-/issues/8463)
+>   in GitLab 13.6.
+> - In GitLab 13.11 and earlier, environments in folders do not show deploy boards.
+>   This is [fixed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/60525) in
+>   GitLab 13.12.
 
 GitLab Deploy Boards offer a consolidated view of the current health and
 status of each CI [environment](../../ci/environments/index.md) running on [Kubernetes](https://kubernetes.io), displaying the status
@@ -46,10 +52,6 @@ knowledge. In particular, you should be familiar with:
 - [Kubernetes namespaces](https://kubernetes.io/docs/concepts/overview/working-with-objects/namespaces/)
 - [Kubernetes canary deployments](https://kubernetes.io/docs/concepts/cluster-administration/manage-deployment/#canary-deployments)
 
-In GitLab 13.5 and earlier, apps that consist of multiple deployments are shown as
-duplicates on the deploy board. This is [fixed](https://gitlab.com/gitlab-org/gitlab/-/issues/8463)
-in GitLab 13.6.
-
 ## Use cases
 
 Since the Deploy Board is a visual representation of the Kubernetes pods for a

spec/frontend/environments/environment_table_spec.js

@@ -89,6 +89,42 @@ describe('Environment table', () => {
     expect(wrapper.find('.deploy-board-icon').exists()).toBe(true);
   });
 
+  it('should render deploy board container when data is provided for children', async () => {
+    const mockItem = {
+      name: 'review',
+      size: 1,
+      environment_path: 'url',
+      logs_path: 'url',
+      id: 1,
+      isFolder: true,
+      isOpen: true,
+      children: [
+        {
+          name: 'review/test',
+          hasDeployBoard: true,
+          deployBoardData: deployBoardMockData,
+          isDeployBoardVisible: true,
+          isLoadingDeployBoard: false,
+          isEmptyDeployBoard: false,
+        },
+      ],
+    };
+
+    await factory({
+      propsData: {
+        environments: [mockItem],
+        canCreateDeployment: false,
+        canReadEnvironment: true,
+        userCalloutsPath: '/callouts',
+        lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
+        helpCanaryDeploymentsPath: 'help/canary-deployments',
+      },
+    });
+
+    expect(wrapper.find('.js-deploy-board-row').exists()).toBe(true);
+    expect(wrapper.find('.deploy-board-icon').exists()).toBe(true);
+  });
+
   it('should toggle deploy board visibility when arrow is clicked', (done) => {
     const mockItem = {
       name: 'review',
@@ -125,7 +161,7 @@ describe('Environment table', () => {
     wrapper.find('.deploy-board-icon').trigger('click');
   });
 
-  it('should set the enviornment to change and weight when a change canary weight event is recevied', async () => {
+  it('should set the environment to change and weight when a change canary weight event is recevied', async () => {
     const mockItem = {
       name: 'review',
       size: 1,

spec/frontend/environments/environments_store_spec.js

@@ -123,6 +123,29 @@ describe('Store', () => {
 
       expect(store.state.environments[1].children.length).toEqual(serverData.length);
     });
+
+    it('should parse deploy board data for children', () => {
+      store.storeEnvironments(serverData);
+
+      store.setfolderContent(store.state.environments[1], [
+        {
+          name: 'foo',
+          size: 1,
+          latest: {
+            id: 1,
+            rollout_status: deployBoardMockData,
+          },
+        },
+      ]);
+      const result = store.state.environments[1].children[0];
+      expect(result).toMatchObject({
+        deployBoardData: deployBoardMockData,
+        hasDeployBoard: true,
+        isDeployBoardVisible: true,
+        isLoadingDeployBoard: false,
+        isEmptyDeployBoard: false,
+      });
+    });
   });
 
   describe('store pagination', () => {