Adds hostname config for setting UI parameter (#1983)

* Adds hostname config to setting a hostname in title

* Also updates title for hostname

README.md

@@ -58,7 +58,6 @@ Dozzle will be available at [http://localhost:8888/](http://localhost:8888/). Yo
         ports:
           - 9999:8080
 
-
 ### Enabling health check
 
 Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `healthcheck` can be enabled manually.
@@ -81,7 +80,6 @@ Dozzle doesn't enable healthcheck by default as it adds extra CPU usage. `health
           retries: 5
           start_period: 30s
 
-
 #### Security
 
 You can control the device Dozzle binds to by passing `--addr` parameter. For example,
@@ -119,17 +117,18 @@ If you do not want to be tracked at all, see the `--no-analytics` flag below.
 
 Dozzle follows the [12-factor](https://12factor.net/) model. Configurations can use the CLI flags or environment variables. The table below outlines all supported options and their respective env vars.
 
-| Flag             | Env Variable          | Default |
+| Flag             | Env Variable           | Default |
-| ---------------- | --------------------- | ------- |
+| ---------------- | ---------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
+| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
-| `--base`         | `DOZZLE_BASE`         | `/`     |
+| `--base`         | `DOZZLE_BASE`          | `/`     |
-| `--level`        | `DOZZLE_LEVEL`        | `info`  |
+| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
-| `--filter`       | `DOZZLE_FILTER`       | `""`    |
+| `--level`        | `DOZZLE_LEVEL`         | `info`  |
-| `--username`     | `DOZZLE_USERNAME`     | `""`    |
+| `--filter`       | `DOZZLE_FILTER`        | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
+| `--username`     | `DOZZLE_USERNAME`      | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE`| `""`    |
+| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE`| `""`    |
+| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
+| `--passwordfile` | `DOZZLE_PASSWORD_FILE` | `""`    |
+| `--no-analytics` | `DOZZLE_NO_ANALYTICS`  | false   |
 
 ## Troubleshooting and FAQs
 
@@ -184,17 +183,19 @@ Dozzle has a [special route](https://github.com/amir20/dozzle/blob/master/assets
 <details>
  <summary>I installed Dozzle but memory consumption doesn't show up!</summary>
 
-*This is an issue specific to ARM devices*
+_This is an issue specific to ARM devices_
 
 Dozzle uses the Docker API to gather information about the containers' memory usage. If the memory usage is not showing up, then it is likely that the Docker API is not returning the memory usage.
 
 You can verify this by running `docker info`, and you should see the following:
+
 ```
 WARNING: No memory limit support
 WARNING: No swap limit support
 ```
 
 In this case, you'll need to add the following line to your `/boot/cmdline.txt` file and reboot your device.
+
 ```
 cgroup_enable=cpuset cgroup_enable=memory cgroup_memory=1
 ```

analytics/types.go

@@ -7,4 +7,5 @@ type StartEvent struct {
 	CustomAddress bool   `json:"customAddress"`
 	CustomBase    bool   `json:"customBase"`
 	Protected     bool   `json:"protected"`
+	HasHostname   bool   `json:"hasHostname"`
 }

assets/components/SideMenu.vue

@@ -2,11 +2,16 @@
   <aside>
     <div class="columns is-marginless">
       <div class="column is-paddingless">
-        <router-link :to="{ name: 'index' }">
+        <h1>
-          <svg class="logo">
+          <router-link :to="{ name: 'index' }">
-            <use href="#logo"></use>
+            <svg class="logo">
-          </svg>
+              <use href="#logo"></use>
-        </router-link>
+            </svg>
+          </router-link>
+          <small class="subtitle is-6 is-block mb-4" v-if="hostname">
+            {{ hostname }}
+          </small>
+        </h1>
       </div>
     </div>
     <div class="columns is-marginless">
@@ -65,9 +70,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { Container } from "@/types/Container";
+import { Container } from "@/models/Container";
 
-const { base, secured } = config;
+const { base, secured, hostname } = config;
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);

assets/composables/title.ts

@@ -1,5 +1,6 @@
+const { hostname } = config;
 let subtitle = $ref("");
-const title = $computed(() => `${subtitle} - Dozzle`);
+const title = $computed(() => `${subtitle} - Dozzle` + (hostname ? ` @ ${hostname}` : ""));
 
 useTitle($$(title));
 

assets/stores/config.ts

@@ -6,6 +6,7 @@ interface Config {
   authorizationNeeded: boolean | "false" | "true";
   secured: boolean | "false" | "true";
   maxLogs: number;
+  hostname: string;
 }
 
 const pageConfig = JSON.parse(text);
@@ -20,6 +21,7 @@ if (config.version == "{{ .Version }}") {
   config.base = "";
   config.authorizationNeeded = false;
   config.secured = false;
+  config.hostname = "localhost";
 } else {
   config.version = config.version.replace(/^v/, "");
   config.authorizationNeeded = config.authorizationNeeded === "true";

index.html

@@ -9,7 +9,8 @@
         "base": "{{ .Base }}",
         "version": "{{ .Version }}",
         "authorizationNeeded": "{{ .AuthorizationNeeded }}",
-        "secured": "{{ .Secured }}"
+        "secured": "{{ .Secured }}",
+        "hostname": "{{ .Hostname }}"
       }
     </script>
     <link

main.go

@@ -37,6 +37,7 @@ func (s *DockerSecret) UnmarshalText(b []byte) error {
 type args struct {
 	Addr                 string              `arg:"env:DOZZLE_ADDR" default:":8080" help:"sets host:port to bind for server. This is rarely needed inside a docker container."`
 	Base                 string              `arg:"env:DOZZLE_BASE" default:"/" help:"sets the base for http router."`
+	Hostname             string              `arg:"env:DOZZLE_HOSTNAME" help:"sets the hostname for display. This is useful with multiple Dozzle instances."`
 	Level                string              `arg:"env:DOZZLE_LEVEL" default:"info" help:"set Dozzle log level. Use debug for more logging."`
 	Username             string              `arg:"env:DOZZLE_USERNAME" help:"sets the username for auth."`
 	Password             string              `arg:"env:DOZZLE_PASSWORD" help:"sets password for auth"`
@@ -124,6 +125,7 @@ func main() {
 		Version:  version,
 		Username: args.Username,
 		Password: args.Password,
+		Hostname: args.Hostname,
 	}
 
 	assets, err := fs.Sub(content, "dist")
@@ -174,6 +176,7 @@ func doStartEvent(arg args) {
 		CustomAddress: arg.Addr != ":8080",
 		CustomBase:    arg.Base != "/",
 		Protected:     arg.Username != "",
+		HasHostname:   arg.Hostname != "",
 	}
 
 	if err := analytics.SendStartEvent(event); err != nil {

web/routes.go

@@ -21,6 +21,7 @@ type Config struct {
 	Version  string
 	Username string
 	Password string
+	Hostname string
 }
 
 type handler struct {
@@ -110,11 +111,13 @@ func (h *handler) executeTemplate(w http.ResponseWriter, req *http.Request) {
 		Version             string
 		AuthorizationNeeded bool
 		Secured             bool
+		Hostname            string
 	}{
 		path,
 		h.config.Version,
 		h.isAuthorizationNeeded(req),
 		secured,
+		h.config.Hostname,
 	}
 	err = tmpl.Execute(w, data)
 	if err != nil {