feat: Mono vertex UI (#1941)

Signed-off-by: veds-g <[email protected]>
numaproj · Aug 16, 2024 · c14abd5 · c14abd5
1 parent 7b85e89
commit c14abd5
Show file tree

Hide file tree

Showing 38 changed files with 2,192 additions and 254 deletions.
diff --git a/ui/src/components/common/Routes/index.tsx b/ui/src/components/common/Routes/index.tsx
@@ -2,6 +2,7 @@ import { useLocation } from "react-router-dom";
 import { Cluster } from "../../pages/Cluster";
 import { Namespaces } from "../../pages/Namespace";
 import { Pipeline } from "../../pages/Pipeline";
+import { MonoVertex } from "../../pages/MonoVertex";
 
 export interface RoutesProps {
   managedNamespace?: string;
@@ -12,11 +13,14 @@ export function Routes(props: RoutesProps) {
   const query = new URLSearchParams(location.search);
   const ns = query.get("namespace") || "";
   const pl = query.get("pipeline") || "";
+  const type = query.get("type") || "";
 
   const { managedNamespace } = props;
 
   if (managedNamespace) {
-    return pl ? (
+    return type ? (
+      <MonoVertex namespaceId={managedNamespace} />
+    ) : pl ? (
       <Pipeline namespaceId={managedNamespace} />
     ) : (
       <Namespaces namespaceId={managedNamespace} />
@@ -25,6 +29,8 @@ export function Routes(props: RoutesProps) {
 
   if (ns === "" && pl === "") {
     return <Cluster />;
+  } else if (type !== "") {
+    return <MonoVertex />;
   } else if (pl !== "") {
     return <Pipeline />;
   } else {

diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/index.tsx
@@ -12,7 +12,8 @@ import { CloseModal } from "../CloseModal";
 import sourceIcon from "../../../../../images/source.png";
 import sinkIcon from "../../../../../images/sink.png";
 import mapIcon from "../../../../../images/map.png";
-import reducIcon from "../../../../../images/reduce.png";
+import reduceIcon from "../../../../../images/reduce.png";
+import monoVertexIcon from "../../../../../images/monoVertex.svg";
 
 import "./style.css";
 
@@ -27,6 +28,7 @@ export enum VertexType {
   SINK,
   MAP,
   REDUCE,
+  MONOVERTEX,
 }
 
 export interface VertexDetailsProps {
@@ -71,6 +73,8 @@ export function VertexDetails({
       setVertexType(VertexType.MAP);
     } else if (type === "sink") {
       setVertexType(VertexType.SINK);
+    } else if (type === "monoVertex") {
+      setVertexType(VertexType.MONOVERTEX);
     }
     setVertexSpec(vertexSpecs);
   }, [vertexSpecs, type]);
@@ -98,7 +102,7 @@ export function VertexDetails({
         return (
           <Box sx={headerContainerStyle}>
             <img
-              src={reducIcon}
+              src={reduceIcon}
               alt="reduce vertex"
               className={"vertex-details-header-icon"}
             />
@@ -127,6 +131,17 @@ export function VertexDetails({
             <span className={textClass}>Sink Vertex</span>
           </Box>
         );
+      case VertexType.MONOVERTEX:
+        return (
+          <Box sx={headerContainerStyle}>
+            <img
+              src={monoVertexIcon}
+              alt="mono vertex"
+              className={"vertex-details-header-icon"}
+            />
+            <span className={textClass}>Mono Vertex</span>
+          </Box>
+        );
       default:
         return (
           <Box sx={headerContainerStyle}>
@@ -246,6 +261,7 @@ export function VertexDetails({
             namespaceId={namespaceId}
             pipelineId={pipelineId}
             vertexId={vertexId}
+            type={type}
           />
         )}
       </div>
@@ -261,6 +277,7 @@ export function VertexDetails({
               pipelineId={pipelineId}
               vertexId={vertexId}
               vertexSpec={vertexSpec}
+              type={type}
               setModalOnClose={handleUpdateModalClose}
               refresh={refresh}
             />
@@ -276,6 +293,7 @@ export function VertexDetails({
           <ProcessingRates
             vertexId={vertexId}
             pipelineId={pipelineId}
+            type={type}
             vertexMetrics={vertexMetrics}
           />
         )}
@@ -288,8 +306,10 @@ export function VertexDetails({
         {tabValue === K8S_EVENTS_TAB_INDEX && (
           <K8sEvents
             namespaceId={namespaceId}
-            pipelineId={pipelineId}
-            vertexId={vertexId}
+            pipelineId={
+              type === "monoVertex" ? `${pipelineId} (MonoVertex)` : pipelineId
+            }
+            vertexId={type === "monoVertex" ? undefined : vertexId}
             excludeHeader
             square
           />

diff --git a/...omponents/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx b/...omponents/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx
@@ -13,12 +13,14 @@ import "./style.css";
 export interface ProcessingRatesProps {
   vertexId: string;
   pipelineId: string;
+  type: string;
   vertexMetrics: any;
 }
 
 export function ProcessingRates({
   vertexMetrics,
   pipelineId,
+  type,
   vertexId,
 }: ProcessingRatesProps) {
   const [foundRates, setFoundRates] = useState<PipelineVertexMetric[]>([]);
@@ -27,13 +29,15 @@ export function ProcessingRates({
     if (!vertexMetrics || !pipelineId || !vertexId) {
       return;
     }
-    const vertexData = vertexMetrics[vertexId];
+    const vertexData =
+      type === "monoVertex" ? [vertexMetrics] : vertexMetrics[vertexId];
     if (!vertexData) {
       return;
     }
     const rates: PipelineVertexMetric[] = [];
     vertexData.forEach((item: any, index: number) => {
-      if (item.pipeline !== pipelineId || !item.processingRates) {
+      const key = type === "monoVertex" ? "monoVertex" : "pipeline";
+      if (item?.[key] !== pipelineId || !item.processingRates) {
         return; // continue
       }
       rates.push({
@@ -64,7 +68,7 @@ export function ProcessingRates({
         <Table stickyHeader>
           <TableHead>
             <TableRow>
-              <TableCell>Partition</TableCell>
+              {type !== "monoVertex" && <TableCell>Partition</TableCell>}
               <TableCell>1m</TableCell>
               <TableCell>5m</TableCell>
               <TableCell>15m</TableCell>
@@ -81,7 +85,9 @@ export function ProcessingRates({
             {!!foundRates.length &&
               foundRates.map((metric) => (
                 <TableRow key={metric.partition}>
-                  <TableCell>{metric.partition}</TableCell>
+                  {type !== "monoVertex" && (
+                    <TableCell>{metric.partition}</TableCell>
+                  )}
                   <TableCell>{metric.oneM}/sec</TableCell>
                   <TableCell>{metric.fiveM}/sec</TableCell>
                   <TableCell>{metric.fifteenM}/sec</TableCell>

diff --git a/...c/components/common/SlidingSidebar/partials/VertexDetails/partials/VertexUpdate/index.tsx b/...c/components/common/SlidingSidebar/partials/VertexDetails/partials/VertexUpdate/index.tsx
@@ -20,6 +20,7 @@ export interface VertexUpdateProps {
   pipelineId: string;
   vertexId: string;
   vertexSpec: any;
+  type: string;
   setModalOnClose?: (props: SpecEditorModalProps | undefined) => void;
   refresh: () => void;
 }
@@ -30,6 +31,7 @@ export function VertexUpdate({
   vertexId,
   vertexSpec,
   setModalOnClose,
+  type: vertexType,
   refresh,
 }: VertexUpdateProps) {
   const [loading, setLoading] = useState(false);
@@ -225,7 +227,11 @@ export function VertexUpdate({
     >
       <SpecEditor
         initialYaml={currentSpec}
-        viewType={isReadOnly ? ViewType.READ_ONLY : ViewType.TOGGLE_EDIT}
+        viewType={
+          isReadOnly || vertexType === "monoVertex"
+            ? ViewType.READ_ONLY
+            : ViewType.TOGGLE_EDIT
+        }
         loading={loading}
         mutationKey={mutationKey}
         editResetKey={mutationKey}