Add refresh button bug fixes and test case to UI e2e test

Author: ChristianZaccaria

docs/sphinx/user-docs/ui-widgets.rst

@@ -39,13 +39,15 @@ requests and limits along with the clusters status.
 
 Above is a list of two Ray Clusters ``raytest`` and ``raytest2`` each of
 those headings is clickable and will update the table to view the
-selected Cluster's information. There are three buttons under the table
-``Cluster Down``, ``View Jobs`` and ``Open Ray Dashboard``. \* The
+selected Cluster's information. There are four buttons under the table
+``Cluster Down``, ``View Jobs``, ``Open Ray Dashboard``, and ``Refresh Data``. \* The
 ``Cluster Down`` button will delete the selected Cluster. \* The
 ``View Jobs`` button will try to open the Ray Dashboard's Jobs view in a
 Web Browser. The link will also be printed to the console. \* The
 ``Open Ray Dashboard`` button will try to open the Ray Dashboard view in
-a Web Browser. The link will also be printed to the console.
+a Web Browser. The link will also be printed to the console. \* The
+``Refresh Data`` button will refresh the list of RayClusters, the spec, and
+the status of the Ray Cluster.
 
 The UI Table can be viewed by calling the following function.
 

src/codeflare_sdk/common/widgets/widgets.py

@@ -119,28 +119,8 @@ def _on_cluster_click(self, selection_change):
         _on_cluster_click handles the event when a cluster is selected from the toggle buttons, updating the output with cluster details.
         """
         new_value = selection_change["new"]
-        self.raycluster_data_output.clear_output()
-        ray_clusters_df = _fetch_cluster_data(self.namespace)
-        self.classification_widget.options = ray_clusters_df["Name"].tolist()
-        with self.raycluster_data_output:
-            display(
-                HTML(
-                    ray_clusters_df[ray_clusters_df["Name"] == new_value][
-                        [
-                            "Name",
-                            "Namespace",
-                            "Num Workers",
-                            "Head GPUs",
-                            "Head CPU Req~Lim",
-                            "Head Memory Req~Lim",
-                            "Worker GPUs",
-                            "Worker CPU Req~Lim",
-                            "Worker Memory Req~Lim",
-                            "status",
-                        ]
-                    ].to_html(escape=False, index=False, border=2)
-                )
-            )
+        self.classification_widget.value = new_value
+        self._refresh_dataframe()
 
     def _on_delete_button_click(self, b):
         """
@@ -215,9 +195,8 @@ def _refresh_dataframe(self):
         """
         _refresh_data function refreshes the list of Ray Clusters.
         """
-        new_df = _fetch_cluster_data(self.namespace)
-        self.ray_clusters_df = new_df
-        if new_df.empty:
+        self.ray_clusters_df = _fetch_cluster_data(self.namespace)
+        if self.ray_clusters_df.empty:
             self.classification_widget.close()
             self.delete_button.close()
             self.list_jobs_button.close()
@@ -227,7 +206,54 @@ def _refresh_dataframe(self):
                 self.raycluster_data_output.clear_output()
                 print(f"No clusters found in the {self.namespace} namespace.")
         else:
-            self.classification_widget.options = new_df["Name"].tolist()
+            # Store the current selection if it still exists (Was not previously deleted).
+            selected_cluster = (
+                self.classification_widget.value
+                if self.classification_widget.value
+                in self.ray_clusters_df["Name"].tolist()
+                else None
+            )
+
+            # Update list of Ray Clusters.
+            self.classification_widget.options = self.ray_clusters_df["Name"].tolist()
+
+            # If the selected cluster exists, preserve the selection to remain viewing the currently selected cluster.
+            # If it does not exist, default to the first available cluster.
+            if selected_cluster:
+                self.classification_widget.value = selected_cluster
+            else:
+                self.classification_widget.value = self.ray_clusters_df["Name"].iloc[0]
+
+            # Update the output with the current Ray Cluster details.
+            self._display_cluster_details()
+
+    def _display_cluster_details(self):
+        """
+        _display_cluster_details function displays the selected cluster details in the output widget.
+        """
+        self.raycluster_data_output.clear_output()
+        selected_cluster = self.ray_clusters_df[
+            self.ray_clusters_df["Name"] == self.classification_widget.value
+        ]
+        with self.raycluster_data_output:
+            display(
+                HTML(
+                    selected_cluster[
+                        [
+                            "Name",
+                            "Namespace",
+                            "Num Workers",
+                            "Head GPUs",
+                            "Head CPU Req~Lim",
+                            "Head Memory Req~Lim",
+                            "Worker GPUs",
+                            "Worker CPU Req~Lim",
+                            "Worker Memory Req~Lim",
+                            "status",
+                        ]
+                    ].to_html(escape=False, index=False, border=2)
+                )
+            )
 
     def display_widgets(self):
         display(widgets.VBox([self.classification_widget, self.raycluster_data_output]))

