Skip to content

Commit

Permalink
Added Prometheus custom metrics
Browse files Browse the repository at this point in the history
  • Loading branch information
@dprosper
dprosper committed Oct 3, 2019
1 parent 677c3b4 commit 7eac350
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 104 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,6 @@ venv.bak/
/site

# mypy
.mypy_cache/
.mypy_cache/

app-log-analysis copy.yaml
5 changes: 5 additions & 0 deletions app/templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<title>{% block title %}{% endblock %} - IBM Cloud</title>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="section">
<div class="container">
{% include 'navbar.html' %}
{% block content %}{% endblock %}
</div>
</section>
Expand Down
109 changes: 6 additions & 103 deletions app/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,10 @@
{# index page, providing a form to submit a city name #}
{% extends "base.html" %}
{% block title %}World of Logging{% endblock %}
{% block title %}World of Logging and Monitoring{% endblock %}
{% block content %}
<script type="text/javascript">
function logMessage() {
var xhttp;
var level = document.forms['custommessage'].elements['level'].value;
var message = document.forms['custommessage'].elements['message'].value;
var csrfmiddlewaretoken = document.forms['custommessage'].elements['csrfmiddlewaretoken'].value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == XMLHttpRequest.DONE) {
var response = JSON.parse(xhttp.responseText);
document.getElementById("messageResult").style.display = "block";
document.getElementById("plogmessage").innerHTML = "Logged message: " + response.smsg;
document.getElementById("message").value = '';
}
};
xhttp.open('POST', "/logit");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var postVars = 'message=' + message + '&level=' + level + '&csrfmiddlewaretoken=' + csrfmiddlewaretoken;
xhttp.send(postVars);
return false;
}

function setLogLevel(newLevel) {
var xhttp;
var csrfmiddlewaretoken = document.forms['custommessage'].elements['csrfmiddlewaretoken'].value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == XMLHttpRequest.DONE) {
document.getElementById("messageResult").style.display = "block";
document.getElementById("plogmessage").innerHTML = xhttp.responseText;
}
};
xhttp.open('POST', "/setLogLevel");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var postVars = 'loggerlevel=' + newLevel + '&csrfmiddlewaretoken=' + csrfmiddlewaretoken;
xhttp.send(postVars);
return false;
}
</script>
<h1 class="title">
Generate, Access and Analyze Application Logs
</h1>
<div class="container">
<h2 class="subtitle">Log new message</h2>
<p>
<form action="" name="custommessage">
{% csrf_token %}
<div class="field">
<label class="label">Message</label>
<div class="control">
<input class="input" type="text" name="message" id="message" placeholder="log message...">
</div>
</div>

<div class="field">
<label class="label">Message Log Level</label>
<div class="control">
<div class="select">
<select name="level">
<option value="critical">critical</option>
<option value="error">error</option>
<option value="warn">warn</option>
<option value="info" selected="selected">info</option>
<option value="debug">debug</option>
</select>
</div>
</div>
</div>

<div class="field">
<div class="control">
<input type="submit" class="button is-link" type="submit" onclick="return logMessage()" value="Log Message">
</div>
</div>
</form>

</p>
<p>
<hr>
<h2 class="subtitle">Set Logger Log Level on Server</h2>
<div class="field">
<div class="control">
<div class="select">
<select name="loglevel" onchange="setLogLevel(this.value)">
<option value="critical">critical</option>
<option value="error">error</option>
<option value="warn" selected="selected">warn</option>
<option value="info">info</option>
<option value="debug">debug</option>
</select>
</div>
</div>
<div class="jumbotron">
<h1 class="display-4">World of Logging and Monitoring!</h1>
<p class="lead">Click on Logging or Monitoring tab to get started</p>
<hr class="my-4">
</div>

</p>


<div id = "messageResult" style="display:none;">
<hr>
<pre id="plogmessage"></pre> {% endblock %}
</div>

</div>
{% endblock %}
109 changes: 109 additions & 0 deletions app/templates/log.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{% extends "base.html" %}
{% block title %}World of Logging{% endblock %}
{% block content %}
<script type="text/javascript">
function logMessage() {
document.getElementById("messageResult").style.display = "block";
document.getElementById("plogmessage").innerHTML = "Running...";
var xhttp;
var level = document.forms['custommessage'].elements['level'].value;
var message = document.forms['custommessage'].elements['message'].value;
var csrfmiddlewaretoken = document.forms['custommessage'].elements['csrfmiddlewaretoken'].value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == XMLHttpRequest.DONE) {
var response = JSON.parse(xhttp.responseText);
document.getElementById("messageResult").style.display = "block";
document.getElementById("plogmessage").innerHTML = "Logged message: " + response.smsg;
document.getElementById("message").value = '';
}
};
xhttp.open('POST', "/logit");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var postVars = 'message=' + message + '&level=' + level + '&csrfmiddlewaretoken=' + csrfmiddlewaretoken;
xhttp.send(postVars);
return false;
}

function setLogLevel(newLevel) {
var xhttp;
var csrfmiddlewaretoken = document.forms['custommessage'].elements['csrfmiddlewaretoken'].value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == XMLHttpRequest.DONE) {
document.getElementById("messageResult").style.display = "block";
document.getElementById("plogmessage").innerHTML = xhttp.responseText;
}
};
xhttp.open('POST', "/setLogLevel");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var postVars = 'loggerlevel=' + newLevel + '&csrfmiddlewaretoken=' + csrfmiddlewaretoken;
xhttp.send(postVars);
return false;
}
</script>

