WIP commit

web-admin/src/features/dashboards/listing/DashboardsTable.svelte

@@ -2,15 +2,15 @@
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { type Row, flexRender } from "@tanstack/svelte-table";
+  import { flexRender, type Row } from "@tanstack/svelte-table";
   import { createEventDispatcher } from "svelte";
   import Table from "../../../components/table/Table.svelte";
   import DashboardsError from "./DashboardsError.svelte";
   import DashboardsTableCompositeCell from "./DashboardsTableCompositeCell.svelte";
   import DashboardsTableEmpty from "./DashboardsTableEmpty.svelte";
   import DashboardsTableHeader from "./DashboardsTableHeader.svelte";
   import NoDashboardsCTA from "./NoDashboardsCTA.svelte";
-  import { type DashboardResource, useDashboardsV2 } from "./selectors";
+  import { useDashboardsV2, type DashboardResource } from "./selectors";
 
   export let isEmbedded = false;
 
@@ -30,13 +30,27 @@
     {
       id: "composite",
       cell: ({ row }) => {
-        const dashboard = row.original as DashboardResource;
+        const dashboardResource = row.original as DashboardResource;
+        const resource = dashboardResource.resource;
+        const refreshedOn = dashboardResource.refreshedOn;
+        const name = resource.meta.name.name;
+
+        // If not a Metrics Explorer, it's a Custom Dashboard.
+        const isMetricsExplorer = !!resource?.metricsView;
+        const title = isMetricsExplorer
+          ? resource.metricsView.spec.title
+          : resource.dashboard.spec.title;
+        const description = isMetricsExplorer
+          ? resource.metricsView.spec.description
+          : "";
+
         return flexRender(DashboardsTableCompositeCell, {
-          name: dashboard.resource.meta.name.name,
-          title: dashboard.resource.metricsView.spec.title,
-          lastRefreshed: dashboard.refreshedOn,
-          description: dashboard.resource.metricsView.spec.description,
-          error: dashboard.resource.meta.reconcileError,
+          name,
+          title,
+          lastRefreshed: refreshedOn,
+          description,
+          error: resource.meta.reconcileError,
+          isMetricsExplorer,
           isEmbedded,
         });
       },

web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
+  import CustomDashboardIcon from "@rilldata/web-common/components/icons/CustomDashboardIcon.svelte";
+  import MetricsExplorerIcon from "@rilldata/web-common/components/icons/MetricsExplorerIcon.svelte";
   import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
@@ -11,6 +12,7 @@
   export let lastRefreshed: string;
   export let description: string;
   export let error: string;
+  export let isMetricsExplorer: boolean;
   export let isEmbedded: boolean;
 
   $: organization = $page.params.organization;
@@ -23,11 +25,19 @@
 <svelte:element
   this={isEmbedded ? "button" : "a"}
   class="flex flex-col gap-y-0.5 group px-4 py-[5px] w-full"
-  href={isEmbedded ? undefined : `/${organization}/${project}/${name}`}
+  href={isEmbedded
+    ? undefined
+    : isMetricsExplorer
+      ? `/${organization}/${project}/${name}`
+      : `/${organization}/${project}/-/dashboards/${name}`}
   role={isEmbedded ? "button" : "link"}
 >
   <div class="flex gap-x-2 items-center">
-    <DashboardIcon size={"14px"} className="text-slate-500" />
+    {#if isMetricsExplorer}
+      <MetricsExplorerIcon size={"14px"} className="text-slate-500" />
+    {:else}
+      <CustomDashboardIcon size={"14px"} className="text-slate-500" />
+    {/if}
     <div
       class="text-gray-700 text-sm font-semibold group-hover:text-primary-600"
     >

web-admin/src/features/dashboards/listing/NoDashboardsCTA.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import DashboardIcon from "@rilldata/web-common/components/icons/DashboardIcon.svelte";
+  import MetricsExplorerIcon from "@rilldata/web-common/components/icons/MetricsExplorerIcon.svelte";
 </script>
 
 <div
   class="m-auto mt-20 pb-10 flex-col justify-center items-center gap-y-4 inline-flex"
 >
   <div class="flex flex-col justify-center items-center">
     <div class="relative">
-      <DashboardIcon className="text-slate-300 w-12 h-12" />
+      <MetricsExplorerIcon className="text-slate-300 w-12 h-12" />
     </div>
   </div>
   <div

web-admin/src/features/dashboards/listing/selectors.ts

@@ -241,10 +241,14 @@ export function useDashboardsV2(
   return createRuntimeServiceListResources(instanceId, undefined, {
     query: {
       select: (data) => {
-        const dashboards = data.resources.filter((res) => res.metricsView);
-        return dashboards.map((db) => {
-          const refreshedOn = getDashboardRefreshedOn(db, data.resources);
-          return { resource: db, refreshedOn };
+        // Filter for Metrics Explorers and Custom Dashboards
+        const resources = data.resources.filter(
+          (res) => res.metricsView || res.dashboard,
+        );
+        console.log("resources", resources);
+        return resources.map((resource) => {
+          const refreshedOn = getDashboardRefreshedOn(resource, data.resources);
+          return { resource, refreshedOn };
         });
       },
     },

web-admin/src/routes/[organization]/[project]/-/dashboards/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = ({ params }) => {
+  throw redirect(307, `/${params.organization}/${params.project}`);
+};

web-admin/src/routes/[organization]/[project]/-/dashboards/[dashboard]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import CustomDashboard from "@rilldata/web-common/features/custom-dashboards/CustomDashboard.svelte";
+  import { useCustomDashboard } from "@rilldata/web-common/features/custom-dashboards/selectors";
+  import type { V1DashboardComponent } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  $: customDashboardName = $page.params.dashboard;
+  $: query = useCustomDashboard($runtime.instanceId, customDashboardName);
+  $: dashboard = $query.data?.dashboard?.spec;
+  $: columns = dashboard?.grid?.columns ?? 10;
+  $: gap = dashboard?.grid?.gap ?? 1;
+  $: charts = dashboard?.components ?? ([] as V1DashboardComponent[]);
+</script>
+
+<CustomDashboard
+  snap={false}
+  {gap}
+  {charts}
+  {columns}
+  showGrid={false}
+  selectedChartName=""
+/>

web-common/src/components/dropdown-menu/__stories__/DropdownMenu.stories.svelte

@@ -2,9 +2,9 @@
   import { Meta, Story } from "@storybook/addon-svelte-csf";
   import * as DropdownMenu from "..";
 
-  import CopyIcon from "../../icons/CopyIcon.svelte";
-  import DashboardIcon from "../../icons/DashboardIcon.svelte";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import CopyIcon from "../../icons/CopyIcon.svelte";
+  import MetricsExplorerIcon from "../../icons/MetricsExplorerIcon.svelte";
 
   let subMenuOpen = false;
 </script>
@@ -34,7 +34,7 @@
         Option 1
       </DropdownMenu.Item>
       <DropdownMenu.Item>
-        <DashboardIcon className="w-4 h-4 mr-2" />
+        <MetricsExplorerIcon className="w-4 h-4 mr-2" />
         Option 2
       </DropdownMenu.Item>
     </DropdownMenu.Content>

web-common/src/components/icons/CustomDashboardIcon.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  export let size = "1em";
+  export let color = "currentColor";
+  export let className = "";
+</script>
+
+<svg
+  height={size}
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+>
+  <g clip-path="url(#clip0_10949_303000)">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.000976562)"
+      fill={"white"}
+      fill-opacity="0.01"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.00016 1.33398C1.63197 1.33398 1.3335 1.63246 1.3335 2.00065V8.00065C1.3335 8.36884 1.63197 8.66732 2.00016 8.66732H6.66683C7.03502 8.66732 7.3335 8.36884 7.3335 8.00065V2.00065C7.3335 1.63246 7.03502 1.33398 6.66683 1.33398H2.00016ZM2.66683 7.33398V2.66732H6.00016V7.33398H2.66683Z"
+      fill={color}
+    />
+    <path
+      d="M9.3335 1.33398C8.96531 1.33398 8.66683 1.63246 8.66683 2.00065V5.33398C8.66683 5.70217 8.96531 6.00065 9.3335 6.00065H14.0002C14.3684 6.00065 14.6668 5.70217 14.6668 5.33398V2.00065C14.6668 1.63246 14.3684 1.33398 14.0002 1.33398H9.3335Z"
+      fill={color}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.66683 8.00065C8.66683 7.63246 8.96531 7.33398 9.3335 7.33398H14.0002C14.3684 7.33398 14.6668 7.63246 14.6668 8.00065V14.0007C14.6668 14.3688 14.3684 14.6673 14.0002 14.6673H9.3335C8.96531 14.6673 8.66683 14.3688 8.66683 14.0007V8.00065ZM10.0002 8.66732V13.334H13.3335V8.66732H10.0002Z"
+      fill={color}
+    />
+    <path
+      d="M2.00016 10.0007C1.63197 10.0007 1.3335 10.2991 1.3335 10.6673V14.0007C1.3335 14.3688 1.63197 14.6673 2.00016 14.6673H6.66683C7.03502 14.6673 7.3335 14.3688 7.3335 14.0007V10.6673C7.3335 10.2991 7.03502 10.0007 6.66683 10.0007H2.00016Z"
+      fill={color}
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_10949_303000">
+      <rect
+        width="16"
+        height="16"
+        fill="white"
+        transform="translate(0 0.000976562)"
+      />
+    </clipPath>
+  </defs>
+</svg>