Last active
November 5, 2020 13:56
-
-
Save hexfusion/4f6ec433c34019b51b14ed089865962a to your computer and use it in GitHub Desktop.
azure metrics query and graph with chartjs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/bash | |
#set -x | |
# usage example | |
# ./script.sh \ | |
# /subscriptions/8XXXba4b-XXXX-446a-XXXX-a9XXXXXe3d/resourceGroups/SBATSCHE-METRICS-2020-NSW5W-RG/providers/Microsoft.Compute/virtualMachines/sbatsche-metrics-2020-nsw5w-master-0 \ | |
# date +%FT%TZ -d "3 day ago" \ | |
# date +%FT%TZ -d "2 day ago" | |
if ! command -v az &> /dev/null | |
then | |
echo "az cli could not be found. see https://docs.microsoft.com/en-us/cli/azure/install-azure-cli" | |
exit | |
fi | |
if [ -z "$1" ]; then | |
echo "id is a requiured param ./script.sh $id" | |
exit 1 | |
fi | |
# to get the list of vm resource ids | |
# az vm list --query '[*].id' | |
ID=$1 | |
OUT=$PWD/chart-$(date +"%s").html | |
# STATE_DATE default 1 day ago | |
if [ -z "$2" ]; then | |
START_DATE=$(date +%FT%TZ -d "1 day ago") | |
else | |
START_DATE=$(date +%FT%TZ -d "$2") | |
fi | |
# END_DATE default now | |
if [ -z "$3" ]; then | |
END_DATE=$(date +%FT%TZ) | |
else | |
END_DATE=$(date +%FT%TZ -d "$3") | |
fi | |
function query_metrics() { | |
local id="$1" | |
local start_time="$2" | |
local end_time="$3" | |
local metric="$4" | |
az monitor metrics list \ | |
--resource $id \ | |
--start-time ${start_time} \ | |
--end-time ${end_time} \ | |
--query 'value[*].timeseries[*].data[*].{x: timeStamp, y: average} | [0][0]' \ | |
--metric "${metric}" | |
} | |
### Queries | |
echo "Running azure metrics queries.." | |
echo "OS Disk Bandwidth Consumed Percentage" | |
DISK_BANDWIDTH_CONSUMED=$(query_metrics $ID $START_DATE $END_DATE "OS Disk Bandwidth Consumed Percentage") | |
echo "OS Disk IOPS Consumed Percentage" | |
DISK_IOPS_CONSUMED=$(query_metrics $ID $START_DATE $END_DATE "OS Disk IOPS Consumed Percentage") | |
echo "VM Uncached IOPS Consumed Percentage" | |
VM_UNCACHED_IOPS_CONSUMED=$(query_metrics $ID $START_DATE $END_DATE "VM Uncached IOPS Consumed Percentage") | |
echo "VM Uncached Bandwidth Consumed Percentage" | |
VM_UNCACHED_BANDWIDTH_CONSUMED=$(query_metrics $ID $START_DATE $END_DATE "VM Uncached Bandwidth Consumed Percentage") | |
echo "Queries complete saving chart to $OUT" | |
cat > "$OUT" << EOF | |
<!doctype html> | |
<html> | |
<head> | |
<title>Line Chart</title> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> | |
<style> | |
canvas { | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div style="width:75%;"> | |
<canvas id="canvas"></canvas> | |
</div> | |
<script> | |
var timeFormat = 'YYYY-MM-DDTh:mm:ss'; | |
var config = { | |
type: 'line', | |
data: { | |
datasets: [ | |
{ | |
label: "OS Disk Bandwidth Consumed Percentage", | |
data: | |
$DISK_BANDWIDTH_CONSUMED, | |
fill: false, | |
borderColor: 'red' | |
}, | |
{ | |
label: "OS Disk IOPS Consumed Percentage", | |
data: | |
$DISK_IOPS_CONSUMED, | |
fill: false, | |
borderColor: 'blue' | |
}, | |
{ | |
label: "VM Uncached IOPS Consumed Percentage", | |
data: | |
$VM_UNCACHED_IOPS_CONSUMED, | |
fill: false, | |
borderColor: 'green' | |
}, | |
{ | |
label: "VM Uncached IOPS Consumed Percentage", | |
data: | |
$VM_UNCACHED_BANDWIDTH_CONSUMED, | |
fill: false, | |
borderColor: 'yellow' | |
} | |
] | |
}, | |
options: { | |
responsive: true, | |
title: { | |
display: true, | |
text: "Azure metrics" | |
}, | |
scales: { | |
xAxes: [{ | |
type: "time", | |
time: { | |
format: timeFormat, | |
tooltipFormat: 'll' | |
}, | |
scaleLabel: { | |
display: true, | |
labelString: 'time' | |
} | |
}], | |
yAxes: [ | |
{ | |
ticks: { | |
min: 0, | |
max: 100 | |
}, | |
scaleLabel: { | |
display: true, | |
labelString: 'percentage' | |
} | |
}] | |
} | |
} | |
}; | |
window.onload = function () { | |
var ctx = document.getElementById("canvas").getContext("2d"); | |
window.myLine = new Chart(ctx, config); | |
}; | |
</script> | |
</body> | |
</html> | |
EOF |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment