nautobot 2.3.16__py3-none-any.whl → 2.4.0b1__py3-none-any.whl

nautobot/extras/templates/extras/marketplace.html

@@ -0,0 +1,278 @@
+{% extends "base.html" %}
+{% load helpers %}
+{% load static %}
+
+{% block extra_styles %}
+<style>
+    .tile-header {
+        display: block;
+    }
+
+    .tile-header h2 {
+        margin-bottom: 5px;
+        margin-top: 0;
+    }
+
+    .tile-actions-placeholder {
+        height: 30px;
+        margin-left: 3px;
+        width: 35px;
+    }
+
+    .tile-description {
+        margin-top: 10px;
+    }
+
+    .tile-actions {
+        position: absolute;
+        right: 21px;
+        top: 21px;
+    }
+
+    .tile-actions .btn {
+        padding: 3px 8px;  /* Enlarge action buttons to 32px x 32px */
+    }
+
+    .app-details {
+        column-gap: 20px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .app-details dt {
+        margin-top: 20px;
+    }
+
+    .app-details ul {
+        list-style: none;
+        padding: 0;
+    }
+
+    .app-details > :last-child {
+        flex: 1;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+    <div class="pull-right noprint">
+        <a class="btn btn-primary" href="{% url 'apps:apps_list' %}">See Installed Apps</a>
+    </div>
+
+    <h1>{% block title %}Apps Marketplace{% endblock %}</h1>
+
+    <div class="row">
+        <div class="col-md-12">
+            <section class="tiles">
+                {% for app in apps %}
+                    <div style="position: relative;">
+                        <a class="tile clickable" data-app="{{ app.package_name }}" href="?app={{ app.package_name }}">
+                            <header class="tile-header">
+                                <img
+                                    alt="{{ app.name }}"
+                                    src="{% if app.icon|default:None != None %}{{ app.icon }}{% else %}{% static 'img/nautobot_icon_192x192.png' %}{% endif %}"
+                                    height="64"
+                                    width="64"
+                                />
+
+                                <!--
+                                   Occupy `.tile-actions` dedicated space with `.tile-actions-placeholder`. See comment
+                                   above `.tile-actions` element for detailed explanation of this solution and why it
+                                   is required here.
+                                -->
+                                <div aria-hidden="true" class="tile-actions-placeholder pull-right"></div>
+
+                                <h2>{{ app.name }}</h2>
+
+                                {% for use_case in app.use_cases %}
+                                    <label class="label label-default">{{ use_case }}</label>
+                                {% endfor %}
+                            </header>
+
+                            <p class="tile-description">{{ app.headline }}</p>
+
+                            <footer class="tile-footer">
+                                <div>Author: {{ app.author }}</div>
+                                <div>Availability: {{ app.availability }}</div>
+                            </footer>
+                        </a>
+
+                        <!--
+                            Place app action links outside the "main" `a` tile to adhere to HTML rule that forbid
+                            nesting anchors within anchors. Absolutely position the actions to make them appear inside
+                            the tile though. Fill their dedicated space with `.tile-actions-placeholder` element.
+                        -->
+                        <div class="tile-actions">
+                            {% if app.docs|default:None != None %}
+                                <a href="{{ app.docs }}" class="btn btn-info btn-xs" target="_blank" title="Docs">
+                            {% else %}
+                                <a href="" class="btn btn-info btn-xs disabled" target="_blank" title="No docs provided">
+                            {% endif %}
+                                <i class="mdi mdi-book-open-page-variant"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="modal fade" tabindex="-1" id="modal-{{ app.package_name }}">
+                        <div class="modal-dialog modal-lg" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+
+                                    <h4 class="modal-title">{{ app.name }}</h4>
+                                </div>
+
+                                <div class="modal-body">
+                                    <div class="app-details">
+                                        <div>
+                                            <img
+                                                alt="{{ app.name }}"
+                                                src="{% if app.icon|default:None != None %}{{ app.icon }}{% else %}{% static 'img/nautobot_icon_192x192.png' %}{% endif %}"
+                                                height="64"
+                                                width="64"
+                                            />
+
+                                            <dl>
+                                                <dt class="text-muted text-uppercase">Author</dt>
+                                                <dd>{{ app.author }}</dd>
+
+                                                <dt class="text-muted text-uppercase">Availability</dt>
+                                                <dd>{{ app.availability }}</dd>
+
+                                                {% if app.requires|length > 0 %}
+                                                    <dt class="text-muted text-uppercase">Requirements</dt>
+                                                    <dd>
+                                                        <ul>
+                                                            {% for requirement in app.requires %}
+                                                                {% for required_app in apps %}
+                                                                    {% if required_app.package_name == requirement %}
+                                                                        <li>
+                                                                            <a
+                                                                                data-app="{{ required_app.package_name }}"
+                                                                                href="?app={{ required_app.package_name }}"
+                                                                            >
+                                                                                {{ required_app.name }}
+                                                                            </a>
+                                                                        </li>
+                                                                    {% endif %}
+                                                                {% endfor %}
+                                                            {% endfor %}
+                                                        </ul>
+                                                    </dd>
+                                                {% endif %}
+
+                                                <dt class="text-muted text-uppercase">Package name</dt>
+                                                <dd><code>{{ app.package_name }}</code></dd>
+                                            </dl>
+                                        </div>
+
+                                        <div>
+                                            <h5>{{ app.headline }}</h5>
+
+                                            <p>{{ app.description }}</p>
+
+                                            {% if app.docs|default:None != None %}
+                                                <p>
+                                                    <span>
+                                                        Docs:
+                                                        <a href="{{ app.docs }}" target="_blank">{{ app.docs }}</a>
+                                                    </span>
+                                                </p>
+                                            {% endif %}
+
+                                            {% if app.availability == "Private" %}
+                                                <p>
+                                                    <strong>
+                                                        This app is private. Reach out to
+                                                        <a href="https://networktocode.com/nautobot/" target="_blank">
+                                                            Nautobot Team
+                                                        </a>
+                                                        for more information.
+                                                    </strong>
+                                                </p>
+                                            {% endif %}
+
+                                            <div>
+                                                {% for use_case in app.use_cases %}
+                                                    <label class="label label-default">{{ use_case }}</label>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="modal-footer">
+                                    <button class="btn btn-primary" data-dismiss="modal" type="button">
+                                        Done
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            </section>
+            <div class="clearfix"></div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascript %}
+{{ block.super }}
+<script>
+    (function () {
+        let previousApp = new URLSearchParams(window.location.search).get("app");
+        function toggleAppModal(app, action) {
+            if (app) {
+                const appModal = app ? document.querySelector(`#modal-${app}`) : null;
+                const isShown = $(appModal).data("bs.modal")?.isShown;
+
+                if (action === "hide" ? isShown : !isShown) {
+                    $(appModal).modal(action);
+                }
+
+                previousApp = action === "hide" ? null : app;
+            }
+        }
+
+        const appTilesContainer = document.querySelector(".tiles");
+        const appModals = appTilesContainer.querySelectorAll(".modal");
+        const appModalLinks = appTilesContainer.querySelectorAll("a[data-app]");
+
+        for (const appModal of appModals) {
+            $(appModal).on("hide.bs.modal", function () {
+                const searchParams = new URLSearchParams(window.location.search);
+                if (searchParams.get('app') === appModal.id.replace(/^modal-/, '')) {
+                    searchParams.delete('app');
+                    const nextSearch = searchParams.size > 0 ? `?${searchParams.toString()}` : '';
+                    const nextURL = `${window.location.pathname}${nextSearch}${window.location.hash}`;
+                    history.pushState(history.state, "", nextURL);
+                }
+
+                previousApp = null;
+            });
+        }
+
+        for (const appModalLink of appModalLinks) {
+            appModalLink.addEventListener("click", (event) => {
+                event.preventDefault();
+                history.pushState(history.state, "", appModalLink.href);
+
+                toggleAppModal(previousApp, "hide");
+                toggleAppModal(new URL(appModalLink.href).searchParams.get("app"), "show");
+            });
+        }
+
+        window.addEventListener("popstate", function onPopState() {
+            const searchParams = new URLSearchParams(window.location.search);
+            const currentApp = searchParams.get("app");
+
+            toggleAppModal(previousApp, 'hide');
+            toggleAppModal(currentApp, 'show');
+        });
+
+        toggleAppModal(new URLSearchParams(window.location.search).get("app"), "show");
+    })();
+</script>
+{% endblock javascript %}

nautobot/extras/templates/extras/plugins_list.html

@@ -3,10 +3,35 @@
 {% load static %}
 
 {% block content %}
+    <div class="row noprint">
+        <div class="col-md-12">
+            <ol class="breadcrumb">
+                {% block breadcrumbs %}
+                    <li><a href="{% url 'apps:apps_list' %}">Installed Apps</a></li>
+                {% endblock breadcrumbs %}
+            </ol>
+        </div>
+    </div>
+
     <div class="pull-right noprint">
+        <div class="btn-group">
+            <a class="btn btn-default set-apps-display" data-display="tiles" href="" title="Tiles">
+                <i class="mdi mdi-view-grid{% if display == "list" %}-outline{% endif %}"></i>
+            </a>
+            <a class="btn btn-default set-apps-display" data-display="list" href="" title="List">
+                <i class="mdi mdi-view-sequential{% if display == "tiles" %}-outline{% endif %}"></i>
+            </a>
+        </div>
+
         {% if request.user.is_authenticated and table_config_form %}
-            {% table_config_button table table_name="ObjectTable" %}
+            {% if display == "tiles" %}
+                {% table_config_button table table_name="ObjectTable" disabled=True %}
+            {% else %}
+                {% table_config_button table table_name="ObjectTable" %}
+            {% endif %}
         {% endif %}
+
+        <a class="btn btn-primary" href="{% url 'apps:apps_marketplace' %}">Visit Apps Marketplace</a>
     </div>
 
     <h1>{% block title %}Installed Apps{% endblock %}</h1>
@@ -30,4 +55,13 @@
 {% block javascript %}
 {{ block.super }}
 <script src="{% static 'js/tableconfig.js' %}"></script>
+
+<script>
+    // Set display anchor links without losing other potentially active query params such as applied filters.
+    [...document.querySelectorAll('.set-apps-display')].forEach(button => {
+        const queryParams = new URLSearchParams(window.location.search);
+        queryParams.set('display', button.dataset.display);
+        button.setAttribute('href', `?${queryParams.toString()}`);
+    });
+</script>
 {% endblock %}

nautobot/extras/templates/extras/plugins_tiles.html

@@ -0,0 +1,79 @@
+{% load helpers %}
+{% load static %}
+
+{% block extra_styles %}
+<style>
+    .tile-header {
+        align-items: flex-start;
+        display: block;
+    }
+
+    .tile-header h2 {
+        margin-top: 0;
+    }
+
+    .tile-actions-placeholder {
+        height: 30px;
+        margin-left: 3px;
+    }
+
+    .tile-actions {
+        position: absolute;
+        right: 21px;
+        top: 21px;
+    }
+
+    .tile-actions .btn {
+        padding: 3px 8px;  /* Enlarge action buttons to 32px x 32px */
+    }
+</style>
+{% endblock %}
+
+<section class="tiles">
+    {% for row in table.page.object_list|default:table.rows %}
+        <div style="position: relative;">
+            <a class="tile clickable" href="{% url 'apps:app_detail' app=row.record.app_label %}">
+                <header class="tile-header">
+                    <img
+                        alt="{{ row.record.name }}"
+                        src="{% if app_icons|get_item:row.record.package_name != None %}{{ app_icons|get_item:row.record.package_name }}{% else %}{% static 'img/nautobot_icon_192x192.png' %}{% endif %}"
+                        height="64"
+                        width="64"
+                    />
+
+                    <!--
+                       Occupy `.tile-actions` dedicated space with `.tile-actions-placeholder`. See comment above
+                       `.tile-actions` element for detailed explanation of this solution and why it is required here.
+                    -->
+                    <div
+                        aria-hidden="true"
+                        class="tile-actions-placeholder pull-right"
+                        style="width: calc(32px * {{ row.record.actions|length }} + 3px * {{ row.record.actions|length|add:-1 }})">
+                    </div>
+
+                    <h2>{{ row.record.name }}</h2>
+
+                    <p class="tile-description">{{ row.record.description }}</p>
+                </header>
+
+                <footer class="tile-footer">
+                    <div>Author: {{ row.record.author }}</div>
+                    <div>Version: {{ row.record.version }}</div>
+                </footer>
+            </a>
+
+            <!--
+                Place app action links outside the "main" `a` tile to adhere to HTML rule that forbid nesting anchors
+                within anchors. Absolutely position the actions to make them appear inside the tile though. Fill their
+                dedicated space with `.tile-actions-placeholder` element.
+            -->
+            <div class="tile-actions">
+                {% for column, cell in row.items %}
+                    {% if column.verbose_name == "" %}
+                        {{ cell }}
+                    {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+    {% endfor %}
+</section>

nautobot/extras/templates/extras/role_retrieve.html

@@ -207,4 +207,20 @@
         </div>
     {% include 'inc/paginator.html' with paginator=module_table.paginator page=module_table.page %}
     {% endif %}
+    {% if vdc_table %}
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <strong>Virtual Device Contexts</strong>
+            </div>
+            {% include 'inc/table.html' with table=vdc_table %}
+            {% if perms.dcim.add_virtualdevicecontext %}
+                <div class="panel-footer text-right noprint">
+                    <a href="{% url 'dcim:virtualdevicecontext_add' %}?role={{ object.pk }}" class="btn btn-xs btn-primary">
+                        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Virtual Device Context
+                    </a>
+                </div>
+            {% endif %}
+        </div>
+    {% include 'inc/paginator.html' with paginator=vdc_table.paginator page=vdc_table.page %}
+    {% endif %}
  {% endblock content_full_width_page %}

nautobot/extras/templates/extras/secret.html

@@ -1,66 +1 @@
 {% extends 'generic/object_detail.html' %}
-{% load helpers %}
-
-{% block extra_buttons %}
-    <a onClick="checkSecret()" class="btn btn-default">
-        Check Secret
-    </a>
-{% endblock extra_buttons %}
-
-{% block content_left_page %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <strong>Secret</strong>
-        </div>
-        <table class="table table-hover panel-body attr-table">
-            <tr>
-                <td>Description</td>
-                <td>{{ object.description | placeholder }}</td>
-            </tr>
-            <tr>
-                <td>Provider</td>
-                <td>{{ provider_name }}</td>
-            </tr>
-        </table>
-    </div>
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <strong>Parameters</strong>
-        </div>
-        <table class="table table-hover panel-body attr-table">
-            {% for param, value in object.parameters.items %}
-                <tr>
-                    <td><code>{{ param }}</code></td>
-                    <td><code>{{ value }}</code></td>
-                </tr>
-            {% endfor %}
-        </table>
-    </div>
-{% endblock content_left_page %}
-
-{% block content_right_page %}
-    {% include 'utilities/obj_table.html' with table=groups_table table_template='panel_table.html' heading='Groups containing this secret' %}
-{% endblock content_right_page %}
-
-
-{% block javascript %}
-{{ block.super }}
-<script>
-    function checkSecret() {
-        $.ajax({
-            url: "{% url 'extras-api:secret-check' pk=object.pk %}",
-            dataType: 'json',
-            success: function(json) {
-                if(json.result) {
-                    alert("The secret was successfully retrieved.")
-                } else {
-                    alert("Error retrieving secret: \n\n" + json.message)
-                }
-            },
-            error: function(xhr) {
-                alert("Error checking secret: \n\n" + xhr.responseText);
-            }
-        });
-    }
-</script>
-{% endblock javascript %}

nautobot/extras/templates/extras/secret_check.js

@@ -0,0 +1,16 @@
+function checkSecret() {
+    $.ajax({
+        url: "{% url 'extras-api:secret-check' pk=object.pk %}",
+        dataType: 'json',
+        success: function(json) {
+            if(json.result) {
+                alert("The secret was successfully retrieved.")
+            } else {
+                alert("Error retrieving secret: \n\n" + json.message)
+            }
+        },
+        error: function(xhr) {
+            alert("Error checking secret: \n\n" + xhr.responseText);
+        }
+    });
+}

nautobot/extras/templates/extras/secret_create.html

@@ -0,0 +1,114 @@
+{% extends 'generic/object_create.html' %}
+{% load form_helpers %}
+
+{% block form %}
+    <div class="panel panel-default">
+        <div class="panel-heading"><strong>Secret</strong></div>
+        <div class="panel-body">
+            {% render_field form.name %}
+            {% render_field form.description %}
+            {% render_field form.provider %}
+        </div>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel-heading"><strong>Parameters</strong></div>
+        <div class="panel-body">
+            <span class="help-block">
+                All parameter values can be entered as Jinja2 templates if desired.
+                The requesting object (device, Git repository, etc.), if any, will be provided
+                as context variable <code>obj</code>.
+            </span>
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active">
+                    <a href="#parameters_form" role="tab" data-toggle="tab">Form</a>
+                </li>
+                <li role="presentation">
+                    <a href="#parameters_json" role="tab" data-toggle="tab">JSON</a>
+                </li>
+            </ul>
+            <div class="tab-content">
+                <div class="tab-pane active" id="parameters_form">
+                    <!-- to be populated by jquery -->
+                </div>
+                <div class="tab-pane" id="parameters_json">
+                    {% render_field form.parameters %}
+                </div>
+            </div>
+        </div>
+    </div>
+    {% include 'inc/extras_features_edit_form_fields.html' %}
+{% endblock form %}
+
+{% block javascript %}
+{{ block.super }}
+<script type="text/javascript">
+    /* When changing any field in the parameters_form, re-render the JSON in parameters_json */
+    function changeProviderParameter() {
+        var parameters_value = {};
+
+        $("#parameters_form :input").each(function() {
+            var field_key = $(this).attr("id").slice(3);  /* "id_foobar" --> "foobar" */
+            parameters_value[field_key] = $(this).val();
+        });
+
+        $("#id_parameters").val(JSON.stringify(parameters_value, null, 4));
+    };
+
+    /* When changing the parameters_json, update all fields in the parameters_form accordingly */
+    function changeProviderJSON() {
+        var parameters_as_json = $(this).val();
+        var parameters_value;
+        try {
+            parameters_value = JSON.parse(parameters_as_json);
+        } catch (e) {
+            alert("JSON is invalid");
+            return;
+        }
+
+        for (const key of Object.keys(parameters_value)) {
+            $("#parameters_form #id_" + key).val(parameters_value[key]);
+        }
+    };
+
+    /* When changing the selected provider, retrieve and render the provider-specific content to parameters_form */
+    function changeProvider() {
+        var provider_slug = $("#id_provider").val();
+
+        var parameters_as_json = $("#id_parameters").val();
+        var parameters_value;
+        try {
+            parameters_value = JSON.parse(parameters_as_json);
+        } catch (e) {
+            parameters_value = {};
+        }
+
+        $.ajax({
+            url: "{% url 'extras:secret_list' %}" + "provider/" + provider_slug + "/form/",
+            method: "GET",
+            data: parameters_value,
+            context: this,
+            success: function(data) {
+                $("#parameters_form").html(data);
+                /*
+                 * Strip the "name" field from every field in the parameters_form.
+                 * These fields are for user convenience only and should not be included when the form is submitted;
+                 * removing their name causes them to be omitted as desired.
+                 * See also https://github.com/nautobot/nautobot/issues/1335
+                 */
+                $("#parameters_form :input").removeAttr("name");
+
+                $("#parameters_form :input").change(changeProviderParameter);
+            },
+            error: function() {
+                $("#parameters_form").html("No form available for this provider, use JSON instead");
+            },
+        });
+    };
+
+    $(document).ready(function() {
+        $("#id_provider").change(changeProvider);
+        changeProvider();
+        $("#id_parameters").change(changeProviderJSON);
+    });
+</script>
+{% endblock javascript %}