Merge remote-tracking branch 'origin/master' into ntfy-bearer-authorization

package.json

@@ -143,8 +143,8 @@
         "aedes": "^0.46.3",
         "babel-plugin-rewire": "~1.2.0",
         "bootstrap": "5.1.3",
-        "chart.js": "~3.6.2",
-        "chartjs-adapter-dayjs": "~1.0.0",
+        "chart.js": "~4.2.1",
+        "chartjs-adapter-dayjs-4": "~1.0.4",
         "concurrently": "^7.1.0",
         "core-js": "~3.26.1",
         "cronstrue": "~2.24.0",
@@ -175,7 +175,7 @@
         "vite": "~3.1.0",
         "vite-plugin-compression": "^0.5.1",
         "vue": "~3.2.47",
-        "vue-chart-3": "3.0.9",
+        "vue-chartjs": "~5.2.0",
         "vue-confirm-dialog": "~1.0.2",
         "vue-contenteditable": "~3.0.4",
         "vue-i18n": "~9.2.2",

server/database.js

@@ -417,6 +417,9 @@ class Database {
 
         log.info("db", "Closing the database");
 
+        // Flush WAL to main database
+        await R.exec("PRAGMA wal_checkpoint(TRUNCATE)");
+
         while (true) {
             Database.noReject = true;
             await R.close();

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",
                     },
                 ],
             };

src/components/settings/Tags.vue

@@ -1,21 +1,18 @@
 <template>
     <div class="my-4">
-        <div class="mx-4 pt-1 my-3">
+        <div class="mx-0 mx-lg-4 pt-1 mb-4">
             <button class="btn btn-primary" @click.stop="addTag"><font-awesome-icon icon="plus" /> {{ $t("Add New Tag") }}</button>
         </div>
 
         <div class="tags-list my-3">
-            <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
-                <div class="col-5 ps-1">
+            <div v-for="(tag, index) in tagsList" :key="tag.id" class="d-flex align-items-center mx-0 mx-lg-4 py-1 tags-list-row" :disabled="processing" @click="editTag(index)">
+                <div class="col-10 col-sm-5">
                     <Tag :item="tag" />
                 </div>
-                <div class="col-5 px-1">
+                <div class="col-5 px-1 d-none d-sm-block">
                     <div>{{ monitorsByTag(tag.id).length }} {{ $tc("Monitor", monitorsByTag(tag.id).length) }}</div>
                 </div>
-                <div class="col-2 pe-3 d-flex justify-content-end">
-                    <button type="button" class="btn ms-2 py-1">
-                        <font-awesome-icon class="" icon="edit" />
-                    </button>
+                <div class="col-2 pe-2 pe-lg-3 d-flex justify-content-end">
                     <button type="button" class="btn-rm-tag btn btn-outline-danger ms-2 py-1" :disabled="processing" @click.stop="deleteConfirm(index)">
                         <font-awesome-icon class="" icon="trash" />
                     </button>
@@ -156,8 +153,8 @@ export default {
 @import "../../assets/vars.scss";
 
 .btn-rm-tag {
-    padding-left: 11px;
-    padding-right: 11px;
+    padding-left: 9px;
+    padding-right: 9px;
 }
 
 .tags-list .tags-list-row {

src/pages/EditMonitor.vue

@@ -98,7 +98,7 @@
                             <!-- gRPC URL -->
                             <div v-if="monitor.type === 'grpc-keyword' " class="my-3">
                                 <label for="grpc-url" class="form-label">{{ $t("URL") }}</label>
-                                <input id="grpc-url" v-model="monitor.grpcUrl" type="url" class="form-control" pattern="[^\:]+:[0-9]{5}" required>
+                                <input id="grpc-url" v-model="monitor.grpcUrl" type="text" class="form-control" required>
                             </div>
 
                             <!-- Push URL -->