Closes #9416: Dashboard widgets (#11823)

* Replace masonry with gridstack

* Initial work on dashboard widgets

* Implement function to save dashboard layout

* Define a default dashboard

* Clean up widgets

* Implement widget configuration views & forms

* Permit merging dict value with existing dict in user config

* Add widget deletion view

* Enable HTMX for widget configuration

* Implement view to add dashboard widgets

* ObjectCountsWidget: Identify models by app_label & name

* Add color customization to dashboard widgets

* Introduce Dashboard model to store user dashboard layout & config

* Clean up utility functions

* Remove hard-coded API URL

* Use fixed grid cell height

* Add modal close button

* Clean up dashboard views

* Rebuild JS

netbox/templates/extras/dashboard/widget.html

@@ -0,0 +1,37 @@
+{% load dashboard %}
+
+<div
+    class="grid-stack-item"
+    gs-w="{{ widget.width }}"
+    gs-h="{{ widget.height }}"
+    gs-x="{{ widget.x }}"
+    gs-y="{{ widget.y }}"
+    gs-id="{{ widget.id }}"
+>
+  <div class="card grid-stack-item-content">
+    <div class="card-header text-center text-light bg-{% if widget.color %}{{ widget.color }}{% else %}secondary{% endif %} p-1">
+      <div class="float-start ps-1">
+        <a href="#"
+          hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
+          hx-target="#htmx-modal-content"
+          data-bs-toggle="modal"
+          data-bs-target="#htmx-modal"
+        ><i class="mdi mdi-cog text-gray"></i></a>
+      </div>
+      <div class="float-end pe-1">
+        <a href="#"
+          hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
+          hx-target="#htmx-modal-content"
+          data-bs-toggle="modal"
+          data-bs-target="#htmx-modal"
+        ><i class="mdi mdi-close text-gray"></i></a>
+      </div>
+      {% if widget.title %}
+        <strong>{{ widget.title }}</strong>
+      {% endif %}
+    </div>
+    <div class="card-body p-2">
+      {% render_widget widget %}
+    </div>
+  </div>
+</div>

netbox/templates/extras/dashboard/widget_add.html

@@ -0,0 +1,27 @@
+{% load form_helpers %}
+
+<form hx-post="{% url 'extras:dashboardwidget_add' %}" id="widget_add_form">
+  {% csrf_token %}
+  <div class="modal-header">
+    <h5 class="modal-title">Add a Widget</h5>
+  </div>
+  <div class="modal-body">
+    {% block form %}
+      {% render_field widget_form.widget_class %}
+      <div class="row mb-3">
+        <label class="col-sm-3 col-form-label text-lg-end">Description</label>
+        <div class="col">
+          <div class="form-control-plaintext">{{ widget_class.description|placeholder }}</div>
+        </div>
+      </div>
+      {% render_field widget_form.color %}
+      {% render_field widget_form.title %}
+      {% render_form config_form %}
+    {% endblock form %}
+  </div>
+  <div class="modal-footer">
+    {% block buttons %}
+      <button class="btn btn-primary">Save</button>
+    {% endblock buttons %}
+  </div>
+</form>

netbox/templates/extras/dashboard/widget_config.html

@@ -0,0 +1,20 @@
+{% load form_helpers %}
+
+<form hx-post="{{ form_url }}">
+  {% csrf_token %}
+  <div class="modal-header">
+    <h5 class="modal-title">Widget Configuration</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  </div>
+  <div class="modal-body">
+    {% block form %}
+      {% render_form widget_form %}
+      {% render_form config_form %}
+    {% endblock form %}
+  </div>
+  <div class="modal-footer">
+    {% block buttons %}
+      <button class="btn btn-primary">Save</button>
+    {% endblock buttons %}
+  </div>
+</form>

netbox/templates/extras/dashboard/widgets/changelog.html

@@ -0,0 +1,4 @@
+<div class="htmx-container"
+  hx-get="{% url 'extras:objectchange_list' %}?sort=-time"
+  hx-trigger="load"
+></div>

netbox/templates/extras/dashboard/widgets/objectcounts.html

@@ -0,0 +1,14 @@
+{% load helpers %}
+
+{% if counts %}
+  <div class="list-group list-group-flush">
+    {% for model, count in counts %}
+      <a href="{% url model|viewname:"list" %}" class="list-group-item list-group-item-action">
+        <div class="d-flex w-100 justify-content-between align-items-center">
+          {{ model|meta:"verbose_name_plural"|bettertitle }}
+          <h6 class="mb-1">{{ count }}</h6>
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+{% endif %}