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

Code before:
    components: {
        HiddenInput,
        ActionSelect,
        ProxyDialog,
        CopyableInput,
        CreateGroupDialog,
        NotificationDialog,
        DockerHostDialog,
        RemoteBrowserDialog,
        TagsManager,
        VueMultiselect,
        EditMonitorConditions,
    },

    data() {
        return {
            minInterval: MIN_INTERVAL_SECOND,
            maxInterval: MAX_INTERVAL_SECOND,
            ping_count_min: PING_COUNT_MIN,
            ping_count_max: PING_COUNT_MAX,
            packetSize_min: PING_PACKET_SIZE_MIN,
            packetSize_max: PING_PACKET_SIZE_MAX,
            ping_deadline_min: PING_DEADLINE_MIN,
            ping_deadline_max: PING_DEADLINE_MAX,
            ping_timeout_min: PING_TIMEOUT_MIN,
            ping_timeout_max: PING_TIMEOUT_MAX,
            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() {

Review comment (refactor):
I would like for this not being a `data`.

Most other cases where this is happeinng in this project (except for interval) choose to inline these values and duplicate them in this circumstance between front and backend.
Currently the deduplication makes is a bit hard to read what all checks are.

=> lets inline these values as well here. This has the benefit of also making this simper to review

Code after:
        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: {
        timeoutStep() {
            return this.monitor.type === "ping" ? 1 : 0.1;
        },

        timeoutMin() {
            return this.monitor.type === "ping" ? 1 : 0;
        },

        timeoutMax() {
            return this.monitor.type === "ping" ? 60 : undefined;
        },