[logdog-view] Update UX, fix bugs.

web/inc/logdog-stream-view/model.ts

 /*
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 */
 
 ///<reference path="../logdog-stream/logdog.ts" />
 ///<reference path="../luci-operation/operation.ts" />
 ///<reference path="../luci-sleep-promise/promise.ts" />
 ///<reference path="../rpc/client.ts" />
@@ skipping 42 matching lines @@
      */
     TAIL,
     /**
      * Represents an anchor point where the split occurred, obtained through a
      * single "Tail()" RPC call. If the terminal index is known when the split
      * occurs, this should be the terminal index.
      */
     BOTTOM,
   }
 
-  /**
-   * Interface of the specific Model functions used by the view. This is
-   * explicitly listed here as a reference for the functions that the
-   * model-viewer interface calls. See the Model class for method details.
-   *
-   * These methods are used to control the Model state and to nofity the Model
-   * of external events that occur.
-   */
-  interface ModelInterface {
-    fetch(cancel: boolean): Promise<void>;
-    split(): Promise<void>;
-
-    reset(): void;
-    setAutomatic(v: boolean): void;
-    setFetchFromTail(v: boolean): void;
-    notifyAuthenticationChanged(): void;
-  }
-
   /** A log loading profile type. */
   type ModelProfile = {
     /** The size of the first fetch. */
     initialFetchSize: number;
     /** The size of the first fetch, if loading multiple streams. */
     multiInitialFetchSize: number;
     /** The size of each subsequent fetch. */
     fetchSize: number;
   };
 
   /**
    * Model manages stream loading.
    *
-   * Model exports features to the user interface by conforming to
-   * ModelInterface. All Polymer Model functions must be documented in that
-   * interface.
-   *
    * Model pushes state update to the user interface with the ViewBinding that
    * is provided to it on construction.
    *
    * Model represents a view of the loading state of the configured log streams.
    * Log streams are individual named sets of consecutive records that are
    * either streaming (no known terminal index, so the expectation is that new
    * log records are being generated) or finished (known terminal index). The
    * Model's job is to understand the state of these streams, load their data,
    * and cause it to be output to the user interface.
    *
@@ skipping 20 matching lines @@
    *
    * If the HEAD pointer ever reaches the TAIL pointer, all logs between 0 and
    * SPLIT have been filled in and the fetching situation turns back into a
    * standard sequential fetch.
    *
    * This scheme is designed around the capabilities of the LogDog log API.
    *
    * The view may optionally expose itself as "mobile", indicating to the Model
    * that it should use mobile-friendly tuning parameters.
    */
