Creating your first NEWT app
This section walks you through a simple application built using NEWT. We provide three examples:
- Javascript version (assumes basic knowledge of HTML and Javascript).
- Shell script version (shows you how things operate at the API level)
- Python Tutorial (iPython Notebook hosted at nbviewer.ipython.org)
Javascript example
We will create a simple JQuery application that will run a command via NEWT and allow you to pull a file back to your browser. Having a working knowledge of Javascript (and possibly JQuery) will help understand some of the examples.
Create an HTML file called tutorial.html
. You can host this on the NERSC Science Gateway nodes. To do this simply create a www
directory in your project space. So /project/projectdirs/<your_project>/www
will be visible at http://portal.nersc.gov/project/<your_project>/
For this example, we use a project directory called 'osp':
$ mkdir /project/projectdirs/osp/www
$ chmod 755 /project/projectdirs/osp/www /project/projectdirs/osp/
$ vi tutorial.html
<html>
Hello World
</html>
You would now be able to view this file at:
http://portal.nersc.gov/project/osp/tutorial.html
(Note this is a sample that includes the completed code from below - for your example, you will need to replace "osp" with your own project directory)
Now, add JQuery and newt.js to your HTML. This will create a login bar at the top of your screen, that will handle the authentication for you. It will also give you a JQuery extension called $.newt_ajax
that allows you to communicate with NEWT.
Your basic HTML skeleton file will look something like this:
<html>
<head><title> Hello NEWT</title>
<script src="https://newt.nersc.gov/js/jquery-1.7.2.js"></script>
<script src="https://newt.nersc.gov/js/newt.js"></script>
</head>
<body>
Hello World
</body>
</html>
First, log in with your NERSC username and password (by visiting the page your created and logging in).
Now we make our first NEWT call using Javascript. Let's get the current authentication status. This will make an AJAX call to the NEWT service at /login
and invoke the success()
callback when it gets a response. The response is a Javascript (JSON) object that can easily be rendered in a <div>
.
<html>
<head><title> Hello NEWT</title>
<script src="https://newt.nersc.gov/js/jquery-1.7.2.js"></script>
<script src="https://newt.nersc.gov/js/newt.js"></script>
<script type="text/javascript">
$.newt_ajax({type: "GET",
url: "/login",
success: function(res){
// res is { username: 'xxxxx', auth: true|false }
$("#auth").html("Login Status: "+res.auth);
},
});
</script>
</head>
<body>
Hello World
<div id="auth"></div>
</body>
</html>
Let's do a POST
. We'll run the date command on the cori system:
<html>
<head><title> Hello NEWT</title>
<script src="https://newt.nersc.gov/js/jquery-1.7.2.js"></script>
<script src="https://newt.nersc.gov/js/newt.js"></script>
<script type="text/javascript">
$.newt_ajax({type: "POST",
url: "/command/cori",
data: {"executable": "/bin/date"},
success: function(res){
// res is { output: "output string", error: "error string", }
$("#date").html("The Date is "+res.output);
},
});
</script>
</head>
<body>
Hello World
<div id="date"></div>
</body>
</html>
To get a file, you need to add the parameter "?view=read"
to the URL representing the file. So if you want to get the MOTD file from cori:
<html>
<head><title> Hello NEWT</title>
<script src="https://newt.nersc.gov/js/jquery-1.7.2.js"></script>
<script src="https://newt.nersc.gov/js/newt.js"></script>
<script type="text/javascript">
$.newt_ajax({type: "GET",
url: "/file/cori/etc/motd?view=read",
success: function(res){
// res contains raw file data
$('#file').html(res);
},
});
</script>
</head>
<body>
Hello World<br>
File Contents:
<div id="file"></div>
</body>
</html>
That should get you started with NEWT. You can view the completed example here. For the complete API documentation, please refer to the NEWT API.
REST example
1. Get the current authentication status
HTTP Request:
GET https://newt.nersc.gov/newt/auth
Response Status:
STATUS 200
Response Content:
{"username": null, "auth": "false"}
example curl command:
curl -k -X GET https://newt.nersc.gov/newt/auth
2. Log the user in
HTTP Request:
POST https://newt.nersc.gov/newt/auth
Request Parameters:
username=myuser&password=mypass
Response Status:
STATUS 200
Response Headers:
Set-Cookie: "cookie string"
Response Content:
{"username": "myuser", "auth": "true"}
example curl command:
curl -k -c newt_cookies.txt -X POST -d "username=USERNAME&password=PASSWORD" https://newt.nersc.gov/newt/auth
At this point the user is logged in and session information is stored in a cookie. Cookies are handled automatically by browsers, but if you are scripting this, you may need to store the contents of the Set-Cookie
header.
HTTP Request:
GET https://newt.nersc.gov/newt/status/cori
Response Status:
STATUS 200
Response Content:
{ "status": "up", "system": "myhost" }
example curl command:
curl -k -X GET https://newt.nersc.gov/newt/status/cori
4. Execute a job (eg. run '/bin/hostname -a' on cori)
HTTP Request:
POST https://newt.nersc.gov/newt/command/cori/
Request Headers:
Cookie: "cookie-string"
Request Parameters:
executable="/bin/hostname -a"
Response Status:
STATUS 200
Response Content:
{"output": "cori17", "error": ""}
example curl command:
curl -k -b newt_cookies.txt -X POST -d 'executable="/bin/hostname -a"' https://newt.nersc.gov/newt/command/cori/
5. Retrieve motd file from cori
HTTP Request:
GET https://newt.nersc.gov/newt/file/cori/etc/motd?view=read
Request Headers:
Cookie: "cookie-string"
Response Status:
STATUS 200,
Response Content:
Binary file data
example curl command:
curl -k -b newt_cookies.txt -X GET https://newt.nersc.gov/newt/file/cori/etc/motd?view=read