UI: Add allocation directory sorting

ui/app/controllers/allocations/allocation/task/fs.js

@@ -4,6 +4,14 @@ import { filterBy } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
+  queryParams: {
+    sortProperty: 'sort',
+    sortDescending: 'desc',
+  },
+
+  sortProperty: 'Name',
+  sortDescending: false,
+
   path: null,
   task: null,
   directoryEntries: null,
@@ -12,6 +20,28 @@ export default Controller.extend({
   directories: filterBy('directoryEntries', 'IsDir'),
   files: filterBy('directoryEntries', 'IsDir', false),
 
+  sortedDirectoryEntries: computed(
+    'directoryEntries.[]',
+    'sortProperty',
+    'sortDescending',
+    function() {
+      const sortProperty = this.sortProperty;
+
+      const directorySortProperty = sortProperty === 'Size' ? 'Name' : sortProperty;
+
+      const sortedDirectories = this.directories.sortBy(directorySortProperty);
+      const sortedFiles = this.files.sortBy(sortProperty);
+
+      const sortedDirectoryEntries = sortedDirectories.concat(sortedFiles);
+
+      if (this.sortDescending) {
+        return sortedDirectoryEntries.reverse();
+      } else {
+        return sortedDirectoryEntries;
+      }
+    }
+  ),
+
   breadcrumbs: computed('path', function() {
     const breadcrumbs = this.path
       .split('/')

ui/app/styles/components/boxed-section.scss

@@ -18,6 +18,10 @@
     .pull-right {
       margin-left: auto;
     }
+
+    &.is-compact {
+      padding: 0.75em;
+    }
   }
 
   .boxed-section-head {

ui/app/styles/core/table.scss

@@ -33,6 +33,10 @@
     td {
       padding: 0.75em;
     }
+
+    .is-selectable a {
+      padding: 0.75em;
+    }
   }
 
   &.is-darkened {
@@ -149,33 +153,50 @@
           padding: 0.75em 1.5em;
           width: 100%;
           text-decoration: none;
+          position: relative;
 
           &:hover {
             background-color: darken($white-ter, 5%);
           }
+
+          &::before,
+          &::after {
+            position: absolute;
+            pointer-events: none;
+            color: $grey-light;
+          }
+
+          &::after {
+            transform: translateX(6px);
+          }
+
+          &::before {
+            transform: translateX(-20px);
+          }
         }
       }
 
       &.is-active {
-        position: relative;
-
-        &::after {
-          content: '';
-          width: 10px;
-          right: 1.5em;
-          top: 0.75em;
-          bottom: 0.75em;
-          position: absolute;
-          display: block;
-          pointer-events: none;
+        &.desc a::after {
+          content: '⬆';
         }
 
-        &.asc::after {
+        &.asc a::after {
           content: '⬇';
         }
 
-        &.desc::after {
-          content: '⬆';
+        &.has-text-right {
+          a::after {
+            content: none;
+          }
+
+          &.desc a::before {
+            content: '⬆';
+          }
+
+          &.asc a::before {
+            content: '⬇';
+          }
         }
       }
 

ui/app/templates/allocations/allocation/task/fs.hbs

@@ -2,7 +2,7 @@
 <section class="section is-closer">
   {{#if task.isRunning}}
     <div class="fs-explorer boxed-section">
-      <div class="boxed-section-head">
+      <div class="boxed-section-head is-compact">
         <nav class="breadcrumb" data-test-fs-breadcrumbs>
           <ul>
             <li class={{if breadcrumbs "" "is-active"}}>
@@ -26,21 +26,20 @@
           <div data-test-file-viewer>placeholder file viewer</div>
         </div>
       {{else}}
-        {{! template-lint-disable table-groups }}
-        <table class="table boxed-section-body is-full-bleed is-compact">
+        {{#list-table
+          source=sortedDirectoryEntries
+          sortProperty=sortProperty
+          sortDescending=sortDescending
+          class="boxed-section-body is-full-bleed is-compact" as |t|}}
           {{#if directoryEntries}}
-            <thead>
-              <tr>
-                <th class="is-two-thirds">Name</th>
-                <th class="has-text-right">File Size</th>
-                <th class="has-text-right">Last Modified</th>
-              </tr>
-            </thead>
-            <tbody>
-              {{#each (append directories files) as |entry|}}
-                {{fs-directory-entry path=path task=task entry=entry}}
-              {{/each}}
-            </tbody>
+            {{#t.head}}
+              {{#t.sort-by prop="Name" class="is-two-thirds"}}Name{{/t.sort-by}}
+              {{#t.sort-by prop="Size" class="has-text-right"}}File Size{{/t.sort-by}}
+              {{#t.sort-by prop="ModTime" class="has-text-right"}}Last Modified{{/t.sort-by}}
+            {{/t.head}}
+            {{#t.body as |row|}}
+              {{fs-directory-entry path=path task=task entry=row.model}}
+            {{/t.body}}
           {{else}}
             <tbody>
               <tr data-test-entry>
@@ -51,7 +50,7 @@
               </tr>
             </tbody>
           {{/if}}
-        </table>
+        {{/list-table}}
       {{/if}}
     </div>
   {{else}}

ui/tests/acceptance/task-fs-test.js

@@ -5,6 +5,7 @@ import { setupApplicationTest } from 'ember-qunit';
 
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import Response from 'ember-cli-mirage/response';
+import moment from 'moment';
 
 import FS from 'nomad-ui/tests/pages/allocations/task/fs';
 
@@ -129,6 +130,131 @@ module('Acceptance | task fs', function(hooks) {
     assert.equal(FS.breadcrumbs.length, 2);
   });
 
+  test('sorting allocation filesystem directory', async function(assert) {
+    this.server.get('/client/fs/ls/:allocation_id', () => {
+      return [
+        {
+          Name: 'aaa-big-old-file',
+          IsDir: false,
+          Size: 19190000,
+          ModTime: moment()
+            .subtract(1, 'year')
+            .format(),
+        },
+        {
+          Name: 'mmm-small-mid-file',
+          IsDir: false,
+          Size: 1919,
+          ModTime: moment()
+            .subtract(6, 'month')
+            .format(),
+        },
+        {
+          Name: 'zzz-med-new-file',
+          IsDir: false,
+          Size: 191900,
+          ModTime: moment().format(),
+        },
+        {
+          Name: 'aaa-big-old-directory',
+          IsDir: true,
+          Size: 19190000,
+          ModTime: moment()
+            .subtract(1, 'year')
+            .format(),
+        },
+        {
+          Name: 'mmm-small-mid-directory',
+          IsDir: true,
+          Size: 1919,
+          ModTime: moment()
+            .subtract(6, 'month')
+            .format(),
+        },
+        {
+          Name: 'zzz-med-new-directory',
+          IsDir: true,
+          Size: 191900,
+          ModTime: moment().format(),
+        },
+      ];
+    });
+
+    await FS.visitPath({ id: allocation.id, name: task.name, path: '/' });
+
+    assert.deepEqual(FS.directoryEntryNames(), [
+      'aaa-big-old-directory',
+      'mmm-small-mid-directory',
+      'zzz-med-new-directory',
+      'aaa-big-old-file',
+      'mmm-small-mid-file',
+      'zzz-med-new-file',
+    ]);
+
+    await FS.sortBy('Name');
+
+    assert.deepEqual(FS.directoryEntryNames(), [
+      'zzz-med-new-file',
+      'mmm-small-mid-file',
+      'aaa-big-old-file',
+      'zzz-med-new-directory',
+      'mmm-small-mid-directory',
+      'aaa-big-old-directory',
+    ]);
+
+    await FS.sortBy('ModTime');
+
+    assert.deepEqual(FS.directoryEntryNames(), [
+      'zzz-med-new-file',
+      'mmm-small-mid-file',
+      'aaa-big-old-file',
+      'zzz-med-new-directory',
+      'mmm-small-mid-directory',
+      'aaa-big-old-directory',
+    ]);
+
+    await FS.sortBy('ModTime');
+
+    assert.deepEqual(FS.directoryEntryNames(), [
+      'aaa-big-old-directory',
+      'mmm-small-mid-directory',
+      'zzz-med-new-directory',
+      'aaa-big-old-file',
+      'mmm-small-mid-file',
+      'zzz-med-new-file',
+    ]);
+
+    await FS.sortBy('Size');
+
+    assert.deepEqual(
+      FS.directoryEntryNames(),
+      [
+        'aaa-big-old-file',
+        'zzz-med-new-file',
+        'mmm-small-mid-file',
+        'zzz-med-new-directory',
+        'mmm-small-mid-directory',
+        'aaa-big-old-directory',
+      ],
+      'expected files to be sorted by descending size and directories to be sorted by descending name'
+    );
+
+    await FS.sortBy('Size');
+
+    assert.deepEqual(
+      FS.directoryEntryNames(),
+      [
+        'aaa-big-old-directory',
+        'mmm-small-mid-directory',
+        'zzz-med-new-directory',
+        'mmm-small-mid-file',
+        'zzz-med-new-file',
+        'aaa-big-old-file',
+      ],
+      'expected directories to be sorted by name and files to be sorted by ascending size'
+    );
+  });
+
   test('viewing a file', async function(assert) {
     await FS.visitPath({ id: allocation.id, name: task.name, path: '/' });
     await FS.directoryEntries[2].visit();

ui/tests/pages/allocations/task/fs.js

@@ -25,6 +25,18 @@ export default create({
     isActive: hasClass('is-active'),
   }),
 
+  sortOptions: collection('[data-test-sort-by]', {
+    id: attribute('data-test-sort-by'),
+    sort: clickable(),
+  }),
+
+  sortBy(id) {
+    return this.sortOptions
+      .toArray()
+      .findBy('id', id)
+      .sort();
+  },
+
   directoryEntries: collection('[data-test-entry]', {
     name: text('[data-test-name]'),
 
@@ -39,6 +51,10 @@ export default create({
     path: attribute('href', 'a'),
   }),
 
+  directoryEntryNames() {
+    return this.directoryEntries.toArray().mapBy('name');
+  },
+
   hasEmptyState: isPresent('[data-test-not-running]'),
   emptyState: {
     headline: text('[data-test-not-running-headline]'),