ronantakizawa/codereview-bench huggingface dataset:
Repository: louislam/uptime-kuma
File: src/components/notifications/HeiiOnCall.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="heiioncall-apikey" class="form-label">{{ $t("API Key") }}<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-apikey" v-model="$parent.notification.heiiOnCallApiKey" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="heiioncall-trigger-id" class="form-label">{{ $t("Trigger ID") }}<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-trigger-id" v-model="$parent.notification.heiiOnCallTriggerId" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <div class="form-text">
        <i18n-t tag="p" keypath="wayToGetHeiiOnCallDetails" style="margin-top: 8px;">
            <a href="https://heiioncall.com/docs" target="_blank">Heii On-Call Documentation</a>
        </i18n-t>
    </div>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
export default {
    components: {
        HiddenInput,
    },
};
</script>


Review comment (suggestion):
For `API Keys`, [I see a section](https://heiioncall.com/docs#api-keys), but no such section exists for `Tigger ID`

Code after:
<template>
    <div class="mb-3">
        <label for="heiioncall-apikey" class="form-label">{{ $t("API Key") }}<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-apikey" v-model="$parent.notification.heiiOnCallApiKey" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="heiioncall-trigger-id" class="form-label">Trigger ID<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-trigger-id" v-model="$parent.notification.heiiOnCallTriggerId" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <i18n-t tag="p" keypath="wayToGetHeiiOnCallDetails" class="form-text mt-3">
        <template #documentation>
            <a href="https://heiioncall.com/docs" target="_blank">{{ $t("documentationOf", ["Heii On-Call"]) }}</a>
        </template>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
export default {
    components: {
        HiddenInput,
    },
};
</script>
Repository: louislam/uptime-kuma
File: src/components/notifications/HeiiOnCall.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="heiioncall-apikey" class="form-label">{{ $t("API Key") }}<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-apikey" v-model="$parent.notification.heiiOnCallApiKey" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="heiioncall-trigger-id" class="form-label">Trigger ID<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-trigger-id" v-model="$parent.notification.heiiOnCallTriggerId" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <i18n-t tag="p" keypath="wayToGetHeiiOnCallDetails" class="form-text mt-3">
        <a href="https://heiioncall.com/docs" target="_blank">{{ $t("documentationOf", ["Heii On-Call"]) }}</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
export default {
    components: {
        HiddenInput,
    },
};
</script>


Review comment (suggestion):
I think adding translations in this way might be easier for our translators

```suggestion
        <template #documentation>
            <a href="https://heiioncall.com/docs" target="_blank">{{ $t("documentationOf", ["Heii On-Call"]) }}</a>
        </template>
```

Code after:
<template>
    <div class="mb-3">
        <label for="heiioncall-apikey" class="form-label">{{ $t("API Key") }}<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-apikey" v-model="$parent.notification.heiiOnCallApiKey" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="heiioncall-trigger-id" class="form-label">Trigger ID<span
            style="color: red;"
        ><sup>*</sup></span></label>
        <HiddenInput
            id="heiioncall-trigger-id" v-model="$parent.notification.heiiOnCallTriggerId" required="true"
            autocomplete="false"
        ></HiddenInput>
    </div>
    <i18n-t tag="p" keypath="wayToGetHeiiOnCallDetails" class="form-text mt-3">
        <template #documentation>
            <a href="https://heiioncall.com/docs" target="_blank">{{ $t("documentationOf", ["Heii On-Call"]) }}</a>
        </template>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
export default {
    components: {
        HiddenInput,
    },
};
</script>
Repository: louislam/uptime-kuma
File: server/notification-providers/heii-oncall.js (JavaScript)

Code before:

        const config = {
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                Authorization: "Bearer " + notification.heiiOnCallApiKey,
            },
        };
        
        const heiiUrl = `https://heiioncall.com/triggers/${notification.heiiOnCallTriggerId}/`;
        
        // docs https://heiioncall.com/docs#manual-triggers
        try {
            if (!heartbeatJSON) {
                // Testing or general notification like certificate expiry
                payload["msg"] = msg;
                await axios.post(heiiUrl + "alert", payload, config);
                return okMsg;
            }

            if (heartbeatJSON.status === DOWN) {
                await axios.post(heiiUrl + "alert", payload, config);
                return okMsg;
            }
            if (heartbeatJSON.status === UP) {
                await axios.post(heiiUrl + "resolve",payload, config);
                return okMsg;
            }
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = HeiiOnCall;


Review comment (suggestion):
```suggestion
                await axios.post(heiiUrl + "resolve", payload, config);
```

Code after:

        const config = {
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                Authorization: "Bearer " + notification.heiiOnCallApiKey,
            },
        };
        const heiiUrl = `https://heiioncall.com/triggers/${notification.heiiOnCallTriggerId}/`;
        // docs https://heiioncall.com/docs#manual-triggers
        try {
            if (!heartbeatJSON) {
                // Testing or general notification like certificate expiry
                payload["msg"] = msg;
                await axios.post(heiiUrl + "alert", payload, config);
                return okMsg;
            }

            if (heartbeatJSON.status === DOWN) {
                await axios.post(heiiUrl + "alert", payload, config);
                return okMsg;
            }
            if (heartbeatJSON.status === UP) {
                await axios.post(heiiUrl + "resolve", payload, config);
                return okMsg;
            }
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = HeiiOnCall;
Repository: louislam/uptime-kuma
File: src/components/notifications/Line.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Messaging API") }}</b>
    </i18n-t>
    <div class="mb-3" style="margin-top: 12px;">
        <label for="line-user-id" class="form-label">{{ $t("Your User ID") }}</label>
        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Basic Settings") }}</b>
    </i18n-t>
    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>

Review comment (suggestion):
Is the label for this field correct/ should this be changed?
The screenshot you showed in https://github.com/louislam/uptime-kuma/issues/4526#issuecomment-1962786951 said `Channel Access Token (long-lived)`

Code after:
<template>
    <div class="mb-3">
        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token (Long-lived)") }}</label>
        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Messaging API") }}</b>
    </i18n-t>
    <div class="mb-3" style="margin-top: 12px;">
        <label for="line-user-id" class="form-label">{{ $t("Your User ID") }}</label>
        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Basic Settings") }}</b>
    </i18n-t>
    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>
Repository: louislam/uptime-kuma
File: src/components/notifications/Line.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="line-channel-access-token" class="form-label">{{ $t("ChannelAccessTokenLongLived") }}</label>
        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Messaging API") }}</b>
    </i18n-t>
    <div class="mb-3" style="margin-top: 12px;">
        <label for="line-user-id" class="form-label">{{ $t("Your User ID") }}</label>
        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Basic Settings") }}</b>
    </i18n-t>
    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};

