From 0f087915f683201557bdc719e15514e16ff5cde5 Mon Sep 17 00:00:00 2001 From: Aditya Bist Date: Thu, 26 Apr 2018 15:01:23 -0700 Subject: [PATCH] Agent/loading icon (#1263) * added progress wheel to show jobs loading * added loading wheel to jobs view page too --- src/sql/parts/jobManagement/common/media/jobs.css | 10 +++++++++- .../jobManagement/views/jobHistory.component.html | 4 +++- .../parts/jobManagement/views/jobHistory.component.ts | 9 +++++++++ src/sql/parts/jobManagement/views/jobHistory.css | 11 +++++++++++ .../parts/jobManagement/views/jobsView.component.html | 1 + .../parts/jobManagement/views/jobsView.component.ts | 8 ++++++++ 6 files changed, 41 insertions(+), 2 deletions(-) diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css index 8d0e811346..aab0e1b4fc 100644 --- a/src/sql/parts/jobManagement/common/media/jobs.css +++ b/src/sql/parts/jobManagement/common/media/jobs.css @@ -22,8 +22,9 @@ jobhistory-component { } .vs-dark .job-heading-container { - height: 32px; + height: 49px; border-bottom: 3px solid #444444; + display: -webkit-box; } #jobsDiv .jobview-grid { @@ -182,4 +183,11 @@ jobsview-component .jobview-grid > .monaco-table .slick-viewport > .grid-canvas .vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { border-left: 1px dotted white; +} + +.job-heading-container > .icon.in-progress { + height: 20px; + width: 20px; + padding-top: 16px; + padding-left: 15px; } \ No newline at end of file diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.html b/src/sql/parts/jobManagement/views/jobHistory.component.html index e7df4ef7bd..a58b0534bf 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.html +++ b/src/sql/parts/jobManagement/views/jobHistory.component.html @@ -4,8 +4,10 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ --> - +

Jobs | {{this._agentJobInfo?.name}}

+
+
diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.ts b/src/sql/parts/jobManagement/views/jobHistory.component.ts index 929bba2dc7..6ddcfd6aa8 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.ts +++ b/src/sql/parts/jobManagement/views/jobHistory.component.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./jobHistory'; +import 'vs/css!sql/media/icons/common-icons'; import { OnInit, OnChanges, Component, Inject, Input, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, Injectable } from '@angular/core'; import { AgentJobHistoryInfo, AgentJobInfo } from 'sqlops'; import { IThemeService } from 'vs/platform/theme/common/themeService'; @@ -60,6 +61,7 @@ export class JobHistoryComponent extends Disposable implements OnInit { private _jobCacheObject: JobCacheObject; private _notificationService: INotificationService; private _agentJobInfo: AgentJobInfo; + private _noJobsAvailable: boolean = false; constructor( @Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService, @@ -146,7 +148,10 @@ export class JobHistoryComponent extends Disposable implements OnInit { } else if (jobHistories && jobHistories.length === 0 ){ this._showPreviousRuns = false; this._showSteps = false; + this._noJobsAvailable = true; this._cd.detectChanges(); + } else { + this.loadHistory(); } this._jobCacheObject.prevJobID = this._agentViewComponent.jobId; } else if (this._isVisible === true && this._agentViewComponent.refresh) { @@ -274,6 +279,10 @@ export class JobHistoryComponent extends Disposable implements OnInit { return time.replace('T', ' '); } + private showProgressWheel(): boolean { + return this._showPreviousRuns !== true && this._noJobsAvailable === false; + } + private setActions(): void { let startIcon: HTMLElement = $('.icon-start').get(0); let stopIcon: HTMLElement = $('.icon-stop').get(0); diff --git a/src/sql/parts/jobManagement/views/jobHistory.css b/src/sql/parts/jobManagement/views/jobHistory.css index 7b1eb61e11..7362ceeed2 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.css +++ b/src/sql/parts/jobManagement/views/jobHistory.css @@ -251,4 +251,15 @@ table.step-list tr.step-row td { jobhistory-component .history-details .step-table.prev-run-list .monaco-scrollable-element { overflow-y: scroll !important; +} + +jobhistory-component .jobhistory-heading-container { + display: -webkit-box; +} + +jobhistory-component > .jobhistory-heading-container > .icon.in-progress { + width: 20px; + height: 20px; + padding-top: 16px; + padding-left: 20px; } \ No newline at end of file diff --git a/src/sql/parts/jobManagement/views/jobsView.component.html b/src/sql/parts/jobManagement/views/jobsView.component.html index 039503144b..b975790ae3 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.html +++ b/src/sql/parts/jobManagement/views/jobsView.component.html @@ -7,6 +7,7 @@

Jobs

No Jobs Available

+
\ No newline at end of file diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index dfa1a3ad55..016e66b479 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/src/sql/parts/jobManagement/views/jobsView.component.ts @@ -9,6 +9,7 @@ import 'vs/css!sql/parts/grid/media/styles'; import 'vs/css!sql/parts/grid/media/slick.grid'; import 'vs/css!sql/parts/grid/media/slickGrid'; import 'vs/css!../common/media/jobs'; +import 'vs/css!sql/media/icons/common-icons'; import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core'; import * as Utils from 'sql/parts/connection/common/utils'; @@ -72,6 +73,7 @@ export class JobsViewComponent implements AfterContentChecked { public jobHistories: { [jobId: string]: sqlops.AgentJobHistoryInfo[]; } = Object.create(null); private _serverName: string; private _isCloud: boolean; + private _showProgressWheel: boolean; constructor( @Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService, @@ -99,18 +101,22 @@ export class JobsViewComponent implements AfterContentChecked { this.isVisible = true; if (!this.isInitialized) { if (this._jobCacheObject.serverName === this._serverName && this._jobCacheObject.jobs.length > 0) { + this._showProgressWheel = true; this.jobs = this._jobCacheObject.jobs; this.onFirstVisible(true); this.isInitialized = true; } else { + this._showProgressWheel = true; this.onFirstVisible(false); this.isInitialized = true; } } } else if (this.isVisible === true && this._agentViewComponent.refresh === true) { + this._showProgressWheel = true; this.onFirstVisible(false); this._agentViewComponent.refresh = false; } else if (this.isVisible === true && this._agentViewComponent.refresh === false) { + this._showProgressWheel = true; this.onFirstVisible(true); } else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) { this.isVisible = false; @@ -219,6 +225,8 @@ export class JobsViewComponent implements AfterContentChecked { let currentTarget = e.currentTarget; currentTarget.title = currentTarget.innerText; }); + this._showProgressWheel = false; + this._cd.detectChanges(); this.loadJobHistories(); }