Skip to content

Instantly share code, notes, and snippets.

@WowItsDoge

WowItsDoge/artilleryLoadTestVisualisation.html

Created September 13, 2017 15:54
Show Gist options
  • Save WowItsDoge/3b323a8e1722c10e4ffbc01cf73419be to your computer and use it in GitHub Desktop.
Save WowItsDoge/3b323a8e1722c10e4ffbc01cf73419be to your computer and use it in GitHub Desktop.
Download ZIP
Visualisation tool for artillery.io json load test description files.
Raw
artilleryLoadTestVisualisation.html
<!-- Artillery Load Test Visualisation -->
<!-- Developed by https://github.com/WowItsDoge -->
<!-- Load this html file in chrome and open a json load test description. -->
<!-- The Load Test is drawn in a tree view. -->
<!-- It uses the vis js library. -->
<!-- Feel free to use and improve this visualization tool. -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" />
<style type="text/css">
#mynetwork {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<script>
function loadVisualization() {
//initialize the loadTest description
var loadTestJson = document.getElementById('loadtest').value;
var loadTestObject = JSON.parse(loadTestJson);
// create an array with nodes
var nodes = new vis.DataSet();
// create an array with edges
var edges = new vis.DataSet();
nodes.add({
id: "loadtest",
label: "loadtest",
color: 'rgba(250, 250, 250, 1)'
});
//load the scenarios
for (var i = 0; i < loadTestObject.scenarios.length; i++) {
var nodeId = "szenario " + i;
nodes.add({
id: nodeId,
label: loadTestObject.scenarios[i].name,
color: 'rgba(100, 250, 100, 1)'
});
edges.add({
from: "loadtest",
to: nodeId
});
loadScenario(loadTestObject.scenarios[i], nodeId, nodes, edges);
}
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout: {
improvedLayout:true,
hierarchical: {
enabled: true,
levelSeparation: 60,
nodeSpacing: 100,
treeSpacing: 250,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: 'UD',
sortMethod: 'hubsize'
}
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
}
function loadScenario(scenario, scenarioId, nodes, edges) {
console.log(scenario);
var itemBefore = scenarioId;
//load the items
for (var i = 0; i < scenario.flow.length; i++) {
if (scenario.flow[i].post != null) {
var currentItem = "scenario " + scenarioId + " item " + i;
nodes.add({
id: currentItem,
label: "post: " + scenario.flow[i].post.url,
color: 'rgba(250, 150, 150, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (scenario.flow[i].get != null) {
var currentItem = "scenario " + scenarioId + " item " + i;
nodes.add({
id: currentItem,
label: "get: " + scenario.flow[i].get.url,
color: 'rgba(250, 160, 160, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (scenario.flow[i].log != null) {
var currentItem = "scenario " + scenarioId + " item " + i;
nodes.add({
id: currentItem,
label: scenario.flow[i].log,
color: 'rgba(150, 150, 250, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (scenario.flow[i].think != null) {
var currentItem = "scenario " + scenarioId + " item " + i;
nodes.add({
id: currentItem,
label: "think " + scenario.flow[i].think + " sec",
color: 'rgba(250, 250, 150, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (scenario.flow[i].loop != null) {
var currentItem = "scenario " + scenarioId + " item " + i;
nodes.add({
id: currentItem,
label: "loop " + scenario.flow[i].count,
color: 'rgba(250, 250, 200, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
loadLoop(scenario.flow[i].loop, currentItem, nodes, edges)
itemBefore = currentItem;
}
}
}
function loadLoop(items, rootId, nodes, edges) {
var itemBefore = rootId;
//load the items
for (var i = 0; i < items.length; i++) {
if (items[i].post != null) {
var currentItem = "loop " + rootId + " item " + i;
nodes.add({
id: currentItem,
label: "post: " + items[i].post.url,
color: 'rgba(250, 150, 150, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (items[i].get != null) {
var currentItem = "loop " + rootId + " item " + i;
nodes.add({
id: currentItem,
label: "get: " + items[i].get.url,
color: 'rgba(250, 160, 160, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (items[i].log != null) {
var currentItem = "loop " + rootId + " item " + i;
nodes.add({
id: currentItem,
label: items[i].log,
color: 'rgba(150, 150, 250, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (items[i].think != null) {
var currentItem = "loop " + rootId + " item " + i;
nodes.add({
id: currentItem,
label: "think " + items[i].think + " sec",
color: 'rgba(250, 250, 150, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
else if (items[i].loop != null) {
var currentItem = "loop " + rootId + " item " + i;
nodes.add({
id: currentItem,
label: "loop " + items[i].count,
color: 'rgba(250, 250, 200, 1)'
});
edges.add({
from: itemBefore,
to: currentItem
});
itemBefore = currentItem;
}
}
}
</script>
<div>Artillery visualisation</div>
<div>
<textarea id="loadtest" style="width: 100%; height: 200px;"></textarea>
</div>
<div>
<button id="load" onClick="loadVisualization()">Load</button>
</div>
<div id="mynetwork"></div>
</body>
</html>
@WowItsDoge
Copy link
Author

screenshot
Example visualisation for the load test script from the artillery.io documentation.

@WowItsDoge
Copy link
Author

If you want to use this tool online, this is the rawgit url.
Visualisation Tool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment