fix loading perf when switching tabs (#3169)

This commit is contained in:
Aditya Bist
2018-11-13 13:06:45 -08:00
committed by GitHub
parent 6697c075cb
commit 0efb89d6ff
4 changed files with 49 additions and 15 deletions

View File

@@ -15,7 +15,7 @@ import 'vs/css!sql/base/browser/ui/table/media/table';
import * as dom from 'vs/base/browser/dom';
import * as nls from 'vs/nls';
import * as sqlops from 'sqlops';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
import { Table } from 'sql/base/browser/ui/table/table';
import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
@@ -41,7 +41,7 @@ export const ROW_HEIGHT: number = 45;
templateUrl: decodeURI(require.toUrl('./alertsView.component.html')),
providers: [{ provide: TabChild, useExisting: forwardRef(() => AlertsViewComponent) }],
})
export class AlertsViewComponent extends JobManagementView implements OnInit {
export class AlertsViewComponent extends JobManagementView implements OnInit, OnDestroy {
private columns: Array<Slick.Column<any>> = [
{
@@ -69,6 +69,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
private _isCloud: boolean;
private _alertsCacheObject: AlertsCacheObject;
private _didTabChange: boolean;
@ViewChild('jobalertsgrid') _gridEl: ElementRef;
public alerts: sqlops.AgentAlertInfo[];
@@ -86,6 +87,7 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
@Inject(IKeybindingService) keybindingService: IKeybindingService,
@Inject(IDashboardService) _dashboardService: IDashboardService) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
this._didTabChange = false;
this._isCloud = commonService.connectionManagementService.connectionInfo.serverInfo.isCloud;
let alertsCacheObjectMap = this._jobManagementService.alertsCacheObjectMap;
let alertsCache = alertsCacheObjectMap[this._serverName];
@@ -102,7 +104,11 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
// set base class elements
this._visibilityElement = this._gridEl;
this._parentComponent = this._agentViewComponent;
}
}
ngOnDestroy() {
this._didTabChange = true;
}
public layout() {
let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
@@ -166,8 +172,10 @@ export class AlertsViewComponent extends JobManagementView implements OnInit {
// TODO: handle error
}
this._showProgressWheel = false;
if (this.isVisible) {
if (this.isVisible && !this._didTabChange) {
this._cd.detectChanges();
} else if (this._didTabChange) {
return;
}
});
}

View File

