From e8fba43b9cd96bc003e7e80619d9e19d440dd285 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 18 Apr 2023 20:40:40 +0000 Subject: [PATCH 1/7] Refactor agent row --- site/src/components/AppLink/AppLink.tsx | 2 +- site/src/components/Logs/Logs.tsx | 11 +- .../components/Resources/AgentMetadata.tsx | 44 +- .../components/Resources/AgentRow.stories.tsx | 59 +- site/src/components/Resources/AgentRow.tsx | 560 +++++++++++------- site/src/components/Resources/AgentStatus.tsx | 3 +- .../src/components/Resources/AgentVersion.tsx | 7 +- site/src/components/SSHButton/SSHButton.tsx | 16 +- .../components/TerminalLink/TerminalLink.tsx | 36 +- .../VSCodeDesktopButton.tsx | 2 +- 10 files changed, 432 insertions(+), 308 deletions(-) diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx index 2ac76d686b457..eda6ab3f6ca06 100644 --- a/site/src/components/AppLink/AppLink.tsx +++ b/site/src/components/AppLink/AppLink.tsx @@ -138,7 +138,7 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.background.default, "&:hover": { - backgroundColor: `${theme.palette.background.default} !important`, + backgroundColor: `${theme.palette.background.paper} !important`, }, }, diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx index 1918231d69512..6f59fbd3a0dc7 100644 --- a/site/src/components/Logs/Logs.tsx +++ b/site/src/components/Logs/Logs.tsx @@ -41,7 +41,7 @@ export const Logs: FC> = ({ ? idx + 1 : dayjs(line.time).format(`HH:mm:ss.SSS`)} -      + )} {line.output} @@ -76,7 +76,7 @@ export const LogLine: FC<{ {number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)} -      + )} ((theme) => ({ root: { minHeight: 156, - fontSize: 13, padding: theme.spacing(2, 0), borderRadius: theme.shape.borderRadius, overflowX: "auto", @@ -107,12 +106,14 @@ const useStyles = makeStyles< }, line: { wordBreak: "break-all", + display: "flex", + fontSize: 14, color: theme.palette.text.primary, fontFamily: MONOSPACE_FONT_FAMILY, height: ({ lineNumbers }) => (lineNumbers ? logLineHeight : "auto"), // Whitespace is significant in terminal output for alignment whiteSpace: "pre", - padding: theme.spacing(0, 3), + padding: theme.spacing(0, 4), "&.error": { backgroundColor: theme.palette.error.dark, @@ -128,6 +129,8 @@ const useStyles = makeStyles< }, space: { userSelect: "none", + width: theme.spacing(1), + display: "block", }, time: { userSelect: "none", diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 87f8f98832420..921a9e95500bb 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -202,25 +202,17 @@ export interface AgentMetadataViewProps { } export const AgentMetadataView: FC = ({ metadata }) => { - const styles = useStyles() if (metadata.length === 0) { return <> } return ( - -
- {metadata.map((m) => { - if (m.description === undefined) { - throw new Error("Metadata item description is undefined") - } - return - })} -
+ + {metadata.map((m) => { + if (m.description === undefined) { + throw new Error("Metadata item description is undefined") + } + return + })} ) } @@ -289,31 +281,16 @@ export const AgentMetadata: FC<{ // These are more or less copied from // site/src/components/Resources/ResourceCard.tsx const useStyles = makeStyles((theme) => ({ - metadataStack: { - border: `2px dashed ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, - width: "100%", - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - }, - metadataHeader: { - padding: "8px", - display: "flex", - gap: theme.spacing(5), - rowGap: theme.spacing(3), - }, - metadata: { - fontSize: 16, + fontSize: 12, }, metadataLabel: { - fontSize: 12, color: theme.palette.text.secondary, textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", - fontWeight: "bold", + fontWeight: 500, }, metadataValue: { @@ -324,8 +301,9 @@ const useStyles = makeStyles((theme) => ({ }, metadataValueSuccess: { - color: theme.palette.success.light, + color: theme.palette.text.primary, }, + metadataValueError: { color: theme.palette.error.main, }, diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index 76678370fe723..c990291cdc7ea 100644 --- a/site/src/components/Resources/AgentRow.stories.tsx +++ b/site/src/components/Resources/AgentRow.stories.tsx @@ -43,22 +43,71 @@ const defaultAgentMetadata = [ result: { collected_at: "2021-05-05T00:00:00Z", error: "", - value: "defvalue", + value: "Master", age: 5, }, description: { - display_name: "DisPlay", - key: "defkey", + display_name: "Branch", + key: "branch", interval: 10, timeout: 10, - script: "some command", + script: "git branch", + }, + }, + { + result: { + collected_at: "2021-05-05T00:00:00Z", + error: "", + value: "No changes", + age: 5, + }, + description: { + display_name: "Changes", + key: "changes", + interval: 10, + timeout: 10, + script: "git diff", + }, + }, + { + result: { + collected_at: "2021-05-05T00:00:00Z", + error: "", + value: "2%", + age: 5, + }, + description: { + display_name: "CPU Usage", + key: "cpuUsage", + interval: 10, + timeout: 10, + script: "cpu.sh", + }, + }, + { + result: { + collected_at: "2021-05-05T00:00:00Z", + error: "", + value: "3%", + age: 5, + }, + description: { + display_name: "Disk Usage", + key: "diskUsage", + interval: 10, + timeout: 10, + script: "disk.sh", }, }, ] export const Example = Template.bind({}) Example.args = { - agent: MockWorkspaceAgent, + agent: { + ...MockWorkspaceAgent, + startup_script: + 'set -eux -o pipefail\n\n# install and start code-server\ncurl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3\n/tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n\n\nif [ ! -d ~/coder ]; then\n mkdir -p ~/coder\n\n git clone https://github.com/coder/coder ~/coder\nfi\n\nsudo service docker start\nDOTFILES_URI=" "\nrm -f ~/.personalize.log\nif [ -n "${DOTFILES_URI// }" ]; then\n coder dotfiles "$DOTFILES_URI" -y 2>&1 | tee -a ~/.personalize.log\nfi\nif [ -x ~/personalize ]; then\n ~/personalize 2>&1 | tee -a ~/.personalize.log\nelif [ -f ~/personalize ]; then\n echo "~/personalize is not executable, skipping..." | tee -a ~/.personalize.log\nfi\n', + }, workspace: MockWorkspace, applicationsHost: "", showApps: true, diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 75d5bea2268a2..be4eb6a9b3c8b 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -1,13 +1,12 @@ -import Link from "@material-ui/core/Link" import Popover from "@material-ui/core/Popover" import { makeStyles, useTheme } from "@material-ui/core/styles" -import PlayCircleOutlined from "@material-ui/icons/PlayCircleFilledOutlined" -import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined" -import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined" import { Skeleton } from "@material-ui/lab" import { useMachine } from "@xstate/react" -import { AppLinkSkeleton } from "components/AppLink/AppLinkSkeleton" -import { Maybe } from "components/Conditionals/Maybe" +import CodeOutlined from "@material-ui/icons/CodeOutlined" +import { + CloseDropdown, + OpenDropdown, +} from "components/DropdownArrows/DropdownArrows" import { LogLine, logLineHeight } from "components/Logs/Logs" import { PortForwardButton } from "components/PortForwardButton/PortForwardButton" import { VSCodeDesktopButton } from "components/VSCodeDesktopButton/VSCodeDesktopButton" @@ -25,6 +24,8 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism" import AutoSizer from "react-virtualized-auto-sizer" import { FixedSizeList as List, ListOnScrollProps } from "react-window" +import { colors } from "theme/colors" +import { combineClasses } from "utils/combineClasses" import { LineWithID, workspaceAgentLogsMachine, @@ -53,7 +54,6 @@ export interface AgentRowProps { hideVSCodeDesktopButton?: boolean serverVersion: string onUpdateAgent: () => void - storybookStartupLogs?: LineWithID[] storybookAgentMetadata?: WorkspaceAgentMetadata[] } @@ -87,7 +87,7 @@ export const AgentRow: FC = ({ : undefined, }) const theme = useTheme() - const startupScriptAnchorRef = useRef(null) + const startupScriptAnchorRef = useRef(null) const [startupScriptOpen, setStartupScriptOpen] = useState(false) const hasStartupFeatures = @@ -167,250 +167,271 @@ export const AgentRow: FC = ({ return ( -
+
+
+
{agent.name}
+ {agent.status === "timeout" && ( +
+ {t("unableToConnect")} +
+ )} +
-
- - -
-
{agent.name}
- - - {agent.operating_system} - - - - - - + {agent.status === "connected" && ( +
+
+ Ping + +
- - - - +
+ Version + +
+ +
+ )} - - {t("unableToConnect")} - - -
- - - - {showApps && agent.status === "connected" && ( - <> - {agent.apps.map((app) => ( - - ))} - - - {!hideSSHButton && ( - - )} - {!hideVSCodeDesktopButton && ( - +
+ + +
+ +
+ + +
+ +
+ + +
+
+ )} + + {agent.status === "connected" && ( +
+ + {!hideSSHButton && ( + + )} + {applicationsHost !== undefined && applicationsHost !== "" && ( + + )} +
+ )} + + {agent.status === "connecting" && ( +
+ + +
+ )} + + + {showApps && agent.status === "connected" && ( +
+ {!hideVSCodeDesktopButton && ( + + )} + {agent.apps.map((app) => ( + + ))} +
+ )} + + {showApps && agent.status === "connecting" && ( +
+ + +
+ )} + + {hasStartupFeatures && ( +
+ {showStartupLogs && ( + + {({ width }) => ( + + {({ index, style }) => ( + )} - {applicationsHost !== undefined && - applicationsHost !== "" && ( - - )} - - )} - {showApps && agent.status === "connecting" && ( - <> - - - + )} - - - - {hasStartupFeatures && ( - - + )} +
+ {showStartupLogs ? ( + + ) : ( +
- - {showStartupLogs && ( - - {({ width }) => ( - + Show startup logs + + )} + + + + setStartupScriptOpen(false)} + anchorEl={startupScriptAnchorRef.current} + > +
+ + {agent.startup_script || ""} + +
+ +
+
)} ) } const useStyles = makeStyles((theme) => ({ - agentWrapper: { - "&:not(:last-child)": { - borderBottom: `1px solid ${theme.palette.divider}`, - }, - }, - agentRow: { - padding: theme.spacing(3, 4), backgroundColor: theme.palette.background.paperLight, fontSize: 16, }, + agentInfo: { + padding: theme.spacing(4), + }, + + agentDefaultActions: { + display: "flex", + gap: theme.spacing(1), + marginLeft: "auto", + }, + startupLinks: { display: "flex", alignItems: "center", @@ -434,7 +455,14 @@ const useStyles = makeStyles((theme) => ({ startupLogs: { maxHeight: 256, - background: theme.palette.background.default, + borderBottom: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.paper, + paddingTop: theme.spacing(2), + + // We need this to be able to apply the padding top from startupLogs + "& > div": { + position: "relative", + }, }, startupScriptPopover: { @@ -447,18 +475,40 @@ const useStyles = makeStyles((theme) => ({ justifyContent: "center", }, - agentName: { + agentNameAndStatus: { fontWeight: 600, + display: "flex", + alignItems: "center", + gap: theme.spacing(2), + fontSize: theme.spacing(2), + }, + + agentName: { + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + maxWidth: 260, }, agentOS: { textTransform: "capitalize", }, + agentDataGroup: { + display: "flex", + alignItems: "baseline", + gap: theme.spacing(6), + }, + agentData: { - fontSize: 14, - color: theme.palette.text.secondary, - marginTop: theme.spacing(0.5), + display: "flex", + flexDirection: "column", + fontSize: 12, + + "& > *:first-child": { + fontWeight: 500, + color: theme.palette.text.secondary, + }, }, agentStartupLogs: { @@ -466,4 +516,64 @@ const useStyles = makeStyles((theme) => ({ display: "flex", flexDirection: "column-reverse", }, + + apps: { + display: "flex", + flexWrap: "wrap", + gap: theme.spacing(1), + padding: theme.spacing(0, 4, 4), + }, + + logsPanel: { + borderTop: `1px solid ${theme.palette.divider}`, + }, + + logsPanelButtons: { + display: "flex", + }, + + logsPanelButton: { + textAlign: "left", + background: "transparent", + border: 0, + fontFamily: "inherit", + padding: theme.spacing(1.5, 4), + color: theme.palette.text.secondary, + cursor: "pointer", + display: "flex", + alignItems: "center", + gap: theme.spacing(1), + whiteSpace: "nowrap", + + "&:hover": { + color: theme.palette.text.primary, + backgroundColor: colors.gray[14], + }, + + "& svg": { + color: "inherit", + }, + }, + + toggleLogsButton: { + width: "100%", + }, + + buttonSkeleton: { + borderRadius: 4, + }, + + agentErrorMessage: { + fontSize: 12, + fontWeight: 400, + marginTop: theme.spacing(0.5), + color: theme.palette.warning.light, + }, + + scriptButton: { + "& svg": { + width: theme.spacing(2), + height: theme.spacing(2), + }, + }, })) diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index eedd521034e02..0b0eb28990b87 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -391,6 +391,7 @@ const useStyles = makeStyles((theme) => ({ width: theme.spacing(1), height: theme.spacing(1), borderRadius: "100%", + flexShrink: 0, }, connected: { @@ -424,7 +425,6 @@ const useStyles = makeStyles((theme) => ({ width: theme.spacing(2.5), height: theme.spacing(2.5), position: "relative", - top: theme.spacing(1), }, errorWarning: { @@ -432,6 +432,5 @@ const useStyles = makeStyles((theme) => ({ width: theme.spacing(2.5), height: theme.spacing(2.5), position: "relative", - top: theme.spacing(1), }, })) diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx index 2f21e79ecff39..1de26db8338b4 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/site/src/components/Resources/AgentVersion.tsx @@ -13,13 +13,10 @@ export const AgentVersion: FC<{ const anchorRef = useRef(null) const [isOpen, setIsOpen] = useState(false) const id = isOpen ? "version-outdated-popover" : undefined - const { displayVersion, outdated } = getDisplayVersionStatus( - agent.version, - serverVersion, - ) + const { outdated } = getDisplayVersionStatus(agent.version, serverVersion) if (!outdated) { - return {displayVersion} + return Updated } return ( diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index fbf772eb2c878..6fca82278d808 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -1,7 +1,6 @@ import Button from "@material-ui/core/Button" import Popover from "@material-ui/core/Popover" import { makeStyles } from "@material-ui/core/styles" -import CloudIcon from "@material-ui/icons/CloudOutlined" import { useRef, useState } from "react" import { CodeExample } from "../CodeExample/CodeExample" import { Stack } from "../Stack/Stack" @@ -37,14 +36,14 @@ export const SSHButton: React.FC> = ({ <> ({ }, button: { - whiteSpace: "nowrap", - backgroundColor: theme.palette.background.default, - - "&:hover": { - backgroundColor: `${theme.palette.background.default} !important`, - }, + fontSize: 12, + fontWeight: 500, + height: theme.spacing(4), + minHeight: theme.spacing(4), + borderRadius: 4, }, })) diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx index ded51c01d9f94..c4cb39ff1ba38 100644 --- a/site/src/components/TerminalLink/TerminalLink.tsx +++ b/site/src/components/TerminalLink/TerminalLink.tsx @@ -1,7 +1,5 @@ import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" import { makeStyles } from "@material-ui/core/styles" -import ComputerIcon from "@material-ui/icons/Computer" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { combineClasses } from "../../utils/combineClasses" @@ -30,7 +28,7 @@ export const TerminalLink: FC> = ({ agentName, userName = "me", workspaceName, - className, + className = "", }) => { const styles = useStyles() const href = `/@${userName}/${workspaceName}${ @@ -38,9 +36,12 @@ export const TerminalLink: FC> = ({ }/terminal` return ( - { event.preventDefault() @@ -51,28 +52,17 @@ export const TerminalLink: FC> = ({ ) }} > - - + {Language.linkText} + ) } const useStyles = makeStyles((theme) => ({ - link: { - textDecoration: "none !important", - }, - button: { - whiteSpace: "nowrap", - backgroundColor: theme.palette.background.default, - - "&:hover": { - backgroundColor: `${theme.palette.background.default} !important`, - }, + fontSize: 12, + fontWeight: 500, + height: theme.spacing(4), + minHeight: theme.spacing(4), + borderRadius: 4, }, })) diff --git a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx index 03789b490e25b..e4c57f3190cd5 100644 --- a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.background.default, "&:hover": { - backgroundColor: `${theme.palette.background.default} !important`, + backgroundColor: `${theme.palette.background.paper} !important`, }, }, })) From 0c617c3dc693beec0bca408e58a57c685e16e07d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 18 Apr 2023 20:53:15 +0000 Subject: [PATCH 2/7] Remove unused code --- site/src/components/Resources/AgentRow.tsx | 37 ---------------------- 1 file changed, 37 deletions(-) diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index be4eb6a9b3c8b..79a855e9048a3 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -432,27 +432,6 @@ const useStyles = makeStyles((theme) => ({ marginLeft: "auto", }, - startupLinks: { - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - marginTop: theme.spacing(0.5), - }, - - startupLink: { - cursor: "pointer", - display: "flex", - gap: 4, - alignItems: "center", - userSelect: "none", - whiteSpace: "nowrap", - - "& svg": { - width: 12, - height: 12, - }, - }, - startupLogs: { maxHeight: 256, borderBottom: `1px solid ${theme.palette.divider}`, @@ -469,12 +448,6 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.background.default, }, - agentStatusWrapper: { - width: theme.spacing(4.5), - display: "flex", - justifyContent: "center", - }, - agentNameAndStatus: { fontWeight: 600, display: "flex", @@ -490,10 +463,6 @@ const useStyles = makeStyles((theme) => ({ maxWidth: 260, }, - agentOS: { - textTransform: "capitalize", - }, - agentDataGroup: { display: "flex", alignItems: "baseline", @@ -511,12 +480,6 @@ const useStyles = makeStyles((theme) => ({ }, }, - agentStartupLogs: { - maxHeight: 200, - display: "flex", - flexDirection: "column-reverse", - }, - apps: { display: "flex", flexWrap: "wrap", From 8503c5c1a3c2bc8dc65969a83a5ec651572c1098 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 18 Apr 2023 21:30:37 +0000 Subject: [PATCH 3/7] Improve popover --- .../components/Resources/AgentMetadata.tsx | 207 ++++++++++-------- 1 file changed, 110 insertions(+), 97 deletions(-) diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 921a9e95500bb..8d1f8c6889879 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -1,9 +1,7 @@ import Popover from "@material-ui/core/Popover" -import CircularProgress from "@material-ui/core/CircularProgress" import makeStyles from "@material-ui/core/styles/makeStyles" import { watchAgentMetadata } from "api/api" import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated" -import { CodeExample } from "components/CodeExample/CodeExample" import { Stack } from "components/Stack/Stack" import { HelpTooltipText, @@ -20,15 +18,21 @@ import { useState, } from "react" import { humanDuration } from "utils/duration" +import { Skeleton } from "@material-ui/lab" +import { MONOSPACE_FONT_FAMILY } from "theme/constants" + +type ItemStatus = "stale" | "valid" | "loading" export const WatchAgentMetadataContext = createContext(watchAgentMetadata) const MetadataItemValue: FC< - PropsWithChildren<{ item: WorkspaceAgentMetadata }> -> = ({ item, children }) => { + PropsWithChildren<{ item: WorkspaceAgentMetadata; status: ItemStatus }> +> = ({ item, children, status }) => { const [isOpen, setIsOpen] = useState(false) const anchorRef = useRef(null) const styles = useStyles() + const updatesInSeconds = -(item.description.interval - item.result.age) + return ( <>
{children}
+ - {item.description.display_name} - {item.result.value.length > 0 && ( + {item.result.error.length > 0 ? ( <> - Last result: - - - +
+ + {item.description.display_name} + + + An error happened while executing the command{" "} + 
+                  `{item.description.script}`
+
+ +
+
+ 
{item.result.error}
+
- )} - {item.result.error.length > 0 && ( + ) : ( <> - Last error: - - - +
+ + {item.description.display_name} + + {status === "stale" ? ( + + This item is now stale because the agent hasn{"'"}t reported a + new value in {humanDuration(item.result.age, "s")}. + + ) : ( + <> + )} + {status === "valid" ? ( + + The agent collected this value{" "} + {humanDuration(item.result.age, "s")} ago and will update it + in {humanDuration(Math.min(updatesInSeconds, 0), "s")}. + + ) : ( + <> + )} + {status === "loading" ? ( + + This value is loading for the first time... + + ) : ( + <> + )} +
+
+ 
{item.description.script}
+
)} @@ -81,10 +122,6 @@ const MetadataItemValue: FC< const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => { const styles = useStyles() - const [isOpen, setIsOpen] = useState(false) - - const labelAnchorRef = useRef(null) - if (item.result === undefined) { throw new Error("Metadata item result is undefined") } @@ -97,7 +134,7 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => { 5, ) - const status: "stale" | "valid" | "loading" = (() => { + const status: ItemStatus = (() => { const year = dayjs(item.result.collected_at).year() if (year <= 1970 || isNaN(year)) { return "loading" @@ -113,7 +150,12 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => { // could be buggy. But, how common is that anyways? const value = status === "stale" || status === "loading" ? ( - + ) : (
= ({ item }) => {
) - const updatesInSeconds = -(item.description.interval - item.result.age) - return ( - <> -
-
setIsOpen(true)} - role="presentation" - ref={labelAnchorRef} - > - {item.description.display_name} -
- {value} +
+
+ {item.description.display_name}
- setIsOpen(false)} - PaperProps={{ - onMouseEnter: () => setIsOpen(true), - onMouseLeave: () => setIsOpen(false), - }} - classes={{ paper: styles.metadataPopover }} - > - {item.description.display_name} - {status === "stale" ? ( - - This item is now stale because the agent hasn{"'"}t reported a new - value in {humanDuration(item.result.age, "s")}. - - ) : ( - <> - )} - {status === "valid" ? ( - - The agent collected this value {humanDuration(item.result.age, "s")}{" "} - ago and will update it in{" "} - {humanDuration(Math.min(updatesInSeconds, 0), "s")}. - - ) : ( - <> - )} - {status === "loading" ? ( - - This value is loading for the first time... - - ) : ( - <> - )} - - This value is produced by the following script: - - - - - - + + {value} + +
) } @@ -224,7 +209,7 @@ export const AgentMetadata: FC<{ const [metadata, setMetadata] = useState< WorkspaceAgentMetadata[] | undefined >(undefined) - + const styles = useStyles() const watchAgentMetadata = useContext(WatchAgentMetadataContext) useEffect(() => { @@ -264,14 +249,12 @@ export const AgentMetadata: FC<{ if (metadata === undefined) { return ( -
- -
+ ) } @@ -310,10 +293,11 @@ const useStyles = makeStyles((theme) => ({ metadataPopover: { marginTop: theme.spacing(0.5), - padding: theme.spacing(2.5), + color: theme.palette.text.secondary, pointerEvents: "auto", - maxWidth: "480px", + width: "320px", + borderRadius: 4, "& .MuiButton-root": { padding: theme.spacing(1, 2), @@ -325,4 +309,33 @@ const useStyles = makeStyles((theme) => ({ }, }, }, + + metadataPopoverContent: { + padding: theme.spacing(2.5), + }, + + metadataPopoverCode: { + padding: theme.spacing(2.5), + fontFamily: MONOSPACE_FONT_FAMILY, + background: theme.palette.background.default, + color: theme.palette.text.primary, + + "& pre": { + padding: 0, + margin: 0, + }, + }, + + skeleton: { + marginTop: theme.spacing(0.5), + }, + + inlineCommand: { + fontFamily: MONOSPACE_FONT_FAMILY, + display: "inline-block", + fontWeight: 600, + margin: 0, + borderRadius: 4, + color: theme.palette.text.primary, + }, })) From 2d882add10be25c621debd159886df6755a26f80 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Thu, 20 Apr 2023 13:50:05 +0000 Subject: [PATCH 4/7] BAse work --- site/src/components/AppLink/AppLink.tsx | 10 +- .../PortForwardButton/PortForwardButton.tsx | 14 +- .../components/Resources/AgentMetadata.tsx | 30 ++- site/src/components/Resources/AgentRow.tsx | 209 ++++++++++-------- .../src/components/Resources/AgentVersion.tsx | 2 +- .../VSCodeDesktopButton.tsx | 15 +- site/vite.config.ts | 3 +- 7 files changed, 175 insertions(+), 108 deletions(-) diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx index eda6ab3f6ca06..6e1df2055ecdd 100644 --- a/site/src/components/AppLink/AppLink.tsx +++ b/site/src/components/AppLink/AppLink.tsx @@ -84,7 +84,6 @@ export const AppLink: FC = ({ const button = (