Merge remote-tracking branch 'origin/master' into add-xml-support-to-http-monitors

# Conflicts:
#	src/languages/en.js

.github/workflows/auto-test.yml

@@ -18,7 +18,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, ubuntu-latest, windows-latest]
-        node: [ 14, 16, 17, 18 ]
+        node: [ 14, 16, 18, 19 ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -66,3 +66,19 @@ jobs:
     - run: npm install
     - run: npm run build
     - run: npm run cy:test
+
+  frontend-unit-tests:
+    needs: [ check-linters ]
+    runs-on: ubuntu-latest
+    steps:
+    - run: git config --global core.autocrlf false  # Mainly for Windows
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js 14
+      uses: actions/setup-node@v3
+      with:
+        node-version: 14
+        cache: 'npm'
+    - run: npm install
+    - run: npm run build
+    - run: npm run cy:run:unit

README.md

@@ -7,9 +7,9 @@
     <img src="./public/icon.svg" width="128" alt="" />
 </div>
 
-It is a self-hosted monitoring tool like "Uptime Robot".
+Uptime Kuma is an easy-to-use self-hosted monitoring tool.
 
-<img src="https://uptime.kuma.pet/img/dark.jpg" width="700" alt="" />
+<img src="https://user-images.githubusercontent.com/1336778/212262296-e6205815-ad62-488c-83ec-a5b0d0689f7c.jpg" width="700" alt="" />
 
 ## 🥔 Live Demo
 

config/cypress.frontend.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+    e2e: {
+        supportFile: false,
+        specPattern: [
+            "test/cypress/unit/**/*.js"
+        ],
+    }
+});

docker/builder-go.dockerfile

@@ -8,9 +8,9 @@ ARG TARGETPLATFORM
 COPY ./extra/ ./extra/
 
 # Compile healthcheck.go
-RUN apt update
+RUN apt update && \
-RUN apt --yes --no-install-recommends install curl
+    apt --yes --no-install-recommends install curl && \
-RUN curl -sL https://deb.nodesource.com/setup_18.x | bash
+    curl -sL https://deb.nodesource.com/setup_18.x | bash && \
-RUN apt --yes --no-install-recommends install nodejs
+    apt --yes --no-install-recommends install nodejs && \
-RUN node -v
+    node ./extra/build-healthcheck.js $TARGETPLATFORM && \
-RUN node ./extra/build-healthcheck.js $TARGETPLATFORM
+    apt --yes remove nodejs

docker/dockerfile

@@ -12,10 +12,13 @@ FROM louislam/uptime-kuma:base-debian AS build
 WORKDIR /app
 
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
+COPY .npmrc .npmrc
+COPY package.json package.json
+COPY package-lock.json package-lock.json
+RUN npm ci --omit=dev
 COPY . .
 COPY --from=build_healthcheck /app/extra/healthcheck /app/extra/healthcheck
-RUN npm ci --production && \
+RUN chmod +x /app/extra/entrypoint.sh
-    chmod +x /app/extra/entrypoint.sh
 
 ############################################
 # ⭐ Main Image

docker/dockerfile-alpine

@@ -3,10 +3,12 @@ WORKDIR /app
 
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
 
+COPY .npmrc .npmrc
+COPY package.json package.json
+COPY package-lock.json package-lock.json
+RUN npm ci --omit=dev
 COPY . .
-RUN npm ci --production && \
+RUN chmod +x /app/extra/entrypoint.sh
-    chmod +x /app/extra/entrypoint.sh
-
 
 FROM louislam/uptime-kuma:base-alpine AS release
 WORKDIR /app

package-lock.json

