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

[Naveen Mishra]

 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?   

[Howard Nedd · Accepted solution]

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!"

<!-- Customize (don't change the ones you want to stay the same) the values declared in the first four lines and then paste the following into your Custom Footer section -->

<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>

Hope this helps.

Regards,
Howard

[Naveen Mishra]

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]

Hey @Naveen Mishra ,

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

1. Go to: https://manage.statuspage.io/
2.  Go to Your Page: 
3. Go to Customize page and emails
4. click on Customize HTML & CSS
5. 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]

Your code goes here:

[Naveen Mishra]

Hi, @Howard Nedd thanks a lot for your kind help. I really appreciate it. I have added the script in custom footer HTML and changed the operational status to "everything is ok" and it reflects the name change on the component as you can see in the attached images. But I also want to reflect the changes on the dropdown on the status name of "components". If there is a way to change that too, that will be very much helpful.

[Naveen Mishra]