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
    }
    ]);
});