feat: show resource digests on nodes

Signed-off-by: Mark Phelps <[email protected]>

docs/index.html

@@ -29,5 +29,6 @@
     <!-- Docsify v4 -->
     <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-go.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-yaml.min.js"></script>
   </body>
 </html>

server.go

@@ -37,13 +37,14 @@ func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 func (s *Server) setupRoutes() {
 	s.router.Use(middleware.Logger)
 	s.router.Use(middleware.Recoverer)
-	s.router.Use(middleware.StripSlashes)
+	s.router.Mount("/debug", middleware.Profiler())
 
 	if s.ui != nil {
 		s.router.Mount("/", http.FileServer(http.FS(s.ui)))
 	}
 
 	s.router.Group(func(r chi.Router) {
+		r.Use(middleware.StripSlashes)
 		// TODO: make CORS configurable
 		r.Use(cors.Handler(cors.Options{
 			AllowedOrigins:   []string{"http://*", "https://*"},
@@ -133,7 +134,6 @@ func (s *Server) createPipelineResponse(ctx context.Context, pipeline core.Pipel
 			return pipelineResponse{}, err
 		}
 		response.Value = v
-
 		phases = append(phases, response)
 	}
 

ui/package.json

@@ -45,7 +45,6 @@
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   }

ui/src/components/node.tsx

@@ -11,7 +11,6 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { useState } from 'react';
@@ -65,7 +64,11 @@ const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
         )}
       </div>
 
-      <div className="mt-3 flex w-full flex-col">
+      <div className="mt-2 font-mono text-xs text-muted-foreground">
+        {data.value?.digest?.slice(-12)}
+      </div>
+
+      <div className="mt-2 flex w-full flex-col">
         {data.labels &&
           Object.entries(data.labels).length > 0 &&
           Object.entries(data.labels).map(([key, value]) => (

ui/src/components/pipeline.tsx

@@ -82,8 +82,7 @@ export function Pipeline(props: { pipeline: PipelineType }) {
                 height: 20,
                 color: 'currentColor'
               },
-              animated: true,
-              selectable: false,
+              selectable: true,
               style: {
                 strokeWidth: 2
               }
@@ -153,8 +152,9 @@ function getElements(pipeline: PipelineType): FlowPipeline {
         name: phase.name,
         labels: phase.labels || {},
         depends_on: phase.depends_on,
-        source_type: phase.source_type
-      },
+        source_type: phase.source_type,
+        value: phase.value
+    },
       extent: 'parent'
     };
     nodes.push(node);

ui/src/index.tsx

@@ -1,12 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-import { Provider } from 'react-redux';
-import { store } from './store/store';
 
 const container = document.getElementById('app') as HTMLElement;
 const root = createRoot(container);
 root.render(
-  <Provider store={store}>
     <App />
-  </Provider>
-);
+);

ui/src/types/flow.ts

@@ -7,12 +7,18 @@ export interface FlowPipeline {
 
 export type PipelineNode = PhaseNode;
 
+type PhaseNodeValue = {
+  digest: string;
+  [key: string]: unknown;
+};
+
 type PhaseNodeData = {
   pipeline: string;
   name: string;
   labels?: Record<string, string>;
   depends_on?: string;
   source_type?: string;
+  value?: PhaseNodeValue;
 };
 
 export type PhaseNode = Node<PhaseNodeData, 'phase'>;

ui/src/types/pipeline.ts

@@ -4,12 +4,17 @@ export interface Pipeline {
   phases: Phase[];
 }
 
+type Resource = {
+  digest: string;
+  [key: string]: unknown;
+};
+
 export interface Phase {
   name: string;
   depends_on?: string;
   source_type?: string;
   labels?: Record<string, string>;
-  value?: unknown;
+  value?: Resource;
 }
 
 export interface PipelineGroup {