@malloy-publisher/sdk 0.0.228 → 0.0.230

package/src/components/Materializations/EnvironmentMaterializations.tsx

@@ -0,0 +1,264 @@
+import { Box, Button, Snackbar, Stack, Typography } from "@mui/material";
+import { useQueryClient } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { Materialization, MaterializationActionActionEnum } from "../../client";
+import {
+   useMutationWithApiError,
+   useQueryWithApiError,
+} from "../../hooks/useQueryWithApiError";
+import { parseResourceUri } from "../../utils/formatting";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
+import { useServer } from "../ServerProvider";
+import CreateEnvMaterializationDialog from "./CreateEnvMaterializationDialog";
+import MaterializationDetailDialog from "./MaterializationDetailDialog";
+import MaterializationRunsList from "./MaterializationRunsList";
+import { isActiveStatus } from "./utils";
+
+const MATERIALIZATION_POLL_MS = 3000;
+const PAGE_SIZE = 10;
+
+interface EnvironmentMaterializationsProps {
+   resourceUri: string;
+   onClickPackageFile?: (to: string, event?: React.MouseEvent) => void;
+}
+
+export default function EnvironmentMaterializations({
+   resourceUri,
+   onClickPackageFile,
+}: EnvironmentMaterializationsProps) {
+   const { apiClients, mutable } = useServer();
+   const queryClient = useQueryClient();
+   const { environmentName } = parseResourceUri(resourceUri);
+   const [notificationMessage, setNotificationMessage] = useState("");
+   const [selectedId, setSelectedId] = useState<string | null>(null);
+   // Show the most recent runs and page in more on demand — a busy environment
+   // (e.g. a frequent schedule) accumulates runs without bound, so never render
+   // the full history at once.
+   const [limit, setLimit] = useState(PAGE_SIZE);
+
+   const onClick =
+      onClickPackageFile ??
+      ((to: string) => {
+         window.location.href = to;
+      });
+
+   const listQuery = useQueryWithApiError({
+      queryKey: ["env-materializations", environmentName, limit],
+      queryFn: () =>
+         apiClients.materializations.listEnvironmentMaterializations(
+            environmentName,
+            limit,
+         ),
+      // "Show more" grows `limit` (part of the key), so keep the current rows on
+      // screen while the larger page loads instead of flashing back to the
+      // loading state.
+      placeholderData: (previousData) => previousData,
+      refetchInterval: (query) => {
+         const payload = query.state.data as
+            | { data?: Materialization[] }
+            | undefined;
+         const rows = payload?.data ?? [];
+         return rows.some((row) => isActiveStatus(row.status))
+            ? MATERIALIZATION_POLL_MS
+            : false;
+      },
+   });
+
+   const packagesQuery = useQueryWithApiError({
+      queryKey: ["packages", environmentName],
+      queryFn: () => apiClients.packages.listPackages(environmentName),
+   });
+
+   const invalidateList = () =>
+      queryClient.invalidateQueries({
+         queryKey: ["env-materializations", environmentName],
+      });
+
+   // Fire one create per selected package. Each package builds independently, so
+   // a failure on one (e.g. an already-active materialization) does not block the
+   // others — report an aggregate outcome.
+   const createMaterializations = useMutationWithApiError({
+      mutationFn: async (opts: {
+         packageNames: string[];
+         forceRefresh: boolean;
+      }) => {
+         const results = await Promise.allSettled(
+            opts.packageNames.map((pkg) =>
+               apiClients.materializations.createMaterialization(
+                  environmentName,
+                  pkg,
+                  { forceRefresh: opts.forceRefresh },
+               ),
+            ),
+         );
+         const failed = results.filter((r) => r.status === "rejected").length;
+         return { total: opts.packageNames.length, failed };
+      },
+      onSuccess(result) {
+         const started = result.total - result.failed;
+         setNotificationMessage(
+            result.failed === 0
+               ? `Started ${started} materialization${started === 1 ? "" : "s"}`
+               : `Started ${started} of ${result.total} (${result.failed} could not start — a build may already be active)`,
+         );
+         invalidateList();
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+         invalidateList();
+      },
+   });
+
+   const stopMaterialization = useMutationWithApiError({
+      mutationFn: (materialization: Materialization) =>
+         apiClients.materializations.materializationAction(
+            environmentName,
+            materialization.packageName as string,
+            materialization.id as string,
+            MaterializationActionActionEnum.Stop,
+         ),
+      onSuccess() {
+         setNotificationMessage("Materialization stopped");
+         invalidateList();
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+      },
+   });
+
+   const deleteMaterialization = useMutationWithApiError({
+      mutationFn: ({
+         materialization,
+         dropTables,
+      }: {
+         materialization: Materialization;
+         dropTables: boolean;
+      }) =>
+         apiClients.materializations.deleteMaterialization(
+            environmentName,
+            materialization.packageName as string,
+            materialization.id as string,
+            dropTables,
+         ),
+      onSuccess() {
+         setNotificationMessage("Materialization deleted");
+         invalidateList();
+      },
+      onError(error) {
+         setNotificationMessage(error.message);
+      },
+   });
+
+   const materializations = (listQuery.data?.data ?? []) as Materialization[];
+   const packages = (packagesQuery.data?.data ?? []) as { name: string }[];
+   const selected =
+      materializations.find((row) => row.id === selectedId) ?? null;
+   const isMutating =
+      createMaterializations.isPending ||
+      stopMaterialization.isPending ||
+      deleteMaterialization.isPending;
+   // A full page implies there may be older runs beyond the current window.
+   const hasMore = materializations.length >= limit;
+
+   return (
+      <Box>
+         <Box
+            sx={{
+               display: "flex",
+               alignItems: "flex-start",
+               justifyContent: "space-between",
+               mb: 3,
+            }}
+         >
+            <Box>
+               <Typography
+                  variant="h6"
+                  sx={{ fontWeight: 600, letterSpacing: "-0.025em" }}
+               >
+                  Materializations
+               </Typography>
+               <Typography variant="body2" color="text.secondary">
+                  All materialization builds across the packages in this
+                  environment
+               </Typography>
+            </Box>
+            {mutable && (
+               <CreateEnvMaterializationDialog
+                  packages={packages}
+                  onSubmit={(opts) => createMaterializations.mutateAsync(opts)}
+                  isSubmitting={createMaterializations.isPending}
+               />
+            )}
+         </Box>
+
+         {listQuery.isError && (
+            <ApiErrorDisplay
+               error={listQuery.error}
+               context={`${environmentName} > Materializations`}
+            />
+         )}
+         {!listQuery.isSuccess && !listQuery.isError && (
+            <Loading text="Loading materializations..." />
+         )}
+         {listQuery.isSuccess && (
+            <MaterializationRunsList
+               materializations={materializations}
+               mutable={mutable}
+               isMutating={isMutating}
+               showPackage
+               onClickPackage={(packageName) =>
+                  onClick(`/${environmentName}/${packageName}/materializations`)
+               }
+               onStop={(materialization) =>
+                  stopMaterialization.mutate(materialization)
+               }
+               onDelete={(materialization, dropTables) =>
+                  deleteMaterialization.mutate({ materialization, dropTables })
+               }
+               onViewDetails={(materialization) =>
+                  setSelectedId(materialization.id ?? null)
+               }
+            />
+         )}
+         {listQuery.isSuccess && materializations.length > 0 && (
+            <Stack
+               direction="row"
+               alignItems="center"
+               justifyContent="center"
+               spacing={2}
+               sx={{ mt: 2 }}
+            >
+               <Typography variant="caption" color="text.secondary">
+                  {hasMore
+                     ? `Showing ${materializations.length} most recent`
+                     : `${materializations.length} materialization${materializations.length === 1 ? "" : "s"}`}
+               </Typography>
+               {hasMore && (
+                  <Button
+                     size="small"
+                     onClick={() => setLimit((l) => l + PAGE_SIZE)}
+                     disabled={listQuery.isFetching}
+                  >
+                     Show more
+                  </Button>
+               )}
+            </Stack>
+         )}
+
+         <MaterializationDetailDialog
+            materialization={selected}
+            buildPlan={null}
+            showBuildPlan={false}
+            onClose={() => setSelectedId(null)}
+         />
+
+         <Snackbar
+            open={notificationMessage !== ""}
+            autoHideDuration={6000}
+            onClose={() => setNotificationMessage("")}
+            message={notificationMessage}
+         />
+      </Box>
+   );
+}

