feat: DAG Behavioral Changes (Canvas resource, Source Models, ... buttons)

runtime/parser/parse_node.go

@@ -248,26 +248,26 @@ func (p *Parser) parseStem(paths []string, ymlPath, yml, sqlPath, sql string) (*
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'type'", v)
-				break
-			}
-			res.Kind, err = ParseResourceKind(v)
-			if err != nil {
-				break
+			} else {
+				res.Kind, err = ParseResourceKind(v)
 			}
 		case "name":
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'name'", v)
-				break
+			} else {
+				res.Name = v
 			}
-			res.Name = v
 		case "connector":
 			v, ok := v.(string)
 			if !ok {
 				err = fmt.Errorf("invalid type %T for property 'connector'", v)
-				break
+			} else {
+				res.Connector = v
 			}
-			res.Connector = v
+		}
+		if err != nil {
+			break
 		}
 	}
 	if err != nil {

runtime/parser/parser.go

@@ -646,12 +646,13 @@ func (p *Parser) parsePaths(ctx context.Context, paths []string) error {
 	// NOTE 2: Using a map since the two-way check (necessary for reparses) may match the same resource twice.
 	modelsWithNameErrs := make(map[ResourceName]string)
 	for _, r := range p.insertedResources {
-		if r.Name.Kind == ResourceKindSource {
+		switch r.Name.Kind {
+		case ResourceKindSource:
 			n := ResourceName{Kind: ResourceKindModel, Name: r.Name.Name}.Normalized()
 			if _, ok := p.Resources[n]; ok {
 				modelsWithNameErrs[n] = r.Name.Name
 			}
-		} else if r.Name.Kind == ResourceKindModel {
+		case ResourceKindModel:
 			n := ResourceName{Kind: ResourceKindSource, Name: r.Name.Name}.Normalized()
 			if r2, ok := p.Resources[n]; ok {
 				modelsWithNameErrs[r.Name.Normalized()] = r2.Name.Name

web-admin/src/components/layout/ContentContainer.svelte

@@ -2,10 +2,12 @@
   export let title = "";
   export let maxWidth = 800;
   export let showTitle = true;
+  export let flush = false;
 </script>
 
 <main
-  class="bg-surface-base size-full pt-8 pb-16 lg:pt-12 flex flex-col items-center px-8 sm:px-16 lg:px-32 2xl:px-40 overflow-y-auto"
+  class="bg-surface-base size-full pt-8 pb-16 lg:pt-12 flex flex-col items-center overflow-y-auto"
+  class:padded={!flush}
   style="scrollbar-gutter: stable;"
 >
   <section class="w-full flex flex-col gap-y-3" style:max-width="{maxWidth}px">
@@ -21,3 +23,9 @@
     <slot />
   </section>
 </main>
+
+<style lang="postcss">
+  .padded {
+    @apply px-8 sm:px-16 lg:px-32 2xl:px-40;
+  }
+</style>

web-admin/src/components/nav/LeftNav.svelte

@@ -9,17 +9,20 @@
     label: string;
     route: string;
     hasPermission?: boolean;
+    matchPrefix?: boolean;
   }[];
 </script>
 
 <div class="nav-items" style:min-width={minWidth}>
   <!-- if hasPermission is not provided, it will be undefined -->
-  {#each navItems as { label, route, hasPermission = true } (route)}
+  {#each navItems as { label, route, hasPermission = true, matchPrefix = false } (route)}
     {#if hasPermission}
       <LeftNavItem
         {label}
         link={`${basePage}${route}`}
-        selected={$page.route.id === `${baseRoute}${route}`}
+        selected={matchPrefix
+          ? ($page.route.id?.startsWith(`${baseRoute}${route}`) ?? false)
+          : $page.route.id === `${baseRoute}${route}`}
       />
     {/if}
   {/each}

web-admin/src/features/projects/status/resource-table/ProjectResources.svelte

@@ -40,6 +40,8 @@
   ]);
   filterSync.init($page.url);
 
+  export let showHeader = true;
+
   let isConfirmDialogOpen = false;
   let searchText = parseStringParam($page.url.searchParams.get("q"));
   let selectedTypes = parseArrayParam($page.url.searchParams.get("kind"));
@@ -69,9 +71,10 @@
 
   type StatusFilter = { label: string; value: string };
   const statusFilters: StatusFilter[] = [
-    { label: "Error", value: "error" },
-    { label: "Warn", value: "warn" },
     { label: "OK", value: "ok" },
+    { label: "Pending", value: "pending" },
+    { label: "Warning", value: "warning" },
+    { label: "Errored", value: "errored" },
   ];
 
   // Resource types available for filtering (excluding internal types)
@@ -167,7 +170,9 @@
 </script>
 
 <section class="flex flex-col gap-y-4">
-  <h2 class="text-lg font-medium">Resources</h2>
+  {#if showHeader}
+    <h2 class="text-lg font-medium">Resources</h2>
+  {/if}
 
   <TableToolbar
     bind:searchText

web-admin/src/features/projects/status/resource-table/utils.spec.ts

@@ -26,25 +26,32 @@ function makeResource(
 }
 
 describe("getResourceStatus", () => {
-  it("returns 'error' when resource has reconcileError", () => {
+  it("returns 'errored' when resource has reconcileError", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileError: "something broke",
     });
-    expect(getResourceStatus(r)).toBe("error");
+    expect(getResourceStatus(r)).toBe("errored");
   });
 
-  it("returns 'warn' for PENDING status", () => {
+  it("returns 'warning' for test-only failures", () => {
+    const r = makeResource(ResourceKind.Model, "m1", {
+      reconcileError: "tests failed: some test",
+    });
+    expect(getResourceStatus(r)).toBe("warning");
+  });
+
+  it("returns 'pending' for PENDING status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_PENDING,
     });
-    expect(getResourceStatus(r)).toBe("warn");
+    expect(getResourceStatus(r)).toBe("pending");
   });
 
-  it("returns 'warn' for RUNNING status", () => {
+  it("returns 'pending' for RUNNING status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_RUNNING,
     });
-    expect(getResourceStatus(r)).toBe("warn");
+    expect(getResourceStatus(r)).toBe("pending");
   });
 
   it("returns 'ok' for IDLE status", () => {
@@ -61,12 +68,12 @@ describe("getResourceStatus", () => {
     expect(getResourceStatus(r)).toBe("ok");
   });
 
-  it("error takes priority over warn status", () => {
+  it("error takes priority over pending status", () => {
     const r = makeResource(ResourceKind.Model, "m1", {
       reconcileError: "error msg",
       reconcileStatus: V1ReconcileStatus.RECONCILE_STATUS_RUNNING,
     });
-    expect(getResourceStatus(r)).toBe("error");
+    expect(getResourceStatus(r)).toBe("errored");
   });
 });
 
@@ -115,14 +122,14 @@ describe("filterResources", () => {
     expect(result[0].meta?.name?.name).toBe("my_model");
   });
 
-  it("filters by status 'error'", () => {
-    const result = filterResources(resources, [], "", ["error"]);
+  it("filters by status 'errored'", () => {
+    const result = filterResources(resources, [], "", ["errored"]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("errored_model");
   });
 
-  it("filters by status 'warn'", () => {
-    const result = filterResources(resources, [], "", ["warn"]);
+  it("filters by status 'pending'", () => {
+    const result = filterResources(resources, [], "", ["pending"]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("my_metrics");
   });
@@ -134,7 +141,7 @@ describe("filterResources", () => {
 
   it("combines kind + status + search filters", () => {
     const result = filterResources(resources, [ResourceKind.Model], "errored", [
-      "error",
+      "errored",
     ]);
     expect(result).toHaveLength(1);
     expect(result[0].meta?.name?.name).toBe("errored_model");

web-admin/src/routes/[organization]/[project]/-/status/+layout.svelte

@@ -6,7 +6,6 @@
   import LeftNav from "@rilldata/web-admin/components/nav/LeftNav.svelte";
 
   $: basePage = `/${$page.params.organization}/${$page.params.project}/-/status`;
-
   const navItems = [
     {
       label: "Overview",
@@ -22,6 +21,7 @@
       label: "Resources",
       route: "/resources",
       hasPermission: true,
+      matchPrefix: true,
     },
     {
       label: "Tables",

web-admin/src/routes/[organization]/[project]/-/status/resources/+layout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  $: basePath = `/${$page.params.organization}/${$page.params.project}/-/status/resources`;
+  $: isGraphView = $page.route.id?.endsWith("/graph") ?? false;
+</script>
+
+<div class="flex flex-col size-full min-w-0 gap-y-4">
+  <div class="flex items-center justify-between">
+    <h2 class="text-lg font-medium">Resources</h2>
+    <div class="view-toggle">
+      <a href={basePath} class="toggle-btn" class:active={!isGraphView}>
+        List
+      </a>
+      <a href="{basePath}/graph" class="toggle-btn" class:active={isGraphView}>
+        Graph
+      </a>
+    </div>
+  </div>
+  <slot />
+</div>
+
+<style lang="postcss">
+  .view-toggle {
+    @apply flex rounded-sm border border-gray-200 overflow-hidden;
+  }
+  .toggle-btn {
+    @apply px-3 py-1 text-sm font-medium text-fg-secondary no-underline;
+  }
+  .toggle-btn:hover {
+    @apply bg-surface-hover;
+  }
+  .toggle-btn.active {
+    @apply bg-primary-100 text-primary-600;
+  }
+</style>

web-admin/src/routes/[organization]/[project]/-/status/resources/+page.svelte

@@ -3,5 +3,5 @@
 </script>
 
 <div class="size-full min-h-[600px]">
-  <ProjectResources />
+  <ProjectResources showHeader={false} />
 </div>