@@ -15,7 +15,7 @@ import 'vs/css!sql/base/browser/ui/table/media/table';
import * as sqlops from 'sqlops';
import * as nls from 'vs/nls';
import * as dom from 'vs/base/browser/dom';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
import { Table } from 'sql/base/browser/ui/table/table';
import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
@@ -47,7 +47,7 @@ export const ROW_HEIGHT: number = 45;
providers: [{ provide: TabChild, useExisting: forwardRef(() => JobsViewComponent) }],
})
export class JobsViewComponent extends JobManagementView implements OnInit {
export class JobsViewComponent extends JobManagementView implements OnInit, OnDestroy {
private columns: Array<Slick.Column<any>> = [
{
@@ -91,6 +91,8 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
private jobSchedules: { [jobId: string]: sqlops.AgentJobScheduleInfo[]; } = Object.create(null);
public contextAction = NewJobAction;
private _didTabChange: boolean;
@ViewChild('jobsgrid') _gridEl: ElementRef;
constructor(
@@ -107,6 +109,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
@Inject(IDashboardService) _dashboardService: IDashboardService
) {
super(commonService, _dashboardService, contextMenuService, keybindingService, instantiationService);
this._didTabChange = false;
let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
let jobCache = jobCacheObjectMap[this._serverName];
if (jobCache) {
@@ -126,6 +129,10 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e)));
}
ngOnDestroy() {
this._didTabChange = true;
}
public layout() {
let jobsViewToolbar = $('jobsview-component .actionbar-container').get(0);
let statusBar = $('.part.statusbar').get(0);
@@ -208,8 +215,10 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
}
this._showProgressWheel = false;
if (this.isVisible) {
if (this.isVisible && !this._didTabChange) {
this._cd.detectChanges();
} else if (this._didTabChange) {
return;
}
});
}
@@ -579,7 +588,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
private async curateJobHistory(jobs: sqlops.AgentJobInfo[], ownerUri: string) {
const self = this;
jobs.forEach(async (job) => {
await this._jobManagementService.getJobHistory(ownerUri, job.jobId, job.name).then((result) => {
await this._jobManagementService.getJobHistory(ownerUri, job.jobId, job.name).then(async(result) => {
if (result) {
self.jobSteps[job.jobId] = result.steps ? result.steps : [];
self.jobAlerts[job.jobId] = result.alerts ? result.alerts : [];
@@ -594,7 +603,10 @@ export class JobsViewComponent extends JobManagementView implements OnInit {
} else {
previousRuns = jobHistories;
}
self.createJobChart(job.jobId, previousRuns);
// dont create the charts if the tab changed
if (!self._didTabChange) {
self.createJobChart(job.jobId, previousRuns);
}
if (self._agentViewComponent.expanded.has(job.jobId)) {
let lastJobHistory = jobHistories[jobHistories.length - 1];
let item = self.dataView.getItemById(job.jobId + '.error');

View File

@@ -15,7 +15,7 @@ import 'vs/css!sql/base/browser/ui/table/media/table';
import * as dom from 'vs/base/browser/dom';
import * as nls from 'vs/nls';
import * as sqlops from 'sqlops';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Table } from 'sql/base/browser/ui/table/table';
import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
@@ -42,7 +42,7 @@ export const ROW_HEIGHT: number = 45;
providers: [{ provide: TabChild, useExisting: forwardRef(() => OperatorsViewComponent) }],
})
export class OperatorsViewComponent extends JobManagementView implements OnInit {
export class OperatorsViewComponent extends JobManagementView implements OnInit, OnDestroy {
private columns: Array<Slick.Column<any>> = [
{
@@ -68,6 +68,7 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
private _isCloud: boolean;
private _operatorsCacheObject: OperatorsCacheObject;
private _didTabChange: boolean;
@ViewChild('operatorsgrid') _gridEl: ElementRef;
public operators: sqlops.AgentOperatorInfo[];
@@ -104,6 +105,10 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
this._parentComponent = this._agentViewComponent;
}
ngOnDestroy() {
this._didTabChange = true;
}
public layout() {
let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
if (height < 0) {
@@ -169,8 +174,10 @@ export class OperatorsViewComponent extends JobManagementView implements OnInit
// TODO: handle error
}
this._showProgressWheel = false;
if (this.isVisible) {
if (this.isVisible && !this._didTabChange) {
this._cd.detectChanges();
} else if (this._didTabChange) {
return;
}
});
}

View File

@@ -15,7 +15,7 @@ import 'vs/css!sql/base/browser/ui/table/media/table';
import * as dom from 'vs/base/browser/dom';
import * as sqlops from 'sqlops';
import * as nls from 'vs/nls';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Table } from 'sql/base/browser/ui/table/table';
import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
@@ -42,7 +42,7 @@ export const ROW_HEIGHT: number = 45;
providers: [{ provide: TabChild, useExisting: forwardRef(() => ProxiesViewComponent) }],
})
export class ProxiesViewComponent extends JobManagementView implements OnInit {
export class ProxiesViewComponent extends JobManagementView implements OnInit, OnDestroy {
private NewProxyText: string = nls.localize('jobProxyToolbar-NewItem', "New Proxy");
private RefreshText: string = nls.localize('jobProxyToolbar-Refresh', "Refresh");
@@ -75,6 +75,7 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
public proxies: sqlops.AgentProxyInfo[];
public readonly contextAction = NewProxyAction;
private _didTabChange: boolean;
@ViewChild('proxiesgrid') _gridEl: ElementRef;
constructor(
@@ -108,6 +109,10 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
this._parentComponent = this._agentViewComponent;
}
ngOnDestroy() {
this._didTabChange = true;
}
public layout() {
let height = dom.getContentHeight(this._gridEl.nativeElement) - 10;
if (height < 0) {
@@ -172,8 +177,10 @@ export class ProxiesViewComponent extends JobManagementView implements OnInit {
// TODO: handle error
}
this._showProgressWheel = false;
if (this.isVisible) {
if (this.isVisible && !this._didTabChange) {
this._cd.detectChanges();
} else if (this._didTabChange) {
return;
}
});
}