main.js

const anomalyDetectorUrl = '/api/anomalydetection/v3';

/**
 * Trains model.
 */
function train() {
 const timeseries = document.getElementById('train-timeseries').value;
 const epsilon = document.getElementById('epsilon').value;
 const clusterSize = document.getElementById('cluster-size').value;
 const algorithm = document.getElementById('algorithm').value;

 // region request for training model.
 const xhr = new XMLHttpRequest();
 xhr.open('POST', `${anomalyDetectorUrl}/models?epsilon=${epsilon}&minPointsPerCluster=${clusterSize}&distanceMeasureAlgorithm=${algorithm}`, true);
 xhr.setRequestHeader('Content-Type', 'application/json');
 xhr.setRequestHeader('X-XSRF-TOKEN', getCookie("XSRF-TOKEN"));
 xhr.onreadystatechange = function() {
 if (xhr.readyState != 4) return;

 if (xhr.status != 200 && xhr.status != 201) {
 console.log(xhr.status + ': ' + xhr.statusText);
 }
 else {
 console.log(xhr.responseText);
 const model = JSON.parse(xhr.responseText);
 document.getElementById('train-result').textContent = `id: ${model.id}`;
 document.getElementById('model-id').value = model.id;
 }
 }
 xhr.send(timeseries);
 // endregion.
}

/**
 * Detects anomalyes.
 */
function detect() {
 const timeseries = document.getElementById('detect-timeseries').value;
 const modelId = document.getElementById('model-id').value;

 // region request for anomaly.
 var xhr = new XMLHttpRequest();
 xhr.open('POST', `${anomalyDetectorUrl}/detectanomalies?modelID=${modelId}`, true);
 xhr.setRequestHeader('Content-Type', 'application/json');
 xhr.setRequestHeader('X-XSRF-TOKEN', getCookie("XSRF-TOKEN"));
 xhr.onreadystatechange = function() {
 if (xhr.readyState != 4) return;

 if (xhr.status != 200) {
 console.log(xhr.status + ': ' + xhr.statusText);
 }
 else {
 console.log(xhr.responseText);
 addTable(JSON.parse(xhr.responseText));
 }
 }
 xhr.send(timeseries);
 // endregion

 /**
 * Adds results table.
 * @param eventList List of anomaly events. 
 */
 function addTable(eventList) {
 let eventHtml = '';
 for (let i = 0; i < eventList.length; i++) {
 eventHtml += 
 `<div class="body__row">
        <div class="body__cell">${eventList[i]._time}</div>
        <div class="body__cell">${eventList[i].anomalyExtent}</div>
      </div>`;
 }
 document.getElementById('detect-result').innerHTML = eventHtml;
 }
}