<h1 class="title">
Generate, Access and Analyze Application Logs
</h1>
<div class="container">
<h2 class="subtitle">Log new message</h2>
<p>
<form action="" name="custommessage">
{% csrf_token %}
<div class="field">
<label class="label">Message</label>
<div class="control">
<input class="input" type="text" name="message" id="message" placeholder="log message...">
</div>
</div>

<div class="field">
<label class="label">Message Log Level</label>
<div class="control">
<div class="select">
<select name="level">
<option value="critical">critical</option>
<option value="error">error</option>
<option value="warn">warn</option>
<option value="info" selected="selected">info</option>
<option value="debug">debug</option>
</select>
</div>
</div>
</div>

<div class="field">
<div class="control">
<input type="submit" class="button is-link" type="submit" onclick="return logMessage()" value="Log Message">
</div>
</div>
</form>
</p>

<p>
<hr>
<h2 class="subtitle">Set Logger Log Level on Server</h2>
<div class="field">
<div class="control">
<div class="select">
<select name="loglevel" onchange="setLogLevel(this.value)">
<option value="critical">critical</option>
<option value="error">error</option>
<option value="warn" selected="selected">warn</option>
<option value="info">info</option>
<option value="debug">debug</option>
</select>
</div>
</div>
</div>
</p>


<div id = "messageResult" style="display:none;">
<hr>
<pre id="plogmessage"></pre>
</div>

</div>
{% endblock %}
64 changes: 64 additions & 0 deletions app/templates/monitor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block title %}World of Monitoring{% endblock %}
{% block content %}
<script type="text/javascript">
function createMetrics() {
document.getElementById("metricResult").style.display = "block";
document.getElementById("metricmessage").innerHTML = "Running....";
var xhttp;
var metriccount = document.forms['metric'].elements['metriccount'].value;
var csrfmiddlewaretoken = document.forms['metric'].elements['csrfmiddlewaretoken'].value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == XMLHttpRequest.DONE) {
var response = JSON.parse(xhttp.responseText);
document.getElementById("metricResult").style.display = "block";
document.getElementById("metricmessage").innerHTML = "Result: " + response.status;
}
};
xhttp.open('POST', "/createMetrics");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var postVars = 'metriccount=' + metriccount + '&csrfmiddlewaretoken=' + csrfmiddlewaretoken;
xhttp.send(postVars);
return false;
}
</script>

<h1 class="title">
Generate Metrics
</h1>
<div class="container">
<h2 class="subtitle">Create Prometheus metrics</h2>
<p>
<form action="" name="metric">
{% csrf_token %}
<div class="field">
<label class="label">Number of times to generate metrics (5 seconds delay between each loop)</label>
<div class="control">
<div class="select">
<select name="metriccount">
<option value="5" selected="selected">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
</select>
</div>
</div>
</div>

<div class="field">
<div class="control">
<input type="submit" class="button is-link" type="submit" onclick="return createMetrics()" value="Create Metrics">
</div>
</div>
</form>
</p>

<div id = "metricResult" style="display:none;">
<hr>
<pre id="metricmessage"></pre>
</div>

</div>
{% endblock %}
13 changes: 13 additions & 0 deletions app/templates/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">WoLaM</a>
<div id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item {{ logging_page }}">
<a class="nav-link" href="{% url 'log' %}">Logging</a>
</li>
<li class="nav-item {{ monitoring_page }}">
<a class="nav-link" href="{% url 'monitor' %}">Monitoring</a>
</li>
</ul>
</div>
</nav>
3 changes: 3 additions & 0 deletions app/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,7 @@
url(r'^$', views.index, name='index'),
url(r'^logit', views.logit, name='logit'),
url(r'^setLogLevel', views.setLogLevel, name='setLogLevel'),
url(r'^createMetrics', views.createMetrics, name='createMetrics'),
url(r'^log', views.log, name='log'),
url(r'^monitor', views.monitor, name='monitor'),
]
29 changes: 29 additions & 0 deletions app/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
import logging
import json

import prometheus_client as prom
import time
import random

counter = prom.Counter('wolam_counter', 'A counter')
gauge = prom.Gauge('wolam_gauge', 'A gauge')
histogram = prom.Histogram('wolam_histogram', 'An histogram')
summary = prom.Summary('wolam_summary', 'A summary')
prom.start_http_server(8002)

# get service information if on IBM Cloud
if 'VCAP_SERVICES' in os.environ:
Expand Down Expand Up @@ -78,7 +87,27 @@ def health(request):
state = {"status": "UP"}
return JsonResponse(state)

def createMetrics(request):
metriccount=request.POST.get('metriccount', '1')

for x in range(int(metriccount)):
counter.inc(random.random())
gauge.set(random.random() * 10)
histogram.observe(random.random() * 10)
summary.observe(random.random() * 10)
time.sleep(5)

state = {"status": "Metrics Generated " + metriccount}
return JsonResponse(state)

def log(request):
context = {"log_page": "active"}
return render(request, 'log.html', context)

def monitor(request):
context = {"monitor_page": "active"}
return render(request, 'monitor.html', context)

def handler404(request):
return render(request, '404.html', status=404)

Expand Down
Binary file added images/getStarted.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/loggingApp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/monitoringApp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions requirements.txt
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
django>=2.0.8
pytz==2018.5
prometheus_client>=0.7.1

0 comments on commit 7eac350

Please sign in to comment.