fix: sidebar updates (#1100)

Signed-off-by: bbehnke <[email protected]>
numaproj · Sep 27, 2023 · 5bf92fd · 5bf92fd
1 parent 0c1e1d3
commit 5bf92fd
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 21 deletions.
diff --git a/ui/src/components/common/SlidingSidebar/index.tsx b/ui/src/components/common/SlidingSidebar/index.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import Box from "@mui/material/Box";
-import { NamespaceK8s, NamespaceK8sProps } from "./partials/NamespaceK8s";
+import { K8sEvents, K8sEventsProps } from "./partials/K8sEvents";
 import { VertexDetails, VertexDetailsProps } from "./partials/VertexDetails";
+import { PiplineSpecs, PiplineSpecsProps } from "./partials/PipelineSpecs";
+import { EdgeDetails, EdgeDetailsProps } from "./partials/EdgeDetails";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import slider from "../../../images/slider.png";
@@ -10,27 +12,37 @@ import "./style.css";
 
 export enum SidebarType {
   NAMESPACE_K8s,
+  PIPELINE_K8s,
   VERTEX_DETAILS,
+  EDGE_DETAILS,
+  PIPELINE_SPECS,
 }
 
 const MIN_WIDTH_BY_TYPE = {
   [SidebarType.NAMESPACE_K8s]: 750,
+  [SidebarType.PIPELINE_K8s]: 750,
   [SidebarType.VERTEX_DETAILS]: 750,
+  [SidebarType.EDGE_DETAILS]: 750,
+  [SidebarType.PIPELINE_SPECS]: 750,
 };
 
 export interface SlidingSidebarProps {
   pageWidth: number;
   type: SidebarType;
-  namespaceK8sProps?: NamespaceK8sProps;
+  k8sEventsProps?: K8sEventsProps;
   vertexDetailsProps?: VertexDetailsProps;
+  edgeDetailsProps?: EdgeDetailsProps;
+  pipelineSpecsProps?: PiplineSpecsProps;
   onClose: () => void;
 }
 
 export function SlidingSidebar({
   pageWidth,
   type,
-  namespaceK8sProps,
+  k8sEventsProps,
   vertexDetailsProps,
+  edgeDetailsProps,
+  pipelineSpecsProps,
   onClose,
 }: SlidingSidebarProps) {
   const [width, setWidth] = useState<number>(pageWidth ? pageWidth / 2 : 0);
@@ -70,20 +82,31 @@ export function SlidingSidebar({
   const content = useMemo(() => {
     switch (type) {
       case SidebarType.NAMESPACE_K8s:
-        if (!namespaceK8sProps) {
+      case SidebarType.PIPELINE_K8s:
+        if (!k8sEventsProps) {
           break;
         }
-        return <NamespaceK8s {...namespaceK8sProps} />;
+        return <K8sEvents {...k8sEventsProps} />;
       case SidebarType.VERTEX_DETAILS:
         if (!vertexDetailsProps) {
           break;
         }
         return <VertexDetails {...vertexDetailsProps} />;
+      case SidebarType.EDGE_DETAILS:
+        if (!edgeDetailsProps) {
+          break;
+        }
+        return <EdgeDetails {...edgeDetailsProps} />;
+      case SidebarType.PIPELINE_SPECS:
+        if (!pipelineSpecsProps) {
+          break;
+        }
+        return <PiplineSpecs {...pipelineSpecsProps} />;
       default:
         break;
     }
     return <div>Missing Props</div>;
-  }, [type, namespaceK8sProps]);
+  }, [type, k8sEventsProps]);
 
   return (
     <Box

diff --git a/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import "./style.css";
+
+
+export interface EdgeDetailsProps {
+  namespaceId: string; // TODO
+  edgeId: string;
+}
+
+export function EdgeDetails({ namespaceId, edgeId }: EdgeDetailsProps) {
+  return (
+    <div>TODO Edge details</div>
+  );
+}
diff --git a/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/style.css b/ui/src/components/common/SlidingSidebar/partials/EdgeDetails/style.css
diff --git a/...ngSidebar/partials/NamespaceK8s/index.tsx → ...idingSidebar/partials/K8sEvents/index.tsx b/...ngSidebar/partials/NamespaceK8s/index.tsx → ...idingSidebar/partials/K8sEvents/index.tsx
@@ -18,11 +18,17 @@ import "./style.css";
 
 const MAX_PAGE_SIZE = 6;
 
-export interface NamespaceK8sProps {
+export interface K8sEventsProps {
   namespaceId: string;
+  excludeHeader?: boolean;
+  square?: boolean;
 }
 
-export function NamespaceK8s({ namespaceId }: NamespaceK8sProps) {
+export function K8sEvents({
+  namespaceId,
+  excludeHeader = false,
+  square = false,
+}: K8sEventsProps) {
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [typeFilter, setTypeFilter] = useState<string | undefined>();
@@ -60,7 +66,7 @@ export function NamespaceK8s({ namespaceId }: NamespaceK8sProps) {
       // Reset to page 1 if current page is greater than total pages after filtering
       setPage(1);
     }
-    // Set filtered namespaces with current page of namespaces
+    // Set filtered namespaces with current page
     setFilteredEvents(pages[page - 1] || []);
     setTotalPages(pages.length);
   }, [data, page, typeFilter]);
@@ -195,14 +201,17 @@ export function NamespaceK8s({ namespaceId }: NamespaceK8sProps) {
         height: "100%",
       }}
     >
-      <span className="namespace-k8s-title">Namespace K8s Event Logs</span>
+      {!excludeHeader && (
+        <span className="namespace-k8s-title">K8s Events</span>
+      )}
       <Paper
         sx={{
           display: "flex",
           flexDirection: "column",
           padding: "1rem",
-          marginTop: "2rem",
+          marginTop: excludeHeader ? "0" : "2rem",
         }}
+        square={square}
         elevation={0}
       >
         {loading && (

diff --git a/...ngSidebar/partials/NamespaceK8s/style.css → ...idingSidebar/partials/K8sEvents/style.css b/...ngSidebar/partials/NamespaceK8s/style.css → ...idingSidebar/partials/K8sEvents/style.css
diff --git a/ui/src/components/common/SlidingSidebar/partials/PipelineSpecs/index.tsx b/ui/src/components/common/SlidingSidebar/partials/PipelineSpecs/index.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import "./style.css";
+
+
+export interface PiplineSpecsProps {
+  namespaceId: string; // TODO
+}
+
+export function PiplineSpecs({ namespaceId }: PiplineSpecsProps) {
+  return (
+    <div>TODO SPECS</div>
+  );
+}
diff --git a/ui/src/components/common/SlidingSidebar/partials/PipelineSpecs/style.css b/ui/src/components/common/SlidingSidebar/partials/PipelineSpecs/style.css
diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx
@@ -3,6 +3,7 @@ import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import { SpecEditor } from "./partials/SpecEditor";
+import { K8sEvents } from "../K8sEvents";
 
 import "./style.css";
 
@@ -18,11 +19,16 @@ export enum VertexType {
 }
 
 export interface VertexDetailsProps {
+  namespaceId: string;
   vertexId: string;
   vertexSpecs: any[];
 }
 
-export function VertexDetails({ vertexId, vertexSpecs }: VertexDetailsProps) {
+export function VertexDetails({
+  namespaceId,
+  vertexId,
+  vertexSpecs,
+}: VertexDetailsProps) {
   const [vertexSpec, setVertexSpec] = useState<any>();
   const [vertexType, setVertexType] = useState<VertexType | undefined>();
   const [tabValue, setTabValue] = useState(PODS_VIEW_TAB_INDEX);
@@ -91,7 +97,11 @@ export function VertexDetails({ vertexId, vertexSpecs }: VertexDetailsProps) {
     >
       {header}
       <Box sx={{ marginTop: "1rem", borderBottom: 1, borderColor: "divider" }}>
-        <Tabs className="vertex-details-tabs" value={tabValue} onChange={handleTabChange}>
+        <Tabs
+          className="vertex-details-tabs"
+          value={tabValue}
+          onChange={handleTabChange}
+        >
           <Tab
             className={
               tabValue === PODS_VIEW_TAB_INDEX
@@ -158,7 +168,9 @@ export function VertexDetails({ vertexId, vertexSpecs }: VertexDetailsProps) {
         role="tabpanel"
         hidden={tabValue !== K8S_EVENTS_TAB_INDEX}
       >
-        {tabValue === K8S_EVENTS_TAB_INDEX && <div>TODO K8s Events</div>}
+        {tabValue === K8S_EVENTS_TAB_INDEX && (
+          <K8sEvents namespaceId={namespaceId} excludeHeader square />
+        )}
       </div>
     </Box>
   );

diff --git a/ui/src/components/pages/Namespace/index.tsx b/ui/src/components/pages/Namespace/index.tsx
@@ -29,7 +29,7 @@ export function Namespaces() {
     }
     setSidebarProps({
       type: SidebarType.NAMESPACE_K8s,
-      namespaceK8sProps: { namespaceId },
+      k8sEventsProps: { namespaceId },
     });
   }, [namespaceId, setSidebarProps]);
 

diff --git a/ui/src/components/pages/Pipeline/index.tsx b/ui/src/components/pages/Pipeline/index.tsx
@@ -15,7 +15,6 @@ import { PipelineSummaryStatus } from "./partials/PipelineSummaryStatus";
 import { PipelineISBStatus } from "./partials/PipelineISBStatus";
 
 import "./style.css";
-import React from "react";
 
 export function Pipeline() {
   // TODO needs to be able to be given namespaceId from parent for NS only install

diff --git a/ui/src/components/pages/Pipeline/partials/Graph/index.tsx b/ui/src/components/pages/Pipeline/partials/Graph/index.tsx
@@ -280,7 +280,16 @@ export default function Graph(props: GraphProps) {
     setEdgeOpen(true);
     setShowSpec(false);
     setNodeOpen(false);
-  }, []);
+    if (setSidebarProps) {
+      setSidebarProps({
+        type: SidebarType.EDGE_DETAILS,
+        edgeDetailsProps: {
+          namespaceId,
+          edgeId: edge.id,
+        },
+      });
+    }
+  }, [setSidebarProps, namespaceId]);
 
   // This has been added to make sure that edge container refreshes on edges being refreshed
   useEffect(() => {
@@ -313,13 +322,14 @@ export default function Graph(props: GraphProps) {
         setSidebarProps({
           type: SidebarType.VERTEX_DETAILS,
           vertexDetailsProps: {
+            namespaceId,
             vertexId: node.id,
             vertexSpecs: data.pipeline?.spec?.vertices || [],
           },
         });
       }
     },
-    [setSidebarProps, namespaceId, pipelineId, data.pipeline]
+    [setSidebarProps, namespaceId, data.pipeline]
   );
 
   // This has been added to make sure that node container refreshes on nodes being refreshed

diff --git a/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx b/ui/src/components/pages/Pipeline/partials/PipelineSummaryStatus/index.tsx
@@ -16,7 +16,7 @@ export function PipelineSummaryStatus({ pipeline }) {
     }
     setSidebarProps({
       type: SidebarType.NAMESPACE_K8s,
-      namespaceK8sProps: { namespaceId },
+      k8sEventsProps: { namespaceId },
     });
   }, [namespaceId, setSidebarProps]);
 
@@ -25,8 +25,8 @@ export function PipelineSummaryStatus({ pipeline }) {
       return;
     }
     setSidebarProps({
-      type: SidebarType.SPECS,
-      namespaceK8sProps: { namespaceId },
+      type: SidebarType.PIPELINE_SPECS,
+      pipelineSpecsProps: { namespaceId },
     });
   }, [namespaceId, setSidebarProps]);
   return (