UI: Alloc FS: File Viewer

ui/app/components/image-file.js

@@ -0,0 +1,29 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  tagName: 'figure',
+  classNames: 'image-file',
+  'data-test-image-file': true,
+
+  src: null,
+  alt: null,
+  size: null,
+
+  // Set by updateImageMeta
+  width: 0,
+  height: 0,
+
+  fileName: computed('src', function() {
+    if (!this.src) return;
+    return this.src.includes('/') ? this.src.match(/^.*\/(.*)$/)[1] : this.src;
+  }),
+
+  updateImageMeta(event) {
+    const img = event.target;
+    this.setProperties({
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+    });
+  },
+});

ui/app/components/streaming-file.js

@@ -0,0 +1,96 @@
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import WindowResizable from 'nomad-ui/mixins/window-resizable';
+
+export default Component.extend(WindowResizable, {
+  tagName: 'pre',
+  classNames: ['cli-window'],
+  'data-test-log-cli': true,
+
+  mode: 'streaming', // head, tail, streaming
+  isStreaming: true,
+  logger: null,
+
+  didReceiveAttrs() {
+    if (!this.logger) {
+      return;
+    }
+
+    run.scheduleOnce('actions', () => {
+      switch (this.mode) {
+        case 'head':
+          this.head.perform();
+          break;
+        case 'tail':
+          this.tail.perform();
+          break;
+        case 'streaming':
+          if (this.isStreaming) {
+            this.stream.perform();
+          } else {
+            this.logger.stop();
+          }
+          break;
+      }
+    });
+  },
+
+  didInsertElement() {
+    this.fillAvailableHeight();
+  },
+
+  windowResizeHandler() {
+    run.once(this, this.fillAvailableHeight);
+  },
+
+  fillAvailableHeight() {
+    // This math is arbitrary and far from bulletproof, but the UX
+    // of having the log window fill available height is worth the hack.
+    const margins = 30; // Account for padding and margin on either side of the CLI
+    const cliWindow = this.element;
+    cliWindow.style.height = `${window.innerHeight - cliWindow.offsetTop - margins}px`;
+  },
+
+  head: task(function*() {
+    yield this.get('logger.gotoHead').perform();
+    run.scheduleOnce('afterRender', () => {
+      this.element.scrollTop = 0;
+    });
+  }),
+
+  tail: task(function*() {
+    yield this.get('logger.gotoTail').perform();
+    run.scheduleOnce('afterRender', () => {
+      const cliWindow = this.element;
+      cliWindow.scrollTop = cliWindow.scrollHeight;
+    });
+  }),
+
+  synchronizeScrollPosition(force = false) {
+    const cliWindow = this.element;
+    if (cliWindow.scrollHeight - cliWindow.scrollTop < 10 || force) {
+      // If the window is approximately scrolled to the bottom, follow the log
+      cliWindow.scrollTop = cliWindow.scrollHeight;
+    }
+  },
+
+  stream: task(function*() {
+    // Follow the log if the scroll position is near the bottom of the cli window
+    this.logger.on('tick', () => {
+      run.scheduleOnce('afterRender', () => this.synchronizeScrollPosition());
+    });
+
+    // Force the scroll position to the bottom of the window when starting streaming
+    this.logger.one('tick', () => {
+      run.scheduleOnce('afterRender', () => this.synchronizeScrollPosition(true));
+    });
+
+    yield this.logger.startStreaming();
+    this.logger.off('tick');
+  }),
+
+  willDestroy() {
+    this.logger.stop();
+  },
+});

ui/app/components/task-file.js

