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

Code before:
                                <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> |
                                        <a href="#" @click="$refs.proxyDialog.showClone(proxy.id)">{{ $t("Clone") }}</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"

Review comment (suggestion):
I don't quite think that this needs to exist here.
Cloning Proxies cannot be that common, right?

```suggestion
                                        <a href="#" @click="$refs.proxyDialog.show(proxy.id)">{{ $t("Edit") }}</a>
```

It existing in the settings is a different story though. I am fine with that part.

Code after:
                                <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...')"