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

Code before:
                                            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 === 'websocket-upgrade' || 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="monitor.type !== 'websocket-upgrade' ? 'https?://.+' : 'wss?://.+'" required data-testid="url-input">
                            </div>

                            <!-- Websocket Subprotocol -->
                            <div v-if="monitor.type === 'websocket-upgrade'" class="my-3">
                                <label for="type" class="form-label">{{ $t("Subprotocol") }}</label>
                                <select id="type" v-model="monitor.subprotocol" class="form-select">
                                    <option value="" selected>{{ $t("None") }}</option>
                                    <option value="MBWS.huawei.com">MBWS</option>
                                    <option value="MBLWS.huawei.com">MBLWS</option>
                                    <option value="soap">soap</option>
                                    <option value="wamp">{{ $t("wamp") }}</option>
                                    <option value="v10.stomp">STOMP 1.0</option>
                                    <option value="v11.stomp">STOMP 1.1</option>
                                    <option value="v12.stomp">STOMP 1.2</option>
                                    <option value="ocpp1.2">OCPP 1.2</option>
                                    <option value="ocpp1.5">OCPP 1.5</option>
                                    <option value="ocpp1.6">OCPP 1.6</option>
                                    <option value="ocpp2.0">OCPP 2.0</option>
                                    <option value="ocpp2.0.1">OCPP 2.0.1</option>
                                    <option value="ocpp2.1">OCPP 2.1</option>
                                    <option value="rfb">RFB</option>
                                    <option value="sip">{{ $t("sip") }}</option>
                                    <option value="notificationchannel-netapi-rest.openmobilealliance.org">{{ $t("notificationchannel-netapi-rest.openmobilealliance.org") }}</option>
                                    <option value="wpcp">{{ $t("wpcp") }}</option>
                                    <option value="amqp">{{ $t("amqp") }}</option>
                                    <option value="mqtt">MQTT</option>
                                    <option value="jsflow">{{ $t("jsflow") }}</option>
                                    <option value="rwpcp">{{ $t("rwpcp") }}</option>
                                    <option value="xmpp">{{ $t("xmpp") }}</option>
                                    <option value="ship">{{ $t("ship") }}</option>
                                    <option value="mielecloudconnect">{{ $t("mielecloudconnect") }}</option>

Review comment (suggestion):
```suggestion
                                <label for="websocket-subprotocol" class="form-label">{{ $t("Subprotocol") }}</label>
                                <select id="websocket-subprotocol" v-model="monitor.subprotocol" class="form-select">
```

Code after:
                                        </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" data-testid="friendly-name-input" :placeholder="defaultFriendlyName">
                            </div>

                            <!-- Manual Status switcher -->
                            <div v-if="monitor.type === 'manual'" class="mb-3">
                                <div class="btn-group w-100 mb-3">
                                    <button class="btn btn-success" @click="monitor.manual_status = 1">
                                        <i class="fas fa-check"></i> {{ $t("Up") }}
                                    </button>
                                    <button class="btn btn-danger" @click="monitor.manual_status = 0">
                                        <i class="fas fa-times"></i> {{ $t("Down") }}
                                    </button>
                                </div>
                            </div>

                            <!-- URL -->
                            <div v-if="monitor.type === 'websocket-upgrade' || 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="monitor.type !== 'websocket-upgrade' ? 'https?://.+' : 'wss?://.+'" required data-testid="url-input">
                            </div>

                            <!-- Websocket Subprotocol Docs: https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name -->
                            <div v-if="monitor.type === 'websocket-upgrade'" class="my-3">
                                <label for="ws_subprotocol" class="form-label">{{ $t("Subprotocol") }}</label>
                                <select id="ws_subprotocol" v-model="monitor.wsSubprotocol" class="form-select">
                                    <option value="" selected>{{ $t("None") }}</option>
                                    <option value="MBWS.huawei.com">MBWS</option>
                                    <option value="MBLWS.huawei.com">MBLWS</option>
                                    <option value="soap">soap</option>
                                    <option value="wamp">{{ $t("WebSocket Application Messaging Protocol") }}</option>
                                    <option value="v10.stomp">STOMP 1.0</option>
                                    <option value="v11.stomp">STOMP 1.1</option>