@@ -1,15 +1,16 @@
 {
     "name": "uptime-kuma",
-    "version": "1.19.3",
+    "version": "1.19.4",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "uptime-kuma",
-            "version": "1.19.3",
+            "version": "1.19.4",
             "license": "MIT",
             "dependencies": {
                 "@grpc/grpc-js": "~1.7.3",
+                "@louislam/ping": "~0.4.2-mod.0",
                 "@louislam/sqlite3": "15.1.2",
                 "args-parser": "~1.3.0",
                 "axios": "~0.27.0",
@@ -48,7 +49,6 @@
                 "password-hash": "~1.2.2",
                 "pg": "~8.8.0",
                 "pg-connection-string": "~2.5.0",
-                "ping": "~0.4.2",
                 "prom-client": "~13.2.0",
                 "prometheus-api-metrics": "~3.2.1",
                 "protobufjs": "~7.1.1",
@@ -3161,6 +3161,19 @@
             "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.1.tgz",
             "integrity": "sha512-oTFmkyv5MhgkHdZhoe5lwRoKW0t4njPvK3g7ODvK/prkoC5bwylKcyQJMsmjvgHBXoy4u5iLnB5yQ7AljouHAA=="
         },
+        "node_modules/@louislam/ping": {
+            "version": "0.4.2-mod.0",
+            "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.0.tgz",
+            "integrity": "sha512-cyHnJHsMkC+sFU32GBzX5SlwdTb+BIBlwsdwsDm+AS9jcS1sz7JPBrdCStqpNkVn5lUUQZ7Ak5DRwlWuwJOYAg==",
+            "dependencies": {
+                "command-exists": "~1.2.9",
+                "q": "1.x",
+                "underscore": "^1.12.0"
+            },
+            "engines": {
+                "node": ">=4.0.0"
+            }
+        },
         "node_modules/@louislam/sqlite3": {
             "version": "15.1.2",
             "resolved": "https://registry.npmjs.org/@louislam/sqlite3/-/sqlite3-15.1.2.tgz",
@@ -13502,18 +13515,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/ping": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/ping/-/ping-0.4.2.tgz",
-            "integrity": "sha512-1uAw0bzHtrPbPo2s6no06oZAzY6KqKclEJR1JRZKIHKXKlPdrz9N0/1MPPB+BbrvMjN3Mk0pcod3bfLNZFRo9w==",
-            "dependencies": {
-                "q": "1.x",
-                "underscore": "^1.12.0"
-            },
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
         "node_modules/pirates": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -19462,6 +19463,16 @@
             "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.5.1.tgz",
             "integrity": "sha512-oTFmkyv5MhgkHdZhoe5lwRoKW0t4njPvK3g7ODvK/prkoC5bwylKcyQJMsmjvgHBXoy4u5iLnB5yQ7AljouHAA=="
         },
+        "@louislam/ping": {
+            "version": "0.4.2-mod.0",
+            "resolved": "https://registry.npmjs.org/@louislam/ping/-/ping-0.4.2-mod.0.tgz",
+            "integrity": "sha512-cyHnJHsMkC+sFU32GBzX5SlwdTb+BIBlwsdwsDm+AS9jcS1sz7JPBrdCStqpNkVn5lUUQZ7Ak5DRwlWuwJOYAg==",
+            "requires": {
+                "command-exists": "~1.2.9",
+                "q": "1.x",
+                "underscore": "^1.12.0"
+            }
+        },
         "@louislam/sqlite3": {
             "version": "15.1.2",
             "resolved": "https://registry.npmjs.org/@louislam/sqlite3/-/sqlite3-15.1.2.tgz",
@@ -27316,15 +27327,6 @@
             "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
             "dev": true
         },
-        "ping": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/ping/-/ping-0.4.2.tgz",
-            "integrity": "sha512-1uAw0bzHtrPbPo2s6no06oZAzY6KqKclEJR1JRZKIHKXKlPdrz9N0/1MPPB+BbrvMjN3Mk0pcod3bfLNZFRo9w==",
-            "requires": {
-                "q": "1.x",
-                "underscore": "^1.12.0"
-            }
-        },
         "pirates": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "uptime-kuma",
-    "version": "1.19.3",
+    "version": "1.19.4",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -39,7 +39,7 @@
         "build-docker-nightly-amd64": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:nightly-amd64 --target nightly . --push --progress plain",
         "build-docker-pr-test": "docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64 -t louislam/uptime-kuma:pr-test --target pr-test . --push",
         "upload-artifacts": "docker buildx build -f docker/dockerfile --platform linux/amd64 -t louislam/uptime-kuma:upload-artifact --build-arg VERSION --build-arg GITHUB_TOKEN --target upload-artifact . --progress plain",
-        "setup": "git checkout 1.19.3 && npm ci --production && npm run download-dist",
+        "setup": "git checkout 1.19.4 && npm ci --production && npm run download-dist",
         "download-dist": "node extra/download-dist.js",
         "mark-as-nightly": "node extra/mark-as-nightly.js",
         "reset-password": "node extra/reset-password.js",
