implement show error in panelcorner

This commit is contained in:
Peter Holmberg 2019-02-12 17:01:07 +01:00
parent 9f88a22b4c
commit 1c5118748a
4 changed files with 40 additions and 33 deletions

View File

@ -34,7 +34,6 @@ export interface Props {
maxDataPoints?: number;
children: (r: RenderProps) => JSX.Element;
onDataResponse?: (data: DataQueryResponse) => void;
onError?: (errorMessage: string) => void;
}
export interface State {
@ -147,7 +146,7 @@ export class DataPanel extends Component<Props, State> {
} catch (err) {
console.log('Loading error', err);
this.setState({ isFirstLoad: false });
this.props.onError('Request Error');
throw new Error('Request Error');
}
};

View File

@ -119,6 +119,15 @@ export class PanelChrome extends PureComponent<Props, State> {
return this.hasPanelSnapshot ? snapshotDataToPanelData(panel) : null;
}
onError = (errorMessage: string) => {
if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
this.setState({
loading: LoadingState.Error,
errorMessage: errorMessage,
});
}
};
renderPanelPlugin(loading: LoadingState, panelData: PanelData, width: number, height: number): JSX.Element {
const { panel, plugin } = this.props;
const { timeRange, renderCounter } = this.state;
@ -174,15 +183,6 @@ export class PanelChrome extends PureComponent<Props, State> {
);
};
onError = (errorMessage: string) => {
if (this.state.loading !== LoadingState.Error || this.state.errorMessage !== errorMessage) {
this.setState({
loading: LoadingState.Error,
errorMessage: errorMessage,
});
}
};
render() {
const { dashboard, panel } = this.props;
const { timeInfo } = this.state;
@ -206,6 +206,7 @@ export class PanelChrome extends PureComponent<Props, State> {
description={panel.description}
scopedVars={panel.scopedVars}
links={panel.links}
error={this.state.errorMessage}
/>
<ErrorBoundary>
{({ error, errorInfo }) => {

View File

@ -18,6 +18,7 @@ export interface Props {
description?: string;
scopedVars?: string;
links?: [];
error?: string;
}
interface ClickCoordinates {
@ -71,7 +72,7 @@ export class PanelHeader extends Component<Props, State> {
const isFullscreen = false;
const isLoading = false;
const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
const { panel, dashboard, timeInfo, scopedVars } = this.props;
const { panel, dashboard, timeInfo, scopedVars, error } = this.props;
const title = templateSrv.replaceWithText(panel.title, scopedVars);
return (
@ -82,6 +83,7 @@ export class PanelHeader extends Component<Props, State> {
description={panel.description}
scopedVars={panel.scopedVars}
links={panel.links}
error={error}
/>
<div className={panelHeaderClass}>
{isLoading && (

View File

@ -18,13 +18,17 @@ interface Props {
description?: string;
scopedVars?: string;
links?: [];
error?: string;
}
export class PanelHeaderCorner extends Component<Props> {
timeSrv: TimeSrv = getTimeSrv();
getInfoMode = () => {
const { panel } = this.props;
const { panel, error } = this.props;
if (error) {
return InfoModes.Error;
}
if (!!panel.description) {
return InfoModes.Info;
}
@ -42,7 +46,7 @@ export class PanelHeaderCorner extends Component<Props> {
const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
const html = (
return (
<div className="markdown-html">
<div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
{panel.links &&
@ -62,10 +66,19 @@ export class PanelHeaderCorner extends Component<Props> {
)}
</div>
);
return html;
};
renderCornerType(infoMode: InfoModes, content: string | JSX.Element) {
return (
<Tooltip content={content} placement="bottom-start">
<div className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}>
<i className="fa" />
<span className="panel-info-corner-inner" />
</div>
</Tooltip>
);
}
render() {
const infoMode: InfoModes | undefined = this.getInfoMode();
@ -73,23 +86,15 @@ export class PanelHeaderCorner extends Component<Props> {
return null;
}
return (
<>
{infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
<Tooltip
content={this.getInfoContent()}
placement="bottom-start"
>
<div
className={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
>
<i className="fa" />
<span className="panel-info-corner-inner" />
</div>
</Tooltip>
) : null}
</>
);
if (infoMode === InfoModes.Error) {
return this.renderCornerType(infoMode, this.props.error);
}
if (infoMode === InfoModes.Info) {
return this.renderCornerType(infoMode, this.getInfoContent());
}
return null;
}
}