ui-tests/tests/widget_notebook_example.test.ts

@@ -36,6 +36,8 @@ test.describe("Visual Regression", () => {
 
     // Hide the cell toolbar before capturing the screenshots
     await page.addStyleTag({ content: '.jp-cell-toolbar { display: none !important; }' });
+    // Hide the file explorer
+    await page.keyboard.press('Control+Shift+F');
 
     const captures: (Buffer | null)[] = []; // Array to store cell screenshots
     const cellCount = await page.notebook.getCellCount();
@@ -109,30 +111,48 @@ test.describe("Visual Regression", () => {
 
     await runPreviousCell(page, cellCount, '(<CodeFlareClusterStatus.UNKNOWN: 6>, False)');
 
-    // view_clusters table with buttons
-    await interactWithWidget(page, upDownWidgetCellIndex, 'input[type="checkbox"]', async (checkbox) => {
-      await checkbox.click();
-      const isChecked = await checkbox.isChecked();
-      expect(isChecked).toBe(false);
-    });
+    // Replace text in ClusterConfiguration to run a new RayCluster
+    const cell = page.getByText('raytest').first();
+    await cell.fill('"raytest-1"');
+    await page.notebook.runCell(cellCount - 3, true); // Run ClusterConfiguration cell
 
     await interactWithWidget(page, upDownWidgetCellIndex, 'button:has-text("Cluster Up")', async (button) => {
       await button.click();
-      const successMessage = await page.waitForSelector('text=Ray Cluster: \'raytest\' has successfully been created', { timeout: 10000 });
+      const successMessage = await page.waitForSelector('text=Ray Cluster: \'raytest-1\' has successfully been created', { timeout: 10000 });
       expect(successMessage).not.toBeNull();
     });
 
     const viewClustersCellIndex = 4; // 5 on OpenShift
     await page.notebook.runCell(cellCount - 2, true);
+
+    // Wait until the RayCluster status in the table updates to "Ready"
+    await interactWithWidget(page, viewClustersCellIndex, 'button:has-text("Refresh Data")', async (button) => {
+      let clusterReady = false;
+      const maxRefreshRetries = 24; // 24 retries * 5 seconds = 120 seconds
+      let numRefreshRetries = 0;
+      while (!clusterReady && numRefreshRetries < maxRefreshRetries) {
+        await button.click();
+        try {
+          await page.waitForSelector('text=Ready ✓', { timeout: 5000 });
+          clusterReady = true;
+        }
+        catch (e) {
+          console.log(`Cluster not ready yet. Retrying...`);
+          numRefreshRetries++;
+        }
+      }
+      expect(clusterReady).toBe(true);
+    });
+
     await interactWithWidget(page, viewClustersCellIndex, 'button:has-text("Open Ray Dashboard")', async (button) => {
       await button.click();
-      const successMessage = await page.waitForSelector('text=Opening Ray Dashboard for raytest cluster', { timeout: 5000 });
+      const successMessage = await page.waitForSelector('text=Opening Ray Dashboard for raytest-1 cluster', { timeout: 5000 });
       expect(successMessage).not.toBeNull();
     });
 
     await interactWithWidget(page, viewClustersCellIndex, 'button:has-text("View Jobs")', async (button) => {
       await button.click();
-      const successMessage = await page.waitForSelector('text=Opening Ray Jobs Dashboard for raytest cluster', { timeout: 5000 });
+      const successMessage = await page.waitForSelector('text=Opening Ray Jobs Dashboard for raytest-1 cluster', { timeout: 5000 });
       expect(successMessage).not.toBeNull();
     });
 
@@ -141,7 +161,7 @@ test.describe("Visual Regression", () => {
 
       const noClustersMessage = await page.waitForSelector(`text=No clusters found in the ${namespace} namespace.`, { timeout: 5000 });
       expect(noClustersMessage).not.toBeNull();
-      const successMessage = await page.waitForSelector(`text=Cluster raytest in the ${namespace} namespace was deleted successfully.`, { timeout: 5000 });
+      const successMessage = await page.waitForSelector(`text=Cluster raytest-1 in the ${namespace} namespace was deleted successfully.`, { timeout: 5000 });
       expect(successMessage).not.toBeNull();
     });