Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:
                                            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">
                                    <a href="https://www.rabbitmq.com/management" target="_blank" rel="noopener noreferrer">
                                        RabbitMQ documentation
                                    </a>.
                                </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>


Review comment (suggestion):
```suggestion
                                    <template #rabitmq_documentation>
                                        <a href="https://www.rabbitmq.com/management" target="_blank" rel="noopener noreferrer">
                                            RabbitMQ documentation
                                        </a>
                                    </template>
```

Code after:
                                            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>