added log autoscroll (#2017)

log: added auto-scroll

Author: markgrahamdawson

changes.d/2017.feat.md

@@ -0,0 +1 @@
+Added option to set automatic scrolling in log view

src/components/cylc/log/Log.vue

@@ -16,15 +16,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <pre><span
-    v-for="(log, index) in computedLogs"
-    :key="index"
-    :class="wordWrap ? 'text-pre-wrap' : 'text-pre'"
-  >{{ log }}</span></pre>
+  <div ref="wrapper">
+    <pre data-cy="log-text"><span
+      v-for="(log, index) in computedLogs"
+      :key="index"
+      :class="wordWrap ? 'text-pre-wrap' : 'text-pre'"
+    >{{ log }}</span></pre>
+    <v-btn
+      v-if="logs.length"
+      position="fixed"
+      location="bottom right"
+      class="ma-3"
+      @click="scrollToTop"
+      :icon="$options.icons.mdiMouseMoveUp"
+    />
+    <!-- a div to use for autoscrolling -->
+    <div ref="autoScrollEnd"></div>
+  </div>
 </template>
 
 <script>
-
+import { useTemplateRef, watch, onBeforeUnmount } from 'vue'
+import { when } from '@/utils'
+import {
+  mdiMouseMoveUp
+} from '@mdi/js'
 export default {
   name: 'LogComponent',
 
@@ -47,11 +63,48 @@ export default {
       required: false,
       default: false
     },
+    autoScroll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
 
-  data () {
+  setup (props) {
+    const wrapperRef = useTemplateRef('wrapper')
+    const autoScrollEndRef = useTemplateRef('autoScrollEnd')
+
+    function scrollToEnd () {
+      autoScrollEndRef.value?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    function scrollToTop () {
+      wrapperRef.value?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    const ro = new ResizeObserver(scrollToEnd)
+
+    when(wrapperRef, () => {
+      watch(
+        () => props.autoScroll,
+        (val) => {
+          if (val) {
+            scrollToEnd()
+            ro.observe(wrapperRef.value)
+          } else {
+            ro.disconnect()
+          }
+        },
+        { immediate: true }
+      )
+    })
+
+    onBeforeUnmount(() => {
+      ro.disconnect()
+    })
+
     return {
-      match: ''
+      scrollToTop
     }
   },
 
@@ -78,12 +131,13 @@ export default {
 
     stripTimestamp (logLine) {
       const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:Z|[+-][\d:]+)?\s(.*\s*)/
-      this.match = logLine.match(regex)
-      if (this.match) {
-        return this.match[1]
-      }
-      return logLine
+      return logLine.match(regex)?.[1] ?? logLine
     }
+  },
+
+  // Misc options
+  icons: {
+    mdiMouseMoveUp
   }
 }
 

src/views/Log.vue

@@ -142,17 +142,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </v-container>
 
     <!-- the log file viewer -->
-    <v-row
+    <div
+      ref="logScroll"
       no-gutters
-      class="overflow-auto px-4 pb-2"
+      class="h-100 overflow-auto px-4 pb-2"
     >
-      <v-col>
-        <v-skeleton-loader
-          v-if="id && file && results.connected == null"
-          type="text@5"
-          class="mx-n4 align-content-start"
-        />
-        <template v-else>
+      <v-skeleton-loader
+        v-if="id && file && results.connected == null"
+        type="text@5"
+        class="mx-n4 align-content-start"
+      />
+      <template v-else >
+        <div class="d-flex flex-column justify-center">
           <v-alert
             v-if="results.error"
             type="error"
@@ -170,24 +171,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :logs="results.lines"
             :timestamps="timestamps"
             :word-wrap="wordWrap"
+            :autoScroll="autoScroll"
           />
-        </template>
-      </v-col>
-    </v-row>
+        </div>
+      </template>
+    </div>
   </v-container>
 </template>
 
 <script>
-import { ref, computed } from 'vue'
-import { usePrevious, whenever } from '@vueuse/core'
+import { ref, computed, useTemplateRef } from 'vue'
+import { usePrevious, useScroll, whenever } from '@vueuse/core'
 import { useStore } from 'vuex'
 import {
   mdiClockOutline,
-  mdiFileAlertOutline,
   mdiFolderRefresh,
   mdiPowerPlugOff,
   mdiPowerPlug,
   mdiWrap,
+  mdiFileAlertOutline,
+  mdiMouseMoveDown,
 } from '@mdi/js'
 import { btnProps } from '@/utils/viewToolbar'
 import graphqlMixin from '@/mixins/graphql'
@@ -380,6 +383,26 @@ export default {
       relativeID.value = value
     }, 500)
 
+    /** AutoScroll? */
+    const autoScroll = useInitialOptions('autoScroll', { props, emit }, true)
+    const logScrollEl = useTemplateRef('logScroll')
+    const { arrivedState, directions } = useScroll(logScrollEl)
+    // Turn on autoscroll when user scrolls to bottom:
+    whenever(() => arrivedState.bottom && !arrivedState.top, () => {
+      // (when page first loads both top and bottom are true)
+      autoScroll.value = true
+    })
+    // Turn off autoscroll when user scrolls up:
+    whenever(() => directions.top, () => {
+      if (results.value.lines.length) {
+        autoScroll.value = false
+      }
+    })
+    // When autoscroll is turned off, cancel any smooth scroll in progress:
+    whenever(() => !autoScroll.value, () => {
+      logScrollEl.value?.scrollBy(0, 0)
+    })
+
     /** View toolbar button size */
     const toolbarBtnSize = '40'
 
@@ -402,36 +425,12 @@ export default {
       jobLog: ref(relativeID.value == null ? 0 : 1),
       timestamps,
       wordWrap,
+      autoScroll,
       reset,
       debouncedUpdateRelativeID,
       toolbarBtnSize,
       toolbarBtnProps: btnProps(toolbarBtnSize),
-    }
-  },
-
-  data () {
-    return {
-      controlGroups: [
-        {
-          title: 'Log',
-          controls: [
-            {
-              title: 'Timestamps',
-              icon: mdiClockOutline,
-              action: 'toggle',
-              value: this.timestamps,
-              key: 'timestamps'
-            },
-            {
-              title: 'Word wrap',
-              icon: mdiWrap,
-              action: 'toggle',
-              value: this.wordWrap,
-              key: 'wordWrap',
-            },
-          ]
-        }
-      ],
+      logScrollEl
     }
   },
 
@@ -474,6 +473,36 @@ export default {
         }
       }
       return this.workflowId
+    },
+    controlGroups () {
+      return [
+        {
+          title: 'Log',
+          controls: [
+            {
+              title: 'Timestamps',
+              icon: mdiClockOutline,
+              action: 'toggle',
+              value: this.timestamps,
+              key: 'timestamps'
+            },
+            {
+              title: 'Word wrap',
+              icon: mdiWrap,
+              action: 'toggle',
+              value: this.wordWrap,
+              key: 'wordWrap',
+            },
+            {
+              title: 'Auto scroll',
+              icon: mdiMouseMoveDown,
+              action: 'toggle',
+              value: this.autoScroll,
+              key: 'autoScroll',
+            },
+          ]
+        }
+      ]
     }
   },
 
@@ -568,15 +597,15 @@ export default {
       this.file = null
       // go back to last chosen job if we are switching back to job logs
       this.relativeID = val ? this.previousRelativeID : null
-    },
+    }
   },
 
   // Misc options
   icons: {
-    mdiFileAlertOutline,
     mdiFolderRefresh,
     mdiPowerPlug,
     mdiPowerPlugOff,
+    mdiFileAlertOutline
   }
 }
 </script>