Merge pull request #2078 from MetRonnie/log-wrap

Save log view word wrap default

Author: ChrisPaulBennett

changes.d/2078.feat.md

@@ -0,0 +1 @@
+Log view word wrap setting is now saved.

changes.d/2078.fix.md

@@ -0,0 +1 @@
+Fixed log view word wrap not working in all cases.

src/components/cylc/ViewToolbar.vue

@@ -31,10 +31,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :data-cy="`control-${iControl.key}`"
       >
         <v-btn
+          @click="iControl.callback"
           v-bind="btnProps"
           :disabled="iControl.disabled"
-          :color="iControl.color"
-          @click="iControl.callback"
+          :aria-checked="iControl.value"
+          :color="iControl.value ? 'blue' : undefined"
+          role="switch"
         >
           <v-icon>{{ iControl.icon }}</v-icon>
           <v-tooltip>{{ iControl.title }}</v-tooltip>
@@ -107,7 +109,6 @@ export default {
       const ret = []
       let iGroup
       let iControl
-      let color // control color
       let callback // callback to fire when control is activated
       let disabled // true if control should not be enabled
       const values = this.getValues()
@@ -117,17 +118,13 @@ export default {
           iControls: []
         }
         for (const control of group.controls) {
-          color = null
           callback = null
           disabled = false
 
-          // set callback and color
+          // set callback
           switch (control.action) {
             case 'toggle':
               callback = (e) => this.toggle(control, e)
-              if (control.value) {
-                color = 'blue'
-              }
               break
             case 'callback':
               callback = (e) => this.call(control, e)
@@ -150,7 +147,6 @@ export default {
 
           iControl = {
             ...control,
-            color,
             callback,
             disabled
           }

src/components/cylc/log/Log.vue

@@ -20,10 +20,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     ref="scrollWrapper"
     class="h-100 overflow-auto px-4 pb-2"
   >
-    <pre ref="logText" data-cy="log-text"><span
+    <pre
+      ref="logText"
+      :class="wordWrap ? 'text-pre-wrap text-break' : 'text-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"

src/composables/localStorage.js

@@ -32,3 +32,5 @@ export const useJobTheme = () => useLocalStorage('jobTheme', 'default')
 export const useReducedAnimation = () => useLocalStorage('reducedAnimation', false)
 
 export const useWorkflowWarnings = () => useLocalStorage('useWorkflowWarnings', true)
+
+export const useLogWordWrapDefault = () => useLocalStorage('logWordWrap', false)

src/services/mock/json/logData.cjs

@@ -34,6 +34,7 @@ const workflowLogLines = [
   '2023-05-25T10:48:01+01:00 INFO - + cycle point time zone = Z\n',
   '2023-08-17T14:10:51+01:00 INFO - The quick brown 🦊 jumps over the lazy 🐶\n',
   '2024-02-07T13:38:25+01:00 INFO - Ce programme est distribué dans l\'espoir qu\'il sera utile, mais SANS TOUTE GARANTIE ; sans même la garantie implicite de QUALITÉ MARCHANDE ou d\'ADAPTATION À UN USAGE PARTICULIER. Consultez la GNU General Public License pour plus de détails.\n',
+  '2025-08-21T02:53:22+01:00 ERROR - cycl not found in /home/users/sheev.palpatine/.local/bin:/home/users/sheev.palpatine/bin:/opt/caribou-client-wrapper/bin:/opt/conda/condabin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/bish/bash/bosh/bin:/data/apps/apes/2025/bin\n',
   '2038-01-19T04:14:07+01:00 CRITICAL - It\'s the Epochalypse!\n',
 ]
 

src/views/Log.vue

@@ -170,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { refWithControl, usePrevious, whenever } from '@vueuse/core'
 import { useStore } from 'vuex'
 import {
@@ -200,6 +200,7 @@ import { debounce } from 'lodash-es'
 import CopyBtn from '@/components/core/CopyBtn.vue'
 import { Alert } from '@/model/Alert.model'
 import { getJobLogFileFromState } from '@/model/JobState.model'
+import { useLogWordWrapDefault } from '@/composables/localStorage'
 
 /**
  * Query used to retrieve data for the Log view.
@@ -362,8 +363,12 @@ export default {
     /** Toggle timestamps in log files */
     const timestamps = useInitialOptions('timestamps', { props, emit }, true)
 
-    /** Wrap lines? */
-    const wordWrap = useInitialOptions('wordWrap', { props, emit }, false)
+    /* Wrap lines? */
+    const wordWrapDefault = useLogWordWrapDefault()
+    const wordWrap = useInitialOptions('wordWrap', { props, emit }, wordWrapDefault.value)
+    watch(wordWrap, (value) => {
+      wordWrapDefault.value = value
+    })
 
     /** The log subscription results */
     const results = ref(new Results())

tests/component/specs/viewToolbar.cy.js

@@ -77,6 +77,7 @@ describe('View Toolbar Component', () => {
       // the toggle should be blue because it's active (default true)
       .get('[data-cy=control-toggle] .v-btn')
       .should('have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'true')
       // clicking the toggle should emit a "setOption" event with the
       // controls key (toggle) and new value (false)
       .click({ force: true })
@@ -87,7 +88,8 @@ describe('View Toolbar Component', () => {
       })
       // it should not be grey because it's inactive (false)
       .get('[data-cy=control-toggle] .v-btn')
-      .not('.text-blue')
+      .should('not.have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'false')
       // click it again and it should become active again
       .click({ force: true })
       .get('@wrapper').then(({ wrapper }) => {
@@ -97,6 +99,7 @@ describe('View Toolbar Component', () => {
       })
       .get('[data-cy=control-toggle] .v-btn')
       .should('have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'true')
 
     // test action=callback
     expect(callbacks).to.have.length(0)

tests/e2e/specs/graph.cy.js

@@ -48,7 +48,7 @@ function checkRememberToolbarSettings (selector, stateBefore, stateAfter) {
   cy
     .get(selector)
     .find('.v-btn')
-    .should(stateBefore, 'text-blue')
+    .should('have.attr', 'aria-checked', String(stateBefore))
     .click()
   // Navigate away
   cy.visit('/#/')
@@ -59,7 +59,7 @@ function checkRememberToolbarSettings (selector, stateBefore, stateAfter) {
   cy
     .get(selector)
     .find('.v-btn')
-    .should(stateAfter, 'text-blue')
+    .should('have.attr', 'aria-checked', String(stateAfter))
 }
 
 describe('Graph View', () => {
@@ -133,21 +133,21 @@ describe('Graph View', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy=control-autoRefresh]', 'have.class', 'not.have.class')
+    checkRememberToolbarSettings('[data-cy=control-autoRefresh]', true, false)
   })
 
   it('remembers transpose setting when switching between workflows', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy=control-transpose]', 'not.have.class', 'have.class')
+    checkRememberToolbarSettings('[data-cy=control-transpose]', false, true)
   })
 
   it('remembers cycle point grouping setting when switching between workflows', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy="control-groupCycle"]', 'not.have.class', 'have.class')
+    checkRememberToolbarSettings('[data-cy="control-groupCycle"]', false, true)
   })
 
   describe('Flow nums', () => {

tests/e2e/specs/log.cy.js

@@ -242,15 +242,19 @@ describe('Log command in menu', () => {
 })
 
 describe('Log view in workspace', () => {
+  function openWorkflowLog () {
+    cy.get('#workflow-mutate-button')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+  }
+
   it('remembers job ID and file when switching between workflows', () => {
     const jobFile = /^job$/
     const jobID = '20000102T0000Z/succeeded'
     cy.visit('/#/workspace/one')
-      .get('#workflow-mutate-button')
-      .click()
-      .get('.c-mutation').contains('Log')
-      .click()
-      .get('[data-cy=job-toggle]')
+    openWorkflowLog()
+    cy.get('[data-cy=job-toggle]')
       .click()
       .get('.c-log [data-cy=job-id-input] input').as('jobIDInput')
       .type(jobID)
@@ -276,6 +280,28 @@ describe('Log view in workspace', () => {
       .contains(jobFile)
   })
 
+  it('remembers word wrap setting and sets default word wrap', () => {
+    cy.visit('/#/workspace/one')
+      .get('.lm-TabBar-tabCloseIcon').click()
+    openWorkflowLog()
+    cy.get('.c-log [data-cy=control-wordWrap] button')
+      .should('have.attr', 'aria-checked', 'false')
+    // Open a new log view
+    openWorkflowLog()
+    cy.get('.c-log:last [data-cy=control-wordWrap] button')
+      .click()
+      .should('have.attr', 'aria-checked', 'true')
+    // Should not affect the first log view
+    cy.get('.lm-TabBar-tab:first').click()
+      .get('.c-log:first [data-cy=control-wordWrap] button')
+      .should('have.attr', 'aria-checked', 'false')
+    // Should set the default word wrap for new log views
+    cy.visit('/#/workspace/multi/level/run1')
+    openWorkflowLog()
+    cy.get('.c-log [data-cy=control-wordWrap] button')
+      .should('have.attr', 'aria-checked', 'true')
+  })
+
   it('navigates to correct workflow when choosing log option in mutation menu', () => {
     const one = 'one'
     const multi = 'multi/level/run1'