justynroberts/BigRedButton.html

## BigRedButton.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="jumbotron">
     <h1 class="display-4">FireDuty 🔥</h1>
     <p class="lead">Trigger a real-time Pagerduty Event using the events API </p>
     </p>

     <p class="lead">
        <button name="button"  id="mainbutton" class="btn btn-outline-danger btn.lg "type="button" >Create Event ☎️
        </button>


      <div class="form-group">
        <label form="exampleFormControlTextarea1">Valid Json Payload</label>
        <textarea class="form-control" id="payload" name ="payload" rows="10"></textarea>
      </div>
     </div>
</html>
<script>
var mytext = {
  "payload": {
    "summary": "[Synthetic Alert ] **WARNING** Low transactions detected via website",
    "source": "Alertmanager",
    "component": "Alertmanager",
    "group": "Customer Website,Checkout",
    "class": "Prometheus",
    "custom_details": {
      "AlarmName": "Transactions-Web",
			"Customer": "Important Customer",
      "AlarmDescription": "Transactions completed via website",
      "AlertValue": "WARNING",
      "AlertReason": "Transactions on *WEBSITE* > *EXPECTED VAL*",
      "Table": "GLOBAL-VIEW"
    },
    "client": "Alertmanager",
    "severity": "critical",
    "client_url": "https://www.Alertmanager.com",
    "images": [
      {
        "src": "https://logz.io/wp-content/uploads/2017/03/memory-graph.png",
        "alt": "Snapshot of Alertmanager Dashboard",
        "href": "https://logz.io/wp-content/uploads/2017/03/memory-graph.png"
      }
    ]
  },
    "routing_key": "REPLACERROUTINGKEYHERE",
    "event_action": "trigger"
}


document.getElementById('payload').value=JSON.stringify(mytext, null, 4);
document.addEventListener("keypress", function(event) {
  if (event.keyCode == 50) {
    eventfire()
  }
});
var button = document.querySelector('button');
button.onclick = function() {eventfire()}
function eventfire(){
const doctext=document.getElementById('mainbutton')
doctext.innerHTML = "🔥🔥🔥🔥 Event Sent 🔥🔥🔥🔥"
var xhr = new XMLHttpRequest();
var url = "https://events.pagerduty.com/v2/enqueue";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 202) {
        var json = JSON.parse(xhr.responseText);
        console.log(data);
        doctext.innerHTML = "Create Event ☎️ "
    }
};
var payload = document.getElementsByName('payload')[0].value
console.log(payload);
var data = JSON.stringify(payload);
console.log(data);
xhr.send(payload);
}

</script>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>
	<div class="jumbotron">
	<h1 class="display-4">FireDuty 🔥</h1>
	<p class="lead">Trigger a real-time Pagerduty Event using the events API </p>
	</p>

	<p class="lead">
	<button name="button" id="mainbutton" class="btn btn-outline-danger btn.lg "type="button" >Create Event ☎️
	</button>


	<div class="form-group">
	<label form="exampleFormControlTextarea1">Valid Json Payload</label>
	<textarea class="form-control" id="payload" name ="payload" rows="10"></textarea>
	</div>
	</div>
	</html>
	<script>
	var mytext = {
	"payload": {
	"summary": "[Synthetic Alert ] WARNING Low transactions detected via website",
	"source": "Alertmanager",
	"component": "Alertmanager",
	"group": "Customer Website,Checkout",
	"class": "Prometheus",
	"custom_details": {
	"AlarmName": "Transactions-Web",
	"Customer": "Important Customer",
	"AlarmDescription": "Transactions completed via website",
	"AlertValue": "WARNING",
	"AlertReason": "Transactions on WEBSITE > EXPECTED VAL",
	"Table": "GLOBAL-VIEW"
	},
	"client": "Alertmanager",
	"severity": "critical",
	"client_url": "https://www.Alertmanager.com",
	"images": [
	{
	"src": "https://logz.io/wp-content/uploads/2017/03/memory-graph.png",
	"alt": "Snapshot of Alertmanager Dashboard",
	"href": "https://logz.io/wp-content/uploads/2017/03/memory-graph.png"
	}
	]
	},
	"routing_key": "REPLACERROUTINGKEYHERE",
	"event_action": "trigger"
	}


	document.getElementById('payload').value=JSON.stringify(mytext, null, 4);
	document.addEventListener("keypress", function(event) {
	if (event.keyCode == 50) {
	eventfire()
	}
	});
	var button = document.querySelector('button');
	button.onclick = function() {eventfire()}
	function eventfire(){
	const doctext=document.getElementById('mainbutton')
	doctext.innerHTML = "🔥🔥🔥🔥 Event Sent 🔥🔥🔥🔥"
	var xhr = new XMLHttpRequest();
	var url = "https://events.pagerduty.com/v2/enqueue";
	xhr.open("POST", url, true);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.onreadystatechange = function () {
	if (xhr.readyState === 4 && xhr.status === 202) {
	var json = JSON.parse(xhr.responseText);
	console.log(data);
	doctext.innerHTML = "Create Event ☎️ "
	}
	};
	var payload = document.getElementsByName('payload')[0].value
	console.log(payload);
	var data = JSON.stringify(payload);
	console.log(data);
	xhr.send(payload);
	}

	</script>