Merge branch 'master' into refactor/form-row-optional-css-classes

.gitignore

@@ -42,3 +42,7 @@ python/nav/web/static/css
 python/nav/web/static/js/node_modules
 python/nav/web/static/js/require_config.dev.js
 python/nav/web/static/js/coverage
+
+# Javascript libraries
+/node_modules
+package-lock.json

Makefile

@@ -1,4 +1,4 @@
-.PHONY: dummy clean distclean testclean docclean doc .FORCE
+.PHONY: dummy clean distclean testclean docclean doc cssclean sassbuild sasswatch .FORCE
 
 dummy:
 	@echo "'make' is no longer used for deployment. See 'doc/intro/install.rst'"
@@ -32,4 +32,17 @@ doc/reference/alerttypes.rst: .FORCE
 	echo "UID=$(shell id -u)" >> .env
 	echo "GID=$(shell id -g)" >> .env
 
+cssclean:
+	-rm -rf python/nav/web/static/css
+
+sassbuild: cssclean
+	@if [ -f package-lock.json ]; then \
+		(npm ci && npm run build:sass); \
+	else \
+		(npm install && npm run build:sass); \
+	fi
+
+sasswatch:
+	-npm run watch:sass
+
 .FORCE:

changelog.d/2849.changed.md

@@ -0,0 +1 @@
+Switched to building CSS from Sass using webpack instead of deprecated `libsass`.

changelog.d/3186.fixed.md

@@ -0,0 +1 @@
+Rooms and locations with periods in their IDs can now be properly retrieved from the corresponding API endpoints

doc/hacking/hacking.rst

@@ -156,6 +156,7 @@ Directory                          Description
                                    processes.
 :file:`python/`                    Python source code.
 :file:`python/nav/etc/`            Example/initial configuration files.
+:file:`python/nav/web/sass/`       SCSS stylesheets.
 :file:`python/nav/web/static/`     Static media such as CSS stylesheets, images and JavaScript to be
                                    served by a webserver.
 :file:`python/nav/web/templates/`  Main/global Django HTML templates. More be located in individual
@@ -283,6 +284,24 @@ developing, something browsers love to do! See `config-urlArgs
 documentation for details. :file:`require_config.dev.js` is listed in the
 repository :file:`.gitignore` file.
 
+CSS
+---
+
+NAV uses Sass for styling. If you want to modify the styling,
+you can do so by editing the SCSS files in the :file:`python/nav/web/static/scss`
+directory. To build the CSS assets, you will need to have Node.js
+and npm installed. Once you have these installed, you can run
+the following command to build the CSS files::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory. If you want to watch for changes in the SCSS files and rebuild the
+CSS assets automatically, you can run the following command instead::
+
+  npm run watch:sass
+
 
 
 Database

doc/hacking/using-docker.rst

@@ -187,9 +187,10 @@ nav
   starts.
 
 sass-watcher
-  This is a process that monitors the :file:`python/nav/web/sass/` subdirectory
-  for changes, and re-runs ``python setup.py build_sass`` (i.e. rebuilding all
-  the SASS-based stylesheets) on changes.
+  This is a process that runs ``npm run watch:sass`` command to monitor and
+  rebuild all the SASS-based stylesheets whenever changes occur
+  in the :file:`python/nav/web/sass/` subdirectory. The command continuously
+  monitors the files and does not exit by itself.
 
 The individual logs of these program are typically found inside the ``nav``
 container in the :file:`/var/log/supervisor/` directory. The NAV process logs

doc/howto/generic-install-from-source.rst

@@ -5,6 +5,8 @@
 This is a generic guide to installing NAV from source code on a \*NIX flavored
 operating system. The specifics of how to install NAV's dependencies, such as
 :xref:`PostgreSQL` or :xref:`Graphite` will be entirely up to you and your choice of OS.
+Note that building NAV from source will also require Node.js and npm to be installed
+in order to manage frontend assets.
 
 
 Dependencies
@@ -21,6 +23,11 @@ To build NAV, you need at least the following:
  * Python >= 3.9.0
  * Sphinx >= 1.0 (for building this documentation)
 
+Additionally to build frontend assets (like CSS and JS), you will need:
+
+ * Node.js >= 14.0
+ * npm >= 6.0
+
 Runtime requirements
 --------------------
 
@@ -73,6 +80,16 @@ default.
 Installing NAV
 ==============
 
+First you need to build the static assets. To do this, you will need to have
+Node.js and npm installed. Once you have these installed, you can run
+the following command to build the CSS assets::
+
+  npm install
+  npm run build:sass
+
+This will build the CSS assets and place them in the :file:`python/nav/web/static/css`
+directory.
+
 To build and install NAV and all its Python dependencies::
 
   pip install -r requirements.txt -c constraints.txt .

doc/intro/install.rst

@@ -7,7 +7,8 @@
 There are two main options for installing NAV: Either from source code, or from
 a pre-packaged version. Some of these options will require manually installing
 and/or configuring 3rd party software that NAV depends on, mainly :xref:`PostgreSQL`
-and :xref:`Graphite`.
+and :xref:`Graphite`. Building NAV from source code will also require Node.js
+and npm to be installed.
 
 
 Installing a pre-packaged version of NAV
@@ -96,4 +97,3 @@ For you, we provide two guides:
    </howto/generic-install-from-source>`.
 2. :doc:`A step-by-step, detailed guide on installing NAV from source on a
    Debian GNU/Linux operating system </howto/manual-install-on-debian>`.
