Pinning Statuspage uptime graphs to the TOP of the Status Page

[Randy Everett]

Does anyone have any example code of how to pin, or keep, the uptimes graphs at the TOP of the status page. Incoming incidents are pushing the graphs FAR down the page. I would rather have the graph stay at the top.

I might even like disable the showing of the incidents if that is possible and JUST have the graphs. 

I am not a programmer. Your help is appreciated. 

[John M]

Hi @Randy Everett ,

We have some JS snippets that can help with that.

Inserting this code into the Custom HTML Footer will move the components above the incidents: 

<script> $('.components-section').insertBefore('.unresolved- incidents'); </script>

You can remove incidents completely with this one: 

<script> $('.unresolved-incidents').remove(); </script>

You only need to add the opening and closing script tags once if you have multiple code snippets.

Also, be sure the syntax highlighting is working. Here is a video of pasting code into the editor, where the syntax highlighting is initially broken ('incidents' should also be red) due to the line break, but is easily fixed by backspacing once at the beginning of 'incidents'

[John W]

I'm wondering if there have been any updates to this?  Nothing happens when I use the snippet to move components before the unresolved incidents:  

<script> $('.components-section').insertBefore('.unresolved- incidents'); </script>

However removing incidents completely works fine with this one you mentioned above:  

<script> $('.unresolved-incidents').remove(); </script>

[John M]

Hi @John W ,

The code should still work. Is the syntax highlighting working? If not, the screen video above shows how to fix that. 

[John W]

Yes the syntax highlighting looks to be working fine, but for some reason it's not working (all the active incidents are still showing at the top).  Weird, but like I said if I use the code to remove the active incidents it works fine.   

[John W]

Looks like I finally got it to take just by playing around with the text and re-typing it manually.  Thanks!  

[Abraham Musalem]

Hey Randy,

Thanks for reaching out to community. Abe here with Statuspage support. You should be able to achieve this by using something similar to this code snippet which moves the components section above the incidents section. YOu will need to put this in the footer: 

<script> $('.components-section').insertBefore('.unresolved- incidents'); </script>

 You can find more basic code snippets here: 
https://support.atlassian.com/statuspage/docs/css-and-javascript-snippets-for-customizations/#Move-the-components-section-above-the-active-incidents-section

Cheers, 
-Abe, Statuspage Support