tryit: Add support for creation status

Signed-off-by: Stéphane Graber <[email protected]>
lxc · Sep 25, 2023 · 687ff1a · 687ff1a
1 parent 4b3e785
commit 687ff1a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/content/incus/try-it.html b/content/incus/try-it.html
@@ -52,7 +52,7 @@ <h2 class="p-heading--4">Start</h2>
             <button type="submit" id="tryit_accept" class="p-button--positive" disabled="">Start</button>
           </div>
           <div id="tryit_progress" style="display:none;width:100%;text-align:center;">
-            <p class="p-heading--4">Creating a new instance <i class="p-icon--spinner u-animation--spin"></i></p>
+            <p class="p-heading--4"><span id="tryit_start_status">Creating a new instance</span> <i class="p-icon--spinner u-animation--spin"></i></p>
           </div>
         </div>
       </div>

diff --git a/content/incus/try-it.ja.html b/content/incus/try-it.ja.html
@@ -55,7 +55,7 @@ <h2 class="p-heading--4">試用開始 <!-- Start --></h2>
             <button type="submit" id="tryit_accept" class="p-button--positive" disabled="">Start</button>
           </div>
           <div id="tryit_progress" style="display:none;width:100%;text-align:center;">
-            <p class="p-heading--4">インスタンスの起動中 <!-- Creating a new instance --><i class="p-icon--spinner u-animation--spin"></i></p>
+            <p class="p-heading--4"><span id="tryit_start_status">インスタンスの起動中</span><!-- Creating a new instance --><i class="p-icon--spinner u-animation--spin"></i></p>
           </div>
         </div>
       </div>

diff --git a/static/js/tryit.js b/static/js/tryit.js
@@ -254,9 +254,34 @@ $(document).ready(function() {
         $('#tryit_progress').css("display", "inherit");
         highlightProgress(getIDFromIndex(0));
 
+        var last_response_len = false;
+        var last_response = "";
         $.ajax({
-            url: "https://"+tryit_server+"/1.0/start?terms="+tryit_terms_hash
+            url: "https://"+tryit_server+"/1.0/start?terms="+tryit_terms_hash,
+            xhrFields: {
+              onprogress: function(e) {
+                var this_response, response = e.currentTarget.response;
+                if (last_response_len === false)
+                {
+                    this_response = response;
+                    last_response_len = response.length;
+                }
+                else
+                {
+                    this_response = response.substring(last_response_len);
+                    last_response_len = response.length;
+                }
+                last_response = this_response;
+
+                data = $.parseJSON(this_response);
+                if (data.message != "") {
+                  $('#tryit_start_status').text(data.message);
+                }
+              }
+            }
         }).then(function(data) {
+            data = $.parseJSON(last_response);
+
             if (data.status && data.status != 0) {
                 if (data.status == 1) {
                     window.location.href = original_url;