try-it: Add web UI support

Signed-off-by: Stéphane Graber <[email protected]>
lxc · Nov 23, 2023 · 9ca6320 · 9ca6320
1 parent ae50c4a
commit 9ca6320
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/content/incus/try-it.html b/content/incus/try-it.html
@@ -83,6 +83,7 @@ <h3></h3>
               <p class="admonition-title">Tip</p>
               <p>Click on any of the commands in the tutorial to copy it into the terminal.</p>
             </div>
+            <p><b>NEW:</b> You can also try one of the <a href="" class="tryit_ui_url">Incus web interfaces</a>!</p>
             <nav aria-label="...">
               <ul class="p-inline-list u-align--center u-no-margin--bottom">
                 <li class="p-inline-list__item">
@@ -438,7 +439,7 @@ <h3></h3>
     <hr/>
     <div class="p-card" id="tryit_console_panel">
       <div class="p-card__content">
-        <h2 class="p-heading--4">Terminal (<span class="minutes"></span> minutes, <span class="seconds"></span> seconds remaining)</h2>
+        <h2 class="p-heading--4">Terminal (<span class="minutes"></span> minutes, <span class="seconds"></span> seconds remaining) (Try a <a target="_blank" class="tryit_ui_url">Web UI</a>)</h2>
         <div style="overflow: auto; background-color: #000;">
           <div id="tryit_console"></div>
         </div>

diff --git a/static/js/tryit.js b/static/js/tryit.js
@@ -217,6 +217,8 @@ $(document).ready(function() {
                 $('#tryit_instance_username').text(data.username);
                 $('#tryit_instance_password').text(data.password);
 
+                $('.tryit_ui_url').attr("href", "https://" + data.id + "." + tryit_server);
+
                 initializeClock('tryit_console_panel', data.expiry);
 
                 $('#tryit_status_panel').css("display", "none");
@@ -312,6 +314,9 @@ $(document).ready(function() {
             $('#tryit_instance_fqdn').text(data.fqdn);
             $('#tryit_instance_username').text(data.username);
             $('#tryit_instance_password').text(data.password);
+
+            $('.tryit_ui_url').attr("href", "https://" + data.id + "." + tryit_server);
+
             initializeClock('tryit_console_panel', data.expiry);
 
             $('#tryit_status_panel').css("display", "none");