Updated UI to allow expanding nodes to view their pods + added other …

…info
Scusemua · Mar 1, 2024 · 96a8592 · 96a8592
1 parent cfc29da
commit 96a8592
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 162 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-icons": "^5.1.1",
     "@patternfly/react-styles": "^5.1.1",
+    "@patternfly/react-table": "^5.2.0",
     "@storybook/builder-webpack5": "^7.5.3",
     "jest-fetch-mock": "^3.0.3",
     "react": "^18",

diff --git a/server/domain/types.go b/server/domain/types.go
@@ -3,7 +3,6 @@ package domain
 import (
 	"encoding/json"
 	"errors"
-	"time"
 
 	"github.com/gin-gonic/gin"
 	gateway "github.com/scusemua/workload-driver-react/m/v2/server/api/proto"
@@ -80,7 +79,7 @@ type NodeProvider interface {
 type KubernetesNode struct {
 	NodeId          string           `json:"NodeId"`
 	Pods            []*KubernetesPod `json:"Pods"`
-	Age             time.Duration    `json:"Age"`
+	Age             string    `json:"Age"` // Convert the time.Duration to a string
 	IP              string           `json:"IP"`
 	CapacityCPU     float64          `json:"CapacityCPU"`
 	CapacityMemory  float64          `json:"CapacityMemory"`
@@ -90,8 +89,6 @@ type KubernetesNode struct {
 	AllocatedMemory float64          `json:"AllocatedMemory"`
 	AllocatedGPUs   float64          `json:"AllocatedGPUs"`
 	AllocatedVGPUs  float64          `json:"AllocatedVGPUs"`
-
-	Valid bool `json:"Valid"` // Used to determine if the struct was sent/received correctly over the network.
 }
 
 func (kn *KubernetesNode) String() string {
@@ -103,10 +100,10 @@ func (kn *KubernetesNode) String() string {
 	return string(out)
 }
 
-type KubernetesPod struct {
+type KubernetesPod struct { 
 	PodName  string        `json:"PodName"`
 	PodPhase string        `json:"PodPhase"`
-	PodAge   time.Duration `json:"PodAge"`
+	PodAge   string `json:"PodAge"` // Convert the time.Duration to a string
 	PodIP    string        `json:"PodIP"`
 
 	Valid bool `json:"Valid"` // Used to determine if the struct was sent/received correctly over the network.

diff --git a/server/handlers/k8s_node_handler.go → server/handlers/node_handler.go b/server/handlers/k8s_node_handler.go → server/handlers/node_handler.go
@@ -140,7 +140,8 @@ func (h *KubeNodeHttpHandler) HandleRequest(c *gin.Context) {
 					PodName:  pod.ObjectMeta.Name,
 					PodPhase: string(pod.Status.Phase),
 					PodIP:    pod.Status.PodIP,
-					PodAge:   time.Since(pod.GetCreationTimestamp().Time).Round(time.Second),
+					PodAge:   time.Since(pod.GetCreationTimestamp().Time).Round(time.Second).String(),
+					Valid:    true,
 				}
 
 				kubePods = append(kubePods, kubePod)
@@ -156,7 +157,7 @@ func (h *KubeNodeHttpHandler) HandleRequest(c *gin.Context) {
 			CapacityCPU:    allocCpu,
 			CapacityMemory: allocMem / 976600.0, // Convert from Ki to GB.
 			Pods:           kubePods,
-			Age:            time.Since(node.GetCreationTimestamp().Time).Round(time.Second),
+			Age:            time.Since(node.GetCreationTimestamp().Time).Round(time.Second).String(),
 			IP:             node.Status.Addresses[0].Address,
 			// CapacityGPUs:    0,
 			// CapacityVGPUs:   0,

diff --git a/src/app/Components/KernelList.tsx b/src/app/Components/KernelList.tsx
@@ -463,12 +463,13 @@ export const KernelList: React.FunctionComponent = () => {
   const drawerContent = (
     <React.Fragment>
       <DataList
+        isCompact
         aria-label="data list"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
       >
-        {filteredKernels.map((kernel) => (
-          <DataListItem key={kernel.kernelId} id="content-padding-item1">
+        {filteredKernels.map((kernel, idx) => (
+          <DataListItem key={kernel.kernelId} id={'content-padding-item-' + idx}>
             <DataListItemRow>
               <DataListItemCells
                 dataListCells={[
@@ -489,16 +490,18 @@ export const KernelList: React.FunctionComponent = () => {
                   </DataListCell>,
                   <DataListAction
                     key="actions"
-                    aria-labelledby="content-padding-item1 content-padding-action1"
-                    id="content-padding-action1"
+                    aria-labelledby={'content-padding-item-' + idx + ' content-action-item-' + idx}
+                    id={'content-padding-item-' + idx}
                     aria-label="Actions"
                   >
                     <Stack>
                       <StackItem>
-                        <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                        <Button variant={ButtonVariant.link}>Execute Code</Button>
                       </StackItem>
                       <StackItem>
-                        <Button variant={ButtonVariant.link}>Link Button</Button>
+                        <Button variant={ButtonVariant.link} isDanger>
+                          Terminate
+                        </Button>
                       </StackItem>
                     </Stack>
                   </DataListAction>,