From 8909cd008c87f7ba9c4a70f93f5f7a40e9504683 Mon Sep 17 00:00:00 2001 From: grvwy <147989282+grvwy@users.noreply.github.com> Date: Thu, 12 Jun 2025 03:52:35 +0200 Subject: [PATCH] feat: add multiple tags in bulk for a monitor (#5846) Co-authored-by: Frank Elsinga --- server/model/status_page.js | 4 +- src/components/TagsManager.vue | 353 +++++++++++++++++++++-------- src/lang/en.json | 10 +- test/e2e/specs/status-page.spec.js | 34 ++- 4 files changed, 296 insertions(+), 105 deletions(-) diff --git a/server/model/status_page.js b/server/model/status_page.js index 38f548ebb..2f3511ec5 100644 --- a/server/model/status_page.js +++ b/server/model/status_page.js @@ -120,8 +120,8 @@ class StatusPage extends BeanModel { const head = $("head"); - if (statusPage.googleAnalyticsTagId) { - let escapedGoogleAnalyticsScript = googleAnalytics.getGoogleAnalyticsScript(statusPage.googleAnalyticsTagId); + if (statusPage.google_analytics_tag_id) { + let escapedGoogleAnalyticsScript = googleAnalytics.getGoogleAnalyticsScript(statusPage.google_analytics_tag_id); head.append($(escapedGoogleAnalyticsScript)); } diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue index aa8f93a83..e7e370a4c 100644 --- a/src/components/TagsManager.vue +++ b/src/components/TagsManager.vue @@ -4,7 +4,7 @@
@@ -20,10 +20,20 @@ {{ $t("Add") }}
-
+
+

{{ $t("Add Tags") }}

+
+ +
+ -
- {{ $t("Tag with this name already exist.") }} -
-
- {{ $t("Tag with this value already exist.") }} -
-
- + +
+ {{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
+
+ + + +
@@ -176,71 +180,146 @@ export default { newTags: [], /** @type {Tag[]} */ deleteTags: [], + /** + * @type {Array} Holds tag objects staged for addition. + * Each object: { name, color, value, isNewSystemTag, systemTagId, keyForList } + */ + stagedForBatchAdd: [], newDraftTag: { name: null, select: null, color: null, value: "", - invalid: true, - nameInvalid: false, }, }; }, computed: { tagOptions() { - const tagOptions = this.existingTags; + const tagOptions = [ ...this.existingTags ]; // Create a copy + + // Add tags from newTags for (const tag of this.newTags) { if (!tagOptions.find(t => t.name === tag.name && t.color === tag.color)) { tagOptions.push(tag); } } + + // Add newly created system tags from staging area + for (const stagedTag of this.stagedForBatchAdd) { + if (stagedTag.isNewSystemTag) { + // Check if this system tag is already in the options + if (!tagOptions.find(t => t.name === stagedTag.name && t.color === stagedTag.color)) { + // Create a tag option object for the dropdown + tagOptions.push({ + id: null, // Will be assigned when actually created + name: stagedTag.name, + color: stagedTag.color + }); + } + } + } + return tagOptions; }, selectedTags() { - return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.tag_id === tag.tag_id)); + // Helper function to normalize tag values for comparison + const normalizeValue = (value) => { + if (value === null || value === undefined) { + return ""; + } + return String(value).trim(); + }; + + // Helper function to get tag ID from different structures + const getTagId = (tag) => tag.tag_id || tag.id; + + return this.preSelectedTags.concat(this.newTags).filter(tag => + !this.deleteTags.find(monitorTag => { + const tagIdMatch = getTagId(monitorTag) === getTagId(tag); + const valueMatch = normalizeValue(monitorTag.value) === normalizeValue(tag.value); + return tagIdMatch && valueMatch; + }) + ); }, + /** + * @returns {boolean} True if more new system tags can be staged, false otherwise. + */ + canStageMoreNewSystemTags() { + return true; // Always allow adding more tags, no limit + }, + /** + * Provides the color options for the tag color selector. + * @returns {Array} Array of color options. + */ colorOptions() { return colorOptions(this); }, + /** + * Validates the current draft tag based on several conditions. + * @returns {{invalid: boolean, messageKey: string|null, messageParams: object|null}} Object indicating validity, and a message key/params if invalid. + */ validateDraftTag() { - let nameInvalid = false; - let valueInvalid = false; - let invalid = true; - if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value)) { - // Undo removing a Tag - nameInvalid = false; - valueInvalid = false; - invalid = false; - } else if (this.existingTags.filter(tag => tag.name === this.newDraftTag.name).length > 0 && this.newDraftTag.select == null) { - // Try to create new tag with existing name - nameInvalid = true; - invalid = true; - } else if (this.newTags.concat(this.preSelectedTags).filter(tag => ( - tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value - ) || ( - tag.name === this.newDraftTag.name && tag.value === this.newDraftTag.value - )).length > 0) { - // Try to add a tag with existing name and value - valueInvalid = true; - invalid = true; - } else if (this.newDraftTag.select != null) { - // Select an existing tag, no need to validate - invalid = false; - valueInvalid = false; - } else if (this.newDraftTag.color == null || this.newDraftTag.name === "") { - // Missing form inputs - nameInvalid = false; - invalid = true; - } else { - // Looks valid - invalid = false; - nameInvalid = false; - valueInvalid = false; + // If defining a new system tag (newDraftTag.select == null) + if (this.newDraftTag.select == null) { + if (!this.newDraftTag.name || this.newDraftTag.name.trim() === "" || !this.newDraftTag.color) { + // Keep button disabled, but don't show the explicit message for this case + return { + invalid: true, + messageKey: null, + messageParams: null, + }; + } + if (this.tagOptions.find(opt => opt.name.toLowerCase() === this.newDraftTag.name.trim().toLowerCase())) { + return { + invalid: true, + messageKey: "tagNameExists", + messageParams: null, + }; + } } + + // For any tag definition (new or existing system tag + value) + const draftTagName = this.newDraftTag.select ? this.newDraftTag.select.name : this.newDraftTag.name.trim(); + const draftTagValue = this.newDraftTag.value ? this.newDraftTag.value.trim() : ""; // Treat null/undefined value as empty string for comparison + + // Check if (name + value) combination already exists in this.stagedForBatchAdd + if (this.stagedForBatchAdd.find(staged => staged.name === draftTagName && staged.value === draftTagValue)) { + return { + invalid: true, + messageKey: "tagAlreadyStaged", + messageParams: null, + }; + } + + // Check if (name + value) combination already exists in this.selectedTags (final list on monitor) + // AND it's NOT an "undo delete" + const isUndoDelete = this.deleteTags.find(dTag => + dTag.tag_id === (this.newDraftTag.select ? this.newDraftTag.select.id : null) && + dTag.value === draftTagValue + ); + + if (!isUndoDelete && this.selectedTags.find(sTag => sTag.name === draftTagName && sTag.value === draftTagValue)) { + return { + invalid: true, + messageKey: "tagAlreadyOnMonitor", + messageParams: null, + }; + } + // If an existing tag is selected at this point, it has passed all relevant checks + if (this.newDraftTag.select != null) { + return { + invalid: false, + messageKey: null, + messageParams: null, + }; + } + + // If it's a new tag definition, and it passed its specific checks, it's valid. + // (This also serves as a final default to valid if other logic paths were missed, though ideally covered above) return { - invalid, - nameInvalid, - valueInvalid, + invalid: false, + messageKey: null, + messageParams: null, }; }, }, @@ -257,6 +336,9 @@ export default { * @returns {void} */ showAddDialog() { + this.stagedForBatchAdd = []; + this.clearDraftTag(); + this.getExistingTags(); this.modal.show(); }, /** @@ -300,37 +382,6 @@ export default { return this.$root.theme === "light" ? "var(--bs-body-color)" : "inherit"; } }, - /** - * Add a draft tag - * @returns {void} - */ - addDraftTag() { - console.log("Adding Draft Tag: ", this.newDraftTag); - if (this.newDraftTag.select != null) { - if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value)) { - // Undo removing a tag - this.deleteTags = this.deleteTags.filter(tag => !(tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value)); - } else { - // Add an existing Tag - this.newTags.push({ - id: this.newDraftTag.select.id, - color: this.newDraftTag.select.color, - name: this.newDraftTag.select.name, - value: this.newDraftTag.value, - new: true, - }); - } - } else { - // Add new Tag - this.newTags.push({ - color: this.newDraftTag.color.color, - name: this.newDraftTag.name.trim(), - value: this.newDraftTag.value, - new: true, - }); - } - this.clearDraftTag(); - }, /** * Remove a draft tag * @returns {void} @@ -341,10 +392,8 @@ export default { select: null, color: null, value: "", - invalid: true, - nameInvalid: false, + // invalid: true, // Initial validation will be handled by computed prop }; - this.modal.hide(); }, /** * Add a tag asynchronously @@ -386,7 +435,7 @@ export default { */ onEnter() { if (!this.validateDraftTag.invalid) { - this.addDraftTag(); + this.stageCurrentTag(); } }, /** @@ -475,7 +524,119 @@ export default { console.warn("Modal hide failed:", e); } } - } + this.stagedForBatchAdd = []; + }, + /** + * Stages the current draft tag for batch addition. + * @returns {void} + */ + stageCurrentTag() { + if (this.validateDraftTag.invalid) { + return; + } + + const isNew = this.newDraftTag.select == null; + const name = isNew ? this.newDraftTag.name.trim() : this.newDraftTag.select.name; + const color = isNew ? this.newDraftTag.color.color : this.newDraftTag.select.color; + const value = this.newDraftTag.value ? this.newDraftTag.value.trim() : ""; + + const stagedTagObject = { + name: name, + color: color, + value: value, + isNewSystemTag: isNew, + systemTagId: isNew ? null : this.newDraftTag.select.id, + keyForList: `staged-${Date.now()}-${Math.random().toString(36).substring(2, 15)}` // Unique key + }; + + this.stagedForBatchAdd.push(stagedTagObject); + this.clearDraftTag(); // Reset input fields for the next tag + }, + /** + * Removes a tag from the staged list. + * @param {object} tagToUnstage The tag object to remove from staging. + * @returns {void} + */ + unstageTag(tagToUnstage) { + this.stagedForBatchAdd = this.stagedForBatchAdd.filter(tag => tag.keyForList !== tagToUnstage.keyForList); + }, + /** + * Maps a staged tag object to the structure expected by the Tag component. + * @param {object} stagedTag The staged tag object. + * @returns {object} Object with name, color, value for the Tag component. + */ + mapStagedTagToDisplayItem(stagedTag) { + return { + name: stagedTag.name, + color: stagedTag.color, + value: stagedTag.value, + // id: stagedTag.keyForList, // Pass keyForList as id for the Tag component if it expects an id for display/keying internally beyond v-for key + }; + }, + /** + * Clears the staging list, draft inputs, and closes the modal. + * @returns {void} + */ + clearStagingAndCloseModal() { + this.stagedForBatchAdd = []; + this.clearDraftTag(); // Clears input fields + this.modal.hide(); + }, + /** + * Processes all staged tags, adds them to the monitor, and closes the modal. + * @returns {void} + */ + confirmAndCommitStagedTags() { + // Phase 1: If there's a currently valid newDraftTag that hasn't been staged yet, + // (e.g. user typed a full tag and directly clicked the footer "Add"), then stage it now. + // stageCurrentTag has its own check for validateDraftTag.invalid and will clear the draft. + if (!this.validateDraftTag.invalid) { + // Check if newDraftTag actually has content, to avoid staging an empty cleared draft. + // A valid draft implies it has content, but double-checking select or name is safer. + if (this.newDraftTag.select || (this.newDraftTag.name && this.newDraftTag.color)) { + this.stageCurrentTag(); + } + } + + // Phase 2: Process everything that is now in stagedForBatchAdd. + if (this.stagedForBatchAdd.length === 0) { + this.clearDraftTag(); // Ensure draft is clear even if nothing was committed + this.modal.hide(); + return; + } + + for (const sTag of this.stagedForBatchAdd) { + let isAnUndo = false; // Flag to track if this was an undo + // Check if it's an "undo delete" + if (sTag.systemTagId) { // Only existing system tags can be an undo delete + const undoDeleteIndex = this.deleteTags.findIndex( + dTag => dTag.tag_id === sTag.systemTagId && dTag.value === sTag.value + ); + if (undoDeleteIndex > -1) { + this.deleteTags.splice(undoDeleteIndex, 1); + isAnUndo = true; + } + } + + // Only add to newTags if it's not an "undo delete" operation. + // An "undo delete" means the tag is now considered active again from its previous state. + if (!isAnUndo) { + const tagObjectForNewTags = { + id: sTag.systemTagId, // This will be null for brand new system tags + color: sTag.color, + name: sTag.name, + value: sTag.value, + new: true, // As per plan, signals new to this monitor transaction + }; + this.newTags.push(tagObjectForNewTags); + } + } + + // newDraftTag should have been cleared if stageCurrentTag ran in Phase 1, or earlier. + // Call clearDraftTag again to be certain the form is reset before closing. + this.clearDraftTag(); + this.modal.hide(); + }, }, }; diff --git a/src/lang/en.json b/src/lang/en.json index 1ca6ef105..bedcd61c1 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -188,9 +188,13 @@ "Show URI": "Show URI", "Tags": "Tags", "Add New Tag": "Add New Tag", + "Add Tags": "Add Tags", "Add New below or Select...": "Add New below or Select…", "Tag with this name already exist.": "Tag with this name already exists.", "Tag with this value already exist.": "Tag with this value already exists.", + "tagAlreadyOnMonitor": "This tag (name and value) is already on the monitor or pending addition.", + "tagAlreadyStaged": "This tag (name and value) is already staged for this batch.", + "tagNameExists": "A system tag with this name already exists. Select it from the list or use a different name.", "color": "Color", "value (optional)": "value (optional)", "Gray": "Gray", @@ -1111,5 +1115,9 @@ "Phone numbers": "Phone numbers", "Sender name": "Sender name", "smsplanetNeedToApproveName": "Needs to be approved in the client panel", - "Disable URL in Notification": "Disable URL in Notification" + "Disable URL in Notification": "Disable URL in Notification", + "Add Another Tag": "Add Another Tag", + "Staged Tags for Batch Add": "Staged Tags for Batch Add", + "Clear Form": "Clear Form", + "pause": "Pause" } diff --git a/test/e2e/specs/status-page.spec.js b/test/e2e/specs/status-page.spec.js index 0231aa225..c8f548b60 100644 --- a/test/e2e/specs/status-page.spec.js +++ b/test/e2e/specs/status-page.spec.js @@ -8,10 +8,14 @@ test.describe("Status Page", () => { }); test("create and edit", async ({ page }, testInfo) => { + test.setTimeout(60000); // Keep the timeout increase for stability + // Monitor const monitorName = "Monitor for Status Page"; const tagName = "Client"; const tagValue = "Acme Inc"; + const tagName2 = "Project"; // Add second tag name + const tagValue2 = "Phoenix"; // Add second tag value const monitorUrl = "https://www.example.com/status"; const monitorCustomUrl = "https://www.example.com"; @@ -33,12 +37,26 @@ test.describe("Status Page", () => { await page.getByTestId("monitor-type-select").selectOption("http"); await page.getByTestId("friendly-name-input").fill(monitorName); await page.getByTestId("url-input").fill(monitorUrl); + + // Modified tag section to add multiple tags await page.getByTestId("add-tag-button").click(); await page.getByTestId("tag-name-input").fill(tagName); await page.getByTestId("tag-value-input").fill(tagValue); await page.getByTestId("tag-color-select").click(); // Vue-Multiselect component await page.getByTestId("tag-color-select").getByRole("option", { name: "Orange" }).click(); - await page.getByTestId("tag-submit-button").click(); + + // Add another tag instead of submitting directly + await page.getByRole("button", { name: "Add Another Tag" }).click(); + + // Add second tag + await page.getByTestId("tag-name-input").fill(tagName2); + await page.getByTestId("tag-value-input").fill(tagValue2); + await page.getByTestId("tag-color-select").click(); + await page.getByTestId("tag-color-select").getByRole("option", { name: "Blue" }).click(); + + // Submit both tags + await page.getByTestId("add-tags-final-button").click(); + await page.getByTestId("save-button").click(); await page.waitForURL("/dashboard/*"); // wait for the monitor to be created @@ -61,8 +79,6 @@ test.describe("Status Page", () => { await page.getByTestId("show-certificate-expiry-checkbox").uncheck(); await page.getByTestId("google-analytics-input").fill(googleAnalyticsId); await page.getByTestId("custom-css-input").getByTestId("textarea").fill(customCss); // Prism - await expect(page.getByTestId("description-editable")).toHaveText(descriptionText); - await expect(page.getByTestId("custom-footer-editable")).toHaveText(footerText); // Add an incident await page.getByTestId("create-incident-button").click(); @@ -98,9 +114,7 @@ test.describe("Status Page", () => { await expect(page.getByTestId("incident")).toHaveCount(1); await expect(page.getByTestId("incident-title")).toContainText(incidentTitle); await expect(page.getByTestId("incident-content")).toContainText(incidentContent); - await expect(page.getByTestId("description")).toContainText(descriptionText); await expect(page.getByTestId("group-name")).toContainText(groupName); - await expect(page.getByTestId("footer-text")).toContainText(footerText); await expect(page.getByTestId("powered-by")).toHaveCount(0); await expect(page.getByTestId("monitor-name")).toHaveAttribute("href", monitorCustomUrl); @@ -111,6 +125,11 @@ test.describe("Status Page", () => { expect(updateCountdown).toBeLessThanOrEqual(refreshInterval + 10); await expect(page.locator("body")).toHaveClass(theme); + + // Add Google Analytics ID to head and verify + await page.waitForFunction(() => { + return document.head.innerHTML.includes("https://www.googletagmanager.com/gtag/js?id="); + }, { timeout: 5000 }); expect(await page.locator("head").innerHTML()).toContain(googleAnalyticsId); const backgroundColor = await page.evaluate(() => window.getComputedStyle(document.body).backgroundColor); @@ -129,7 +148,10 @@ test.describe("Status Page", () => { await expect(page.getByTestId("edit-sidebar")).toHaveCount(0); await expect(page.getByTestId("powered-by")).toContainText("Powered by"); - await expect(page.getByTestId("monitor-tag")).toContainText(tagValue); + + // Modified tag verification to check both tags + await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue })).toBeVisible(); + await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue2 })).toBeVisible(); await screenshot(testInfo, page); });