Skip to content
Snippets Groups Projects

Feat(Blob): Add graph render support for Blob Viewer

Merged Martin Schurz requested to merge gitlab-community/gitlab:plantuml_rich_view into master
All threads resolved!

What does this MR do and why?

Feat(Blob): Add graph render support for Blob Viewer

Adds a rich view for graph files when the integration is enabled.

Supported extensions:

  • mermaid
  • plantuml
  • pu
  • puml
  • iuml
  • d2
  • dot
  • gv
  • noml
  • vg
  • vl

Changelog: added

References

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Enable the PlantUML integration (https://docs.gitlab.com/ee/administration/integration/plantuml.html#enable-plantuml-integration)
  2. Create a .puml file in a repository with example content from documentation
  3. view the file in blob viewer
Edited by Martin Schurz

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • 3 Warnings
    :warning: 4c75253b: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
    :warning: bf3604ba: The commit subject must start with a capital letter. For more information, take a look at our Commit message guidelines.
    :warning:

    featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart.

    For more information, see:

    Reviewer roulette

    Category Reviewer Maintainer
    backend @minahilnichols profile link current availability (UTC-5) @alipniagov profile link current availability (UTC+1)
    frontend @vvempati profile link current availability (UTC+13) @bsandlin profile link current availability (UTC-6)
    UX @pedroms profile link current availability (UTC+0) Maintainer review is optional for UX

    Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

    If needed, you can retry the :repeat: danger-review job that generated this comment.

    Generated by :no_entry_sign: Danger

    Edited by Danger Bot
  • Martin Schurz added 1 commit

    added 1 commit

    Compare with previous version

  • requested review from @syasonik and @ramistry

  • @syasonik @ramistry, this Community contribution is ready for review.

    • Do you have capacity and domain expertise to review this? If not, find one or more reviewers and assign to them.
    • If you've reviewed it, add the workflowin dev label if these changes need more work before the next review.
    • Please ensure the group's Product Manager has validated the linked issue.

    This message was generated automatically. Improve it or delete it.

  • Sarah Yasonik approved this merge request

    approved this merge request

  • Sarah Yasonik changed milestone to %17.9

    changed milestone to %17.9

  • Sarah Yasonik requested review from @pskorupa

    requested review from @pskorupa

  • added pipelinetier-2 label and removed pipelinetier-1 label

  • Before you set this MR to auto-merge

    This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3.

    Before you set this MR to auto-merge, please check the following:

    • You are the last maintainer of this merge request
    • The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
    • This pipeline is recent enough (created in the last 8 hours)

    If all the criteria above apply, please set auto-merge for this merge request.

    See pipeline tiers and merging a merge request for more details.

  • Rajan Mistry approved this merge request

    approved this merge request

  • Rajan Mistry requested review from @tristan.read and removed review request for @ramistry

    requested review from @tristan.read and removed review request for @ramistry

  • Martin Schurz added 1 commit

    added 1 commit

    • efa42be0 - Include iuml files in supported extensions

    Compare with previous version

  • Piotr Skorupa requested review from @digitalmoksha and removed review request for @pskorupa

    requested review from @digitalmoksha and removed review request for @pskorupa

  • added UX label

  • Tristan Read approved this merge request

    approved this merge request

    • Resolved by Brett Walker

      Hey @schurzi, it's great that you're tackling this!

      There are a couple things we need to think about.

      One is that PlantUML rendering is actually supported by two services - the PlantUML server, or the Kroki server. Both can render PlantUML graphs. If the PLantUML server is not enabled, and Kroki is, then it handles the rendering. If the PlantUML server is enabled, then it handles it, even if Kroki is enabled. So we really need to handle both scenarios. And of course there are different calls based on which server is being used.

      The other is I'm a little skittish about using different Asciidoc PlantUML calls from our usage in the plantuml_filter.rb

      Asciidoctor::PlantUml::Processor.plantuml_content(node.content, {})

      There are some security considerations and it's better not to tangle with those right now.

      Here's what I propose:

      Our markdown pipeline deftly handles rendering PlantUML, as well as all of our other graphs. All that is required is that the graph code is surrounded by the proper code block. So we could take

      @startuml
      Alicex -> Bob: Authentication Request
      Bob --> Alicex: Authentication Response
      
      Alicex -> Bob: Another authentication Request
      Alicex <-- Bob: Another authentication Response
      @enduml

      and embed it in a code block like

      ```plantuml
      @startuml
      Alicex -> Bob: Authentication Request
      Bob --> Alicex: Authentication Response
      
      Alicex -> Bob: Another authentication Request
      Alicex <-- Bob: Another authentication Response
      @enduml
      ```

      Besides handling PlantUML properly no matter what combination of services is enabled, but would also easily be the gateway into support ALL the graphs we support. We would just have to detect the file extension and put the proper code block header on it.

      I think we could maybe rename plantuml.rb to graph.rb for the viewer, and make it initially focused on the PlantUML extensions. Do the wrapping, and then have the partial operate similarly to the _markup.html.haml. It would make sense to have our own _graph.html.haml file, but it would be very similar to the markup one.

      What do you think? I know it's a bit of a change, but I don't think it should be too big. And it really sets us up to supporting all graph types.

      Just for reference, the files that process PlantUML and Kroki are

  • Martin Schurz added 1 commit

    added 1 commit

    • 4c75253b - Generalize implementation to support multiple graph types

    Compare with previous version

  • Martin Schurz reset approvals from @tristan.read by pushing to the branch

    reset approvals from @tristan.read by pushing to the branch

  • Martin Schurz
  • Martin Schurz changed title from Feat(Blob): Add PlantUML render support for Blob Viewer to Feat(Blob): Add graph render support for Blob Viewer

    changed title from Feat(Blob): Add PlantUML render support for Blob Viewer to Feat(Blob): Add graph render support for Blob Viewer

  • Martin Schurz changed the description

    changed the description

  • Tristan Read approved this merge request

    approved this merge request

  • Brett Walker resolved all threads

    resolved all threads

  • Brett Walker approved this merge request

    approved this merge request

  • Brett Walker enabled automatic add to merge train when checks pass

    enabled automatic add to merge train when checks pass

  • 3 Warnings
    :warning: 4c75253b: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
    :warning: bf3604ba: The commit subject must start with a capital letter. For more information, take a look at our Commit message guidelines.
    :warning:

    featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart.

    For more information, see:

    Reviewer roulette

    Category Reviewer Maintainer
    backend @missy-gitlab profile link current availability (UTC+1) @alipniagov profile link current availability (UTC+1)
    frontend @vvempati profile link current availability (UTC+13) @bsandlin profile link current availability (UTC-6)
    UX @pedroms profile link current availability (UTC+0) Maintainer review is optional for UX

    Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

    If needed, you can retry the :repeat: danger-review job that generated this comment.

    Generated by :no_entry_sign: Danger

  • Brett Walker resolved all threads

    resolved all threads

  • E2E Test Result Summary

    allure-report-publisher generated test report!

    e2e-test-on-cng: :white_check_mark: test report for 4c75253b

    expand test summary
    +------------------------------------------------------------------+
    |                          suites summary                          |
    +-------------+--------+--------+---------+-------+-------+--------+
    |             | passed | failed | skipped | flaky | total | result |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Govern      | 84     | 0      | 10      | 0     | 94    | ✅     |
    | Create      | 140    | 0      | 22      | 0     | 162   | ✅     |
    | Monitor     | 8      | 0      | 12      | 0     | 20    | ✅     |
    | Verify      | 52     | 0      | 20      | 0     | 72    | ✅     |
    | Data Stores | 33     | 0      | 10      | 0     | 43    | ✅     |
    | Plan        | 86     | 0      | 8       | 0     | 94    | ✅     |
    | Package     | 29     | 0      | 15      | 0     | 44    | ✅     |
    | Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Configure   | 0      | 0      | 3       | 0     | 3     | ➖     |
    | Growth      | 0      | 0      | 2       | 0     | 2     | ➖     |
    | Fulfillment | 2      | 0      | 7       | 0     | 9     | ✅     |
    | ModelOps    | 0      | 0      | 1       | 0     | 1     | ➖     |
    | Secure      | 2      | 0      | 5       | 0     | 7     | ✅     |
    | Ai-powered  | 0      | 0      | 2       | 0     | 2     | ➖     |
    | Manage      | 1      | 0      | 9       | 0     | 10    | ✅     |
    | Release     | 5      | 0      | 1       | 0     | 6     | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Total       | 444    | 0      | 127     | 0     | 571   | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+

    e2e-test-on-gdk: :white_check_mark: test report for 4c75253b

    expand test summary
    +------------------------------------------------------------------+
    |                          suites summary                          |
    +-------------+--------+--------+---------+-------+-------+--------+
    |             | passed | failed | skipped | flaky | total | result |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Govern      | 53     | 0      | 2       | 0     | 55    | ✅     |
    | Create      | 105    | 0      | 3       | 0     | 108   | ✅     |
    | Plan        | 34     | 0      | 0       | 0     | 34    | ✅     |
    | Verify      | 46     | 0      | 2       | 0     | 48    | ✅     |
    | Release     | 4      | 0      | 0       | 0     | 4     | ✅     |
    | Package     | 24     | 0      | 0       | 0     | 24    | ✅     |
    | Data Stores | 16     | 0      | 0       | 0     | 16    | ✅     |
    | Manage      | 1      | 0      | 0       | 0     | 1     | ✅     |
    | Secure      | 4      | 0      | 0       | 0     | 4     | ✅     |
    | Fulfillment | 1      | 0      | 0       | 0     | 1     | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Total       | 288    | 0      | 7       | 0     | 295   | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    Edited by ****
  • Brett Walker added this merge request to the merge train at position 2

    added this merge request to the merge train at position 2

  • merged

  • Hi @schurzi :wave:

    :tada: See where you rank! Check your spot on the contributor leaderboard and unlock rewards.


    How was your code review experience with this merge request? Please tell us how we can continue to iterate and improve:

    1. React with a :thumbsup: or a :thumbsdown: on this comment to describe your experience.
    2. Create a new comment starting with @gitlab-bot feedback below, and leave any additional feedback you have for us in the comment.

    As a benefit of being a GitLab Community Contributor, you have access to GitLab Duo, our AI-powered features. With Code Suggestions, Chat, Root Cause Analysis and more AI-powered features, GitLab Duo helps to boost your efficiency and effectiveness by reducing the time required to write and understand code and pipelines. Visit the GitLab Duo documentation to learn more about the benefits.

    Thanks for your help! :heart:

    This message was generated automatically. Improve it or delete it.

  • Brett Walker mentioned in commit 019c8677

    mentioned in commit 019c8677

  • @mmacfarlane might be another one for a release post...

  • added workflowstaging label and removed workflowcanary label

  • Please register or sign in to reply
    Loading