Add web only amd64 build and push target to Makefile

Fix webonly build definitions
Fix typo in arm64 docker/webonly/Dockerfile -> docker/main/Dockerfile
2025-01-21 13:03:22 -08:00 · 2025-01-21 10:56:29 -08:00 · 2025-01-21 10:51:54 -08:00
6 changed files with 121 additions and 54 deletions
--- a/18
+++ b/18
@@ -2,7 +2,8 @@ default_target: local

 COMMIT_HASH := $(shell git log -1 --pretty=format:"%h"|tail -1)
 VERSION = 0.14.1
-IMAGE_REPO ?= ghcr.io/blakeblackshear/frigate
+#IMAGE_REPO ?= ghcr.io/blakeblackshear/frigate
+IMAGE_REPO ?= gitea.tremendousturtle.tools/chris/frigate
 GITHUB_REF_NAME ?= $(shell git rev-parse --abbrev-ref HEAD)
 CURRENT_UID := $(shell id -u)
 CURRENT_GID := $(shell id -g)
@@ -23,15 +24,30 @@ local: version
 amd64:
 	docker buildx build --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .

+amd64_web:
+	docker buildx build --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 arm64:
 	docker buildx build --platform linux/arm64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .

+arm64_web:
+	docker buildx build --platform linux/arm64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 build: version amd64 arm64
 	docker buildx build --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/main/Dockerfile .

+build_web: version amd64_web arm64_web
+	docker buildx build --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):$(VERSION)-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 push: push-boards
 	docker buildx build --push --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/main/Dockerfile .

+push_web: push-boards
+	docker buildx build --push --platform linux/arm64/v8,linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
+push_web-amd64:
+	docker buildx build --push --platform linux/amd64 --target=frigate --tag $(IMAGE_REPO):${GITHUB_REF_NAME}-$(COMMIT_HASH) --file docker/webonly/Dockerfile .
+
 run: local
 	docker run --rm --publish=5000:5000 --volume=${PWD}/config:/config frigate:latest

--- a/docker/webonly/Dockerfile
+++ b/docker/webonly/Dockerfile
@@ -0,0 +1,19 @@
+# syntax=docker/dockerfile:1.6
+
+# Frigate web build
+# This should be architecture agnostic, so speed up the build on multiarch by not using QEMU.
+FROM --platform=$BUILDPLATFORM node:20 AS web-build
+
+WORKDIR /work
+COPY web/package.json web/package-lock.json ./
+RUN npm install
+
+COPY web/ ./
+RUN npm run build \
+    && mv dist/BASE_PATH/monacoeditorwork/* dist/assets/ \
+    && rm -rf dist/BASE_PATH
+
+FROM --platform=$BUILDPLATFORM ghcr.io/blakeblackshear/frigate:stable AS frigate
+WORKDIR /opt/frigate/
+RUN rm -rf web/ && mkdir web
+COPY --from=web-build /work/dist/ web/
--- a/web/.node-version
+++ b/web/.node-version
@@ -0,0 +1 @@
+20
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -10,6 +10,8 @@ import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
+import { ADMIN_USERS } from "@/types/user";
+import useSWR from "swr";

 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -22,6 +24,7 @@ const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
 const Logs = lazy(() => import("@/pages/Logs"));

 function App() {
+  const { data: profile } = useSWR("profile");
  return (
    <Providers>
      <BrowserRouter basename={window.baseUrl}>
@@ -47,9 +50,13 @@ function App() {
                  <Route path="/export" element={<Exports />} />
                  <Route path="/plus" element={<SubmitPlus />} />
                  <Route path="/system" element={<System />} />
-                  <Route path="/settings" element={<Settings />} />
-                  <Route path="/config" element={<ConfigEditor />} />
-                  <Route path="/logs" element={<Logs />} />
+                  {ADMIN_USERS.includes(profile?.username) && (
+                    <>
+                      <Route path="/settings" element={<Settings />} />
+                      <Route path="/config" element={<ConfigEditor />} />
+                      <Route path="/logs" element={<Logs />} />
+                    </>
+                  )}
                  <Route path="/playground" element={<UIPlayground />} />
                  <Route path="*" element={<Redirect to="/" />} />
                </Routes>
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -68,6 +68,8 @@ import {
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import { baseUrl } from "@/api/baseUrl";
+import useSWR from "swr";
+import { ADMIN_USERS } from "@/types/user";

 type GeneralSettingsProps = {
  className?: string;
@@ -80,6 +82,8 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {

  const { send: sendRestart } = useRestart();

+  const { data: profile } = useSWR("profile");
+
  useEffect(() => {
    let countdownInterval: NodeJS.Timeout;

@@ -169,48 +173,58 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                  <span>System metrics</span>
                </MenuItem>
              </Link>
-              <Link to="/logs">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuList className="mr-2 size-4" />
-                  <span>System logs</span>
-                </MenuItem>
-              </Link>
+              {ADMIN_USERS.includes(profile?.username) && (
+                <Link to="/logs">
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex w-full items-center p-2 text-sm"
+                    }
+                  >
+                    <LuList className="mr-2 size-4" />
+                    <span>System logs</span>
+                  </MenuItem>
+                </Link>
+              )}
            </DropdownMenuGroup>
-            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
-              Configuration
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
+            {ADMIN_USERS.includes(profile?.username) && (
+              <>
+                <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
+                  Configuration
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+              </>
+            )}
            <DropdownMenuGroup>
-              <Link to="/settings">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuSettings className="mr-2 size-4" />
-                  <span>Settings</span>
-                </MenuItem>
-              </Link>
-              <Link to="/config">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                >
-                  <LuPenSquare className="mr-2 size-4" />
-                  <span>Configuration editor</span>
-                </MenuItem>
-              </Link>
+              {ADMIN_USERS.includes(profile?.username) && (
+                <>
+                  <Link to="/settings">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                    >
+                      <LuSettings className="mr-2 size-4" />
+                      <span>Settings</span>
+                    </MenuItem>
+                  </Link>
+                  <Link to="/config">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                    >
+                      <LuPenSquare className="mr-2 size-4" />
+                      <span>Configuration editor</span>
+                    </MenuItem>
+                  </Link>
+                </>
+              )}
              <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
                Appearance
              </DropdownMenuLabel>
@@ -358,16 +372,24 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                <span>GitHub</span>
              </MenuItem>
            </a>
-            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
-            <MenuItem
-              className={
-                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-              }
-              onClick={() => setRestartDialogOpen(true)}
-            >
-              <LuRotateCw className="mr-2 size-4" />
-              <span>Restart Frigate</span>
-            </MenuItem>
+            {ADMIN_USERS.includes(profile?.username) && (
+              <>
+                <DropdownMenuSeparator
+                  className={isDesktop ? "mt-3" : "mt-1"}
+                />
+                <MenuItem
+                  className={
+                    isDesktop
+                      ? "cursor-pointer"
+                      : "flex items-center p-2 text-sm"
+                  }
+                  onClick={() => setRestartDialogOpen(true)}
+                >
+                  <LuRotateCw className="mr-2 size-4" />
+                  <span>Restart Frigate</span>
+                </MenuItem>
+              </>
+            )}
          </div>
        </Content>
      </Container>
--- a/web/src/types/user.ts
+++ b/web/src/types/user.ts
@@ -1,3 +1,5 @@
 export type User = {
  username: string;
 };
+
+export const ADMIN_USERS: string[] = ["admin", "cking91977", "akadmin"];