50.StatusPage dummy code document

A document for updating StatusPage dummy code that has been worked on for requirement validation.

StatusPage can be customized either through configuration or customizing HTML, CSS and JS. This document is for that customized code.

1. HTML header:

<div class="topnav" style="height: 30px">
  <a href="#">Cloud Status</a>
  <a href="#past-incidents">Incident</a>
  <a href="#contact" onclick="cloudKPIClick()">Cloud KPI's</a>
</div>
<br>

<div class="subtabs" style="height: 30px">
  &nbsp;&nbsp;<span>Product:</span>&nbsp;
  <a href="#">WSC</a>
  <a href="#">CASB</a>
  <a href="#">DEP</a>
  <a href="#">DUP</a>
  <a href="#">DDP</a>
  <a href="#"><u>What Data Center am I using?</u></a>
</div>

2. HTML footer:

<div class="section1">
  <h6>Americas</h6>
</div>

<div class="section2">
  <h6>EMEA</h6>
</div>

<br><div class="link">
  <a href="#past-incidents">Incidents</a>
</div>

<div class="modal" style="display:none;">
  <div class="header">
    <div class="title">
    	   Incident Details
      <span id='close'>x</span>
    </div>
  </div>
  <div class="content"></div>
</div>

<script>
$('.subtabs').show();  
  //$('.section1').hide();
  //$('.section2').hide();
  //$('.container').hide();
  
function cloudKPIClick() {
    $('.subtabs').hide();
    location.hide();
}
  

//$('.components-section').hide();
$('.components-uptime-link').hide();
$('.legend').hide();
$('.section1').insertBefore('.components-section');
$('.section2').insertAfter('.components-section');
$('.whatDC').insertAfter('.page-status');
$('.link').insertAfter('.no-related-msg');
  //$('.incidents-list').hide();
$('#uptime-component-08mr7c8f4tln').hide();
$('#uptime-component-8b9098rxjnfl').hide();
$('.incident-container').insertAfter('.close')

$('div.incidents-list').find('div.status-day > div.date').each(function(index,element){
    var t = $(element).html();
    $(element).html("<a href='#'>"+t+"</a>");
  $(element).siblings().each(function(index,element){
  	    $(element).css('display','none');
  })
});
  
  $('div.incidents-list').on('click','div.status-day > div.date > a',function(e){
    e.preventDefault();
     var child = $(e.target).parents('div.status-day').children().eq(1);
    var html = $(child).html();
    $('.modal>div.header>div.title').html('Incident Details');
    $('.modal>div.content').html('<div class="incident-container">'+html+'</div>');
  	   $('.modal').css('display','block');
  });
 
</script>

3. CSS:

.topnav {
  overflow: hidden;
  height: 50px;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ADD8E6;
  color: black;
}

.topnav a:active {
  background-color: #4caf50;
  color: grey;
}

.layout-content.status.status-index .page-status.status-none {
    background-color: #2fcc66;
  			  width: 200px;
  	  height: 50px;
  		  text-align: center;
}

.layout-content.status.status-index .page-status.status-major {
    background-color: #e67e22;
  			  width: 200px;
  	  height: 50px;
  		  text-align: center;
    display: none;
}

.layout-content.status.status-index .page-status.status-minor {
    background-color: #f1c40f;
  			  width: 210px;
  	  height: 50px;
  		  text-align: center; 
    display: none;
}

.layout-content.status.status-index .page-status.status-maintenance {
    background-color: #3498DB;
  			  width: 220px;
  	  height: 50px;
  		  text-align: center; 
  	  display: none;
}

.layout-content.status.status-index .page-status {
    font-weight: 50;
    border-radius: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    margin-bottom: 70px;
    padding: 0.75rem 1.25rem;
    
}

.layout-content.status.status-index .page-status .status {
    color: rgb(255, 255, 255);
    position: relative;
    top: 2px;
     
}
.font-large {
    /*font-weight: 500;*/
    font-size: 14px;
    line-height: 7px;
    
    /*font-size: 1.25rem;
    line-height: 1.8125rem;*/
}

/* Header/Logo Title */
.section1 {
  padding: 7px;
  text-align: left;
  background: #D3D3D3;
  color: black;
  font-size: 5px;
}
/* Header/Logo Title */
.section2 {
  padding: 7px;
  text-align: left;
  background: #D3D3D3;
  color: black;
  font-size: 5px;
}

.whatDC { 
	  text-align: right;
}

.subtabs {
  overflow: hidden;
  height: 50px;
}

.subtabs a {
  color: black;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
}

.subtabs a:hover {
  background-color: white;
  color: black;
}

.subtabs u {
  color: blue;
  text-align: center;
  padding: 5px 7px;
  text-decoration: none;
  font-size: 17px;
  float: right;
  text-decoration: underline;
}

.subtabs u:hover {
  background-color: white;
  color: blue;
}


#uptime-tooltip {
    margin-left: 150px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
}

.link {
 text-align: center; 
}


hide-component {
 display: none; 
}

.modal {
  position: fixed;
  z-index: 500;
  background-color: white;
  width: 70%;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px black;
  padding: 16px;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
}

div.modal > div > header > div.title {
 overflow:auto; 
}

#close {
  float:right;
  display:inline-block;
  padding:2px 5px;
  background:#ccc;
  margin: 0 10px 10px 0;
}

/*.layout-content.status.status-index .components-section .components-container.one-column .component-container .component-status {
    display: inline-block;
}
.layout-content.status.status-index .components-section .component-container .component-status {
    font-size: 0.875rem;
    float: right;
    background-color: #cfc;
    padding: 7px;
    line-height: 10px;
}


.updates-dropdown-container {
  margin-bottom:0;
  margin-top:0;
}*/

This code has been written just to validate the requirement received and hence not the final code for anything and can only be used as reference.

Atlassian Apps - Internal

50.StatusPage dummy code document

Analytics

1. HTML header:

2. HTML footer:

3. CSS: