Developing Nautobot Plugins – Part 3

This post is the third installment in a series on how to write plugins for Nautobot. Nautobot plugins are a way to extend the base functionality of Nautobot. Plugins can extend the database schema, add custom pages, and even update existing pages within Nautobot; the possibilities are nearly endless. In this blog series we will be developing a plugin for modeling and managing DNS zone data within Nautobot. In part 1 we covered setting up a development environment, and in part 2 we created models and views.

This post will provide a breakdown of how to use forms and tables inside your plugin. At a high level the purpose of forms and tables is to allow us to easily interact with our new models and perform CRUD (Create, Read, Update, and Delete) operations.

For coding along with this blog post, please clone part 2 of nautobot-example-dns-manager and use that as a starting point.

The completed part 3 version of nautobot-example-dns-manager is also available as a reference.

Forms Are Required to Add Objects

The first thing we want to do with our new DNS models is create some objects. In order to do this we need to create a form that will enable us to create a new DnsZoneModel object. We’ll start with the DNS Zone model since the ARecordModel and CNameRecordModel in our DNS manager plugin will need to be associated with a DNS Zone.

There are two places in the web GUI that give us access to create a new object. The first is a plus button in the navigation bar menu under IPAM > DNS > DNS Zones. The second is an add button that will appear on the table list view for DNS Zone objects. Let’s use the add button in the navigation bar first.

This button is present because in part 2 we included an add button in our navbar in nautobot_example_dns_manager/navigation.py.

The link matches our app name and follows the naming convention plugins:<app_name>:<url_prefix>_add

# nautobot_example_dns_manager/navigation.py

NavMenuItem(
                        link="plugins:nautobot_example_dns_manager:dnszonemodel_list",
                        name="DNS Zones",
                        permissions=[],
                        buttons=(
                            NavMenuAddButton(
                                link="plugins:nautobot_example_dns_manager:dnszonemodel_add",
                                permissions=[],
                            ),
                        ),
                    ),

How do we know what the URL prefix should be? This is set in nautobot_example_dns_manager/urls.py when we register the view as a URL pattern.

# nautobot_example_dns_manager/urls.py
...
router.register("dnszonemodel", views.DnsZoneModelUIViewSet) # "dnszonemodel" is our URL prefix

urlpatterns = []
urlpatterns += router.urls

If we start our development server and click the plus button under IPAM > DNS > DNS Zones, we will get this error.

TypeError at /plugins/example-dns-manager/dnszonemodel/add/
'NoneType' object is not callable

We’re getting this error because our plugin is missing the form class for this model, which is required to create or update objects. Let’s create a form class for this.

Creating the Form Class for DnsZoneModel

Create a new file in nautobot_example_dns_manager/ called forms.py.

At the top of the file include a short description and a couple of imports.

# nautobot_example_dns_manager/forms.py

"""Nautobot Example DNS Manager Forms."""

from nautobot.extras.forms import NautobotModelForm
from nautobot.utilities.forms import SlugField

from .models import DnsZoneModel

NautobotModelForm is the standard form to use when creating a model form, and we also need the SlugField class from nautobot.utilities.forms to use within our form.

Forms depend on models, so we also need to import our DnsZoneModel we created in part 2 from .models.

The form will inherit from NautobotModelForm and should have an instance of SlugField class assigned to the slug class attribute. We also need a Meta class inside our form that will tell Nautobot which model to link the form to and which fields to allow a user to populate.

# nautobot_example_dns_manager/forms.py

class DnsZoneModelForm(NautobotModelForm):
    slug = SlugField()

    class Meta:
        model = DnsZoneModel
        fields = [
            "name",
            "slug",
            "mname",
            "rname",
            "ttl",
            "refresh",
            "retry",
            "expire",
        ]

Link the DnsZoneModel Form to Our DnsZoneModel View

The next step before we can actually add an item is to assign the form to our view set in nautobot_example_dns_manager/views.py.

First, inside views.py import our new form.

# nautobot_example_dns_manager/views.py

from .forms import DnsZoneModelForm

Next, inside DnsZoneModelUIViewSet assign the form class to our view set.

# nautobot_example_dns_manager/views.py

...
class DnsZoneModelUIViewSet(
    view_mixins.ObjectListViewMixin,
    view_mixins.ObjectDetailViewMixin,
    view_mixins.ObjectEditViewMixin,
    view_mixins.ObjectDestroyViewMixin,
    view_mixins.ObjectBulkDestroyViewMixin,    
):
    queryset = DnsZoneModel.objects.all()
    table_class = DnsZoneModelTable
    form_class = DnsZoneModelForm # Assign our form class to the ViewSet here
...

After saving all changes and restarting the development server, we should now be able to click on the plus button again in the navigation bar for DNS Zones and see a form that allows us to create a new DNS Zone. We can see that the form has automatically added some items from the DnsZoneModel like help text and defaults. If we enter a new zone name, we can also see that the slug field is auto-populated for us. This is because of the line slug = SlugField() in our form class.

If we try to create the object now, we will get the following error:

AssertionError at /plugins/example-dns-manager/dnszonemodel/example-com
'DnsZoneModelUIViewSet' should either include a `serializer_class` attribute, or override the `get_serializer_class()` method.

Create an API Serializer for Our DnsZoneModel Form

One of the caveats of using Nautobot ViewSets is we must have a serializer class created and defined for the create and update views to be fully functional. The specific purpose and functions of the serializer and api views and urls modules are beyond the scope of this blog post and will be covered later. For now, we will create a very basic api serializer for the DnsZoneModel.

