Sort Environments in Table by Last Updated

Ensure folders push to the top, if both have no last update, sort by
name.

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.

It is done this way, as `underscore`'s sort API is very basic: simple
comparisons, sorting by ascending only.

1 files changed, 35 insertions, 1 deletions

diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index e2c304de00a..eef141a07ba 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -3,6 +3,7 @@
  * Render environments table.
  */
 import { GlLoadingIcon } from '@gitlab/ui';
+import _ from 'underscore';
 import environmentItem from './environment_item.vue';
 
 export default {
@@ -24,6 +25,15 @@ export default {
       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 +41,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 +87,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}`"