package/src/components/Materializations/ManifestView.tsx

@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import { ManifestEntry } from "../../client";
 import { MONO_FONT_FAMILY } from "../styles";
+import SectionLabel from "./SectionLabel";
 import { formatTimestamp } from "./utils";
 
 type ManifestViewProps = {
@@ -31,9 +32,7 @@ export default function ManifestView({ entries, builtAt }: ManifestViewProps) {
             alignItems="baseline"
             justifyContent="space-between"
          >
-            <Typography variant="subtitle2" gutterBottom>
-               Build manifest
-            </Typography>
+            <SectionLabel>Build manifest</SectionLabel>
             {builtAt && (
                <Typography variant="caption" color="text.secondary">
                   Built {formatTimestamp(builtAt)}

package/src/components/Materializations/MaterializationDetailDialog.tsx

@@ -17,9 +17,12 @@ import {
 import { BuildPlan, Materialization } from "../../client";
 import { MONO_FONT_FAMILY } from "../styles";
 import ManifestView from "./ManifestView";
+import SectionLabel from "./SectionLabel";
+import TriggerChip from "./TriggerChip";
 import {
    formatDuration,
    formatTimestamp,
+   isActiveStatus,
    parseMetadata,
    statusColor,
    statusLabel,
@@ -29,13 +32,22 @@ type MaterializationDetailDialogProps = {
    materialization: Materialization | null;
    // The compiled package's current build plan (Package.buildPlan), shown for
    // context. It is a property of the package version, not the historical run.
+   // Note it is null both in the environment-scoped view and for a package with
+   // no persist sources, so it cannot itself gate the section — see
+   // `showBuildPlan`.
    buildPlan: BuildPlan | null;
+   // Whether to render the Build plan section. The package view shows it (with a
+   // "no persist sources" empty state when the plan is empty); the
+   // environment-scoped view, which spans packages and has no single plan, omits
+   // it entirely.
+   showBuildPlan?: boolean;
    onClose: () => void;
 };
 
 export default function MaterializationDetailDialog({
    materialization,
    buildPlan,
+   showBuildPlan = true,
    onClose,
 }: MaterializationDetailDialogProps) {
    const meta = materialization ? parseMetadata(materialization) : {};
@@ -51,20 +63,41 @@ export default function MaterializationDetailDialog({
       >
          {materialization && (
             <>
-               <DialogTitle sx={{ pr: 6 }} id="materialization-detail-title">
-                  <Stack direction="row" alignItems="center" spacing={1.5}>
+               <DialogTitle
+                  sx={{ pr: 6, pb: 1.5 }}
+                  id="materialization-detail-title"
+               >
+                  <Stack
+                     direction="row"
+                     alignItems="center"
+                     spacing={1}
+                     sx={{ mb: 0.75 }}
+                  >
                      <Chip
                         size="small"
                         label={statusLabel(materialization.status)}
                         color={statusColor(materialization.status)}
+                        variant={
+                           isActiveStatus(materialization.status)
+                              ? "filled"
+                              : "outlined"
+                        }
                      />
-                     <Typography
-                        variant="subtitle1"
-                        sx={{ fontFamily: MONO_FONT_FAMILY }}
-                     >
-                        {materialization.id}
-                     </Typography>
+                     <TriggerChip meta={meta} />
                   </Stack>
+                  <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                     {materialization.packageName ?? "Materialization"}
+                  </Typography>
+                  <Typography
+                     variant="caption"
+                     color="text.secondary"
+                     sx={{
+                        fontFamily: MONO_FONT_FAMILY,
+                        wordBreak: "break-all",
+                     }}
+                  >
+                     {materialization.id}
+                  </Typography>
                   <IconButton
                      aria-label="close"
                      onClick={onClose}
@@ -76,21 +109,16 @@ export default function MaterializationDetailDialog({
                <DialogContent dividers>
                   <Box
                      sx={{
+                        bgcolor: "action.hover",
+                        borderRadius: 2,
+                        p: 2,
+                        mb: 3,
                         display: "grid",
                         gridTemplateColumns:
-                           "repeat(auto-fit, minmax(150px, 1fr))",
+                           "repeat(auto-fit, minmax(140px, 1fr))",
                         gap: 2,
-                        mb: 3,
                      }}
                   >
-                     <DetailField
-                        label="Package"
-                        value={materialization.packageName ?? "—"}
-                     />
-                     <DetailField
-                        label="Force refresh"
-                        value={meta.forceRefresh ? "Yes" : "No"}
-                     />
                      <DetailField
                         label="Started"
                         value={formatTimestamp(
@@ -110,32 +138,30 @@ export default function MaterializationDetailDialog({
                         )}
                      />
                      <DetailField
-                        label="Sources built"
-                        value={`${meta.sourcesBuilt ?? 0}`}
-                     />
-                     <DetailField
-                        label="Sources reused"
-                        value={`${meta.sourcesReused ?? 0}`}
-                     />
-                     <DetailField
-                        label="Created"
-                        value={formatTimestamp(materialization.createdAt)}
+                        label="Sources"
+                        value={`${meta.sourcesBuilt ?? 0} built · ${meta.sourcesReused ?? 0} reused`}
                      />
                      <DetailField
-                        label="Updated"
-                        value={formatTimestamp(materialization.updatedAt)}
+                        label="Force refresh"
+                        value={meta.forceRefresh ? "Yes" : "No"}
                      />
                   </Box>
 
                   {materialization.error && (
-                     <Box sx={{ mb: 3 }}>
-                        <Typography
-                           variant="subtitle2"
-                           color="error"
-                           gutterBottom
-                        >
-                           Error
-                        </Typography>
+                     <Box
+                        sx={{
+                           borderRadius: 2,
+                           p: 2,
+                           mb: 3,
+                           border: "1px solid",
+                           borderColor: "error.main",
+                        }}
+                     >
+                        <SectionLabel>
+                           <Box component="span" sx={{ color: "error.main" }}>
+                              Error
+                           </Box>
+                        </SectionLabel>
                         <Typography
                            variant="body2"
                            sx={{
@@ -148,64 +174,64 @@ export default function MaterializationDetailDialog({
                      </Box>
                   )}
 
-                  <Box sx={{ mb: 3 }}>
-                     <Typography variant="subtitle2" gutterBottom>
-                        Build plan
-                     </Typography>
-                     {planSources.length === 0 ? (
-                        <Typography
-                           variant="body2"
-                           color="text.secondary"
-                           sx={{ fontStyle: "italic" }}
-                        >
-                           This package has no persist sources.
-                        </Typography>
-                     ) : (
-                        <Table size="small">
-                           <TableHead>
-                              <TableRow>
-                                 <TableCell>Source</TableCell>
-                                 <TableCell>Connection</TableCell>
-                                 <TableCell>Dialect</TableCell>
-                                 <TableCell align="right">Columns</TableCell>
-                                 <TableCell>Source Entity ID</TableCell>
-                              </TableRow>
-                           </TableHead>
-                           <TableBody>
-                              {planSources.map((source) => (
-                                 <TableRow key={source.sourceID}>
-                                    <TableCell
-                                       sx={{ fontFamily: MONO_FONT_FAMILY }}
-                                    >
-                                       {source.name}
-                                    </TableCell>
-                                    <TableCell
-                                       sx={{ fontFamily: MONO_FONT_FAMILY }}
-                                    >
-                                       {source.connectionName}
-                                    </TableCell>
-                                    <TableCell>
-                                       {source.dialect ?? "-"}
-                                    </TableCell>
-                                    <TableCell align="right">
-                                       {source.columns?.length ?? 0}
-                                    </TableCell>
-                                    <TableCell
-                                       sx={{
-                                          fontFamily: MONO_FONT_FAMILY,
-                                          fontSize: "0.75rem",
-                                          wordBreak: "break-all",
-                                          maxWidth: 220,
-                                       }}
-                                    >
-                                       {source.sourceEntityId}
-                                    </TableCell>
+                  {showBuildPlan && (
+                     <Box sx={{ mb: 3 }}>
+                        <SectionLabel>Build plan</SectionLabel>
+                        {planSources.length === 0 ? (
+                           <Typography
+                              variant="body2"
+                              color="text.secondary"
+                              sx={{ fontStyle: "italic" }}
+                           >
+                              This package has no persist sources.
+                           </Typography>
+                        ) : (
+                           <Table size="small">
+                              <TableHead>
+                                 <TableRow>
+                                    <TableCell>Source</TableCell>
+                                    <TableCell>Connection</TableCell>
+                                    <TableCell>Dialect</TableCell>
+                                    <TableCell align="right">Columns</TableCell>
+                                    <TableCell>Source Entity ID</TableCell>
                                  </TableRow>
-                              ))}
-                           </TableBody>
-                        </Table>
-                     )}
-                  </Box>
+                              </TableHead>
+                              <TableBody>
+                                 {planSources.map((source) => (
+                                    <TableRow key={source.sourceID}>
+                                       <TableCell
+                                          sx={{ fontFamily: MONO_FONT_FAMILY }}
+                                       >
+                                          {source.name}
+                                       </TableCell>
+                                       <TableCell
+                                          sx={{ fontFamily: MONO_FONT_FAMILY }}
+                                       >
+                                          {source.connectionName}
+                                       </TableCell>
+                                       <TableCell>
+                                          {source.dialect ?? "-"}
+                                       </TableCell>
+                                       <TableCell align="right">
+                                          {source.columns?.length ?? 0}
+                                       </TableCell>
+                                       <TableCell
+                                          sx={{
+                                             fontFamily: MONO_FONT_FAMILY,
+                                             fontSize: "0.75rem",
+                                             wordBreak: "break-all",
+                                             maxWidth: 220,
+                                          }}
+                                       >
+                                          {source.sourceEntityId}
+                                       </TableCell>
+                                    </TableRow>
+                                 ))}
+                              </TableBody>
+                           </Table>
+                        )}
+                     </Box>
+                  )}
 
                   <ManifestView
                      entries={materialization.manifest?.entries}

package/src/components/Materializations/MaterializationRunsList.tsx

@@ -5,6 +5,7 @@ import {
    Box,
    Chip,
    IconButton,
+   Link,
    ListItemIcon,
    ListItemText,
    Menu,
@@ -20,6 +21,7 @@ import {
 import { useState } from "react";
 import { Materialization } from "../../client";
 import DeleteMaterializationDialog from "./DeleteMaterializationDialog";
+import TriggerChip from "./TriggerChip";
 import {
    formatDuration,
    formatRelativeTime,
@@ -34,6 +36,10 @@ type MaterializationRunsListProps = {
    materializations: Materialization[];
    mutable: boolean;
    isMutating: boolean;
+   /** Show a Package column — for the environment-scoped view spanning packages. */
+   showPackage?: boolean;
+   /** Navigate to a package (used by the Package column links). */
+   onClickPackage?: (packageName: string) => void;
    onStop: (materialization: Materialization) => void;
    onDelete: (materialization: Materialization, dropTables: boolean) => void;
    onViewDetails: (materialization: Materialization) => void;
@@ -43,6 +49,8 @@ export default function MaterializationRunsList({
    materializations,
    mutable,
    isMutating,
+   showPackage = false,
+   onClickPackage,
    onStop,
    onDelete,
    onViewDetails,
@@ -63,7 +71,9 @@ export default function MaterializationRunsList({
       <Table size="small">
          <TableHead>
             <TableRow>
+               {showPackage && <TableCell>Package</TableCell>}
                <TableCell>Status</TableCell>
+               <TableCell>Trigger</TableCell>
                <TableCell>Started</TableCell>
                <TableCell>Duration</TableCell>
                <TableCell>Sources</TableCell>
@@ -77,6 +87,8 @@ export default function MaterializationRunsList({
                   materialization={materialization}
                   mutable={mutable}
                   isMutating={isMutating}
+                  showPackage={showPackage}
+                  onClickPackage={onClickPackage}
                   onStop={onStop}
                   onDelete={onDelete}
                   onViewDetails={onViewDetails}
@@ -91,6 +103,8 @@ function MaterializationRow({
    materialization,
    mutable,
    isMutating,
+   showPackage,
+   onClickPackage,
    onStop,
    onDelete,
    onViewDetails,
@@ -98,6 +112,8 @@ function MaterializationRow({
    materialization: Materialization;
    mutable: boolean;
    isMutating: boolean;
+   showPackage?: boolean;
+   onClickPackage?: (packageName: string) => void;
    onStop: (materialization: Materialization) => void;
    onDelete: (materialization: Materialization, dropTables: boolean) => void;
    onViewDetails: (materialization: Materialization) => void;
@@ -138,6 +154,24 @@ function MaterializationRow({
          tabIndex={0}
          aria-label={`View materialization ${materialization.id ?? ""} details`.trim()}
       >
+         {showPackage && (
+            <TableCell onClick={(event) => event.stopPropagation()}>
+               {onClickPackage ? (
+                  <Link
+                     component="button"
+                     underline="hover"
+                     onClick={() =>
+                        onClickPackage(materialization.packageName ?? "")
+                     }
+                     sx={{ fontWeight: 500 }}
+                  >
+                     {materialization.packageName}
+                  </Link>
+               ) : (
+                  materialization.packageName
+               )}
+            </TableCell>
+         )}
          <TableCell>
             <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                <Chip
@@ -153,6 +187,9 @@ function MaterializationRow({
                )}
             </Box>
          </TableCell>
+         <TableCell>
+            <TriggerChip meta={meta} />
+         </TableCell>
          <TableCell>
             {formatRelativeTime(
                materialization.startedAt ?? materialization.createdAt,