-

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "NAV frontend",
+  "description": "Network Administration Visualized frontend",
+  "version": "5",
+  "private": true,
+  "dependencies": {
+    "css-loader": "^6.10.0",
+    "glob": "^10.3.10",
+    "mini-css-extract-plugin": "^2.8.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-remove-empty-scripts": "^1.0.4"
+  },
+  "scripts": {
+    "watch:sass": "webpack --config webpack.config.js --config-name sass --mode development --watch",
+    "build:sass": "webpack --config webpack.config.js --config-name sass --mode production"
+  }
+}

pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2", "libsass==0.15.1"]
+requires = ["setuptools>=61.0", "wheel", "setuptools_scm[toml]>=6.2"]
 build-backend = "setuptools.build_meta"
 
 [project]
@@ -63,6 +63,9 @@ include-package-data = true
 zip-safe = false
 platforms = ["any"]
 
+[tool.setuptools.package-data]
+"nav.web" = ["static/**"]
+
 [tool.setuptools_scm]
 
 [tool.setuptools.packages.find]

python/nav/web/api/v1/views.py

@@ -330,6 +330,7 @@ class RoomViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
     queryset = manage.Room.objects.all()
     serializer_class = serializers.RoomSerializer
     filterset_fields = ('location', 'description')
+    lookup_value_regex = '[^/]+'
 
 
 class LocationViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
@@ -349,6 +350,7 @@ class LocationViewSet(LoggerMixin, NAVAPIMixin, viewsets.ModelViewSet):
     serializer_class = serializers.LocationSerializer
     filterset_fields = ('id', 'parent')
     search_fields = ('description',)
+    lookup_value_regex = '[^/]+'
 
 
 class UnrecognizedNeighborViewSet(NAVAPIMixin, viewsets.ReadOnlyModelViewSet):

python/nav/web/arnold/forms.py

@@ -25,6 +25,8 @@
 from nav.web.crispyforms import (
     CheckBox,
     FlatFieldset,
+    FormColumn,
+    FormRow,
     SubmitField,
     set_flat_form_attributes,
 )
@@ -84,12 +86,15 @@ def __init__(self, *args, **kwargs):
             submit_value = 'Save changes'
             fieldset_legend = 'Edit vlan'
 
