1 files changed, 27 insertions, 4 deletions
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index c1b3eabec16..d13c7204285 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -15,6 +15,7 @@ export default {
     CanaryDeploymentCallout: () =>
       import('ee_component/environments/components/canary_deployment_callout.vue'),
     EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'),
+    CanaryUpdateModal: () => import('ee_component/environments/components/canary_update_modal.vue'),
   },
   props: {
     environments: {
@@ -58,6 +59,12 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      canaryWeight: 0,
+      environmentToChange: null,
+    };
+  },
   computed: {
     sortedEnvironments() {
       return this.sortEnvironments(this.environments).map(env =>
@@ -71,7 +78,7 @@ export default {
         // percent spacing for cols, should add up to 100
         name: {
           title: s__('Environments|Environment'),
-          spacing: 'section-15',
+          spacing: 'section-10',
         },
         deploy: {
           title: s__('Environments|Deployment'),
@@ -83,18 +90,23 @@ export default {
         },
         commit: {
           title: s__('Environments|Commit'),
-          spacing: 'section-20',
+          spacing: 'section-15',
         },
         date: {
           title: s__('Environments|Updated'),
           spacing: 'section-10',
         },
+        upcoming: {
+          title: s__('Environments|Upcoming'),
+          mobileTitle: s__('Environments|Upcoming deployment'),
+          spacing: 'section-10',
+        },
         autoStop: {
           title: s__('Environments|Auto stop in'),
-          spacing: 'section-5',
+          spacing: 'section-10',
         },
         actions: {
-          spacing: 'section-25',
+          spacing: 'section-20',
         },
       };
     },
@@ -139,11 +151,16 @@ export default {
         sortBy(env => (env.isFolder ? -1 : 1)),
       )(environments);
     },
+    changeCanaryWeight(model, weight) {
+      this.environmentToChange = model;
+      this.canaryWeight = weight;
+    },
   },
 };
 </script>
 <template>
   <div class="ci-table" role="grid">
+    <canary-update-modal :environment="environmentToChange" :weight="canaryWeight" />
     <div class="gl-responsive-table-row table-row-header" role="row">
       <div class="table-section" :class="tableData.name.spacing" role="columnheader">
         {{ tableData.name.title }}
@@ -160,6 +177,9 @@ export default {
       <div class="table-section" :class="tableData.date.spacing" role="columnheader">
         {{ tableData.date.title }}
       </div>
+      <div class="table-section" :class="tableData.upcoming.spacing" role="columnheader">
+        {{ tableData.upcoming.title }}
+      </div>
       <div class="table-section" :class="tableData.autoStop.spacing" role="columnheader">
         {{ tableData.autoStop.title }}
       </div>
@@ -171,6 +191,7 @@ export default {
         :model="model"
         :can-read-environment="canReadEnvironment"
         :table-data="tableData"
+        data-qa-selector="environment_item"
       />
 
       <div
@@ -185,6 +206,7 @@ export default {
             :is-loading="model.isLoadingDeployBoard"
             :is-empty="model.isEmptyDeployBoard"
             :logs-path="model.logs_path"
+            @changeCanaryWeight="changeCanaryWeight(model, $event)"
           />
         </div>
       </div>
@@ -207,6 +229,7 @@ export default {
             :model="children"
             :can-read-environment="canReadEnvironment"
             :table-data="tableData"
+            data-qa-selector="environment_item"
           />
 
           <div :key="`sub-div-${i}`">