Docker: Use relative paths instead of absolute ones to ensure proper namespace handling when working behind a reverse proxy. (#934)

* Docker: Use relative paths instead of absolute ones to ensure proper namespace handling when working behind a reverse proxy.

* Fix: Progress Swap Memory percent

docker/Dockerfile

@@ -130,6 +130,15 @@ SaveConfig = true\n\
 DNS = ${global_dns}" > /configs/wg0.conf.template \
   && chmod 600 /configs/wg0.conf.template
 
+# Replacement of paths with relative ones for namespace handling when using a reverse proxy
+RUN set -ex && \
+  find ${WGDASH}/src/static/dist -type f \( -name "*.html" -o -name "*.js" \) \
+    -exec sed -i 's|/static/dist|./static/dist|g' {} + && \
+  find ${WGDASH}/src/static/dist -type f -name "*.css" \
+    -exec sed -i 's|/static/dist/WGDashboardClient/assets/|./|g' {} + && \
+  find ${WGDASH}/src/static/dist -type f -name "*.css" \
+    -exec sed -i 's|/static/dist/WGDashboardAdmin/assets/|./|g' {} +
+
 # Set a healthcheck to determine the container its health
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
   CMD sh -c 'pgrep gunicorn > /dev/null && pgrep tail > /dev/null' || exit 1

src/static/app/src/components/systemStatusComponents/systemStatusWidget.vue

@@ -114,7 +114,7 @@ const data = computed(() => {
 				</h6>
 			</div>
 			<div class="progress" role="progressbar" style="height: 6px">
-				<div class="progress-bar bg-warning" :style="{width: `$ data?.Memory.SwapMemory.percent}%` }"></div>
+				<div class="progress-bar bg-warning" :style="{width: `${data?.Memory.SwapMemory.percent}%` }"></div>
 			</div>
 		</div>
 	</div>