diff --git a/docker-compose.yml b/docker-compose.yml index ce83ef9..474549f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,21 +1,24 @@ -version: '3.8' +version: '3.9' services: - app: - build: . - container_name: infra-map - ports: - - '3000:3000' # svelte-kit preview HTTP varnish: - build: varnish - container_name: varnish-cache + build: + context: varnish + dockerfile: Dockerfile + args: + HASS_HOST: 10.0.0.82 + FRONTEND_HOST: app ports: - - '6081:6081' # Varnish HTTP + - '6081:6081' + depends_on: + - app + + app: + build: + context: . + dockerfile: Dockerfile + env_file: '.env' environment: - - VARNISH_LISTEN_PORT=6081 - command: > - varnishd - -F - -f /etc/varnish/default.vcl - -s malloc,256m - -a :6081 + - NODE_ENV=production + - PORT=3000 + - ORIGIN=http://localhost:3000 diff --git a/src/lib/components/LiveImage.svelte b/src/lib/components/LiveImage.svelte index 760e731..94990f4 100644 --- a/src/lib/components/LiveImage.svelte +++ b/src/lib/components/LiveImage.svelte @@ -3,8 +3,7 @@ import { grey400x225 } from '$lib/utils/staticImageSource'; import Dialog from './Dialog.svelte'; - const IMAGE_PROXY_URL = 'http://localhost:6081'; - const IMAGE_REFRESH_INTERVAL = 300; + const IMAGE_REFRESH_INTERVAL = 3000; let { imageUrl }: { imageUrl: string } = $props(); let lastUpdated = new Date(); @@ -17,10 +16,15 @@ function loadBlob(blob: Blob) { const reader = new FileReader(); reader.onloadend = () => { - imageSource = reader.result || ''; const img = document.getElementById('live-image') as HTMLImageElement; if (!img) return; + imageSource = reader?.result || ''; + if (imageSource === '') { + console.log("no image data, returning") + return + } + // set imageSource to image element img.src = `data:image/jpeg;base64; ${imageSource}`; lastUpdated = new Date(); @@ -80,6 +84,7 @@ {:else} (fullscreen = false)}> + Last update {timestamp}s ago diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c685ac6..2942203 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -25,8 +25,6 @@ if (counter + 1 >= colors.length) counter = 1; else counter += 1; - console.log(counter); - return { bgColor: colors[counter - 1][0], color: colors[counter - 1][1], @@ -99,7 +97,6 @@ font-size: 1.1rem; line-height: 1.4; line-height: 1.7; - max-width: 80%; color: #333; background-color: #fafafa; /* Subtle background to separate it from the rest */ diff --git a/src/routes/cluster/[resource]/[uid]/+page.server.ts b/src/routes/cluster/[resource]/[uid]/+page.server.ts index ee2a445..fa56ff2 100644 --- a/src/routes/cluster/[resource]/[uid]/+page.server.ts +++ b/src/routes/cluster/[resource]/[uid]/+page.server.ts @@ -13,7 +13,6 @@ const AVAILABLE_RESOURCES = [ export const load: PageServerLoad = async ({ params }) => { const { resource, uid } = params; - console.log('PARAMS:', params); if (!AVAILABLE_RESOURCES.includes(resource)) { return { diff --git a/src/routes/cluster/[resource]/[uid]/logs/+server.ts b/src/routes/cluster/[resource]/[uid]/logs/+server.ts index 6090cbc..d8b85f9 100644 --- a/src/routes/cluster/[resource]/[uid]/logs/+server.ts +++ b/src/routes/cluster/[resource]/[uid]/logs/+server.ts @@ -3,13 +3,11 @@ import { produce } from 'sveltekit-sse'; export function GET({ request }) { return produce(async function start({ emit }) { - console.log('----- REQUEST -----'); const url = new URL(request.url); const pod = url.searchParams.get('pod'); const namespace = url.searchParams.get('namespace'); const container = url.searchParams.get('container'); - console.log('pod, namespace:', pod, namespace); const k8sLogs = createLogStream(pod, namespace, container); k8sLogs.start(); const unsubscribe = k8sLogs.logEmitter.subscribe((msg: string) => { diff --git a/src/routes/image/[...catchall]/+server.ts b/src/routes/image-proxy/[...catchall]/+server.ts similarity index 97% rename from src/routes/image/[...catchall]/+server.ts rename to src/routes/image-proxy/[...catchall]/+server.ts index 9b2a504..0570b88 100644 --- a/src/routes/image/[...catchall]/+server.ts +++ b/src/routes/image-proxy/[...catchall]/+server.ts @@ -23,7 +23,6 @@ async function fetchImage(src: string) { } export const GET: RequestHandler = async ({ url }) => { - console.log('GET'); url.pathname = url.pathname.replace('/image/', ''); const res = await fetchImage(url.href); diff --git a/varnish/Dockerfile b/varnish/Dockerfile index af867b3..53f4534 100644 --- a/varnish/Dockerfile +++ b/varnish/Dockerfile @@ -21,7 +21,19 @@ RUN git clone https://github.com/varnish/libvmod-digest.git /opt/libvmod-digest ./configure VARNISHSRC=/usr/include/varnish && \ make && make install -COPY . /etc/varnish/ +COPY --from=hairyhenderson/gomplate:stable /gomplate /bin/gomplate + +ARG HASS_HOST +ARG FRONTEND_HOST +ENV HASS_HOST=$HASS_HOST +ENV FRONTEND_HOST=$FRONTEND_HOST + +COPY default.vcl.tmpl /etc/varnish/ +COPY *.vcl /etc/varnish/ +COPY includes /etc/varnish/includes + +RUN gomplate -f /etc/varnish/default.vcl.tmpl -o /etc/varnish/default.vcl +RUN rm /etc/varnish/default.vcl.tmpl EXPOSE 6081 diff --git a/varnish/default.vcl b/varnish/default.vcl.tmpl similarity index 96% rename from varnish/default.vcl rename to varnish/default.vcl.tmpl index d69ff98..5631ee5 100644 --- a/varnish/default.vcl +++ b/varnish/default.vcl.tmpl @@ -3,20 +3,18 @@ vcl 4.0; import std; import digest; -# include "handlers/ttl-override-handler.vcl"; include "includes/x-cache-header.vcl"; - include "vcl_deliver.vcl"; # Define backend pointing to Home Assistant IP backend hass_backend { - .host = "10.0.0.82"; + .host = "{{ getenv `HASS_HOST` `homeassistant.local` }}"; .port = "8123"; } backend app_frontend { - .host = "host.docker.internal"; - .port = "5173"; + .host = "{{ getenv `FRONTEND_HOST` `localhost` }}"; + .port = "3000"; } sub vcl_recv {