Commit 4848963f authored by ashu8912's avatar ashu8912
Browse files

frontend: Show error if there is any while fetching config

We want to tell the user what went wrong while fetching the config.
Thus this patch shows the error in the UI if there is any while config
fetch.
No related merge requests found
Showing with 15 additions and 12 deletions
+15 -12
......@@ -272,7 +272,7 @@ interface AuthRouteProps {
function AuthRoute(props: AuthRouteProps) {
const { children, sidebar, requiresAuth = true, requiresCluster = true, ...other } = props;
const clusters = useClustersConf();
const {clusters} = useClustersConf();
const redirectRoute = getCluster() ? 'login' : 'chooser';
useSidebarItem(sidebar);
......
......@@ -21,10 +21,9 @@ interface ReactRouterLocationStateIface {
function Auth() {
const history = useHistory();
const clusterConf = useClustersConf();
const [token, setToken] = React.useState('');
const [showError, setShowError] = React.useState(false);
const clusters = useClustersConf();
const {clusters} = useClustersConf();
function onAuthClicked() {
loginWithToken(token).then(code => {
......@@ -46,7 +45,7 @@ function Auth() {
disableBackdropClick
>
<DialogTitle id="responsive-dialog-title">
{Object.keys(clusterConf).length > 1 ? `Authentication: ${getCluster()}` : 'Authentication'}
{Object.keys(clusters).length > 1 ? `Authentication: ${getCluster()}` : 'Authentication'}
</DialogTitle>
<DialogContent>
<DialogContentText>
......
......@@ -34,7 +34,7 @@ interface ReactRouterLocationStateIface {
function AuthChooser(){
const history = useHistory();
const location = useLocation();
const clusters = useClustersConf();
const {clusters} = useClustersConf();
const dispatch = useDispatch();
const isDevMode = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
const [testingAuth, setTestingAuth] = React.useState(false);
......
......@@ -36,7 +36,7 @@ const useClusterTitleStyle = makeStyles(theme => ({
export function ClusterTitle() {
const classes = useClusterTitleStyle();
const cluster = useCluster();
const clusters = useClustersConf();
const {clusters} = useClustersConf();
const [showChooser, setShowChooser] = React.useState(false);
useHotkeys('ctrl+shift+l', () => setShowChooser(true));
......@@ -217,7 +217,7 @@ export function ClusterDialog(props: ClusterDialogProps) {
function Chooser(props: ClusterDialogProps) {
const history = useHistory();
const clusters = useClustersConf();
const {clusters, error} = useClustersConf();
const {open = null, onClose, ...otherProps} = props;
// Only used if open is not provided
const [show, setShow] = React.useState(props.open);
......@@ -270,9 +270,9 @@ function Chooser(props: ClusterDialogProps) {
{clusterList.length === 0 ?
<React.Fragment>
<DialogContentText>
Wait while fetching clusters…
{error ? error : 'Wait while fetching clusters…'}
</DialogContentText>
<Loader />
{ !!error || <Loader /> }
</React.Fragment>
:
<React.Fragment>
......
......@@ -77,7 +77,8 @@ interface Config {
// Hook for getting or fetching the clusters configuration.
export function useClustersConf() {
const dispatch = useDispatch();
const clusters = useTypedSelector(state => state.config.clusters);
const clustersState = useTypedSelector(state => state.config);
const clusters = clustersState.clusters;
function fetchConfig() {
request('/config', {}, false, false)
......@@ -107,7 +108,7 @@ export function useClustersConf() {
// eslint-disable-next-line
[]);
return clusters;
return {...clustersState};
}
export function useCluster() {
......@@ -115,7 +116,7 @@ export function useCluster() {
// Make sure we update when changing clusters.
// @todo: We need a better way to do this.
const location = useLocation();
const clusters = useClustersConf();
const {clusters} = useClustersConf();
React.useEffect(() => {
const currentCluster = getCluster();
......
......@@ -5,10 +5,12 @@ export interface ConfigState {
clusters: {
[clusterName: string]: Cluster;
};
error: string;
}
export const INITIAL_STATE: ConfigState = {
clusters: {},
error: ''
};
function reducer(state = INITIAL_STATE, action: Action) {
......@@ -16,6 +18,7 @@ function reducer(state = INITIAL_STATE, action: Action) {
switch (action.type) {
case CONFIG_NEW:
newState.clusters = {...action.config.clusters};
newState.error = action.config.error;
break;
default:
break;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment