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

Code before:
                                    :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 v-if="monitor.type === 'manual'" class="mb-3">
                                <label class="form-label">{{ $t("Manual Status") }}</label>
                                <div class="btn-group w-100 mb-3">
                                    <button class="btn btn-success" @click="setManualStatus('up')">
                                        <i class="fas fa-check"></i> {{ $t("Up") }}
                                    </button>
                                    <button class="btn btn-danger" @click="setManualStatus('down')">
                                        <i class="fas fa-times"></i> {{ $t("Down") }}
                                    </button>
                                    <button class="btn btn-warning" @click="setManualStatus('maintenance')">
                                        <i class="fas fa-tools"></i> {{ $t("Maintenance") }}
                                    </button>
                                </div>
                                <!-- <div v-else class="alert alert-secondary">
                                    {{ $t("Manual status can be set after monitor is created") }}
                                </div> -->
                            </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>

Review comment (suggestion):
Is setting a mainteanance from this monitor actually wanted?

If yes, this would likely need to be a shortcut through the maintenance system in the backend. Lets do that in another PR if required.

```suggestion
```

Code after:

                                <div class="my-3">
                                    <label for="ipFamily" class="form-label">{{ $t("Ip Family") }}</label>
                                    <select id="ipFamily" v-model="monitor.ipFamily" class="form-select">
                                        <option :value="null">{{ $t("auto-select") }}</option>
                                        <option value="ipv4">IPv4</option>
                                        <option value="ipv6">IPv6</option>
                                    </select>
                                    <i18n-t v-if="monitor.ipFamily == null" keypath="ipFamilyDescriptionAutoSelect" tag="div" class="form-text">
                                        <template #happyEyeballs>
                                            <a href="https://en.wikipedia.org/wiki/Happy_Eyeballs" target="_blank">{{ $t("Happy Eyeballs algorithm") }}</a>
                                        </template>
                                    </i18n-t>
                                </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">