Added refresh buttons to the cards.

Scusemua · Mar 1, 2024 · 6a3f719 · 6a3f719
1 parent 54be85e
commit 6a3f719
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 63 deletions.
diff --git 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,35 +245,37 @@ 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();
 
     // Periodically refresh the automatically kernels every 30 seconds.
     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
@@ -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
@@ -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