Create the following structure in our project:

└── nautobot_example_dns_manager
    └── api
        ├── __init__.py
        ├── serializers.py
        ├── urls.py
        └── views.py

__init__.py can be a blank file and is present to indicate to Python that the api folder is a package.

serializers.py should contain the following:

# nautobot_example_dns_manager/api/serializers.py

from nautobot.extras.api.serializers import NautobotModelSerializer

from nautobot_example_dns_manager.models import DnsZoneModel


class DnsZoneModelSerializer(NautobotModelSerializer):
    class Meta:
        model = DnsZoneModel
        fields = "__all__"

urls.py should contain the following:

# nautobot_example_dns_manager/api/urls.py

from nautobot.core.api import OrderedDefaultRouter

from . import views

router = OrderedDefaultRouter()
router.register("dnszonemodel", views.DnsZoneModelViewSet)

urlpatterns = router.urls

And views.py should contain the following:

# nautobot_example_dns_manager/api/views.py

from nautobot.extras.api.views import NautobotModelViewSet

from nautobot_example_dns_manager.models import DnsZoneModel
from . import serializers


class DnsZoneModelViewSet(NautobotModelViewSet):
    queryset = DnsZoneModel.objects.all()
    serializer_class = serializers.DnsZoneModelSerializer

The final step is to get the serializer class defined in DnsZoneModelUIViewSet in nautobot_example_dns_manager/views.py.

Import the serializer module:

# nautobot_example_dns_manager/views.py

from .api import serializers

And add the following line to the DnsZoneModelUIViewSet class:

# nautobot_example_dns_manager/views.py

...
class DnsZoneModelUIViewSet(
    view_mixins.ObjectListViewMixin,
    view_mixins.ObjectDetailViewMixin,
    view_mixins.ObjectEditViewMixin,
    view_mixins.ObjectDestroyViewMixin,
    view_mixins.ObjectBulkDestroyViewMixin,
):
    queryset = DnsZoneModel.objects.all()
    table_class = DnsZoneModelTable
    form_class = DnsZoneModelForm
    serializer_class = serializers.DnsZoneModelSerializer # Add our new serializer class to the ViewSet
    ...

The first 20 lines of nautobot_example_dns_manager/views.py should now look like this:

# nautobot_example_dns_manager/views.py

"""Nautobot Example DNS Manager Views."""

from nautobot.core.views import mixins as view_mixins

from .models import DnsZoneModel, ARecordModel, CNameRecordModel
from .tables import DnsZoneModelTable, ARecordModelTable, CNameRecordModelTable
from .forms import DnsZoneModelForm
from .api import serializers


class DnsZoneModelUIViewSet(
    view_mixins.ObjectListViewMixin,
    view_mixins.ObjectDetailViewMixin,
    view_mixins.ObjectEditViewMixin,
    view_mixins.ObjectDestroyViewMixin,
    view_mixins.ObjectBulkDestroyViewMixin,
):
    queryset = DnsZoneModel.objects.all()
    table_class = DnsZoneModelTable
    form_class = DnsZoneModelForm
    serializer_class = serializers.DnsZoneModelSerializer
...

Once these files and changes are in place and the development server has restarted we can create our first DNS Zone object. Well, in this case it’s our second. Even though we were greeted with a traceback earlier when trying to create example.com, our first DNS Zone was actually still created, so we’ll get an error if we try to use the same name.

After clicking Create we will be taken to the object detail view for the object we just created. Since we didn’t create our own template for the object detail view, we will see the rendered version of the generic html templates for object detail. As you can see, there aren’t any fields displayed from our model-specific fields other than the name. There’s an Advanced tab that shows us some metadata, such as the slug and created and updated timestamps.

The reason this view is so basic is because we did not create an html template, and it is using the default object detail view template provided by Nautobot. We will need to create our own html template to customize the information displayed here.

Creating a Custom Object Retrieve Template for DnsZoneModel

Create a new directory inside nautobot_example_dns_manager called templates. Inside this directory create another directory also called nautobot_example_dns_manager. Nautobot will automatically search for html templates first in templates/<app name> before falling back to the generic templates. Nautobot will then look for a file in this directory called <model_name>_retrieve.html. By convention the model name can be converted to all lowercase and it will still find the file. Let’s create dnszonemodel_retrieve.html.

The complete file path looks like this:

└── nautobot_example_dns_manager
    └── templates
        └── nautobot_example_dns_manager
            └── dnszonemodel_retrieve.html

The good news is we do not have to create all the html for this template from scratch. Using the Django template language we can build off the generic/object_retrieve.html template and then add our own content.

We do this by using the {% extends %} template tag. We also need to load the helpers using {% load %}.

The first two lines should look like this:

{% extends 'generic/object_retrieve.html' %}
{% load helpers %}

The generic object_retrieve template includes a blank template block called content_left_page where we can put our fields. For more complex models with more fields you might use content_right_page and content_full_width_page as well, but for our project adding a table to content_left_page is enough to display all our model fields.

Let’s start by adding a table with just a single data row:

{% extends 'generic/object_retrieve.html' %}
{% load helpers %}

{% block content_left_page %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>DNS Zone Model</strong>
            </div>
            <table class="table table-hover panel-body attr-table">
                <tr>
                    <td>Zone Name Server</td>
                    <td>{{ object.mname|placeholder }}</td>
                </tr>
            </table>
        </div>
{% endblock content_left_page %}