Merge branch 'louislam:master' into badge-generator

2025-08-21 09:19:29 +08:00 · 2023-04-12 12:02:36 +07:00
parent 29b2809279 680dccefea
commit 030faddd1c
65 changed files with 3591 additions and 1956 deletions
--- a/src/components/APIKeyDialog.vue
+++ b/src/components/APIKeyDialog.vue
@@ -159,6 +159,16 @@ export default {
                }
            });
        },
+
+        /** Clear Form inputs */
+        clearForm() {
+            this.key = {
+                name: "",
+                expires: this.minDate,
+                active: 1,
+            };
+            this.noExpire = false;
+        },
    }
 };
 </script>
--- a/src/components/CopyableInput.vue
+++ b/src/components/CopyableInput.vue
@@ -13,6 +13,9 @@
            :disabled="disabled"
        >

+        <!-- A hidden textarea for copying text on non-https -->
+        <textarea ref="hiddenTextarea" style="position: fixed; left: -999999px; top: -999999px;"></textarea>
+
        <a class="btn btn-outline-primary" @click="copyToClipboard(model)">
            <font-awesome-icon :icon="icon" />
        </a>
@@ -111,24 +114,19 @@ export default {
            }, 3000);

            // navigator clipboard api needs a secure context (https)
+            // For http, use the text area method (else part)
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard api method'
                return navigator.clipboard.writeText(textToCopy);
            } else {
                // text area method
-                let textArea = document.createElement("textarea");
+                let textArea = this.$refs.hiddenTextarea;
                textArea.value = textToCopy;
-                // make the textarea out of viewport
-                textArea.style.position = "fixed";
-                textArea.style.left = "-999999px";
-                textArea.style.top = "-999999px";
-                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // here the magic happens
                    document.execCommand("copy") ? res() : rej();
-                    textArea.remove();
                });
            }
        }
--- a/src/components/MaintenanceTime.vue
+++ b/src/components/MaintenanceTime.vue
@@ -3,16 +3,23 @@
        <div v-if="maintenance.strategy === 'manual'" class="timeslot">
            {{ $t("Manual") }}
        </div>
-        <div v-else-if="maintenance.timeslotList.length > 0" class="timeslot">
-            {{ maintenance.timeslotList[0].startDateServerTimezone }}
-            <span class="to">-</span>
-            {{ maintenance.timeslotList[0].endDateServerTimezone }}
-            (UTC{{ maintenance.timeslotList[0].serverTimezoneOffset }})
+        <div v-else-if="maintenance.timeslotList.length > 0">
+            <div class="timeslot">
+                {{ startDateTime }}
+                <span class="to">-</span>
+                {{ endDateTime }}
+            </div>
+            <div class="timeslot">
+                UTC{{ maintenance.timezoneOffset }} <span v-if="maintenance.timezone !== 'UTC'">{{ maintenance.timezone }}</span>
+            </div>
        </div>
    </div>
 </template>

 <script>