Review comment (suggestion):
```suggestion
        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token (Long-lived)") }}</label>
```

Code after:
<template>
    <div class="mb-3">
        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token (Long-lived)") }}</label>
        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Messaging API") }}</b>
    </i18n-t>
    <div class="mb-3" style="margin-top: 12px;">
        <label for="line-user-id" class="form-label">{{ $t("Your User ID") }}</label>
        <input id="line-user-id" v-model="$parent.notification.lineUserID" type="text" class="form-control" required>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Basic Settings") }}</b>
    </i18n-t>
    <i18n-t tag="div" keypath="wayToGetLineChannelToken" class="form-text" style="margin-top: 8px;">
        <a href="https://developers.line.biz/console/" target="_blank">{{ $t("Line Developers Console") }}</a>
    </i18n-t>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
Repository: louislam/uptime-kuma
File: server/notification-providers/teams.js (JavaScript)

Code before:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");
const { setting } = require("../util-server");
const { DOWN, UP, getMonitorRelativeURL } = require("../../src/util");

class Teams extends NotificationProvider {
    name = "teams";

    /**
     * Generate the message to send
     * @param {const} status The status constant
     * @param {string} monitorName Name of monitor
     * @returns {string} Status message
     */
    _statusMessageFactory = (status, monitorName) => {
        if (status === DOWN) {
            return `🔴 [${monitorName}] went down`;
        } else if (status === UP) {
            return `✅ [${monitorName}] is back online`;
        }
        return "Notification";
    };

