Synthetic for status.vendor.com

[ckumlien]

My company likes monitor for problems to generate a ServiceNow incident when some of our major vendors report issues on their status page.  Sometimes I find it best to monitor the vendor provided status app.  Two such apps I have struggled with are status.okta.com and status.docusign.com.  I'm not very skilled with JS or even HTML for that matter, however If I had some simplified non-fancy examples, I think it would significantly help me.  My preference would be to monitor these using the far less expensive http monitor vs a browser monitor.  I would prefer to stay away from JS if at all possible.  

Looking at status.okta.com, I notice that the menu driven system uses AJAX to call JS to bring in the values dynamically.  I'm pretty sure that one is way over my head.  The docusign one seems like it might be a good starting point.  I'm trying to monitor for the current status of NA2 on status.docusign.  I have found references to it from a get response, but I just don't know exactly what I am looking for and how I would build a synthetic http monitor to fail if no green checkmark.  

If it is not to much to ask someone, I would like to ask how to monitor the NA2 current status on status.docusign.com?

[Fin_Ubels]

Something you could try and do instead of specifically monitoring that object on the page is monitor the response from endpoints such as na2.docusign.net and if you can find specific endpoints for okta you could monitor those too. I'm not sure if this would show the same availability as monitoring the status pages but if you can't work out the more complex method then its worth a shot! Monitoring specific endpoints will also give you response time metrics so you can see if there are things like response time degradation and not just downtime.

[Peter_Ralston · Accepted solution]

Hi  here is an example of a monitor for a status page, where we validate for 'operational' status message and the individual components (screen images) that could indicate a failure across the regions. 

{
    "configuration": {
        "chromiumStartupFlags": {
            "disable-web-security": false
        },
        "device": {
            "orientation": "landscape",
            "deviceName": "Desktop"
        }
    },
    "type": "availability",
    "version": "1.0",
    "events": [{
        "type": "navigate",
        "wait": {
            "waitFor": "page_complete"
        },
        "description": "Loading of \"https://status.pexa.com.au/#\"",
        "url": "https://status.pexa.com.au/#",
        "validate": [{
            "type": "text_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "All Systems Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(1)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(2)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(3)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(4)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(5)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(1) > div.child-components-container > div:nth-child(6)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(1)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(2)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(3) "
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(4)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(5)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(2) > div.child-components-container > div:nth-child(6)"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(3) > div"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }, {
            "target": {
                "locators": [{
                    "type": "css",
                    "value": "body > div.layout-content.status.status-index.starter > div.container > div.new-components-section > div.components-section.font-regular > div.components-container.one-column > div:nth-child(4) > div"
                }]
            },
            "type": "element_match",
            "failIfFound": false,
            "isRegex": false,
            "match": "Operational"
        }]
    }]
}

I don't think it's to different to what you want. What you can do is inspect the images and use the css selector for these as validation points; similar to the below.   Pretty much the image label changes when there is an issue, so if it changes the label won't match and you get a failure. Also you can validate on the words 'System Operational' which would change if there is an issue. 

Hope this helps.

[techean]

I believe @Peter_Ralston  has answered most of it. If you are managing the code, you can create extra element, or better, global JS variable which will provide value for you. 

Dynatrace documentations helped me lot to understand these implementations Configure browser monitors | Dynatrace Docs

Browser clickpath events | Dynatrace Docs