summaryrefslogtreecommitdiffstats
path: root/src/pages/EditMonitor.vue
diff options
context:
space:
mode:
authorDaniel Baumann <daniel@debian.org>2024-11-26 09:28:28 +0100
committerDaniel Baumann <daniel@debian.org>2024-11-26 12:25:58 +0100
commita1882b67c41fe9901a0cd8059b5cc78a5beadec0 (patch)
tree2a24507c67aa99a15416707b2f7e645142230ed8 /src/pages/EditMonitor.vue
parentInitial commit. (diff)
downloaduptime-kuma-upstream.tar.xz
uptime-kuma-upstream.zip
Adding upstream version 2.0.0~beta.0+dfsg.upstream/2.0.0_beta.0+dfsgupstream
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'src/pages/EditMonitor.vue')
-rw-r--r--src/pages/EditMonitor.vue1858
1 files changed, 1858 insertions, 0 deletions
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
new file mode 100644
index 0000000..4763f87
--- /dev/null
+++ b/src/pages/EditMonitor.vue
@@ -0,0 +1,1858 @@
+<template>
+ <transition name="slide-fade" appear>
+ <div>
+ <h1 class="mb-3">{{ pageName }}</h1>
+ <form @submit.prevent="submit">
+ <div class="shadow-box shadow-box-with-fixed-bottom-bar">
+ <div class="row">
+ <div class="col-md-6">
+ <h2 class="mb-2">{{ $t("General") }}</h2>
+
+ <div class="my-3">
+ <label for="type" class="form-label">{{ $t("Monitor Type") }}</label>
+ <select id="type" v-model="monitor.type" class="form-select" data-testid="monitor-type-select">
+ <optgroup :label="$t('General Monitor Type')">
+ <option value="group">
+ {{ $t("Group") }}
+ </option>
+ <option value="http">
+ HTTP(s)
+ </option>
+ <option value="port">
+ TCP Port
+ </option>
+ <option value="ping">
+ Ping
+ </option>
+ <option value="snmp">
+ SNMP
+ </option>
+ <option value="keyword">
+ HTTP(s) - {{ $t("Keyword") }}
+ </option>
+ <option value="json-query">
+ HTTP(s) - {{ $t("Json Query") }}
+ </option>
+ <option value="grpc-keyword">
+ gRPC(s) - {{ $t("Keyword") }}
+ </option>
+ <option value="dns">
+ DNS
+ </option>
+ <option value="docker">
+ {{ $t("Docker Container") }}
+ </option>
+
+ <option value="real-browser">
+ HTTP(s) - Browser Engine (Chrome/Chromium) (Beta)
+ </option>
+ </optgroup>
+
+ <optgroup :label="$t('Passive Monitor Type')">
+ <option value="push">
+ Push
+ </option>
+ </optgroup>
+
+ <optgroup :label="$t('Specific Monitor Type')">
+ <option value="steam">
+ {{ $t("Steam Game Server") }}
+ </option>
+ <option value="gamedig">
+ GameDig
+ </option>
+ <option value="mqtt">
+ MQTT
+ </option>
+ <option value="rabbitmq">
+ RabbitMQ
+ </option>
+ <option value="kafka-producer">
+ Kafka Producer
+ </option>
+ <option value="sqlserver">
+ Microsoft SQL Server
+ </option>
+ <option value="postgres">
+ PostgreSQL
+ </option>
+ <option value="mysql">
+ MySQL/MariaDB
+ </option>
+ <option value="mongodb">
+ MongoDB
+ </option>
+ <option value="radius">
+ Radius
+ </option>
+ <option value="redis">
+ Redis
+ </option>
+ <option v-if="!$root.info.isContainer" value="tailscale-ping">
+ Tailscale Ping
+ </option>
+ </optgroup>
+ </select>
+ <i18n-t v-if="monitor.type === 'rabbitmq'" keypath="rabbitmqHelpText" tag="div" class="form-text">
+ <template #rabitmq_documentation>
+ <a href="https://www.rabbitmq.com/management" target="_blank" rel="noopener noreferrer">
+ RabbitMQ documentation
+ </a>
+ </template>
+ </i18n-t>
+ </div>
+
+ <div v-if="monitor.type === 'tailscale-ping'" class="alert alert-warning" role="alert">
+ {{ $t("tailscalePingWarning") }}
+ </div>
+
+ <!-- Friendly Name -->
+ <div class="my-3">
+ <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
+ <input id="name" v-model="monitor.name" type="text" class="form-control" required data-testid="friendly-name-input">
+ </div>
+
+ <!-- URL -->
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'real-browser' " class="my-3">
+ <label for="url" class="form-label">{{ $t("URL") }}</label>
+ <input id="url" v-model="monitor.url" type="url" class="form-control" pattern="https?://.+" required data-testid="url-input">
+ </div>
+
+ <!-- gRPC URL -->
+ <div v-if="monitor.type === 'grpc-keyword' " class="my-3">
+ <label for="grpc-url" class="form-label">{{ $t("URL") }}</label>
+ <input id="grpc-url" v-model="monitor.grpcUrl" type="text" class="form-control" required>
+ </div>
+
+ <!-- Push URL -->
+ <div v-if="monitor.type === 'push' " class="my-3">
+ <label for="push-url" class="form-label">{{ $t("PushUrl") }}</label>
+ <CopyableInput id="push-url" v-model="pushURL" type="url" disabled="disabled" />
+ <div class="form-text">
+ {{ $t("needPushEvery", [monitor.interval]) }}<br />
+ {{ $t("pushOptionalParams", ["status, msg, ping"]) }}
+ </div>
+ <button class="btn btn-primary" type="button" @click="resetToken">
+ {{ $t("Reset Token") }}
+ </button>
+ </div>
+
+ <!-- Keyword -->
+ <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3">
+ <label for="keyword" class="form-label">{{ $t("Keyword") }}</label>
+ <input id="keyword" v-model="monitor.keyword" type="text" class="form-control" required>
+ <div class="form-text">
+ {{ $t("keywordDescription") }}
+ </div>
+ </div>
+
+ <!-- Invert keyword -->
+ <div v-if="monitor.type === 'keyword' || monitor.type === 'grpc-keyword'" class="my-3 form-check">
+ <input id="invert-keyword" v-model="monitor.invertKeyword" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="invert-keyword">
+ {{ $t("Invert Keyword") }}
+ </label>
+ <div class="form-text">
+ {{ $t("invertKeywordDescription") }}
+ </div>
+ </div>
+
+ <!-- Remote Browser -->
+ <div v-if="monitor.type === 'real-browser'" class="my-3">
+ <!-- Toggle -->
+ <div class="my-3 form-check">
+ <input id="toggle" v-model="remoteBrowsersToggle" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="toggle">
+ {{ $t("useRemoteBrowser") }}
+ </label>
+ <div class="form-text">
+ {{ $t("remoteBrowserToggle") }}
+ </div>
+ </div>
+
+ <div v-if="remoteBrowsersToggle">
+ <label for="remote-browser" class="form-label">{{ $t("Remote Browser") }}</label>
+ <ActionSelect
+ v-model="monitor.remote_browser"
+ :options="remoteBrowsersOptions"
+ icon="plus"
+ :action="() => $refs.remoteBrowserDialog.show()"
+ />
+ </div>
+ </div>
+
+ <!-- Game -->
+ <!-- GameDig only -->
+ <div v-if="monitor.type === 'gamedig'" class="my-3">
+ <label for="game" class="form-label"> {{ $t("Game") }} </label>
+ <select id="game" v-model="monitor.game" class="form-select" required>
+ <option v-for="game in gameList" :key="game.keys[0]" :value="game.keys[0]">
+ {{ game.pretty }}
+ </option>
+ </select>
+ </div>
+
+ <template v-if="monitor.type === 'kafka-producer'">
+ <!-- Kafka Brokers List -->
+ <div class="my-3">
+ <label for="kafkaProducerBrokers" class="form-label">{{ $t("Kafka Brokers") }}</label>
+ <VueMultiselect
+ id="kafkaProducerBrokers"
+ v-model="monitor.kafkaProducerBrokers"
+ :multiple="true"
+ :options="[]"
+ :placeholder="$t('Enter the list of brokers')"
+ :tag-placeholder="$t('Press Enter to add broker')"
+ :max-height="500"
+ :taggable="true"
+ :show-no-options="false"
+ :close-on-select="false"
+ :clear-on-select="false"
+ :preserve-search="false"
+ :preselect-first="false"
+ @tag="addKafkaProducerBroker"
+ ></VueMultiselect>
+ </div>
+
+ <!-- Kafka Topic Name -->
+ <div class="my-3">
+ <label for="kafkaProducerTopic" class="form-label">{{ $t("Kafka Topic Name") }}</label>
+ <input id="kafkaProducerTopic" v-model="monitor.kafkaProducerTopic" type="text" class="form-control" required>
+ </div>
+
+ <!-- Kafka Producer Message -->
+ <div class="my-3">
+ <label for="kafkaProducerMessage" class="form-label">{{ $t("Kafka Producer Message") }}</label>
+ <input id="kafkaProducerMessage" v-model="monitor.kafkaProducerMessage" type="text" class="form-control" required>
+ </div>
+
+ <!-- Kafka SSL -->
+ <div class="my-3 form-check">
+ <input id="kafkaProducerSsl" v-model="monitor.kafkaProducerSsl" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="kafkaProducerSsl">
+ {{ $t("Enable Kafka SSL") }}
+ </label>
+ </div>
+
+ <!-- Kafka SSL -->
+ <div class="my-3 form-check">
+ <input id="kafkaProducerAllowAutoTopicCreation" v-model="monitor.kafkaProducerAllowAutoTopicCreation" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="kafkaProducerAllowAutoTopicCreation">
+ {{ $t("Enable Kafka Producer Auto Topic Creation") }}
+ </label>
+ </div>
+ </template>
+
+ <template v-if="monitor.type === 'rabbitmq'">
+ <!-- RabbitMQ Nodes List -->
+ <div class="my-3">
+ <label for="rabbitmqNodes" class="form-label">{{ $t("RabbitMQ Nodes") }}</label>
+ <VueMultiselect
+ id="rabbitmqNodes"
+ v-model="monitor.rabbitmqNodes"
+ :required="true"
+ :multiple="true"
+ :options="[]"
+ :placeholder="$t('Enter the list of nodes')"
+ :tag-placeholder="$t('Press Enter to add node')"
+ :max-height="500"
+ :taggable="true"
+ :show-no-options="false"
+ :close-on-select="false"
+ :clear-on-select="false"
+ :preserve-search="false"
+ :preselect-first="false"
+ @tag="addRabbitmqNode"
+ ></VueMultiselect>
+ <div class="form-text">
+ {{ $t("rabbitmqNodesDescription", ["https://node1.rabbitmq.com:15672"]) }}
+ </div>
+ </div>
+
+ <div class="my-3">
+ <label for="rabbitmqUsername" class="form-label">RabbitMQ {{ $t("RabbitMQ Username") }}</label>
+ <input id="rabbitmqUsername" v-model="monitor.rabbitmqUsername" type="text" required class="form-control">
+ </div>
+
+ <div class="my-3">
+ <label for="rabbitmqPassword" class="form-label">{{ $t("RabbitMQ Password") }}</label>
+ <HiddenInput id="rabbitmqPassword" v-model="monitor.rabbitmqPassword" autocomplete="false" required="true"></HiddenInput>
+ </div>
+ </template>
+
+ <!-- Hostname -->
+ <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius / Tailscale Ping / SNMP only -->
+ <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'tailscale-ping' || monitor.type === 'snmp'" class="my-3">
+ <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
+ <input
+ id="hostname"
+ v-model="monitor.hostname"
+ type="text"
+ class="form-control"
+ :pattern="`${monitor.type === 'mqtt' ? mqttIpOrHostnameRegexPattern : ipOrHostnameRegexPattern}`"
+ required
+ data-testid="hostname-input"
+ >
+ </div>
+
+ <!-- Port -->
+ <!-- For TCP Port / Steam / MQTT / Radius Type / SNMP -->
+ <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'snmp'" class="my-3">
+ <label for="port" class="form-label">{{ $t("Port") }}</label>
+ <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+ </div>
+
+ <!-- SNMP Monitor Type -->
+ <div v-if="monitor.type === 'snmp'" class="my-3">
+ <label for="snmp_community_string" class="form-label">{{ $t("Community String") }}</label>
+ <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
+ <HiddenInput id="snmp_community_string" v-model="monitor.radiusPassword" autocomplete="false" required="true" placeholder="public"></HiddenInput>
+
+ <div class="form-text">{{ $t('snmpCommunityStringHelptext') }}</div>
+ </div>
+
+ <div v-if="monitor.type === 'snmp'" class="my-3">
+ <label for="snmp_oid" class="form-label">{{ $t("OID (Object Identifier)") }}</label>
+ <input id="snmp_oid" v-model="monitor.snmpOid" :title="$t('Please enter a valid OID.') + ' ' + $t('Example:', ['1.3.6.1.4.1.9.6.1.101'])" type="text" class="form-control" pattern="^([0-2])((\.0)|(\.[1-9][0-9]*))*$" placeholder="1.3.6.1.4.1.9.6.1.101" required>
+ <div class="form-text">{{ $t('snmpOIDHelptext') }} </div>
+ </div>
+
+ <div v-if="monitor.type === 'snmp'" class="my-3">
+ <label for="snmp_version" class="form-label">{{ $t("SNMP Version") }}</label>
+ <select id="snmp_version" v-model="monitor.snmpVersion" class="form-select">
+ <option value="1">
+ SNMPv1
+ </option>
+ <option value="2c">
+ SNMPv2c
+ </option>
+ </select>
+ </div>
+
+ <!-- Json Query -->
+ <!-- For Json Query / SNMP -->
+ <div v-if="monitor.type === 'json-query' || monitor.type === 'snmp'" class="my-3">
+ <div class="my-2">
+ <label for="jsonPath" class="form-label mb-0">{{ $t("Json Query Expression") }}</label>
+ <i18n-t tag="div" class="form-text mb-2" keypath="jsonQueryDescription">
+ <a href="https://jsonata.org/">jsonata.org</a>
+ <a href="https://try.jsonata.org/">{{ $t('playground') }}</a>
+ </i18n-t>
+ <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" placeholder="$" required>
+ </div>
+
+ <div class="d-flex align-items-start">
+ <div class="me-2">
+ <label for="json_path_operator" class="form-label">{{ $t("Condition") }}</label>
+ <select id="json_path_operator" v-model="monitor.jsonPathOperator" class="form-select me-3" required>
+ <option value=">">&gt;</option>
+ <option value=">=">&gt;=</option>
+ <option value="<">&lt;</option>
+ <option value="<=">&lt;=</option>
+ <option value="!=">&#33;=</option>
+ <option value="==">==</option>
+ <option value="contains">contains</option>
+ </select>
+ </div>
+ <div class="flex-grow-1">
+ <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
+ <input v-if="monitor.jsonPathOperator !== 'contains' && monitor.jsonPathOperator !== '==' && monitor.jsonPathOperator !== '!='" id="expectedValue" v-model="monitor.expectedValue" type="number" class="form-control" required step=".01">
+ <input v-else id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control" required>
+ </div>
+ </div>
+ </div>
+
+ <!-- DNS Resolver Server -->
+ <!-- For DNS Type -->
+ <template v-if="monitor.type === 'dns'">
+ <div class="my-3">
+ <label for="dns_resolve_server" class="form-label">{{ $t("Resolver Server") }}</label>
+ <input id="dns_resolve_server" v-model="monitor.dns_resolve_server" type="text" class="form-control" :pattern="ipRegex" required>
+ <div class="form-text">
+ {{ $t("resolverserverDescription") }}
+ </div>
+ </div>
+
+ <!-- Port -->
+ <div class="my-3">
+ <label for="port" class="form-label">{{ $t("Port") }}</label>
+ <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+ <div class="form-text">
+ {{ $t("dnsPortDescription") }}
+ </div>
+ </div>
+
+ <div class="my-3">
+ <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
+
+ <!-- :allow-empty="false" is not working, set a default value instead https://github.com/shentao/vue-multiselect/issues/336 -->
+ <VueMultiselect
+ id="dns_resolve_type"
+ v-model="monitor.dns_resolve_type"
+ :options="dnsresolvetypeOptions"
+ :multiple="false"
+ :close-on-select="true"
+ :clear-on-select="false"
+ :preserve-search="false"
+ :placeholder="$t('Pick a RR-Type...')"
+ :preselect-first="false"
+ :max-height="500"
+ :taggable="false"
+ data-testid="resolve-type-select"
+ ></VueMultiselect>
+
+ <div class="form-text">
+ {{ $t("rrtypeDescription") }}
+ </div>
+ </div>
+ </template>
+
+ <!-- Docker Container Name / ID -->
+ <!-- For Docker Type -->
+ <div v-if="monitor.type === 'docker'" class="my-3">
+ <label for="docker_container" class="form-label">{{ $t("Container Name / ID") }}</label>
+ <input id="docker_container" v-model="monitor.docker_container" type="text" class="form-control" required>
+ </div>
+
+ <!-- Docker Host -->
+ <!-- For Docker Type -->
+ <div v-if="monitor.type === 'docker'" class="my-3">
+ <div class="mb-3">
+ <label for="docker-host" class="form-label">{{ $t("Docker Host") }}</label>
+ <ActionSelect
+ id="docker-host"
+ v-model="monitor.docker_host"
+ :action-aria-label="$t('openModalTo', $t('Setup Docker Host'))"
+ :options="dockerHostOptionsList"
+ :disabled="$root.dockerHostList == null || $root.dockerHostList.length === 0"
+ :icon="'plus'"
+ :action="() => $refs.dockerHostDialog.show()"
+ :required="true"
+ />
+ </div>
+ </div>
+
+ <!-- MQTT -->
+ <!-- For MQTT Type -->
+ <template v-if="monitor.type === 'mqtt'">
+ <div class="my-3">
+ <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
+ <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
+ </div>
+
+ <div class="my-3">
+ <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
+ <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
+ </div>
+
+ <div class="my-3">
+ <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
+ <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
+ <div class="form-text">
+ {{ $t("topicExplanation") }}
+ </div>
+ </div>
+
+ <div class="my-3">
+ <label for="mqttCheckType" class="form-label">MQTT {{ $t("Check Type") }}</label>
+ <select id="mqttCheckType" v-model="monitor.mqttCheckType" class="form-select" required>
+ <option value="keyword">{{ $t("Keyword") }}</option>
+ <option value="json-query">{{ $t("Json Query") }}</option>
+ </select>
+ </div>
+
+ <div v-if="monitor.mqttCheckType === 'keyword'" class="my-3">
+ <label for="mqttSuccessKeyword" class="form-label">MQTT {{ $t("successKeyword") }}</label>
+ <input id="mqttSuccessKeyword" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
+ <div class="form-text">
+ {{ $t("successKeywordExplanation") }}
+ </div>
+ </div>
+
+ <!-- Json Query -->
+ <div v-if="monitor.mqttCheckType === 'json-query'" class="my-3">
+ <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
+ <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>
+
+ <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
+ <a href="https://jsonata.org/">jsonata.org</a>
+ <a href="https://try.jsonata.org/">{{ $t('here') }}</a>
+ </i18n-t>
+ <br>
+
+ <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
+ <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control" required>
+ </div>
+ </template>
+
+ <template v-if="monitor.type === 'radius'">
+ <div class="my-3">
+ <label for="radius_username" class="form-label">Radius {{ $t("Username") }}</label>
+ <input id="radius_username" v-model="monitor.radiusUsername" type="text" class="form-control" required />
+ </div>
+
+ <div class="my-3">
+ <label for="radius_password" class="form-label">Radius {{ $t("Password") }}</label>
+ <input id="radius_password" v-model="monitor.radiusPassword" type="password" class="form-control" required />
+ </div>
+
+ <div class="my-3">
+ <label for="radius_secret" class="form-label">{{ $t("RadiusSecret") }}</label>
+ <input id="radius_secret" v-model="monitor.radiusSecret" type="password" class="form-control" required />
+ <div class="form-text"> {{ $t( "RadiusSecretDescription") }} </div>
+ </div>
+
+ <div class="my-3">
+ <label for="radius_called_station_id" class="form-label">{{ $t("RadiusCalledStationId") }}</label>
+ <input id="radius_called_station_id" v-model="monitor.radiusCalledStationId" type="text" class="form-control" required />
+ <div class="form-text"> {{ $t( "RadiusCalledStationIdDescription") }} </div>
+ </div>
+
+ <div class="my-3">
+ <label for="radius_calling_station_id" class="form-label">{{ $t("RadiusCallingStationId") }}</label>
+ <input id="radius_calling_station_id" v-model="monitor.radiusCallingStationId" type="text" class="form-control" required />
+ <div class="form-text"> {{ $t( "RadiusCallingStationIdDescription") }} </div>
+ </div>
+ </template>
+
+ <!-- SQL Server / PostgreSQL / MySQL / Redis / MongoDB -->
+ <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql' || monitor.type === 'redis' || monitor.type === 'mongodb'">
+ <div class="my-3">
+ <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>
+ <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
+ </div>
+ </template>
+
+ <template v-if="monitor.type === 'mysql'">
+ <div class="my-3">
+ <label for="mysql-password" class="form-label">{{ $t("Password") }}</label>
+ <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
+ <HiddenInput id="mysql-password" v-model="monitor.radiusPassword" autocomplete="false"></HiddenInput>
+ </div>
+ </template>
+
+ <!-- SQL Server / PostgreSQL / MySQL -->
+ <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql'">
+ <div class="my-3">
+ <label for="sqlQuery" class="form-label">{{ $t("Query") }}</label>
+ <textarea id="sqlQuery" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ 'SELECT 1' ])"></textarea>
+ </div>
+ </template>
+
+ <!-- MongoDB -->
+ <template v-if="monitor.type === 'mongodb'">
+ <div class="my-3">
+ <label for="mongodbCommand" class="form-label">{{ $t("Command") }}</label>
+ <textarea id="mongodbCommand" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ '{ &quot;ping&quot;: 1 }' ])"></textarea>
+ <i18n-t tag="div" class="form-text" keypath="mongodbCommandDescription">
+ <template #documentation>
+ <a href="https://www.mongodb.com/docs/manual/reference/command/">{{ $t('documentationOf', ['MongoDB']) }}</a>
+ </template>
+ </i18n-t>
+ </div>
+ <div class="my-3">
+ <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
+ <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control">
+
+ <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
+ <a href="https://jsonata.org/">jsonata.org</a>
+ <a href="https://try.jsonata.org/">{{ $t('here') }}</a>
+ </i18n-t>
+ </div>
+ <div class="my-3">
+ <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
+ <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control">
+ </div>
+ </template>
+
+ <!-- Conditions -->
+ <EditMonitorConditions
+ v-if="supportsConditions && conditionVariables.length > 0"
+ v-model="monitor.conditions"
+ :condition-variables="conditionVariables"
+ class="my-3"
+ />
+
+ <!-- Interval -->
+ <div class="my-3">
+ <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
+ <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval" @blur="finishUpdateInterval">
+ </div>
+
+ <div class="my-3">
+ <label for="maxRetries" class="form-label">{{ $t("Retries") }}</label>
+ <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">
+ <div class="form-text">
+ {{ $t("retriesDescription") }}
+ </div>
+ </div>
+
+ <div class="my-3">
+ <label for="retry-interval" class="form-label">
+ {{ $t("Heartbeat Retry Interval") }}
+ <span>({{ $t("retryCheckEverySecond", [ monitor.retryInterval ]) }})</span>
+ </label>
+ <input id="retry-interval" v-model="monitor.retryInterval" type="number" class="form-control" required :min="minInterval" step="1">
+ </div>
+
+ <!-- Timeout: HTTP / Keyword / SNMP only -->
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'snmp' || monitor.type === 'rabbitmq'" class="my-3">
+ <label for="timeout" class="form-label">{{ $t("Request Timeout") }} ({{ $t("timeoutAfter", [ monitor.timeout || clampTimeout(monitor.interval) ]) }})</label>
+ <input id="timeout" v-model="monitor.timeout" type="number" class="form-control" required min="0" step="0.1">
+ </div>
+
+ <div class="my-3">
+ <label for="resend-interval" class="form-label">
+ {{ $t("Resend Notification if Down X times consecutively") }}
+ <span v-if="monitor.resendInterval > 0">({{ $t("resendEveryXTimes", [ monitor.resendInterval ]) }})</span>
+ <span v-else>({{ $t("resendDisabled") }})</span>
+ </label>
+ <input id="resend-interval" v-model="monitor.resendInterval" type="number" class="form-control" required min="0" step="1">
+ </div>
+
+ <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
+
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' " class="my-3 form-check" :title="monitor.ignoreTls ? $t('ignoredTLSError') : ''">
+ <input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox" :disabled="monitor.ignoreTls">
+ <label class="form-check-label" for="expiry-notification">
+ {{ $t("Certificate Expiry Notification") }}
+ </label>
+ <div class="form-text">
+ </div>
+ </div>
+
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'redis' " class="my-3 form-check">
+ <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
+ <label class="form-check-label" for="ignore-tls">
+ {{ monitor.type === "redis" ? $t("ignoreTLSErrorGeneral") : $t("ignoreTLSError") }}
+ </label>
+ </div>
+
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' " class="my-3 form-check">
+ <input id="cache-bust" v-model="monitor.cacheBust" class="form-check-input" type="checkbox" value="">
+ <label class="form-check-label" for="cache-bust">
+ <i18n-t tag="label" keypath="cacheBusterParam" class="form-check-label" for="cache-bust">
+ <code>uptime_kuma_cachebuster</code>
+ </i18n-t>
+ </label>
+ <div class="form-text">
+ {{ $t("cacheBusterParamDescription") }}
+ </div>
+ </div>
+
+ <div class="my-3 form-check">
+ <input id="upside-down" v-model="monitor.upsideDown" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="upside-down">
+ {{ $t("Upside Down Mode") }}
+ </label>
+ <div class="form-text">
+ {{ $t("upsideDownModeDescription") }}
+ </div>
+ </div>
+
+ <div v-if="monitor.type === 'gamedig'" class="my-3 form-check">
+ <input id="gamedig-guess-port" v-model="monitor.gamedigGivenPortOnly" :true-value="false" :false-value="true" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="gamedig-guess-port">
+ {{ $t("gamedigGuessPort") }}
+ </label>
+ <div class="form-text">
+ {{ $t("gamedigGuessPortDescription") }}
+ </div>
+ </div>
+
+ <!-- Ping packet size -->
+ <div v-if="monitor.type === 'ping'" class="my-3">
+ <label for="packet-size" class="form-label">{{ $t("Packet Size") }}</label>
+ <input id="packet-size" v-model="monitor.packetSize" type="number" class="form-control" required min="1" max="65500" step="1">
+ </div>
+
+ <!-- HTTP / Keyword only -->
+ <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'grpc-keyword' ">
+ <div class="my-3">
+ <label for="maxRedirects" class="form-label">{{ $t("Max. Redirects") }}</label>
+ <input id="maxRedirects" v-model="monitor.maxredirects" type="number" class="form-control" required min="0" step="1">
+ <div class="form-text">
+ {{ $t("maxRedirectDescription") }}
+ </div>
+ </div>
+
+ <div class="my-3">
+ <label for="acceptedStatusCodes" class="form-label">{{ $t("Accepted Status Codes") }}</label>
+
+ <VueMultiselect
+ id="acceptedStatusCodes"
+ v-model="monitor.accepted_statuscodes"
+ :options="acceptedStatusCodeOptions"
+ :multiple="true"
+ :close-on-select="false"
+ :clear-on-select="false"
+ :preserve-search="true"
+ :placeholder="$t('Pick Accepted Status Codes...')"
+ :preselect-first="false"
+ :max-height="600"
+ :taggable="true"
+ ></VueMultiselect>
+
+ <div class="form-text">
+ {{ $t("acceptedStatusCodesDescription") }}
+ </div>
+ </div>
+ </template>
+
+ <!-- Parent Monitor -->
+ <div class="my-3">
+ <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
+ <ActionSelect
+ id="monitorGroupSelector"
+ v-model="monitor.parent"
+ :action-aria-label="$t('openModalTo', 'setup a new monitor group')"
+ :options="parentMonitorOptionsList"
+ :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null"
+ :icon="'plus'"
+ :action="() => $refs.createGroupDialog.show()"
+ />
+ </div>
+
+ <!-- Description -->
+ <div class="my-3">
+ <label for="description" class="form-label">{{ $t("Description") }}</label>
+ <input id="description" v-model="monitor.description" type="text" class="form-control">
+ </div>
+
+ <div class="my-3">
+ <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>
+ </div>
+ </div>
+
+ <div class="col-md-6">
+ <div v-if="$root.isMobile" class="mt-3" />
+
+ <!-- Notifications -->
+ <h2 class="mb-2">{{ $t("Notifications") }}</h2>
+ <p v-if="$root.notificationList.length === 0">
+ {{ $t("Not available, please setup.") }}
+ </p>
+
+ <div v-for="notification in $root.notificationList" :key="notification.id" class="form-check form-switch my-3">
+ <input :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]" class="form-check-input" type="checkbox">
+
+ <label class="form-check-label" :for=" 'notification' + notification.id">
+ {{ notification.name }}
+ <a href="#" @click="$refs.notificationDialog.show(notification.id)">{{ $t("Edit") }}</a>
+ </label>
+
+ <span v-if="notification.isDefault == true" class="badge bg-primary ms-2">{{ $t("Default") }}</span>
+ </div>
+
+ <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
+ {{ $t("Setup Notification") }}
+ </button>
+
+ <!-- Proxies -->
+ <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query'">
+ <h2 class="mt-5 mb-2">{{ $t("Proxy") }}</h2>
+ <p v-if="$root.proxyList.length === 0">
+ {{ $t("Not available, please setup.") }}
+ </p>
+
+ <div v-if="$root.proxyList.length > 0" class="form-check my-3">
+ <input id="proxy-disable" v-model="monitor.proxyId" :value="null" name="proxy" class="form-check-input" type="radio">
+ <label class="form-check-label" for="proxy-disable">{{ $t("No Proxy") }}</label>
+ </div>
+
+ <div v-for="proxy in $root.proxyList" :key="proxy.id" class="form-check my-3">
+ <input :id="`proxy-${proxy.id}`" v-model="monitor.proxyId" :value="proxy.id" name="proxy" class="form-check-input" type="radio">
+
+ <label class="form-check-label" :for="`proxy-${proxy.id}`">
+ {{ proxy.host }}:{{ proxy.port }} ({{ proxy.protocol }})
+ <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
+ </label>
+
+ <span v-if="proxy.default === true" class="badge bg-primary ms-2">{{ $t("default") }}</span>
+ </div>
+
+ <button class="btn btn-primary me-2" type="button" @click="$refs.proxyDialog.show()">
+ {{ $t("Setup Proxy") }}
+ </button>
+ </div>
+
+ <!-- Kafka SASL Options -->
+ <!-- Kafka Producer only -->
+ <template v-if="monitor.type === 'kafka-producer'">
+ <h2 class="mt-5 mb-2">{{ $t("Kafka SASL Options") }}</h2>
+ <div class="my-3">
+ <label class="form-label" for="kafkaProducerSaslMechanism">
+ {{ $t("Mechanism") }}
+ </label>
+ <VueMultiselect
+ id="kafkaProducerSaslMechanism"
+ v-model="monitor.kafkaProducerSaslOptions.mechanism"
+ :options="kafkaSaslMechanismOptions"
+ :multiple="false"
+ :clear-on-select="false"
+ :preserve-search="false"
+ :placeholder="$t('Pick a SASL Mechanism...')"
+ :preselect-first="false"
+ :max-height="500"
+ :allow-empty="false"
+ :taggable="false"
+ ></VueMultiselect>
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'None'">
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+ <label for="kafkaProducerSaslUsername" class="form-label">{{ $t("Username") }}</label>
+ <input id="kafkaProducerSaslUsername" v-model="monitor.kafkaProducerSaslOptions.username" type="text" autocomplete="kafkaProducerSaslUsername" class="form-control">
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism !== 'aws'" class="my-3">
+ <label for="kafkaProducerSaslPassword" class="form-label">{{ $t("Password") }}</label>
+ <input id="kafkaProducerSaslPassword" v-model="monitor.kafkaProducerSaslOptions.password" type="password" autocomplete="kafkaProducerSaslPassword" class="form-control">
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+ <label for="kafkaProducerSaslAuthorizationIdentity" class="form-label">{{ $t("Authorization Identity") }}</label>
+ <input id="kafkaProducerSaslAuthorizationIdentity" v-model="monitor.kafkaProducerSaslOptions.authorizationIdentity" type="text" autocomplete="kafkaProducerSaslAuthorizationIdentity" class="form-control" required>
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+ <label for="kafkaProducerSaslAccessKeyId" class="form-label">{{ $t("AccessKey Id") }}</label>
+ <input id="kafkaProducerSaslAccessKeyId" v-model="monitor.kafkaProducerSaslOptions.accessKeyId" type="text" autocomplete="kafkaProducerSaslAccessKeyId" class="form-control" required>
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+ <label for="kafkaProducerSaslSecretAccessKey" class="form-label">{{ $t("Secret AccessKey") }}</label>
+ <input id="kafkaProducerSaslSecretAccessKey" v-model="monitor.kafkaProducerSaslOptions.secretAccessKey" type="password" autocomplete="kafkaProducerSaslSecretAccessKey" class="form-control" required>
+ </div>
+ <div v-if="monitor.kafkaProducerSaslOptions.mechanism === 'aws'" class="my-3">
+ <label for="kafkaProducerSaslSessionToken" class="form-label">{{ $t("Session Token") }}</label>
+ <input id="kafkaProducerSaslSessionToken" v-model="monitor.kafkaProducerSaslOptions.sessionToken" type="password" autocomplete="kafkaProducerSaslSessionToken" class="form-control">
+ </div>
+ </div>
+ </template>
+
+ <!-- HTTP Options -->
+ <template v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' ">
+ <h2 class="mt-5 mb-2">{{ $t("HTTP Options") }}</h2>
+
+ <!-- Method -->
+ <div class="my-3">
+ <label for="method" class="form-label">{{ $t("Method") }}</label>
+ <select id="method" v-model="monitor.method" class="form-select">
+ <option value="GET">
+ GET
+ </option>
+ <option value="POST">
+ POST
+ </option>
+ <option value="PUT">
+ PUT
+ </option>
+ <option value="PATCH">
+ PATCH
+ </option>
+ <option value="DELETE">
+ DELETE
+ </option>
+ <option value="HEAD">
+ HEAD
+ </option>
+ <option value="OPTIONS">
+ OPTIONS
+ </option>
+ </select>
+ </div>
+
+ <!-- Encoding -->
+ <div class="my-3">
+ <label for="httpBodyEncoding" class="form-label">{{ $t("Body Encoding") }}</label>
+ <select id="httpBodyEncoding" v-model="monitor.httpBodyEncoding" class="form-select">
+ <option value="json">JSON</option>
+ <option value="form">x-www-form-urlencoded</option>
+ <option value="xml">XML</option>
+ </select>
+ </div>
+
+ <!-- Body -->
+ <div class="my-3">
+ <label for="body" class="form-label">{{ $t("Body") }}</label>
+ <textarea id="body" v-model="monitor.body" class="form-control" :placeholder="bodyPlaceholder"></textarea>
+ </div>
+
+ <!-- Headers -->
+ <div class="my-3">
+ <label for="headers" class="form-label">{{ $t("Headers") }}</label>
+ <textarea id="headers" v-model="monitor.headers" class="form-control" :placeholder="headersPlaceholder"></textarea>
+ </div>
+
+ <!-- HTTP Auth -->
+ <h4 class="mt-5 mb-2">{{ $t("Authentication") }}</h4>
+
+ <!-- Method -->
+ <div class="my-3">
+ <label for="method" class="form-label">{{ $t("Method") }}</label>
+ <select id="method" v-model="monitor.authMethod" class="form-select">
+ <option :value="null">
+ {{ $t("None") }}
+ </option>
+ <option value="basic">
+ {{ $t("HTTP Basic Auth") }}
+ </option>
+ <option value="oauth2-cc">
+ {{ $t("OAuth2: Client Credentials") }}
+ </option>
+ <option value="ntlm">
+ NTLM
+ </option>
+ <option value="mtls">
+ mTLS
+ </option>
+ </select>
+ </div>
+ <template v-if="monitor.authMethod && monitor.authMethod !== null ">
+ <template v-if="monitor.authMethod === 'mtls' ">
+ <div class="my-3">
+ <label for="tls-cert" class="form-label">{{ $t("Cert") }}</label>
+ <textarea id="tls-cert" v-model="monitor.tlsCert" class="form-control" :placeholder="$t('Cert body')" required></textarea>
+ </div>
+ <div class="my-3">
+ <label for="tls-key" class="form-label">{{ $t("Key") }}</label>
+ <textarea id="tls-key" v-model="monitor.tlsKey" class="form-control" :placeholder="$t('Key body')" required></textarea>
+ </div>
+ <div class="my-3">
+ <label for="tls-ca" class="form-label">{{ $t("CA") }}</label>
+ <textarea id="tls-ca" v-model="monitor.tlsCa" class="form-control" :placeholder="$t('Server CA')"></textarea>
+ </div>
+ </template>
+ <template v-else-if="monitor.authMethod === 'oauth2-cc' ">
+ <div class="my-3">
+ <label for="oauth_auth_method" class="form-label">{{ $t("Authentication Method") }}</label>
+ <select id="oauth_auth_method" v-model="monitor.oauth_auth_method" class="form-select">
+ <option value="client_secret_basic">
+ {{ $t("Authorization Header") }}
+ </option>
+ <option value="client_secret_post">
+ {{ $t("Form Data Body") }}
+ </option>
+ </select>
+ </div>
+ <div class="my-3">
+ <label for="oauth_token_url" class="form-label">{{ $t("OAuth Token URL") }}</label>
+ <input id="oauth_token_url" v-model="monitor.oauth_token_url" type="text" class="form-control" :placeholder="$t('OAuth Token URL')" required>
+ </div>
+ <div class="my-3">
+ <label for="oauth_client_id" class="form-label">{{ $t("Client ID") }}</label>
+ <input id="oauth_client_id" v-model="monitor.oauth_client_id" type="text" class="form-control" :placeholder="$t('Client ID')" required>
+ </div>
+ <template v-if="monitor.oauth_auth_method === 'client_secret_post' || monitor.oauth_auth_method === 'client_secret_basic'">
+ <div class="my-3">
+ <label for="oauth_client_secret" class="form-label">{{ $t("Client Secret") }}</label>
+ <input id="oauth_client_secret" v-model="monitor.oauth_client_secret" type="password" class="form-control" :placeholder="$t('Client Secret')" required>
+ </div>
+ <div class="my-3">
+ <label for="oauth_scopes" class="form-label">{{ $t("OAuth Scope") }}</label>
+ <input id="oauth_scopes" v-model="monitor.oauth_scopes" type="text" class="form-control" :placeholder="$t('Optional: Space separated list of scopes')">
+ </div>
+ </template>
+ </template>
+ <template v-else>
+ <div class="my-3">
+ <label for="basicauth-user" class="form-label">{{ $t("Username") }}</label>
+ <input id="basicauth-user" v-model="monitor.basic_auth_user" type="text" class="form-control" :placeholder="$t('Username')">
+ </div>
+
+ <div class="my-3">
+ <label for="basicauth-pass" class="form-label">{{ $t("Password") }}</label>
+ <input id="basicauth-pass" v-model="monitor.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
+ </div>
+ <template v-if="monitor.authMethod === 'ntlm' ">
+ <div class="my-3">
+ <label for="ntlm-domain" class="form-label">{{ $t("Domain") }}</label>
+ <input id="ntlm-domain" v-model="monitor.authDomain" type="text" class="form-control" :placeholder="$t('Domain')">
+ </div>
+
+ <div class="my-3">
+ <label for="ntlm-workstation" class="form-label">{{ $t("Workstation") }}</label>
+ <input id="ntlm-workstation" v-model="monitor.authWorkstation" type="text" class="form-control" :placeholder="$t('Workstation')">
+ </div>
+ </template>
+ </template>
+ </template>
+ </template>
+
+ <!-- gRPC Options -->
+ <template v-if="monitor.type === 'grpc-keyword' ">
+ <!-- Proto service enable TLS -->
+ <h2 class="mt-5 mb-2">{{ $t("GRPC Options") }}</h2>
+ <div class="my-3 form-check">
+ <input id="grpc-enable-tls" v-model="monitor.grpcEnableTls" class="form-check-input" type="checkbox" value="">
+ <label class="form-check-label" for="grpc-enable-tls">
+ {{ $t("Enable TLS") }}
+ </label>
+ <div class="form-text">
+ {{ $t("enableGRPCTls") }}
+ </div>
+ </div>
+ <!-- Proto service name data -->
+ <div class="my-3">
+ <label for="protobuf" class="form-label">{{ $t("Proto Service Name") }}</label>
+ <input id="name" v-model="monitor.grpcServiceName" type="text" class="form-control" :placeholder="protoServicePlaceholder" required>
+ </div>
+
+ <!-- Proto method data -->
+ <div class="my-3">
+ <label for="protobuf" class="form-label">{{ $t("Proto Method") }}</label>
+ <input id="name" v-model="monitor.grpcMethod" type="text" class="form-control" :placeholder="protoMethodPlaceholder" required>
+ <div class="form-text">
+ {{ $t("grpcMethodDescription") }}
+ </div>
+ </div>
+
+ <!-- Proto data -->
+ <div class="my-3">
+ <label for="protobuf" class="form-label">{{ $t("Proto Content") }}</label>
+ <textarea id="protobuf" v-model="monitor.grpcProtobuf" class="form-control" :placeholder="protoBufDataPlaceholder"></textarea>
+ </div>
+
+ <!-- Body -->
+ <div class="my-3">
+ <label for="body" class="form-label">{{ $t("Body") }}</label>
+ <textarea id="body" v-model="monitor.grpcBody" class="form-control" :placeholder="bodyPlaceholder"></textarea>
+ </div>
+
+ <!-- Metadata: temporary disable waiting for next PR allow to send gRPC with metadata -->
+ <template v-if="false">
+ <div class="my-3">
+ <label for="metadata" class="form-label">{{ $t("Metadata") }}</label>
+ <textarea id="metadata" v-model="monitor.grpcMetadata" class="form-control" :placeholder="headersPlaceholder"></textarea>
+ </div>
+ </template>
+ </template>
+ </div>
+ </div>
+
+ <div class="fixed-bottom-bar p-3">
+ <button
+ id="monitor-submit-btn"
+ class="btn btn-primary"
+ type="submit"
+ :disabled="processing"
+ data-testid="save-button"
+ >
+ {{ $t("Save") }}
+ </button>
+ </div>
+ </div>
+ </form>
+
+ <NotificationDialog ref="notificationDialog" @added="addedNotification" />
+ <DockerHostDialog ref="dockerHostDialog" @added="addedDockerHost" />
+ <ProxyDialog ref="proxyDialog" @added="addedProxy" />
+ <CreateGroupDialog ref="createGroupDialog" @added="addedDraftGroup" />
+ <RemoteBrowserDialog ref="remoteBrowserDialog" />
+ </div>
+ </transition>
+</template>
+
+<script>
+import VueMultiselect from "vue-multiselect";
+import { useToast } from "vue-toastification";
+import ActionSelect from "../components/ActionSelect.vue";
+import CopyableInput from "../components/CopyableInput.vue";
+import CreateGroupDialog from "../components/CreateGroupDialog.vue";
+import NotificationDialog from "../components/NotificationDialog.vue";
+import DockerHostDialog from "../components/DockerHostDialog.vue";
+import RemoteBrowserDialog from "../components/RemoteBrowserDialog.vue";
+import ProxyDialog from "../components/ProxyDialog.vue";
+import TagsManager from "../components/TagsManager.vue";
+import { genSecret, isDev, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND, sleep } from "../util.ts";
+import { hostNameRegexPattern } from "../util-frontend";
+import HiddenInput from "../components/HiddenInput.vue";
+import EditMonitorConditions from "../components/EditMonitorConditions.vue";
+
+const toast = useToast;
+
+const pushTokenLength = 32;
+
+const monitorDefaults = {
+ type: "http",
+ name: "",
+ parent: null,
+ url: "https://",
+ method: "GET",
+ interval: 60,
+ retryInterval: 60,
+ resendInterval: 0,
+ maxretries: 0,
+ notificationIDList: {},
+ ignoreTls: false,
+ upsideDown: false,
+ packetSize: 56,
+ expiryNotification: false,
+ maxredirects: 10,
+ accepted_statuscodes: [ "200-299" ],
+ dns_resolve_type: "A",
+ dns_resolve_server: "1.1.1.1",
+ docker_container: "",
+ docker_host: null,
+ proxyId: null,
+ mqttUsername: "",
+ mqttPassword: "",
+ mqttTopic: "",
+ mqttSuccessMessage: "",
+ mqttCheckType: "keyword",
+ authMethod: null,
+ oauth_auth_method: "client_secret_basic",
+ httpBodyEncoding: "json",
+ kafkaProducerBrokers: [],
+ kafkaProducerSaslOptions: {
+ mechanism: "None",
+ },
+ cacheBust: false,
+ kafkaProducerSsl: false,
+ kafkaProducerAllowAutoTopicCreation: false,
+ gamedigGivenPortOnly: true,
+ remote_browser: null,
+ rabbitmqNodes: [],
+ rabbitmqUsername: "",
+ rabbitmqPassword: "",
+ conditions: []
+};
+
+export default {
+ components: {
+ HiddenInput,
+ ActionSelect,
+ ProxyDialog,
+ CopyableInput,
+ CreateGroupDialog,
+ NotificationDialog,
+ DockerHostDialog,
+ RemoteBrowserDialog,
+ TagsManager,
+ VueMultiselect,
+ EditMonitorConditions,
+ },
+
+ data() {
+ return {
+ minInterval: MIN_INTERVAL_SECOND,
+ maxInterval: MAX_INTERVAL_SECOND,
+ processing: false,
+ monitor: {
+ notificationIDList: {},
+ // Do not add default value here, please check init() method
+ },
+ acceptedStatusCodeOptions: [],
+ dnsresolvetypeOptions: [],
+ kafkaSaslMechanismOptions: [],
+ ipOrHostnameRegexPattern: hostNameRegexPattern(),
+ mqttIpOrHostnameRegexPattern: hostNameRegexPattern(true),
+ gameList: null,
+ connectionStringTemplates: {
+ "sqlserver": "Server=<hostname>,<port>;Database=<your database>;User Id=<your user id>;Password=<your password>;Encrypt=<true/false>;TrustServerCertificate=<Yes/No>;Connection Timeout=<int>",
+ "postgres": "postgres://username:password@host:port/database",
+ "mysql": "mysql://username:password@host:port/database",
+ "redis": "redis://user:password@host:port",
+ "mongodb": "mongodb://username:password@host:port/database",
+ },
+ draftGroupName: null,
+ remoteBrowsersEnabled: false,
+ };
+ },
+
+ computed: {
+ ipRegex() {
+
+ // Allow to test with simple dns server with port (127.0.0.1:5300)
+ if (! isDev) {
+ return this.ipRegexPattern;
+ }
+ return null;
+ },
+
+ pageName() {
+ let name = "Add New Monitor";
+ if (this.isClone) {
+ name = "Clone Monitor";
+ } else if (this.isEdit) {
+ name = "Edit";
+ }
+ return this.$t(name);
+ },
+ remoteBrowsersOptions() {
+ return this.$root.remoteBrowserList.map(browser => {
+ return {
+ label: browser.name,
+ value: browser.id,
+ };
+ });
+ },
+ remoteBrowsersToggle: {
+ get() {
+ return this.remoteBrowsersEnabled || this.monitor.remote_browser != null;
+ },
+ set(value) {
+ if (value) {
+ this.remoteBrowsersEnabled = true;
+ if (this.monitor.remote_browser == null && this.$root.remoteBrowserList.length > 0) {
+ // set a default remote browser if there is one. Otherwise, the user will have to select one manually.
+ this.monitor.remote_browser = this.$root.remoteBrowserList[0].id;
+ }
+ } else {
+ this.remoteBrowsersEnabled = false;
+ this.monitor.remote_browser = null;
+ }
+ }
+ },
+ isAdd() {
+ return this.$route.path === "/add";
+ },
+
+ isClone() {
+ return this.$route.path.startsWith("/clone");
+ },
+
+ isEdit() {
+ return this.$route.path.startsWith("/edit");
+ },
+
+ pushURL() {
+ return this.$root.baseURL + "/api/push/" + this.monitor.pushToken + "?status=up&msg=OK&ping=";
+ },
+
+ protoServicePlaceholder() {
+ return this.$t("Example:", [ "Health" ]);
+ },
+
+ protoMethodPlaceholder() {
+ return this.$t("Example:", [ "check" ]);
+ },
+
+ protoBufDataPlaceholder() {
+ return this.$t("Example:", [ `
+syntax = "proto3";
+
+package grpc.health.v1;
+
+service Health {
+ rpc Check(HealthCheckRequest) returns (HealthCheckResponse);
+ rpc Watch(HealthCheckRequest) returns (stream HealthCheckResponse);
+}
+
+message HealthCheckRequest {
+ string service = 1;
+}
+
+message HealthCheckResponse {
+ enum ServingStatus {
+ UNKNOWN = 0;
+ SERVING = 1;
+ NOT_SERVING = 2;
+ SERVICE_UNKNOWN = 3; // Used only by the Watch method.
+ }
+ ServingStatus status = 1;
+}
+ ` ]);
+ },
+ bodyPlaceholder() {
+ if (this.monitor && this.monitor.httpBodyEncoding && this.monitor.httpBodyEncoding === "xml") {
+ return this.$t("Example:", [ `
+<?xml version="1.0" encoding="utf-8"?>
+<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
+ <soap:Body>
+ <Uptime>Kuma</Uptime>
+ </soap:Body>
+</soap:Envelope>` ]);
+ }
+ if (this.monitor && this.monitor.httpBodyEncoding === "form") {
+ return this.$t("Example:", [ "key1=value1&key2=value2" ]);
+ }
+ return this.$t("Example:", [ `
+{
+ "key": "value"
+}` ]);
+ },
+
+ headersPlaceholder() {
+ return this.$t("Example:", [ `
+{
+ "HeaderName": "HeaderValue"
+}` ]);
+ },
+
+ currentGameObject() {
+ if (this.gameList) {
+ for (let game of this.gameList) {
+ if (game.keys[0] === this.monitor.game) {
+ return game;
+ }
+ }
+ }
+ return null;
+ },
+
+ // Filter result by active state, weight and alphabetical
+ // Only return groups which arent't itself and one of its decendants
+ sortedGroupMonitorList() {
+ let result = Object.values(this.$root.monitorList);
+
+ // Only groups, not itself, not a decendant
+ result = result.filter(
+ monitor => monitor.type === "group" &&
+ monitor.id !== this.monitor.id &&
+ !this.monitor.childrenIDs?.includes(monitor.id)
+ );
+
+ // Filter result by active state, weight and alphabetical
+ result.sort((m1, m2) => {
+
+ if (m1.active !== m2.active) {
+ if (m1.active === 0) {
+ return 1;
+ }
+
+ if (m2.active === 0) {
+ return -1;
+ }
+ }
+
+ if (m1.weight !== m2.weight) {
+ if (m1.weight > m2.weight) {
+ return -1;
+ }
+
+ if (m1.weight < m2.weight) {
+ return 1;
+ }
+ }
+
+ return m1.pathName.localeCompare(m2.pathName);
+ });
+
+ return result;
+ },
+
+ /**
+ * Generates the parent monitor options list based on the sorted group monitor list and draft group name.
+ * @returns {Array} The parent monitor options list.
+ */
+ parentMonitorOptionsList() {
+ let list = [];
+ if (this.sortedGroupMonitorList.length === 0 && this.draftGroupName == null) {
+ list = [
+ {
+ label: this.$t("noGroupMonitorMsg"),
+ value: null
+ }
+ ];
+ } else {
+ list = [
+ {
+ label: this.$t("None"),
+ value: null
+ },
+ ... this.sortedGroupMonitorList.map(monitor => {
+ return {
+ label: monitor.pathName,
+ value: monitor.id,
+ };
+ }),
+ ];
+ }
+
+ if (this.draftGroupName != null) {
+ list = [{
+ label: this.draftGroupName,
+ value: -1,
+ }].concat(list);
+ }
+
+ return list;
+ },
+
+ dockerHostOptionsList() {
+ if (this.$root.dockerHostList && this.$root.dockerHostList.length > 0) {
+ return this.$root.dockerHostList.map((host) => {
+ return {
+ label: host.name,
+ value: host.id
+ };
+ });
+ } else {
+ return [{
+ label: this.$t("noDockerHostMsg"),
+ value: null,
+ }];
+ }
+ },
+
+ supportsConditions() {
+ return this.$root.monitorTypeList[this.monitor.type]?.supportsConditions || false;
+ },
+
+ conditionVariables() {
+ return this.$root.monitorTypeList[this.monitor.type]?.conditionVariables || [];
+ },
+ },
+ watch: {
+ "$root.proxyList"() {
+ if (this.isAdd) {
+ if (this.$root.proxyList && !this.monitor.proxyId) {
+ const proxy = this.$root.proxyList.find(proxy => proxy.default);
+
+ if (proxy) {
+ this.monitor.proxyId = proxy.id;
+ }
+ }
+ }
+ },
+
+ "$route.fullPath"() {
+ this.init();
+ },
+
+ "monitor.interval"(value, oldValue) {
+ // Link interval and retryInterval if they are the same value.
+ if (this.monitor.retryInterval === oldValue) {
+ this.monitor.retryInterval = value;
+ }
+ },
+
+ "monitor.timeout"(value, oldValue) {
+ // keep timeout within 80% range
+ if (value && value !== oldValue) {
+ this.monitor.timeout = this.clampTimeout(value);
+ }
+ },
+
+ "monitor.type"(newType, oldType) {
+ if (this.monitor.type === "push") {
+ if (! this.monitor.pushToken) {
+ // ideally this would require checking if the generated token is already used
+ // it's very unlikely to get a collision though (62^32 ~ 2.27265788 * 10^57 unique tokens)
+ this.monitor.pushToken = genSecret(pushTokenLength);
+ }
+ }
+
+ // Set default port for DNS if not already defined
+ if (! this.monitor.port || this.monitor.port === "53" || this.monitor.port === "1812") {
+ if (this.monitor.type === "dns") {
+ this.monitor.port = "53";
+ } else if (this.monitor.type === "radius") {
+ this.monitor.port = "1812";
+ } else if (this.monitor.type === "snmp") {
+ this.monitor.port = "161";
+ } else {
+ this.monitor.port = undefined;
+ }
+ }
+
+ if (this.monitor.type === "snmp") {
+ // snmp is not expected to be executed via the internet => we can choose a lower default timeout
+ this.monitor.timeout = 5;
+ } else {
+ this.monitor.timeout = 48;
+ }
+
+ // Set default SNMP version
+ if (!this.monitor.snmpVersion) {
+ this.monitor.snmpVersion = "2c";
+ }
+
+ // Set default jsonPath
+ if (!this.monitor.jsonPath) {
+ this.monitor.jsonPath = "$";
+ }
+
+ // Set default condition for for jsonPathOperator
+ if (!this.monitor.jsonPathOperator) {
+ this.monitor.jsonPathOperator = "==";
+ }
+
+ // Get the game list from server
+ if (this.monitor.type === "gamedig") {
+ this.$root.getSocket().emit("getGameList", (res) => {
+ if (res.ok) {
+ this.gameList = res.gameList;
+ } else {
+ this.$root.toastError(res.msg);
+ }
+ });
+ }
+
+ // Set default database connection string if empty or it is a template from another database monitor type
+ for (let monitorType in this.connectionStringTemplates) {
+ if (this.monitor.type === monitorType) {
+ let isTemplate = false;
+ for (let key in this.connectionStringTemplates) {
+ if (this.monitor.databaseConnectionString === this.connectionStringTemplates[key]) {
+ isTemplate = true;
+ break;
+ }
+ }
+ if (!this.monitor.databaseConnectionString || isTemplate) {
+ this.monitor.databaseConnectionString = this.connectionStringTemplates[monitorType];
+ }
+ break;
+ }
+ }
+
+ // Reset conditions since condition variables likely change:
+ if (oldType && newType !== oldType) {
+ this.monitor.conditions = [];
+ }
+ },
+
+ currentGameObject(newGameObject, previousGameObject) {
+ if (!this.monitor.port || (previousGameObject && previousGameObject.options.port === this.monitor.port)) {
+ this.monitor.port = newGameObject.options.port;
+ }
+ this.monitor.game = newGameObject.keys[0];
+ },
+
+ "monitor.ignoreTls"(newVal) {
+ if (newVal) {
+ this.monitor.expiryNotification = false;
+ }
+ },
+ },
+ mounted() {
+ this.init();
+
+ let acceptedStatusCodeOptions = [
+ "100-199",
+ "200-299",
+ "300-399",
+ "400-499",
+ "500-599",
+ ];
+
+ let dnsresolvetypeOptions = [
+ "A",
+ "AAAA",
+ "CAA",
+ "CNAME",
+ "MX",
+ "NS",
+ "PTR",
+ "SOA",
+ "SRV",
+ "TXT",
+ ];
+
+ let kafkaSaslMechanismOptions = [
+ "None",
+ "plain",
+ "scram-sha-256",
+ "scram-sha-512",
+ "aws",
+ ];
+
+ for (let i = 100; i <= 999; i++) {
+ acceptedStatusCodeOptions.push(i.toString());
+ }
+
+ this.acceptedStatusCodeOptions = acceptedStatusCodeOptions;
+ this.dnsresolvetypeOptions = dnsresolvetypeOptions;
+ this.kafkaSaslMechanismOptions = kafkaSaslMechanismOptions;
+ },
+ methods: {
+ /**
+ * Initialize the edit monitor form
+ * @returns {void}
+ */
+ init() {
+ if (this.isAdd) {
+
+ this.monitor = {
+ ...monitorDefaults
+ };
+
+ if (this.$root.proxyList && !this.monitor.proxyId) {
+ const proxy = this.$root.proxyList.find(proxy => proxy.default);
+
+ if (proxy) {
+ this.monitor.proxyId = proxy.id;
+ }
+ }
+
+ for (let i = 0; i < this.$root.notificationList.length; i++) {
+ if (this.$root.notificationList[i].isDefault === true) {
+ this.monitor.notificationIDList[this.$root.notificationList[i].id] = true;
+ }
+ }
+ } else if (this.isEdit || this.isClone) {
+ this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
+ if (res.ok) {
+
+ if (this.isClone) {
+ // Reset push token for cloned monitors
+ if (res.monitor.type === "push") {
+ res.monitor.pushToken = undefined;
+ }
+ }
+
+ this.monitor = res.monitor;
+
+ if (this.isClone) {
+ /*
+ * Cloning a monitor will include properties that can not be posted to backend
+ * as they are not valid columns in the SQLite table.
+ */
+ this.monitor.id = undefined; // Remove id when cloning as we want a new id
+ this.monitor.includeSensitiveData = undefined;
+ this.monitor.maintenance = undefined;
+ // group monitor fields
+ this.monitor.childrenIDs = undefined;
+ this.monitor.forceInactive = undefined;
+ this.monitor.path = undefined;
+ this.monitor.pathName = undefined;
+ this.monitor.screenshot = undefined;
+
+ this.monitor.name = this.$t("cloneOf", [ this.monitor.name ]);
+ this.$refs.tagsManager.newTags = this.monitor.tags.map((monitorTag) => {
+ return {
+ id: monitorTag.tag_id,
+ name: monitorTag.name,
+ color: monitorTag.color,
+ value: monitorTag.value,
+ new: true,
+ };
+ });
+ this.monitor.tags = undefined;
+ }
+
+ // Handling for monitors that are created before 1.7.0
+ if (this.monitor.retryInterval === 0) {
+ this.monitor.retryInterval = this.monitor.interval;
+ }
+ // Handling for monitors that are missing/zeroed timeout
+ if (!this.monitor.timeout) {
+ this.monitor.timeout = ~~(this.monitor.interval * 8) / 10;
+ }
+ } else {
+ this.$root.toastError(res.msg);
+ }
+ });
+ }
+
+ this.draftGroupName = null;
+
+ },
+
+ addKafkaProducerBroker(newBroker) {
+ this.monitor.kafkaProducerBrokers.push(newBroker);
+ },
+
+ addRabbitmqNode(newNode) {
+ this.monitor.rabbitmqNodes.push(newNode);
+ },
+
+ /**
+ * Validate form input
+ * @returns {boolean} Is the form input valid?
+ */
+ isInputValid() {
+ if (this.monitor.body && (!this.monitor.httpBodyEncoding || this.monitor.httpBodyEncoding === "json")) {
+ try {
+ JSON.parse(this.monitor.body);
+ } catch (err) {
+ toast.error(this.$t("BodyInvalidFormat") + err.message);
+ return false;
+ }
+ }
+ if (this.monitor.headers) {
+ try {
+ JSON.parse(this.monitor.headers);
+ } catch (err) {
+ toast.error(this.$t("HeadersInvalidFormat") + err.message);
+ return false;
+ }
+ }
+ if (this.monitor.type === "docker") {
+ if (this.monitor.docker_host == null) {
+ toast.error(this.$t("DockerHostRequired"));
+ return false;
+ }
+ }
+
+ if (this.monitor.type === "rabbitmq") {
+ if (this.monitor.rabbitmqNodes.length === 0) {
+ toast.error(this.$t("rabbitmqNodesRequired"));
+ return false;
+ }
+ if (!this.monitor.rabbitmqNodes.every(node => node.startsWith("http://") || node.startsWith("https://"))) {
+ toast.error(this.$t("rabbitmqNodesInvalid"));
+ return false;
+ }
+ }
+ return true;
+ },
+
+ resetToken() {
+ this.monitor.pushToken = genSecret(pushTokenLength);
+ },
+
+ /**
+ * Submit the form data for processing
+ * @returns {Promise<void>}
+ */
+ async submit() {
+
+ this.processing = true;
+
+ if (!this.isInputValid()) {
+ this.processing = false;
+ return;
+ }
+
+ // Beautify the JSON format (only if httpBodyEncoding is not set or === json)
+ if (this.monitor.body && (!this.monitor.httpBodyEncoding || this.monitor.httpBodyEncoding === "json")) {
+ this.monitor.body = JSON.stringify(JSON.parse(this.monitor.body), null, 4);
+ }
+
+ const monitorTypesWithEncodingAllowed = [ "http", "keyword", "json-query" ];
+ if (this.monitor.type && !monitorTypesWithEncodingAllowed.includes(this.monitor.type)) {
+ this.monitor.httpBodyEncoding = null;
+ }
+
+ if (this.monitor.headers) {
+ this.monitor.headers = JSON.stringify(JSON.parse(this.monitor.headers), null, 4);
+ }
+
+ if (this.monitor.hostname) {
+ this.monitor.hostname = this.monitor.hostname.trim();
+ }
+
+ if (this.monitor.url) {
+ this.monitor.url = this.monitor.url.trim();
+ }
+
+ let createdNewParent = false;
+
+ if (this.draftGroupName && this.monitor.parent === -1) {
+ // Create Monitor with name of draft group
+ const res = await new Promise((resolve) => {
+ this.$root.add({
+ ...monitorDefaults,
+ type: "group",
+ name: this.draftGroupName,
+ interval: this.monitor.interval,
+ active: false,
+ }, resolve);
+ });
+
+ if (res.ok) {
+ createdNewParent = true;
+ this.monitor.parent = res.monitorID;
+ } else {
+ this.$root.toastError(res.msg);
+ this.processing = false;
+ return;
+ }
+ }
+
+ if (this.isAdd || this.isClone) {
+ this.$root.add(this.monitor, async (res) => {
+
+ if (res.ok) {
+ await this.$refs.tagsManager.submit(res.monitorID);
+
+ // Start the new parent monitor after edit is done
+ if (createdNewParent) {
+ await this.startParentGroupMonitor();
+ }
+ this.processing = false;
+ this.$router.push("/dashboard/" + res.monitorID);
+ } else {
+ this.processing = false;
+ }
+
+ this.$root.toastRes(res);
+ });
+ } else {
+ await this.$refs.tagsManager.submit(this.monitor.id);
+
+ this.$root.getSocket().emit("editMonitor", this.monitor, (res) => {
+ this.processing = false;
+ this.$root.toastRes(res);
+ this.init();
+
+ // Start the new parent monitor after edit is done
+ if (createdNewParent) {
+ this.startParentGroupMonitor();
+ }
+ });
+ }
+ },
+
+ async startParentGroupMonitor() {
+ await sleep(2000);
+ await this.$root.getSocket().emit("resumeMonitor", this.monitor.parent, () => {});
+ },
+
+ /**
+ * Added a Notification Event
+ * Enable it if the notification is added in EditMonitor.vue
+ * @param {number} id ID of notification to add
+ * @returns {void}
+ */
+ addedNotification(id) {
+ this.monitor.notificationIDList[id] = true;
+ },
+
+ /**
+ * Added a Proxy Event
+ * Enable it if the proxy is added in EditMonitor.vue
+ * @param {number} id ID of proxy to add
+ * @returns {void}
+ */
+ addedProxy(id) {
+ this.monitor.proxyId = id;
+ },
+
+ /**
+ * Added a Docker Host Event
+ * Enable it if the Docker Host is added in EditMonitor.vue
+ * @param {number} id ID of docker host
+ * @returns {void}
+ */
+ addedDockerHost(id) {
+ this.monitor.docker_host = id;
+ },
+
+ /**
+ * Adds a draft group.
+ * @param {string} draftGroupName The name of the draft group.
+ * @returns {void}
+ */
+ addedDraftGroup(draftGroupName) {
+ this.draftGroupName = draftGroupName;
+ this.monitor.parent = -1;
+ },
+
+ // Clamp timeout
+ clampTimeout(timeout) {
+ // limit to 80% of interval, narrowly avoiding epsilon bug
+ const maxTimeout = ~~(this.monitor.interval * 8 ) / 10;
+ const clamped = Math.max(0, Math.min(timeout, maxTimeout));
+
+ // 0 will be treated as 80% of interval
+ return Number.isFinite(clamped) ? clamped : maxTimeout;
+ },
+
+ finishUpdateInterval() {
+ // Update timeout if it is greater than the clamp timeout
+ let clampedValue = this.clampTimeout(this.monitor.interval);
+ if (this.monitor.timeout > clampedValue) {
+ this.monitor.timeout = clampedValue;
+ }
+ },
+
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+ @import "../assets/vars.scss";
+
+ textarea {
+ min-height: 200px;
+ }
+</style>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-29 15:36:13 +0100