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 { 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"
// If we think in the agent status and lifecycle into a single enum/state I’d
// say we would have: connecting, timeout, disconnected, connected:created,
// connected:starting, connected:start_timeout, connected:start_error,
// connected:ready
const ReadyLifeCycle: React.FC = () => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")
return (
)
}
const StartingLifecycle: React.FC = () => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")
return (
)
}
const StartTimeoutLifecycle: React.FC<{
agent: WorkspaceAgent
}> = ({ agent }) => {
const { t } = useTranslation("agent")
const styles = useStyles()
const anchorRef = useRef(null)
const [isOpen, setIsOpen] = useState(false)
const id = isOpen ? "timeout-popover" : undefined
return (
<>
setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
role="status"
aria-label={t("status.startTimeout")}
className={styles.timeoutWarning}
/>
setIsOpen(true)}
onClose={() => setIsOpen(false)}
>
{t("startTimeoutTooltip.title")}
{t("startTimeoutTooltip.message")}{" "}
{t("startTimeoutTooltip.link")}
.
>
)
}
const StartErrorLifecycle: React.FC<{
agent: WorkspaceAgent
}> = ({ agent }) => {
const { t } = useTranslation("agent")
const styles = useStyles()
const anchorRef = useRef(null)
const [isOpen, setIsOpen] = useState(false)
const id = isOpen ? "timeout-popover" : undefined
return (
<>
setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
role="status"
aria-label={t("status.error")}
className={styles.errorWarning}
/>
setIsOpen(true)}
onClose={() => setIsOpen(false)}
>
{t("startErrorTooltip.title")}
{t("startErrorTooltip.message")}{" "}
{t("startErrorTooltip.link")}
.
>
)
}
const ConnectedStatus: React.FC<{
agent: WorkspaceAgent
}> = ({ agent }) => {
// NOTE(mafredri): Keep this behind feature flag for the time-being,
// if login_before_ready is false, the user has updated to
// terraform-provider-coder v0.6.10 and opted in to the functionality.
//
// Remove check once documentation is in place and we do a breaking
// release indicating startup script behavior has changed.
// https://github.com/coder/coder/issues/5749
if (agent.login_before_ready) {
return
}
return (
)
}
const DisconnectedStatus: React.FC = () => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")
return (
)
}
const ConnectingStatus: React.FC = () => {
const styles = useStyles()
const { t } = useTranslation("workspacePage")
return (
)
}
const TimeoutStatus: React.FC<{
agent: WorkspaceAgent
}> = ({ agent }) => {
const { t } = useTranslation("agent")
const styles = useStyles()
const anchorRef = useRef(null)
const [isOpen, setIsOpen] = useState(false)
const id = isOpen ? "timeout-popover" : undefined
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
}> = ({ agent }) => {
return (
)
}
const useStyles = makeStyles((theme) => ({
status: {
width: theme.spacing(1),
height: theme.spacing(1),
borderRadius: "100%",
},
connected: {
backgroundColor: theme.palette.success.light,
boxShadow: `0 0 12px 0 ${theme.palette.success.light}`,
},
disconnected: {
backgroundColor: theme.palette.text.secondary,
},
"@keyframes pulse": {
"0%": {
opacity: 1,
},
"50%": {
opacity: 0.4,
},
"100%": {
opacity: 1,
},
},
connecting: {
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),
},
errorWarning: {
color: theme.palette.error.main,
width: theme.spacing(2.5),
height: theme.spacing(2.5),
position: "relative",
top: theme.spacing(1),
},
}))