@@ -61,11 +61,13 @@
         "start-pr-test": "node extra/checkout-pr.js && npm install && npm run dev",
         "cy:test": "node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/ --e2e",
         "cy:run": "npx cypress run --browser chrome --headless --config-file ./config/cypress.config.js",
+        "cy:run:unit": "npx cypress run --browser chrome --headless --config-file ./config/cypress.frontend.config.js",
         "cypress-open": "concurrently -k -r \"node test/prepare-test-server.js && node server/server.js --port=3002 --data-dir=./data/test/\" \"cypress open --config-file ./config/cypress.config.js\"",
         "build-healthcheck-armv7": "cross-env GOOS=linux GOARCH=arm GOARM=7 go build -x -o ./extra/healthcheck-armv7 ./extra/healthcheck.go"
     },
     "dependencies": {
         "@grpc/grpc-js": "~1.7.3",
+        "@louislam/ping": "~0.4.2-mod.0",
         "@louislam/sqlite3": "15.1.2",
         "args-parser": "~1.3.0",
         "axios": "~0.27.0",
@@ -104,7 +106,6 @@
         "password-hash": "~1.2.2",
         "pg": "~8.8.0",
         "pg-connection-string": "~2.5.0",
-        "ping": "~0.4.2",
         "prom-client": "~13.2.0",
         "prometheus-api-metrics": "~3.2.1",
         "protobufjs": "~7.1.1",

server/server.js

@@ -942,13 +942,21 @@ let needSetup = false;
             try {
                 checkLogin(socket);
 
-                let bean = await R.findOne("monitor", " id = ? ", [ tag.id ]);
+                let bean = await R.findOne("tag", " id = ? ", [ tag.id ]);
+                if (bean == null) {
+                    callback({
+                        ok: false,
+                        msg: "Tag not found",
+                    });
+                    return;
+                }
                 bean.name = tag.name;
                 bean.color = tag.color;
                 await R.store(bean);
 
                 callback({
                     ok: true,
+                    msg: "Saved",
                     tag: await bean.toJSON(),
                 });
 

server/util-server.js

@@ -1,5 +1,5 @@
 const tcpp = require("tcp-ping");
-const ping = require("ping");
+const ping = require("@louislam/ping");
 const { R } = require("redbean-node");
 const { log, genSecret } = require("../src/util");
 const passwordHash = require("./password-hash");

src/assets/localization.scss

@@ -2,4 +2,8 @@ html[lang='fa'] {
     #app {
         font-family: 'IRANSans', 'Iranian Sans','B Nazanin', 'Tahoma', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
     }
-}
+}
+
+ul.multiselect__content {
+    padding-left: 0 !important;
+}

src/components/DockerHostDialog.vue

