Monitor Slug Implemented

2026-04-06 00:32:12 +02:00 · 2021-03-04 18:41:29 +05:30
parent 07f33ac8ee
commit 7228c05cd8
22 changed files with 6894 additions and 10226 deletions
--- a/backend/backend/api/component.js
+++ b/backend/backend/api/component.js
@@ -337,6 +337,7 @@ router.get(
                    }`,
                    createdAt: elem.createdAt,
                    icon: 'monitor',
+                    slug: elem.slug,
                };
                // add it to the total resources
                totalResources.push(newElement);
--- a/backend/backend/models/monitor.js
+++ b/backend/backend/models/monitor.js
@@ -72,6 +72,7 @@ const monitorSchema = new Schema({
        index: true,
    },
    name: String,
+    slug:String,
    data: Object, //can be URL, IP address, or anything that depends on the type.
    createdById: { type: String, ref: 'User', index: true }, //userId.
    type: {
--- a/backend/backend/services/monitorService.js
+++ b/backend/backend/services/monitorService.js
@@ -149,6 +149,10 @@ module.exports = {
                    if (data.type === 'url') {
                        monitor.siteUrls = [monitor.data.url];
                    }
+                    let name = data.name;
+                    name = slugify(name);
+                    name = `${name}-${generate('1234567890', 8)}`;
+                    monitor.slug = name.toLowerCase();
                    const savedMonitor = await monitor.save();
                    monitor = await _this.findOneBy({ _id: savedMonitor._id });
                    if (data.type === 'manual') {
@@ -184,6 +188,10 @@ module.exports = {

            await this.updateMonitorSlaStat(query);
            if (data) {
+                let name = data.name;
+                name = slugify(name);
+                name = `${name}-${generate('1234567890', 8)}`;
+                data.slug = name.toLowerCase();
                await MonitorModel.findOneAndUpdate(
                    query,
                    { $set: data },
@@ -1359,6 +1367,8 @@ const NotificationService = require('./notificationService');
 const ProjectService = require('./projectService');
 const PaymentService = require('./paymentService');
 const IncidentService = require('./incidentService');
+const generate = require('nanoid/generate');
+const slugify = require('slugify');
 const AlertService = require('./alertService');
 const StatusPageService = require('./statusPageService');
 const ScheduleService = require('./scheduleService');
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/src/components/Dashboard.js
+++ b/dashboard/src/components/Dashboard.js
@@ -49,7 +49,7 @@ export class DashboardApp extends Component {
    }

    componentDidMount() {
-        const { project, match, ready, getProjects } = this.props;
+        const { project, ready, getProjects } = this.props;

        if (
            project.projects &&
@@ -57,7 +57,7 @@ export class DashboardApp extends Component {
            project.projects.projects.length === 0 &&
            !project.projects.requesting
        ) {
-            getProjects(match.params.projectId || null).then(() => {
+            getProjects(this.props.projectId || null).then(() => {
                ready && ready();
            });
        } else {
@@ -364,6 +364,7 @@ DashboardApp.propTypes = {
    location: PropTypes.object.isRequired,
    children: PropTypes.any,
    ready: PropTypes.func,
+    projectId: PropTypes.string,
    currentModal: PropTypes.object,
    closeModal: PropTypes.func,
    showDeleteBtn: PropTypes.bool,
@@ -375,6 +376,7 @@ DashboardApp.propTypes = {
 const mapStateToProps = state => ({
    project: state.project,
    profile: state.profileSettings,
+    projectId: state.project.currentProject && state.project.currentProject._id,
    notification: state.notifications,
    currentModal:
        state.modal.modals && state.modal.modals.length > 0
--- a/dashboard/src/components/alert/AlertChargesList.js
+++ b/dashboard/src/components/alert/AlertChargesList.js
@@ -165,7 +165,7 @@ export class AlertChargesList extends Component {
                                                                    '/monitoring/' +
                                                                    alertCharge
                                                                        .monitorId
-                                                                        ._id
+                                                                        .slug
                                                            );
                                                        }}
                                                        className="Box-root Margin-right--16"
--- a/dashboard/src/components/component/ResourceTabularList.js
+++ b/dashboard/src/components/component/ResourceTabularList.js
@@ -53,6 +53,9 @@ class ResourceTabularList extends Component {
            default:
                break;
        }
+        if(route === 'monitoring')
+        return `${baseUrl}${route}/${componentResource.slug}`;
+        else
        return `${baseUrl}${route}/${componentResource._id}`;
    }
    generateResourceStatus(componentResource) {
--- a/dashboard/src/components/incident/IncidentDeleteBox.js
+++ b/dashboard/src/components/incident/IncidentDeleteBox.js
@@ -25,7 +25,7 @@ export class IncidentDeleteBox extends Component {
            this.props.incident.projectId._id || this.props.incident.projectId;
        const incidentId = this.props.incident._id;
        const componentId = this.props.componentId;
-        const monitorId = this.props.incident.monitorId._id;
+        const monitorSlug = this.props.incident.monitorId.slug;

        const promise = this.props.deleteIncident(projectId, incidentId);
        promise.then(() => {
@@ -39,7 +39,7 @@ export class IncidentDeleteBox extends Component {
                );
            }
            history.push(
-                `/dashboard/project/${this.props.currentProject.slug}/${componentId}/monitoring/${monitorId}`
+                `/dashboard/project/${this.props.currentProject.slug}/${componentId}/monitoring/${monitorSlug}`
            );
        });
        return promise;
--- a/dashboard/src/components/incident/IncidentStatus.js
+++ b/dashboard/src/components/incident/IncidentStatus.js
@@ -763,7 +763,7 @@ export class IncidentStatus extends Component {
                                                                            .props
                                                                            .incident
                                                                            .monitorId
-                                                                            ._id
+                                                                            .slug
                                                                    }
                                                                    id="backToMonitorView"
                                                                >
--- a/dashboard/src/components/monitor/MonitorDetail.js
+++ b/dashboard/src/components/monitor/MonitorDetail.js
@@ -563,7 +563,7 @@ export class MonitorDetail extends Component {
                                            '/' +
                                            componentId +
                                            '/monitoring/' +
-                                            monitor._id
+                                            monitor.slug
                                    );
                                }}
                            >
--- a/dashboard/src/components/monitor/MonitorLighthouseLogsList.js
+++ b/dashboard/src/components/monitor/MonitorLighthouseLogsList.js
@@ -184,7 +184,7 @@ export class MonitorLighthouseLogsList extends Component {
                                                                  this.props
                                                                      .componentId +
                                                                  '/monitoring/' +
-                                                                  monitor._id +
+                                                                  monitor.slug +
                                                                  '/issues/' +
                                                                  log._id
                                                          )
--- a/dashboard/src/components/monitor/MonitorTabularList.js
+++ b/dashboard/src/components/monitor/MonitorTabularList.js
@@ -184,7 +184,7 @@ export class MonitorTabularList extends Component {
                                                        '/' +
                                                        this.props.componentId +
                                                        '/monitoring/' +
-                                                        monitor._id
+                                                        monitor.slug
                                                );
                                            }}
                                        >
--- a/dashboard/src/components/monitor/NewMonitor.js
+++ b/dashboard/src/components/monitor/NewMonitor.js
@@ -607,7 +607,7 @@ class NewMonitor extends Component {
                        );
                    }
                    history.push(
-                        `/dashboard/project/${this.props.currentProject.slug}/${this.props.componentId}/monitoring/${data.data._id}`
+                        `/dashboard/project/${this.props.currentProject.slug}/${this.props.componentId}/monitoring/${data.data.slug}`
                    );
                },
                error => {
--- a/dashboard/src/components/nav/SideNavItem.js
+++ b/dashboard/src/components/nav/SideNavItem.js
@@ -50,7 +50,7 @@ export class SidebarNavItem extends Component {
            .replace(':slug', match.params.slug || (currentProject || {}).slug)
            .replace(':subProjectId', match.params.subProjectId)
            .replace(':componentId', match.params.componentId)
-            .replace(':monitorId', match.params.monitorId)
+            .replace(':monitor', match.params.monitorSlug)
            .replace(':applicationLogId', match.params.applicationLogId)
            .replace(':errorTrackerId', match.params.errorTrackerId);
    };
@@ -65,7 +65,7 @@ export class SidebarNavItem extends Component {
            .replace(/:issueId/, match.params.issueId)
            .replace(/:scheduleId/, match.params.scheduleId)
            .replace(/:incidentId/, match.params.incidentId)
-            .replace(/:monitorId/, match.params.monitorId);
+            .replace(/:monitorSlug/, match.params.monitorSlug);
        const projectSettingsSubRoutes =
            subRoute.title === 'Monitor' ||
            subRoute.title === 'Incident Settings' ||
@@ -108,7 +108,7 @@ export class SidebarNavItem extends Component {
            .replace(':slug', match.params.slug || (currentProject || {}).slug)
            .replace(':subProjectId', match.params.subProjectId)
            .replace(':componentId', match.params.componentId)
-            .replace(':monitorId', match.params.monitorId)
+            .replace(':monitorSlug', match.params.monitorSlug)
            .replace(':applicationLogId', match.params.applicationLogId)
            .replace(':errorTrackerId', match.params.errorTrackerId);
        const isLinkActive =
@@ -163,7 +163,7 @@ export class SidebarNavItem extends Component {
            newPath = newPath.replace(/:issueId/, match.params.issueId);
            newPath = newPath.replace(/:scheduleId/, match.params.scheduleId);
            newPath = newPath.replace(/:incidentId/, match.params.incidentId);
-            newPath = newPath.replace(/:monitorId/, match.params.monitorId);
+            newPath = newPath.replace(/:monitorSlug/, match.params.monitorSlug);
            newPath = newPath.replace(/:componentId/, match.params.componentId);
            newPath = newPath.replace(
                /:applicationLogId/,
--- a/dashboard/src/components/statusPage/DeleteBox.js
+++ b/dashboard/src/components/statusPage/DeleteBox.js
@@ -103,7 +103,7 @@ const mapDispatchToProps = dispatch =>
    bindActionCreators({ deleteStatusPage, openModal, closeModal }, dispatch);

 const mapStateToProps = (state, props) => {
-    const { scheduleId, projectId } = props.match.params;
+    const { scheduleId } = props.match.params;

    //  const status = state.statusPage.statusPages.find(
    //   statusPage => statusPage._id === scheduleId
@@ -113,7 +113,8 @@ const mapStateToProps = (state, props) => {

    return {
        // scheduleName,
-        projectId,
+        projectId:
+            state.project.currentProject && state.project.currentProject._id,
        slug: state.project.currentProject && state.project.currentProject.slug,
        scheduleId,
        isRequesting:
--- a/dashboard/src/pages/MonitorView.js
+++ b/dashboard/src/pages/MonitorView.js
@@ -785,7 +785,7 @@ class MonitorView extends React.Component {

 const mapStateToProps = (state, props) => {
    const scheduleWarning = [];
-    const { componentId, monitorId } = props.match.params;
+    const { componentId, monitorSlug } = props.match.params;
    const schedules = state.schedule.schedules;

    state.schedule.subProjectSchedules.forEach(item => {
@@ -795,7 +795,17 @@ const mapStateToProps = (state, props) => {
            });
        });
    });
-
+    const projectId =
+        state.project.currentProject && state.project.currentProject._id;
+    const monitorCollection = state.monitor.monitorsList.monitors.find(el => {
+        return projectId === el._id;
+    });
+    const currentMonitor =
+        monitorCollection &&
+        monitorCollection.monitors.find(el => {
+            return el.slug === monitorSlug;
+        });
+    const monitorId = currentMonitor && currentMonitor._id;
    let defaultSchedule;
    state.schedule.subProjectSchedules.forEach(item => {
        item.schedules.forEach(item => {
@@ -976,8 +986,7 @@ const mapStateToProps = (state, props) => {
    return {
        defaultSchedule,
        scheduleWarning,
-        projectId:
-            state.project.currentProject && state.project.currentProject._id,
+        projectId,
        monitorId,
        slug: state.project.currentProject && state.project.currentProject.slug,
        componentId,
--- a/dashboard/src/pages/WebsiteMonitorIssues.js
+++ b/dashboard/src/pages/WebsiteMonitorIssues.js
@@ -438,10 +438,21 @@ class WebsiteMonitorIssues extends React.Component {
 }

 const mapStateToProps = (state, props) => {
-    const { componentId, monitorId } = props.match.params;
+    const { componentId, monitorSlug } = props.match.params;
    const component = state.component.componentList.components.map(item => {
        return item.components.find(component => component._id === componentId);
    });
+    const projectId =
+    state.project.currentProject && state.project.currentProject._id;
+const monitorCollection = state.monitor.monitorsList.monitors.find(el => {
+    return projectId === el._id;
+});
+const currentMonitor =
+    monitorCollection &&
+    monitorCollection.monitors.find(el => {
+        return el.slug === monitorSlug;
+    });
+const monitorId = currentMonitor && currentMonitor._id;
    const monitor = state.monitor.monitorsList.monitors
        .map(monitor =>
            monitor.monitors.find(monitor => monitor._id === monitorId)
@@ -452,8 +463,7 @@ const mapStateToProps = (state, props) => {
        component,
        monitor,
        monitorState: state.monitor,
-        projectId:
-            state.project.currentProject && state.project.currentProject._id,
+        projectId,
    };
 };

--- a/dashboard/src/routes.js
+++ b/dashboard/src/routes.js
@@ -80,7 +80,7 @@ export const groups = [
                    {
                        title: 'Monitor View',
                        path:
-                            '/dashboard/project/:slug/:componentId/monitoring/:monitorId',
+                            '/dashboard/project/:slug/:componentId/monitoring/:monitorSlug',
                        icon: 'monitor',
                        visible: true,
                        subRoutes: [],
@@ -92,7 +92,7 @@ export const groups = [
                    {
                        title: 'Website Issues',
                        path:
-                            '/dashboard/project/:slug/:componentId/monitoring/:monitorId/issues/:issueId',
+                            '/dashboard/project/:slug/:componentId/monitoring/:monitorSlug/issues/:issueId',
                        icon: 'info',
                        visible: true,
                        subRoutes: [],
--- a/init-script/package-lock.json
+++ b/init-script/package-lock.json
@@ -10,6 +10,8 @@
            "dependencies": {
                "bcrypt": "^5.0.0",
                "mongodb": "^3.5.2",
+                "nanoid": "^1.3.0",
+                "slugify": "^1.4.7",
                "uuid": "^8.3.2"
            },
            "devDependencies": {
@@ -5620,6 +5622,11 @@
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
        },
+        "node_modules/nanoid": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-1.3.0.tgz",
+            "integrity": "sha512-OP8SoC91Kyjl1sdSTEnM1xYh4gUEOSkUl6wRBUklWOPyfPRbeJbhvdhQYXEjVtZ1LI9amVMkIWQI2nO8O7DL9A=="
+        },
        "node_modules/nanomatch": {
            "version": "1.2.13",
            "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -7090,6 +7097,14 @@
                "node": ">=8"
            }
        },
+        "node_modules/slugify": {
+            "version": "1.4.7",
+            "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.7.tgz",
+            "integrity": "sha512-tf+h5W1IrjNm/9rKKj0JU2MDMruiopx0jjVA5zCdBtcGjfp0+c5rHw/zADLC3IeKlGHtVbHtpfzvYA0OYT+HKg==",
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
        "node_modules/snapdragon": {
            "version": "0.8.2",
            "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -12806,6 +12821,11 @@
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
        },
+        "nanoid": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-1.3.0.tgz",
+            "integrity": "sha512-OP8SoC91Kyjl1sdSTEnM1xYh4gUEOSkUl6wRBUklWOPyfPRbeJbhvdhQYXEjVtZ1LI9amVMkIWQI2nO8O7DL9A=="
+        },
        "nanomatch": {
            "version": "1.2.13",
            "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -13966,6 +13986,11 @@
            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
            "dev": true
        },
+        "slugify": {
+            "version": "1.4.7",
+            "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.7.tgz",
+            "integrity": "sha512-tf+h5W1IrjNm/9rKKj0JU2MDMruiopx0jjVA5zCdBtcGjfp0+c5rHw/zADLC3IeKlGHtVbHtpfzvYA0OYT+HKg=="
+        },
        "snapdragon": {
            "version": "0.8.2",
            "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
--- a/init-script/package.json
+++ b/init-script/package.json
@@ -13,6 +13,8 @@
    "dependencies": {
        "bcrypt": "^5.0.0",
        "mongodb": "^3.5.2",
+        "nanoid": "^1.3.0",
+        "slugify": "^1.4.7",
        "uuid": "^8.3.2"
    },
    "devDependencies": {
--- a/init-script/scripts/3.0.8400.js
+++ b/init-script/scripts/3.0.8400.js
@@ -0,0 +1,23 @@
+const { find, update } = require('../util/db');
+const slugify = require('slugify');
+const generate = require('nanoid/generate');
+const monitorCollection = 'monitors';
+
+async function run() {
+    const monitors = await find(monitorCollection, {
+        deleted: false,
+    });
+    for (let i = 0; i < monitors.length; i++) {
+        let { name } = monitors[i];
+        name = slugify(name);
+        name = `${name}-${generate('1234567890', 8)}`;
+        monitors[i].slug = name.toLowerCase();
+        await update(
+            monitorCollection,
+            { _id: monitors[i]._id },
+            { slug: monitors[i].slug }
+        );
+    }
+    return `Script ran for ${monitors.length} monitors.`;
+}
+module.exports = run;