From a6ba94e03f2101d8ab4a7bb88c95509ce6e47da2 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 12 Dec 2022 09:37:54 -0800
Subject: [PATCH] Adds hostname config for setting UI parameter (#1983)

* Adds hostname config to setting a hostname in title

* Also updates title for hostname
---
 README.md                      | 29 +++++++++++++++--------------
 analytics/types.go             |  1 +
 assets/components/SideMenu.vue | 19 ++++++++++++-------
 assets/composables/title.ts    |  3 ++-
 assets/stores/config.ts        |  2 ++
 index.html                     |  3 ++-
 main.go                        |  3 +++
 web/routes.go                  |  3 +++
 8 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index cceea572..721aeabf 100644
--- a/README.md
+++ b/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 |
-| ---------------- | --------------------- | ------- |
-| `--addr`         | `DOZZLE_ADDR`         | `:8080` |
-| `--base`         | `DOZZLE_BASE`         | `/`     |
-| `--level`        | `DOZZLE_LEVEL`        | `info`  |
-| `--filter`       | `DOZZLE_FILTER`       | `""`    |
-| `--username`     | `DOZZLE_USERNAME`     | `""`    |
-| `--password`     | `DOZZLE_PASSWORD`     | `""`    |
-| `--usernamefile` | `DOZZLE_USERNAME_FILE`| `""`    |
-| `--passwordfile` | `DOZZLE_PASSWORD_FILE`| `""`    |
-| `--no-analytics` | `DOZZLE_NO_ANALYTICS` | false   |
+| Flag             | Env Variable           | Default |
+| ---------------- | ---------------------- | ------- |
+| `--addr`         | `DOZZLE_ADDR`          | `:8080` |
+| `--base`         | `DOZZLE_BASE`          | `/`     |
+| `--hostname`     | `DOZZLE_HOSTNAME`      | `""`    |
+| `--level`        | `DOZZLE_LEVEL`         | `info`  |
+| `--filter`       | `DOZZLE_FILTER`        | `""`    |
+| `--username`     | `DOZZLE_USERNAME`      | `""`    |
+| `--password`     | `DOZZLE_PASSWORD`      | `""`    |
+| `--usernamefile` | `DOZZLE_USERNAME_FILE` | `""`    |
+| `--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
 ```
diff --git a/analytics/types.go b/analytics/types.go
index ca16627c..d3d1f1ff 100644
--- a/analytics/types.go
+++ b/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"`
 }
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index f8fab8a2..449da93e 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -2,11 +2,16 @@
   <aside>
     <div class="columns is-marginless">
       <div class="column is-paddingless">
-        <router-link :to="{ name: 'index' }">
-          <svg class="logo">
-            <use href="#logo"></use>
-          </svg>
-        </router-link>
+        <h1>
+          <router-link :to="{ name: 'index' }">
+            <svg class="logo">
+              <use href="#logo"></use>
+            </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);
diff --git a/assets/composables/title.ts b/assets/composables/title.ts
index 9b81640e..7ca71728 100644
--- a/assets/composables/title.ts
+++ b/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));
 
diff --git a/assets/stores/config.ts b/assets/stores/config.ts
index 5331b185..3a7d5a9f 100644
--- a/assets/stores/config.ts
+++ b/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";
diff --git a/index.html b/index.html
index 0edb0c06..c6819231 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
         "base": "{{ .Base }}",
         "version": "{{ .Version }}",
         "authorizationNeeded": "{{ .AuthorizationNeeded }}",
-        "secured": "{{ .Secured }}"
+        "secured": "{{ .Secured }}",
+        "hostname": "{{ .Hostname }}"
       }
     </script>
     <link
diff --git a/main.go b/main.go
index 5a86f144..9678abd9 100644
--- a/main.go
+++ b/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 {
diff --git a/web/routes.go b/web/routes.go
index aa73d0b8..49570a75 100644
--- a/web/routes.go
+++ b/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 {