ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-22 17:22:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add loading spinner for insight widgets while they're in a loading state (#4136)

Browse Source 
- This was very confusing without status indicator, is it complete or in progress?

Please let me know if you see issues with this e.g. was there a reason we didn't do this up to now?

Initial state:

![image](https://user-images.githubusercontent.com/10819925/52883300-4e5d5f00-311f-11e9-988c-f7a70dc0a899.png)

On loading / error:
![image](https://user-images.githubusercontent.com/10819925/52883203-faeb1100-311e-11e9-9757-13a5fd4104c6.png)
This commit is contained in:
Kevin Cunnane
2019-02-22 16:00:06 -08:00
committed by GitHub
parent 51cf2df2f8
commit 889d5e5b28
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sql/parts/dashboard/dashboard.module.ts
View File

@@ -59,12 +59,13 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox.component';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox.component';
import { EditableDropDown } from 'sql/base/browser/ui/editableDropdown/editableDropdown.component';
import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
import LoadingSpinner from 'sql/parts/modelComponents/loadingSpinner.component';
let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer,
DashboardWidgetContainer, DashboardGridContainer, DashboardErrorContainer, DashboardNavSection, ModelViewContent, WebviewContent, WidgetContent,
ComponentHostDirective, BreadcrumbComponent, ControlHostContent, DashboardControlHostContainer,
JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, AlertsViewComponent, ProxiesViewComponent, OperatorsViewComponent,
DashboardModelViewContainer, ModelComponentWrapper, Checkbox, EditableDropDown, SelectBox, InputBox,];
DashboardModelViewContainer, ModelComponentWrapper, Checkbox, EditableDropDown, SelectBox, InputBox, LoadingSpinner ];
/* Panel */
import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';

6
src/sql/parts/dashboard/widgets/insights/insightsWidget.component.ts
View File

@@ -48,6 +48,7 @@ interface IStorageResult {
<div *ngIf="lastUpdated" style="font-style: italic; font-size: 80%; margin-left: 5px">{{lastUpdated}}</div>
<div style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px)">
<ng-template component-host></ng-template>
<loading-spinner [loading]="_loading"></loading-spinner>
</div>`,
styles: [':host { width: 100%; height: 100% }']
})
@@ -58,6 +59,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
private _typeKey: string;
private _init: boolean = false;
private _loading: boolean = true;
private _intervalTimer: IntervalTimer;
public error: string;
@@ -86,6 +88,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
let cancelablePromise = createCancelablePromise(() => {
return promise.then(
result => {
this._loading = false;
if (this._init) {
this._updateChild(result);
this.setupInterval();
@@ -94,6 +97,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
}
},
error => {
this._loading = false;
if (isPromiseCanceledError(error)) {
return;
}
@@ -117,10 +121,12 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
if (this.queryObv) {
this._register(toDisposableSubscription(this.queryObv.subscribe(
result => {
this._loading = false;
this._updateChild(result);
this.setupInterval();
},
error => {
this._loading = false;
this.showError(error);
}
)));