iTop REST Playground

by Pierre Goiffon

HTML

<!doctype html>
<html lang="en">
<head>
<title>iTop REST Playground</title>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
</head>
<body>

<div class="body">
  <p><b>iTop REST/JSON API Test</b></p>
  <fieldset>
    <legend>Server Parameters</legend>
    <p>iTop Server URL: <input type="text" id="server_url" name="server_url" value="http://localhost/itop" /> (iTop server's URL, no trailing slash)<br/> iTop Login: <input type="text" id="auth_user" name="auth_user" value="admin" /> Password: <input type="password"
        id="auth_pwd" name="auth_pwd" value="" />
    </p>
    <p>API Version: <input type="text" id="version" name="version" value="1.0" /> <button type="button" onclick="return ListOperations()">List Operations</button></p>
    <p>Use: <input type="radio" id="json" value="json" name="json" /><label for="json"> JSON</label>&nbsp;&nbsp;<input type="radio" id="jsonp" value="jsonp" name="json" checked/><label for="jsonp"> JSON-P</label></p>
    <p></p>
  </fieldset>
  <fieldset>
    <legend>Get Object</legend>
    Class: <input type="text" id="get_class" value="Contact" /> Key: <input type="text" id="get_key" value="1" /> <button type="button" onclick="return GetObject()">Get Object</button>
  </fieldset>
  <p>Result:<br>
    <pre>
      <span id="result"></span>
    </pre>
</div>

</body>
</html>

CSS

pre {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

.string {
  color: green;
}

.number {
  color: darkorange;
}

.boolean {
  color: blue;
}

.null {
  color: magenta;
}

.key {
  color: red;
}

.body {
  padding: 10px;
  font-size: 10pt;
  font-family: Verdana, Arial, Helvetica;
}

fieldset {
  padding: 10px;
  border: 1px #ccc solid;
}

legend {
  padding: 10px;
  background-color: #fff;
}

JavaScript

function DoXSS(oJSON) {
  var sVersion = $('#version').val();
  var sURL = $('#server_url').val() + "/webservices/rest.php?version=" + sVersion;
  $('#result').html('');
  var sDataType = 'json';

  if ($(':input[name=json]:checked').val() == 'jsonp') {
    sDataType = 'jsonp';
  }

  $.ajax({
    type: "POST",
    url: sURL,
    dataType: sDataType,
    data: {
      auth_user: $('#auth_user').val(),
      auth_pwd: $('#auth_pwd').val(),
      json_data: JSON.stringify(oJSON)
    },
    crossDomain: 'true'
  })
    .then(
    function(data, textStatus, jqXHR) {
      printResult(data);
    },
    function(jqXHR, textStatus, errorThrown) {
      console.debug(jqXHR);
      printResult("ERROR !!\n" + 
                  "status: " + textStatus + " (" + jqXHR.status + ")\n" + 
                  "error: " + errorThrown);
    }
  );

  return false;
}

function ListOperations() {
  $('#result').val('');
  var oJSON = {
    operation: 'list_operations'
  };

  DoXSS(oJSON);
}

function GetObject() {
  $('#result').val('');
  var oJSON = {
    operation: 'core/get',
    'class': $('#get_class').val(),
    key: $('#get_key').val()
  };

  DoXSS(oJSON);
}


function printResult(data) {
	$('#result').html(syntaxHighlight(data));
}


function syntaxHighlight(json) {
  if (typeof json != 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
    var cls = 'number';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key';
      } else {
        cls = 'string';
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean';
    } else if (/null/.test(match)) {
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}