IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Use the same panel loading indicator in explore as on dashboard's panel

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-28 12:58:10 +01:00
parent 2ff62c42ac
commit 05edb3e5ad
3 changed files with 7 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/features/explore/Panel.tsx
View File

@ -13,7 +13,6 @@ export default class Panel extends PureComponent<Props> {
render() { render() {
const { isOpen, loading } = this.props; const { isOpen, loading } = this.props;
const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'; const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader';
return ( return (
<div className="explore-panel panel-container"> <div className="explore-panel panel-container">
<div className="explore-panel__header" onClick={this.onClickToggle}> <div className="explore-panel__header" onClick={this.onClickToggle}>
@ -24,7 +23,11 @@ export default class Panel extends PureComponent<Props> {
</div> </div>
{isOpen && ( {isOpen && (
<div className="explore-panel__body"> <div className="explore-panel__body">
<div className={loaderClass} /> {loading && (
<span className="panel-loading">
<i className="fa fa-spinner fa-spin" />
</span>
)}
{this.props.children} {this.props.children}
</div> </div>
)} )}

4
public/sass/pages/_dashboard.scss
View File

@ -144,8 +144,8 @@ div.flot-text {
.panel-loading { .panel-loading {
position: absolute; position: absolute;
top: -3px; top: 0;
right: 0px; right: 3px;
z-index: 800; z-index: 800;
font-size: $font-size-sm; font-size: $font-size-sm;
color: $text-color-weak; color: $text-color-weak;

34
public/sass/pages/_explore.scss
View File

@ -112,40 +112,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.explore-panel__loader {
height: 2px;
position: relative;
overflow: hidden;
background: none;
margin: $panel-margin / 2;
transition: background-color 1s ease;
}
.explore-panel__loader--active {
background: $text-color-faint;
}
.explore-panel__loader--active:after {
content: ' ';
display: block;
width: 25%;
top: 0;
top: -50%;
height: 250%;
position: absolute;
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
animation-iteration-count: 100;
background: $blue;
}
@keyframes loader {
from {
left: -25%;
}
to {
left: 100%;
}
}
.datasource-picker { .datasource-picker {
min-width: 200px; min-width: 200px;