Creating your first NEWT app

This section walks you through a simple application built using NEWT. We provide three examples:

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.

3. Get the status of a given host (eg. cori)

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