@@ -0,0 +1,140 @@
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { equal } from '@ember/object/computed';
+import RSVP from 'rsvp';
+import Log from 'nomad-ui/utils/classes/log';
+import timeout from 'nomad-ui/utils/timeout';
+
+export default Component.extend({
+  token: service(),
+
+  classNames: ['boxed-section', 'task-log'],
+
+  'data-test-file-viewer': true,
+
+  allocation: null,
+  task: null,
+  file: null,
+  stat: null, // { Name, IsDir, Size, FileMode, ModTime, ContentType }
+
+  // When true, request logs from the server agent
+  useServer: false,
+
+  // When true, logs cannot be fetched from either the client or the server
+  noConnection: false,
+
+  clientTimeout: 1000,
+  serverTimeout: 5000,
+
+  mode: 'head',
+
+  fileComponent: computed('stat.ContentType', function() {
+    const contentType = this.stat.ContentType || '';
+
+    if (contentType.startsWith('image/')) {
+      return 'image';
+    } else if (contentType.startsWith('text/') || contentType.startsWith('application/json')) {
+      return 'stream';
+    } else {
+      return 'unknown';
+    }
+  }),
+
+  isLarge: computed('stat.Size', function() {
+    return this.stat.Size > 50000;
+  }),
+
+  fileTypeIsUnknown: equal('fileComponent', 'unknown'),
+  isStreamable: equal('fileComponent', 'stream'),
+  isStreaming: false,
+
+  catUrl: computed('allocation.id', 'task.name', 'file', function() {
+    return `/v1/client/fs/cat/${this.allocation.id}?path=${this.task.name}/${this.file}`;
+  }),
+
+  fetchMode: computed('isLarge', 'mode', function() {
+    if (this.mode === 'streaming') {
+      return 'stream';
+    }
+
+    if (!this.isLarge) {
+      return 'cat';
+    } else if (this.mode === 'head' || this.mode === 'tail') {
+      return 'readat';
+    }
+  }),
+
+  fileUrl: computed(
+    'allocation.id',
+    'allocation.node.httpAddr',
+    'fetchMode',
+    'useServer',
+    function() {
+      const address = this.get('allocation.node.httpAddr');
+      const url = `/v1/client/fs/${this.fetchMode}/${this.allocation.id}`;
+      return this.useServer ? url : `//${address}${url}`;
+    }
+  ),
+
+  fileParams: computed('task.name', 'file', 'mode', function() {
+    const path = `${this.task.name}/${this.file}`;
+
+    switch (this.mode) {
+      case 'head':
+        return { path, offset: 0, limit: 50000 };
+      case 'tail':
+        return { path, offset: this.stat.Size - 50000, limit: 50000 };
+      case 'streaming':
+        return { path, offset: 50000, origin: 'end' };
+      default:
+        return { path };
+    }
+  }),
+
+  logger: computed('fileUrl', 'fileParams', 'mode', function() {
+    // The cat and readat APIs are in plainText while the stream API is always encoded.
+    const plainText = this.mode === 'head' || this.mode === 'tail';
+
+    // If the file request can't settle in one second, the client
+    // must be unavailable and the server should be used instead
+    const timing = this.useServer ? this.serverTimeout : this.clientTimeout;
+    const logFetch = url =>
+      RSVP.race([this.token.authorizedRequest(url), timeout(timing)]).then(
+        response => response,
+        error => {
+          if (this.useServer) {
+            this.set('noConnection', true);
+          } else {
+            this.send('failoverToServer');
+          }
+          throw error;
+        }
+      );
+
+    return Log.create({
+      logFetch,
+      plainText,
+      params: this.fileParams,
+      url: this.fileUrl,
+    });
+  }),
+
+  actions: {
+    toggleStream() {
+      this.set('mode', 'streaming');
+      this.toggleProperty('isStreaming');
+    },
+    gotoHead() {
+      this.set('mode', 'head');
+      this.set('isStreaming', false);
+    },
+    gotoTail() {
+      this.set('mode', 'tail');
+      this.set('isStreaming', false);
+    },
+    failoverToServer() {
+      this.set('useServer', true);
+    },
+  },
+});

ui/app/components/task-log.js

@@ -1,14 +1,11 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { run } from '@ember/runloop';
 import RSVP from 'rsvp';
-import { task } from 'ember-concurrency';
 import { logger } from 'nomad-ui/utils/classes/log';
-import WindowResizable from 'nomad-ui/mixins/window-resizable';
 import timeout from 'nomad-ui/utils/timeout';
 
-export default Component.extend(WindowResizable, {
+export default Component.extend({
   token: service(),
 
   classNames: ['boxed-section', 'task-log'],
@@ -25,26 +22,8 @@ export default Component.extend(WindowResizable, {
   clientTimeout: 1000,
   serverTimeout: 5000,
 
-  didReceiveAttrs() {
-    if (this.allocation && this.task) {
-      this.send('toggleStream');
-    }
-  },
-
-  didInsertElement() {
-    this.fillAvailableHeight();
-  },
-
-  windowResizeHandler() {
-    run.once(this, this.fillAvailableHeight);
-  },
-
-  fillAvailableHeight() {
-    // This math is arbitrary and far from bulletproof, but the UX
-    // of having the log window fill available height is worth the hack.
-    const cliWindow = this.$('.cli-window');
-    cliWindow.height(window.innerHeight - cliWindow.offset().top - 25);
-  },
+  isStreaming: true,
+  streamMode: 'streaming',
 
   mode: 'stdout',
 
@@ -75,56 +54,28 @@ export default Component.extend(WindowResizable, {
             this.set('noConnection', true);
           } else {
             this.send('failoverToServer');
-            this.stream.perform();
           }
           throw error;
         }
       );
   }),
 
-  head: task(function*() {
-    yield this.get('logger.gotoHead').perform();
-    run.scheduleOnce('afterRender', () => {
-      this.$('.cli-window').scrollTop(0);
-    });
-  }),
-
-  tail: task(function*() {
-    yield this.get('logger.gotoTail').perform();
-    run.scheduleOnce('afterRender', () => {
-      const cliWindow = this.$('.cli-window');
-      cliWindow.scrollTop(cliWindow[0].scrollHeight);
-    });
-  }),
-
-  stream: task(function*() {
-    this.logger.on('tick', () => {
-      run.scheduleOnce('afterRender', () => {
-        const cliWindow = this.$('.cli-window');
-        cliWindow.scrollTop(cliWindow[0].scrollHeight);
-      });
-    });
-
-    yield this.logger.startStreaming();
-    this.logger.off('tick');
-  }),
-
-  willDestroy() {
-    this.logger.stop();
-  },
-
   actions: {
     setMode(mode) {
       this.logger.stop();
       this.set('mode', mode);
-      this.stream.perform();
     },
     toggleStream() {
-      if (this.get('logger.isStreaming')) {
-        this.logger.stop();
-      } else {
-        this.stream.perform();
-      }
+      this.set('streamMode', 'streaming');
+      this.toggleProperty('isStreaming');
+    },
+    gotoHead() {
+      this.set('streamMode', 'head');
+      this.set('isStreaming', false);
+    },
+    gotoTail() {
+      this.set('streamMode', 'tail');
+      this.set('isStreaming', false);
     },
     failoverToServer() {
       this.set('useServer', true);

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

@@ -16,6 +16,7 @@ export default Controller.extend({
   task: null,
   directoryEntries: null,
   isFile: null,
+  stat: null,
 
   directories: filterBy('directoryEntries', 'IsDir'),
   files: filterBy('directoryEntries', 'IsDir', false),