mirror of https://github.com/apache/superset.git
feat: show more information when loading chart (#27255)
This commit is contained in:
parent
b1adede1ee
commit
fbc8943fbd
|
@ -128,6 +128,20 @@ const Styles = styled.div`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const LoadingDiv = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
`;
|
||||||
|
|
||||||
|
const MessageSpan = styled.span`
|
||||||
|
display: block;
|
||||||
|
margin: ${({ theme }) => theme.gridUnit * 4}px auto;
|
||||||
|
width: fit-content;
|
||||||
|
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||||
|
`;
|
||||||
|
|
||||||
const MonospaceDiv = styled.div`
|
const MonospaceDiv = styled.div`
|
||||||
font-family: ${({ theme }) => theme.typography.families.monospace};
|
font-family: ${({ theme }) => theme.typography.families.monospace};
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
@ -232,16 +246,49 @@ class Chart extends React.PureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderSpinner(databaseName) {
|
||||||
|
const message = databaseName
|
||||||
|
? t('Waiting on %s', databaseName)
|
||||||
|
: t('Waiting on database...');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoadingDiv>
|
||||||
|
<Loading position="inline-centered" />
|
||||||
|
<MessageSpan>{message}</MessageSpan>
|
||||||
|
</LoadingDiv>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChartContainer() {
|
||||||
|
return (
|
||||||
|
<div className="slice_container" data-test="slice-container">
|
||||||
|
{this.props.isInView ||
|
||||||
|
!isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
|
||||||
|
isCurrentUserBot() ? (
|
||||||
|
<ChartRenderer
|
||||||
|
{...this.props}
|
||||||
|
source={this.props.dashboardId ? 'dashboard' : 'explore'}
|
||||||
|
data-test={this.props.vizType}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Loading />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
height,
|
height,
|
||||||
chartAlert,
|
chartAlert,
|
||||||
chartStatus,
|
chartStatus,
|
||||||
|
datasource,
|
||||||
errorMessage,
|
errorMessage,
|
||||||
chartIsStale,
|
chartIsStale,
|
||||||
queriesResponse = [],
|
queriesResponse = [],
|
||||||
width,
|
width,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
const databaseName = datasource?.database?.name;
|
||||||
|
|
||||||
const isLoading = chartStatus === 'loading';
|
const isLoading = chartStatus === 'loading';
|
||||||
this.renderContainerStartTime = Logger.getTimestamp();
|
this.renderContainerStartTime = Logger.getTimestamp();
|
||||||
|
@ -297,20 +344,9 @@ class Chart extends React.PureComponent {
|
||||||
height={height}
|
height={height}
|
||||||
width={width}
|
width={width}
|
||||||
>
|
>
|
||||||
<div className="slice_container" data-test="slice-container">
|
{isLoading
|
||||||
{this.props.isInView ||
|
? this.renderSpinner(databaseName)
|
||||||
!isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
|
: this.renderChartContainer()}
|
||||||
isCurrentUserBot() ? (
|
|
||||||
<ChartRenderer
|
|
||||||
{...this.props}
|
|
||||||
source={this.props.dashboardId ? 'dashboard' : 'explore'}
|
|
||||||
data-test={this.props.vizType}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Loading />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{isLoading && <Loading />}
|
|
||||||
</Styles>
|
</Styles>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue