|
@@ -1,5 +1,6 @@
|
|
|
// Library
|
|
// Library
|
|
|
import React, { Component } from 'react';
|
|
import React, { Component } from 'react';
|
|
|
|
|
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
|
|
|
|
|
|
|
|
// Services
|
|
// Services
|
|
|
import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
|
|
import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
|
|
@@ -139,7 +140,7 @@ export class DataPanel extends Component<Props, State> {
|
|
|
const timeSeries = response.data;
|
|
const timeSeries = response.data;
|
|
|
|
|
|
|
|
if (isFirstLoad && loading === LoadingState.Loading) {
|
|
if (isFirstLoad && loading === LoadingState.Loading) {
|
|
|
- return this.renderLoadingSpinner();
|
|
|
|
|
|
|
+ return this.renderLoadingState();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (!queries.length) {
|
|
if (!queries.length) {
|
|
@@ -152,7 +153,7 @@ export class DataPanel extends Component<Props, State> {
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- {this.renderLoadingSpinner()}
|
|
|
|
|
|
|
+ {this.renderLoadingState()}
|
|
|
{this.props.children({
|
|
{this.props.children({
|
|
|
timeSeries,
|
|
timeSeries,
|
|
|
loading,
|
|
loading,
|
|
@@ -161,15 +162,26 @@ export class DataPanel extends Component<Props, State> {
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- private renderLoadingSpinner(): JSX.Element {
|
|
|
|
|
|
|
+ private renderLoadingState(): JSX.Element {
|
|
|
const { loading } = this.state;
|
|
const { loading } = this.state;
|
|
|
-
|
|
|
|
|
if (loading === LoadingState.Loading) {
|
|
if (loading === LoadingState.Loading) {
|
|
|
return (
|
|
return (
|
|
|
<div className="panel-loading">
|
|
<div className="panel-loading">
|
|
|
<i className="fa fa-spinner fa-spin" />
|
|
<i className="fa fa-spinner fa-spin" />
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
|
|
+ } else if (loading === LoadingState.Error) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <Tooltip
|
|
|
|
|
+ content="Request Error"
|
|
|
|
|
+ className="popper__manager--block"
|
|
|
|
|
+ refClassName={`panel-info-corner panel-info-corner--error`}
|
|
|
|
|
+ placement="bottom-start"
|
|
|
|
|
+ >
|
|
|
|
|
+ <i className="fa" />
|
|
|
|
|
+ <span className="panel-info-corner-inner" />
|
|
|
|
|
+ </Tooltip>
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
return null;
|