    /**
     * Select the style to use based on status
     * @param {const} status The status constant
     * @returns {string} Selected style for adaptive cards
     */
    _getStyle = (status) => {
        if (status === DOWN) {
            return "attention";
        }
        if (status === UP) {
            return "good";
        }
        return "emphasis";
    };

    /**
     * Generate payload for notification
     * @param {object} args Method arguments
     * @param {const} args.status The status of the monitor

Review comment (suggestion):
I don't think necessary as the background now has a color, or how is this displayed in the notification bar?

```suggestion
            return `[${monitorName}] went down`;
```

Code after:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");
const { setting } = require("../util-server");
const { DOWN, UP, getMonitorRelativeURL } = require("../../src/util");

class Teams extends NotificationProvider {
    name = "teams";

    /**
     * Generate the message to send
     * @param {const} status The status constant
     * @param {string} monitorName Name of monitor
     * @param {boolean} withStatusSymbol If the status should be prepended as symbol
     * @returns {string} Status message
     */
    _statusMessageFactory = (status, monitorName, withStatusSymbol) => {
        if (status === DOWN) {
            return (withStatusSymbol ? "🔴 " : "") + `[${monitorName}] went down`;
        } else if (status === UP) {
            return (withStatusSymbol ? "✅ " : "") + `[${monitorName}] is back online`;
        }
        return "Notification";
    };

    /**
     * Select the style to use based on status
     * @param {const} status The status constant
     * @returns {string} Selected style for adaptive cards
     */
    _getStyle = (status) => {
        if (status === DOWN) {
            return "attention";
        }
        if (status === UP) {
            return "good";
        }
        return "emphasis";
    };

