include rs information in error

This commit is contained in:
Matthias Hannig 2018-08-05 18:39:11 +02:00
parent 058ce19858
commit 2fc765066e
5 changed files with 65 additions and 140 deletions

View File

@ -1,6 +1,5 @@
.error-notify {
min-width: 250px;
margin-left: -125px;
width: 420px;
border-bottom: 7px solid #7c0002;
background-color: rgba(255,0,0,0.8);
color: #fff;
@ -8,19 +7,19 @@
padding: 16px;
position: fixed;
display: table;
z-index: 2;
z-index: 999;
right: 30px;
top: 20px;
.error-icon {
display: table-cell;
width: 60px;
padding: 10px 10px 0 10px;
padding: 8px 10px 0 10px;
text-align: center;
vertical-align: top;
> i {
font-size: 2em;
font-size: 3em;
border-radius: 100%;
}
}
@ -33,4 +32,11 @@
margin-top: 6px;
}
}
.error-dismiss {
position: absolute;
right: 5px;
top: 0px;
cursor: pointer;
}
}

View File

@ -1,7 +1,10 @@
import _ from 'underscore'
import React from 'react'
import {connect} from 'react-redux'
import {resetApiError} from './actions'
import {infoFromError} from './utils'
class ErrorsPage extends React.Component {
@ -15,7 +18,6 @@ class ErrorsPage extends React.Component {
}
let status = null;
if (this.props.error.response) {
status = this.props.error.response.status;
}
@ -26,6 +28,15 @@ class ErrorsPage extends React.Component {
let body = null;
// Find affected routeserver
const errorInfo = infoFromError(this.props.error);
const rsId = errorInfo.routeserver_id;
let rs = null;
if (rsId !== null) {
rs = _.findWhere(this.props.routeservers, { id: rsId });
}
if (status == 429) {
body = (
<div className="error-message">
@ -34,12 +45,21 @@ class ErrorsPage extends React.Component {
</div>
);
} else {
let errorStatus = "";
if (this.props.error.response) {
errorStatus = " (got HTTP " + this.props.error.response.status + ")";
}
if (errorInfo) {
errorStatus = ` (got ${errorInfo.tag})`;
}
body = (
<div className="error-message">
<p>
Alice has trouble connecting to the API
{this.props.error.response &&
" (got HTTP " + this.props.error.response.status + ")"}
Alice has trouble connecting to the API
{rs &&
<span> of <b>{rs.name}</b></span>}
{errorStatus}
.
</p>
<p>If this problem persist, we suggest you try again later.</p>
@ -49,6 +69,10 @@ class ErrorsPage extends React.Component {
return (
<div className="error-notify">
<div className="error-dismiss">
<i className="fa fa-times-circle" aria-hidden="true"
onClick={() => this.resetApiError()}></i>
</div>
<div className="error-icon">
<i className="fa fa-times-circle" aria-hidden="true"></i>
</div>
@ -60,6 +84,7 @@ class ErrorsPage extends React.Component {
export default connect(
(state) => ({
error: state.errors.error
error: state.errors.error,
routeservers: state.routeservers.all,
})
)(ErrorsPage);

View File

@ -0,0 +1,12 @@
/*
* Helper: Get info from api error
*/
export const infoFromError = function(error) {
if (error.response && error.response.data && error.response.data.code) {
return error.response.data;
}
return null;
}

View File

@ -19,18 +19,9 @@ export const LOAD_ROUTESERVER_PROTOCOL_REQUEST = '@birdseye/LOAD_ROUTESERVER_PRO
export const LOAD_ROUTESERVER_PROTOCOL_SUCCESS = '@birdseye/LOAD_ROUTESERVER_PROTOCOL_SUCCESS';
export const LOAD_ROUTESERVER_PROTOCOL_ERROR = '@birdseye/LOAD_ROUTESERVER_PROTOCOL_ERROR';
export const LOAD_ROUTESERVER_ROUTES_REQUEST = '@birdseye/LOAD_ROUTESERVER_ROUTES_REQUEST';
export const LOAD_ROUTESERVER_ROUTES_SUCCESS = '@birdseye/LOAD_ROUTESERVER_ROUTES_SUCCESS';
export const LOAD_ROUTESERVER_ROUTES_ERROR = '@birdseye/LOAD_ROUTESERVER_ROUTES_ERROR';
export const LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS = '@birdseye/LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS';
export const LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS = '@birdseye/LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS';
export const SET_PROTOCOLS_FILTER_VALUE = '@birdseye/SET_PROTOCOLS_FILTER_VALUE';
export const SET_PROTOCOLS_FILTER = '@birdseye/SET_PROTOCOLS_FILTER';
export const SET_ROUTES_FILTER_VALUE = '@birdseye/SET_ROUTES_FILTER_VALUE';
// Action Creators
export function loadRouteserversRequest() {
@ -112,7 +103,7 @@ export function loadRouteserverStatus(routeserverId) {
})
.catch((error) => {
dispatch(apiError(error));
dispatch(loadRouteserverStatusError(routeserverId, error.data));
dispatch(loadRouteserverStatusError(routeserverId, error));
});
}
}
@ -145,74 +136,7 @@ export function loadRouteserverProtocol(routeserverId) {
dispatch(setProtocolsFilterValue(""));
dispatch(loadRouteserverProtocolSuccess(routeserverId, data.neighbours));
})
.catch(error => dispatch(apiError(error)));
}
}
export function loadRouteserverRoutesRequest(routeserverId, protocolId) {
return {
type: LOAD_ROUTESERVER_ROUTES_REQUEST,
payload: {
routeserverId: routeserverId,
protocolId: protocolId,
}
}
}
export function loadRouteserverRoutesSuccess(routeserverId, protocolId, routes) {
return {
type: LOAD_ROUTESERVER_ROUTES_SUCCESS,
payload: {
routeserverId: routeserverId,
protocolId: protocolId,
routes: routes
}
}
}
export function loadRouteserverRoutes(routeserverId, protocolId) {
return (dispatch) => {
dispatch(loadRouteserverRoutesRequest(routeserverId, protocolId))
axios.get(`/api/routeservers/${routeserverId}/neighbours/${protocolId}/routes`)
.then(({data}) => {
dispatch(
loadRouteserverRoutesSuccess(routeserverId, protocolId, data.imported)
);
dispatch(
loadRouteserverRoutesFilteredSuccess(routeserverId, protocolId, data.filtered)
);
dispatch(
loadRouteserverRoutesNoexportSuccess(routeserverId, protocolId, data.not_exported)
);
dispatch(setRoutesFilterValue(""));
})
.catch(error => dispatch(apiError(error)));
}
}
export function loadRouteserverRoutesFilteredSuccess(routeserverId, protocolId, routes) {
return {
type: LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS,
payload: {
routeserverId: routeserverId,
protocolId: protocolId,
routes: routes
}
}
}
export function loadRouteserverRoutesNoexportSuccess(routeserverId, protocolId, routes) {
return {
type: LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS,
payload: {
routeserverId: routeserverId,
protocolId: protocolId,
routes: routes
}
.catch((error) => dispatch(apiError(error)));
}
}
@ -238,12 +162,3 @@ export function setProtocolsFilter(value) {
}
export function setRoutesFilterValue(value) {
return {
type: SET_ROUTES_FILTER_VALUE,
payload: {
routesFilterValue: value
}
}
}

View File

@ -3,17 +3,13 @@
import {LOAD_ROUTESERVERS_REQUEST,
LOAD_ROUTESERVERS_SUCCESS,
LOAD_ROUTESERVER_STATUS_SUCCESS,
LOAD_ROUTESERVER_STATUS_ERROR,
LOAD_ROUTESERVER_PROTOCOL_REQUEST,
LOAD_ROUTESERVER_PROTOCOL_SUCCESS,
LOAD_ROUTESERVER_ROUTES_REQUEST,
LOAD_ROUTESERVER_ROUTES_SUCCESS,
LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS,
LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS,
SET_PROTOCOLS_FILTER_VALUE,
SET_PROTOCOLS_FILTER,
@ -26,12 +22,12 @@ import {LOAD_REJECT_REASONS_SUCCESS,
const initialState = {
all: [],
noexport: {},
filtered: {},
errors: {},
details: {},
protocols: {},
routes: {},
reject_reasons: {},
reject_id: 0,
@ -44,11 +40,8 @@ const initialState = {
protocolsFilterValue: "",
protocolsFilter: "",
routesFilterValue: "",
isLoading: false,
routesAreLoading: false,
protocolsAreLoading: false
};
@ -66,11 +59,6 @@ export default function reducer(state = initialState, action) {
isLoading: false
});
case LOAD_ROUTESERVER_ROUTES_REQUEST:
return Object.assign({}, state, {
routesAreLoading: true
});
case LOAD_ROUTESERVER_PROTOCOL_REQUEST:
return Object.assign({}, state, {
protocolsAreLoading: true
@ -85,31 +73,6 @@ export default function reducer(state = initialState, action) {
protocolsAreLoading: false
});
case LOAD_ROUTESERVER_ROUTES_SUCCESS:
var routes = Object.assign({}, state.routes, {
[action.payload.protocolId]: action.payload.routes
});
return Object.assign({}, state, {
routes: routes,
routesAreLoading: false
});
case LOAD_ROUTESERVER_ROUTES_FILTERED_SUCCESS:
var filtered = Object.assign({}, state.filtered, {
[action.payload.protocolId]: action.payload.routes
});
return Object.assign({}, state, {
filtered: filtered,
});
case LOAD_ROUTESERVER_ROUTES_NOEXPORT_SUCCESS:
var noexport = Object.assign({}, state.noexport, {
[action.payload.protocolId]: action.payload.routes
});
return Object.assign({}, state, {
noexport: noexport,
});
case LOAD_NOEXPORT_REASONS_SUCCESS:
case LOAD_REJECT_REASONS_SUCCESS:
return Object.assign({}, state, action.payload);
@ -123,6 +86,11 @@ export default function reducer(state = initialState, action) {
details: details
});
case LOAD_ROUTESERVER_STATUS_ERROR:
console.log("ROUTESERVER STATUS ERROR:", action);
return state;
case SET_PROTOCOLS_FILTER_VALUE:
return Object.assign({}, state, {
protocolsFilterValue: action.payload.value
@ -141,4 +109,3 @@ export default function reducer(state = initialState, action) {
}