mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
implement show error in panelcorner
This commit is contained in:
parent
9f88a22b4c
commit
1c5118748a
@ -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');
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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 }) => {
|
||||
|
@ -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 && (
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user