-  export class Model implements ModelInterface {
+  export class Model {
     /** Default single-stream profile. */
     static DEFAULT_PROFILE: ModelProfile = {
       initialFetchSize: (1024 * 24),      // 24KiB
       multiInitialFetchSize: (1024 * 4),  // 4KiB
       fetchSize: (4 * 1024 * 1024),       // 4MiB
     };
 
     /** Profile to use for a mobile device, regardless of stream count. */
     static MOBILE_PROFILE: ModelProfile = {
       initialFetchSize: (1024 * 4),       // 4KiB
@@ skipping 36 matching lines @@
      * Retained callback (Promise resolve) to invoke when authentication state
      * changes.
      */
     private authChangedCallback: (() => void);
 
     /** The current fetch Promise. */
     private currentOperation: luci.Operation|null = null;
     private currentFetchPromise: Promise<void>|null = null;
 
     /** Are we in automatic mode? */
-    private automatic = false;
+    private isAutomatic = false;
     /** Are we tailing? */
     private fetchFromTail = false;
     /** Are we in the middle of rendering logs? */
     private rendering = true;
 
     private cachedLogStreamUrl: string|undefined = undefined;
 
     private loadingStateValue: LoadingState = LoadingState.NONE;
     private streamStatusValue: StreamStatusEntry[];
 
@@ skipping 66 matching lines @@
         default:
           provider = new AggregateLogStream(logStreams);
           break;
       }
       provider.setStreamStatusCallback((st: LogStreamStatus[]) => {
         if (this.provider === provider) {
           this.streamStatus = this.buildStreamStatus(st);
         }
       });
       this.provider = provider;
-      this.loadingState = LoadingState.NONE;
+      this.setIdleLoadingState();
+    }
+
+    private setIdleLoadingState() {
+      this.loadingState = (this.fetchedFullStream) ? (LoadingState.NONE) :
+                                                     (LoadingState.PAUSED);
     }
 
     private resolvePathsIntoStreams(paths: string[]) {
       return Promise.all(paths.map(async path => {
         let stream = LogDog.StreamPath.splitProject(path);
         if (!LogDog.isQuery(stream.path)) {
           return [stream];
         }
 
         // This "path" is really a query. Construct and execute.
@@ skipping 26 matching lines @@
      * Resets the state.
      */
     reset() {
       this.view.clearLogEntries();
       this.clearCurrentOperation();
       this.provider = this.nullProvider();
 
       this.updateControls();
     }
 
+    public get automatic() {
+      return this.isAutomatic;
+    }
+
+    /**
+     * Sets whether automatic loading is enabled.
+     *
+     * When enabled, a new fetch will immediately be dispatched when a previous
+     * fetch finishes so long as there is still stream data to load.
+     *
+     * This isn't a setter because we need to be able to export it via
+     * interface.
+     */
+    public set automatic(v: boolean) {
+      this.isAutomatic = v && !this.fetchedFullStream;
+      if (v) {
+        // Passively kick off a new fetch.
+        this.fetch(false);
+      }
+      this.updateControls();
+    }
+
     private nullProvider(): LogProvider {
       return new AggregateLogStream([]);
     }
 
     /**
      * Clears the current operation, cancelling it if set. If the operation is
      * cleared, the current fetch and rendering states will be reset.
      *
      * @param op if provided, only cancel the current operation if it equals
      *     the supplied "op". If "op" does not match the current operation, it
      *     will be cancelled, but the current operation will be left in-tact.
      *     If "op" is undefined, cancel the current operation regardless.
      */
-    private clearCurrentOperation(op?: luci.Operation) {
+    clearCurrentOperation(op?: luci.Operation) {
       if (this.currentOperation) {
         if (op && op !== this.currentOperation) {
           // Conditional clear, and we are not the current operation, so do
           // nothing.
           op.cancel();
           return;
         }
         this.currentOperation.cancel();
         this.currentOperation = this.currentFetchPromise = null;
       }
@@ skipping 12 matching lines @@
 
     private get streamStatus(): StreamStatusEntry[] {
       return this.streamStatusValue;
     }
     private set streamStatus(st: StreamStatusEntry[]) {
       this.streamStatusValue = st;
       this.updateControls();
     }
 
     private updateControls() {
+      let splitState: SplitState;
+      if (this.providerCanSplit) {
+        splitState = SplitState.CAN_SPLIT;
+      } else {
+        splitState =
+            (this.isSplit) ? (SplitState.IS_SPLIT) : (SplitState.CANNOT_SPLIT);
+      }
+
       this.view.updateControls({
-        canSplit: this.providerCanSplit,
-        split: this.isSplit,
-        bottom: !this.fetchedEndOfStream,
+        splitState: splitState,
         fullyLoaded: (this.fetchedFullStream && (!this.rendering)),
         logStreamUrl: this.logStreamUrl,
         loadingState: this.loadingState,
         streamStatus: this.streamStatus,
       });
     }
 
     /**
      * Note that the authentication state for the client has changed. This will
      * trigger an automatic fetch retry if our previous fetch failed due to
@@ skipping 67 matching lines @@
     /** Fetch logs from an explicit location. */
     async fetchLocation(l: Location, cancel: boolean): Promise<void> {
       if (this.currentFetchPromise && (!cancel)) {
         return this.currentFetchPromise;
       }
       this.clearCurrentOperation();
 
       // If our provider is finished, then do nothing.
       if (this.fetchedFullStream) {
         // There are no more logs.
+        this.updateControls();
         return undefined;
       }
 
       // If we're asked to fetch BOTTOM, but we're not split, fetch HEAD
       // instead.
       if (l === Location.BOTTOM && !this.isSplit) {
         l = Location.HEAD;
       }
 
       // Rotate our fetch ID. This will effectively cancel any pending fetches.
@@ skipping 19 matching lines @@
           hasLogs = await this.fetchLocationRound(l, op);
         } catch (err) {
           console.log('Fetch failed with error:', err);
 
           // Cancel the timer here, since we may enter other states in this
           // "catch" block and we don't want to have the timer override them.
           loadingWhileTimer.cancel();
 
           // If we've been canceled, discard this result.
           if (err === luci.Operation.CANCELLED) {
+            this.setIdleLoadingState();
             return;
           }
 
           if (err === NOT_AUTHENTICATED) {
             this.loadingState = LoadingState.NEEDS_AUTH;
 
             // We failed because we were not authenticated. Mark this
             // so we can retry if that state changes.
             await this.authChangedPromise;
 
@@ skipping 35 matching lines @@
       }
 
       // Clear our loading state (updates controls automatically).
       this.loadingState = LoadingState.RENDERING;
 
       // Initiate the next render. This will happen in the
       // background while we enqueue our next fetch.
       let doRender = async () => {
         await this.renderLogs(buf, l);
         if (this.loadingState === LoadingState.RENDERING) {
-          this.loadingState = LoadingState.NONE;
+          this.setIdleLoadingState();
         }
       };
       this.renderPromise = doRender();
 
       if (this.fetchedFullStream) {
         return false;
       }
       return hasLogs;
     }
 
@@ skipping 50 matching lines @@
     /**
      * Sets whether the next fetch will pull from the tail (end) or the top
      * (begining) region.
      *
      * This is only relevant when there is a log split.
      */
     setFetchFromTail(v: boolean) {
       this.fetchFromTail = v;
     }
 
-    /**
-     * Sets whether automatic loading is enabled.
-     *
-     * When enabled, a new fetch will immediately be dispatched when a previous
-     * fetch finishes so long as there is still stream data to load.
-     */
-    setAutomatic(v: boolean) {
-      this.automatic = v;
-      if (v) {
-        // Passively kick off a new fetch.
-        this.fetch(false);
-      }
-    }
-
     private buildStreamStatus(v: LogStreamStatus[]): StreamStatusEntry[] {
       let maxStatus = LogDog.FetchStatus.IDLE;
       let maxStatusCount = 0;
       let needsAuth = false;
 
       // Prune any finished entries and accumulate them for status bar change.
       v = (v || []).filter((st) => {
         needsAuth = (needsAuth || st.needsAuth);
 
         if (st.fetchStatus > maxStatus) {
@@ skipping 789 matching lines @@
 
       // Get the next log and increment our index.
       let log = this.logs[this.index++];
       if (this.index >= this.logs.length) {
         this.logs = null;
       }
       return log;
     }
   }
 }