Nov 1, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
 import makeStyles from "@mui/styles/makeStyles";
 import { watchAgentMetadata } from "api/api";
 import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated";
 import type {
  WorkspaceAgent,
  WorkspaceAgentMetadata,
 } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import {
 } from "react";
 import Skeleton from "@mui/material/Skeleton";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { combineClasses } from "utils/combineClasses";
 import Tooltip from "@mui/material/Tooltip";
 import Box, { BoxProps } from "@mui/material/Box";
 import { type Interpolation, type Theme } from "@emotion/react";

 type ItemStatus = "stale" | "valid" | "loading";

 export const WatchAgentMetadataContext = createContext(watchAgentMetadata);

 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
  const styles = useStyles();

  if (item.result === undefined) {
    throw new Error("Metadata item result is undefined");
  }
  // could be buggy. But, how common is that anyways?
  const value =
    status === "loading" ? (
      <Skeleton
        width={65}
        height={12}
        variant="text"
        className={styles.skeleton}
      />
      <Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
    ) : status === "stale" ? (
      <Tooltip title="This data is stale and no longer up to date">
        <StaticWidth
          className={combineClasses([
            styles.metadataValue,
            styles.metadataStale,
          ])}
        >
        <StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
          {item.result.value}
        </StaticWidth>
      </Tooltip>
    ) : (
      <StaticWidth
 className={combineClasses([
 css={[
          styles.metadataValue,
          item.result.error.length === 0
            ? styles.metadataValueSuccess
            : styles.metadataValueError,
        ])}
        ]}
      >
        {item.result.value}
      </StaticWidth>
    );

  return (
    <div className={styles.metadata}>
      <div className={styles.metadataLabel}>
        {item.description.display_name}
      </div>
    <div css={styles.metadata}>
      <div css={styles.metadataLabel}>{item.description.display_name}</div>
      <Box>{value}</Box>
    </div>
  );
 }

 export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
  const styles = useStyles();
  if (metadata.length === 0) {
    return <></>;
  }
  return (
    <divclassName={styles.root}>
    <divcss={styles.root}>
      <Stack alignItems="baseline" direction="row" spacing={6}>
        {metadata.map((m) => {
          if (m.description === undefined) {
    WorkspaceAgentMetadata[] | undefined
  >(undefined);
  const watchAgentMetadata = useContext(WatchAgentMetadataContext);
  const styles = useStyles();

  useEffect(() => {
    if (storybookMetadata !== undefined) {

  if (metadata === undefined) {
    return (
      <divclassName={styles.root}>
      <divcss={styles.root}>
        <AgentMetadataSkeleton />
      </div>
    );
 };

 export const AgentMetadataSkeleton: FC = () => {
  const styles = useStyles();

  return (
    <Stack alignItems="baseline" direction="row" spacing={6}>
      <divclassName={styles.metadata}>
      <divcss={styles.metadata}>
        <Skeleton width={40} height={12} variant="text" />
        <Skeleton width={65} height={14} variant="text" />
      </div>

      <divclassName={styles.metadata}>
      <divcss={styles.metadata}>
        <Skeleton width={40} height={12} variant="text" />
        <Skeleton width={65} height={14} variant="text" />
      </div>

      <divclassName={styles.metadata}>
      <divcss={styles.metadata}>
        <Skeleton width={40} height={12} variant="text" />
        <Skeleton width={65} height={14} variant="text" />
      </div>

 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 constuseStyles =makeStyles((theme) => ({
  root: {
 conststyles = {
  root:(theme) => ({
    padding: theme.spacing(2.5, 4),
    borderTop: `1px solid ${theme.palette.divider}`,
    background: theme.palette.background.paper,
    overflowX: "auto",
    scrollPadding: theme.spacing(0, 4),
  },
  }),

  metadata: {
  metadata:(theme) => ({
    fontSize: 12,
    lineHeight: "normal",
    display: "flex",
    "&:last-child": {
      paddingRight: theme.spacing(4),
    },
  },
  }),

  metadataLabel: {
  metadataLabel:(theme) => ({
    color: theme.palette.text.secondary,
    textOverflow: "ellipsis",
    overflow: "hidden",
    whiteSpace: "nowrap",
    fontWeight: 500,
  },
  }),

  metadataValue: {
    textOverflow: "ellipsis",
    fontSize: 14,
  },

  metadataValueSuccess: {
  metadataValueSuccess:(theme) => ({
    color: theme.palette.success.light,
  },
  }),

  metadataValueError: {
  metadataValueError:(theme) => ({
    color: theme.palette.error.main,
  },
  }),

  metadataStale: {
  metadataStale:(theme) => ({
    color: theme.palette.text.disabled,
    cursor: "pointer",
  },
  }),

  skeleton: {
  skeleton:(theme) => ({
    marginTop: theme.spacing(0.5),
  },
  }),

  inlineCommand: {
  inlineCommand:(theme) => ({
    fontFamily: MONOSPACE_FONT_FAMILY,
    display: "inline-block",
    fontWeight: 600,
    margin: 0,
    borderRadius: 4,
    color: theme.palette.text.primary,
  },
 }));
  }),
 } satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,8 @@
		import makeStyles from "@mui/styles/makeStyles";
		import { watchAgentMetadata } from "api/api";
		import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated";
		import type {
		WorkspaceAgent,
		WorkspaceAgentMetadata,
		} from "api/typesGenerated";
		import { Stack } from "components/Stack/Stack";
		import dayjs from "dayjs";
		import {
Expand All		@@ -13,17 +15,15 @@ import {
		} from "react";
		import Skeleton from "@mui/material/Skeleton";
		import { MONOSPACE_FONT_FAMILY } from "theme/constants";
		import { combineClasses } from "utils/combineClasses";
		import Tooltip from "@mui/material/Tooltip";
		import Box, { BoxProps } from "@mui/material/Box";
		import { type Interpolation, type Theme } from "@emotion/react";

		type ItemStatus = "stale" \| "valid" \| "loading";

		export const WatchAgentMetadataContext = createContext(watchAgentMetadata);

		const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
		const styles = useStyles();

		if (item.result === undefined) {
		throw new Error("Metadata item result is undefined");
		}
Expand DownExpand Up		@@ -56,41 +56,29 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
		// could be buggy. But, how common is that anyways?
		const value =
		status === "loading" ? (
		<Skeleton
		width={65}
		height={12}
		variant="text"
		className={styles.skeleton}
		/>
		<Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
		) : status === "stale" ? (
		<Tooltip title="This data is stale and no longer up to date">
		<StaticWidth
		className={combineClasses([
		styles.metadataValue,
		styles.metadataStale,
		])}
		>
		<StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
		{item.result.value}
		</StaticWidth>
		</Tooltip>
		) : (
		<StaticWidth
		className={combineClasses([
		css={[
		styles.metadataValue,
		item.result.error.length === 0
		? styles.metadataValueSuccess
		: styles.metadataValueError,
		])}
		]}
		>
		{item.result.value}
		</StaticWidth>
		);

		return (
		<div className={styles.metadata}>
		<div className={styles.metadataLabel}>
		{item.description.display_name}
		</div>
		<div css={styles.metadata}>
		<div css={styles.metadataLabel}>{item.description.display_name}</div>
		<Box>{value}</Box>
		</div>
		);
Expand All		@@ -101,12 +89,11 @@ export interface AgentMetadataViewProps {
		}

		export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
		const styles = useStyles();
		if (metadata.length === 0) {
		return <></>;
		}
		return (
		<divclassName={styles.root}>
		<divcss={styles.root}>
		<Stack alignItems="baseline" direction="row" spacing={6}>
		{metadata.map((m) => {
		if (m.description === undefined) {
Expand All		@@ -127,7 +114,6 @@ export const AgentMetadata: FC<{
		WorkspaceAgentMetadata[] \| undefined
		>(undefined);
		const watchAgentMetadata = useContext(WatchAgentMetadataContext);
		const styles = useStyles();

		useEffect(() => {
		if (storybookMetadata !== undefined) {
Expand DownExpand Up		@@ -166,7 +152,7 @@ export const AgentMetadata: FC<{

		if (metadata === undefined) {
		return (
		<divclassName={styles.root}>
		<divcss={styles.root}>
		<AgentMetadataSkeleton />
		</div>
		);
Expand All		@@ -176,21 +162,19 @@ export const AgentMetadata: FC<{
		};

		export const AgentMetadataSkeleton: FC = () => {
		const styles = useStyles();

		return (
		<Stack alignItems="baseline" direction="row" spacing={6}>
		<divclassName={styles.metadata}>
		<divcss={styles.metadata}>
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>

		<divclassName={styles.metadata}>
		<divcss={styles.metadata}>
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>

		<divclassName={styles.metadata}>
		<divcss={styles.metadata}>
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>
Expand DownExpand Up		@@ -219,16 +203,16 @@ const StaticWidth = (props: BoxProps) => {

		// These are more or less copied from
		// site/src/components/Resources/ResourceCard.tsx
		constuseStyles =makeStyles((theme) => ({
		root: {
		conststyles = {
		root:(theme) => ({
		padding: theme.spacing(2.5, 4),
		borderTop: `1px solid ${theme.palette.divider}`,
		background: theme.palette.background.paper,
		overflowX: "auto",
		scrollPadding: theme.spacing(0, 4),
		},
		}),

		metadata: {
		metadata:(theme) => ({
		fontSize: 12,
		lineHeight: "normal",
		display: "flex",
Expand All		@@ -240,15 +224,15 @@ const useStyles = makeStyles((theme) => ({
		"&:last-child": {
		paddingRight: theme.spacing(4),
		},
		},
		}),

		metadataLabel: {
		metadataLabel:(theme) => ({
		color: theme.palette.text.secondary,
		textOverflow: "ellipsis",
		overflow: "hidden",
		whiteSpace: "nowrap",
		fontWeight: 500,
		},
		}),

		metadataValue: {
		textOverflow: "ellipsis",
Expand All		@@ -258,29 +242,29 @@ const useStyles = makeStyles((theme) => ({
		fontSize: 14,
		},

		metadataValueSuccess: {
		metadataValueSuccess:(theme) => ({
		color: theme.palette.success.light,
		},
		}),

		metadataValueError: {
		metadataValueError:(theme) => ({
		color: theme.palette.error.main,
		},
		}),

		metadataStale: {
		metadataStale:(theme) => ({
		color: theme.palette.text.disabled,
		cursor: "pointer",
		},
		}),

		skeleton: {
		skeleton:(theme) => ({
		marginTop: theme.spacing(0.5),
		},
		}),

		inlineCommand: {
		inlineCommand:(theme) => ({
		fontFamily: MONOSPACE_FONT_FAMILY,
		display: "inline-block",
		fontWeight: 600,
		margin: 0,
		borderRadius: 4,
		color: theme.palette.text.primary,
		},
		}));
		}),
		} satisfies Record<string, Interpolation<Theme>>;