-        # Create helper for crispy layout
-        self.helper = FormHelper()
-        self.helper.form_action = 'arnold-quarantinevlans'
-        self.helper.layout = Layout(
-            Fieldset(fieldset_legend, 'vlan', 'description', 'qid'),
-            Submit('submit', submit_value, css_class='small'),
+        self.attrs = set_flat_form_attributes(
+            form_action='arnold-quarantinevlans',
+            form_fields=[
+                FlatFieldset(
+                    fieldset_legend,
+                    fields=[self['vlan'], self['description'], self['qid']],
+                )
+            ],
+            submit_field=SubmitField(value=submit_value, css_classes='small'),
         )
 
 
@@ -117,19 +122,29 @@ class SearchForm(forms.Form):
 
     def __init__(self, *args, **kwargs):
         super(SearchForm, self).__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.form_class = 'custom'
-        self.helper.layout = Layout(
-            Row(
-                Column('searchtype', css_class='medium-3'),
-                Column('searchvalue', css_class='medium-9'),
-                css_class='collapse',
-            ),
-            Row(
-                Column('status', css_class='medium-6'),
-                Column('days', css_class='medium-6'),
+
+        self.attrs = set_flat_form_attributes(
+            form_class='custom',
+            form_fields=[
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['searchtype']], css_classes='medium-3'),
+                        FormColumn(
+                            fields=[self['searchvalue']], css_classes='medium-9'
+                        ),
+                    ],
+                    css_classes='collapse',
+                ),
+                FormRow(
+                    fields=[
+                        FormColumn(fields=[self['status']], css_classes='medium-6'),
+                        FormColumn(fields=[self['days']], css_classes='medium-6'),
+                    ],
+                ),
+            ],
+            submit_field=SubmitField(
+                name='search', value='Search', css_classes='small'
             ),
-            Submit('search', 'Search', css_class='small'),
         )
 
     def clean_searchvalue(self):

python/nav/web/sass/_fonts.scss

@@ -1,18 +1,20 @@
+@import 'navsettings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }

python/nav/web/sass/_navsettings.scss

@@ -23,8 +23,11 @@ $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (m
 
 
 // Relative image path
-$image-path: '../../images' !global;
-$image-path-partials: '../images' !global;
+// Providing variables for all assets paths in this folder so that there will be no hard coding
+$assets-url: '../static' !global;
+$image-path: '#{$assets-url}/images' !global;
+$image-path-partials: '#{$assets-url}/images' !global;
+$fa-font-path: '#{$assets-url}/fonts';
 
 // Width of a row. To create a limited viewport use em-calc
 // Default from Foundation is $row-width: em-calc(1000) !global;

python/nav/web/sass/nav/_fonts.scss

@@ -1,18 +1,20 @@
+@import 'settings';
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/static/fonts/OS300.woff') format('woff');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url('#{$assets-url}/fonts/OS300.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OS400.woff') format('woff');
+  src: local('Open Sans'), local('OpenSans'), url('#{$assets-url}/fonts/OS400.woff') format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/static/fonts/OS600.woff') format('woff');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('#{$assets-url}/fonts/OS600.woff') format('woff');
 }

python/nav/web/sass/nav/_select2.scss

@@ -2,6 +2,7 @@
 Version: 3.4.5 Timestamp: Mon Nov  4 08:22:42 PST 2013
 */
 @import '../navsettings';
+@import 'settings';
 
 .select2-container {
     margin: 0 0 1rem 0;

python/nav/web/sass/nav/_sensors.scss

@@ -1,5 +1,3 @@
-@import 'navsettings';
-
 /*
  * Styles for everything in the environment tab
  */

python/nav/web/sass/nav/_settings.scss

@@ -0,0 +1,5 @@
+// Assets path variables
+// Giving same name to  variables as in ../navsettings, and making them default in this folder
+$assets-url: '../../static' !default;
+$image-path: '#{$assets-url}/images' !default;
+$image-path-partials: '#{$assets-url}/images' !default;