+import dayjs from "dayjs";
+import { SQL_DATETIME_FORMAT_WITHOUT_SECOND } from "../util.ts";
+
 export default {
    props: {
        maintenance: {
@@ -20,6 +27,14 @@ export default {
            required: true
        },
    },
+    computed: {
+        startDateTime() {
+            return dayjs(this.maintenance.timeslotList[0].startDate).tz(this.maintenance.timezone).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
+        },
+        endDateTime() {
+            return dayjs(this.maintenance.timeslotList[0].endDate).tz(this.maintenance.timezone).format(SQL_DATETIME_FORMAT_WITHOUT_SECOND);
+        }
+    },
 };
 </script>

@@ -31,6 +46,7 @@ export default {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 0 10px;
+    margin-right: 5px;

    .to {
        margin: 0 6px;
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -129,6 +129,7 @@ export default {
                "ntfy": "Ntfy",
                "octopush": "Octopush",
                "OneBot": "OneBot",
+                "Opsgenie": "Opsgenie",
                "PagerDuty": "PagerDuty",
                "pushbullet": "Pushbullet",
                "PushByTechulus": "Push by Techulus",
@@ -143,6 +144,7 @@ export default {
                "stackfield": "Stackfield",
                "teams": "Microsoft Teams",
                "telegram": "Telegram",
+                "twilio": "Twilio",
                "Splunk": "Splunk",
                "webhook": "Webhook",
                "GoAlert": "GoAlert",
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -11,16 +11,16 @@
            </ul>
        </div>
        <div class="chart-wrapper" :class="{ loading : loading}">
-            <LineChart :chart-data="chartData" :options="chartOptions" />
+            <Line :data="chartData" :options="chartOptions" />
        </div>
    </div>
 </template>

 <script lang="js">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
-import "chartjs-adapter-dayjs";
+import "chartjs-adapter-dayjs-4";
 import dayjs from "dayjs";
-import { LineChart } from "vue-chart-3";
+import { Line } from "vue-chartjs";
 import { useToast } from "vue-toastification";
 import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";

@@ -29,7 +29,7 @@ const toast = useToast();
 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);

 export default {
-    components: { LineChart },
+    components: { Line },
    props: {
        /** ID of monitor */
        monitorId: {
@@ -104,8 +104,10 @@ export default {
                            }
                        },
                        ticks: {
+                            sampleSize: 3,
                            maxRotation: 0,
                            autoSkipPadding: 30,
+                            padding: 3,
                        },
                        grid: {
                            color: this.$root.theme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
@@ -197,6 +199,7 @@ export default {
                        borderColor: "#5CDD8B",
                        backgroundColor: "#5CDD8B38",
                        yAxisID: "y",
+                        label: "ping",
                    },
                    {
                        // Bar Chart
@@ -208,6 +211,8 @@ export default {
                        barThickness: "flex",
                        barPercentage: 1,
                        categoryPercentage: 1,
+                        inflateAmount: 0.05,
+                        label: "status",
                    },
                ],
            };
--- a/src/components/notifications/Opsgenie.vue
+++ b/src/components/notifications/Opsgenie.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="mb-3">
+        <label for="opsgenie-region" class="form-label">{{ $t("Region") }}<span style="color: red;"><sup>*</sup></span></label>
+        <select id="opsgenie-region" v-model="$parent.notification.opsgenieRegion" class="form-select" required>
+            <option value="us">
+                US (Default)
+            </option>
+            <option value="eu">
+                EU
+            </option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="opsgenie-apikey" class="form-label">{{ $t("API Key") }}<span style="color: red;"><sup>*</sup></span></label>
+        <HiddenInput id="opsgenie-apikey" v-model="$parent.notification.opsgenieApiKey" required="true" autocomplete="false"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="opsgenie-priority" class="form-label">{{ $t("Priority") }}</label>
+        <input id="opsgenie-priority" v-model="$parent.notification.opsgeniePriority" type="number" class="form-control" min="1" max="5" step="1">
+    </div>
+    <div class="form-text">
+        <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
+        <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
+            <a href="https://docs.opsgenie.com/docs/alert-api" target="_blank">https://docs.opsgenie.com/docs/alert-api</a>
+        </i18n-t>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>
--- a/src/components/notifications/SMTP.vue
+++ b/src/components/notifications/SMTP.vue
@@ -97,7 +97,6 @@
                (leave blank for default one)<br />
                {{NAME}}: Service Name<br />
                {{HOSTNAME_OR_URL}}: Hostname or URL<br />
-                {{URL}}: URL<br />
                {{STATUS}}: Status<br />
            </div>
        </div>
--- a/src/components/notifications/Twilio.vue
+++ b/src/components/notifications/Twilio.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="mb-3">
+        <label for="twilio-account-sid" class="form-label">{{ $t("Account SID") }}</label>
+        <input id="twilio-account-sid" v-model="$parent.notification.twilioAccountSID" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-auth-token" class="form-label">{{ $t("Auth Token") }}</label>
+        <input id="twilio-auth-token" v-model="$parent.notification.twilioAuthToken" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-from-number" class="form-label">{{ $t("From Number") }}</label>
+        <input id="twilio-from-number" v-model="$parent.notification.twilioFromNumber" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="twilio-to-number" class="form-label">{{ $t("To Number") }}</label>
+        <input id="twilio-to-number" v-model="$parent.notification.twilioToNumber" type="text" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+            <a href="https://www.twilio.com/docs/sms" target="_blank">https://www.twilio.com/docs/sms</a>
+        </i18n-t>
+    </div>
+</template>
--- a/src/components/notifications/index.js
+++ b/src/components/notifications/index.js
@@ -21,6 +21,7 @@ import Mattermost from "./Mattermost.vue";
 import Ntfy from "./Ntfy.vue";
 import Octopush from "./Octopush.vue";
 import OneBot from "./OneBot.vue";
+import Opsgenie from "./Opsgenie.vue";
 import PagerDuty from "./PagerDuty.vue";
 import PagerTree from "./PagerTree.vue";
 import PromoSMS from "./PromoSMS.vue";
@@ -41,6 +42,7 @@ import STMP from "./SMTP.vue";
 import Teams from "./Teams.vue";
 import TechulusPush from "./TechulusPush.vue";
 import Telegram from "./Telegram.vue";
+import Twilio from "./Twilio.vue";
 import Webhook from "./Webhook.vue";
 import WeCom from "./WeCom.vue";
 import GoAlert from "./GoAlert.vue";
@@ -76,6 +78,7 @@ const NotificationFormList = {
    "ntfy": Ntfy,
    "octopush": Octopush,
    "OneBot": OneBot,
+    "Opsgenie": Opsgenie,
    "PagerDuty": PagerDuty,
    "PagerTree": PagerTree,
    "promosms": PromoSMS,
@@ -95,6 +98,7 @@ const NotificationFormList = {
    "stackfield": Stackfield,
    "teams": Teams,
    "telegram": Telegram,
+    "twilio": Twilio,
    "Splunk": Splunk,
    "webhook": Webhook,
    "WeCom": WeCom,