nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

can we change the name of status of component on statuspage?

Naveen Mishra_hj5lur

I have a component name "xyz" and it has 5 statuses Operational, Partial Outage, Degraded Performance, Major Outage, Under Maintenance and I want to only change the name of "partial outage" to "degraded performance new". Is it possible to change the name of the existing status of any component on the statuspage?

Accepted answers

Howard Nedd

Hi Naveen,

Yes you can. You can customize the names of the different component statuses. For example, you can change "Operational" to "Everything's OK!"

$(function() {

var operationalText = "Operational"

var degradedText = "Degraded Performance"

var partialText = "Partial Outage"

var majorText = "Major Outage"

var newText = function(str) {

if (str.indexOf('Operational') != -1) {

return str.replace('Operational', operationalText);

}

if (str.indexOf('Degraded Performance') != -1) {

return str.replace('Degraded Performance', degradedText);

}

if (str.indexOf('Partial Outage') != -1) {

return str.replace('Partial Outage', partialText);

}

if (str.indexOf('Major Outage') != -1) {

return str.replace('Major Outage', majorText);

}

$('.legend-item').each(function() {

var $this = $(this);

var $html = $this.html();

$this.html(newText($html));

});

$('.component-inner-container .component-status').each(function() {

var $this = $(this);

var $html = $this.html();

$this.html(newText($html));

});

</script>

Hope this helps.

Regards,
Howard

All comments

Howard Nedd

Hi Naveen,

Yes you can. You can customize the names of the different component statuses. For example, you can change "Operational" to "Everything's OK!"

$(function() {

var operationalText = "Operational"

var degradedText = "Degraded Performance"

var partialText = "Partial Outage"

var majorText = "Major Outage"

var newText = function(str) {

if (str.indexOf('Operational') != -1) {

return str.replace('Operational', operationalText);

}

if (str.indexOf('Degraded Performance') != -1) {

return str.replace('Degraded Performance', degradedText);

}

if (str.indexOf('Partial Outage') != -1) {

return str.replace('Partial Outage', partialText);

}

if (str.indexOf('Major Outage') != -1) {

return str.replace('Major Outage', majorText);

}

$('.legend-item').each(function() {

var $this = $(this);

var $html = $this.html();

$this.html(newText($html));

});

$('.component-inner-container .component-status').each(function() {

var $this = $(this);

var $html = $this.html();

$this.html(newText($html));

});

</script>

Hope this helps.

Regards,
Howard

Naveen Mishra_hj5lur

hey @Howard Nedd thanks for the quick response, but I am a beginner on statuspage, Can you please elaborate on it like where I can find the "Custom Footer section" or do I need to write some script and use the code you provided.
any help will be appreciable.

Howard Nedd_71st1o

Hey @Naveen Mishra ,

Your welcome. So let me describes the steps to show you how to do it.

Go to: https://manage.statuspage.io/
Go to Your Page:
Go to Customize page and emails
click on Customize HTML & CSS
Add the code I have given to you in my prior message in the Custom Footer HTML , adjust the status names that's between the "....."and Publish your changes

<script>

    $(function() {

        var operationalText = "Operational"

        var degradedText = "Degraded Performance"

        var partialText = "Partial Outage"

        var majorText = "Major Outage"

        var newText = function(str) {

        if (str.indexOf('Operational') != -1) {

            return str.replace('Operational', operationalText);

        }

        if (str.indexOf('Degraded Performance') != -1) {

            return str.replace('Degraded Performance', degradedText);

        }

        if (str.indexOf('Partial Outage') != -1) {

            return str.replace('Partial Outage', partialText);

        }

        if (str.indexOf('Major Outage') != -1) {

            return str.replace('Major Outage', majorText);

        }

        }

        $('.legend-item').each(function() {

            var $this = $(this);

            var $html = $this.html();

            $this.html(newText($html));

        });

        $('.component-inner-container .component-status').each(function() {

            var $this = $(this);

            var $html = $this.html();

            $this.html(newText($html));

        });

    });

</script>

I hope this helps.

Regards,
Howard

Howard Nedd_71st1o

Your code goes here:

CMillard

If I have two components listed, how would I change the name of the status for multiple? I've followed the steps above and can change it for all of them, but not each one individually. I'd like component A to be On Time, Slightly Delayed, Major Delayed, and then component B to be Not Ready and Ready.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

devops

statuspage