From 6a3f7197e951f4e341fa4faace9ba3913255b17e Mon Sep 17 00:00:00 2001
From: Ben Carver <bcarver2@gmu.edu>
Date: Fri, 1 Mar 2024 12:05:44 -0500
Subject: [PATCH] Added refresh buttons to the cards.

---
 src/app/Components/KernelList.tsx     | 45 ++++++++++++-------------
 src/app/Components/KernelSpecList.tsx | 43 +++++++++++++-----------
 src/app/Components/NodeList.tsx       | 47 ++++++++++++++-------------
 3 files changed, 72 insertions(+), 63 deletions(-)

diff --git a/src/app/Components/KernelList.tsx b/src/app/Components/KernelList.tsx
index aed37cdd..07857af7 100644
--- a/src/app/Components/KernelList.tsx
+++ b/src/app/Components/KernelList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   Badge,
   Button,
@@ -56,6 +56,7 @@ import {
   SkullIcon,
   SpinnerIcon,
   StopCircleIcon,
+  SyncIcon,
 } from '@patternfly/react-icons';
 
 // Map from kernel status to the associated icon.
@@ -244,27 +245,29 @@ export const KernelList: React.FunctionComponent = () => {
     };
   }, [isStatusMenuOpen, statusMenuRef]);
 