    /**
     * Generate payload for notification
     * @param {object} args Method arguments
Repository: louislam/uptime-kuma
File: server/server.js (JavaScript)

Code before:
    ]);

    if (! row) {
        throw new Error("You do not own this monitor.");
    }
}

/**
 * Function called after user login
 * This function is used to send the heartbeat list of a monitor.
 * @param {Socket} socket Socket.io instance
 * @param {object} user User object
 * @returns {Promise<void>}
 */
async function afterLogin(socket, user) {
    socket.userID = user.id;
    socket.join(user.id);

    let monitorList = await server.sendMonitorList(socket);
    sendInfo(socket);
    server.sendMaintenanceList(socket);
    sendNotificationList(socket);
    sendProxyList(socket);
    sendDockerHostList(socket);
    sendAPIKeyList(socket);
    sendRemoteBrowserList(socket);

    await sleep(500);

    await StatusPage.sendStatusPageList(io, socket);

    for (let monitorID in monitorList) {
        await sendHeartbeatList(socket, monitorID);
    }

    for (let monitorID in monitorList) {
        await Monitor.sendStats(io, monitorID, user.id);
    }

    // Set server timezone from client browser if not set
    // It should be run once only
    if (! await Settings.get("initServerTimezone")) {
        log.debug("server", "emit initServerTimezone");
        socket.emit("initServerTimezone");
    }
}

/**
 * Initialize the database
 * @param {boolean} testMode Should the connection be
 * started in test mode?

Review comment (suggestion):
In my opinion, using `await` or not is depending on the design. The need of blocking and non-blocking.

Here, most of them are actually intended not to use `await`, because they are independent. And for MariaDB, they can query at the same time without doing one by one.


Code after:
    ]);

    if (! row) {
        throw new Error("You do not own this monitor.");
    }
}

/**
 * Function called after user login
 * This function is used to send the heartbeat list of a monitor.
 * @param {Socket} socket Socket.io instance
 * @param {object} user User object
 * @returns {Promise<void>}
 */
async function afterLogin(socket, user) {
    socket.userID = user.id;
    socket.join(user.id);

    let monitorList = await server.sendMonitorList(socket);
    await sendInfo(socket);
    await server.sendMaintenanceList(socket);
    await sendNotificationList(socket);
    await sendProxyList(socket);
    await sendDockerHostList(socket);
    await sendAPIKeyList(socket);
    await sendRemoteBrowserList(socket);

    await sleep(500);

    await StatusPage.sendStatusPageList(io, socket);

    for (let monitorID in monitorList) {
        await sendHeartbeatList(socket, monitorID);
    }

    for (let monitorID in monitorList) {
        await Monitor.sendStats(io, monitorID, user.id);
    }

    // Set server timezone from client browser if not set
    // It should be run once only
    if (! await Settings.get("initServerTimezone")) {
        log.debug("server", "emit initServerTimezone");
        socket.emit("initServerTimezone");
    }
}

/**
 * Initialize the database
 * @param {boolean} testMode Should the connection be
 * started in test mode?
Repository: louislam/uptime-kuma
File: src/components/notifications/CallMeBot.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="callmebot-endpoint" class="form-label">{{ $t("Endpoint") }}</label>
        <div class="input-group mb-3">
            <input id="callmebot-endpoint" v-model="$parent.notification.callMeBotEndpoint" type="text" class="form-control" required>
            <button v-if="$parent.notification.callMeBotEndpoint" class="btn btn-outline-secondary" type="button" @click="cleanupEndpoint">
                {{ $t("Cleanup") }}
            </button>
        </div>
        <i18n-t tag="div" keypath="callMeBotGet" class="form-text">
            <a href="https://www.callmebot.com/blog/free-api-facebook-messenger/" target="_blank">Facebook Messenger</a>
        </i18n-t>
        <i18n-t tag="div" keypath="callMeBotGet" class="form-text">
            <a href="https://www.callmebot.com/blog/test-whatsapp-api/" target="_blank">WhatsApp</a>
        </i18n-t>
        <i18n-t tag="div" keypath="callMeBotGet" class="form-text">
            <a href="https://www.callmebot.com/blog/telegram-phone-call-using-your-browser/" target="_blank">Telegram Call</a>
        </i18n-t>
        <i18n-t tag="div" keypath="callMeBotInfo" class="form-text" />
    </div>
</template>

<script>

export default {
    methods: {
        /**
         * Remove the &text= param to be able to append one later
         * @returns {Promise<void>}
         * @throws The provided URL is invalid
         */

        cleanupEndpoint() {

Review comment (suggestion):
This is the only notification provider with this sort of semantic.
Please move the replacement of the `searchParams.text` to the backend instead of including such a button

Code after:
<template>
    <div class="mb-3">
        <label for="callmebot-endpoint" class="form-label">{{ $t("Endpoint") }}</label>
        <input id="callmebot-endpoint" v-model="$parent.notification.callMeBotEndpoint" type="text" class="form-control" required>
        <i18n-t tag="div" keypath="callMeBotGet" class="form-text">
            <a href="https://www.callmebot.com/blog/free-api-facebook-messenger/" target="_blank">Facebook Messenger</a>
            <a href="https://www.callmebot.com/blog/test-whatsapp-api/" target="_blank">WhatsApp</a>
            <a href="https://www.callmebot.com/blog/telegram-phone-call-using-your-browser/" target="_blank">Telegram Call</a>
            1 message / 10 sec; 1 call / 65 sec
            <!--There is no public documentation available. This data is based on testing!-->
        </i18n-t>
    </div>
</template>