mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-02-25 13:05:55 +00:00
Merge remote-tracking branch 'origin/master' into add-xml-support-to-http-monitors
# Conflicts: # src/languages/en.js
This commit is contained in:
Berkay Bayram
commit
9a68e39182
23 changed files with 725 additions and 65 deletions
18
.github/workflows/auto-test.yml
vendored
18
.github/workflows/auto-test.yml
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
10
config/cypress.frontend.config.js
Normal file
10
config/cypress.frontend.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
const { defineConfig } = require("cypress");
|
||||
|
||||
module.exports = defineConfig({
|
||||
e2e: {
|
||||
supportFile: false,
|
||||
specPattern: [
|
||||
"test/cypress/unit/**/*.js"
|
||||
],
|
||||
}
|
||||
});
|
||||
|
|
@ -8,9 +8,9 @@ ARG TARGETPLATFORM
|
|||
COPY ./extra/ ./extra/
|
||||
|
||||
# Compile healthcheck.go
|
||||
RUN apt update
|
||||
RUN apt --yes --no-install-recommends install curl
|
||||
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash
|
||||
RUN apt --yes --no-install-recommends install nodejs
|
||||
RUN node -v
|
||||
RUN node ./extra/build-healthcheck.js $TARGETPLATFORM
|
||||
RUN apt update && \
|
||||
apt --yes --no-install-recommends install curl && \
|
||||
curl -sL https://deb.nodesource.com/setup_18.x | bash && \
|
||||
apt --yes --no-install-recommends install nodejs && \
|
||||
node ./extra/build-healthcheck.js $TARGETPLATFORM && \
|
||||
apt --yes remove nodejs
|
||||
|
|
|
|||
|
|
@ -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 && \
|
||||
chmod +x /app/extra/entrypoint.sh
|
||||
RUN chmod +x /app/extra/entrypoint.sh
|
||||
|
||||
############################################
|
||||
# ⭐ Main Image
|
||||
|
|
|
|||
|
|
@ -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 && \
|
||||
chmod +x /app/extra/entrypoint.sh
|
||||
|
||||
RUN chmod +x /app/extra/entrypoint.sh
|
||||
|
||||
FROM louislam/uptime-kuma:base-alpine AS release
|
||||
WORKDIR /app
|
||||
|
|
|
|||
50
package-lock.json
generated
50
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
emits: [ "added" ],
|
||||
data() {
|
||||
return {
|
||||
model: null,
|
||||
modal: null,
|
||||
processing: false,
|
||||
id: null,
|
||||
connectionTypes: [ "socket", "tcp" ],
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
|
|
|
|||
376
src/components/TagEditDialog.vue
Normal file
376
src/components/TagEditDialog.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 [
|
||||
{ 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" },
|
||||
];
|
||||
return colorOptions(this);
|
||||
},
|
||||
validateDraftTag() {
|
||||
let nameInvalid = false;
|
||||
|
|
|
|||
171
src/components/settings/Tags.vue
Normal file
171
src/components/settings/Tags.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
];
|
||||
}
|
||||
|
|
|
|||
44
test/cypress/unit/i18n.spec.js
Normal file
44
test/cypress/unit/i18n.spec.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue