add frontent changes

Signed-off-by: Aayush Gupta <aayu.gupta.96@gmail.com>

db/knex_migrations/2023-11-28-2022-add-zookeeper-column.js

@@ -0,0 +1,18 @@
+exports.up = function (knex) {
+    // update monitor.push_token to 32 length
+    return knex.schema.alterTable("monitor", function (table) {
+        table.string("zookeeper_host", 255);
+        table
+            .integer("zookeeper_timeout")
+            .unsigned()
+            .notNullable()
+            .defaultTo(5000);
+    });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("monitor", function (table) {
+        table.dropColumn("zookeeper_host");
+        table.dropColumn("zookeeper_timeout");
+    });
+};

src/lang/en.json

@@ -860,5 +860,7 @@
     "tagNotFound": "Tag not found.",
     "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
     "GrafanaOncallUrl": "Grafana Oncall URL",
-    "Browser Screenshot": "Browser Screenshot"
+    "Browser Screenshot": "Browser Screenshot",
+    "Zookeeper Host": "Zookeeper Host",
+    "Zookeeper Timeout": "Zookeeper Timeout"
 }

src/pages/Details.vue

@@ -42,6 +42,7 @@
                 <span v-if="monitor.type === 'redis'">{{ filterPassword(monitor.databaseConnectionString) }}</span>
                 <span v-if="monitor.type === 'sqlserver'">SQL Server: {{ filterPassword(monitor.databaseConnectionString) }}</span>
                 <span v-if="monitor.type === 'steam'">Steam Game Server: {{ monitor.hostname }}:{{ monitor.port }}</span>
+                <span v-if="monitor.type === 'zookeeper'">Host: {{ monitor.zookeeperHost }}</span>
             </p>
 
             <div class="functions">

src/pages/EditMonitor.vue

@@ -85,6 +85,9 @@
                                         <option v-if="!$root.info.isContainer" value="tailscale-ping">
                                             Tailscale Ping
                                         </option>
+                                        <option value="zookeeper">
+                                            Zookeeper
+                                        </option>
                                     </optgroup>
                                 </select>
                             </div>
@@ -499,6 +502,19 @@
                                 </div>
                             </template>
 
+                            <!-- Zookeeper -->
+                            <template v-if="monitor.type === 'zookeeper'">
+                                <div class="my-3">
+                                    <label for="zookeeperHost" class="form-label">{{ $t("Zookeeper Host") }}</label>
+                                    <input id="zookeeperHost" v-model="monitor.zookeeperHost" type="text" class="form-control" required>
+                                </div>
+
+                                <div class="my-3">
+                                    <label for="zookeeperTimeout" class="form-label">{{ $t("Connection Timeout") }}</label>
+                                    <input id="zookeeperTimeout" v-model="monitor.zookeeperTimeout" type="number" class="form-control" required min="1000" max="60000" step="1000">
+                                </div>
+                            </template>
+
                             <!-- Parent Monitor -->
                             <div class="my-3">
                                 <label for="parent" class="form-label">{{ $t("Monitor Group") }}</label>