You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/09/15 20:21:53 UTC
[airavata-django-portal] 04/05: AIRAVATA-3497 Updated tutorial to
use async/await syntax
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 976326541e7342c3fcb4b8905f52e06dd9a4cf75
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Sep 15 16:15:39 2021 -0400
AIRAVATA-3497 Updated tutorial to use async/await syntax
---
docs/tutorial/custom_ui_tutorial.md | 170 +++++++++++++++++++-----------------
1 file changed, 90 insertions(+), 80 deletions(-)
diff --git a/docs/tutorial/custom_ui_tutorial.md b/docs/tutorial/custom_ui_tutorial.md
index 67dfa6a..deb9745 100644
--- a/docs/tutorial/custom_ui_tutorial.md
+++ b/docs/tutorial/custom_ui_tutorial.md
@@ -1317,29 +1317,29 @@ Now we'll use the `AiravataAPI` library to load the user's recent experiments.
end of the _scripts_ block in `hello.html`:
```javascript
-// ...
+ // ...
// STARTING HERE
const appInterfaceId = "Echo_23d67491-1bef-47bd-a0f5-faf069e09773";
- function loadExperiments() {
+ async function loadExperiments() {
- return services.ExperimentSearchService
+ const data = await services.ExperimentSearchService
.list({limit: 5,
[models.ExperimentSearchFields.USER_NAME.name]: session.Session.username,
[models.ExperimentSearchFields.APPLICATION_ID.name]: appInterfaceId,
- })
- .then(data => {
- $('#experiment-list').empty();
- data.results.forEach((exp, index) => {
- $('#experiment-list').append(
- `<tr>
- <td>${exp.name}</td>
- <td>${exp.executionId}</td>
- <td>${exp.creationTime}</td>
- <td>${exp.experimentStatus.name}</td>
- <td id="output_${index}"></td>
- </tr>`);
- });
+ });
+
+ $('#experiment-list').empty();
+ data.results.forEach(async (expSummary, index) => {
+
+ $('#experiment-list').append(
+ `<tr>
+ <td>${expSummary.name}</td>
+ <td>${expSummary.executionId}</td>
+ <td>${expSummary.creationTime}</td>
+ <td>${expSummary.experimentStatus.name}</td>
+ <td id="output_${index}"></td>
+ </tr>`);
});
}
@@ -1367,26 +1367,31 @@ then examine it line by line to see what it is doing.
// ...
// STARTING HERE
- $("#run-button").click((e) => {
- const greeting = $("#greeting-select").val();
+ async function submitExperiment(greeting) {
// Construct experiment object
- utils.ExperimentUtils.createExperiment({
+ const experimentData = await utils.ExperimentUtils.createExperiment({
applicationInterfaceId: appInterfaceId,
computeResourceName: "example-vc.jetstream-cloud.org",
experimentName: "Echo " + greeting,
experimentInputs: {
"Input-to-Echo": greeting
}
- }).then(experiment=> {
- // Save experiment
- return services.ExperimentService.create({ data: experiment });
- }).then(experiment => {
- // Launch experiment
- return services.ExperimentService.launch({
- lookup: experiment.experimentId,
- });
- })
- });
+ });
+ // Save experiment
+ const experiment = await services.ExperimentService.create({ data: experimentData });
+ // Launch experiment
+ await services.ExperimentService.launch({ lookup: experiment.experimentId });
+ }
+
+ async function runClickHandler() {
+ const greeting = $("#greeting-select").val();
+ await submitExperiment(greeting);
+ // Reload experiments to see the new one
+ loadExperiments();
+ }
+
+ $("#run-button").click(runClickHandler);
+
// ENDING HERE
</script>
@@ -1398,12 +1403,18 @@ then examine it line by line to see what it is doing.
handler to the _Run_ button that gets the selected greeting value:
```javascript
-$("#run-button").click((e) => {
+async function runClickHandler() {
const greeting = $("#greeting-select").val();
-});
+ await submitExperiment(greeting);
+ // Reload experiments to see the new one
+ loadExperiments();
+}
+
+$("#run-button").click(runClickHandler);
```
-3. Now the code constructs an experiment object using the utility function
+3. Next, the `submitExperiment` function is called. This code constructs an
+ experiment object using the utility function
`utils.ExperimentUtils.createExperiment`. In Airavata, Experiments are
created from Application Interface descriptions, so we'll first pass the
`applicationInterfaceId`. We already have the `appInterfaceId` in the code
@@ -1429,7 +1440,7 @@ $("#run-button").click((e) => {
```javascript
// Construct experiment object
-utils.ExperimentUtils.createExperiment({
+const experimentData = await utils.ExperimentUtils.createExperiment({
applicationInterfaceId: appInterfaceId,
computeResourceName: "example-vc.jetstream-cloud.org",
experimentName: "Echo " + greeting,
@@ -1439,9 +1450,9 @@ utils.ExperimentUtils.createExperiment({
});
```
-4. The `createExperiment` function does a few more things behind the scenes and
- once we run it we can take a look at the REST API calls it makes. In summary
- `createExperiment`:
+4. The `utils.ExperimentUtils.createExperiment` function does a few more things
+ behind the scenes and once we run it we can take a look at the REST API calls
+ it makes. In summary `utils.ExperimentUtils.createExperiment`:
- loads the Application Interface
- loads the compute resource ID
@@ -1460,16 +1471,13 @@ utils.ExperimentUtils.createExperiment({
(`ExperimentService.create`) and then launch it (`ExperimentService.launch`).
```javascript
- // ...
- }).then(experiment=> {
- // Save experiment
- return services.ExperimentService.create({ data: experiment });
- }).then(experiment => {
- // Launch experiment
- return services.ExperimentService.launch({
- lookup: experiment.experimentId,
- });
- })
+// ...
+// Save experiment
+const experiment = await services.ExperimentService.create({
+ data: experimentData,
+});
+// Launch experiment
+await services.ExperimentService.launch({ lookup: experiment.experimentId });
```
Now that we can launch the experiment we can go ahead and give it a try.
@@ -1491,10 +1499,10 @@ We'll read the STDOUT file and display that in our experiment listing table.
1. What we need to do is get the identifier for the experiment's STDOUT file. In
Airavata, this identifier is called the _Data Product ID_. The experiment
- metadata includes a list of output files and the `value` of each one is that file's
- Data Product ID. For each `exp` we can use the `ExperimentService` to load
- this metadata for the experiment, find the STDOUT output object and get its
- value, which is the _Data Product ID_.
+ metadata includes a list of output files and the `value` of each one is that
+ file's Data Product ID. For each `exp` we can use the `ExperimentService` to
+ load this metadata for the experiment, find the STDOUT output object and get
+ its value, which is the _Data Product ID_.
```javascript
if (exp.experimentStatus === models.ExperimentState.COMPLETED) {
@@ -1532,42 +1540,44 @@ if (expSummary.experimentStatus === models.ExperimentState.COMPLETED) {
`loadExperiments` function:
```javascript
-function loadExperiments() {
- return services.ExperimentSearchService.list({
+async function loadExperiments() {
+ const data = await services.ExperimentSearchService.list({
limit: 5,
[models.ExperimentSearchFields.USER_NAME.name]:
session.Session.username,
[models.ExperimentSearchFields.APPLICATION_ID.name]: appInterfaceId,
- }).then((data) => {
- $("#experiment-list").empty();
- data.results.forEach((exp, index) => {
- $("#experiment-list").append(
- `<tr>
- <td>${exp.name}</td>
- <td>${exp.executionId}</td>
- <td>${exp.creationTime}</td>
- <td>${exp.experimentStatus.name}</td>
- <td id="output_${index}"></td>
- </tr>`
- );
+ });
- // STARTING HERE
- // If experiment has finished, download and display the stdout file contents
- if (expSummary.experimentStatus === models.ExperimentState.COMPLETED) {
- const experiment = await services.ExperimentService.retrieve({
- lookup: expSummary.experimentId
- });
- const stdoutInput = experiment.getExperimentOutput('Echo-STDOUT');
- const dataProductURI = stdoutInput.value;
- try {
- const stdout = await utils.ExperimentUtils.readDataProduct(dataProductURI);
- $(`#output_${index}`).text(stdout);
- } catch (error) {
- $(`#output_${index}`).text("N/A");
- }
+ $("#experiment-list").empty();
+ data.results.forEach(async (expSummary, index) => {
+ $("#experiment-list").append(
+ `<tr>
+ <td>${expSummary.name}</td>
+ <td>${expSummary.executionId}</td>
+ <td>${expSummary.creationTime}</td>
+ <td>${expSummary.experimentStatus.name}</td>
+ <td id="output_${index}"></td>
+ </tr>`
+ );
+
+ // STARTING HERE
+ // If experiment has finished, download and display the stdout file contents
+ if (expSummary.experimentStatus === models.ExperimentState.COMPLETED) {
+ const experiment = await services.ExperimentService.retrieve({
+ lookup: expSummary.experimentId,
+ });
+ const stdoutInput = experiment.getExperimentOutput("Echo-STDOUT");
+ const dataProductURI = stdoutInput.value;
+ try {
+ const stdout = await utils.ExperimentUtils.readDataProduct(
+ dataProductURI
+ );
+ $(`#output_${index}`).text(stdout);
+ } catch (error) {
+ $(`#output_${index}`).text("N/A");
}
- // ENDING HERE
- });
+ }
+ // ENDING HERE
});
}
```