feat: lazy loading on demand

Change-Id: I06b6c096ad22f0e24ac2c005c610a308f4ca8f8e
redhat-performance · Nov 1, 2024 · c3b80c0 · c3b80c0
1 parent 414658f
commit c3b80c0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/src/quads/web/controller/CloudOperations.py b/src/quads/web/controller/CloudOperations.py
@@ -147,17 +147,9 @@ def get_unmanaged_hosts(self, exclude_hosts: str):
         """
         all_hosts = self.__get_all_hosts()
         blacklist = re.compile("|".join([re.escape(word) for word in exclude_hosts.split("|")]))
-        mgmt_hosts = {}
-        for host, properties in all_hosts.items():
-            if not blacklist.search(host):
-                if properties.get("sp_name", False):
-                    properties["host_ip"] = all_hosts.get(host, {"ip": None})["ip"]
-                    properties["host_mac"] = all_hosts.get(host, {"mac": None})["mac"]
-                    properties["ip"] = properties.get("sp_ip")
-                    properties["mac"] = properties.get("sp_mac")
-                    mgmt_hosts[properties.get("sp_name")] = properties
+        mgmt_hosts = [property.get("sp_name") for host, property in all_hosts.items() if property.get("sp_name", False) and not blacklist.search(host)]
         unmanaged_hosts = []
-        for host, properties in mgmt_hosts.items():
+        for host in mgmt_hosts:
             real_host = host[5:]
             try:
                 host_obj = self.__quads_api.get_host(real_host)

diff --git a/src/quads/web/templates/wiki/assignments.html b/src/quads/web/templates/wiki/assignments.html
@@ -5,8 +5,9 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-md-9 col-sm-12 col-10">
-                <h3><strong>SUMMARY</strong></h3>
-
+                <h3>
+                    <strong>SUMMARY</strong>
+                </h3>
                 <table class="table" id="summary">
                 </table>
 
@@ -69,7 +70,9 @@ <h3>
                 ),
                 $('<table>')
                     .addClass('table')
+                    .addClass('cloud-table')
                     .attr('id', `hosts-${cloud.name}`)
+                    .attr('data-cloud-id', `${cloud.name}`)
                     .append([
                         $('<thead>').append(
                             $('<tr>').append(
@@ -169,6 +172,13 @@ <h3>
 
             if ($table.find('thead').length === 0) {
                 $table.append($('<thead>'));
+                $table.find('thead').append(
+                    $('<tr>').append(
+                        headers.map(header =>
+                            $('<th>').attr('scope', 'col').text(header)
+                        )
+                    )
+                );
             }
             if ($table.find('tbody').length === 0) {
                 $table.append($('<tbody>'));
@@ -240,7 +250,11 @@ <h3>
                                 // OSPENV
                                 $('<td>').append(
                                     cloud.href_url_text_openstack ? 
-                                        $('<a>')
+                                        cloud.href_url_text_openstack.toLowerCase().includes('validating') ?
+                                            $('<span>')
+                                                .addClass(`${cloud.href_color} text-decoration-none`)
+                                                .text(cloud.href_url_text_openstack)
+                                        : $('<a>')
                                             .addClass(`${cloud.href_color} text-decoration-none`)
                                             .attr('href', cloud.href_url_openstack)
                                             .attr('target', cloud.is_valid ? '_blank' : '')
@@ -250,7 +264,11 @@ <h3>
                                 // OCPINV
                                 $('<td>').append(
                                     cloud.href_url_text_openshift ? 
-                                        $('<a>')
+                                        cloud.href_url_text_openshift.toLowerCase().includes('validating') ?
+                                            $('<span>')
+                                                .addClass(`${cloud.href_color} text-decoration-none`)
+                                                .text(cloud.href_url_text_openshift)
+                                        : $('<a>')
                                             .addClass(`${cloud.href_color} text-decoration-none`)
                                             .attr('href', cloud.href_url_openshift)
                                             .attr('target', cloud.is_valid ? '_blank' : '')
@@ -265,7 +283,26 @@ <h3>
                     const $cloudContainer = $('#cloud-sections').empty();
                     data.forEach(cloud => {
                         $cloudContainer.append(createCloudSection(cloud));
-                        updateHostsForCloud(cloud.name);
+                    });
+
+                    const observerOptions = {
+                        root: null, // Use the viewport as the root
+                        rootMargin: '0px',
+                        threshold: 0.1 // Trigger when 10% of the element is visible
+                    };
+
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(entry => {
+                            if (entry.isIntersecting) {
+                                const cloudName = entry.target.getAttribute('data-cloud-id');
+                                updateHostsForCloud(cloudName);
+                                observer.unobserve(entry.target);
+                            }
+                        });
+                    }, observerOptions);
+
+                    $('.cloud-table').each(function() {
+                        observer.observe(this);
                     });
                 },
                 error: function(xhr, status, error) {
@@ -405,7 +442,6 @@ <h3>
                 }
             });
         }
-
 
         // Call updateSummaryData when document is ready
         $(document).ready(function() {

diff --git a/src/quads/web/templates/wiki/inventory.html b/src/quads/web/templates/wiki/inventory.html
@@ -8,7 +8,7 @@ <h2><b>RDU ScaleLab Dashboard</b></h2>
             <div class="col-md-9 col-sm-12 col-10">
                 {% for rack in racks.split() %}
                     <p><strong>Rack {{ rack }}</strong></p>
-                    <table class="table" id="rack-{{ rack }}">
+                    <table class="table" id="rack-{{ rack }}" data-rack-id={{ rack }}>
                     </table>
                 {% endfor %}
             </div>
@@ -117,10 +117,25 @@ <h2><b>RDU ScaleLab Dashboard</b></h2>
             });
         };
 
-        // Initialize data loading for each rack
+        const observerOptions = {
+            root: null, // Use the viewport as the root
+            rootMargin: '0px',
+            threshold: 0.1 // Trigger when 10% of the element is visible
+        };
+
+        const observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const rackId = entry.target.getAttribute('data-rack-id');
+                    updateRackData(rackId);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, observerOptions);
+
+        // Observe all rack elements
         $('.table').each(function() {
-            const rackId = $(this).attr('id').replace('rack-', '');
-            updateRackData(rackId);
+            observer.observe(this);
         });
     });
     </script>