@@ -73,7 +73,7 @@ export default {
     emits: [ "added" ],
     data() {
         return {
-            model: null,
+            modal: null,
             processing: false,
             id: null,
             connectionTypes: [ "socket", "tcp" ],

src/components/Tag.vue

@@ -41,7 +41,7 @@ export default {
     },
     computed: {
         displayText() {
-            if (this.item.value === "") {
+            if (this.item.value === "" || this.item.value === undefined) {
                 return this.item.name;
             } else {
                 return `${this.item.name}: ${this.item.value}`;

src/components/TagEditDialog.vue

@@ -0,0 +1,376 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Edit Tag") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="tag-name" class="form-label">{{ $t("Name") }}</label>
+                            <input id="tag-name" v-model="tag.name" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="tag-color" class="form-label">{{ $t("Color") }}</label>
+                            <div class="d-flex">
+                                <div class="col-8 pe-1">
+                                    <vue-multiselect
+                                        v-model="selectedColor"
+                                        :options="colorOptions"
+                                        :multiple="false"
+                                        :searchable="true"
+                                        :placeholder="$t('color')"
+                                        track-by="color"
+                                        label="name"
+                                        select-label=""
+                                        deselect-label=""
+                                    >
+                                        <template #option="{ option }">
+                                            <div
+                                                class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                                style="height: 24px; color: white;"
+                                                :style="{ backgroundColor: option.color + ' !important' }"
+                                            >
+                                                <span>{{ option.name }}</span>
+                                            </div>
+                                        </template>
+                                        <template #singleLabel="{ option }">
+                                            <div
+                                                class="py-1 px-3 rounded d-inline-flex"
+                                                style="height: 24px; color: white;"
+                                                :style="{ backgroundColor: option.color + ' !important' }"
+                                            >
+                                                <span>{{ option.name }}</span>
+                                            </div>
+                                        </template>
+                                    </vue-multiselect>
+                                </div>
+                                <div class="col-4 ps-1">
+                                    <input id="tag-color-hex" v-model="tag.color" type="text" class="form-control">
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="tag-monitors" class="form-label">{{ $tc("Monitor", selectedMonitors.length) }}</label>
+                            <div class="tag-monitors-list">
+                                <router-link v-for="monitor in selectedMonitors" :key="monitor.id" class="d-flex align-items-center justify-content-between text-decoration-none tag-monitors-list-row py-2 px-3" :to="monitorURL(monitor.id)" @click="modal.hide()">
+                                    <span>{{ monitor.name }}</span>
+                                    <button type="button" class="btn-rm-monitor btn btn-outline-danger ms-2 py-1" @click.stop.prevent="removeMonitor(monitor.id)">
+                                        <font-awesome-icon class="" icon="times" />
+                                    </button>
+                                </router-link>
+                            </div>
+                            <div v-if="allMonitorList.length > 0" class="pt-3 px-3">
+                                <label class="form-label">{{ $t("Add a monitor") }}:</label>
+                                <select v-model="selectedAddMonitor" class="form-control">
+                                    <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="tag" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
+        {{ $t("confirmDeleteTagMsg") }}
+    </Confirm>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+import VueMultiselect from "vue-multiselect";
+import { colorOptions } from "../util-frontend";
+import { useToast } from "vue-toastification";
+import { getMonitorRelativeURL } from "../util.ts";
+const toast = useToast();
+
+export default {
+    components: {
+        VueMultiselect,
+        Confirm,
+    },
+    props: {
+        updated: {
+            type: Function,
+            default: () => {},
+        }
+    },
+    data() {
+        return {
+            modal: null,
+            processing: false,
+            selectedColor: {
+                name: null,
+                color: null,
+            },
+            tag: {
+                id: null,
+                name: "",
+                color: "",
+                // Do not set default value here, please scroll to show()
+            },
+            monitors: [],
+            removingMonitor: [],
+            addingMonitor: [],
+            selectedAddMonitor: null,
+        };
+    },
+
+    computed: {
+        colorOptions() {
+            if (!colorOptions(this).find(option => option.color === this.tag.color)) {
+                return colorOptions(this).concat(
+                    {
+                        name: "custom",
+                        color: this.tag.color
+                    });
+            } else {
+                return colorOptions(this);
+            }
+        },
+        selectedMonitors() {
+            return this.monitors
+                .concat(Object.values(this.$root.monitorList).filter(monitor => this.addingMonitor.includes(monitor.id)))
+                .filter(monitor => !this.removingMonitor.includes(monitor.id));
+        },
+        allMonitorList() {
+            return Object.values(this.$root.monitorList).filter(monitor => !this.selectedMonitors.includes(monitor));
+        },
+    },
+
+    watch: {
+        // Set color option to "Custom" when a unknown color is entered
+        "tag.color"(to, from) {
+            if (colorOptions(this).find(x => x.color === to) == null) {
+                this.selectedColor.name = this.$t("Custom");
+                this.selectedColor.color = to;
+            }
+        },
+        selectedColor(to, from) {
+            if (to != null) {
+                this.tag.color = to.color;
+            }
+        },
+        /**
+         * Selected a monitor and add to the list.
+         */
+        selectedAddMonitor(monitor) {
+            if (monitor) {
+                if (this.removingMonitor.includes(monitor.id)) {
+                    this.removingMonitor = this.removingMonitor.filter(id => id !== monitor.id);
+                } else {
+                    this.addingMonitor.push(monitor.id);
+                }
+                this.selectedAddMonitor = null;
+            }
+        },
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+
+    methods: {
+        /**
+         * Show confirmation for deleting a tag
+         */
+        deleteConfirm() {
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Load tag information for display in the edit dialog
+         * @param {Object} tag tag object to edit
+         * @returns {void}
+         */
+        show(tag) {
+            if (tag) {
+                this.selectedColor = this.colorOptions.find(x => x.color === tag.color) ?? {
+                    name: this.$t("Custom"),
+                    color: tag.color
+                };
+                this.tag.id = tag.id;
+                this.tag.name = tag.name;
+                this.tag.color = tag.color;
+                this.monitors = this.monitorsByTag(tag.id);
+                this.removingMonitor = [];
+                this.addingMonitor = [];
+                this.selectedAddMonitor = null;
+            }
+
+            this.modal.show();
+        },
+
+        /**
+         * Submit tag and monitorTag changes to server
+         * @returns {void}
+         */
+        async submit() {
+            this.processing = true;
+            let editResult = true;
+
+            for (let addId of this.addingMonitor) {
+                await this.addMonitorTagAsync(this.tag.id, addId, "").then((res) => {
+                    if (!res.ok) {
+                        toast.error(res.msg);
+                        editResult = false;
+                    }
+                });
+            }
+
+            for (let removeId of this.removingMonitor) {
+                this.monitors.find(monitor => monitor.id === removeId)?.tags.forEach(async (monitorTag) => {
+                    await this.deleteMonitorTagAsync(this.tag.id, removeId, monitorTag.value).then((res) => {
+                        if (!res.ok) {
+                            toast.error(res.msg);
+                            editResult = false;
+                        }
+                    });
+                });
+            }
+
+            this.$root.getSocket().emit("editTag", this.tag, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok && editResult) {
+                    this.updated();
+                    this.modal.hide();
+                }
+            });
+        },
+
+        /**
+         * Delete the editing tag from server
+         * @returns {void}
+         */
+        deleteTag() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteTag", this.tag.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.updated();
+                    this.modal.hide();
+                }
+            });
+        },
+
+        /**
+         * Remove a monitor from the monitors list locally
+         * @param {number} id id of the tag to remove
+         * @returns {void}
+         */
+        removeMonitor(id) {
+            if (this.addingMonitor.includes(id)) {
+                this.addingMonitor = this.addingMonitor.filter(x => x !== id);
+            } else {
+                this.removingMonitor.push(id);
+            }
+        },
+
+        /**
+         * Get monitors which has a specific tag locally
+         * @param {number} tagId id of the tag to filter
+         * @returns {Object[]} list of monitors which has a specific tag
+         */
+        monitorsByTag(tagId) {
+            return Object.values(this.$root.monitorList).filter((monitor) => {
+                return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
+            });
+        },
+
+        /**
+         * Get URL of monitor
+         * @param {number} id ID of monitor
+         * @returns {string} Relative URL of monitor
+         */
+        monitorURL(id) {
+            return getMonitorRelativeURL(id);
+        },
+
+        /**
+         * Add a tag to a monitor asynchronously
+         * @param {number} tagId ID of tag to add
+         * @param {number} monitorId ID of monitor to add tag to
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
+        addMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+        /**
+         * Delete a tag from a monitor asynchronously
+         * @param {number} tagId ID of tag to remove
+         * @param {number} monitorId ID of monitor to remove tag from
+         * @param {string} value Value of tag
+         * @returns {Promise<void>}
+         */
+        deleteMonitorTagAsync(tagId, monitorId, value) {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, value, resolve);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+
+.btn-rm-monitor {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
+.tag-monitors-list {
+    max-height: 40vh;
+    overflow-y: scroll;
+}
+
+.tag-monitors-list .tag-monitors-list-row {
+    cursor: pointer;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+    .dark & {
+        border-bottom: 1px solid $dark-border-color;
+    }
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    .dark &:hover {
+        background-color: $dark-bg2;
+    }
+}
+
+</style>

src/components/TagsManager.vue

@@ -130,6 +130,7 @@
 import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
 import { useToast } from "vue-toastification";
+import { colorOptions } from "../util-frontend";
 import Tag from "../components/Tag.vue";
 const toast = useToast();
 
@@ -176,24 +177,7 @@ export default {
             return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id === tag.id));
         },
         colorOptions() {
-            return [
+            return colorOptions(this);
-                { name: this.$t("Gray"),
-                    color: "#4B5563" },
-                { name: this.$t("Red"),
-                    color: "#DC2626" },
-                { name: this.$t("Orange"),
-                    color: "#D97706" },
-                { name: this.$t("Green"),
-                    color: "#059669" },
-                { name: this.$t("Blue"),
-                    color: "#2563EB" },
-                { name: this.$t("Indigo"),
-                    color: "#4F46E5" },
-                { name: this.$t("Purple"),
-                    color: "#7C3AED" },
-                { name: this.$t("Pink"),
-                    color: "#DB2777" },
-            ];
         },
         validateDraftTag() {
             let nameInvalid = false;

src/components/settings/Tags.vue

@@ -0,0 +1,171 @@
+<template>
+    <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">
+                    <Tag :item="tag" />
+                </div>
+                <div class="col-5 px-1">
+                    <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>
+                    <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>
+                </div>
+            </div>
+        </div>
+
+        <TagEditDialog ref="tagEditDialog" :updated="tagsUpdated" />
+        <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteTag">
+            {{ $t("confirmDeleteTagMsg") }}
+        </Confirm>
+    </div>
+</template>
+
+<script>
+import { useToast } from "vue-toastification";
+import TagEditDialog from "../../components/TagEditDialog.vue";
+import Tag from "../Tag.vue";
+import Confirm from "../Confirm.vue";
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+        TagEditDialog,
+        Tag,
+    },
+
+    data() {
+        return {
+            processing: false,
+            tagsList: null,
+            deletingTag: null,
+        };
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    },
+
+    mounted() {
+        this.getExistingTags();
+    },
+
+    methods: {
+        /**
+         * Reflect tag changes in the UI by fetching data. Callback for the edit tag dialog.
+         * @returns {void}
+         */
+        tagsUpdated() {
+            this.getExistingTags();
+            this.$root.getMonitorList();
+        },
+
+        /**
+         * Get list of tags from server
+         * @returns {void}
+         */
+        getExistingTags() {
+            this.processing = true;
+            this.$root.getSocket().emit("getTags", (res) => {
+                this.processing = false;
+                if (res.ok) {
+                    this.tagsList = res.tags;
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        /**
+         * Show confirmation for deleting a tag
+         * @param {number} index index of the tag to delete in the local tagsList
+         * @returns {void}
+         */
+        deleteConfirm(index) {
+            this.deletingTag = this.tagsList[index];
+            this.$refs.confirmDelete.show();
+        },
+
+        /**
+         * Show dialog for editing a tag
+         * @param {number} index index of the tag to edit in the local tagsList
+         * @returns {void}
+         */
+        editTag(index) {
+            this.$refs.tagEditDialog.show(this.tagsList[index]);
+        },
+
+        /**
+         * Delete the tag "deletingTag" from server
+         * @returns {void}
+         */
+        deleteTag() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteTag", this.deletingTag.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.tagsUpdated();
+                }
+            });
+        },
+
+        /**
+         * Get monitors which has a specific tag locally
+         * @param {number} tagId id of the tag to filter
+         * @returns {Object[]} list of monitors which has a specific tag
+         */
+        monitorsByTag(tagId) {
+            return Object.values(this.$root.monitorList).filter((monitor) => {
+                return monitor.tags.find(monitorTag => monitorTag.tag_id === tagId);
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/vars.scss";
+
+.btn-rm-tag {
+    padding-left: 11px;
+    padding-right: 11px;
+}
+
+.tags-list .tags-list-row {
+    cursor: pointer;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+    .dark & {
+        border-bottom: 1px solid $dark-border-color;
+    }
+
+    &:hover {
+        background-color: $highlight-white;
+    }
+
+    .dark &:hover {
+        background-color: $dark-bg2;
+    }
+}
+
+.tags-list .tags-list-row:last-child {
+    border: none;
+}
+
+</style>

src/languages/cs-CZ.js

@@ -591,7 +591,7 @@ export default {
     "You can divide numbers with": "Čísla můžete dělit pomocí",
     "or": "nebo",
     recurringInterval: "Interval",
-    "Recurring": "Recurring",
+    "Recurring": "Opakující se",
     strategyManual: "Aktivní/Neaktivní Ručně",
     warningTimezone: "Používá se časové pásmo serveru",
     weekdayShortMon: "Po",

src/languages/en.js

@@ -74,6 +74,7 @@ export default {
     Current: "Current",
     Uptime: "Uptime",
     "Cert Exp.": "Cert Exp.",
+    Monitor: "Monitor | Monitors",
     day: "day | days",
     "-day": "-day",
     hour: "hour",
@@ -190,6 +191,7 @@ export default {
     Indigo: "Indigo",
     Purple: "Purple",
     Pink: "Pink",
+    Custom: "Custom",
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
@@ -677,5 +679,6 @@ export default {
     "Specific Monitor Type": "Specific Monitor Type",
     dataRetentionTimeError: "Retention period must be 0 or greater",
     infiniteRetention: "Set to 0 for infinite retention.",
+    confirmDeleteTagMsg: "Are you sure you want to delete this tag? Monitors associated with this tag will not be deleted.",
     "Body Encoding": "Body Encoding",
 };

src/languages/fr-FR.js

@@ -675,4 +675,6 @@ export default {
     "General Monitor Type": "Type de sonde générale",
     "Passive Monitor Type": "Type de sonde passive",
     "Specific Monitor Type": "Type de sonde spécifique",
+    dataRetentionTimeError: "La durée de conservation doit être supérieure ou égale à 0",
+    infiniteRetention: "Définissez la valeur à 0 pour une durée de conservation infinie.",
 };

src/pages/Settings.vue

@@ -95,6 +95,9 @@ export default {
                 "reverse-proxy": {
                     title: this.$t("Reverse Proxy"),
                 },
+                tags: {
+                    title: this.$t("Tags"),
+                },
                 "monitor-history": {
                     title: this.$t("Monitor History"),
                 },

src/router.js

@@ -24,6 +24,7 @@ import Appearance from "./components/settings/Appearance.vue";
 import General from "./components/settings/General.vue";
 const Notifications = () => import("./components/settings/Notifications.vue");
 import ReverseProxy from "./components/settings/ReverseProxy.vue";
+import Tags from "./components/settings/Tags.vue";
 import MonitorHistory from "./components/settings/MonitorHistory.vue";
 const Security = () => import("./components/settings/Security.vue");
 import Proxies from "./components/settings/Proxies.vue";
@@ -95,6 +96,10 @@ const routes = [
                                 path: "reverse-proxy",
                                 component: ReverseProxy,
                             },
+                            {
+                                path: "tags",
+                                component: Tags,
+                            },
                             {
                                 path: "monitor-history",
                                 component: MonitorHistory,

src/util-frontend.js

@@ -78,3 +78,29 @@ export function getResBaseURL() {
         return "";
     }
 }
+
+/**
+ * Get the tag color options
+ * Shared between components
+ * @returns {Object[]}
+ */
+export function colorOptions(self) {
+    return [
+        { name: self.$t("Gray"),
+            color: "#4B5563" },
+        { name: self.$t("Red"),
+            color: "#DC2626" },
+        { name: self.$t("Orange"),
+            color: "#D97706" },
+        { name: self.$t("Green"),
+            color: "#059669" },
+        { name: self.$t("Blue"),
+            color: "#2563EB" },
+        { name: self.$t("Indigo"),
+            color: "#4F46E5" },
+        { name: self.$t("Purple"),
+            color: "#7C3AED" },
+        { name: self.$t("Pink"),
+            color: "#DB2777" },
+    ];
+}

test/cypress/unit/i18n.spec.js

@@ -0,0 +1,44 @@
+import { currentLocale } from "../../../src/i18n";
+
+describe("Test i18n.js", () => {
+
+    it("currentLocale()", () => {
+        const setLanguage = (language) => {
+            Object.defineProperty(window.navigator, 'language', { 
+                value: language, 
+                writable: true 
+            });
+        }
+        setLanguage('en-EN');
+
+        expect(currentLocale()).equal("en");
+
+        setLanguage('zh-HK');
+        expect(currentLocale()).equal("zh-HK");
+
+        // Note that in Safari on iOS prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc.
+        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
+        setLanguage('zh-hk');
+        expect(currentLocale()).equal("en");
+
+        setLanguage('en-US');
+        expect(currentLocale()).equal("en");
+
+        setLanguage('ja-ZZ');
+        expect(currentLocale()).equal("ja");
+
+        setLanguage('zz-ZZ');
+        expect(currentLocale()).equal("en");
+
+        setLanguage('zz-ZZ');
+        expect(currentLocale()).equal("en");
+
+        setLanguage('en');
+        localStorage.locale = "en";
+        expect(currentLocale()).equal("en");
+
+        localStorage.locale = "zh-HK";
+        expect(currentLocale()).equal("zh-HK");
+    });
+
+});