-  const [kernels, setKernels] = React.useState<DistributedJupyterKernel[]>([]);
-  useEffect(() => {
-    let ignoreResponse = false;
-    async function fetchKernels() {
-      try {
-        console.log('Refreshing kernels.');
+  const ignoreResponse = useRef(false);
+  async function fetchKernels() {
+    try {
+      console.log('Refreshing kernels.');
 
-        // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
-        // We're specifically targeting the API endpoint I setup called "kernels".
-        const response = await fetch('/api/kernel');
+      // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
+      // We're specifically targeting the API endpoint I setup called "kernels".
+      const response = await fetch('/api/kernel');
 
-        const respKernels: DistributedJupyterKernel[] = await response.json();
+      const respKernels: DistributedJupyterKernel[] = await response.json();
 
-        if (!ignoreResponse) {
-          console.log('Received kernels: ' + JSON.stringify(respKernels));
-          setKernels(respKernels);
-        }
-      } catch (e) {
-        console.error(e);
+      if (!ignoreResponse.current) {
+        console.log('Received kernels: ' + JSON.stringify(respKernels));
+        setKernels(respKernels);
       }
+    } catch (e) {
+      console.error(e);
     }
+  }
+
+  const [kernels, setKernels] = React.useState<DistributedJupyterKernel[]>([]);
+  useEffect(() => {
+    ignoreResponse.current = false;
 
     fetchKernels();
 
@@ -272,7 +275,7 @@ export const KernelList: React.FunctionComponent = () => {
     setInterval(fetchKernels, 30000);
 
     return () => {
-      ignoreResponse = true;
+      ignoreResponse.current = true;
     };
   }, []);
 
@@ -437,9 +440,7 @@ export const KernelList: React.FunctionComponent = () => {
     </DrawerPanelContent>
   );
 
-  // const cardHeaderActions = (
-
-  // )
+  const cardHeaderActions = <Button variant="link" icon={<SyncIcon />} onClick={fetchKernels} />;
 
   const drawerContent = (
     <React.Fragment>
@@ -503,7 +504,7 @@ export const KernelList: React.FunctionComponent = () => {
 
   return (
     <Card isCompact isRounded isExpanded={isCardExpanded}>
-      <CardHeader onExpand={onCardExpand}>
+      <CardHeader onExpand={onCardExpand} actions={{ actions: cardHeaderActions, hasNoOffset: true }}>
         <CardTitle>
           <Title headingLevel="h2" size="xl">
             Active Kernels
diff --git a/src/app/Components/KernelSpecList.tsx b/src/app/Components/KernelSpecList.tsx
index 79c7a901..59ec5c44 100644
--- a/src/app/Components/KernelSpecList.tsx
+++ b/src/app/Components/KernelSpecList.tsx
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
+  Button,
   Card,
   CardBody,
   CardExpandableContent,
@@ -15,6 +16,7 @@ import {
   Title,
 } from '@patternfly/react-core';
 
+import { SyncIcon } from '@patternfly/react-icons';
 import { KernelSpec } from '@data/Kernel';
 
 // const kernelSpecs: KernelSpec[] = [
@@ -56,42 +58,45 @@ export const KernelSpecList: React.FunctionComponent = () => {
     setActiveTabKey(Number(tabIndex));
   };
 
-  const [kernelSpecs, setKernelSpecs] = React.useState<KernelSpec[]>([]);
-  useEffect(() => {
-    let ignoreResponse = false;
-    async function fetchKernelSpecs() {
-      try {
-        console.log('Refreshing kernel specs.');
+  const ignoreResponse = useRef(false);
+  async function fetchKernelSpecs() {
+    try {
+      console.log('Refreshing kernel specs.');
 
-        // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
-        // We're specifically targeting the API endpoint I setup called "kernelspec".
-        const response = await fetch('/api/kernelspec');
+      // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
+      // We're specifically targeting the API endpoint I setup called "kernelspec".
+      const response = await fetch('/api/kernelspec');
 
-        const respKernels: KernelSpec[] = await response.json();
+      const respKernels: KernelSpec[] = await response.json();
 
-        if (!ignoreResponse) {
-          console.log('Received kernel specs: ' + JSON.stringify(respKernels));
-          setKernelSpecs(respKernels);
-        }
-      } catch (e) {
-        console.error(e);
+      if (!ignoreResponse.current) {
+        console.log('Received kernel specs: ' + JSON.stringify(respKernels));
+        setKernelSpecs(respKernels);
       }
+    } catch (e) {
+      console.error(e);
     }
+  }
 
+  const [kernelSpecs, setKernelSpecs] = React.useState<KernelSpec[]>([]);
+  useEffect(() => {
+    ignoreResponse.current = false;
     fetchKernelSpecs();
 
     // Periodically refresh the automatically kernel specs every 5 minutes.
     setInterval(fetchKernelSpecs, 300000);
 
     return () => {
-      ignoreResponse = true;
+      ignoreResponse.current = true;
     };
   }, []);
 
+  const cardHeaderActions = <Button variant="link" icon={<SyncIcon />} onClick={fetchKernelSpecs} />;
+
   return (
     <>
       <Card isCompact isRounded isExpanded={isCardExpanded}>
-        <CardHeader onExpand={onCardExpand}>
+        <CardHeader onExpand={onCardExpand} actions={{ actions: cardHeaderActions, hasNoOffset: true }}>
           <Title headingLevel="h2" size="xl">
             Available Kernel Specs
           </Title>
diff --git a/src/app/Components/NodeList.tsx b/src/app/Components/NodeList.tsx
index b35b8d99..b36ac4da 100644
--- a/src/app/Components/NodeList.tsx
+++ b/src/app/Components/NodeList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -38,7 +38,7 @@ import {
 
 import GpuIcon from '@app/Icons/GpuIcon';
 import { KubernetesNode } from '@data/Kubernetes';
-import { CpuIcon, CubeIcon, FilterIcon, MemoryIcon } from '@patternfly/react-icons';
+import { CpuIcon, CubeIcon, FilterIcon, MemoryIcon, SyncIcon } from '@patternfly/react-icons';
 
 // Hard-coded, dummy data.
 // const kubeNodes: KubernetesNode[] = [
@@ -139,37 +139,38 @@ export const KubernetesNodeList: React.FunctionComponent = () => {
     </DrawerPanelContent>
   );
 
-  // Fetch the kubernetes nodes from the backend (which itself makes a network call to the Kubernetes API).
-  const [nodes, setNodes] = React.useState<KubernetesNode[]>([]);
-  useEffect(() => {
-    let ignoreResponse = false;
-    async function fetchKubernetesNodes() {
-      try {
-        console.log('Refreshing Kubernetes nodes.');
+  const ignoreResponse = useRef(false);
+  async function fetchKubernetesNodes() {
+    try {
+      console.log('Refreshing Kubernetes nodes.');
 
-        // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
-        // We're specifically targeting the API endpoint I setup called "nodes".
-        const response = await fetch('/api/node');
+      // Make a network request to the backend. The server infrastructure handles proxying/routing the request to the correct host.
+      // We're specifically targeting the API endpoint I setup called "nodes".
+      const response = await fetch('/api/node');
 
-        // Get the response, which will be in JSON format, and decode it into an array of KubernetesNode (which is a TypeScript interface that I defined).
-        const respNodes: KubernetesNode[] = await response.json();
+      // Get the response, which will be in JSON format, and decode it into an array of KubernetesNode (which is a TypeScript interface that I defined).
+      const respNodes: KubernetesNode[] = await response.json();
 
-        if (!ignoreResponse) {
-          console.log('Received nodes: ' + JSON.stringify(respNodes));
-          setNodes(respNodes);
-        }
-      } catch (e) {
-        console.error(e);
+      if (!ignoreResponse.current) {
+        console.log('Received nodes: ' + JSON.stringify(respNodes));
+        setNodes(respNodes);
       }
+    } catch (e) {
+      console.error(e);
     }
+  }
 
+  // Fetch the kubernetes nodes from the backend (which itself makes a network call to the Kubernetes API).
+  const [nodes, setNodes] = React.useState<KubernetesNode[]>([]);
+  useEffect(() => {
+    ignoreResponse.current = false;
     fetchKubernetesNodes();
 
     // Periodically refresh the Kubernetes nodes every 120,000ms, or when the user clicks the "refresh" button.
     setInterval(fetchKubernetesNodes, 120000);
 
     return () => {
-      ignoreResponse = true;
+      ignoreResponse.current = true;
     };
   }, []);
 
@@ -261,9 +262,11 @@ export const KubernetesNodeList: React.FunctionComponent = () => {
     </React.Fragment>
   );
 
+  const cardHeaderActions = <Button variant="link" icon={<SyncIcon />} onClick={fetchKubernetesNodes} />;
+
   return (
     <Card isCompact isRounded isExpanded={isCardExpanded}>
-      <CardHeader onExpand={onCardExpand}>
+      <CardHeader onExpand={onCardExpand} actions={{ actions: cardHeaderActions, hasNoOffset: true }}>
         <CardTitle>
           <Title headingLevel="h2" size="xl">
             Kubernetes Nodes