Merge branch 'afontaine/show-deploy-boards-for-folders' into 'master'

Show Deploy Boards for Environments in Folders

See merge request gitlab-org/gitlab!60525

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', () => {