Add ability to override default layout in Docker image (#6400)

**User-Facing Changes** The Docker image now supports specifying a default layout via bind mount (`-v /path/to/custom_layout.json:/foxglove/default-layout.json`). **Description** Relates to: #4716, https://github.com/orgs/foxglove/discussions/217 Resolves FG-3318
Lichtblick-Suite · Jul 19, 2023 · 29aae67 · 29aae67
1 parent 8cdf987
commit 29aae67
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 34 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -4,3 +4,4 @@
 .webpack/
 dist/
 node_modules/
+Dockerfile
diff --git a/Dockerfile b/Dockerfile
@@ -14,4 +14,19 @@ WORKDIR /src
 COPY --from=build /src/web/.webpack ./
 
 EXPOSE 8080
+
+COPY <<EOF /entrypoint.sh
+# Optionally override the default layout with one provided via bind mount
+mkdir -p /foxglove
+touch /foxglove/default-layout.json
+index_html=\$(cat index.html)
+replace_pattern='/*FOXGLOVE_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/'
+replace_value=\$(cat /foxglove/default-layout.json)
+echo "\${index_html/"\$replace_pattern"/\$replace_value}" > index.html
+
+# Continue executing the CMD
+exec "\$@"
+EOF
+
+ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]
 CMD ["caddy", "file-server", "--listen", ":8080"]
diff --git a/README.md b/README.md
@@ -77,6 +77,14 @@ docker run --rm -p "8080:8080" ghcr.io/foxglove/studio:latest
 
 Foxglove Studio will be accessible in your browser at [localhost:8080](http://localhost:8080/).
 
+### Overriding the default layout
+
+[Bind-mount](https://docs.docker.com/storage/bind-mounts/) a layout JSON file at `/foxglove/default-layout.json` to set the default layout used when loading Studio from the Docker image.
+
+```sh
+docker run --rm -p "8080:8080" -v /path/to/custom_layout.json:/foxglove/default-layout.json ghcr.io/foxglove/studio:latest
+```
+
 ## Contributing
 
 Foxglove Studio is written in TypeScript – contributions are welcome!

diff --git a/packages/studio-base/src/providers/CurrentLayoutProvider/defaultLayout.ts b/packages/studio-base/src/providers/CurrentLayoutProvider/defaultLayout.ts
@@ -5,45 +5,53 @@
 import { LayoutData } from "@foxglove/studio-base/context/CurrentLayoutContext/actions";
 import { defaultPlaybackConfig } from "@foxglove/studio-base/providers/CurrentLayoutProvider/reducers";
 
+/**
+ * Overridden default layout that may have been provided when self-hosting via Docker
+ * */
+const staticDefaultLayout = (globalThis as { FOXGLOVE_STUDIO_DEFAULT_LAYOUT?: LayoutData })
+  .FOXGLOVE_STUDIO_DEFAULT_LAYOUT;
+
 /**
  * This is loaded when the user has no layout selected on application launch
  * to avoid presenting the user with a blank layout.
  */
-export const defaultLayout: LayoutData = {
-  configById: {
-    "3D!18i6zy7": {
-      layers: {
-        "845139cb-26bc-40b3-8161-8ab60af4baf5": {
-          visible: true,
-          frameLocked: true,
-          label: "Grid",
-          instanceId: "845139cb-26bc-40b3-8161-8ab60af4baf5",
-          layerId: "foxglove.Grid",
-          size: 10,
-          divisions: 10,
-          lineWidth: 1,
-          color: "#248eff",
-          position: [0, 0, 0],
-          rotation: [0, 0, 0],
-          order: 1,
+export const defaultLayout: LayoutData =
+  staticDefaultLayout ??
+  ({
+    configById: {
+      "3D!18i6zy7": {
+        layers: {
+          "845139cb-26bc-40b3-8161-8ab60af4baf5": {
+            visible: true,
+            frameLocked: true,
+            label: "Grid",
+            instanceId: "845139cb-26bc-40b3-8161-8ab60af4baf5",
+            layerId: "foxglove.Grid",
+            size: 10,
+            divisions: 10,
+            lineWidth: 1,
+            color: "#248eff",
+            position: [0, 0, 0],
+            rotation: [0, 0, 0],
+            order: 1,
+          },
         },
       },
+      "RawMessages!os6rgs": {},
+      "Image!3mnp456": {},
     },
-    "RawMessages!os6rgs": {},
-    "Image!3mnp456": {},
-  },
-  globalVariables: {},
-  userNodes: {},
-  playbackConfig: { ...defaultPlaybackConfig },
-  layout: {
-    first: "3D!18i6zy7",
-    second: {
-      first: "Image!3mnp456",
-      second: "RawMessages!os6rgs",
-      direction: "column",
-      splitPercentage: 30,
+    globalVariables: {},
+    userNodes: {},
+    playbackConfig: { ...defaultPlaybackConfig },
+    layout: {
+      first: "3D!18i6zy7",
+      second: {
+        first: "Image!3mnp456",
+        second: "RawMessages!os6rgs",
+        direction: "column",
+        splitPercentage: 30,
+      },
+      direction: "row",
+      splitPercentage: 70,
     },
-    direction: "row",
-    splitPercentage: 70,
-  },
-} as const;
+  } as const);
diff --git a/packages/studio-web/src/webpackConfigs.ts b/packages/studio-web/src/webpackConfigs.ts
@@ -136,6 +136,7 @@ export const mainConfig =
     </head>
     <script>
       global = globalThis;
+      globalThis.FOXGLOVE_STUDIO_DEFAULT_LAYOUT = [/*FOXGLOVE_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/][0];
     </script>
     <body>
       <div id="root"></div>