-
Notifications
You must be signed in to change notification settings - Fork 129
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Connection status handling #1150
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import React, {useState} from "react" | ||
|
||
import MacSpinner from "./MacSpinner" | ||
import styled from "styled-components" | ||
import {Cluster} from "../state/Clusters/types" | ||
import ToolbarButton from "./Toolbar/Button" | ||
import {useDispatch} from "react-redux" | ||
import {initCurrentTab} from "../flows/initCurrentTab" | ||
|
||
const PageWrap = styled.div` | ||
width: 100%; | ||
height: 100%; | ||
display: flex; | ||
align-items: center; | ||
flex-direction: column; | ||
` | ||
|
||
const StyledHeader = styled.h1` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This text style is called "heading/page" in sketch. Will you add it to the styled components theme then include it here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. sure thing |
||
margin: 110px 0 0 0; | ||
color: var(--aqua); | ||
${(p) => p.theme.typography.headingPage} | ||
` | ||
|
||
const StyledP = styled.p` | ||
margin: 18px 0 0 0; | ||
color: ${(p) => p.theme.colors.aqua}; | ||
${(p) => p.theme.typography.labelNormal} | ||
` | ||
|
||
const StyledButton = styled(ToolbarButton)` | ||
margin: 36px 0 0 0; | ||
` | ||
|
||
type Props = { | ||
conn: Cluster | ||
} | ||
|
||
const ConnectionError = ({conn}: Props) => { | ||
const dispatch = useDispatch() | ||
const [isFetching, setIsFetching] = useState(false) | ||
|
||
const onClick = async () => { | ||
setIsFetching(true) | ||
// add wait here so ui feedback is more visible to user | ||
await new Promise((res) => setTimeout(res, 500)) | ||
await dispatch(initCurrentTab()) | ||
setIsFetching(false) | ||
} | ||
|
||
const {host, port} = conn | ||
const errorMsg = isFetching | ||
? "Attempting to connect..." | ||
: `The service at ${host}:${port} could not be reached.` | ||
|
||
return ( | ||
<PageWrap> | ||
<StyledHeader>Connection Error</StyledHeader> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe when it's retrying, you hide this title and change the paragraph text to "Attempting to connect..." |
||
<StyledP>{errorMsg}</StyledP> | ||
<StyledButton | ||
onClick={onClick} | ||
text={isFetching ? "" : "Retry"} | ||
icon={isFetching ? <MacSpinner /> : null} | ||
/> | ||
</PageWrap> | ||
) | ||
} | ||
|
||
export default ConnectionError |
This file was deleted.
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh nice! Easy