UI: Add allocation directory rendering (#5873)

This lets users navigate the allocation filesystem. It doesn’t
support viewing actual files yet.

ui/app/adapters/task-state.js

@@ -0,0 +1,37 @@
+import ApplicationAdapter from './application';
+import { inject as service } from '@ember/service';
+
+export default ApplicationAdapter.extend({
+  token: service(),
+
+  ls(model, path) {
+    return this.token
+      .authorizedRequest(`/v1/client/fs/ls/${model.allocation.id}?path=${path}`)
+      .then(handleFSResponse);
+  },
+
+  stat(model, path) {
+    return this.token
+      .authorizedRequest(`/v1/client/fs/stat/${model.allocation.id}?path=${path}`)
+      .then(handleFSResponse);
+  },
+});
+
+async function handleFSResponse(response) {
+  if (response.ok) {
+    return response.json();
+  } else {
+    const body = await response.text();
+
+    // TODO update this if/when endpoint returns 404 as expected
+    const statusIs500 = response.status === 500;
+    const bodyIncludes404Text = body.includes('no such file or directory');
+
+    const translatedCode = statusIs500 && bodyIncludes404Text ? 404 : response.status;
+
+    throw {
+      code: translatedCode,
+      toString: () => body,
+    };
+  }
+}

ui/app/components/fs-directory-entry.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+
+export default Component.extend({
+  tagName: '',
+
+  pathToEntry: computed('path', 'entry.Name', function() {
+    const pathWithNoLeadingSlash = this.get('path').replace(/^\//, '');
+    const name = this.get('entry.Name');
+
+    if (isEmpty(pathWithNoLeadingSlash)) {
+      return name;
+    } else {
+      return `${pathWithNoLeadingSlash}/${name}`;
+    }
+  }),
+});

ui/app/components/task-subnav.js

@@ -0,0 +1,14 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { equal, or } from '@ember/object/computed';
+
+export default Component.extend({
+  router: service(),
+
+  tagName: '',
+
+  fsIsActive: equal('router.currentRouteName', 'allocations.allocation.task.fs'),
+  fsRootIsActive: equal('router.currentRouteName', 'allocations.allocation.task.fs-root'),
+
+  filesLinkActive: or('fsIsActive', 'fsRootIsActive'),
+});

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

@@ -0,0 +1,3 @@
+import FSController from './fs';
+
+export default FSController.extend();

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

@@ -0,0 +1,43 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { filterBy } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
+
+export default Controller.extend({
+  path: null,
+  task: null,
+  directoryEntries: null,
+  isFile: null,
+
+  directories: filterBy('directoryEntries', 'IsDir'),
+  files: filterBy('directoryEntries', 'IsDir', false),
+
+  breadcrumbs: computed('path', function() {
+    const breadcrumbs = this.path
+      .split('/')
+      .reject(isEmpty)
+      .reduce((breadcrumbs, pathSegment, index) => {
+        let breadcrumbPath;
+
+        if (index > 0) {
+          const lastBreadcrumb = breadcrumbs[index - 1];
+          breadcrumbPath = `${lastBreadcrumb.path}/${pathSegment}`;
+        } else {
+          breadcrumbPath = pathSegment;
+        }
+
+        breadcrumbs.push({
+          name: pathSegment,
+          path: breadcrumbPath,
+        });
+
+        return breadcrumbs;
+      }, []);
+
+    if (breadcrumbs.length) {
+      breadcrumbs[breadcrumbs.length - 1].isLast = true;
+    }
+
+    return breadcrumbs;
+  }),
+});

ui/app/models/task-state.js

@@ -47,4 +47,12 @@ export default Fragment.extend({
   restart() {
     return this.allocation.restart(this.name);
   },
+
+  ls(path) {
+    return this.store.adapterFor('task-state').ls(this, path);
+  },
+
+  stat(path) {
+    return this.store.adapterFor('task-state').stat(this, path);
+  },
 });

ui/app/router.js

@@ -32,9 +32,8 @@ Router.map(function() {
     this.route('allocation', { path: '/:allocation_id' }, function() {
       this.route('task', { path: '/:name' }, function() {
         this.route('logs');
-        this.route('fs', function() {
-          this.route('path', { path: '/*path' });
-        });
+        this.route('fs-root', { path: '/fs' });
+        this.route('fs', { path: '/fs/*path' });
       });
     });
   });

ui/app/routes/allocations/allocation/task/fs-root.js

@@ -0,0 +1,5 @@
+import FSRoute from './fs';
+
+export default FSRoute.extend({
+  templateName: 'allocations/allocation/task/fs',
+});

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

@@ -0,0 +1,37 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+import notifyError from 'nomad-ui/utils/notify-error';
+
+export default Route.extend({
+  model({ path = '/' }) {
+    const decodedPath = decodeURIComponent(path);
+    const task = this.modelFor('allocations.allocation.task');
+
+    const pathWithTaskName = `${task.name}${decodedPath.startsWith('/') ? '' : '/'}${decodedPath}`;
+
+    return task
+      .stat(pathWithTaskName)
+      .then(statJson => {
+        if (statJson.IsDir) {
+          return RSVP.hash({
+            path: decodedPath,
+            task,
+            directoryEntries: task.ls(pathWithTaskName).catch(notifyError(this)),
+            isFile: false,
+          });
+        } else {
+          return {
+            path: decodedPath,
+            task,
+            isFile: true,
+          };
+        }
+      })
+      .catch(notifyError(this));
+  },
+
+  setupController(controller, { path, task, directoryEntries, isFile } = {}) {
+    this._super(...arguments);
+    controller.setProperties({ path, task, directoryEntries, isFile });
+  },
+});

ui/app/styles/components.scss

@@ -7,6 +7,7 @@
 @import './components/ember-power-select';
 @import './components/empty-message';
 @import './components/error-container';
+@import './components/fs-explorer';
 @import './components/gutter';
 @import './components/gutter-toggle';
 @import './components/inline-definitions';

ui/app/styles/components/fs-explorer.scss

@@ -0,0 +1,73 @@
+.fs-explorer {
+  width: 100%;
+
+  .table.boxed-section-body.is-full-bleed {
+    border: 1px solid $grey-blue;
+  }
+
+  tbody {
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      &:hover {
+        .name {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  a {
+    position: relative;
+
+    // This is adapted from Bulma’s .button.is-loading::after
+    &.ember-transitioning-in::after {
+      animation: spinAround 500ms infinite linear;
+      border: 2px solid $grey-light;
+      border-radius: 290486px;
+      border-right-color: transparent;
+      border-top-color: transparent;
+      content: '';
+      display: block;
+      height: 1em;
+      width: 1em;
+      position: absolute;
+      right: -1.5em;
+      top: calc(50% - (1em / 2));
+    }
+  }
+
+  .breadcrumb {
+    margin: 0;
+
+    li::before {
+      color: $grey-light;
+    }
+
+    a {
+      padding-top: 0;
+      padding-bottom: 0;
+      color: $blue;
+      opacity: 1;
+      font-weight: $weight-bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &.ember-transitioning-in {
+        margin-right: 1.5em;
+
+        &::after {
+          right: -1em;
+        }
+      }
+    }
+
+    .is-active a {
+      color: $black;
+    }
+  }
+}

ui/app/styles/core/tabs.scss

@@ -41,6 +41,10 @@
 
     + * {
       margin-top: 5em;
+
+      &.is-closer {
+        margin-top: calc(3.5em + 1px);
+      }
     }
 
     @media #{$mq-hidden-gutter} {

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

@@ -1 +1,65 @@
-{{outlet}}
+{{task-subnav task=task}}
+<section class="section is-closer">
+  {{#if task.isRunning}}
+    <div class="fs-explorer boxed-section">
+      <div class="boxed-section-head">
+        <nav class="breadcrumb" data-test-fs-breadcrumbs>
+          <ul>
+            <li class={{if breadcrumbs "" "is-active"}}>
+              {{#link-to "allocations.allocation.task.fs-root" task.allocation task activeClass="is-active"}}
+                {{task.name}}
+              {{/link-to}}
+            </li>
+            {{#each breadcrumbs as |breadcrumb|}}
+              <li class={{if breadcrumb.isLast "is-active"}}>
+                {{#link-to "allocations.allocation.task.fs" task.allocation task breadcrumb.path activeClass="is-active"}}
+                  {{breadcrumb.name}}
+                {{/link-to}}
+              </li>
+            {{/each}}
+          </ul>
+        </nav>
+      </div>
+
+      {{#if isFile}}
+        <div class="boxed-section-body">
+          <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">
+          {{#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>
+          {{else}}
+            <tbody>
+              <tr data-test-entry>
+                <td colspan="3">
+                  <span data-test-empty-icon>{{x-icon "alert-circle-outline"}}</span>
+                  <span class="name" data-test-name>Directory is empty</span>
+                </td>
+              </tr>
+            </tbody>
+          {{/if}}
+        </table>
+      {{/if}}
+    </div>
+  {{else}}
+    <div data-test-not-running class="empty-message">
+      <h3 data-test-not-running-headline class="empty-message-headline">Task is not Running</h3>
+      <p data-test-not-running-body class="empty-message-body">
+        Cannot access files of a task that is not running.
+      </p>
+    </div>
+  {{/if}}
+</section>

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

@@ -1,4 +1,4 @@
-{{partial "allocations/allocation/task/subnav"}}
+{{task-subnav task=model}}
 <section class="section">
   {{#if error}}
     <div data-test-inline-error class="notification is-danger">