From 8a9e0471668e365366b1439863412be575b1043f Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 9 Nov 2022 17:38:16 +0000 Subject: [PATCH 1/3] Display warning on timeout --- .../components/Resources/AgentRow.stories.tsx | 9 +++ site/src/components/Resources/AgentRow.tsx | 8 +- site/src/components/Resources/AgentStatus.tsx | 80 ++++++++++++++++--- site/src/i18n/en/agent.json | 11 ++- site/src/i18n/en/workspacePage.json | 3 +- 5 files changed, 99 insertions(+), 12 deletions(-) diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx index 36050a12aa774..e3bc358d13771 100644 --- a/site/src/components/Resources/AgentRow.stories.tsx +++ b/site/src/components/Resources/AgentRow.stories.tsx @@ -3,6 +3,7 @@ import { MockWorkspace, MockWorkspaceAgent, MockWorkspaceAgentConnecting, + MockWorkspaceAgentTimeout, MockWorkspaceApp, } from "testHelpers/entities" import { AgentRow, AgentRowProps } from "./AgentRow" @@ -67,3 +68,11 @@ Connecting.args = { applicationsHost: "", showApps: true, } + +export const Timeout = Template.bind({}) +Timeout.args = { + agent: MockWorkspaceAgentTimeout, + workspace: MockWorkspace, + applicationsHost: "", + showApps: true, +} diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index f726bbd375ee9..e53c2678a55b7 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -12,6 +12,7 @@ import { AgentVersion } from "./AgentVersion" import { Maybe } from "components/Conditionals/Maybe" import { AgentStatus } from "./AgentStatus" import { AppLinkSkeleton } from "components/AppLink/AppLinkSkeleton" +import { useTranslation } from "react-i18next" export interface AgentRowProps { agent: WorkspaceAgent @@ -31,6 +32,7 @@ export const AgentRow: FC = ({ serverVersion, }) => { const styles = useStyles() + const { t } = useTranslation("agent") return ( = ({ >
- +
{agent.name}
@@ -65,6 +67,10 @@ export const AgentRow: FC = ({ + + + {t("unableToConnect")} +
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index c9e17508f1982..203f721845f30 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -1,22 +1,28 @@ import Tooltip from "@material-ui/core/Tooltip" import { makeStyles } from "@material-ui/core/styles" import { combineClasses } from "util/combineClasses" -import { WorkspaceAgent } from "api/typesGenerated" +import { Workspace, WorkspaceAgent } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { useTranslation } from "react-i18next" +import WarningRounded from "@material-ui/icons/WarningRounded" +import { + HelpPopover, + HelpTooltipText, + HelpTooltipTitle, +} from "components/Tooltips/HelpTooltip" +import { useRef, useState } from "react" +import Link from "@material-ui/core/Link" const ConnectedStatus: React.FC = () => { const styles = useStyles() const { t } = useTranslation("workspacePage") return ( - -
- +
) } @@ -50,7 +56,52 @@ const ConnectingStatus: React.FC = () => { ) } -export const AgentStatus: React.FC<{ agent: WorkspaceAgent }> = ({ agent }) => { +const TimeoutStatus: React.FC<{ + agent: WorkspaceAgent + workspace: Workspace +}> = ({ agent, workspace }) => { + const { t } = useTranslation("agent") + const styles = useStyles() + const anchorRef = useRef(null) + const [isOpen, setIsOpen] = useState(false) + const id = isOpen ? "timeout-popover" : undefined + const troubleshootLink = + agent.troubleshooting_url ?? `/templates/${workspace.template_name}#readme` + + return ( + <> + setIsOpen(true)} + onMouseLeave={() => setIsOpen(false)} + role="status" + aria-label={t("status.timeout")} + className={styles.timeoutWarning} + /> + setIsOpen(true)} + onClose={() => setIsOpen(false)} + > + {t("timeoutTooltip.title")} + + {t("timeoutTooltip.message")}{" "} + + {t("timeoutTooltip.link")} + + . + + + + ) +} + +export const AgentStatus: React.FC<{ + agent: WorkspaceAgent + workspace: Workspace +}> = ({ agent, workspace }) => { return ( @@ -59,6 +110,9 @@ export const AgentStatus: React.FC<{ agent: WorkspaceAgent }> = ({ agent }) => { + + + @@ -98,4 +152,12 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.info.light, animation: "$pulse 1.5s 0.5s ease-in-out forwards infinite", }, + + timeoutWarning: { + color: theme.palette.warning.light, + width: theme.spacing(2.5), + height: theme.spacing(2.5), + position: "relative", + top: theme.spacing(1), + }, })) diff --git a/site/src/i18n/en/agent.json b/site/src/i18n/en/agent.json index 208954aa0e1ec..83e8d15ca4d35 100644 --- a/site/src/i18n/en/agent.json +++ b/site/src/i18n/en/agent.json @@ -9,5 +9,14 @@ "os": "OS", "apps": "Apps", "noApps": "None" - } + }, + "status": { + "timeout": "Timeout" + }, + "timeoutTooltip": { + "title": "Agent taking too long to connect", + "message": "We noticed this agent is taking longer than expected to connect. You can try to troubleshooting the issue", + "link": "here" + }, + "unableToConnect": "Unable to connect" } diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json index d6a911964c320..1c486a3275855 100644 --- a/site/src/i18n/en/workspacePage.json +++ b/site/src/i18n/en/workspacePage.json @@ -37,7 +37,8 @@ "agentStatus": { "connected": "Connected", "connecting": "Connecting...", - "disconnected": "Disconnected" + "disconnected": "Disconnected", + "timeout": "Timeout" }, "buildMessage": { "start": "started", From d7fe7993d5736998aaa7d21b78147b4748474559 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 9 Nov 2022 18:44:52 +0000 Subject: [PATCH 2/3] Add README section id --- .../TemplateSummaryPage/TemplateSummaryPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 6fa7aab3da861..fe32208da56eb 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -59,7 +59,7 @@ export const TemplateSummaryPageView: FC< resources={getStartedResources(templateResources)} /> -
+
README.md
{readme.body} From 47cfc10fabe95914ffafd0e382033407ffdc3d14 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 9 Nov 2022 15:45:56 -0300 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Mathias Fredriksson --- site/src/i18n/en/agent.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/i18n/en/agent.json b/site/src/i18n/en/agent.json index 83e8d15ca4d35..52d51fbdaca2a 100644 --- a/site/src/i18n/en/agent.json +++ b/site/src/i18n/en/agent.json @@ -14,8 +14,8 @@ "timeout": "Timeout" }, "timeoutTooltip": { - "title": "Agent taking too long to connect", - "message": "We noticed this agent is taking longer than expected to connect. You can try to troubleshooting the issue", + "title": "Agent is taking too long to connect", + "message": "We noticed this agent is taking longer than expected to connect. You can try troubleshooting the issue", "link": "here" }, "unableToConnect": "Unable to connect"