Add Copy Button to Script Output Window

[dmismirn]

NetBox version

v4.4.1

Feature type

New functionality

Proposed functionality

Sometimes it is convenient to copy the long output of script to work with it in the editor. The Copy button could be placed next to the download button.

Use case

Pick up a large output to:

• work in the editor;

• apply generated config on network equipment.

Database changes

not required

External dependencies

not required

[jnovinger]

@dmismirn , is this something you would be interested in contributing?

[dmismirn]

@jnovinger I have limited Django experience but I ready to try.

[jnovinger]

Thanks @dmismirn , assigning to you. Here's some guidance.

NetBox uses a well-established pattern for copy-to-clipboard functionality that you can follow for the script output feature.

How NetBox implements copy-to-clipboard:

1. Django Template Tag: {% copy_content "target_id" %} - renders a button with clipboard functionality
2. JavaScript Library: Uses clipboard.js to handle the actual clipboard operations
3. Target Element: Requires the content element to have an id attribute that matches the template tag parameter

For this issue, you need to make a couple small changes, probably in netbox/templates/extras/htmx/script_result.html:

1. Add an ID to the DOM element containing the script output
2. Add the copy template tag after the existing download button

Take a look at netbox/templates/extras/object_render_config.html:55-64 for the pattern. Note how the DOM element id attribute and the argument to the copy_content template tag match, that's important.

Before doing that, it's would be useful to read up on how Django templates and template tags work. You don't need to fully grok all of this, but it definitely helps to understand how templates and template tags work together.

• Django Template Tags Documentation
• Django Templates Documentation

Testing Your Changes:

1. Run a NetBox script that produces output
2. Verify you see both Download and Copy buttons
3. Test that the Copy button copies the script output to your clipboard

The copy functionality is already implemented in NetBox - you're just connecting it to the script output content. No JavaScript or Python changes should be needed.

[jnovinger]

When you're done and ready to submit your work, make sure your pull request targets the main branch.

[dmismirn]

@jnovinger, thanks for detailed instructions, this is my result (it tested):

...
            <div>
              <a href="?export=output" class="btn btn-sm btn-primary" role="button">
                <i class="mdi mdi-download" aria-hidden="true"></i> {% trans "Download" %}
              </a>
              {% copy_content "job_data_output" %}
            </div>
          {% endif %}
        </h2>
        {% if job.data.output %}
          <pre class="card-body font-monospace" id="job_data_output">{{ job.data.output }}</pre>
...

But I wasn't able to make pull request. I did - clone repo, add branch, commit fix in branch after that I try push to github. Actual I don't know how to push my branch to github. My local repo looks like:

$ git branch -a
  20426-add-copy-button-to-script-output-window
* main
  remotes/origin/11507-show-aggregate-and-rir-on-api
  remotes/origin/19275-fixes-interface-bulk-edit
...

[jnovinger]

@dmismirn , so close! From the git output you pasted, it looks maybe you skipped the "fork the repo" step in getting setup. You can read about it in our Development -> Getting Started docs. Github also has a good guide for contributing that covers forking as well.