• Blue Ocean 1.2-beta3, Blue Ocean 1.2-beta4, Blue Ocean 1.2

      Improvement on roadmap

      This improvement is on the Blue Ocean project roadmap. Check the roadmap page for updates.

      Has been requested that support for ANSI colours is desired

      Notes

          [JENKINS-41200] Developer can see ANSI color in log file

          Arron Mabrey added a comment -

          This would be a great addition.

          Arron Mabrey added a comment - This would be a great addition.

          I just wanted to file a more general Jenkins Blue Ocean issue to support hudson.console.ConsoleNote (and all sub-classes), although admittedly at the moment HyperlinkNote and the ANSI color are my only actual usages.

          Reinhold Füreder added a comment - I just wanted to file a more general Jenkins Blue Ocean issue to support hudson.console.ConsoleNote (and all sub-classes), although admittedly at the moment HyperlinkNote and the ANSI color are my only actual usages.

          Sorin Sbarnea added a comment - - edited

          I would not consider the lack of ANSI support as a minor issue.

          Sorin Sbarnea added a comment - - edited I would not consider the lack of ANSI support as a minor issue.

          Michael Neale added a comment -

          yes not minor as in value - just minor relative to other issues right now. 

          Michael Neale added a comment - yes not minor as in value - just minor relative to other issues right now. 

          James Dumay added a comment -

          Something that we certainly would like to get to soon. Stay tuned!

          James Dumay added a comment - Something that we certainly would like to get to soon. Stay tuned!

          Michael Neale added a comment -

          It wil have MORE than ANSI colour. It will have so many colours, some that aren't even in the visible spectrum. More colour than you can handle! and <blink> tags should be supported. And animated gifs. 

          Michael Neale added a comment - It wil have MORE than ANSI colour. It will have so many colours, some that aren't even in the visible spectrum. More colour than you can handle! and <blink> tags should be supported. And animated gifs. 

          James Dumay added a comment -

          Prepare for imgur integration

          James Dumay added a comment - Prepare for imgur integration

          Chris Weaver added a comment -

          I would also like to change the background color to white.  ANSI colors show up better against white IMO.  Plus it's easier on my old eyes.  Can we do this as well?

          Chris Weaver added a comment - I would also like to change the background color to white.  ANSI colors show up better against white IMO.  Plus it's easier on my old eyes.  Can we do this as well?

          James Dumay added a comment -

          We can see what we can do about the contrast when we pick this work up. I know that our designer has some plans to improve accessibility and this might be a good opportunity to start putting it in place

          James Dumay added a comment - We can see what we can do about the contrast when we pick this work up. I know that our designer has some plans to improve accessibility and this might be a good opportunity to start putting it in place

          Michael Neale added a comment -

          I think some of this could be classified as "tech debt" as the log has been a big neglected since it was created. 

          Michael Neale added a comment - I think some of this could be classified as "tech debt" as the log has been a big neglected since it was created. 

          Michael Neale added a comment -

          imeredith there is a bunch of improvements we could do to log - this is specifically supporting colours if we can. I don't know if this a big ball or small ball though, would be good to review to see what one it is before we embark on it. 

          Michael Neale added a comment - imeredith there is a bunch of improvements we could do to log - this is specifically supporting colours if we can. I don't know if this a big ball or small ball though, would be good to review to see what one it is before we embark on it. 

          Josh McDonald added a comment -

          This isn't a big task, we probably should have looked at it sooner. I'll try and do it in a way that we won't have to throw it out when we address the various log issues.

          Josh McDonald added a comment - This isn't a big task, we probably should have looked at it sooner. I'll try and do it in a way that we won't have to throw it out when we address the various log issues.

          Michael Neale added a comment -

          sophistifunk thats wonderful news!

          Michael Neale added a comment - sophistifunk  thats wonderful news!

          Michael Neale added a comment -

          sophistifunk I wonder what the impact is that we are black on white default vs white on black of classic though? I guess that will be part of the fun... 

          Michael Neale added a comment - sophistifunk I wonder what the impact is that we are black on white default vs white on black of classic though? I guess that will be part of the fun... 

          Jakub Josef added a comment -

          FYI: I created ANSI color plugin in pure JS: https://issues.jenkins-ci.org/browse/JENKINS-46092

          Jakub Josef added a comment - FYI: I created ANSI color plugin in pure JS: https://issues.jenkins-ci.org/browse/JENKINS-46092

          Josh McDonald added a comment -

          jakubjosef that's some nice clean code, but unfortunately it's not really applicable in this case, as we try to avoid messing with the DOM behind React's back, which can quickly come back to bite you

          Josh McDonald added a comment - jakubjosef that's some nice clean code, but unfortunately it's not really applicable in this case, as we try to avoid messing with the DOM behind React's back, which can quickly come back to bite you

          Josh McDonald added a comment -

          PR for basic colour support: https://github.com/jenkinsci/blueocean-plugin/pull/1325

          If we want to support high-intensity, or bold etc, we can either append that PR or get the basic stuff into master and then use separate branches and/or tickets to track that stuff, either works. Adding support for more codes won't be a big effort now the basic stuff is done.

           

          Josh McDonald added a comment - PR for basic colour support: https://github.com/jenkinsci/blueocean-plugin/pull/1325 If we want to support high-intensity, or bold etc, we can either append that PR or get the basic stuff into master and then use separate branches and/or tickets to track that stuff, either works. Adding support for more codes won't be a big effort now the basic stuff is done.  

          Josh McDonald added a comment -

          Basic colour support in master @ ea1df49eb0de4a406a8ee05b65db37532df88f09

          Josh McDonald added a comment - Basic colour support in master @ ea1df49eb0de4a406a8ee05b65db37532df88f09

          Josh McDonald added a comment -

          If we want support for more colours or bold/underline and other less common things now we can either leave this open or just create new tickets if/when they're needed.

          Josh McDonald added a comment - If we want support for more colours or bold/underline and other less common things now we can either leave this open or just create new tickets if/when they're needed.

          Jesse Glick added a comment -

          I am afraid this solution does not work well. To reproduce:

          • check out blueocean-plugin @ abe95426d22856d368c667214950b70eb976d56f and mvn -DskipTests clean install
          • check out workflow-aggregator-plugin @ 2d6df24c908665b9a812476409f562615bd0024c, apply attached JENKINS-41200.diff, and make -C demo run
          • wait for cd #1 to get at least to the Staging stage
            • check the traditional console log in /job/cd/1/console: Maven output is colorized
            • check Blue Ocean in /blue/organizations/jenkins/cd/detail/master/1/pipeline: it is not
          • Replay the build, this time commenting out the ansiColor step in mvn.groovy (leaving just the nested sh)
            • traditional console: Maven output is not colorized, log is cluttered with escape sequences
            • B.O.: log is colorized

          In other words, you cannot have a single Pipeline which looks nice in both classic and Blue Ocean UIs. Ouch.

          The reason is that you rolled a one-off solution rather than supporting the much more general ConsoleNote. While I understand that certain notes would produce output incompatible with the layout expectations of Blue Ocean (such as the target listing from the Ant plugin), surely it could honor at least those notes producing only whitelisted inline HTML tags?

          Jesse Glick added a comment - I am afraid this solution does not work well. To reproduce: check out blueocean-plugin @ abe95426d22856d368c667214950b70eb976d56f and mvn -DskipTests clean install check out workflow-aggregator-plugin @ 2d6df24c908665b9a812476409f562615bd0024c , apply attached JENKINS-41200.diff , and make -C demo run wait for cd #1 to get at least to the Staging stage check the traditional console log in /job/cd/1/console : Maven output is colorized check Blue Ocean in /blue/organizations/jenkins/cd/detail/master/1/pipeline : it is not Replay the build, this time commenting out the ansiColor step in mvn.groovy (leaving just the nested sh ) traditional console: Maven output is not colorized, log is cluttered with escape sequences B.O.: log is colorized In other words, you cannot have a single Pipeline which looks nice in both classic and Blue Ocean UIs. Ouch. The reason is that you rolled a one-off solution rather than supporting the much more general ConsoleNote . While I understand that certain notes would produce output incompatible with the layout expectations of Blue Ocean (such as the target listing from the Ant plugin), surely it could honor at least those notes producing only whitelisted inline HTML tags?

          Josh McDonald added a comment -

          Sure, if we want to write a HTML parser.

          Josh McDonald added a comment - Sure, if we want to write a HTML parser.

          Jesse Glick added a comment -

          antisamy-markup-formatter-plugin may already include everything you need.

          Jesse Glick added a comment - antisamy-markup-formatter-plugin  may already include everything you need.

          James Dumay added a comment -

          jglick we cannot have direct injection of nodes into the DOM like that. React won't allow it and the work arounds to do so are very painful.

          Could we get a separate bug report please?

          James Dumay added a comment - jglick we cannot have direct injection of nodes into the DOM like that. React won't allow it and the work arounds to do so are very painful. Could we get a separate bug report please?

          Jesse Glick added a comment -

          Filed JENKINS-46324 for it.

          Jesse Glick added a comment - Filed  JENKINS-46324 for it.

          Arseniy Tashoyan added a comment - - edited

          The problem is still in place with Blue Ocean 1.3.3. Strange that this issue is marked as 'resolved' and the target release is 1.2

          Symptoms:

          A pipeline invokes Ansible plugin inside the ANSI Color plugin block:

          ansiColor('xterm') {
            ansiblePlaybook colorized: true,
              inventory: 'inventory',
              playbook: 'playbook.yml',
              sudoUser: null
          }

          In classic view, the output of Ansible is colored. In Blue Ocean view, the output of Ansible is not colored.

          After removing the ansiColor(...) {...} block from the pipeline descriptor, Blue Ocean shows colored output, but classic view displays some mess with color codes. So one cannot have colored output in both views.

           

           

           

           

          Arseniy Tashoyan added a comment - - edited The problem is still in place with Blue Ocean 1.3.3. Strange that this issue is marked as 'resolved' and the target release is 1.2 Symptoms: A pipeline invokes Ansible plugin inside the ANSI Color plugin block: ansiColor( 'xterm' ) { ansiblePlaybook colorized: true ,   inventory: 'inventory' ,     playbook: 'playbook.yml' ,     sudoUser: null } In classic view, the output of Ansible is colored. In Blue Ocean view, the output of Ansible is not colored. After removing the ansiColor(...) {...} block from the pipeline descriptor, Blue Ocean shows colored output, but classic view displays some mess with color codes. So one cannot have colored output in both views.        

          Sorin Sbarnea added a comment -

          tashoyan, this is  really warring to me as it creates a clear deadlock for adopting BlueOcean UI. Now we have coloring working and not using BlueOcean.

          I want to promote it to others but if coloring is messed they will not get the buy-in.... and if I dare to remove the ansiColor {} one, I bet that nobody will allow me to even pass the core review on that change.

          Sorin Sbarnea added a comment - tashoyan , this is  really warring to me as it creates a clear deadlock for adopting BlueOcean UI. Now we have coloring working and not using BlueOcean. I want to promote it to others but if coloring is messed they will not get the buy-in.... and if I dare to remove the ansiColor {} one, I bet that nobody will allow me to even pass the core review on that change.

          Michael Neale added a comment -

          ssbarnea yes no one has found a way to make it work with both. Classic doesn't use standard ansi codes but a weird serialization mechanism which isn't really able to work with blue ocean, but if someone was to have another crack  at making it also work, that could be good (perhaps open another ticket though). 

          Michael Neale added a comment - ssbarnea yes no one has found a way to make it work with both. Classic doesn't use standard ansi codes but a weird serialization mechanism which isn't really able to work with blue ocean, but if someone was to have another crack  at making it also work, that could be good (perhaps open another ticket though). 

          Josh McDonald added a comment -

          I have a fix for this that will require patches to the ansicolor plugin. Problem is it breaks like 150 unit tests so if it's a priority I can spend the time fixing them, but there's no guarantee the maintainers will be interested in accepting it as it might work in a way they don't like (it's kinda kludgey but still nice than trying to parse the HTML)

          Josh McDonald added a comment - I have a fix for this that will require patches to the ansicolor plugin. Problem is it breaks like 150 unit tests so if it's a priority I can spend the time fixing them, but there's no guarantee the maintainers will be interested in accepting it as it might work in a way they don't like (it's kinda kludgey but still nice than trying to parse the HTML)

          Sorin Sbarnea added a comment -

          sophistifunk, I will help with it, I made few patches to ANSI color myself in the past and if we can make it pass unittests, it will be merged and releases, quicker than you think. CC me on it (ssbarnea on github).

          Sorin Sbarnea added a comment - sophistifunk , I will help with it, I made few patches to ANSI color myself in the past and if we can make it pass unittests, it will be merged and releases, quicker than you think. CC me on it (ssbarnea on github).

          Andrew Gray added a comment -

          I am using 1.4.1 and it doesn't look like `
          ansiColor('xterm') { ... }
          works at all in blue ocean. 

          Where am I supposed to see this colored console?

          Andrew Gray added a comment - I am using 1.4.1 and it doesn't look like ` ansiColor('xterm') { ... } works at all in blue ocean.  Where am I supposed to see this colored console?

          Michael Neale added a comment -

          apgray remove the ansiColor, and colour codes should automatically show up I believe right sophistifunk

           

          ansiColor injects binary noise and wipes out the real ansi codes so can't work with blue ocean or any log viewed other than the jenkins log, due to a very bad design mistake early on. 

          Michael Neale added a comment - apgray  remove the ansiColor, and colour codes should automatically show up I believe right sophistifunk ?    ansiColor injects binary noise and wipes out the real ansi codes so can't work with blue ocean or any log viewed other than the jenkins log, due to a very bad design mistake early on. 

          Josh McDonald added a comment -

          Yes, currently you need to run your pipeline without ansiColor in order to see the colours in BO.

          Josh McDonald added a comment - Yes, currently you need to run your pipeline without ansiColor in order to see the colours in BO.

          Jesse Glick added a comment -

          Jesse Glick added a comment - https://github.com/jenkinsci/ansicolor-plugin/pull/132#issuecomment-440937753

          Josh McDonald added a comment - - edited

          Happy to see this! It's way more thorough than my experimental patch I never had the time to fix tests for  All I did was stop stripping the codes, and bookend them with injected

          <!--

          and

          -->

          "tags" in the annotation stream. 

          Josh McDonald added a comment - - edited Happy to see this! It's way more thorough than my experimental patch I never had the time to fix tests for   All I did was stop stripping the codes, and bookend them with injected <!-- and --> "tags" in the annotation stream. 

          Jesse Glick added a comment -

          Ooh, the use of comments rather than <span style="display: none">…</span> is a nice trick. Ported it

          Jesse Glick added a comment - Ooh, the use of comments rather than <span style="display: none">…</span> is a nice trick. Ported it

            sophistifunk Josh McDonald
            michaelneale Michael Neale
            Votes:
            29 Vote for this issue
            Watchers:
            43 Start watching this issue

              Created:
              Updated:
              Resolved: