added log autoscroll

src/components/cylc/log/Log.vue

@@ -20,7 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-for="(log, index) in computedLogs"
     :key="index"
     :class="wordWrap ? 'text-pre-wrap' : 'text-pre'"
-  >{{ log }}</span></pre>
+  >{{ log }}</span>
+  </pre>
 </template>
 
 <script>
@@ -84,6 +85,15 @@ export default {
       }
       return logLine
     }
+  },
+
+  watch: {
+    computedLogs: {
+      handler (val, old) {
+        this.$emit('updating')
+      },
+      deep: true
+    }
   }
 }
 

src/views/Log.vue

@@ -170,7 +170,10 @@
             :logs="results.lines"
             :timestamps="timestamps"
             :word-wrap="wordWrap"
+            @updating="updating"
           />
+          <!-- a div to use for autoscrolling -->
+          <div class="auto-scroll-end"></div>
         </template>
       </v-col>
     </v-row>
@@ -188,6 +191,7 @@
   mdiPowerPlugOff,
   mdiPowerPlug,
   mdiWrap,
+  mdiMouseScrollWheel,
 } from '@mdi/js'
 import { btnProps } from '@/utils/viewToolbar'
 import graphqlMixin from '@/mixins/graphql'
@@ -411,6 +415,7 @@
 
   data () {
     return {
+      autoScroll: false,
       controlGroups: [
         {
           title: 'Log',
@@ -429,6 +434,13 @@
               value: this.wordWrap,
               key: 'wordWrap',
             },
+            {
+              title: 'Auto scroll',
+              icon: mdiMouseScrollWheel,
+              action: 'toggle',
+              value: this.autoScroll,
+              key: 'autoScroll',
+            },
           ]
         }
       ],
@@ -478,6 +490,19 @@
   },
 
   methods: {
+    scrollToElement (elementCLassName, options) {
+      const el = this.$el.getElementsByClassName(elementCLassName)[0]
+
+      if (el) {
+        // Use el.scrollIntoView() to instantly scroll to the element
+        el.scrollIntoView(options)
+      }
+    },
+    updating () {
+      if (this.autoScroll) {
+        this.scrollToElement('auto-scroll-end', { behavior: 'smooth' })
+      }
+    },
     setOption (option, value) {
       // used by the ViewToolbar to update settings
       this[option] = value
@@ -568,7 +593,7 @@
       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

tests/e2e/specs/log.cy.js

@@ -121,7 +121,7 @@ describe('Log View', () => {
       .click()
       // the old log file lines should have been wiped
       .get('[data-cy=log-viewer]')
-      .should('be.empty')
+      .should('have.length', 1)
       .get('[data-cy=file-input] input')
       .should('be.disabled')
 
@@ -130,7 +130,7 @@ describe('Log View', () => {
       .find('input')
       .type('1/')
       .get('[data-cy=log-viewer]')
-      .should('be.empty')
+      .should('have.length', 1)
       .get('[data-cy=file-input] input')
       .should('be.disabled')