function getCookie(cname) {
 var name = cname + "=";
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for(var i = 0; i <ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return "";
}

document.addEventListener('DOMContentLoaded', () => {
 document.getElementById('train-timeseries').value = JSON.stringify([
 {
 "_time":"2018-05-29T09:56:32.836Z",
 "temperature":199.13066,
 "pressure":200.18154,
 "flow":203.91713
 },
 {
 "_time":"2018-05-29T09:56:33.123Z",
 "temperature":199.41138,
 "pressure":200.93165,
 "flow":202.68726
 },
 {
 "_time":"2018-05-29T09:56:33.323Z",
 "temperature":199.97283,
 "pressure":201.27727,
 "flow":201.78946
 },
 {
 "_time":"2018-05-29T09:56:33.524Z",
 "temperature":200.9599,
 "pressure":201.0878,
 "flow":200
 },
 {
 "_time":"2018-05-29T09:56:33.725Z",
 "temperature":201.09573,
 "pressure":200.41176,
 "flow":200
 },
 {
 "_time":"2018-05-29T09:56:33.928Z",
 "temperature":200.53428,
 "pressure":200.1574,
 "flow":202.12152
 },
 {
 "_time":"2018-05-29T09:56:34.131Z",
 "temperature":199.76455,
 "pressure":199.87969,
 "flow":203.51127
 },
 {
 "_time":"2018-05-29T09:56:34.372Z",
 "temperature":199.05821,
 "pressure":198.97925,
 "flow":202.76101
 },
 {
 "_time":"2018-05-29T09:56:34.573Z",
 "temperature":199.69211,
 "pressure":198.52587,
 "flow":199.10835
 },
 {
 "_time":"2018-05-29T09:56:34.774Z",
 "temperature":200.39845,
 "pressure":199.23372,
 "flow":202.04773
 },
 {
 "_time":"2018-05-29T09:56:34.975Z",
 "temperature":201.16818,
 "pressure":198.84877,
 "flow":198.49884
 },
 {
 "_time":"2018-05-29T09:56:35.176Z",
 "temperature":201.37646,
 "pressure":199.48577,
 "flow":200.76867
 },
 {
 "_time":"2018-05-29T09:56:35.376Z",
 "temperature":201.9379,
 "pressure":200.34455,
 "flow":201.51889
 },
 {
 "_time":"2018-05-29T09:56:35.577Z",
 "temperature":201.9379,
 "pressure":201.52781,
 "flow":201.02694
 },
 {
 "_time":"2018-05-29T09:56:35.778Z",
 "temperature":201.59379,
 "pressure":202.047,
 "flow":201.92474
 },
 {
 "_time":"2018-05-29T09:56:35.978Z",
 "temperature":200.88745,
 "pressure":202.31414,
 "flow":200.76867
 },
 {
 "_time":"2018-05-29T09:56:36.178Z",
 "temperature":199.97283,
 "pressure":200.76865,
 "flow":197.46032
 },
 {
 "_time":"2018-05-29T09:56:36.378Z",
 "temperature":198.70505,
 "pressure":201.46883,
 "flow":200
 },
 {
 "_time":"2018-05-29T09:56:36.579Z",
 "temperature":198.35188,
 "pressure":200.02609,
 "flow":198.5918
 },
 {
 "_time":"2018-05-29T09:56:36.780Z",
 "temperature":198.28849,
 "pressure":199.65622,
 "flow":199.42154
 },
 {
 "_time":"2018-05-29T09:56:36.981Z",
 "temperature":198.35188,
 "pressure":198.69944,
 "flow":201.4082
 },
 {
 "_time":"2018-05-29T09:56:37.181Z",
 "temperature":199.48383,
 "pressure":198.22855,
 "flow":200.12914
 },
 {
 "_time":"2018-05-29T09:56:37.382Z",
 "temperature":200.53428,
 "pressure":198.38551,
 "flow":200.38741
 },
 {
 "_time":"2018-05-29T09:56:37.582Z",
 "temperature":201.72962,
 "pressure":198.25873,
 "flow":199.36662
 },
 {
 "_time":"2018-05-29T09:56:37.782Z",
 "temperature":202.5718,
 "pressure":199.60198,
 "flow":197.53411
 },
 {
 "_time":"2018-05-29T09:56:37.982Z",
 "temperature":202.71669,
 "pressure":201.44933,
 "flow":198.72709
 },
 {
 "_time":"2018-05-29T09:56:38.183Z",
 "temperature":202.21863,
 "pressure":202.2309,
 "flow":200
 },
 {
 "_time":"2018-05-29T09:56:38.384Z",
 "temperature":202.01035,
 "pressure":201.86136,
 "flow":198.78858
 },
 {
 "_time":"2018-05-29T09:56:38.585Z",
 "temperature":201.37646,
 "pressure":201.87042,
 "flow":200.19063
 },
 {
 "_time":"2018-05-29T09:56:38.785Z",
 "temperature":200.53428,
 "pressure":201.76326,
 "flow":203.17921
 },
 {
 "_time":"2018-05-29T09:56:38.986Z",
 "temperature":199.76455,
 "pressure":201.42971,
 "flow":202.71186
 },
 {
 "_time":"2018-05-29T09:56:39.186Z",
 "temperature":198.84994,
 "pressure":200.70375,
 "flow":199.66179
 },
 {
 "_time":"2018-05-29T09:56:39.387Z",
 "temperature":198.00776,
 "pressure":201.74817,
 "flow":197.6571
 },
 {
 "_time":"2018-05-29T09:56:39.588Z",
 "temperature":197.72704,
 "pressure":200.88486,
 "flow":201.02694
 },
 {
 "_time":"2018-05-29T09:56:39.789Z",
 "temperature":197.86287,
 "pressure":199.64969,
 "flow":197.6571
 },
 {
 "_time":"2018-05-29T09:56:39.990Z",
 "temperature":199.69211,
 "pressure":200.41176,
 "flow":201.1499
 },
 {
 "_time":"2018-05-29T09:56:40.190Z",
 "temperature":198.98577,
 "pressure":200.27059,
 "flow":197.06676
 },
 {
 "_time":"2018-05-29T09:56:40.390Z",
 "temperature":199.33894,
 "pressure":201.26671,
 "flow":196.99297
 },
 {
 "_time":"2018-05-29T09:56:40.591Z",
 "temperature":200.53428,
 "pressure":201.46883,
 "flow":200
 },
 {
 "_time":"2018-05-29T09:56:40.791Z",
 "temperature":200.326,
 "pressure":202.2309,
 "flow":201.1499
 },
 {
 "_time":"2018-05-29T09:56:40.992Z",
 "temperature":200.9599,
 "pressure":201.74817,
 "flow":201.14993
 },
 {
 "_time":"2018-05-29T09:56:41.192Z",
 "temperature":201.4489,
 "pressure":201.19879,
 "flow":198.85007
 },
 {
 "_time":"2018-05-29T09:56:41.393Z",
 "temperature":201.37646,
 "pressure":200.32572,
 "flow":203.0808
 },
 {
 "_time":"2018-05-29T09:56:41.593Z",
 "temperature":202.01035,
 "pressure":199.64969,
 "flow":200.2445
 },
 {
 "_time":"2018-05-29T09:56:41.793Z",
 "temperature":201.87451,
 "pressure":199.53256,
 "flow":203.08082
 },
 {
 "_time":"2018-05-29T09:56:41.994Z",
 "temperature":200.46184,
 "pressure":199.12354,
 "flow":198.5918
 },
 {
 "_time":"2018-05-29T09:56:42.195Z",
 "temperature":199.69211,
 "pressure":199.26866,
 "flow":200.2435
 },
 {
 "_time":"2018-05-29T09:56:42.396Z",
 "temperature":200.04528,
 "pressure":200.32572,
 "flow":200.87988
 },
 {
 "_time":"2018-05-29T09:56:42.596Z",
 "temperature":200.39845,
 "pressure":200.61621,
 "flow":202.306
 },
 {
 "_time":"2018-05-29T09:56:42.796Z",
 "temperature":200.88745,
 "pressure":200.41176,
 "flow":201.6
 }
 ]);

 document.getElementById('detect-timeseries').value = JSON.stringify([
 {
 "_time":"2018-05-29T09:56:32.836Z",
 "temperature":196.53066,
 "pressure":196.48154,
 "flow":203.61713
 },
 {
 "_time":"2018-05-29T09:56:33.123Z",
 "temperature":200.11138,
 "pressure":199.93165,
 "flow":200.168726
 },
 {
 "_time":"2018-05-29T09:56:33.323Z",
 "temperature":202.97283,
 "pressure":197.27727,
 "flow":196.178946
 }
 ]);
});