1 files changed, 71 insertions, 8 deletions

diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index e2c304de00a..55613d815ce 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -3,27 +3,40 @@
  * Render environments table.
  */
 import { GlLoadingIcon } from '@gitlab/ui';
-import environmentItem from './environment_item.vue';
+import _ from 'underscore';
+import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin';
+import EnvironmentItem from './environment_item.vue';
 
 export default {
   components: {
-    environmentItem,
+    EnvironmentItem,
     GlLoadingIcon,
+    DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'),
+    CanaryDeploymentCallout: () =>
+      import('ee_component/environments/components/canary_deployment_callout.vue'),
   },
-
+  mixins: [environmentTableMixin],
   props: {
     environments: {
       type: Array,
       required: true,
       default: () => [],
     },
-
     canReadEnvironment: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
+  computed: {
+    sortedEnvironments() {
+      return this.sortEnvironments(this.environments).map(env =>
+        this.shouldRenderFolderContent(env)
+          ? { ...env, children: this.sortEnvironments(env.children) }
+          : env,
+      );
+    },
+  },
   methods: {
     folderUrl(model) {
       return `${window.location.pathname}/folders/${model.folderName}`;
@@ -31,6 +44,30 @@ export default {
     shouldRenderFolderContent(env) {
       return env.isFolder && env.isOpen && env.children && env.children.length > 0;
     },
+    sortEnvironments(environments) {
+      /*
+       * The sorting algorithm should sort in the following priorities:
+       *
+       * 1. folders first,
+       * 2. last updated descending,
+       * 3. by name ascending,
+       *
+       * the sorting algorithm must:
+       *
+       * 1. Sort by name ascending,
+       * 2. Reverse (sort by name descending),
+       * 3. Sort by last deployment ascending,
+       * 4. Reverse (last deployment descending, name ascending),
+       * 5. Put folders first.
+       */
+      return _.chain(environments)
+        .sortBy(env => (env.isFolder ? env.folderName : env.name))
+        .reverse()
+        .sortBy(env => (env.last_deployment ? env.last_deployment.created_at : '0000'))
+        .reverse()
+        .sortBy(env => (env.isFolder ? -1 : 1))
+        .value();
+    },
   },
 };
 </script>
@@ -53,7 +90,7 @@ export default {
         {{ s__('Environments|Updated') }}
       </div>
     </div>
-    <template v-for="(model, i) in environments" :model="model">
+    <template v-for="(model, i) in sortedEnvironments" :model="model">
       <div
         is="environment-item"
         :key="`environment-item-${i}`"
@@ -61,6 +98,21 @@ export default {
         :can-read-environment="canReadEnvironment"
       />
 
+      <div
+        v-if="shouldRenderDeployBoard(model)"
+        :key="`deploy-board-row-${i}`"
+        class="js-deploy-board-row"
+      >
+        <div class="deploy-board-container">
+          <deploy-board
+            :deploy-board-data="model.deployBoardData"
+            :is-loading="model.isLoadingDeployBoard"
+            :is-empty="model.isEmptyDeployBoard"
+            :logs-path="model.logs_path"
+          />
+        </div>
+      </div>
+
       <template v-if="shouldRenderFolderContent(model)">
         <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
           <gl-loading-icon :size="2" class="prepend-top-16" />
@@ -77,13 +129,24 @@ export default {
 
           <div :key="`sub-div-${i}`">
             <div class="text-center prepend-top-10">
-              <a :href="folderUrl(model)" class="btn btn-default">{{
-                s__('Environments|Show all')
-              }}</a>
+              <a :href="folderUrl(model)" class="btn btn-default">
+                {{ s__('Environments|Show all') }}
+              </a>
             </div>
           </div>
         </template>
       </template>
+
+      <template v-if="shouldShowCanaryCallout(model)">
+        <canary-deployment-callout
+          :key="`canary-promo-${i}`"
+          :canary-deployment-feature-id="canaryDeploymentFeatureId"
+          :user-callouts-path="userCalloutsPath"
+          :lock-promotion-svg-path="lockPromotionSvgPath"
+          :help-canary-deployments-path="helpCanaryDeploymentsPath"
+          :data-js-canary-promo-key="i"
+        />
+      </template>
     </template>
   </div>
 </template>