Merge branch 'lg_web-graph-downloads' into ray_test

OpenAPI/tests/translator_test_client.py

@@ -15,4 +15,4 @@
         lg_name='test', algo='metis', num_islands=1)
     print(html_content)
     html_content = translator.gen_pg(
-        pgt_id='test', dlg_mgr_host='127.0.0.1', dlg_mgr_port=8001)
+        pgt_id='test', dlg_mgr_host='127.0.0.1', dlg_mgr_port=8001, dlg_mgr_deploy='deploy')

OpenAPI/translator.yaml

@@ -79,3 +79,7 @@ paths:
             type: integer
           in: query
           name: dlg_mgr_port
+        - schema:
+            type: string
+          in: query
+          name: dlg_mgr_deploy

daliuge-translator/dlg/dropmake/web/lg_web.py

@@ -336,6 +336,9 @@ def gen_pg():
     RESTful interface to convert a PGT(P) into PG by mapping
     PGT(P) onto a given set of available resources
     """
+    # if the 'deploy' checkbox is not checked, then the form submission will NOT contain a 'dlg_mgr_deploy' field
+    deploy = request.query.get("dlg_mgr_deploy") is not None
+
     pgt_id = request.query.get("pgt_id")
     pgtp = pg_mgr.get_pgt(pgt_id)
     if pgtp is None:
@@ -355,20 +358,26 @@ def gen_pg():
         node_list = mgr_client.nodes()
         # 2. mapping PGTP to resources (node list)
         pg_spec = pgtp.to_pg_spec([mhost] + node_list, ret_str=False)
-        dt = datetime.datetime.now().strftime("%Y-%m-%dT%H-%M-%S.%f")
-        ssid = "{0}_{1}".format(
-            pgt_id.split(".json")[0].split("_pgt")[0].split("/")[-1], dt
-        )
-        mgr_client.create_session(ssid)
-        # print "session created"
-        mgr_client.append_graph(ssid, pg_spec)
-        # print "graph appended"
-        completed_uids = common.get_roots(pg_spec)
-        mgr_client.deploy_session(ssid, completed_uids=completed_uids)
-        # mgr_client.deploy_session(ssid, completed_uids=[])
-        # print "session deployed"
-        # 3. redirect to the master drop manager
-        redirect("http://{0}:{1}/session?sessionId={2}".format(mhost, mport, ssid))
+
+        if deploy:
+            dt = datetime.datetime.now().strftime("%Y-%m-%dT%H-%M-%S.%f")
+            ssid = "{0}_{1}".format(
+                pgt_id.split(".json")[0].split("_pgt")[0].split("/")[-1], dt
+            )
+            mgr_client.create_session(ssid)
+            # print "session created"
+            mgr_client.append_graph(ssid, pg_spec)
+            # print "graph appended"
+            completed_uids = common.get_roots(pg_spec)
+            mgr_client.deploy_session(ssid, completed_uids=completed_uids)
+            # mgr_client.deploy_session(ssid, completed_uids=[])
+            # print "session deployed"
+            # 3. redirect to the master drop manager
+            redirect("http://{0}:{1}/session?sessionId={2}".format(mhost, mport, ssid))
+        else:
+            response.content_type = 'application/json'
+            response.set_header("Content-Disposition", "attachment; filename=%s" % (pgt_id))
+            return json.dumps(pg_spec)
     except restutils.RestClientException as re:
         response.status = 500
         return "Fail to interact with DALiUGE Drop Manager: {0}".format(re)

daliuge-translator/dlg/dropmake/web/pg_viewer.html

@@ -219,6 +219,17 @@
         box.innerHTML = "";
       }
     }, false);
+
+    // add event listener to the "deploy" checkbox so that when the checkbox is used,
+    // the form submit button is updated to reflect the behaviour
+    var deployCheckbox = document.getElementById('dlg_mgr_deploy');
+    deployCheckbox.addEventListener("change", function(){
+        if (deployCheckbox.checked){
+            document.getElementById('gen_pg_button').value = "Generate & Deploy Physical Graph";
+        } else {
+            document.getElementById('gen_pg_button').value = "Generate Physical Graph";
+        }
+    });
   } // end init
 
   // Called when the mouse is over the diagram's background
@@ -454,6 +465,25 @@
     window.open(url)
   }
 
+  function makeJSON() {
+      console.log("makeJSON()");
+
+      $.ajax({
+          url: "/pgt_jsonbody?pgt_name={{pgt_view_json_name}}",
+          type: 'get',
+          error: function(XMLHttpRequest, textStatus, errorThrown) {
+            if (404 == XMLHttpRequest.status) {
+              console.error('Server cannot locate physical graph file {{pgt_view_json_name}}');
+            } else {
+              console.error('status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
+            }
+          },
+          success: function(data){
+            downloadText('{{pgt_view_json_name}}', data);
+          }
+      });
+  }
+
   function makePNG() {
     //zoomToFit();
 
@@ -481,39 +511,54 @@
     }
   }
 
-  function getCWLZipFilenameFromResponseURL(url){
-      const FILE_NAME_PREFIX = "pgt_name=";
-      return url.substring(url.lastIndexOf(FILE_NAME_PREFIX) + FILE_NAME_PREFIX.length, url.lastIndexOf('.graph')) + ".zip";
+  function createZipFilename(graph_name){
+    return graph_name.substr(0, graph_name.lastIndexOf('.graph')) + '.zip';
+  }
+
+  function downloadText(filename, text) {
+    const element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+  }
+
+  // build an object URL from the blob and 'download' it
+  function downloadBlob(filename, blob) {
+    const url = window.URL.createObjectURL(blob);
+
+    const element = document.createElement('a');
+    element.setAttribute('href', url);
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(element);
   }
 
   function makeCWL() {
-    var fileName = "";
     var error = "";
 
     fetch('/pgt_cwl?pgt_name={{pgt_view_json_name}}')
       .then(async resp => {
-
         // if fetch was not successful, await the error message in the body of the response
         if (resp.status !== 200){
             error = await resp.text();
             return;
         }
-
-        // otherwise, re-generate a filename for the download
-        filename = getCWLZipFilenameFromResponseURL(resp.url);
-
         return resp.blob();
       })
       .then(blob => {
-        // build an object URL from the response and 'download' it
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
+        downloadBlob(createZipFilename('{{pgt_view_json_name}}'), blob);
       })
       .catch(() => alert(error)); // present error, if it occurred
   }
@@ -588,6 +633,7 @@
   <div>
     <button id="gantt_button" class="button" onclick="genGanttChart()">Produce Gantt Chart</button>
     <button id="schedule_button" class="button" onclick="genScheduleChart()">Produce Schedule Matrix</button>
+    <button id="json_button" class="button" onclick="makeJSON()">Export to JSON</button>
     <button id="png_button" class="button" onclick="makePNG()">Export to PNG</button>
     <button id="cwl_button" class="button" onclick="makeCWL()">Export to CWL</button>
     <button id="zoom_button" class="button" onclick="zoomToFit()">Zoom to Fit</button>
@@ -603,8 +649,9 @@
       DALiuGE Manager host:<input type="text" name="dlg_mgr_host" value="localhost" size="40" style="font-size:16px;">
       <!-- DALiuGE Manager port:<input type="number" name="dlg_mgr_port" value="8097" style="font-size:16px;"> -->
       DALiuGE Manager port:<input type="number" name="dlg_mgr_port" value="8001" style="font-size:16px;">
+      Deploy:<input type="checkbox" id="dlg_mgr_deploy" name="dlg_mgr_deploy" value="deploy" checked>
       <br/>
-      <input type="submit" value="Generate &amp; Deploy Physical Graph" class="button">
+      <input id="gen_pg_button" type="submit" value="Generate &amp; Deploy Physical Graph" class="button">
       <input type="hidden" name="pgt_id" value="{{pgt_view_json_name}}">
     </form>
   </div>