-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add and track connection status, use components for app load
Signed-off-by: Mason Fish <mason@looky.cloud>
- Loading branch information
Mason Fish
committed
Oct 21, 2020
1 parent
b561367
commit 94cd1c3
Showing
36 changed files
with
247 additions
and
603 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` | ||
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> | ||
<StyledP>{errorMsg}</StyledP> | ||
<StyledButton | ||
onClick={onClick} | ||
text={isFetching ? "" : "Retry"} | ||
icon={isFetching ? <MacSpinner /> : null} | ||
/> | ||
</PageWrap> | ||
) | ||
} | ||
|
||
export default ConnectionError |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.