Feature: Add customisable icons in topology (#193)

* [up] add config for custom images, better js

* [up] use bundler to bundle js

* [fix] remove domcontentloaded since defer is used

* [fix] formatting with black

* [fix] images drf api

* [up] add support for custom icons on additional roles: power panel, power feed, circuit

* [up] optimize topology generation by using `_id` when trying to access pk of related object

* [fix] kebab case instead of slugification

* [fix] use empty queryset in api views & change coord save logic

netbox_topology_views/static_dev/bundle.js

@@ -1,87 +1,96 @@
-const esbuild = require('esbuild');
-const { sassPlugin } = require('esbuild-sass-plugin');
+const esbuild = require('esbuild')
+const { sassPlugin } = require('esbuild-sass-plugin')
 
 const options = {
     bundle: true,
     minify: true,
     sourcemap: 'external',
     sourcesContent: false,
-    logLevel: 'error',
-};
-
-const ARGS = process.argv.slice(2);
+    logLevel: 'error'
+}
 
+const ARGS = process.argv.slice(2)
+const noCache = ARGS.includes('--no-cache')
 
 async function bundleScripts() {
-  const entryPoints = {
-    'app': 'js/home.js'
-  };
-  try {
-    const result = await esbuild.build({
-      ...options,
-      outdir: '../static/netbox_topology_views/js/',
-      entryPoints,
-      target: 'es2016',
-    });
-    if (result.errors.length === 0) {
-      for (const [targetName, sourceName] of Object.entries(entryPoints)) {
-        const source = sourceName.split('/')[1];
-        console.log(`✅ Bundled source file '${source}' to '${targetName}.js'`);
-      }
+    const entryPoints = {
+        app: 'js/home.js',
+        images: 'js/images.js'
+    }
+
+    try {
+        const result = await esbuild.build({
+            ...options,
+            outdir: '../static/netbox_topology_views/js/',
+            entryPoints,
+            target: 'es2016'
+        })
+        if (result.errors.length !== 0) return
+
+        for (const [targetName, sourceName] of Object.entries(entryPoints)) {
+            const source = sourceName.split('/').pop() // take last element
+            console.log(
+                `✅ Bundled source file '${source}' to '${targetName}.js'`
+            )
+        }
+    } catch (err) {
+        console.error(err)
     }
-  } catch (err) {
-    console.error(err);
-  }
 }
 
 async function bundleStyles() {
     try {
-      const entryPoints = {
-        'vendor': 'css/_external.scss',
-        'app': 'css/app.scss',
-      };
-      const pluginOptions = { outputStyle: 'compressed' };
-      // Allow cache disabling.
-      if (ARGS.includes('--no-cache')) {
-        pluginOptions.cache = false;
-      }
-      let result = await esbuild.build({
-        ...options,
-        outdir: '../static/netbox_topology_views/css/',
-        // Disable sourcemaps for CSS/SCSS files, see #7068
-        sourcemap: false,
-        entryPoints,
-        plugins: [sassPlugin(pluginOptions)],
-        loader: {
-          '.eot': 'file',
-          '.woff': 'file',
-          '.woff2': 'file',
-          '.svg': 'file',
-          '.ttf': 'file',
-        },
-      });
-      if (result.errors.length === 0) {
-        for (const [targetName, sourceName] of Object.entries(entryPoints)) {
-          const source = sourceName.split('/')[1];
-          console.log(`✅ Bundled source file '${source}' to '${targetName}.css'`);
+        const entryPoints = {
+            vendor: 'css/_external.scss',
+            app: 'css/app.scss'
+        }
+        const pluginOptions = { outputStyle: 'compressed' }
+        // Allow cache disabling.
+        if (noCache) {
+            pluginOptions.cache = false
         }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
 
+        const result = await esbuild.build({
+            ...options,
+            outdir: '../static/netbox_topology_views/css/',
+            // Disable sourcemaps for CSS/SCSS files, see #7068
+            sourcemap: false,
+            entryPoints,
+            plugins: [sassPlugin(pluginOptions)],
+            loader: {
+                '.eot': 'file',
+                '.woff': 'file',
+                '.woff2': 'file',
+                '.svg': 'file',
+                '.ttf': 'file'
+            }
+        })
+        if (result.errors.length === 0) {
+            for (const [targetName, sourceName] of Object.entries(
+                entryPoints
+            )) {
+                const source = sourceName.split('/')[1]
+                console.log(
+                    `✅ Bundled source file '${source}' to '${targetName}.css'`
+                )
+            }
+        }
+    } catch (err) {
+        console.error(err)
+    }
+}
 
 async function bundleAll() {
     if (ARGS.includes('--styles')) {
-      // Only run style jobs.
-      return await bundleStyles();
-    } else if (ARGS.includes('--scripts')) {
-      // Only run script jobs.
-      return await bundleScripts();
+        // Only run style jobs.
+        return await bundleStyles()
     }
-    await bundleStyles();
-    await bundleScripts();
+    if (ARGS.includes('--scripts')) {
+        // Only run script jobs.
+        return await bundleScripts()
+    }
+    await bundleStyles()
+    await bundleScripts()
 }
-  
-bundleAll();
+
+bundleAll()